@tsparticles/editor/esm/ParticlesEditor.js

tsParticles Configuration Editor

import { tsParticles } from "@tsparticles/engine";
import { Editor, EditorType } from "object-gui";
import { OptionsEditor } from "./Sections/Options/OptionsEditor";
export class ParticlesEditor extends Editor {
    constructor(particles) {
        super(particles.id.toString(), "tsParticles", () => particles);
        this.particles = particles;
    }
    addPreset(text, file) {
        if (!this._presets) {
            return;
        }
        this._presets.addItem(file, text);
    }
    customize() {
        super.customize();
        this.addOptions();
        this.addButtons();
        if (Object.keys(tsParticles.configs).length) {
            this.addConfigs();
        }
        this.addPresets();
    }
    addButtons() {
        this.addButton("play", "Play");
        this.addButton("pause", "Pause");
        this.addButton("refresh", "Refresh");
        this.addButton("start", "Start");
        this.addButton("stop", "Stop");
        this.addButton("exportConfig", "Export", false).click(() => {
            void (async () => {
                const blob = await this.particles.export("json");
                if (!blob) {
                    return;
                }
                const contentType = "application/json", url = URL.createObjectURL(blob), a = document.createElement("a");
                a.download = "particles.json";
                a.href = url;
                a.dataset.downloadUrl = [contentType, a.download, a.href].join(":");
                const evt = new MouseEvent("click", {
                    bubbles: true,
                    cancelable: false,
                    view: window,
                    detail: 0,
                    screenX: 0,
                    screenY: 0,
                    clientX: 0,
                    clientY: 0,
                    ctrlKey: false,
                    altKey: false,
                    shiftKey: false,
                    metaKey: false,
                    button: 0,
                    relatedTarget: null,
                });
                a.dispatchEvent(evt);
            })();
        });
    }
    addConfigs() {
        const configsEditor = this.addProperty("configs", "Configs", EditorType.select, "", false);
        configsEditor.change(value => {
            void (async () => {
                try {
                    const config = tsParticles.configs[value];
                    await this.particles.reset();
                    this.particles.options.load(config);
                    await this.particles.refresh();
                }
                catch {
                }
            })();
        });
        configsEditor.addItems([{ value: "" }, ...Object.keys(tsParticles.configs).map(t => ({ value: t }))].sort((a, b) => a.value.localeCompare(b.value)));
    }
    addOptions() {
        const options = new OptionsEditor(this.data);
        options.addToGroup(this);
    }
    addPresets() {
        this._presets = this.addProperty("preset", "Preset", EditorType.select, "", false);
        this._presets.change(value => {
            void (async () => {
                try {
                    const res = await fetch(value);
                    if (!res.ok) {
                        return;
                    }
                    await this.particles.reset();
                    this.particles.options.load((await res.json()));
                    await this.particles.refresh();
                }
                catch {
                }
            })();
        });
    }
}