@tsparticles/stencil 4.2.1 → 4.3.1

package/dist/esm/{Container-DZZsfp6i.js → Container-COqetWkt.js}

@@ -1,4 +1,4 @@
-import { R as RangeType, c as checkDistance, s as squareExp, a as isNull, b as setRangeValue, h as hMin, d as hMax, l as lMin, e as lMax, f as sMin, g as sMax, j as isString, k as isArray, m as deepExtend, P as PixelMode, O as OutMode, M as MoveDirection, n as isNumber, o as isObject, L as LimitMode, p as executeOnSingleOrMultiple, q as isBoolean, r as itemFromArray, u as defaultOpacity, v as randomColorValue, A as AlterType, w as lFactor, x as half, y as double, z as hPhase, B as rgbMax, C as getRandomInRange, D as identity, E as defaultRgbMin, F as maxNits, G as sextuple, H as triple, I as phaseNumerator, J as sNormalizedOffset, K as originPoint, N as minimumSize, Q as defaultCompositeValue, S as minStrokeWidth, T as defaultZoom, U as zIndexFactorOffset, V as defaultTransformValue, W as safeMutationObserver, X as generatedAttribute, Y as cloneStyle, Z as safeMatchMedia, _ as getFullScreenStyle, $ as safeDocument, a0 as millisecondsToSeconds, a1 as manageListener, a2 as visibilityChangeEvent, a3 as resizeEvent, a4 as Vector3d, a5 as EventType, a6 as defaultAngle, a7 as defaultTransform, a8 as defaultRetryCount, a9 as tryCountIncrement, aa as getParticleBaseVelocity, ab as randomInRangeValue, ac as getRandom, ad as OutModeDirection, ae as clamp, af as minZ, ag as getPosition, ah as getParticleDirectionAngle, ai as ParticleOutType, aj as Vector, ak as getRangeValue, al as calcExactPositionOrRandomFromSize, am as itemFromSingleOrMultiple, an as isInArray, ao as doublePI, ap as degToRad, aq as spatialHashGridCellSize, ar as minLimit, as as minCount, at as getLogger, au as minIndex, av as defaultRemoveQuantity, aw as defaultDensityFactor, ax as deleteCount, ay as countOffset, az as one, aA as defaultRatio, aB as defaultReduceFactor, aC as animate, aD as defaultFpsLimit, aE as minFpsLimit, aF as cancelAnimation, aG as defaultFps } from './index-BH3sNkGS.js';
+import { R as RangeType, c as checkDistance, s as squareExp, a as isNull, b as setRangeValue, h as hMin, d as hMax, l as lMin, e as lMax, f as sMin, g as sMax, j as isString, k as isArray, m as deepExtend, P as PixelMode, O as OutMode, M as MoveDirection, n as isNumber, o as isObject, L as LimitMode, p as executeOnSingleOrMultiple, q as isBoolean, r as itemFromArray, u as defaultOpacity, v as randomColorValue, A as AlterType, w as lFactor, x as half, y as double, z as hPhase, B as rgbMax, C as getRandomInRange, D as identity, E as defaultRgbMin, F as maxNits, G as sextuple, H as triple, I as phaseNumerator, J as sNormalizedOffset, K as originPoint, N as DrawLayer, Q as minimumSize, S as defaultCompositeValue, T as minStrokeWidth, U as defaultZoom, V as getLogger, W as zIndexFactorOffset, X as defaultTransformValue, Y as safeMutationObserver, Z as generatedAttribute, _ as cloneStyle, $ as safeMatchMedia, a0 as getFullScreenStyle, a1 as safeDocument, a2 as millisecondsToSeconds, a3 as manageListener, a4 as visibilityChangeEvent, a5 as resizeEvent, a6 as Vector3d, a7 as EventType, a8 as defaultAngle, a9 as defaultTransform, aa as defaultRetryCount, ab as tryCountIncrement, ac as getParticleBaseVelocity, ad as randomInRangeValue, ae as getRandom, af as OutModeDirection, ag as clamp, ah as minZ, ai as getPosition, aj as getParticleDirectionAngle, ak as ParticleOutType, al as Vector, am as calcExactPositionOrRandomFromSize, an as getRangeValue, ao as itemFromSingleOrMultiple, ap as isInArray, aq as doublePI, ar as degToRad, as as spatialHashGridCellSize, at as minLimit, au as minCount, av as minIndex, aw as defaultRemoveQuantity, ax as defaultDensityFactor, ay as deleteCount, az as countOffset, aA as one, aB as defaultRatio, aC as defaultReduceFactor, aD as animate, aE as defaultFpsLimit, aF as minFpsLimit, aG as cancelAnimation, aH as defaultFps } from './index-uBrXcY8m.js';
 
 class BaseRange {
     position;
@@ -204,6 +204,8 @@ class AnimatableColor extends OptionsColor {
 
 class Background extends OptionLoader {
     color;
+    draw;
+    element;
     image = "";
     opacity = 1;
     position = "";
@@ -218,6 +220,8 @@ class Background extends OptionLoader {
         if (data.color !== undefined) {
             this.color = OptionsColor.create(this.color, data.color);
         }
+        loadProperty(this, "element", data.element);
+        loadProperty(this, "draw", data.draw);
         loadProperty(this, "image", data.image);
         loadProperty(this, "position", data.position);
         loadProperty(this, "repeat", data.repeat);
@@ -753,7 +757,7 @@ class Options extends OptionLoader {
     }
 }
 
-const styleCache = new Map(), maxStyleCacheSize = 2000, rgbFixedPrecision = 2, hslFixedPrecision = 2, sdrReferenceWhiteNits = 203;
+const styleCache = new Map(), maxStyleCacheSize = 2000, rgbFixedPrecision = 2, hslFixedPrecision = 2, hdrRgbFixedPrecision = 4, hdrHslFixedPrecision = 4, sdrReferenceWhiteNits = 203;
 function getCachedStyle(key, generator) {
     let cached = styleCache.get(key);
     if (!cached) {
@@ -882,19 +886,20 @@ function hslChannel(temp1, temp2, temp3) {
     }
     return temp1;
 }
-function hslToRgb(hsl) {
+function hslToRgbFloat(hsl) {
     const h = ((hsl.h % hMax) + hMax) % hMax, s = Math.max(sMin, Math.min(sMax, hsl.s)), l = Math.max(lMin, Math.min(lMax, hsl.l)), hNormalized = h / hMax, sNormalized = s / sMax, lNormalized = l / lMax;
     if (s === sMin) {
-        const grayscaleValue = Math.round(lNormalized * rgbMax);
+        const grayscaleValue = lNormalized * rgbMax;
         return { r: grayscaleValue, g: grayscaleValue, b: grayscaleValue };
     }
     const temp1 = lNormalized < half
         ? lNormalized * (sNormalizedOffset + sNormalized)
         : lNormalized + sNormalized - lNormalized * sNormalized, temp2 = double * lNormalized - temp1, phaseThird = phaseNumerator / triple, red = Math.min(rgbMax, rgbMax * hslChannel(temp2, temp1, hNormalized + phaseThird)), green = Math.min(rgbMax, rgbMax * hslChannel(temp2, temp1, hNormalized)), blue = Math.min(rgbMax, rgbMax * hslChannel(temp2, temp1, hNormalized - phaseThird));
-    return { r: Math.round(red), g: Math.round(green), b: Math.round(blue) };
+    return { r: red, g: green, b: blue };
 }
-function getRandomRgbColor(min) {
-    const fixedMin = defaultRgbMin, fixedMax = rgbMax + identity, getRgbInRangeValue = () => Math.floor(getRandomInRange(fixedMin, fixedMax));
+function getRandomRgbColor(min, hdr) {
+    const fixedMin = defaultRgbMin;
+    const fixedMax = rgbMax + identity, getRgbInRangeValue = () => Math.floor(getRandomInRange(fixedMin, fixedMax));
     return {
         b: getRgbInRangeValue(),
         g: getRgbInRangeValue(),
@@ -902,7 +907,7 @@ function getRandomRgbColor(min) {
     };
 }
 function getStyleFromRgb(color, hdr, opacity) {
-    const op = opacity ?? defaultOpacity, key = `rgb-${color.r.toFixed(rgbFixedPrecision)}-${color.g.toFixed(rgbFixedPrecision)}-${color.b.toFixed(rgbFixedPrecision)}-${hdr ? "hdr" : "sdr"}-${op.toString()}`;
+    const rgbPrecision = hdr ? hdrRgbFixedPrecision : rgbFixedPrecision, op = opacity ?? defaultOpacity, key = `rgb-${color.r.toFixed(rgbPrecision)}-${color.g.toFixed(rgbPrecision)}-${color.b.toFixed(rgbPrecision)}-${hdr ? "hdr" : "sdr"}-${op.toString()}`;
     return getCachedStyle(key, () => (hdr ? getHdrStyleFromRgb(color, opacity) : getSdrStyleFromRgb(color, opacity)));
 }
 function getHdrStyleFromRgb(color, opacity, peakNits = maxNits) {
@@ -913,9 +918,9 @@ function getSdrStyleFromRgb(color, opacity) {
     return `rgba(${color.r.toString()}, ${color.g.toString()}, ${color.b.toString()}, ${(opacity ?? defaultOpacity).toString()})`;
 }
 function getStyleFromHsl(color, hdr, opacity) {
-    const op = opacity ?? defaultOpacity, key = `hsl-${color.h.toFixed(hslFixedPrecision)}-${color.s.toFixed(hslFixedPrecision)}-${color.l.toFixed(hslFixedPrecision)}-${hdr ? "hdr" : "sdr"}-${op.toString()}`;
+    const hslPrecision = hdr ? hdrHslFixedPrecision : hslFixedPrecision, op = opacity ?? defaultOpacity, key = `hsl-${color.h.toFixed(hslPrecision)}-${color.s.toFixed(hslPrecision)}-${color.l.toFixed(hslPrecision)}-${hdr ? "hdr" : "sdr"}-${op.toString()}`;
     return getCachedStyle(key, () => hdr
-        ? getStyleFromRgb(hslToRgb(color), true, opacity)
+        ? getStyleFromRgb(hslToRgbFloat(color), true, opacity)
         : `hsla(${color.h.toString()}, ${color.s.toString()}%, ${color.l.toString()}%, ${op.toString()})`);
 }
 function getHslFromAnimation(animation) {
@@ -943,10 +948,10 @@ function setTransformValue(factor, newFactor, key) {
     }
 }
 class RenderManager {
+    #backgroundElement;
+    #backgroundWarnings;
     #canvasClearPlugins;
     #canvasManager;
-    #canvasPaintPlugins;
-    #clearDrawPlugins;
     #colorPlugins;
     #container;
     #context;
@@ -954,9 +959,7 @@ class RenderManager {
     #drawParticlePlugins;
     #drawParticlesCleanupPlugins;
     #drawParticlesSetupPlugins;
-    #drawPlugins;
-    #drawSettingsCleanupPlugins;
-    #drawSettingsSetupPlugins;
+    #layers;
     #pluginManager;
     #postDrawUpdaters;
     #preDrawUpdaters;
@@ -968,18 +971,25 @@ class RenderManager {
         this.#container = container;
         this.#canvasManager = canvasManager;
         this.#context = null;
+        this.#backgroundElement = null;
+        this.#backgroundWarnings = new Set();
         this.#preDrawUpdaters = [];
         this.#postDrawUpdaters = [];
-        this.#colorPlugins = [];
         this.#canvasClearPlugins = [];
-        this.#canvasPaintPlugins = [];
-        this.#clearDrawPlugins = [];
+        this.#colorPlugins = [];
         this.#drawParticlePlugins = [];
         this.#drawParticlesCleanupPlugins = [];
         this.#drawParticlesSetupPlugins = [];
-        this.#drawPlugins = [];
-        this.#drawSettingsSetupPlugins = [];
-        this.#drawSettingsCleanupPlugins = [];
+        this.#layers = {
+            0: [],
+            1: [],
+            2: [],
+            3: [],
+            4: [],
+            5: [],
+            6: [],
+            7: [],
+        };
     }
     get settings() {
         return this.#contextSettings;
@@ -993,32 +1003,38 @@ class RenderManager {
         });
     }
     clear() {
-        let pluginHandled = false;
         for (const plugin of this.#canvasClearPlugins) {
-            pluginHandled = plugin.canvasClear?.() ?? false;
-            if (pluginHandled) {
-                break;
+            if (plugin.canvasClear?.() ?? false) {
+                return;
             }
         }
-        if (pluginHandled) {
-            return;
+        for (const layer of Object.values(DrawLayer)) {
+            if (typeof layer === "number") {
+                for (const plugin of this.#getLayerPlugins(layer)) {
+                    if (plugin.canvasClear?.() ?? false) {
+                        return;
+                    }
+                }
+            }
         }
         this.canvasClear();
     }
     destroy() {
         this.stop();
+        this.#backgroundElement = null;
+        this.#backgroundWarnings.clear();
         this.#preDrawUpdaters = [];
         this.#postDrawUpdaters = [];
-        this.#colorPlugins = [];
         this.#canvasClearPlugins = [];
-        this.#canvasPaintPlugins = [];
-        this.#clearDrawPlugins = [];
+        this.#colorPlugins = [];
         this.#drawParticlePlugins = [];
         this.#drawParticlesCleanupPlugins = [];
         this.#drawParticlesSetupPlugins = [];
-        this.#drawPlugins = [];
-        this.#drawSettingsSetupPlugins = [];
-        this.#drawSettingsCleanupPlugins = [];
+        for (const layer of Object.values(DrawLayer)) {
+            if (typeof layer === "number") {
+                this.#layers[layer] = [];
+            }
+        }
     }
     draw(cb) {
         const ctx = this.#context;
@@ -1075,21 +1091,40 @@ class RenderManager {
         });
     }
     drawParticles(delta) {
-        const { particles } = this.#container;
+        const { particles, actualOptions } = this.#container;
         this.clear();
         particles.update(delta);
         this.draw(ctx => {
-            for (const plugin of this.#drawSettingsSetupPlugins) {
+            const width = this.#canvasManager.size.width, height = this.#canvasManager.size.height;
+            if (this.#backgroundElement) {
+                try {
+                    ctx.drawImage(this.#backgroundElement, originPoint.x, originPoint.y, width, height);
+                }
+                catch {
+                    this.#warnOnce("background-element-draw-error", "Error drawing background element onto canvas");
+                }
+            }
+            const background = actualOptions.background;
+            if (background.draw) {
+                try {
+                    background.draw(ctx, delta);
+                }
+                catch {
+                    this.#warnOnce("background-draw-error", "Error in background.draw callback");
+                }
+            }
+            for (const plugin of this.#getLayerPlugins(DrawLayer.BackgroundMask)) {
+                plugin.canvasPaint?.();
+            }
+            for (const plugin of this.#getLayerPlugins(DrawLayer.CanvasSetup)) {
                 plugin.drawSettingsSetup?.(ctx, delta);
             }
-            for (const plugin of this.#drawPlugins) {
+            for (const plugin of this.#getLayerPlugins(DrawLayer.PluginContent)) {
                 plugin.draw?.(ctx, delta);
             }
             particles.drawParticles(delta);
-            for (const plugin of this.#clearDrawPlugins) {
+            for (const plugin of this.#getLayerPlugins(DrawLayer.CanvasCleanup)) {
                 plugin.clearDraw?.(ctx, delta);
-            }
-            for (const plugin of this.#drawSettingsCleanupPlugins) {
                 plugin.drawSettingsCleanup?.(ctx, delta);
             }
         });
@@ -1097,29 +1132,24 @@ class RenderManager {
     init() {
         this.initUpdaters();
         this.initPlugins();
+        this.#resolveBackgroundElement();
         this.paint();
     }
     initPlugins() {
-        this.#colorPlugins = [];
         this.#canvasClearPlugins = [];
-        this.#canvasPaintPlugins = [];
-        this.#clearDrawPlugins = [];
+        this.#colorPlugins = [];
         this.#drawParticlePlugins = [];
         this.#drawParticlesSetupPlugins = [];
         this.#drawParticlesCleanupPlugins = [];
-        this.#drawPlugins = [];
-        this.#drawSettingsSetupPlugins = [];
-        this.#drawSettingsCleanupPlugins = [];
+        for (const layer of Object.values(DrawLayer)) {
+            if (typeof layer === "number") {
+                this.#layers[layer] = [];
+            }
+        }
         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);
             }
@@ -1129,17 +1159,20 @@ class RenderManager {
             if (plugin.drawParticleCleanup) {
                 this.#drawParticlesCleanupPlugins.push(plugin);
             }
-            if (plugin.draw) {
-                this.#drawPlugins.push(plugin);
+            if (plugin.canvasClear) {
+                this.#canvasClearPlugins.push(plugin);
+            }
+            if (plugin.canvasPaint) {
+                this.#getLayerPlugins(DrawLayer.BackgroundMask).push(plugin);
             }
             if (plugin.drawSettingsSetup) {
-                this.#drawSettingsSetupPlugins.push(plugin);
+                this.#getLayerPlugins(DrawLayer.CanvasSetup).push(plugin);
             }
-            if (plugin.drawSettingsCleanup) {
-                this.#drawSettingsCleanupPlugins.push(plugin);
+            if (plugin.draw) {
+                this.#getLayerPlugins(DrawLayer.PluginContent).push(plugin);
             }
-            if (plugin.clearDraw) {
-                this.#clearDrawPlugins.push(plugin);
+            if (plugin.clearDraw ?? plugin.drawSettingsCleanup) {
+                this.#getLayerPlugins(DrawLayer.CanvasCleanup).push(plugin);
             }
         }
     }
@@ -1157,7 +1190,7 @@ class RenderManager {
     }
     paint() {
         let handled = false;
-        for (const plugin of this.#canvasPaintPlugins) {
+        for (const plugin of this.#getLayerPlugins(DrawLayer.BackgroundMask)) {
             handled = plugin.canvasPaint?.() ?? false;
             if (handled) {
                 break;
@@ -1330,6 +1363,9 @@ class RenderManager {
         }
         drawer.beforeDraw(data);
     }
+    #getLayerPlugins(layer) {
+        return this.#layers[layer];
+    }
     #getPluginParticleColors(particle) {
         let fColor, sColor;
         for (const plugin of this.#colorPlugins) {
@@ -1347,6 +1383,39 @@ class RenderManager {
         this.#reusablePluginColors[sColorIndex] = sColor;
         return this.#reusablePluginColors;
     }
+    #resolveBackgroundElement() {
+        const background = this.#container.actualOptions.background;
+        this.#backgroundElement = null;
+        if (!background.element) {
+            return;
+        }
+        if (typeof background.element === "string") {
+            if (typeof document !== "undefined") {
+                const node = document.querySelector(background.element);
+                if (node instanceof HTMLCanvasElement || node instanceof HTMLVideoElement || node instanceof HTMLImageElement) {
+                    this.#backgroundElement = node;
+                }
+                else if (node) {
+                    this.#warnOnce("background-element-not-supported", `Background element "${background.element}" is not a supported drawable element (canvas, video, or img)`);
+                }
+                else {
+                    this.#warnOnce("background-element-not-found", `Background element selector "${background.element}" not found`);
+                }
+            }
+        }
+        else if (background.element instanceof HTMLCanvasElement ||
+            background.element instanceof OffscreenCanvas ||
+            background.element instanceof HTMLVideoElement ||
+            background.element instanceof HTMLImageElement) {
+            this.#backgroundElement = background.element;
+        }
+    }
+    #warnOnce(key, message) {
+        if (!this.#backgroundWarnings.has(key)) {
+            this.#backgroundWarnings.add(key);
+            getLogger().warning(message);
+        }
+    }
 }
 
 const transferredCanvases = new WeakMap(), getTransferredCanvas = (canvas) => {
@@ -1923,7 +1992,6 @@ function runParticleCreatedPlugins(container, particle) {
 }
 class Particle {
     backColor;
-    bubble;
     destroyed;
     direction;
     effect;
@@ -1957,7 +2025,6 @@ class Particle {
     shapeData;
     sides;
     size;
-    slow;
     spawning;
     strokeColor;
     strokeOpacity;
@@ -1979,18 +2046,25 @@ class Particle {
         d: 1,
     };
     #container;
+    #modifiers = [];
     #pluginManager;
     constructor(pluginManager, container) {
         this.#pluginManager = pluginManager;
         this.#container = container;
     }
+    addModifier(modifier) {
+        this.#modifiers.push(modifier);
+        this.#modifiers.sort((a, b) => a.priority - b.priority);
+    }
+    clearModifiers() {
+        this.#modifiers.length = 0;
+    }
     destroy(override) {
         if (this.unbreakable || this.destroyed) {
             return;
         }
         this.destroyed = true;
-        this.bubble.inRange = false;
-        this.slow.inRange = false;
+        this.clearModifiers();
         const container = this.#container, shapeDrawer = this.shape ? container.shapeDrawers.get(this.shape) : undefined;
         shapeDrawer?.particleDestroy?.(this);
         for (const plugin of container.particleDestroyedPlugins) {
@@ -2012,13 +2086,16 @@ class Particle {
         return this.rotation + (this.pathRotation ? this.velocity.angle : defaultAngle);
     }
     getFillColor() {
-        return this.#getRollColor(this.bubble.color ?? getHslFromAnimation(this.fillColor));
+        return this.#getRollColor(this.#applyModifiers(getHslFromAnimation(this.fillColor), m => m.fillColor));
     }
     getMass() {
         return this.getRadius() ** squareExp * Math.PI * half;
     }
+    getModifier(id) {
+        return this.#modifiers.find(m => m.id === id);
+    }
     getOpacity() {
-        const zIndexOptions = this.options.zIndex, zIndexFactor = zIndexFactorOffset - this.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, opacity = this.bubble.opacity ?? getRangeValue(this.opacity?.value ?? defaultOpacity), fillOpacity = this.fillOpacity ?? defaultOpacity, strokeOpacity = this.strokeOpacity ?? defaultOpacity;
+        const zIndexOptions = this.options.zIndex, zIndexFactor = zIndexFactorOffset - this.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, baseOpacity = getRangeValue(this.opacity?.value ?? defaultOpacity), modifierOpacity = this.#applyModifiers(undefined, m => m.opacity), opacity = modifierOpacity ?? baseOpacity, fillOpacity = this.fillOpacity ?? defaultOpacity, strokeOpacity = this.strokeOpacity ?? defaultOpacity;
         this.#cachedOpacityData.fillOpacity = opacity * fillOpacity * zOpacityFactor;
         this.#cachedOpacityData.opacity = opacity * zOpacityFactor;
         this.#cachedOpacityData.strokeOpacity = opacity * strokeOpacity * zOpacityFactor;
@@ -2031,7 +2108,7 @@ class Particle {
         return this.#cachedPosition;
     }
     getRadius() {
-        return this.bubble.radius ?? this.size.value;
+        return this.#applyModifiers(this.size.value, m => m.radius);
     }
     getRotateData() {
         const angle = this.getAngle();
@@ -2040,7 +2117,7 @@ class Particle {
         return this.#cachedRotateData;
     }
     getStrokeColor() {
-        return this.#getRollColor(this.bubble.color ?? getHslFromAnimation(this.strokeColor));
+        return this.#getRollColor(this.#applyModifiers(getHslFromAnimation(this.strokeColor), m => m.strokeColor));
     }
     getTransformData(externalTransform) {
         const rotateData = this.getRotateData(), rotating = this.isRotating;
@@ -2060,13 +2137,6 @@ class Particle {
         this.options = resolveParticleOptions(this, container, this.#pluginManager, overrideOptions);
         container.retina.initParticle(this);
         runUpdaterPreInit(container.particleUpdaters, this);
-        this.bubble = {
-            inRange: false,
-        };
-        this.slow = {
-            inRange: false,
-            factor: 1,
-        };
         this.#initPosition(position);
         this.initialVelocity = this.#calculateVelocity();
         this.velocity = this.initialVelocity.copy();
@@ -2106,11 +2176,29 @@ class Particle {
     isVisible() {
         return !this.destroyed && !this.spawning && this.isInsideCanvas();
     }
+    removeModifier(id) {
+        const idx = this.#modifiers.findIndex(m => m.id === id);
+        if (idx >= defaultAngle) {
+            this.#modifiers.splice(idx, identity);
+        }
+    }
     reset() {
         for (const updater of this.#container.particleUpdaters) {
             updater.reset?.(this);
         }
     }
+    #applyModifiers(base, getter) {
+        let value = base;
+        for (const mod of this.#modifiers) {
+            if (mod.enabled) {
+                const override = getter(mod);
+                if (override !== undefined) {
+                    value = override;
+                }
+            }
+        }
+        return value;
+    }
     #calcPosition(position, zIndex) {
         let tryCount = defaultRetryCount, posVec = position ? Vector3d.create(position.x, position.y, zIndex) : undefined;
         const container = this.#container, plugins = container.particlePositionPlugins, outModes = this.options.move.outModes, radius = this.getRadius(), canvasSize = container.canvas.size;

package/dist/esm/{index-BH3sNkGS.js → index-uBrXcY8m.js}

@@ -308,29 +308,27 @@ function deepExtend(destination, ...sources) {
             }
         }
         else if (!isObject(destination) || Array.isArray(destination)) {
-            destination = {};
+            destination = Object.create(null);
         }
-        const sourceKeys = Object.keys(source), dangerousKeys = new Set(["__proto__", "constructor", "prototype"]), hasNested = sourceKeys.some(k => {
+        const sourceKeys = Object.keys(source), hasNested = sourceKeys.some(k => {
             const v = source[k];
             return isObject(v) || Array.isArray(v);
         });
         if (!hasNested) {
             const sourceDict = source, destDict = destination;
             for (const key of sourceKeys) {
-                if (dangerousKeys.has(key)) {
+                if (key === "__proto__" || key === "constructor" || key === "prototype") {
                     continue;
                 }
-                if (key in sourceDict) {
-                    const v = sourceDict[key];
-                    if (v !== undefined) {
-                        destDict[key] = v;
-                    }
+                const v = sourceDict[key];
+                if (v !== undefined) {
+                    destDict[key] = v;
                 }
             }
             continue;
         }
         for (const key of sourceKeys) {
-            if (dangerousKeys.has(key)) {
+            if (key === "__proto__" || key === "constructor" || key === "prototype") {
                 continue;
             }
             const sourceDict = source, destDict = destination, value = sourceDict[key];
@@ -746,7 +744,7 @@ class Engine {
         return this.#domArray;
     }
     get version() {
-        return "4.2.1";
+        return "4.3.1";
     }
     addEventListener(type, listener) {
         this.#eventDispatcher.addEventListener(type, listener);
@@ -781,7 +779,7 @@ class Engine {
         if (typeof HTMLElement !== "undefined" && params.element instanceof HTMLElement) {
             domSourceElement = params.element;
         }
-        const { Container } = await import('./Container-DZZsfp6i.js'), 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({
+        const { Container } = await import('./Container-COqetWkt.js'), 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);
             },
@@ -906,6 +904,18 @@ var AnimationStatus;
     AnimationStatus["decreasing"] = "decreasing";
 })(AnimationStatus || (AnimationStatus = {}));
 
+var DrawLayer;
+(function (DrawLayer) {
+    DrawLayer[DrawLayer["BackgroundElement"] = 0] = "BackgroundElement";
+    DrawLayer[DrawLayer["BackgroundDraw"] = 1] = "BackgroundDraw";
+    DrawLayer[DrawLayer["BackgroundMask"] = 2] = "BackgroundMask";
+    DrawLayer[DrawLayer["CanvasSetup"] = 3] = "CanvasSetup";
+    DrawLayer[DrawLayer["PluginContent"] = 4] = "PluginContent";
+    DrawLayer[DrawLayer["Particles"] = 5] = "Particles";
+    DrawLayer[DrawLayer["CanvasCleanup"] = 6] = "CanvasCleanup";
+    DrawLayer[DrawLayer["Foreground"] = 7] = "Foreground";
+})(DrawLayer || (DrawLayer = {}));
+
 const tsParticles = initEngine();
 
 let initialized = false;
@@ -946,4 +956,4 @@ async function waitForParticlesEngineInitialization() {
     await (initPromise !== null && initPromise !== void 0 ? initPromise : Promise.resolve());
 }
 
-export { safeDocument as $, AlterType as A, rgbMax as B, getRandomInRange as C, identity as D, defaultRgbMin as E, maxNits as F, sextuple as G, triple as H, phaseNumerator as I, sNormalizedOffset as J, originPoint as K, LimitMode as L, MoveDirection as M, minimumSize as N, OutMode as O, PixelMode as P, defaultCompositeValue as Q, RangeType as R, minStrokeWidth as S, defaultZoom as T, zIndexFactorOffset as U, defaultTransformValue as V, safeMutationObserver as W, generatedAttribute as X, cloneStyle as Y, safeMatchMedia as Z, getFullScreenStyle as _, isNull as a, millisecondsToSeconds as a0, manageListener as a1, visibilityChangeEvent as a2, resizeEvent as a3, Vector3d as a4, EventType as a5, defaultAngle as a6, defaultTransform as a7, defaultRetryCount as a8, tryCountIncrement as a9, defaultRatio as aA, defaultReduceFactor as aB, animate as aC, defaultFpsLimit as aD, minFpsLimit as aE, cancelAnimation as aF, defaultFps as aG, isParticlesEngineInitialized as aH, waitForParticlesEngineInitialization as aI, getParticleBaseVelocity as aa, randomInRangeValue as ab, getRandom as ac, OutModeDirection as ad, clamp as ae, minZ as af, getPosition as ag, getParticleDirectionAngle as ah, ParticleOutType as ai, Vector as aj, getRangeValue as ak, calcExactPositionOrRandomFromSize as al, itemFromSingleOrMultiple as am, isInArray as an, doublePI as ao, degToRad as ap, spatialHashGridCellSize as aq, minLimit as ar, minCount as as, getLogger as at, minIndex as au, defaultRemoveQuantity as av, defaultDensityFactor as aw, deleteCount as ax, countOffset as ay, one as az, setRangeValue as b, checkDistance as c, hMax as d, lMax as e, sMin as f, sMax as g, hMin as h, initParticlesEngine as i, isString as j, isArray as k, lMin as l, deepExtend as m, isNumber as n, isObject as o, executeOnSingleOrMultiple as p, isBoolean as q, itemFromArray as r, squareExp as s, tsParticles as t, defaultOpacity as u, randomColorValue as v, lFactor as w, half as x, double as y, hPhase as z };
+export { safeMatchMedia as $, AlterType as A, rgbMax as B, getRandomInRange as C, identity as D, defaultRgbMin as E, maxNits as F, sextuple as G, triple as H, phaseNumerator as I, sNormalizedOffset as J, originPoint as K, LimitMode as L, MoveDirection as M, DrawLayer as N, OutMode as O, PixelMode as P, minimumSize as Q, RangeType as R, defaultCompositeValue as S, minStrokeWidth as T, defaultZoom as U, getLogger as V, zIndexFactorOffset as W, defaultTransformValue as X, safeMutationObserver as Y, generatedAttribute as Z, cloneStyle as _, isNull as a, getFullScreenStyle as a0, safeDocument as a1, millisecondsToSeconds as a2, manageListener as a3, visibilityChangeEvent as a4, resizeEvent as a5, Vector3d as a6, EventType as a7, defaultAngle as a8, defaultTransform as a9, one as aA, defaultRatio as aB, defaultReduceFactor as aC, animate as aD, defaultFpsLimit as aE, minFpsLimit as aF, cancelAnimation as aG, defaultFps as aH, isParticlesEngineInitialized as aI, waitForParticlesEngineInitialization as aJ, defaultRetryCount as aa, tryCountIncrement as ab, getParticleBaseVelocity as ac, randomInRangeValue as ad, getRandom as ae, OutModeDirection as af, clamp as ag, minZ as ah, getPosition as ai, getParticleDirectionAngle as aj, ParticleOutType as ak, Vector as al, calcExactPositionOrRandomFromSize as am, getRangeValue as an, itemFromSingleOrMultiple as ao, isInArray as ap, doublePI as aq, degToRad as ar, spatialHashGridCellSize as as, minLimit as at, minCount as au, minIndex as av, defaultRemoveQuantity as aw, defaultDensityFactor as ax, deleteCount as ay, countOffset as az, setRangeValue as b, checkDistance as c, hMax as d, lMax as e, sMin as f, sMax as g, hMin as h, initParticlesEngine as i, isString as j, isArray as k, lMin as l, deepExtend as m, isNumber as n, isObject as o, executeOnSingleOrMultiple as p, isBoolean as q, itemFromArray as r, squareExp as s, tsParticles as t, defaultOpacity as u, randomColorValue as v, lFactor as w, half as x, double as y, hPhase as z };

package/dist/esm/index.js

@@ -1 +1 @@
-export { i as initParticlesEngine, aH as isParticlesEngineInitialized, aI as waitForParticlesEngineInitialization } from './index-BH3sNkGS.js';
+export { i as initParticlesEngine, aI as isParticlesEngineInitialized, aJ as waitForParticlesEngineInitialization } from './index-uBrXcY8m.js';

package/dist/esm/stencil-particles.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h } from './index-PhwiK2_P.js';
-import { i as initParticlesEngine, t as tsParticles } from './index-BH3sNkGS.js';
+import { i as initParticlesEngine, t as tsParticles } from './index-uBrXcY8m.js';
 
 const StencilParticles = class {
     constructor(hostRef) {

package/dist/tsparticlesstencil/index.esm.js

@@ -1 +1 @@
-export{i as initParticlesEngine,aH as isParticlesEngineInitialized,aI as waitForParticlesEngineInitialization}from"./p-QSzGOBhI.js";
+export{i as initParticlesEngine,aI as isParticlesEngineInitialized,aJ as waitForParticlesEngineInitialization}from"./p-Buaac_o7.js";

package/dist/tsparticlesstencil/{p-bd76f15b.entry.js → p-0204e6c5.entry.js}

@@ -1 +1 @@
-import{r as t,c as i,h as s}from"./p-PhwiK2_P.js";import{i as e,t as n}from"./p-QSzGOBhI.js";const a=class{constructor(s){t(this,s),this.particlesLoaded=i(this,"particlesLoaded"),this.renderId=0}async componentDidLoad(){await this.loadParticles(++this.renderId)}disconnectedCallback(){var t;this.renderId++,null===(t=this.container)||void 0===t||t.destroy(),this.container=void 0}async onPropsChange(){await this.loadParticles(++this.renderId)}async onThemeChange(){var t,i;this.container&&(null===(i=(t=this.container).loadTheme)||void 0===i||i.call(t,this.theme))}async loadParticles(t){var i,s,a;if(null===(i=this.container)||void 0===i||i.destroy(),!this.containerElement)return void console.warn("[stencil-particles] container element not available yet");let o;try{if(this.init&&await e(this.init),!this.options&&!this.url)return void console.warn("[stencil-particles] neither options nor url provided");const t=Object.assign(Object.assign({element:this.containerElement},this.containerId?{id:this.containerId}:{}),this.options?{options:this.options}:{url:this.url});o=await n.load(t)}catch(t){return void console.error("[stencil-particles] load failed",t)}t===this.renderId?(this.container=o,this.particlesLoaded.emit(o),o&&this.theme&&(null===(a=(s=o).loadTheme)||void 0===a||a.call(s,this.theme))):null==o||o.destroy()}render(){return s("div",{key:"f5fe33d147a1a606a75fe0d1ee385bacaf0e0b7d",id:this.containerId,ref:t=>{this.containerElement=t},style:{width:"100%",height:"100%"}})}static get watchers(){return{options:[{onPropsChange:0}],url:[{onPropsChange:0}],init:[{onPropsChange:0}],containerId:[{onPropsChange:0}],theme:[{onThemeChange:0}]}}};export{a as stencil_particles}
+import{r as t,c as i,h as s}from"./p-PhwiK2_P.js";import{i as e,t as a}from"./p-Buaac_o7.js";const n=class{constructor(s){t(this,s),this.particlesLoaded=i(this,"particlesLoaded"),this.renderId=0}async componentDidLoad(){await this.loadParticles(++this.renderId)}disconnectedCallback(){var t;this.renderId++,null===(t=this.container)||void 0===t||t.destroy(),this.container=void 0}async onPropsChange(){await this.loadParticles(++this.renderId)}async onThemeChange(){var t,i;this.container&&(null===(i=(t=this.container).loadTheme)||void 0===i||i.call(t,this.theme))}async loadParticles(t){var i,s,n;if(null===(i=this.container)||void 0===i||i.destroy(),!this.containerElement)return void console.warn("[stencil-particles] container element not available yet");let o;try{if(this.init&&await e(this.init),!this.options&&!this.url)return void console.warn("[stencil-particles] neither options nor url provided");const t=Object.assign(Object.assign({element:this.containerElement},this.containerId?{id:this.containerId}:{}),this.options?{options:this.options}:{url:this.url});o=await a.load(t)}catch(t){return void console.error("[stencil-particles] load failed",t)}t===this.renderId?(this.container=o,this.particlesLoaded.emit(o),o&&this.theme&&(null===(n=(s=o).loadTheme)||void 0===n||n.call(s,this.theme))):null==o||o.destroy()}render(){return s("div",{key:"f5fe33d147a1a606a75fe0d1ee385bacaf0e0b7d",id:this.containerId,ref:t=>{this.containerElement=t},style:{width:"100%",height:"100%"}})}static get watchers(){return{options:[{onPropsChange:0}],url:[{onPropsChange:0}],init:[{onPropsChange:0}],containerId:[{onPropsChange:0}],theme:[{onThemeChange:0}]}}};export{n as stencil_particles}