@tsparticles/engine 4.0.0-alpha.8 → 4.0.0-beta.1

package/umd/Core/RenderManager.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/CanvasUtils.js", "./Utils/Constants.js", "../Utils/ColorUtils.js"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.RenderManager = void 0;
+    const CanvasUtils_js_1 = require("../Utils/CanvasUtils.js");
+    const Constants_js_1 = require("./Utils/Constants.js");
+    const ColorUtils_js_1 = require("../Utils/ColorUtils.js");
+    const fColorIndex = 0, sColorIndex = 1;
+    function setTransformValue(factor, newFactor, key) {
+        const newValue = newFactor[key];
+        if (newValue !== undefined) {
+            factor[key] = (factor[key] ?? Constants_js_1.defaultTransformValue) * newValue;
+        }
+    }
+    class RenderManager {
+        _canvasClearPlugins;
+        _canvasManager;
+        _canvasPaintPlugins;
+        _clearDrawPlugins;
+        _colorPlugins;
+        _container;
+        _context;
+        _contextSettings;
+        _drawParticlePlugins;
+        _drawParticlesCleanupPlugins;
+        _drawParticlesSetupPlugins;
+        _drawPlugins;
+        _drawSettingsCleanupPlugins;
+        _drawSettingsSetupPlugins;
+        _pluginManager;
+        _postDrawUpdaters;
+        _preDrawUpdaters;
+        _reusableColorStyles = {};
+        _reusablePluginColors = [undefined, undefined];
+        _reusableTransform = {};
+        constructor(pluginManager, container, canvasManager) {
+            this._pluginManager = pluginManager;
+            this._container = container;
+            this._canvasManager = canvasManager;
+            this._context = null;
+            this._preDrawUpdaters = [];
+            this._postDrawUpdaters = [];
+            this._colorPlugins = [];
+            this._canvasClearPlugins = [];
+            this._canvasPaintPlugins = [];
+            this._clearDrawPlugins = [];
+            this._drawParticlePlugins = [];
+            this._drawParticlesCleanupPlugins = [];
+            this._drawParticlesSetupPlugins = [];
+            this._drawPlugins = [];
+            this._drawSettingsSetupPlugins = [];
+            this._drawSettingsCleanupPlugins = [];
+        }
+        get settings() {
+            return this._contextSettings;
+        }
+        canvasClear() {
+            if (!this._container.actualOptions.clear) {
+                return;
+            }
+            this.draw(ctx => {
+                (0, CanvasUtils_js_1.clear)(ctx, this._canvasManager.size);
+            });
+        }
+        clear() {
+            let pluginHandled = false;
+            for (const plugin of this._canvasClearPlugins) {
+                pluginHandled = plugin.canvasClear?.() ?? false;
+                if (pluginHandled) {
+                    break;
+                }
+            }
+            if (pluginHandled) {
+                return;
+            }
+            this.canvasClear();
+        }
+        destroy() {
+            this.stop();
+            this._preDrawUpdaters = [];
+            this._postDrawUpdaters = [];
+            this._colorPlugins = [];
+            this._canvasClearPlugins = [];
+            this._canvasPaintPlugins = [];
+            this._clearDrawPlugins = [];
+            this._drawParticlePlugins = [];
+            this._drawParticlesCleanupPlugins = [];
+            this._drawParticlesSetupPlugins = [];
+            this._drawPlugins = [];
+            this._drawSettingsSetupPlugins = [];
+            this._drawSettingsCleanupPlugins = [];
+        }
+        draw(cb) {
+            const ctx = this._context;
+            if (!ctx) {
+                return;
+            }
+            return cb(ctx);
+        }
+        drawParticle(particle, delta) {
+            if (particle.spawning || particle.destroyed) {
+                return;
+            }
+            const radius = particle.getRadius();
+            if (radius <= Constants_js_1.minimumSize) {
+                return;
+            }
+            const pfColor = particle.getFillColor(), psColor = particle.getStrokeColor();
+            let [fColor, sColor] = this._getPluginParticleColors(particle);
+            fColor ??= pfColor;
+            sColor ??= psColor;
+            if (!fColor && !sColor) {
+                return;
+            }
+            const container = this._container, zIndexOptions = particle.options.zIndex, zIndexFactor = Constants_js_1.zIndexFactorOffset - particle.zIndexFactor, { fillOpacity, opacity, strokeOpacity } = particle.getOpacity(), transform = this._reusableTransform, colorStyles = this._reusableColorStyles, fill = fColor ? (0, ColorUtils_js_1.getStyleFromHsl)(fColor, container.hdr, fillOpacity * opacity) : undefined, stroke = sColor ? (0, ColorUtils_js_1.getStyleFromHsl)(sColor, container.hdr, strokeOpacity * opacity) : fill;
+            transform.a = transform.b = transform.c = transform.d = undefined;
+            colorStyles.fill = fill;
+            colorStyles.stroke = stroke;
+            this.draw((context) => {
+                for (const plugin of this._drawParticlesSetupPlugins) {
+                    plugin.drawParticleSetup?.(context, particle, delta);
+                }
+                this._applyPreDrawUpdaters(context, particle, radius, opacity, colorStyles, transform);
+                (0, CanvasUtils_js_1.drawParticle)({
+                    container,
+                    context,
+                    particle,
+                    delta,
+                    colorStyles,
+                    radius: radius * zIndexFactor ** zIndexOptions.sizeRate,
+                    opacity: opacity,
+                    transform,
+                });
+                this._applyPostDrawUpdaters(particle);
+                for (const plugin of this._drawParticlesCleanupPlugins) {
+                    plugin.drawParticleCleanup?.(context, particle, delta);
+                }
+            });
+        }
+        drawParticlePlugins(particle, delta) {
+            this.draw(ctx => {
+                for (const plugin of this._drawParticlePlugins) {
+                    (0, CanvasUtils_js_1.drawParticlePlugin)(ctx, plugin, particle, delta);
+                }
+            });
+        }
+        drawParticles(delta) {
+            const { particles } = this._container;
+            this.clear();
+            particles.update(delta);
+            this.draw(ctx => {
+                for (const plugin of this._drawSettingsSetupPlugins) {
+                    plugin.drawSettingsSetup?.(ctx, delta);
+                }
+                for (const plugin of this._drawPlugins) {
+                    plugin.draw?.(ctx, delta);
+                }
+                particles.drawParticles(delta);
+                for (const plugin of this._clearDrawPlugins) {
+                    plugin.clearDraw?.(ctx, delta);
+                }
+                for (const plugin of this._drawSettingsCleanupPlugins) {
+                    plugin.drawSettingsCleanup?.(ctx, delta);
+                }
+            });
+        }
+        init() {
+            this.initUpdaters();
+            this.initPlugins();
+            this.paint();
+        }
+        initPlugins() {
+            this._colorPlugins = [];
+            this._canvasClearPlugins = [];
+            this._canvasPaintPlugins = [];
+            this._clearDrawPlugins = [];
+            this._drawParticlePlugins = [];
+            this._drawParticlesSetupPlugins = [];
+            this._drawParticlesCleanupPlugins = [];
+            this._drawPlugins = [];
+            this._drawSettingsSetupPlugins = [];
+            this._drawSettingsCleanupPlugins = [];
+            for (const plugin of this._container.plugins) {
+                if (plugin.particleFillColor ?? plugin.particleStrokeColor) {
+                    this._colorPlugins.push(plugin);
+                }
+                if (plugin.canvasClear) {
+                    this._canvasClearPlugins.push(plugin);
+                }
+                if (plugin.canvasPaint) {
+                    this._canvasPaintPlugins.push(plugin);
+                }
+                if (plugin.drawParticle) {
+                    this._drawParticlePlugins.push(plugin);
+                }
+                if (plugin.drawParticleSetup) {
+                    this._drawParticlesSetupPlugins.push(plugin);
+                }
+                if (plugin.drawParticleCleanup) {
+                    this._drawParticlesCleanupPlugins.push(plugin);
+                }
+                if (plugin.draw) {
+                    this._drawPlugins.push(plugin);
+                }
+                if (plugin.drawSettingsSetup) {
+                    this._drawSettingsSetupPlugins.push(plugin);
+                }
+                if (plugin.drawSettingsCleanup) {
+                    this._drawSettingsCleanupPlugins.push(plugin);
+                }
+                if (plugin.clearDraw) {
+                    this._clearDrawPlugins.push(plugin);
+                }
+            }
+        }
+        initUpdaters() {
+            this._preDrawUpdaters = [];
+            this._postDrawUpdaters = [];
+            for (const updater of this._container.particleUpdaters) {
+                if (updater.afterDraw) {
+                    this._postDrawUpdaters.push(updater);
+                }
+                if (updater.getColorStyles ?? updater.getTransformValues ?? updater.beforeDraw) {
+                    this._preDrawUpdaters.push(updater);
+                }
+            }
+        }
+        paint() {
+            let handled = false;
+            for (const plugin of this._canvasPaintPlugins) {
+                handled = plugin.canvasPaint?.() ?? false;
+                if (handled) {
+                    break;
+                }
+            }
+            if (handled) {
+                return;
+            }
+            this.paintBase();
+        }
+        paintBase(baseColor) {
+            this.draw(ctx => {
+                (0, CanvasUtils_js_1.paintBase)(ctx, this._canvasManager.size, baseColor);
+            });
+        }
+        paintImage(image, opacity) {
+            this.draw(ctx => {
+                (0, CanvasUtils_js_1.paintImage)(ctx, this._canvasManager.size, image, opacity);
+            });
+        }
+        setContext(context) {
+            this._context = context;
+            if (this._context) {
+                this._context.globalCompositeOperation = Constants_js_1.defaultCompositeValue;
+            }
+        }
+        setContextSettings(settings) {
+            this._contextSettings = settings;
+        }
+        stop() {
+            this.draw(ctx => {
+                (0, CanvasUtils_js_1.clear)(ctx, this._canvasManager.size);
+            });
+        }
+        _applyPostDrawUpdaters = particle => {
+            for (const updater of this._postDrawUpdaters) {
+                updater.afterDraw?.(particle);
+            }
+        };
+        _applyPreDrawUpdaters = (ctx, particle, radius, zOpacity, colorStyles, transform) => {
+            for (const updater of this._preDrawUpdaters) {
+                if (updater.getColorStyles) {
+                    const { fill, stroke } = updater.getColorStyles(particle, ctx, radius, zOpacity);
+                    if (fill) {
+                        colorStyles.fill = fill;
+                    }
+                    if (stroke) {
+                        colorStyles.stroke = stroke;
+                    }
+                }
+                if (updater.getTransformValues) {
+                    const updaterTransform = updater.getTransformValues(particle);
+                    for (const key in updaterTransform) {
+                        setTransformValue(transform, updaterTransform, key);
+                    }
+                }
+                updater.beforeDraw?.(particle);
+            }
+        };
+        _getPluginParticleColors = particle => {
+            let fColor, sColor;
+            for (const plugin of this._colorPlugins) {
+                if (!fColor && plugin.particleFillColor) {
+                    fColor = (0, ColorUtils_js_1.rangeColorToHsl)(this._pluginManager, plugin.particleFillColor(particle));
+                }
+                if (!sColor && plugin.particleStrokeColor) {
+                    sColor = (0, ColorUtils_js_1.rangeColorToHsl)(this._pluginManager, plugin.particleStrokeColor(particle));
+                }
+                if (fColor && sColor) {
+                    break;
+                }
+            }
+            this._reusablePluginColors[fColorIndex] = fColor;
+            this._reusablePluginColors[sColorIndex] = sColor;
+            return this._reusablePluginColors;
+        };
+    }
+    exports.RenderManager = RenderManager;
+});

package/umd/Core/Retina.js

@@ -13,6 +13,9 @@
     const Constants_js_1 = require("./Utils/Constants.js");
     const MathUtils_js_1 = require("../Utils/MathUtils.js");
     class Retina {
+        container;
+        pixelRatio;
+        reduceFactor;
         constructor(container) {
             this.container = container;
             this.pixelRatio = Constants_js_1.defaultRatio;
@@ -28,19 +31,16 @@
                 canvas.size.width = element.offsetWidth * ratio;
                 canvas.size.height = element.offsetHeight * ratio;
             }
-            const particles = options.particles, moveOptions = particles.move;
-            this.maxSpeed = (0, MathUtils_js_1.getRangeValue)(moveOptions.gravity.maxSpeed) * ratio;
-            this.sizeAnimationSpeed = (0, MathUtils_js_1.getRangeValue)(particles.size.animation.speed) * ratio;
         }
         initParticle(particle) {
             const options = particle.options, ratio = this.pixelRatio, moveOptions = options.move, moveDistance = moveOptions.distance, props = particle.retina;
+            props.maxSpeed = (0, MathUtils_js_1.getRangeValue)(moveOptions.gravity.maxSpeed) * ratio;
             props.moveDrift = (0, MathUtils_js_1.getRangeValue)(moveOptions.drift) * ratio;
             props.moveSpeed = (0, MathUtils_js_1.getRangeValue)(moveOptions.speed) * ratio;
             props.sizeAnimationSpeed = (0, MathUtils_js_1.getRangeValue)(options.size.animation.speed) * ratio;
             const maxDistance = props.maxDistance;
-            maxDistance.horizontal = moveDistance.horizontal !== undefined ? moveDistance.horizontal * ratio : undefined;
-            maxDistance.vertical = moveDistance.vertical !== undefined ? moveDistance.vertical * ratio : undefined;
-            props.maxSpeed = (0, MathUtils_js_1.getRangeValue)(moveOptions.gravity.maxSpeed) * ratio;
+            maxDistance.horizontal = moveDistance.horizontal === undefined ? undefined : moveDistance.horizontal * ratio;
+            maxDistance.vertical = moveDistance.vertical === undefined ? undefined : moveDistance.vertical * ratio;
         }
     }
     exports.Retina = Retina;

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.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.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;
 });

package/umd/Core/Utils/PluginManager.js

@@ -0,0 +1,159 @@
+(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", "../../Enums/Types/EventType.js"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.PluginManager = void 0;
+    const Utils_js_1 = require("../../Utils/Utils.js");
+    const EventType_js_1 = require("../../Enums/Types/EventType.js");
+    class PluginManager {
+        colorManagers = new Map();
+        easingFunctions = new Map();
+        effectDrawers = new Map();
+        initializers = {
+            effects: new Map(),
+            shapes: new Map(),
+            updaters: new Map(),
+        };
+        palettes = new Map();
+        plugins = [];
+        presets = new Map();
+        shapeDrawers = new Map();
+        updaters = new Map();
+        _allLoadersSet = new Set();
+        _configs = new Map();
+        _engine;
+        _executedSet = new Set();
+        _initialized = false;
+        _isRunningLoaders = false;
+        _loadPromises = new Set();
+        constructor(engine) {
+            this._engine = engine;
+        }
+        get configs() {
+            const res = {};
+            for (const [name, config] of this._configs) {
+                res[name] = config;
+            }
+            return res;
+        }
+        addColorManager(name, manager) {
+            this.colorManagers.set(name, manager);
+        }
+        addConfig(config) {
+            const key = config.key ?? config.name ?? "default";
+            this._configs.set(key, config);
+            this._engine.dispatchEvent(EventType_js_1.EventType.configAdded, { data: { name: key, config } });
+        }
+        addEasing(name, easing) {
+            if (this.easingFunctions.get(name)) {
+                return;
+            }
+            this.easingFunctions.set(name, easing);
+        }
+        addEffect(effect, drawer) {
+            this.initializers.effects.set(effect, drawer);
+        }
+        addPalette(name, palette) {
+            this.palettes.set(name, palette);
+        }
+        addParticleUpdater(name, updaterInitializer) {
+            this.initializers.updaters.set(name, updaterInitializer);
+        }
+        addPlugin(plugin) {
+            if (this.getPlugin(plugin.id)) {
+                return;
+            }
+            this.plugins.push(plugin);
+        }
+        addPreset(preset, options, override = false) {
+            if (!(override || !this.getPreset(preset))) {
+                return;
+            }
+            this.presets.set(preset, options);
+        }
+        addShape(shapes, drawer) {
+            for (const shape of shapes) {
+                this.initializers.shapes.set(shape, drawer);
+            }
+        }
+        clearPlugins(container) {
+            this.effectDrawers.delete(container);
+            this.shapeDrawers.delete(container);
+            this.updaters.delete(container);
+        }
+        getEasing(name) {
+            return this.easingFunctions.get(name) ?? ((value) => value);
+        }
+        getEffectDrawers(container, force = false) {
+            return (0, Utils_js_1.getItemMapFromInitializer)(container, this.effectDrawers, this.initializers.effects, force);
+        }
+        getPalette(name) {
+            return this.palettes.get(name);
+        }
+        getPlugin(plugin) {
+            return this.plugins.find(t => t.id === plugin);
+        }
+        getPreset(preset) {
+            return this.presets.get(preset);
+        }
+        async getShapeDrawers(container, force = false) {
+            return (0, Utils_js_1.getItemMapFromInitializer)(container, this.shapeDrawers, this.initializers.shapes, force);
+        }
+        async getUpdaters(container, force = false) {
+            return (0, Utils_js_1.getItemsFromInitializer)(container, this.updaters, this.initializers.updaters, force);
+        }
+        async init() {
+            if (this._initialized || this._isRunningLoaders) {
+                return;
+            }
+            this._isRunningLoaders = true;
+            this._executedSet = new Set();
+            this._allLoadersSet = new Set(this._loadPromises);
+            try {
+                for (const loader of this._allLoadersSet) {
+                    await this._runLoader(loader, this._executedSet, this._allLoadersSet);
+                }
+            }
+            finally {
+                this._loadPromises.clear();
+                this._isRunningLoaders = false;
+                this._initialized = true;
+            }
+        }
+        loadParticlesOptions(container, options, ...sourceOptions) {
+            const updaters = this.updaters.get(container);
+            if (!updaters) {
+                return;
+            }
+            updaters.forEach(updater => updater.loadOptions?.(options, ...sourceOptions));
+        }
+        async register(...loaders) {
+            if (this._initialized) {
+                throw new Error("Register plugins can only be done before calling tsParticles.load()");
+            }
+            for (const loader of loaders) {
+                if (this._isRunningLoaders) {
+                    await this._runLoader(loader, this._executedSet, this._allLoadersSet);
+                }
+                else {
+                    this._loadPromises.add(loader);
+                }
+            }
+        }
+        async _runLoader(loader, executed, allLoaders) {
+            if (executed.has(loader))
+                return;
+            executed.add(loader);
+            allLoaders.add(loader);
+            await loader(this._engine);
+        }
+    }
+    exports.PluginManager = PluginManager;
+});