@tsparticles/particles 4.5.1 → 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.1 */
+/* 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);
             }
         }
@@ -947,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.1";
+            return "4.5.2";
         }
         addEventListener(type, listener) {
             this.#eventDispatcher.addEventListener(type, listener);
@@ -981,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);
+                }
+                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;
                 }
-                items.splice(oldIndex, deleteCount, newItem);
+                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) {
@@ -2491,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) {
@@ -2512,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.1");
+        engine.checkVersion("4.5.2");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new BlendPlugin());
         });
@@ -2554,7 +2598,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     }
 
     async function loadCircleShape(engine) {
-        engine.checkVersion("4.5.1");
+        engine.checkVersion("4.5.2");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["circle"], () => {
                 return Promise.resolve(new CircleDrawer());
@@ -2602,7 +2646,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     }
 
     async function loadHexColorPlugin(engine) {
-        engine.checkVersion("4.5.1");
+        engine.checkVersion("4.5.2");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("hex", new HexColorManager());
         });
@@ -2655,7 +2699,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     }
 
     async function loadHslColorPlugin(engine) {
-        engine.checkVersion("4.5.1");
+        engine.checkVersion("4.5.2");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("hsl", new HslColorManager());
         });
@@ -2687,7 +2731,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     }
 
     async function loadMovePlugin(engine) {
-        engine.checkVersion("4.5.1");
+        engine.checkVersion("4.5.2");
         if (typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
             addErrorMessages(ErrorMessages$2);
         }
@@ -2897,7 +2941,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     }
 
     async function loadOpacityUpdater(engine) {
-        engine.checkVersion("4.5.1");
+        engine.checkVersion("4.5.2");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("opacity", container => {
                 return Promise.resolve(new OpacityUpdater(container));
@@ -3226,7 +3270,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     }
 
     async function loadOutModesUpdater(engine) {
-        engine.checkVersion("4.5.1");
+        engine.checkVersion("4.5.2");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("outModes", container => {
                 return Promise.resolve(new OutOfCanvasUpdater(container));
@@ -3305,7 +3349,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     }
 
     async function loadPaintUpdater(engine) {
-        engine.checkVersion("4.5.1");
+        engine.checkVersion("4.5.2");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("paint", container => {
                 return Promise.resolve(new PaintUpdater(e.pluginManager, container));
@@ -3360,7 +3404,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     }
 
     async function loadRgbColorPlugin(engine) {
-        engine.checkVersion("4.5.1");
+        engine.checkVersion("4.5.2");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("rgb", new RgbColorManager());
         });
@@ -3445,7 +3489,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     }
 
     async function loadSizeUpdater(engine) {
-        engine.checkVersion("4.5.1");
+        engine.checkVersion("4.5.2");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("size", container => {
                 return Promise.resolve(new SizeUpdater(container));
@@ -3454,7 +3498,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     }
 
     async function loadBasic(engine) {
-        engine.checkVersion("4.5.1");
+        engine.checkVersion("4.5.2");
         await engine.pluginManager.register(async (e) => {
             await Promise.all([
                 loadBlendPlugin(e),
@@ -3660,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.1");
+        engine.checkVersion("4.5.2");
         if (typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
             addErrorMessages(ErrorMessages$1);
         }
@@ -3817,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++) {
@@ -3825,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;
@@ -3872,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);
@@ -3925,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);
         }
     }
@@ -4112,7 +4159,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     }
 
     async function loadParticlesCollisionsInteraction(engine) {
-        engine.checkVersion("4.5.1");
+        engine.checkVersion("4.5.2");
         if (typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
             addErrorMessages(ErrorMessages);
         }
@@ -4132,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 }) ||
@@ -4145,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 },
@@ -4167,8 +4216,9 @@ 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;
         }
@@ -4178,14 +4228,18 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
                 return grid.query(this);
             }
             const xShifts = [originPoint.x], yShifts = [originPoint.y];
-            if (crossesLeft)
+            if (crossesLeft) {
                 xShifts.push(width);
-            if (crossesRight)
+            }
+            if (crossesRight) {
                 xShifts.push(-width);
-            if (crossesTop)
+            }
+            if (crossesTop) {
                 yShifts.push(height);
-            if (crossesBottom)
+            }
+            if (crossesBottom) {
                 yShifts.push(-height);
+            }
             const particles = new Set();
             for (const dx of xShifts) {
                 for (const dy of yShifts) {
@@ -4395,7 +4449,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     }
 
     async function loadParticlesLinksInteraction(engine) {
-        engine.checkVersion("4.5.1");
+        engine.checkVersion("4.5.2");
         await engine.pluginManager.register((e) => {
             const pluginManager = e.pluginManager;
             ensureInteractivityPluginLoaded(e);
@@ -4408,7 +4462,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
 
     let initPromise = null;
     async function doInitPlugins(engine) {
-        engine.checkVersion("4.5.1");
+        engine.checkVersion("4.5.2");
         await engine.pluginManager.register(async (e) => {
             const loadParticlesInteractivity = async (e) => {
                 await loadInteractivityPlugin(e);
@@ -4451,7 +4505,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     particles.init = async () => {
         await initPlugins(tsParticles);
     };
-    particles.version = "4.5.1";
+    particles.version = "4.5.2";
     globalThis.particles = particles;
 
     const globalObject = globalThis;
@@ -4620,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;
@@ -4642,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);
@@ -4734,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);
@@ -4932,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;
                     }
@@ -5756,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) {
@@ -5876,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,
@@ -5918,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 {
@@ -5989,8 +6056,8 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     }
 
     class SpatialHashGrid {
-        #cellSize;
         #cells = new Map();
+        #cellSize;
         #circlePool = [];
         #circlePoolIdx;
         #pendingCellSize;
@@ -6648,8 +6715,8 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
         particleCreatedPlugins;
         particleDestroyedPlugins;
         particlePositionPlugins;
-        particleUpdaters;
         particles;
+        particleUpdaters;
         peakNits;
         plugins;
         retina;
@@ -6943,6 +7010,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
                     refresh = plugin.updateActualOptions() || refresh;
                 }
             }
+            this.canvas.render.updateBackgroundElement();
             return refresh;
         }
         #initPlugins(allContainerPlugins) {