@tsparticles/editor/browser/Sections/Options/Particles/Links/LinksOptionsEditor.js

tsParticles Configuration Editor

import { EditorType } from "object-gui";
import { EditorBase } from "../../../../EditorBase";
export class LinksOptionsEditor extends EditorBase {
    constructor(particles) {
        super(particles);
    }
    addToGroup(parent) {
        this.group = parent.addGroup("links", "Links");
        this.options = this.group.data;
        this.addShadow();
        this.addTriangles();
        this.addProperties();
    }
    addProperties() {
        const optionsFunc = () => this.options();
        const options = optionsFunc();
        const color = typeof options.color === "string" ? options.color : options.color?.value;
        this.group.addProperty("blink", "Blink", EditorType.boolean).change(() => {
            void this.particles().refresh();
        });
        this.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 = value;
                }
                void this.particles().refresh();
            }
        });
        this.group.addProperty("consent", "Consent", EditorType.boolean).change(() => {
            void this.particles().refresh();
        });
        this.group.addProperty("distance", "Distance", EditorType.number).change(() => {
            void this.particles().refresh();
        });
        this.group.addProperty("enable", "Enable", EditorType.boolean).change(() => {
            void this.particles().refresh();
        });
        this.group
            .addProperty("frequency", "Frequency", EditorType.number)
            .min(0)
            .max(1)
            .step(0.01)
            .change(() => {
            void this.particles().refresh();
        });
        this.group.addProperty("id", "Id", EditorType.string).change(() => {
            void this.particles().refresh();
        });
        this.group
            .addProperty("opacity", "Opacity", EditorType.number)
            .change(() => {
            void this.particles().refresh();
        })
            .step(0.01)
            .min(0)
            .max(1);
        this.group.addProperty("warp", "Warp", EditorType.boolean).change(() => {
            void this.particles().refresh();
        });
        this.group.addProperty("width", "Width", EditorType.number).change(() => {
            void this.particles().refresh();
        });
    }
    addShadow() {
        const group = this.group.addGroup("shadow", "Shadow");
        const optionsFunc = group.data;
        const options = optionsFunc();
        const color = typeof options.color === "string" ? options.color : options.color?.value;
        group.addProperty("blur", "Blur", EditorType.boolean).change(() => {
            void this.particles().refresh();
        });
        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 {
                    if (options.color === undefined) {
                        options.color = {
                            value: value,
                        };
                    }
                    else {
                        options.color.value = value;
                    }
                }
            }
            void this.particles().refresh();
        });
        group.addProperty("enable", "Enable", EditorType.boolean).change(() => {
            void this.particles().refresh();
        });
    }
    addTriangles() {
        const group = this.group.addGroup("triangles", "Triangles");
        const optionsFunc = () => this.options().triangles;
        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 {
                    if (options.color === undefined) {
                        options.color = {
                            value: value,
                        };
                    }
                    else {
                        options.color.value = value;
                    }
                }
            }
            void this.particles().refresh();
        });
        group.addProperty("enable", "Enable", EditorType.boolean).change(() => {
            void this.particles().refresh();
        });
        group
            .addProperty("frequency", "Frequency", EditorType.number)
            .min(0)
            .max(1)
            .step(0.01)
            .change(() => {
            void this.particles().refresh();
        });
        group
            .addProperty("opacity", "Opacity", EditorType.number)
            .change(() => {
            void this.particles().refresh();
        })
            .step(0.01)
            .min(0)
            .max(1);
    }
}