@tsparticles/editor/browser/Sections/Options/Particles/Roll/RollOptionsEditor.js

tsParticles Configuration Editor

import { EditorType } from "object-gui";
import { EditorBase } from "../../../../EditorBase";
export class RollOptionsEditor extends EditorBase {
    constructor(particles) {
        super(particles);
    }
    addToGroup(parent) {
        this.group = parent.addGroup("roll", "Roll");
        this.options = this.group.data;
        this.addDarken();
        this.addEnlighten();
        this.addProperties();
    }
    addDarken() {
        const group = this.group.addGroup("darken", "Darken");
        group.addProperty("enable", "Enable", EditorType.boolean).change(() => {
            void this.particles().refresh();
        });
        group.addProperty("value", "Value", EditorType.number).change(() => {
            void this.particles().refresh();
        });
    }
    addEnlighten() {
        const group = this.group.addGroup("enlighten", "Enlighten");
        group.addProperty("enable", "Enable", EditorType.boolean).change(() => {
            void this.particles().refresh();
        });
        group.addProperty("value", "Value", EditorType.number).change(() => {
            void this.particles().refresh();
        });
    }
    addProperties() {
        const optionsFunc = this.options, options = optionsFunc(), getColor = () => {
            if (typeof options.backColor === "string") {
                return options.backColor;
            }
            else {
                if (options.backColor instanceof Array) {
                    return options.backColor[0];
                }
                else {
                    return options.backColor?.value;
                }
            }
        }, color = getColor();
        this.group.addProperty("backColor", "Back Color", EditorType.color, color, false).change((value) => {
            const options = optionsFunc();
            if (typeof value === "string") {
                if (typeof options.backColor === "string") {
                    options.backColor = value;
                }
                else {
                    if (options.backColor === undefined) {
                        options.backColor = {
                            value: value,
                        };
                    }
                    else {
                        if (options.backColor instanceof Array) {
                            options.backColor = {
                                value: value,
                            };
                        }
                        else {
                            options.backColor.value = value;
                        }
                    }
                }
            }
            void this.particles().refresh();
        });
        this.group.addProperty("enable", "Enable", EditorType.boolean).change(() => {
            void this.particles().refresh();
        });
        this.group.addProperty("speed", "Speed", EditorType.number).change(() => {
            void this.particles().refresh();
        });
    }
}