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

package/umd/Core/CanvasManager.js

@@ -0,0 +1,317 @@
+(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

@@ -4,7 +4,7 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "../Utils/MathUtils.js", "./Utils/Constants.js", "./Canvas.js", "./Utils/EventListeners.js", "../Enums/Types/EventType.js", "../Options/Classes/Options.js", "./Particles.js", "./Retina.js", "../Utils/LogUtils.js", "../Utils/OptionsUtils.js"], factory);
+        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";
@@ -12,11 +12,11 @@
     exports.Container = void 0;
     const MathUtils_js_1 = require("../Utils/MathUtils.js");
     const Constants_js_1 = require("./Utils/Constants.js");
-    const Canvas_js_1 = require("./Canvas.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 Particles_js_1 = require("./Particles.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");
@@ -27,8 +27,8 @@
         delta.value = value;
         delta.factor = smooth ? Constants_js_1.defaultFps / fpsLimit : (Constants_js_1.defaultFps * value) / Constants_js_1.millisecondsToSeconds;
     }
-    function loadContainerOptions(engine, container, ...sourceOptionsArr) {
-        const options = new Options_js_1.Options(engine, container);
+    function loadContainerOptions(pluginManager, container, ...sourceOptionsArr) {
+        const options = new Options_js_1.Options(pluginManager, container);
         (0, OptionsUtils_js_1.loadOptions)(options, ...sourceOptionsArr);
         return options;
     }
@@ -36,6 +36,7 @@
         actualOptions;
         canvas;
         destroyed;
+        effectDrawers;
         fpsLimit;
         hdr;
         id;
@@ -43,28 +44,35 @@
         particleCreatedPlugins;
         particleDestroyedPlugins;
         particlePositionPlugins;
+        particleUpdaters;
         particles;
         plugins;
         retina;
+        shapeDrawers;
         started;
         zLayers;
         _delay;
         _delayTimeout;
         _delta = { value: 0, factor: 0 };
+        _dispatchCallback;
         _drawAnimationFrame;
         _duration;
-        _engine;
         _eventListeners;
         _firstStart;
         _initialSourceOptions;
         _lastFrameTime;
         _lifeTime;
+        _onDestroy;
         _options;
         _paused;
+        _pluginManager;
         _smooth;
         _sourceOptions;
-        constructor(engine, id, sourceOptions) {
-            this._engine = engine;
+        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;
@@ -81,17 +89,20 @@
             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 Canvas_js_1.Canvas(this, this._engine);
-            this.particles = new Particles_js_1.Particles(this._engine, 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._engine, this);
-            this.actualOptions = loadContainerOptions(this._engine, this);
+            this._options = loadContainerOptions(this._pluginManager, this);
+            this.actualOptions = loadContainerOptions(this._pluginManager, this);
             this._eventListeners = new EventListeners_js_1.EventListeners(this);
-            this._engine.dispatchEvent(EventType_js_1.EventType.containerBuilt, { container: this });
+            this.dispatchEvent(EventType_js_1.EventType.containerBuilt);
         }
         get animationStatus() {
             return !this._paused && !this.pageHidden && guardCheck(this);
@@ -115,19 +126,29 @@
             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._engine.clearPlugins(this);
+            this._pluginManager.clearPlugins(this);
             this.destroyed = true;
-            if (remove) {
-                const mainArr = this._engine.items, idx = mainArr.indexOf(this);
-                if (idx >= Constants_js_1.removeMinIndex) {
-                    mainArr.splice(idx, Constants_js_1.removeDeleteCount);
-                }
-            }
-            this._engine.dispatchEvent(EventType_js_1.EventType.containerDestroyed, { container: this });
+            this._onDestroy(remove);
+            this.dispatchEvent(EventType_js_1.EventType.containerDestroyed);
+        }
+        dispatchEvent(type, data) {
+            this._dispatchCallback(type, {
+                container: this,
+                data,
+            });
         }
         draw(force) {
             if (!guardCheck(this)) {
@@ -161,16 +182,16 @@
                 return;
             }
             const allContainerPlugins = new Map();
-            for (const plugin of this._engine.plugins) {
+            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.particles.initPlugins();
-            this._options = loadContainerOptions(this._engine, this, this._initialSourceOptions, this.sourceOptions);
-            this.actualOptions = loadContainerOptions(this._engine, this, this._options);
+            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;
@@ -206,12 +227,18 @@
                 await plugin.init?.();
             }
             await this.particles.init();
-            this._engine.dispatchEvent(EventType_js_1.EventType.containerInit, { container: this });
+            this.dispatchEvent(EventType_js_1.EventType.containerInit);
             this.particles.setDensity();
             for (const plugin of this.plugins) {
                 plugin.particlesSetup?.();
             }
-            this._engine.dispatchEvent(EventType_js_1.EventType.particlesSetup, { container: this });
+            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)) {
@@ -230,7 +257,7 @@
             if (!this.pageHidden) {
                 this._paused = true;
             }
-            this._engine.dispatchEvent(EventType_js_1.EventType.containerPaused, { container: this });
+            this.dispatchEvent(EventType_js_1.EventType.containerPaused);
         }
         play(force) {
             if (!guardCheck(this)) {
@@ -251,7 +278,7 @@
                     }
                 }
             }
-            this._engine.dispatchEvent(EventType_js_1.EventType.containerPlay, { container: this });
+            this.dispatchEvent(EventType_js_1.EventType.containerPlay);
             this.draw(needsUpdate ?? false);
         }
         async refresh() {
@@ -267,8 +294,8 @@
             }
             this._initialSourceOptions = sourceOptions;
             this._sourceOptions = sourceOptions;
-            this._options = loadContainerOptions(this._engine, this, this._initialSourceOptions, this.sourceOptions);
-            this.actualOptions = loadContainerOptions(this._engine, this, this._options);
+            this._options = loadContainerOptions(this._pluginManager, this, this._initialSourceOptions, this.sourceOptions);
+            this.actualOptions = loadContainerOptions(this._pluginManager, this, this._options);
             return this.refresh();
         }
         async start() {
@@ -283,7 +310,7 @@
                     for (const plugin of this.plugins) {
                         await plugin.start?.();
                     }
-                    this._engine.dispatchEvent(EventType_js_1.EventType.containerStarted, { container: this });
+                    this.dispatchEvent(EventType_js_1.EventType.containerStarted);
                     this.play();
                     resolve();
                 };
@@ -311,7 +338,7 @@
             this.particleDestroyedPlugins.length = 0;
             this.particlePositionPlugins.length = 0;
             this._sourceOptions = this._options;
-            this._engine.dispatchEvent(EventType_js_1.EventType.containerStopped, { container: this });
+            this.dispatchEvent(EventType_js_1.EventType.containerStopped);
         }
         updateActualOptions() {
             let refresh = false;
@@ -338,7 +365,7 @@
                     this.draw(false);
                     return;
                 }
-                this.canvas.drawParticles(this._delta);
+                this.canvas.render.drawParticles(this._delta);
                 if (!this.alive()) {
                     this.destroy();
                     return;