@tsparticles/particles 4.5.0 → 4.5.2

package/tsparticles.particles.bundle.js

@@ -1,6 +1,6 @@
 (function(g){g.__tsParticlesInternals=g.__tsParticlesInternals||{};g.__tsParticlesInternals.bundles=g.__tsParticlesInternals.bundles||{};g.__tsParticlesInternals.effects=g.__tsParticlesInternals.effects||{};g.__tsParticlesInternals.engine=g.__tsParticlesInternals.engine||{};g.__tsParticlesInternals.interactions=g.__tsParticlesInternals.interactions||{};g.__tsParticlesInternals.palettes=g.__tsParticlesInternals.palettes||{};g.__tsParticlesInternals.paths=g.__tsParticlesInternals.paths||{};g.__tsParticlesInternals.plugins=g.__tsParticlesInternals.plugins||{};g.__tsParticlesInternals.plugins=g.__tsParticlesInternals.plugins||{};g.__tsParticlesInternals.plugins.emittersShapes=g.__tsParticlesInternals.plugins.emittersShapes||{};g.__tsParticlesInternals.presets=g.__tsParticlesInternals.presets||{};g.__tsParticlesInternals.shapes=g.__tsParticlesInternals.shapes||{};g.__tsParticlesInternals.updaters=g.__tsParticlesInternals.updaters||{};g.__tsParticlesInternals.utils=g.__tsParticlesInternals.utils||{};g.__tsParticlesInternals.canvas=g.__tsParticlesInternals.canvas||{};g.__tsParticlesInternals.canvas=g.__tsParticlesInternals.canvas||{};g.__tsParticlesInternals.canvas.utils=g.__tsParticlesInternals.canvas.utils||{};g.__tsParticlesInternals.path=g.__tsParticlesInternals.path||{};g.__tsParticlesInternals.path=g.__tsParticlesInternals.path||{};g.__tsParticlesInternals.path.utils=g.__tsParticlesInternals.path.utils||{};var __tsProxyFactory=typeof Proxy!=="undefined"?function(obj){return new Proxy(obj,{get:function(target,key){if(!(key in target)){target[key]={};}return target[key];}});}:function(obj){return obj;};g.__tsParticlesInternals.bundles=__tsProxyFactory(g.__tsParticlesInternals.bundles);g.__tsParticlesInternals.effects=__tsProxyFactory(g.__tsParticlesInternals.effects);g.__tsParticlesInternals.interactions=__tsProxyFactory(g.__tsParticlesInternals.interactions);g.__tsParticlesInternals.palettes=__tsProxyFactory(g.__tsParticlesInternals.palettes);g.__tsParticlesInternals.paths=__tsProxyFactory(g.__tsParticlesInternals.paths);g.__tsParticlesInternals.plugins=__tsProxyFactory(g.__tsParticlesInternals.plugins);g.__tsParticlesInternals.plugins.emittersShapes=__tsProxyFactory(g.__tsParticlesInternals.plugins.emittersShapes);g.__tsParticlesInternals.presets=__tsProxyFactory(g.__tsParticlesInternals.presets);g.__tsParticlesInternals.shapes=__tsProxyFactory(g.__tsParticlesInternals.shapes);g.__tsParticlesInternals.updaters=__tsProxyFactory(g.__tsParticlesInternals.updaters);g.__tsParticlesInternals.utils=__tsProxyFactory(g.__tsParticlesInternals.utils);g.__tsParticlesInternals.canvas=__tsProxyFactory(g.__tsParticlesInternals.canvas);g.__tsParticlesInternals.path=__tsProxyFactory(g.__tsParticlesInternals.path);})(typeof globalThis!=="undefined"?globalThis:typeof window!=="undefined"?window:this);
 (function (g) {
-/* tsParticles v4.5.0 */
+/* tsParticles v4.5.2 */
 g.__tsParticlesInternals = g.__tsParticlesInternals || {};
 g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
 (function (exports) {
@@ -143,7 +143,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
         }
         normalize() {
             const length = this.length;
-            if (length != none) {
+            if (length !== none) {
                 this.multTo(inverseFactorNumerator / length);
             }
         }
@@ -737,12 +737,8 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
         }
         addEventListener(type, listener) {
             this.removeEventListener(type, listener);
-            let arr = this.#listeners.get(type);
-            if (!arr) {
-                arr = [];
-                this.#listeners.set(type, arr);
-            }
-            arr.push(listener);
+            const arr = this.#listeners.get(type);
+            this.#listeners.set(type, arr ? [...arr, listener] : [listener]);
         }
         dispatchEvent(type, args) {
             const listeners = this.#listeners.get(type);
@@ -774,7 +770,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
                 this.#listeners.delete(type);
             }
             else {
-                arr.splice(idx, deleteCount);
+                this.#listeners.set(type, [...arr.slice(minIndex, idx), ...arr.slice(idx + deleteCount)]);
             }
         }
     }
@@ -951,11 +947,13 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
         #domArray = [];
         #eventDispatcher = new EventDispatcher();
         #initialized = false;
+        #loadSequence = 0;
+        #loadSequences = new Map();
         get items() {
             return this.#domArray;
         }
         get version() {
-            return "4.5.0";
+            return "4.5.2";
         }
         addEventListener(type, listener) {
             this.#eventDispatcher.addEventListener(type, listener);
@@ -985,44 +983,60 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
             return item;
         }
         async load(params) {
-            await this.init();
             let domSourceElement;
             if (typeof HTMLElement !== "undefined" && params.element instanceof HTMLElement) {
                 domSourceElement = params.element;
             }
-            const { Container } = await Promise.resolve().then(function () { return Container$1; }), id = params.id ?? domSourceElement?.id ?? `tsparticles${Math.floor(getRandom() * loadRandomFactor).toString()}`, { index, url } = params, options = url ? await getDataFromUrl({ fallback: params.options, url, index }) : params.options, currentOptions = itemFromSingleOrMultiple(options, index), { items } = this, oldIndex = items.findIndex(v => v.id.description === id), newItem = new Container({
-                dispatchCallback: (eventType, args) => {
-                    this.dispatchEvent(eventType, args);
-                },
-                id,
-                onDestroy: (remove) => {
-                    if (!remove) {
-                        return;
-                    }
-                    const mainArr = this.items, idx = mainArr.indexOf(newItem);
-                    if (idx >= removeMinIndex) {
-                        mainArr.splice(idx, removeDeleteCount);
+            const id = params.id ?? domSourceElement?.id ?? `tsparticles${Math.floor(getRandom() * loadRandomFactor).toString()}`, loadSequence = ++this.#loadSequence;
+            this.#loadSequences.set(id, loadSequence);
+            try {
+                await this.init();
+                const { Container } = await Promise.resolve().then(function () { return Container$1; }), { index, url } = params, options = url ? await getDataFromUrl({ fallback: params.options, url, index }) : params.options;
+                if (this.#loadSequences.get(id) !== loadSequence) {
+                    return undefined;
+                }
+                const currentOptions = itemFromSingleOrMultiple(options, index), { items } = this, oldIndex = items.findIndex(v => v.id.description === id), newItem = new Container({
+                    dispatchCallback: (eventType, args) => {
+                        this.dispatchEvent(eventType, args);
+                    },
+                    id,
+                    onDestroy: (remove) => {
+                        if (!remove) {
+                            return;
+                        }
+                        const mainArr = this.items, idx = mainArr.indexOf(newItem);
+                        if (idx >= removeMinIndex) {
+                            mainArr.splice(idx, removeDeleteCount);
+                        }
+                    },
+                    pluginManager: this.pluginManager,
+                    sourceOptions: currentOptions,
+                });
+                if (oldIndex >= loadMinIndex) {
+                    const old = this.item(oldIndex), deleteCount = old ? one : none;
+                    if (old && !old.destroyed) {
+                        old.destroy(false);
                     }
-                },
-                pluginManager: this.pluginManager,
-                sourceOptions: currentOptions,
-            });
-            if (oldIndex >= loadMinIndex) {
-                const old = this.item(oldIndex), deleteCount = old ? one : none;
-                if (old && !old.destroyed) {
-                    old.destroy(false);
+                    items.splice(oldIndex, deleteCount, newItem);
                 }
-                items.splice(oldIndex, deleteCount, newItem);
+                else {
+                    items.push(newItem);
+                }
+                const sourceCanvas = typeof OffscreenCanvas !== "undefined" && params.element instanceof OffscreenCanvas
+                    ? params.element
+                    : getCanvasFromContainer(getDomContainer(id, domSourceElement));
+                newItem.canvas.loadCanvas(sourceCanvas);
+                await newItem.start();
+                if (newItem.destroyed) {
+                    return undefined;
+                }
+                return newItem;
             }
-            else {
-                items.push(newItem);
+            finally {
+                if (this.#loadSequences.get(id) === loadSequence) {
+                    this.#loadSequences.delete(id);
+                }
             }
-            const sourceCanvas = typeof OffscreenCanvas !== "undefined" && params.element instanceof OffscreenCanvas
-                ? params.element
-                : getCanvasFromContainer(getDomContainer(id, domSourceElement));
-            newItem.canvas.loadCanvas(sourceCanvas);
-            await newItem.start();
-            return newItem;
         }
         async refresh(refresh = true) {
             if (!refresh) {
@@ -2495,6 +2509,13 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
         }
     }
 
+    function hasEnabledBlend(particleOptions) {
+        if (!particleOptions || typeof particleOptions !== "object" || !("blend" in particleOptions)) {
+            return false;
+        }
+        const blend = particleOptions.blend;
+        return !!blend && typeof blend === "object" && "enable" in blend && !!blend.enable;
+    }
     class BlendPlugin {
         id = "blend";
         async getPlugin(container) {
@@ -2516,12 +2537,31 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
             options.blend.load(source?.blend);
         }
         needsPlugin(options) {
-            return !!options?.blend?.enable || !!options?.particles?.blend?.enable;
+            if (options?.blend?.enable ||
+                options?.particles?.blend?.enable ||
+                Object.values(options?.particles?.groups ?? {}).some(hasEnabledBlend)) {
+                return true;
+            }
+            const emitters = options?.["emitters"];
+            let emitterList = [];
+            if (Array.isArray(emitters)) {
+                emitterList = emitters;
+            }
+            else if (emitters) {
+                emitterList = [emitters];
+            }
+            return emitterList.some(emitter => {
+                if (!emitter || typeof emitter !== "object" || !("particles" in emitter)) {
+                    return false;
+                }
+                const particles = emitter.particles;
+                return Array.isArray(particles) ? particles.some(hasEnabledBlend) : hasEnabledBlend(particles);
+            });
         }
     }
 
     async function loadBlendPlugin(engine) {
-        engine.checkVersion("4.5.0");
+        engine.checkVersion("4.5.2");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new BlendPlugin());
         });
@@ -2558,7 +2598,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     }
 
     async function loadCircleShape(engine) {
-        engine.checkVersion("4.5.0");
+        engine.checkVersion("4.5.2");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["circle"], () => {
                 return Promise.resolve(new CircleDrawer());
@@ -2606,7 +2646,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     }
 
     async function loadHexColorPlugin(engine) {
-        engine.checkVersion("4.5.0");
+        engine.checkVersion("4.5.2");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("hex", new HexColorManager());
         });
@@ -2659,7 +2699,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     }
 
     async function loadHslColorPlugin(engine) {
-        engine.checkVersion("4.5.0");
+        engine.checkVersion("4.5.2");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("hsl", new HslColorManager());
         });
@@ -2691,7 +2731,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     }
 
     async function loadMovePlugin(engine) {
-        engine.checkVersion("4.5.0");
+        engine.checkVersion("4.5.2");
         if (typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
             addErrorMessages(ErrorMessages$2);
         }
@@ -2901,7 +2941,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     }
 
     async function loadOpacityUpdater(engine) {
-        engine.checkVersion("4.5.0");
+        engine.checkVersion("4.5.2");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("opacity", container => {
                 return Promise.resolve(new OpacityUpdater(container));
@@ -3230,7 +3270,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     }
 
     async function loadOutModesUpdater(engine) {
-        engine.checkVersion("4.5.0");
+        engine.checkVersion("4.5.2");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("outModes", container => {
                 return Promise.resolve(new OutOfCanvasUpdater(container));
@@ -3309,7 +3349,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     }
 
     async function loadPaintUpdater(engine) {
-        engine.checkVersion("4.5.0");
+        engine.checkVersion("4.5.2");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("paint", container => {
                 return Promise.resolve(new PaintUpdater(e.pluginManager, container));
@@ -3364,7 +3404,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     }
 
     async function loadRgbColorPlugin(engine) {
-        engine.checkVersion("4.5.0");
+        engine.checkVersion("4.5.2");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("rgb", new RgbColorManager());
         });
@@ -3449,7 +3489,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     }
 
     async function loadSizeUpdater(engine) {
-        engine.checkVersion("4.5.0");
+        engine.checkVersion("4.5.2");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("size", container => {
                 return Promise.resolve(new SizeUpdater(container));
@@ -3458,7 +3498,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     }
 
     async function loadBasic(engine) {
-        engine.checkVersion("4.5.0");
+        engine.checkVersion("4.5.2");
         await engine.pluginManager.register(async (e) => {
             await Promise.all([
                 loadBlendPlugin(e),
@@ -3664,7 +3704,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     const clickEvent = "click", mouseDownEvent = "pointerdown", mouseUpEvent = "pointerup", mouseLeaveEvent = "pointerleave", mouseMoveEvent = "pointermove", touchStartEvent = "touchstart", touchEndEvent = "touchend", touchMoveEvent = "touchmove", touchCancelEvent = "touchcancel";
 
     async function loadInteractivityPlugin(engine) {
-        engine.checkVersion("4.5.0");
+        engine.checkVersion("4.5.2");
         if (typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
             addErrorMessages(ErrorMessages$1);
         }
@@ -3821,7 +3861,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
                 return (Math.abs(Math.round(this.#ownerZ) - Math.round(neighbor.getPosition().z)) <= ownerRadius + neighbor.getRadius());
             };
         }
-        separateOverlaps(particle, position) {
+        separateOverlaps(particle, position, margin, maxX, maxY) {
             const neighbors = this.#neighbors, particlePosition = particle.position;
             particlePosition.setTo(position);
             for (let iteration = 0; iteration < separationIterations; iteration++) {
@@ -3829,6 +3869,9 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
                     this.#projectPair(particle, neighbor);
                 }
             }
+            if (margin !== undefined && maxX !== undefined && maxY !== undefined) {
+                clampToWalls(particlePosition, margin, maxX, maxY);
+            }
         }
         solve(container, particle) {
             const collisionsOptions = particle.options.collisions;
@@ -3876,7 +3919,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
             if (hasBounds) {
                 clampToWalls(position, margin, maxX, maxY);
             }
-            this.separateOverlaps(particle, position);
+            this.separateOverlaps(particle, position, hasBounds ? margin : undefined, maxX, maxY);
             this.#dampContacts(particle);
             if (hasBounds) {
                 this.#cancelWallVelocity(particle, margin, maxX, maxY);
@@ -3929,10 +3972,10 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
             }
         }
         #queryNeighbors(container, particle, radius, maxNeighbors) {
+            this.#neighbors.length = 0;
             if (radius <= minRadius || maxNeighbors <= minCount) {
                 return;
             }
-            this.#neighbors.length = 0;
             container.particles.grid.queryCircle(particle.getPosition(), radius, this.#isNeighbor, this.#neighbors);
         }
     }
@@ -4116,7 +4159,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     }
 
     async function loadParticlesCollisionsInteraction(engine) {
-        engine.checkVersion("4.5.0");
+        engine.checkVersion("4.5.2");
         if (typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
             addErrorMessages(ErrorMessages);
         }
@@ -4136,8 +4179,9 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
             this.#canvasSize = canvasSize;
         }
         contains(point) {
-            if (super.contains(point))
+            if (super.contains(point)) {
                 return true;
+            }
             const { width, height } = this.#canvasSize, { x, y } = point;
             return (super.contains({ x: x - width, y }) ||
                 super.contains({ x: x + width, y }) ||
@@ -4149,8 +4193,9 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
                 super.contains({ x: x + width, y: y - height }));
         }
         intersects(range) {
-            if (super.intersects(range))
+            if (super.intersects(range)) {
                 return true;
+            }
             const { width, height } = this.#canvasSize, pos = range.position, shifts = [
                 { x: -width, y: 0 },
                 { x: width, y: 0 },
@@ -4171,11 +4216,40 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
                     const rect = range;
                     shiftedRange = new Rectangle(shiftedPos.x, shiftedPos.y, rect.size.width, rect.size.height);
                 }
-                if (super.intersects(shiftedRange))
+                if (super.intersects(shiftedRange)) {
                     return true;
+                }
             }
             return false;
         }
+        query(grid) {
+            const { x, y } = this.position, { width, height } = this.#canvasSize, radius = this.radius, crossesLeft = x - radius <= originPoint.x, crossesRight = x + radius >= width, crossesTop = y - radius <= originPoint.y, crossesBottom = y + radius >= height;
+            if (!crossesLeft && !crossesRight && !crossesTop && !crossesBottom) {
+                return grid.query(this);
+            }
+            const xShifts = [originPoint.x], yShifts = [originPoint.y];
+            if (crossesLeft) {
+                xShifts.push(width);
+            }
+            if (crossesRight) {
+                xShifts.push(-width);
+            }
+            if (crossesTop) {
+                yShifts.push(height);
+            }
+            if (crossesBottom) {
+                yShifts.push(-height);
+            }
+            const particles = new Set();
+            for (const dx of xShifts) {
+                for (const dy of yShifts) {
+                    for (const particle of grid.queryCircle({ x: x + dx, y: y + dy }, radius)) {
+                        particles.add(particle);
+                    }
+                }
+            }
+            return [...particles];
+        }
     }
 
     class LinksShadow {
@@ -4285,7 +4359,9 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
             if (pos1.x < originPoint.x || pos1.y < originPoint.y || pos1.x > canvasSize.width || pos1.y > canvasSize.height) {
                 return;
             }
-            const linkOpt1 = p1.options.links, optOpacity = linkOpt1.opacity, optDistance = p1.retina.linksDistance ?? minDistance$1, warp = linkOpt1.warp, range = warp ? new CircleWarp(pos1.x, pos1.y, optDistance, canvasSize) : new Circle(pos1.x, pos1.y, optDistance), query = container.particles.grid.query(range);
+            const linkOpt1 = p1.options.links, optOpacity = linkOpt1.opacity, optDistance = p1.retina.linksDistance ?? minDistance$1, warp = linkOpt1.warp, query = (warp
+                ? new CircleWarp(pos1.x, pos1.y, optDistance, canvasSize).query(container.particles.grid)
+                : container.particles.grid.queryCircle(pos1, optDistance));
             for (const p2 of query) {
                 const linkOpt2 = p2.options.links;
                 if (p1 === p2 ||
@@ -4373,7 +4449,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     }
 
     async function loadParticlesLinksInteraction(engine) {
-        engine.checkVersion("4.5.0");
+        engine.checkVersion("4.5.2");
         await engine.pluginManager.register((e) => {
             const pluginManager = e.pluginManager;
             ensureInteractivityPluginLoaded(e);
@@ -4386,7 +4462,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
 
     let initPromise = null;
     async function doInitPlugins(engine) {
-        engine.checkVersion("4.5.0");
+        engine.checkVersion("4.5.2");
         await engine.pluginManager.register(async (e) => {
             const loadParticlesInteractivity = async (e) => {
                 await loadInteractivityPlugin(e);
@@ -4429,7 +4505,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     particles.init = async () => {
         await initPlugins(tsParticles);
     };
-    particles.version = "4.5.0";
+    particles.version = "4.5.2";
     globalThis.particles = particles;
 
     const globalObject = globalThis;
@@ -4598,7 +4674,8 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
             });
         }
         drawParticles(delta) {
-            const { particles, actualOptions } = this.#container, clearedPlugin = this.clear();
+            const { particles, actualOptions } = this.#container;
+            this.clear();
             particles.update(delta);
             this.draw(ctx => {
                 const width = this.#canvasManager.size.width, height = this.#canvasManager.size.height;
@@ -4620,9 +4697,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
                     }
                 }
                 for (const plugin of this.#getLayerPlugins(exports.DrawLayer.BackgroundMask)) {
-                    if (plugin !== clearedPlugin) {
-                        plugin.canvasPaint?.();
-                    }
+                    plugin.canvasPaint?.();
                 }
                 for (const plugin of this.#getLayerPlugins(exports.DrawLayer.CanvasSetup)) {
                     plugin.drawSettingsSetup?.(ctx, delta);
@@ -4712,6 +4787,9 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
                 ctx.clearRect(originPoint.x, originPoint.y, this.#canvasManager.size.width, this.#canvasManager.size.height);
             });
         }
+        updateBackgroundElement() {
+            this.#resolveBackgroundElement();
+        }
         #applyPostDrawUpdaters(particle) {
             for (const updater of this.#postDrawUpdaters) {
                 updater.afterDraw?.(particle);
@@ -4910,7 +4988,14 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
             }
             if (typeof background.element === "string") {
                 if (typeof document !== "undefined") {
-                    const node = document.querySelector(background.element);
+                    let node;
+                    try {
+                        node = document.querySelector(background.element);
+                    }
+                    catch {
+                        this.#warnOnce("background-element-invalid-selector", `Background element selector "${background.element}" is invalid`);
+                        return;
+                    }
                     if (node && this.#isSupportedElement(node)) {
                         this.#backgroundElement = node;
                     }
@@ -5356,6 +5441,10 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
             this.#manageListeners(true);
         }
         removeListeners() {
+            if (this.#resizeTimeout !== undefined) {
+                clearTimeout(this.#resizeTimeout);
+                this.#resizeTimeout = undefined;
+            }
             this.#manageListeners(false);
         }
         #handleVisibilityChange() {
@@ -5730,10 +5819,10 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
             runParticleCreatedPlugins(container, this);
         }
         isInsideCanvas(direction) {
-            return this.#getInsideCanvasResult({ direction }).inside;
+            return this.#getInsideCanvasResult(direction).inside;
         }
         isInsideCanvasForOutMode(outMode, direction) {
-            return this.#getInsideCanvasResult({ direction, outMode }).inside;
+            return this.#getInsideCanvasResult(direction, outMode).inside;
         }
         isShowingBack() {
             if (!this.roll) {
@@ -5850,7 +5939,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
             });
         }
         #getDefaultInsideCanvasResult(direction, outMode) {
-            const radius = this.getRadius(), canvasSize = this.#container.canvas.size, position = this.position, isBounce = outMode === exports.OutMode.bounce;
+            const radius = this.getRadius(), canvasSize = this.#container.canvas.size, position = this.position, isBounce = outMode === exports.OutMode.bounce || outMode === exports.OutMode.split;
             if (direction === exports.OutModeDirection.bottom) {
                 return {
                     inside: isBounce ? position.y + radius < canvasSize.height : position.y - radius < canvasSize.height,
@@ -5892,12 +5981,16 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
                 radius: this.getRadius(),
             };
         }
-        #getInsideCanvasResult(data) {
-            const defaultResult = this.#getDefaultInsideCanvasResult(data.direction, data.outMode), container = this.#container, shapeDrawer = this.shape ? container.shapeDrawers.get(this.shape) : undefined, effectDrawer = this.effect ? container.effectDrawers.get(this.effect) : undefined, shapeCheck = shapeDrawer?.isInsideCanvas, effectCheck = effectDrawer?.isInsideCanvas;
-            if (!shapeCheck && !effectCheck) {
+        #getInsideCanvasResult(direction, outMode) {
+            const defaultResult = this.#getDefaultInsideCanvasResult(direction, outMode), container = this.#container, shapeDrawer = this.shape ? container.shapeDrawers.get(this.shape) : undefined, effectDrawer = this.effect ? container.effectDrawers.get(this.effect) : undefined;
+            if (!shapeDrawer?.isInsideCanvas && !effectDrawer?.isInsideCanvas) {
                 return defaultResult;
             }
-            const callbackData = this.#getInsideCanvasCallbackData(data.direction, data.outMode), shapeResult = shapeCheck ? this.#normalizeInsideCanvasResult(shapeCheck(callbackData), "shape") : undefined, effectResult = effectCheck ? this.#normalizeInsideCanvasResult(effectCheck(callbackData), "effect") : undefined;
+            const callbackData = this.#getInsideCanvasCallbackData(direction, outMode), shapeResult = shapeDrawer?.isInsideCanvas
+                ? this.#normalizeInsideCanvasResult(shapeDrawer.isInsideCanvas(callbackData), "shape")
+                : undefined, effectResult = effectDrawer?.isInsideCanvas
+                ? this.#normalizeInsideCanvasResult(effectDrawer.isInsideCanvas(callbackData), "effect")
+                : undefined;
             if (shapeResult && effectResult) {
                 const margin = Math.max(shapeResult.margin ?? defaultAngle, effectResult.margin ?? defaultAngle);
                 return {
@@ -5963,8 +6056,8 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     }
 
     class SpatialHashGrid {
-        #cellSize;
         #cells = new Map();
+        #cellSize;
         #circlePool = [];
         #circlePoolIdx;
         #pendingCellSize;
@@ -6010,14 +6103,22 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
             return out;
         }
         queryCircle(position, radius, check, out = []) {
-            const circle = this.#acquireCircle(position.x, position.y, radius), result = this.query(circle, check, out);
-            this.#releaseShapes();
-            return result;
+            const circle = this.#acquireCircle(position.x, position.y, radius);
+            try {
+                return this.query(circle, check, out);
+            }
+            finally {
+                this.#circlePoolIdx--;
+            }
         }
         queryRectangle(position, size, check, out = []) {
-            const rect = this.#acquireRectangle(position.x, position.y, size.width, size.height), result = this.query(rect, check, out);
-            this.#releaseShapes();
-            return result;
+            const rect = this.#acquireRectangle(position.x, position.y, size.width, size.height);
+            try {
+                return this.query(rect, check, out);
+            }
+            finally {
+                this.#rectanglePoolIdx--;
+            }
         }
         #acquireCircle(x, y, r) {
             const idx = this.#circlePoolIdx++;
@@ -6076,10 +6177,6 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
                 }
             }
         }
-        #releaseShapes() {
-            this.#circlePoolIdx = 0;
-            this.#rectanglePoolIdx = 0;
-        }
     }
 
     class ParticlesManager {
@@ -6618,8 +6715,8 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
         particleCreatedPlugins;
         particleDestroyedPlugins;
         particlePositionPlugins;
-        particleUpdaters;
         particles;
+        particleUpdaters;
         peakNits;
         plugins;
         retina;
@@ -6627,6 +6724,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
         started;
         zLayers;
         #delay;
+        #delayResolve;
         #delayTimeout;
         #delta = { value: 0, factor: 0 };
         #dispatchCallback;
@@ -6865,7 +6963,10 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
             await this.init();
             this.started = true;
             await new Promise(resolve => {
+                this.#delayResolve = resolve;
                 const start = async () => {
+                    this.#delayTimeout = undefined;
+                    this.#delayResolve = undefined;
                     this.#eventListeners.addListeners();
                     for (const plugin of this.plugins) {
                         await plugin.start?.();
@@ -6881,9 +6982,11 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
             if (!guardCheck(this) || !this.started) {
                 return;
             }
-            if (this.#delayTimeout) {
+            if (this.#delayTimeout !== undefined) {
                 clearTimeout(this.#delayTimeout);
                 this.#delayTimeout = undefined;
+                this.#delayResolve?.();
+                this.#delayResolve = undefined;
             }
             this.#firstStart = true;
             this.started = false;
@@ -6907,6 +7010,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
                     refresh = plugin.updateActualOptions() || refresh;
                 }
             }
+            this.canvas.render.updateBackgroundElement();
             return refresh;
         }
         #initPlugins(allContainerPlugins) {
@@ -7347,7 +7451,9 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
             manageListener(interactivityEl, mouseMoveEvent, handlers.mouseMove, add);
             manageListener(interactivityEl, touchStartEvent, handlers.touchStart, add);
             manageListener(interactivityEl, touchMoveEvent, handlers.touchMove, add);
-            manageListener(interactivityEl, touchEndEvent, options.interactivity?.events.onClick.enable ? handlers.touchEndClick : handlers.touchEnd, add);
+            const onClickEnabled = !!options.interactivity?.events.onClick.enable;
+            manageListener(interactivityEl, touchEndEvent, handlers.touchEndClick, add && onClickEnabled);
+            manageListener(interactivityEl, touchEndEvent, handlers.touchEnd, add && !onClickEnabled);
             manageListener(interactivityEl, mouseUpEvent, handlers.mouseUp, add);
             manageListener(interactivityEl, mouseDownEvent, handlers.mouseDown, add);
             manageListener(interactivityEl, mouseLeaveEvent, handlers.mouseLeave, add);