@tsparticles/editor/esm/Sections/Options/OptionsEditor.js

tsParticles Configuration Editor

import { tsParticles } from "@tsparticles/engine";
import { EditorType } from "object-gui";
import { BackgroundMaskOptionsEditor } from "./BackgroundMask/BackgroundMaskOptionsEditor";
import { BackgroundOptionsEditor } from "./Background/BackgroundOptionsEditor";
import { EditorBase } from "../../EditorBase";
import { FullScreenOptionsEditor } from "./FullScreen/FullScreenOptionsEditor";
import { InfectionOptionsEditor } from "./Infection/InfectionOptionsEditor";
import { InteractivityOptionsEditor } from "./Interactivity/InteractivityOptionsEditor";
import { MotionOptionsEditor } from "./Motion/MotionOptionsEditor";
import { ParticlesOptionsEditor } from "./Particles/ParticlesOptionsEditor";
import { editorChangedEvent } from "../../Utils";
export class OptionsEditor extends EditorBase {
    constructor(particles) {
        super(particles);
        tsParticles.addEventListener(editorChangedEvent, () => {
            void (async () => {
                await particles().refresh();
                this.options = () => particles().options;
            })();
        });
    }
    addToGroup(parent) {
        this.group = parent.addGroup("options", "Options", true);
        this.options = (() => this.group.data());
        this.addBackground();
        this.addBackgroundMask();
        this.addFullScreen();
        this.addInfection();
        this.addInteractivity();
        this.addMotion();
        this.addParticles();
        this.addProperties();
    }
    addBackground() {
        const options = new BackgroundOptionsEditor(this.particles);
        options.addToGroup(this.group);
    }
    addBackgroundMask() {
        const options = new BackgroundMaskOptionsEditor(this.particles);
        options.addToGroup(this.group);
    }
    addFullScreen() {
        const options = new FullScreenOptionsEditor(this.particles);
        options.addToGroup(this.group);
    }
    addInfection() {
        const options = new InfectionOptionsEditor(this.particles);
        options.addToGroup(this.group);
    }
    addInteractivity() {
        const options = new InteractivityOptionsEditor(this.particles);
        options.addToGroup(this.group);
    }
    addMotion() {
        const options = new MotionOptionsEditor(this.particles);
        options.addToGroup(this.group);
    }
    addParticles() {
        const options = new ParticlesOptionsEditor(this.particles);
        options.addToGroup(this.group);
    }
    addProperties() {
        this.group.addProperty("autoPlay", "Auto Play", EditorType.boolean).change(() => {
            void this.particles().refresh();
        });
        this.group.addProperty("detectRetina", "Detect Retina", EditorType.boolean).change(() => {
            void this.particles().refresh();
        });
        this.group.addProperty("fpsLimit", "FPS Limit", EditorType.number).change(() => {
            void this.particles().refresh();
        });
        this.group.addProperty("pauseOnBlur", "Pause on Blur", EditorType.boolean).change(() => {
            void this.particles().refresh();
        });
        this.group.addProperty("pauseOnOutsideViewport", "Pause on Outside Viewport", EditorType.boolean).change(() => {
            void this.particles().refresh();
        });
    }
}