@tsparticles/engine/browser/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 { isBoolean, isNull } from "../../Utils/TypeUtils.js";
import { Background } from "./Background/Background.js";
import { FullScreen } from "./FullScreen/FullScreen.js";
import { ResizeEvent } from "./ResizeEvent.js";
import { loadParticlesOptions } from "../../Utils/OptionsUtils.js";
import { setRangeValue } from "../../Utils/MathUtils.js";
export class Options {
    autoPlay;
    background;
    clear;
    defaultThemes;
    delay;
    detectRetina;
    duration;
    fpsLimit;
    fullScreen;
    hdr;
    key;
    name;
    palette;
    particles;
    pauseOnBlur;
    pauseOnOutsideViewport;
    preset;
    resize;
    smooth;
    style;
    zLayers;
    #container;
    #pluginManager;
    constructor(pluginManager, container) {
        this.#pluginManager = pluginManager;
        this.#container = container;
        this.autoPlay = true;
        this.background = new Background();
        this.clear = true;
        this.defaultThemes = {};
        this.delay = 0;
        this.fullScreen = new FullScreen();
        this.detectRetina = true;
        this.duration = 0;
        this.fpsLimit = 120;
        this.hdr = true;
        this.particles = loadParticlesOptions(this.#pluginManager, this.#container);
        this.pauseOnBlur = true;
        this.pauseOnOutsideViewport = true;
        this.resize = new ResizeEvent();
        this.smooth = false;
        this.style = {};
        this.zLayers = 100;
    }
    load(data) {
        if (isNull(data)) {
            return;
        }
        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);
        }
        if (data.autoPlay !== undefined) {
            this.autoPlay = data.autoPlay;
        }
        if (data.clear !== undefined) {
            this.clear = data.clear;
        }
        if (data.key !== undefined) {
            this.key = data.key;
        }
        if (data.name !== undefined) {
            this.name = data.name;
        }
        if (data.delay !== undefined) {
            this.delay = setRangeValue(data.delay);
        }
        const detectRetina = data.detectRetina;
        if (detectRetina !== undefined) {
            this.detectRetina = detectRetina;
        }
        if (data.duration !== undefined) {
            this.duration = setRangeValue(data.duration);
        }
        const fpsLimit = data.fpsLimit;
        if (fpsLimit !== undefined) {
            this.fpsLimit = fpsLimit;
        }
        if (data.hdr !== undefined) {
            this.hdr = data.hdr;
        }
        if (data.pauseOnBlur !== undefined) {
            this.pauseOnBlur = data.pauseOnBlur;
        }
        if (data.pauseOnOutsideViewport !== undefined) {
            this.pauseOnOutsideViewport = data.pauseOnOutsideViewport;
        }
        if (data.zLayers !== undefined) {
            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);
        if (data.smooth !== undefined) {
            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));
    };
}