@tsparticles/engine 4.0.0-beta.1 → 4.0.0-beta.2

package/umd/Core/CanvasManager.js

@@ -1,317 +0,0 @@
-(function (factory) {
-    if (typeof module === "object" && typeof module.exports === "object") {
-        var v = factory(require, exports);
-        if (v !== undefined) module.exports = v;
-    }
-    else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "../Utils/Utils.js", "./Utils/Constants.js", "../Utils/ColorUtils.js", "./RenderManager.js"], factory);
-    }
-})(function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.CanvasManager = void 0;
-    const Utils_js_1 = require("../Utils/Utils.js");
-    const Constants_js_1 = require("./Utils/Constants.js");
-    const ColorUtils_js_1 = require("../Utils/ColorUtils.js");
-    const RenderManager_js_1 = require("./RenderManager.js");
-    function setStyle(canvas, style, important = false) {
-        if (!style) {
-            return;
-        }
-        const element = canvas, elementStyle = element.style, keys = new Set();
-        for (let i = 0; i < elementStyle.length; i++) {
-            const key = elementStyle.item(i);
-            if (!key) {
-                continue;
-            }
-            keys.add(key);
-        }
-        for (let i = 0; i < style.length; i++) {
-            const key = style.item(i);
-            if (!key) {
-                continue;
-            }
-            keys.add(key);
-        }
-        for (const key of keys) {
-            const value = style.getPropertyValue(key);
-            if (value) {
-                elementStyle.setProperty(key, value, important ? "important" : "");
-            }
-            else {
-                elementStyle.removeProperty(key);
-            }
-        }
-    }
-    class CanvasManager {
-        element;
-        render;
-        size;
-        zoom = Constants_js_1.defaultZoom;
-        _container;
-        _generated;
-        _mutationObserver;
-        _originalStyle;
-        _pluginManager;
-        _pointerEvents;
-        _resizePlugins;
-        _standardSize;
-        _zoomCenter;
-        constructor(pluginManager, container) {
-            this._pluginManager = pluginManager;
-            this._container = container;
-            this.render = new RenderManager_js_1.RenderManager(pluginManager, container, this);
-            this._standardSize = {
-                height: 0,
-                width: 0,
-            };
-            const pxRatio = container.retina.pixelRatio, stdSize = this._standardSize;
-            this.size = {
-                height: stdSize.height * pxRatio,
-                width: stdSize.width * pxRatio,
-            };
-            this._generated = false;
-            this._resizePlugins = [];
-            this._pointerEvents = "none";
-        }
-        get _fullScreen() {
-            return this._container.actualOptions.fullScreen.enable;
-        }
-        destroy() {
-            this.stop();
-            if (this._generated) {
-                const element = this.element;
-                element?.remove();
-                this.element = undefined;
-            }
-            else {
-                this._resetOriginalStyle();
-            }
-            this.render.destroy();
-            this._resizePlugins = [];
-        }
-        getZoomCenter() {
-            const pxRatio = this._container.retina.pixelRatio, { width, height } = this.size;
-            if (this._zoomCenter) {
-                return this._zoomCenter;
-            }
-            return {
-                x: (width * Constants_js_1.half) / pxRatio,
-                y: (height * Constants_js_1.half) / pxRatio,
-            };
-        }
-        init() {
-            this._safeMutationObserver(obs => {
-                obs.disconnect();
-            });
-            this._mutationObserver = (0, Utils_js_1.safeMutationObserver)(records => {
-                for (const record of records) {
-                    if (record.type === "attributes" && record.attributeName === "style") {
-                        this._repairStyle();
-                    }
-                }
-            });
-            this.resize();
-            this._initStyle();
-            this.initBackground();
-            this._safeMutationObserver(obs => {
-                if (!this.element || !(this.element instanceof Node)) {
-                    return;
-                }
-                obs.observe(this.element, { attributes: true });
-            });
-            this.initPlugins();
-            this.render.init();
-        }
-        initBackground() {
-            const { _container } = this, options = _container.actualOptions, background = options.background, element = this.element;
-            if (!element) {
-                return;
-            }
-            const elementStyle = element.style, color = (0, ColorUtils_js_1.rangeColorToRgb)(this._pluginManager, background.color);
-            if (color) {
-                elementStyle.backgroundColor = (0, ColorUtils_js_1.getStyleFromRgb)(color, _container.hdr, background.opacity);
-            }
-            else {
-                elementStyle.backgroundColor = "";
-            }
-            elementStyle.backgroundImage = background.image || "";
-            elementStyle.backgroundPosition = background.position || "";
-            elementStyle.backgroundRepeat = background.repeat || "";
-            elementStyle.backgroundSize = background.size || "";
-        }
-        initPlugins() {
-            this._resizePlugins = [];
-            for (const plugin of this._container.plugins) {
-                if (plugin.resize) {
-                    this._resizePlugins.push(plugin);
-                }
-            }
-        }
-        loadCanvas(canvas) {
-            if (this._generated && this.element) {
-                this.element.remove();
-            }
-            const container = this._container;
-            this._generated =
-                Constants_js_1.generatedAttribute in canvas.dataset ? canvas.dataset[Constants_js_1.generatedAttribute] === "true" : this._generated;
-            this.element = canvas;
-            this.element.ariaHidden = "true";
-            this._originalStyle = (0, Utils_js_1.cloneStyle)(this.element.style);
-            const standardSize = this._standardSize;
-            standardSize.height = canvas.offsetHeight;
-            standardSize.width = canvas.offsetWidth;
-            const pxRatio = this._container.retina.pixelRatio, retinaSize = this.size;
-            canvas.height = retinaSize.height = standardSize.height * pxRatio;
-            canvas.width = retinaSize.width = standardSize.width * pxRatio;
-            const canSupportHdrQuery = (0, Utils_js_1.safeMatchMedia)("(color-gamut: p3)");
-            this.render.setContextSettings({
-                alpha: true,
-                colorSpace: canSupportHdrQuery?.matches && container.hdr ? "display-p3" : "srgb",
-                desynchronized: true,
-                willReadFrequently: false,
-            });
-            this.render.setContext(this.element.getContext("2d", this.render.settings));
-            this._safeMutationObserver(obs => {
-                obs.disconnect();
-            });
-            container.retina.init();
-            this.initBackground();
-            this._safeMutationObserver(obs => {
-                if (!this.element || !(this.element instanceof Node)) {
-                    return;
-                }
-                obs.observe(this.element, { attributes: true });
-            });
-        }
-        resize() {
-            if (!this.element) {
-                return false;
-            }
-            const container = this._container, currentSize = container.canvas._standardSize, newSize = {
-                width: this.element.offsetWidth,
-                height: this.element.offsetHeight,
-            }, pxRatio = container.retina.pixelRatio, retinaSize = {
-                width: newSize.width * pxRatio,
-                height: newSize.height * pxRatio,
-            };
-            if (newSize.height === currentSize.height &&
-                newSize.width === currentSize.width &&
-                retinaSize.height === this.element.height &&
-                retinaSize.width === this.element.width) {
-                return false;
-            }
-            const oldSize = { ...currentSize };
-            currentSize.height = newSize.height;
-            currentSize.width = newSize.width;
-            const canvasSize = this.size;
-            this.element.width = canvasSize.width = retinaSize.width;
-            this.element.height = canvasSize.height = retinaSize.height;
-            if (this._container.started) {
-                container.particles.setResizeFactor({
-                    width: currentSize.width / oldSize.width,
-                    height: currentSize.height / oldSize.height,
-                });
-            }
-            return true;
-        }
-        setPointerEvents(type) {
-            const element = this.element;
-            if (!element) {
-                return;
-            }
-            this._pointerEvents = type;
-            this._repairStyle();
-        }
-        setZoom(zoomLevel, center) {
-            this.zoom = zoomLevel;
-            this._zoomCenter = center;
-        }
-        stop() {
-            this._safeMutationObserver(obs => {
-                obs.disconnect();
-            });
-            this._mutationObserver = undefined;
-            this.render.stop();
-        }
-        async windowResize() {
-            if (!this.element || !this.resize()) {
-                return;
-            }
-            const container = this._container, needsRefresh = container.updateActualOptions();
-            container.particles.setDensity();
-            this._applyResizePlugins();
-            if (needsRefresh) {
-                await container.refresh();
-            }
-        }
-        _applyResizePlugins = () => {
-            for (const plugin of this._resizePlugins) {
-                plugin.resize?.();
-            }
-        };
-        _initStyle = () => {
-            const element = this.element, options = this._container.actualOptions;
-            if (!element) {
-                return;
-            }
-            if (this._fullScreen) {
-                this._setFullScreenStyle();
-            }
-            else {
-                this._resetOriginalStyle();
-            }
-            for (const key in options.style) {
-                if (!key || !(key in options.style)) {
-                    continue;
-                }
-                const value = options.style[key];
-                if (!value) {
-                    continue;
-                }
-                element.style.setProperty(key, value, "important");
-            }
-        };
-        _repairStyle = () => {
-            const element = this.element;
-            if (!element) {
-                return;
-            }
-            this._safeMutationObserver(observer => {
-                observer.disconnect();
-            });
-            this._initStyle();
-            this.initBackground();
-            const pointerEvents = this._pointerEvents;
-            element.style.pointerEvents = pointerEvents;
-            element.setAttribute("pointer-events", pointerEvents);
-            this._safeMutationObserver(observer => {
-                if (!(element instanceof Node)) {
-                    return;
-                }
-                observer.observe(element, { attributes: true });
-            });
-        };
-        _resetOriginalStyle = () => {
-            const element = this.element, originalStyle = this._originalStyle;
-            if (!element || !originalStyle) {
-                return;
-            }
-            setStyle(element, originalStyle, true);
-        };
-        _safeMutationObserver = callback => {
-            if (!this._mutationObserver) {
-                return;
-            }
-            callback(this._mutationObserver);
-        };
-        _setFullScreenStyle = () => {
-            const element = this.element;
-            if (!element) {
-                return;
-            }
-            setStyle(element, (0, Utils_js_1.getFullScreenStyle)(this._container.actualOptions.fullScreen.zIndex), true);
-        };
-    }
-    exports.CanvasManager = CanvasManager;
-});

package/umd/Core/Container.js

@@ -1,383 +0,0 @@
-(function (factory) {
-    if (typeof module === "object" && typeof module.exports === "object") {
-        var v = factory(require, exports);
-        if (v !== undefined) module.exports = v;
-    }
-    else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "../Utils/MathUtils.js", "./Utils/Constants.js", "./CanvasManager.js", "./Utils/EventListeners.js", "../Enums/Types/EventType.js", "../Options/Classes/Options.js", "./ParticlesManager.js", "./Retina.js", "../Utils/LogUtils.js", "../Utils/OptionsUtils.js"], factory);
-    }
-})(function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.Container = void 0;
-    const MathUtils_js_1 = require("../Utils/MathUtils.js");
-    const Constants_js_1 = require("./Utils/Constants.js");
-    const CanvasManager_js_1 = require("./CanvasManager.js");
-    const EventListeners_js_1 = require("./Utils/EventListeners.js");
-    const EventType_js_1 = require("../Enums/Types/EventType.js");
-    const Options_js_1 = require("../Options/Classes/Options.js");
-    const ParticlesManager_js_1 = require("./ParticlesManager.js");
-    const Retina_js_1 = require("./Retina.js");
-    const LogUtils_js_1 = require("../Utils/LogUtils.js");
-    const OptionsUtils_js_1 = require("../Utils/OptionsUtils.js");
-    function guardCheck(container) {
-        return !container.destroyed;
-    }
-    function updateDelta(delta, value, fpsLimit = Constants_js_1.defaultFps, smooth = false) {
-        delta.value = value;
-        delta.factor = smooth ? Constants_js_1.defaultFps / fpsLimit : (Constants_js_1.defaultFps * value) / Constants_js_1.millisecondsToSeconds;
-    }
-    function loadContainerOptions(pluginManager, container, ...sourceOptionsArr) {
-        const options = new Options_js_1.Options(pluginManager, container);
-        (0, OptionsUtils_js_1.loadOptions)(options, ...sourceOptionsArr);
-        return options;
-    }
-    class Container {
-        actualOptions;
-        canvas;
-        destroyed;
-        effectDrawers;
-        fpsLimit;
-        hdr;
-        id;
-        pageHidden;
-        particleCreatedPlugins;
-        particleDestroyedPlugins;
-        particlePositionPlugins;
-        particleUpdaters;
-        particles;
-        plugins;
-        retina;
-        shapeDrawers;
-        started;
-        zLayers;
-        _delay;
-        _delayTimeout;
-        _delta = { value: 0, factor: 0 };
-        _dispatchCallback;
-        _drawAnimationFrame;
-        _duration;
-        _eventListeners;
-        _firstStart;
-        _initialSourceOptions;
-        _lastFrameTime;
-        _lifeTime;
-        _onDestroy;
-        _options;
-        _paused;
-        _pluginManager;
-        _smooth;
-        _sourceOptions;
-        constructor(params) {
-            const { dispatchCallback, pluginManager, id, onDestroy, sourceOptions } = params;
-            this._pluginManager = pluginManager;
-            this._dispatchCallback = dispatchCallback;
-            this._onDestroy = onDestroy;
-            this.id = Symbol(id);
-            this.fpsLimit = 120;
-            this.hdr = false;
-            this._smooth = false;
-            this._delay = 0;
-            this._duration = 0;
-            this._lifeTime = 0;
-            this._firstStart = true;
-            this.started = false;
-            this.destroyed = false;
-            this._paused = true;
-            this._lastFrameTime = 0;
-            this.zLayers = 100;
-            this.pageHidden = false;
-            this._sourceOptions = sourceOptions;
-            this._initialSourceOptions = sourceOptions;
-            this.effectDrawers = new Map();
-            this.shapeDrawers = new Map();
-            this.particleUpdaters = [];
-            this.retina = new Retina_js_1.Retina(this);
-            this.canvas = new CanvasManager_js_1.CanvasManager(this._pluginManager, this);
-            this.particles = new ParticlesManager_js_1.ParticlesManager(this._pluginManager, this);
-            this.plugins = [];
-            this.particleDestroyedPlugins = [];
-            this.particleCreatedPlugins = [];
-            this.particlePositionPlugins = [];
-            this._options = loadContainerOptions(this._pluginManager, this);
-            this.actualOptions = loadContainerOptions(this._pluginManager, this);
-            this._eventListeners = new EventListeners_js_1.EventListeners(this);
-            this.dispatchEvent(EventType_js_1.EventType.containerBuilt);
-        }
-        get animationStatus() {
-            return !this._paused && !this.pageHidden && guardCheck(this);
-        }
-        get options() {
-            return this._options;
-        }
-        get sourceOptions() {
-            return this._sourceOptions;
-        }
-        addLifeTime(value) {
-            this._lifeTime += value;
-        }
-        alive() {
-            return !this._duration || this._lifeTime <= this._duration;
-        }
-        destroy(remove = true) {
-            if (!guardCheck(this)) {
-                return;
-            }
-            this.stop();
-            this.particles.destroy();
-            this.canvas.destroy();
-            for (const [, effectDrawer] of this.effectDrawers) {
-                effectDrawer.destroy?.(this);
-            }
-            for (const [, shapeDrawer] of this.shapeDrawers) {
-                shapeDrawer.destroy?.(this);
-            }
-            for (const plugin of this.plugins) {
-                plugin.destroy?.();
-            }
-            this.effectDrawers = new Map();
-            this.shapeDrawers = new Map();
-            this.particleUpdaters = [];
-            this.plugins.length = 0;
-            this._pluginManager.clearPlugins(this);
-            this.destroyed = true;
-            this._onDestroy(remove);
-            this.dispatchEvent(EventType_js_1.EventType.containerDestroyed);
-        }
-        dispatchEvent(type, data) {
-            this._dispatchCallback(type, {
-                container: this,
-                data,
-            });
-        }
-        draw(force) {
-            if (!guardCheck(this)) {
-                return;
-            }
-            let refreshTime = force;
-            this._drawAnimationFrame = (0, MathUtils_js_1.animate)((timestamp) => {
-                if (refreshTime) {
-                    this._lastFrameTime = undefined;
-                    refreshTime = false;
-                }
-                this._nextFrame(timestamp);
-            });
-        }
-        async export(type, options = {}) {
-            for (const plugin of this.plugins) {
-                if (!plugin.export) {
-                    continue;
-                }
-                const res = await plugin.export(type, options);
-                if (!res.supported) {
-                    continue;
-                }
-                return res.blob;
-            }
-            (0, LogUtils_js_1.getLogger)().error(`Export plugin with type ${type} not found`);
-            return undefined;
-        }
-        async init() {
-            if (!guardCheck(this)) {
-                return;
-            }
-            const allContainerPlugins = new Map();
-            for (const plugin of this._pluginManager.plugins) {
-                const containerPlugin = await plugin.getPlugin(this);
-                if (containerPlugin.preInit) {
-                    await containerPlugin.preInit();
-                }
-                allContainerPlugins.set(plugin, containerPlugin);
-            }
-            await this.initDrawersAndUpdaters();
-            this._options = loadContainerOptions(this._pluginManager, this, this._initialSourceOptions, this.sourceOptions);
-            this.actualOptions = loadContainerOptions(this._pluginManager, this, this._options);
-            this.plugins.length = 0;
-            this.particleDestroyedPlugins.length = 0;
-            this.particleCreatedPlugins.length = 0;
-            this.particlePositionPlugins.length = 0;
-            for (const [plugin, containerPlugin] of allContainerPlugins) {
-                if (plugin.needsPlugin(this.actualOptions)) {
-                    this.plugins.push(containerPlugin);
-                    if (containerPlugin.particleCreated) {
-                        this.particleCreatedPlugins.push(containerPlugin);
-                    }
-                    if (containerPlugin.particleDestroyed) {
-                        this.particleDestroyedPlugins.push(containerPlugin);
-                    }
-                    if (containerPlugin.particlePosition) {
-                        this.particlePositionPlugins.push(containerPlugin);
-                    }
-                }
-            }
-            this.retina.init();
-            this.canvas.init();
-            this.updateActualOptions();
-            this.canvas.initBackground();
-            this.canvas.resize();
-            const { delay, duration, fpsLimit, hdr, smooth, zLayers } = this.actualOptions;
-            this.hdr = hdr;
-            this.zLayers = zLayers;
-            this._duration = (0, MathUtils_js_1.getRangeValue)(duration) * Constants_js_1.millisecondsToSeconds;
-            this._delay = (0, MathUtils_js_1.getRangeValue)(delay) * Constants_js_1.millisecondsToSeconds;
-            this._lifeTime = 0;
-            this.fpsLimit = fpsLimit > Constants_js_1.minFpsLimit ? fpsLimit : Constants_js_1.defaultFpsLimit;
-            this._smooth = smooth;
-            for (const plugin of this.plugins) {
-                await plugin.init?.();
-            }
-            await this.particles.init();
-            this.dispatchEvent(EventType_js_1.EventType.containerInit);
-            this.particles.setDensity();
-            for (const plugin of this.plugins) {
-                plugin.particlesSetup?.();
-            }
-            this.dispatchEvent(EventType_js_1.EventType.particlesSetup);
-        }
-        async initDrawersAndUpdaters() {
-            const pluginManager = this._pluginManager;
-            this.effectDrawers = await pluginManager.getEffectDrawers(this, true);
-            this.shapeDrawers = await pluginManager.getShapeDrawers(this, true);
-            this.particleUpdaters = await pluginManager.getUpdaters(this, true);
-        }
-        pause() {
-            if (!guardCheck(this)) {
-                return;
-            }
-            if (this._drawAnimationFrame !== undefined) {
-                (0, MathUtils_js_1.cancelAnimation)(this._drawAnimationFrame);
-                delete this._drawAnimationFrame;
-            }
-            if (this._paused) {
-                return;
-            }
-            for (const plugin of this.plugins) {
-                plugin.pause?.();
-            }
-            if (!this.pageHidden) {
-                this._paused = true;
-            }
-            this.dispatchEvent(EventType_js_1.EventType.containerPaused);
-        }
-        play(force) {
-            if (!guardCheck(this)) {
-                return;
-            }
-            const needsUpdate = this._paused || force;
-            if (this._firstStart && !this.actualOptions.autoPlay) {
-                this._firstStart = false;
-                return;
-            }
-            if (this._paused) {
-                this._paused = false;
-            }
-            if (needsUpdate) {
-                for (const plugin of this.plugins) {
-                    if (plugin.play) {
-                        plugin.play();
-                    }
-                }
-            }
-            this.dispatchEvent(EventType_js_1.EventType.containerPlay);
-            this.draw(needsUpdate ?? false);
-        }
-        async refresh() {
-            if (!guardCheck(this)) {
-                return;
-            }
-            this.stop();
-            return this.start();
-        }
-        async reset(sourceOptions) {
-            if (!guardCheck(this)) {
-                return;
-            }
-            this._initialSourceOptions = sourceOptions;
-            this._sourceOptions = sourceOptions;
-            this._options = loadContainerOptions(this._pluginManager, this, this._initialSourceOptions, this.sourceOptions);
-            this.actualOptions = loadContainerOptions(this._pluginManager, this, this._options);
-            return this.refresh();
-        }
-        async start() {
-            if (!guardCheck(this) || this.started) {
-                return;
-            }
-            await this.init();
-            this.started = true;
-            await new Promise(resolve => {
-                const start = async () => {
-                    this._eventListeners.addListeners();
-                    for (const plugin of this.plugins) {
-                        await plugin.start?.();
-                    }
-                    this.dispatchEvent(EventType_js_1.EventType.containerStarted);
-                    this.play();
-                    resolve();
-                };
-                this._delayTimeout = setTimeout(() => void start(), this._delay);
-            });
-        }
-        stop() {
-            if (!guardCheck(this) || !this.started) {
-                return;
-            }
-            if (this._delayTimeout) {
-                clearTimeout(this._delayTimeout);
-                delete this._delayTimeout;
-            }
-            this._firstStart = true;
-            this.started = false;
-            this._eventListeners.removeListeners();
-            this.pause();
-            this.particles.clear();
-            this.canvas.stop();
-            for (const plugin of this.plugins) {
-                plugin.stop?.();
-            }
-            this.particleCreatedPlugins.length = 0;
-            this.particleDestroyedPlugins.length = 0;
-            this.particlePositionPlugins.length = 0;
-            this._sourceOptions = this._options;
-            this.dispatchEvent(EventType_js_1.EventType.containerStopped);
-        }
-        updateActualOptions() {
-            let refresh = false;
-            for (const plugin of this.plugins) {
-                if (plugin.updateActualOptions) {
-                    refresh = plugin.updateActualOptions() || refresh;
-                }
-            }
-            return refresh;
-        }
-        _nextFrame = (timestamp) => {
-            try {
-                if (!this._smooth &&
-                    this._lastFrameTime !== undefined &&
-                    timestamp < this._lastFrameTime + Constants_js_1.millisecondsToSeconds / this.fpsLimit) {
-                    this.draw(false);
-                    return;
-                }
-                this._lastFrameTime ??= timestamp;
-                updateDelta(this._delta, timestamp - this._lastFrameTime, this.fpsLimit, this._smooth);
-                this.addLifeTime(this._delta.value);
-                this._lastFrameTime = timestamp;
-                if (this._delta.value > Constants_js_1.millisecondsToSeconds) {
-                    this.draw(false);
-                    return;
-                }
-                this.canvas.render.drawParticles(this._delta);
-                if (!this.alive()) {
-                    this.destroy();
-                    return;
-                }
-                if (this.animationStatus) {
-                    this.draw(false);
-                }
-            }
-            catch (e) {
-                (0, LogUtils_js_1.getLogger)().error("error in animation loop", e);
-            }
-        };
-    }
-    exports.Container = Container;
-});