@tsparticles/editor/esm/Sections/Options/Particles/Twinkle/TwinkleOptionsEditor.js

tsParticles Configuration Editor

import { EditorType } from "object-gui";
import { EditorBase } from "../../../../EditorBase";
export class TwinkleOptionsEditor extends EditorBase {
    constructor(particles) {
        super(particles);
    }
    addToGroup(parent, options) {
        this.group = parent.addGroup("twinkle", "Twinkle", true, options);
        this.options = this.group.data;
        this.addTwinkle();
    }
    addTwinkle() {
        this.addTwinkleValues(this.group.addGroup("lines", "Lines"));
        this.addTwinkleValues(this.group.addGroup("particles", "Particles"));
    }
    addTwinkleValues(group) {
        const optionsFunc = () => group.data();
        const options = optionsFunc();
        const color = typeof options.color === "string" ? options.color : options.color?.value;
        group.addProperty("color", "Color", EditorType.color, color, false).change((value) => {
            const options = optionsFunc();
            if (typeof value === "string") {
                if (typeof options.color === "string") {
                    options.color = value;
                }
                else {
                    options.color = {
                        value,
                    };
                }
            }
            void this.particles().refresh();
        });
        group.addProperty("enable", "Enable", EditorType.boolean).change(() => {
            void this.particles().refresh();
        });
        group.addProperty("frequency", "Frequency", EditorType.number).change(() => {
            void this.particles().refresh();
        });
        group
            .addProperty("opacity", "Opacity", EditorType.number)
            .change(() => {
            void this.particles().refresh();
        })
            .step(0.01)
            .min(0)
            .max(1);
    }
}