@tsparticles/engine/esm/Options/Classes/Options.js

Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.

import { deepExtend, executeOnSingleOrMultiple } from "../../Utils/Utils.js";
import { loadProperty, loadRangeProperty } from "../../Utils/OptionsUtils.js";
import { Background } from "./Background/Background.js";
import { FullScreen } from "./FullScreen/FullScreen.js";
import { OptionLoader } from "../../Utils/OptionLoader.js";
import { ResizeEvent } from "./ResizeEvent.js";
import { isBoolean } from "../../Utils/TypeUtils.js";
import { loadParticlesOptions } from "../../Utils/ParticlesOptionsLoader.js";
export class Options extends OptionLoader {
    autoPlay = true;
    background;
    clear = true;
    defaultThemes = {};
    delay = 0;
    detectRetina = true;
    duration = 0;
    fpsLimit = 120;
    fullScreen;
    hdr = true;
    key;
    name;
    palette;
    particles;
    pauseOnBlur = true;
    pauseOnOutsideViewport = true;
    preset;
    resize;
    smooth = false;
    style = {};
    zLayers = 100;
    #container;
    #pluginManager;
    constructor(pluginManager, container) {
        super();
        this.#pluginManager = pluginManager;
        this.#container = container;
        this.background = new Background();
        this.fullScreen = new FullScreen();
        this.particles = loadParticlesOptions(this.#pluginManager, this.#container);
        this.resize = new ResizeEvent();
    }
    doLoad(data) {
        if (data.preset !== undefined) {
            this.preset = data.preset;
            executeOnSingleOrMultiple(this.preset, preset => {
                this.#importPreset(preset);
            });
        }
        if (data.palette !== undefined) {
            this.palette = data.palette;
            this.#importPalette(this.palette);
        }
        loadProperty(this, "autoPlay", data.autoPlay);
        loadProperty(this, "clear", data.clear);
        loadProperty(this, "key", data.key);
        loadProperty(this, "name", data.name);
        loadRangeProperty(this, "delay", data.delay);
        loadProperty(this, "detectRetina", data.detectRetina);
        loadRangeProperty(this, "duration", data.duration);
        loadProperty(this, "fpsLimit", data.fpsLimit);
        loadProperty(this, "hdr", data.hdr);
        loadProperty(this, "pauseOnBlur", data.pauseOnBlur);
        loadProperty(this, "pauseOnOutsideViewport", data.pauseOnOutsideViewport);
        loadProperty(this, "zLayers", data.zLayers);
        this.background.load(data.background);
        const fullScreen = data.fullScreen;
        if (isBoolean(fullScreen)) {
            this.fullScreen.enable = fullScreen;
        }
        else {
            this.fullScreen.load(fullScreen);
        }
        this.particles.load(data.particles);
        this.resize.load(data.resize);
        this.style = deepExtend(this.style, data.style);
        loadProperty(this, "smooth", data.smooth);
        this.#pluginManager.plugins.forEach(plugin => {
            plugin.loadOptions(this.#container, this, data);
        });
    }
    #importPalette(palette) {
        const paletteData = this.#pluginManager.getPalette(palette);
        if (!paletteData) {
            return;
        }
        this.load({
            background: {
                color: paletteData.background,
            },
            blend: {
                enable: true,
                mode: paletteData.blendMode,
            },
            particles: {
                palette,
            },
        });
    }
    #importPreset(preset) {
        this.load(this.#pluginManager.getPreset(preset));
    }
}