@tsparticles/engine 4.0.0-alpha.5 → 4.0.0-beta.0

package/umd/Core/Particles.js

@@ -4,7 +4,7 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./Utils/Constants.js", "../Enums/Types/EventType.js", "../Enums/Modes/LimitMode.js", "./Particle.js", "./Utils/Point.js", "./Utils/QuadTree.js", "./Utils/Ranges.js", "../Utils/LogUtils.js", "../Utils/OptionsUtils.js"], factory);
+        define(["require", "exports", "./Utils/Constants.js", "../Enums/Types/EventType.js", "../Enums/Modes/LimitMode.js", "./Particle.js", "./Utils/SpatialHashGrid.js", "../Utils/LogUtils.js", "../Utils/OptionsUtils.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
@@ -14,101 +14,33 @@
     const EventType_js_1 = require("../Enums/Types/EventType.js");
     const LimitMode_js_1 = require("../Enums/Modes/LimitMode.js");
     const Particle_js_1 = require("./Particle.js");
-    const Point_js_1 = require("./Utils/Point.js");
-    const QuadTree_js_1 = require("./Utils/QuadTree.js");
-    const Ranges_js_1 = require("./Utils/Ranges.js");
+    const SpatialHashGrid_js_1 = require("./Utils/SpatialHashGrid.js");
     const LogUtils_js_1 = require("../Utils/LogUtils.js");
     const OptionsUtils_js_1 = require("../Utils/OptionsUtils.js");
-    const qTreeRectangle = (canvasSize) => {
-        const { height, width } = canvasSize;
-        return new Ranges_js_1.Rectangle(Constants_js_1.posOffset * width, Constants_js_1.posOffset * height, Constants_js_1.sizeFactor * width, Constants_js_1.sizeFactor * height);
-    };
     class Particles {
+        checkParticlePositionPlugins;
+        effectDrawers;
+        grid;
+        shapeDrawers;
+        updaters;
+        _array;
+        _container;
+        _engine;
+        _groupLimits;
+        _limit;
+        _maxZIndex;
+        _minZIndex;
+        _needsSort;
+        _nextId;
+        _particleResetPlugins;
+        _particleUpdatePlugins;
+        _pool;
+        _postParticleUpdatePlugins;
+        _postUpdatePlugins;
+        _resizeFactor;
+        _updatePlugins;
+        _zArray;
         constructor(engine, container) {
-            this._addToPool = (...particles) => {
-                this._pool.push(...particles);
-            };
-            this._applyDensity = (options, pluginsCount, group, groupOptions) => {
-                const numberOptions = options.number;
-                if (!numberOptions.density.enable) {
-                    if (group === undefined) {
-                        this._limit = numberOptions.limit.value;
-                    }
-                    else if (groupOptions?.number.limit.value ?? numberOptions.limit.value) {
-                        this._groupLimits.set(group, groupOptions?.number.limit.value ?? numberOptions.limit.value);
-                    }
-                    return;
-                }
-                const densityFactor = this._initDensityFactor(numberOptions.density), optParticlesNumber = numberOptions.value, optParticlesLimit = numberOptions.limit.value > Constants_js_1.minLimit ? numberOptions.limit.value : optParticlesNumber, particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + pluginsCount, particlesCount = Math.min(this.count, this.filter(t => t.group === group).length);
-                if (group === undefined) {
-                    this._limit = numberOptions.limit.value * densityFactor;
-                }
-                else {
-                    this._groupLimits.set(group, numberOptions.limit.value * densityFactor);
-                }
-                if (particlesCount < particlesNumber) {
-                    this.push(Math.abs(particlesNumber - particlesCount), undefined, options, group);
-                }
-                else if (particlesCount > particlesNumber) {
-                    this.removeQuantity(particlesCount - particlesNumber, group);
-                }
-            };
-            this._initDensityFactor = densityOptions => {
-                const container = this._container;
-                if (!container.canvas.element || !densityOptions.enable) {
-                    return Constants_js_1.defaultDensityFactor;
-                }
-                const canvas = container.canvas.element, pxRatio = container.retina.pixelRatio;
-                return (canvas.width * canvas.height) / (densityOptions.height * densityOptions.width * pxRatio ** Constants_js_1.squareExp);
-            };
-            this._pushParticle = (position, overrideOptions, group, initializer) => {
-                try {
-                    const particle = this._pool.pop() ?? new Particle_js_1.Particle(this._engine, this._container);
-                    particle.init(this._nextId, position, overrideOptions, group);
-                    let canAdd = true;
-                    if (initializer) {
-                        canAdd = initializer(particle);
-                    }
-                    if (!canAdd) {
-                        return;
-                    }
-                    this._array.push(particle);
-                    this._zArray.push(particle);
-                    this._nextId++;
-                    this._engine.dispatchEvent(EventType_js_1.EventType.particleAdded, {
-                        container: this._container,
-                        data: {
-                            particle,
-                        },
-                    });
-                    return particle;
-                }
-                catch (e) {
-                    (0, LogUtils_js_1.getLogger)().warning(`error adding particle: ${e}`);
-                }
-                return undefined;
-            };
-            this._removeParticle = (index, group, override) => {
-                const particle = this._array[index];
-                if (!particle) {
-                    return false;
-                }
-                if (particle.group !== group) {
-                    return false;
-                }
-                const zIdx = this._zArray.indexOf(particle);
-                this._array.splice(index, Constants_js_1.deleteCount);
-                this._zArray.splice(zIdx, Constants_js_1.deleteCount);
-                particle.destroy(override);
-                this._engine.dispatchEvent(EventType_js_1.EventType.particleRemoved, {
-                    container: this._container,
-                    data: {
-                        particle,
-                    },
-                });
-                this._addToPool(particle);
-                return true;
-            };
             this._engine = engine;
             this._container = container;
             this._nextId = 0;
@@ -118,12 +50,18 @@
             this._limit = 0;
             this._groupLimits = new Map();
             this._needsSort = false;
-            this._lastZIndex = 0;
-            this._pluginsInitialized = false;
-            const canvasSize = container.canvas.size;
-            this.quadTree = new QuadTree_js_1.QuadTree(qTreeRectangle(canvasSize), Constants_js_1.qTreeCapacity);
-            this.movers = [];
+            this._minZIndex = 0;
+            this._maxZIndex = 0;
+            this.grid = new SpatialHashGrid_js_1.SpatialHashGrid(Constants_js_1.spatialHashGridCellSize);
+            this.effectDrawers = new Map();
+            this.shapeDrawers = new Map();
             this.updaters = [];
+            this.checkParticlePositionPlugins = [];
+            this._particleResetPlugins = [];
+            this._particleUpdatePlugins = [];
+            this._postUpdatePlugins = [];
+            this._postParticleUpdatePlugins = [];
+            this._updatePlugins = [];
         }
         get count() {
             return this._array.length;
@@ -144,20 +82,61 @@
                             return;
                         }
                         break;
+                    default:
+                        break;
+                }
+            }
+            try {
+                const particle = this._pool.pop() ?? new Particle_js_1.Particle(this._engine, this._container);
+                particle.init(this._nextId, position, overrideOptions, group);
+                let canAdd = true;
+                if (initializer) {
+                    canAdd = initializer(particle);
+                }
+                if (!canAdd) {
+                    this._pool.push(particle);
+                    return;
                 }
+                this._array.push(particle);
+                this._zArray.push(particle);
+                this._nextId++;
+                this._engine.dispatchEvent(EventType_js_1.EventType.particleAdded, {
+                    container: this._container,
+                    data: {
+                        particle,
+                    },
+                });
+                return particle;
+            }
+            catch (e) {
+                (0, LogUtils_js_1.getLogger)().warning(`error adding particle: ${e}`);
             }
-            return this._pushParticle(position, overrideOptions, group, initializer);
+            return undefined;
         }
         clear() {
             this._array = [];
             this._zArray = [];
-            this._pluginsInitialized = false;
         }
         destroy() {
+            const container = this._container;
+            for (const [, effectDrawer] of this.effectDrawers) {
+                effectDrawer.destroy?.(container);
+            }
+            for (const [, shapeDrawer] of this.shapeDrawers) {
+                shapeDrawer.destroy?.(container);
+            }
             this._array = [];
+            this._pool.length = 0;
             this._zArray = [];
-            this.movers = [];
+            this.effectDrawers = new Map();
+            this.shapeDrawers = new Map();
             this.updaters = [];
+            this.checkParticlePositionPlugins = [];
+            this._particleResetPlugins = [];
+            this._particleUpdatePlugins = [];
+            this._postUpdatePlugins = [];
+            this._postParticleUpdatePlugins = [];
+            this._updatePlugins = [];
         }
         drawParticles(delta) {
             for (const particle of this._zArray) {
@@ -175,14 +154,46 @@
         }
         async init() {
             const container = this._container, options = container.actualOptions;
-            this._lastZIndex = 0;
+            this._minZIndex = 0;
+            this._maxZIndex = 0;
             this._needsSort = false;
+            this.checkParticlePositionPlugins = [];
+            this._updatePlugins = [];
+            this._particleUpdatePlugins = [];
+            this._postUpdatePlugins = [];
+            this._particleResetPlugins = [];
+            this._postParticleUpdatePlugins = [];
+            this.grid = new SpatialHashGrid_js_1.SpatialHashGrid(Constants_js_1.spatialHashGridCellSize * container.retina.pixelRatio);
             for (const plugin of container.plugins) {
                 if (plugin.redrawInit) {
                     await plugin.redrawInit();
                 }
+                if (plugin.checkParticlePosition) {
+                    this.checkParticlePositionPlugins.push(plugin);
+                }
+                if (plugin.update) {
+                    this._updatePlugins.push(plugin);
+                }
+                if (plugin.particleUpdate) {
+                    this._particleUpdatePlugins.push(plugin);
+                }
+                if (plugin.postUpdate) {
+                    this._postUpdatePlugins.push(plugin);
+                }
+                if (plugin.particleReset) {
+                    this._particleResetPlugins.push(plugin);
+                }
+                if (plugin.postParticleUpdate) {
+                    this._postParticleUpdatePlugins.push(plugin);
+                }
             }
             await this.initPlugins();
+            for (const drawer of this.effectDrawers.values()) {
+                await drawer.init?.(container);
+            }
+            for (const drawer of this.shapeDrawers.values()) {
+                await drawer.init?.(container);
+            }
             let handled = false;
             for (const plugin of container.plugins) {
                 handled = plugin.particlesInitialization?.() ?? handled;
@@ -207,15 +218,10 @@
             }
         }
         async initPlugins() {
-            if (this._pluginsInitialized) {
-                return;
-            }
             const container = this._container;
-            this.movers = await this._engine.getMovers(container, true);
+            this.effectDrawers = await this._engine.getEffectDrawers(container, true);
+            this.shapeDrawers = await this._engine.getShapeDrawers(container, true);
             this.updaters = await this._engine.getUpdaters(container, true);
-            for (const pathGenerator of container.pathGenerators.values()) {
-                pathGenerator.init(container);
-            }
         }
         push(nb, position, overrideOptions, group) {
             for (let i = 0; i < nb; i++) {
@@ -264,19 +270,15 @@
             this._applyDensity(options.particles, pluginsCount);
         }
         setLastZIndex(zIndex) {
-            this._lastZIndex = zIndex;
-            this._needsSort = this._needsSort || this._lastZIndex < zIndex;
+            this._needsSort ||= zIndex >= this._maxZIndex || (zIndex > this._minZIndex && zIndex < this._maxZIndex);
         }
         setResizeFactor(factor) {
             this._resizeFactor = factor;
         }
         update(delta) {
-            const container = this._container, particlesToDelete = new Set();
-            this.quadTree = new QuadTree_js_1.QuadTree(qTreeRectangle(container.canvas.size), Constants_js_1.qTreeCapacity);
-            for (const pathGenerator of container.pathGenerators.values()) {
-                pathGenerator.update();
-            }
-            for (const plugin of container.plugins) {
+            const particlesToDelete = new Set();
+            this.grid.clear();
+            for (const plugin of this._updatePlugins) {
                 plugin.update?.(delta);
             }
             const resizeFactor = this._resizeFactor;
@@ -288,27 +290,20 @@
                     particle.initialPosition.y *= resizeFactor.height;
                 }
                 particle.ignoresResizeRatio = false;
-                for (const plugin of this._container.plugins) {
-                    if (plugin.particleReset) {
-                        plugin.particleReset(particle);
-                    }
+                for (const plugin of this._particleResetPlugins) {
+                    plugin.particleReset?.(particle);
                 }
-                for (const plugin of this._container.plugins) {
+                for (const plugin of this._particleUpdatePlugins) {
                     if (particle.destroyed) {
                         break;
                     }
                     plugin.particleUpdate?.(particle, delta);
                 }
-                for (const mover of this.movers) {
-                    if (mover.isEnabled(particle)) {
-                        mover.move(particle, delta);
-                    }
-                }
                 if (particle.destroyed) {
                     particlesToDelete.add(particle);
                     continue;
                 }
-                this.quadTree.insert(new Point_js_1.Point(particle.getPosition(), particle));
+                this.grid.insert(particle);
             }
             if (particlesToDelete.size) {
                 const checkDelete = (p) => !particlesToDelete.has(p);
@@ -324,20 +319,16 @@
                 }
                 this._addToPool(...particlesToDelete);
             }
-            for (const plugin of container.plugins) {
-                if (plugin.postUpdate) {
-                    plugin.postUpdate(delta);
-                }
+            for (const plugin of this._postUpdatePlugins) {
+                plugin.postUpdate?.(delta);
             }
             for (const particle of this._array) {
                 for (const updater of this.updaters) {
                     updater.update(particle, delta);
                 }
                 if (!particle.destroyed && !particle.spawning) {
-                    for (const plugin of container.plugins) {
-                        if (plugin.postParticleUpdate) {
-                            plugin.postParticleUpdate(particle, delta);
-                        }
+                    for (const plugin of this._postParticleUpdatePlugins) {
+                        plugin.postParticleUpdate?.(particle, delta);
                     }
                 }
             }
@@ -345,14 +336,72 @@
             if (this._needsSort) {
                 const zArray = this._zArray;
                 zArray.sort((a, b) => b.position.z - a.position.z || a.id - b.id);
-                const lastItem = zArray[zArray.length - Constants_js_1.lengthOffset];
-                if (!lastItem) {
+                const firstItem = zArray[Constants_js_1.minIndex], lastItem = zArray[zArray.length - Constants_js_1.lengthOffset];
+                if (!firstItem || !lastItem) {
                     return;
                 }
-                this._lastZIndex = lastItem.position.z;
+                this._maxZIndex = firstItem.position.z;
+                this._minZIndex = lastItem.position.z;
                 this._needsSort = false;
             }
         }
+        _addToPool = (...particles) => {
+            this._pool.push(...particles);
+        };
+        _applyDensity = (options, pluginsCount, group, groupOptions) => {
+            const numberOptions = options.number;
+            if (!numberOptions.density.enable) {
+                if (group === undefined) {
+                    this._limit = numberOptions.limit.value;
+                }
+                else if (groupOptions?.number.limit.value ?? numberOptions.limit.value) {
+                    this._groupLimits.set(group, groupOptions?.number.limit.value ?? numberOptions.limit.value);
+                }
+                return;
+            }
+            const densityFactor = this._initDensityFactor(numberOptions.density), optParticlesNumber = numberOptions.value, optParticlesLimit = numberOptions.limit.value > Constants_js_1.minLimit ? numberOptions.limit.value : optParticlesNumber, particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + pluginsCount, particlesCount = Math.min(this.count, this.filter(t => t.group === group).length);
+            if (group === undefined) {
+                this._limit = numberOptions.limit.value * densityFactor;
+            }
+            else {
+                this._groupLimits.set(group, numberOptions.limit.value * densityFactor);
+            }
+            if (particlesCount < particlesNumber) {
+                this.push(Math.abs(particlesNumber - particlesCount), undefined, options, group);
+            }
+            else if (particlesCount > particlesNumber) {
+                this.removeQuantity(particlesCount - particlesNumber, group);
+            }
+        };
+        _initDensityFactor = densityOptions => {
+            const container = this._container;
+            if (!container.canvas.element || !densityOptions.enable) {
+                return Constants_js_1.defaultDensityFactor;
+            }
+            const canvas = container.canvas.element, pxRatio = container.retina.pixelRatio;
+            return (canvas.width * canvas.height) / (densityOptions.height * densityOptions.width * pxRatio ** Constants_js_1.squareExp);
+        };
+        _removeParticle = (index, group, override) => {
+            const particle = this._array[index];
+            if (!particle) {
+                return false;
+            }
+            if (particle.group !== group) {
+                return false;
+            }
+            const zIdx = this._zArray.indexOf(particle);
+            this._array.splice(index, Constants_js_1.deleteCount);
+            this._zArray.splice(zIdx, Constants_js_1.deleteCount);
+            particle.destroy(override);
+            this._engine.dispatchEvent(EventType_js_1.EventType.particleRemoved, {
+                container: this._container,
+                data: {
+                    particle,
+                },
+            });
+            this._addToPool(particle);
+            return true;
+        };
     }
     exports.Particles = Particles;
 });

package/umd/Core/Retina.js

@@ -13,6 +13,11 @@
     const Constants_js_1 = require("./Utils/Constants.js");
     const MathUtils_js_1 = require("../Utils/MathUtils.js");
     class Retina {
+        container;
+        maxSpeed;
+        pixelRatio;
+        reduceFactor;
+        sizeAnimationSpeed;
         constructor(container) {
             this.container = container;
             this.pixelRatio = Constants_js_1.defaultRatio;

package/umd/Core/Utils/Constants.js

@@ -9,8 +9,8 @@
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.defaultTime = exports.defaultLoops = exports.defaultVelocity = exports.defaultRgbMin = exports.phaseNumerator = exports.sNormalizedOffset = exports.sextuple = exports.triple = exports.lMin = exports.lFactor = exports.minStrokeWidth = exports.identity = exports.defaultAngle = exports.manualDefaultPosition = exports.touchDelay = exports.deleteCount = exports.defaultDensityFactor = exports.lengthOffset = exports.minIndex = exports.minCount = exports.countOffset = exports.minLimit = exports.sizeFactor = exports.posOffset = exports.defaultRadius = exports.minZ = exports.rollFactor = exports.minRetries = exports.tryCountIncrement = exports.decayOffset = exports.none = exports.one = exports.loadMinIndex = exports.loadRandomFactor = exports.canvasFirstIndex = exports.minFpsLimit = exports.defaultFpsLimit = exports.removeMinIndex = exports.removeDeleteCount = exports.minCoordinate = exports.touchEndLengthOffset = exports.clickRadius = exports.defaultOpacity = exports.zIndexFactorOffset = exports.minimumLength = exports.minimumSize = exports.defaultTransformValue = exports.minVelocity = exports.threeQuarter = exports.quarter = exports.empty = exports.hPhase = exports.sMin = exports.hMin = exports.lMax = exports.sMax = exports.hMax = exports.rgbMax = exports.inverseFactorNumerator = exports.subdivideCount = exports.defaultReduceFactor = exports.defaultRatio = exports.defaultRemoveQuantity = exports.qTreeCapacity = exports.squareExp = exports.defaultRetryCount = exports.canvasTag = exports.generatedFalse = exports.generatedTrue = exports.defaultAlpha = exports.defaultFps = exports.doublePI = exports.double = exports.midColorValue = exports.randomColorValue = exports.defaultTransform = exports.originPoint = exports.millisecondsToSeconds = exports.half = exports.percentDenominator = exports.visibilityChangeEvent = exports.resizeEvent = exports.generatedAttribute = void 0;
-    exports.generatedAttribute = "generated", exports.resizeEvent = "resize", exports.visibilityChangeEvent = "visibilitychange", exports.percentDenominator = 100, exports.half = 0.5, exports.millisecondsToSeconds = 1000, exports.originPoint = {
+    exports.defaultZoom = exports.defaultTime = exports.defaultLoops = exports.defaultVelocity = exports.defaultRgbMin = exports.phaseNumerator = exports.sNormalizedOffset = exports.sextuple = exports.triple = exports.lMin = exports.lFactor = exports.minStrokeWidth = exports.identity = exports.defaultAngle = exports.deleteCount = exports.defaultDensityFactor = exports.lengthOffset = exports.minIndex = exports.minCount = exports.countOffset = exports.minLimit = exports.minZ = exports.tryCountIncrement = exports.decayOffset = exports.none = exports.one = exports.loadMinIndex = exports.loadRandomFactor = exports.canvasFirstIndex = exports.minFpsLimit = exports.defaultFpsLimit = exports.removeMinIndex = exports.removeDeleteCount = exports.defaultOpacity = exports.zIndexFactorOffset = exports.minimumSize = exports.defaultTransformValue = exports.minVelocity = exports.threeQuarter = exports.quarter = exports.empty = exports.hPhase = exports.sMin = exports.hMin = exports.lMax = exports.sMax = exports.hMax = exports.rgbMax = exports.inverseFactorNumerator = exports.defaultReduceFactor = exports.defaultRatio = exports.defaultRemoveQuantity = exports.spatialHashGridCellSize = exports.squareExp = exports.defaultRetryCount = exports.canvasTag = exports.generatedFalse = exports.generatedTrue = exports.defaultAlpha = exports.defaultFps = exports.doublePI = exports.double = exports.midColorValue = exports.randomColorValue = exports.defaultTransform = exports.originPoint = exports.millisecondsToSeconds = exports.half = exports.percentDenominator = exports.visibilityChangeEvent = exports.resizeEvent = exports.defaultCompositeValue = exports.generatedAttribute = void 0;
+    exports.generatedAttribute = "generated", exports.defaultCompositeValue = "source-over", exports.resizeEvent = "resize", exports.visibilityChangeEvent = "visibilitychange", exports.percentDenominator = 100, exports.half = 0.5, exports.millisecondsToSeconds = 1000, exports.originPoint = {
         x: 0,
         y: 0,
         z: 0,
@@ -19,5 +19,5 @@
         b: 0,
         c: 0,
         d: 1,
-    }, exports.randomColorValue = "random", exports.midColorValue = "mid", exports.double = 2, exports.doublePI = Math.PI * exports.double, exports.defaultFps = 60, exports.defaultAlpha = 1, exports.generatedTrue = "true", exports.generatedFalse = "false", exports.canvasTag = "canvas", exports.defaultRetryCount = 0, exports.squareExp = 2, exports.qTreeCapacity = 4, exports.defaultRemoveQuantity = 1, exports.defaultRatio = 1, exports.defaultReduceFactor = 1, exports.subdivideCount = 4, exports.inverseFactorNumerator = 1.0, exports.rgbMax = 255, exports.hMax = 360, exports.sMax = 100, exports.lMax = 100, exports.hMin = 0, exports.sMin = 0, exports.hPhase = 60, exports.empty = 0, exports.quarter = 0.25, exports.threeQuarter = exports.half + exports.quarter, exports.minVelocity = 0, exports.defaultTransformValue = 1, exports.minimumSize = 0, exports.minimumLength = 0, exports.zIndexFactorOffset = 1, exports.defaultOpacity = 1, exports.clickRadius = 1, exports.touchEndLengthOffset = 1, exports.minCoordinate = 0, exports.removeDeleteCount = 1, exports.removeMinIndex = 0, exports.defaultFpsLimit = 120, exports.minFpsLimit = 0, exports.canvasFirstIndex = 0, exports.loadRandomFactor = 10000, exports.loadMinIndex = 0, exports.one = 1, exports.none = 0, exports.decayOffset = 1, exports.tryCountIncrement = 1, exports.minRetries = 0, exports.rollFactor = 1, exports.minZ = 0, exports.defaultRadius = 0, exports.posOffset = -exports.quarter, exports.sizeFactor = 1.5, exports.minLimit = 0, exports.countOffset = 1, exports.minCount = 0, exports.minIndex = 0, exports.lengthOffset = 1, exports.defaultDensityFactor = 1, exports.deleteCount = 1, exports.touchDelay = 500, exports.manualDefaultPosition = 50, exports.defaultAngle = 0, exports.identity = 1, exports.minStrokeWidth = 0, exports.lFactor = 1, exports.lMin = 0, exports.triple = 3, exports.sextuple = 6, exports.sNormalizedOffset = 1, exports.phaseNumerator = 1, exports.defaultRgbMin = 0, exports.defaultVelocity = 0, exports.defaultLoops = 0, exports.defaultTime = 0;
+    }, exports.randomColorValue = "random", exports.midColorValue = "mid", exports.double = 2, exports.doublePI = Math.PI * exports.double, exports.defaultFps = 60, exports.defaultAlpha = 1, exports.generatedTrue = "true", exports.generatedFalse = "false", exports.canvasTag = "canvas", exports.defaultRetryCount = 0, exports.squareExp = 2, exports.spatialHashGridCellSize = 100, exports.defaultRemoveQuantity = 1, exports.defaultRatio = 1, exports.defaultReduceFactor = 1, exports.inverseFactorNumerator = 1, exports.rgbMax = 255, exports.hMax = 360, exports.sMax = 100, exports.lMax = 100, exports.hMin = 0, exports.sMin = 0, exports.hPhase = 60, exports.empty = 0, exports.quarter = 0.25, exports.threeQuarter = exports.half + exports.quarter, exports.minVelocity = 0, exports.defaultTransformValue = 1, exports.minimumSize = 0, exports.zIndexFactorOffset = 1, exports.defaultOpacity = 1, exports.removeDeleteCount = 1, exports.removeMinIndex = 0, exports.defaultFpsLimit = 120, exports.minFpsLimit = 0, exports.canvasFirstIndex = 0, exports.loadRandomFactor = 10000, exports.loadMinIndex = 0, exports.one = 1, exports.none = 0, exports.decayOffset = 1, exports.tryCountIncrement = 1, exports.minZ = 0, exports.minLimit = 0, exports.countOffset = 1, exports.minCount = 0, exports.minIndex = 0, exports.lengthOffset = 1, exports.defaultDensityFactor = 1, exports.deleteCount = 1, exports.defaultAngle = 0, exports.identity = 1, exports.minStrokeWidth = 0, exports.lFactor = 1, exports.lMin = 0, exports.triple = 3, exports.sextuple = 6, exports.sNormalizedOffset = 1, exports.phaseNumerator = 1, exports.defaultRgbMin = 0, exports.defaultVelocity = 0, exports.defaultLoops = 0, exports.defaultTime = 0, exports.defaultZoom = 1;
 });

package/umd/Core/Utils/EventListeners.js

@@ -13,71 +13,12 @@
     const Utils_js_1 = require("../../Utils/Utils.js");
     const Constants_js_1 = require("./Constants.js");
     class EventListeners {
+        container;
+        _handlers;
+        _resizeObserver;
+        _resizeTimeout;
         constructor(container) {
             this.container = container;
-            this._handleVisibilityChange = () => {
-                const container = this.container, options = container.actualOptions;
-                if (!options.pauseOnBlur) {
-                    return;
-                }
-                if ((0, Utils_js_1.safeDocument)().hidden) {
-                    container.pageHidden = true;
-                    container.pause();
-                }
-                else {
-                    container.pageHidden = false;
-                    if (container.animationStatus) {
-                        container.play(true);
-                    }
-                    else {
-                        container.draw(true);
-                    }
-                }
-            };
-            this._handleWindowResize = () => {
-                if (this._resizeTimeout) {
-                    clearTimeout(this._resizeTimeout);
-                    delete this._resizeTimeout;
-                }
-                const handleResize = async () => {
-                    const canvas = this.container.canvas;
-                    await canvas.windowResize();
-                };
-                this._resizeTimeout = setTimeout(() => void handleResize(), this.container.actualOptions.resize.delay * Constants_js_1.millisecondsToSeconds);
-            };
-            this._manageListeners = add => {
-                const handlers = this._handlers;
-                this._manageResize(add);
-                (0, Utils_js_1.manageListener)(document, Constants_js_1.visibilityChangeEvent, handlers.visibilityChange, add, false);
-            };
-            this._manageResize = add => {
-                const handlers = this._handlers, container = this.container, options = container.actualOptions;
-                if (!options.resize.enable) {
-                    return;
-                }
-                if (typeof ResizeObserver === "undefined") {
-                    (0, Utils_js_1.manageListener)(globalThis, Constants_js_1.resizeEvent, handlers.resize, add);
-                    return;
-                }
-                const canvasEl = container.canvas.element;
-                if (this._resizeObserver && !add) {
-                    if (canvasEl) {
-                        this._resizeObserver.unobserve(canvasEl);
-                    }
-                    this._resizeObserver.disconnect();
-                    delete this._resizeObserver;
-                }
-                else if (!this._resizeObserver && add && canvasEl) {
-                    this._resizeObserver = new ResizeObserver((entries) => {
-                        const entry = entries.find(e => e.target === canvasEl);
-                        if (!entry) {
-                            return;
-                        }
-                        this._handleWindowResize();
-                    });
-                    this._resizeObserver.observe(canvasEl);
-                }
-            };
             this._handlers = {
                 visibilityChange: () => {
                     this._handleVisibilityChange();
@@ -93,6 +34,69 @@
         removeListeners() {
             this._manageListeners(false);
         }
+        _handleVisibilityChange = () => {
+            const container = this.container, options = container.actualOptions;
+            if (!options.pauseOnBlur) {
+                return;
+            }
+            if ((0, Utils_js_1.safeDocument)().hidden) {
+                container.pageHidden = true;
+                container.pause();
+            }
+            else {
+                container.pageHidden = false;
+                if (container.animationStatus) {
+                    container.play(true);
+                }
+                else {
+                    container.draw(true);
+                }
+            }
+        };
+        _handleWindowResize = () => {
+            if (this._resizeTimeout) {
+                clearTimeout(this._resizeTimeout);
+                delete this._resizeTimeout;
+            }
+            const handleResize = async () => {
+                const canvas = this.container.canvas;
+                await canvas.windowResize();
+            };
+            this._resizeTimeout = setTimeout(() => void handleResize(), this.container.actualOptions.resize.delay * Constants_js_1.millisecondsToSeconds);
+        };
+        _manageListeners = add => {
+            const handlers = this._handlers;
+            this._manageResize(add);
+            (0, Utils_js_1.manageListener)(document, Constants_js_1.visibilityChangeEvent, handlers.visibilityChange, add, false);
+        };
+        _manageResize = add => {
+            const handlers = this._handlers, container = this.container, options = container.actualOptions;
+            if (!options.resize.enable) {
+                return;
+            }
+            if (typeof ResizeObserver === "undefined") {
+                (0, Utils_js_1.manageListener)(globalThis, Constants_js_1.resizeEvent, handlers.resize, add);
+                return;
+            }
+            const canvasEl = container.canvas.element;
+            if (this._resizeObserver && !add) {
+                if (canvasEl) {
+                    this._resizeObserver.unobserve(canvasEl);
+                }
+                this._resizeObserver.disconnect();
+                delete this._resizeObserver;
+            }
+            else if (!this._resizeObserver && add && canvasEl) {
+                this._resizeObserver = new ResizeObserver((entries) => {
+                    const entry = entries.find(e => e.target === canvasEl);
+                    if (!entry) {
+                        return;
+                    }
+                    this._handleWindowResize();
+                });
+                this._resizeObserver.observe(canvasEl);
+            }
+        };
     }
     exports.EventListeners = EventListeners;
 });