@tsparticles/editor/esm/Sections/Options/Infection/InfectionOptionsEditor.js

tsParticles Configuration Editor

import { EditorType } from "object-gui";
import { EditorBase } from "../../../EditorBase";
export class InfectionOptionsEditor extends EditorBase {
    constructor(particles) {
        super(particles);
    }
    addToGroup(parent) {
        this.group = parent.addGroup("infection", "Infection");
        this.options = this.group.data;
        this.addStages();
        this.addProperties();
    }
    addProperties() {
        this.group.addProperty("cure", "Cure", EditorType.boolean).change(() => {
            void this.particles().refresh();
        });
        this.group.addProperty("delay", "Delay", EditorType.number).change(() => {
            void this.particles().refresh();
        });
        this.group.addProperty("enable", "Enable", EditorType.boolean).change(() => {
            void this.particles().refresh();
        });
        this.group.addProperty("infections", "Infections", EditorType.number).change(() => {
            void this.particles().refresh();
        });
    }
    addStage(parent, stages, index) {
        const stageGroup = parent.addGroup(index().toString(10), `Stage ${index()}`, true, stages);
        const stage = stageGroup.data;
        stageGroup.addProperty("color", "Color", EditorType.color, stage().color, false).change((value) => {
            if (typeof value === "string") {
                if (typeof stage().color === "string") {
                    stage().color = value;
                }
                else {
                    stage().color = {
                        value,
                    };
                }
            }
            void this.particles().refresh();
        });
        stageGroup.addProperty("duration", "Duration", EditorType.number).change(() => {
            void this.particles().refresh();
        });
        stageGroup.addProperty("infectedStage", "Infected Stage", EditorType.number).change(() => {
            void this.particles().refresh();
        });
        stageGroup.addProperty("radius", "Radius", EditorType.number).change(() => {
            void this.particles().refresh();
        });
        stageGroup.addProperty("rate", "Rate", EditorType.number).change(() => {
            void this.particles().refresh();
        });
    }
    addStages() {
        const options = this.options();
        const stagesGroup = this.group.addGroup("stages", "Stages");
        if (options && !options.stages) {
            options.stages = [];
        }
        if (options) {
            for (let i = 0; i < options.stages.length; i++) {
                this.addStage(stagesGroup, () => options.stages, () => i + 1);
            }
        }
        stagesGroup.addButton("addStage", "Add Stage", false).click(() => {
            this.addStage(stagesGroup, () => this.options().stages, () => this.options().stages.length);
            void this.particles().refresh();
        });
    }
}