@tsparticles/preset-stars 4.5.0 → 4.5.2

package/tsparticles.preset.stars.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) {
-/* Preset v4.5.0 */
+/* Preset v4.5.2 */
 g.__tsParticlesInternals = g.__tsParticlesInternals || {};
 g.__tsParticlesInternals.presets = g.__tsParticlesInternals.presets || {};
 (function (exports) {
@@ -120,7 +120,7 @@ g.__tsParticlesInternals.presets = g.__tsParticlesInternals.presets || {};
         }
         normalize() {
             const length = this.length;
-            if (length != none) {
+            if (length !== none) {
                 this.multTo(inverseFactorNumerator / length);
             }
         }
@@ -654,12 +654,8 @@ g.__tsParticlesInternals.presets = g.__tsParticlesInternals.presets || {};
         }
         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);
@@ -691,7 +687,7 @@ g.__tsParticlesInternals.presets = g.__tsParticlesInternals.presets || {};
                 this.#listeners.delete(type);
             }
             else {
-                arr.splice(idx, deleteCount);
+                this.#listeners.set(type, [...arr.slice(minIndex, idx), ...arr.slice(idx + deleteCount)]);
             }
         }
     }
@@ -868,11 +864,13 @@ g.__tsParticlesInternals.presets = g.__tsParticlesInternals.presets || {};
         #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);
@@ -902,44 +900,60 @@ g.__tsParticlesInternals.presets = g.__tsParticlesInternals.presets || {};
             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) {
@@ -2247,6 +2261,13 @@ g.__tsParticlesInternals.presets = g.__tsParticlesInternals.presets || {};
         }
     }
 
+    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) {
@@ -2268,12 +2289,31 @@ g.__tsParticlesInternals.presets = g.__tsParticlesInternals.presets || {};
             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());
         });
@@ -2310,7 +2350,7 @@ g.__tsParticlesInternals.presets = g.__tsParticlesInternals.presets || {};
     }
 
     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());
@@ -2358,7 +2398,7 @@ g.__tsParticlesInternals.presets = g.__tsParticlesInternals.presets || {};
     }
 
     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());
         });
@@ -2411,7 +2451,7 @@ g.__tsParticlesInternals.presets = g.__tsParticlesInternals.presets || {};
     }
 
     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());
         });
@@ -2443,7 +2483,7 @@ g.__tsParticlesInternals.presets = g.__tsParticlesInternals.presets || {};
     }
 
     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);
         }
@@ -2653,7 +2693,7 @@ g.__tsParticlesInternals.presets = g.__tsParticlesInternals.presets || {};
     }
 
     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));
@@ -2982,7 +3022,7 @@ g.__tsParticlesInternals.presets = g.__tsParticlesInternals.presets || {};
     }
 
     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));
@@ -3061,7 +3101,7 @@ g.__tsParticlesInternals.presets = g.__tsParticlesInternals.presets || {};
     }
 
     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));
@@ -3116,7 +3156,7 @@ g.__tsParticlesInternals.presets = g.__tsParticlesInternals.presets || {};
     }
 
     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());
         });
@@ -3201,7 +3241,7 @@ g.__tsParticlesInternals.presets = g.__tsParticlesInternals.presets || {};
     }
 
     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));
@@ -3210,7 +3250,7 @@ g.__tsParticlesInternals.presets = g.__tsParticlesInternals.presets || {};
     }
 
     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),
@@ -3440,7 +3480,8 @@ g.__tsParticlesInternals.presets = g.__tsParticlesInternals.presets || {};
             });
         }
         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;
@@ -3462,9 +3503,7 @@ g.__tsParticlesInternals.presets = g.__tsParticlesInternals.presets || {};
                     }
                 }
                 for (const plugin of this.#getLayerPlugins(DrawLayer.BackgroundMask)) {
-                    if (plugin !== clearedPlugin) {
-                        plugin.canvasPaint?.();
-                    }
+                    plugin.canvasPaint?.();
                 }
                 for (const plugin of this.#getLayerPlugins(DrawLayer.CanvasSetup)) {
                     plugin.drawSettingsSetup?.(ctx, delta);
@@ -3554,6 +3593,9 @@ g.__tsParticlesInternals.presets = g.__tsParticlesInternals.presets || {};
                 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);
@@ -3752,7 +3794,14 @@ g.__tsParticlesInternals.presets = g.__tsParticlesInternals.presets || {};
             }
             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;
                     }
@@ -4198,6 +4247,10 @@ g.__tsParticlesInternals.presets = g.__tsParticlesInternals.presets || {};
             this.#manageListeners(true);
         }
         removeListeners() {
+            if (this.#resizeTimeout !== undefined) {
+                clearTimeout(this.#resizeTimeout);
+                this.#resizeTimeout = undefined;
+            }
             this.#manageListeners(false);
         }
         #handleVisibilityChange() {
@@ -4572,10 +4625,10 @@ g.__tsParticlesInternals.presets = g.__tsParticlesInternals.presets || {};
             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) {
@@ -4692,7 +4745,7 @@ g.__tsParticlesInternals.presets = g.__tsParticlesInternals.presets || {};
             });
         }
         #getDefaultInsideCanvasResult(direction, outMode) {
-            const radius = this.getRadius(), canvasSize = this.#container.canvas.size, position = this.position, isBounce = outMode === OutMode.bounce;
+            const radius = this.getRadius(), canvasSize = this.#container.canvas.size, position = this.position, isBounce = outMode === OutMode.bounce || outMode === OutMode.split;
             if (direction === OutModeDirection.bottom) {
                 return {
                     inside: isBounce ? position.y + radius < canvasSize.height : position.y - radius < canvasSize.height,
@@ -4734,12 +4787,16 @@ g.__tsParticlesInternals.presets = g.__tsParticlesInternals.presets || {};
                 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 {
@@ -4805,8 +4862,8 @@ g.__tsParticlesInternals.presets = g.__tsParticlesInternals.presets || {};
     }
 
     class SpatialHashGrid {
-        #cellSize;
         #cells = new Map();
+        #cellSize;
         #circlePool = [];
         #circlePoolIdx;
         #pendingCellSize;
@@ -4852,14 +4909,22 @@ g.__tsParticlesInternals.presets = g.__tsParticlesInternals.presets || {};
             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++;
@@ -4918,10 +4983,6 @@ g.__tsParticlesInternals.presets = g.__tsParticlesInternals.presets || {};
                 }
             }
         }
-        #releaseShapes() {
-            this.#circlePoolIdx = 0;
-            this.#rectanglePoolIdx = 0;
-        }
     }
 
     class ParticlesManager {
@@ -5460,8 +5521,8 @@ g.__tsParticlesInternals.presets = g.__tsParticlesInternals.presets || {};
         particleCreatedPlugins;
         particleDestroyedPlugins;
         particlePositionPlugins;
-        particleUpdaters;
         particles;
+        particleUpdaters;
         peakNits;
         plugins;
         retina;
@@ -5469,6 +5530,7 @@ g.__tsParticlesInternals.presets = g.__tsParticlesInternals.presets || {};
         started;
         zLayers;
         #delay;
+        #delayResolve;
         #delayTimeout;
         #delta = { value: 0, factor: 0 };
         #dispatchCallback;
@@ -5707,7 +5769,10 @@ g.__tsParticlesInternals.presets = g.__tsParticlesInternals.presets || {};
             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?.();
@@ -5723,9 +5788,11 @@ g.__tsParticlesInternals.presets = g.__tsParticlesInternals.presets || {};
             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;
@@ -5749,6 +5816,7 @@ g.__tsParticlesInternals.presets = g.__tsParticlesInternals.presets || {};
                     refresh = plugin.updateActualOptions() || refresh;
                 }
             }
+            this.canvas.render.updateBackgroundElement();
             return refresh;
         }
         #initPlugins(allContainerPlugins) {