@tsparticles/engine 4.0.0-alpha.26 → 4.0.0-alpha.27

package/cjs/Utils/ColorUtils.js

@@ -1,4 +1,4 @@
-import { clamp, getRandom, getRandomInRange, getRangeMax, getRangeMin, getRangeValue, mix, randomInRangeValue, setRangeValue, } from "./MathUtils.js";
+import { clamp, getRandom, getRandomInRange, getRangeValue, mix, randomInRangeValue, setRangeValue, } from "./MathUtils.js";
 import { decayOffset, defaultLoops, defaultOpacity, defaultRgbMin, defaultTime, defaultVelocity, double, hMax, hMin, hPhase, half, identity, lFactor, lMax, lMin, midColorValue, millisecondsToSeconds, percentDenominator, phaseNumerator, randomColorValue, rgbMax, sMax, sMin, sNormalizedOffset, sextuple, triple, } from "../Core/Utils/Constants.js";
 import { isArray, isString } from "./TypeUtils.js";
 import { AlterType } from "../Enums/Types/AlterType.js";
@@ -190,10 +190,10 @@ function getSdrStyleFromHsl(color, opacity) {
 }
 export function colorMix(color1, color2, size1, size2) {
     let rgb1 = color1, rgb2 = color2;
-    if (!Object.hasOwn(rgb1, "r")) {
+    if (!("r" in rgb1)) {
         rgb1 = hslToRgb(color1);
     }
-    if (!Object.hasOwn(rgb2, "r")) {
+    if (!("r" in rgb2)) {
         rgb2 = hslToRgb(color2);
     }
     return {
@@ -246,27 +246,33 @@ export function getLinkRandomColor(engine, optColor, blink, consent) {
     }
 }
 export function getHslFromAnimation(animation) {
-    return animation !== undefined
-        ? {
+    return animation === undefined
+        ? undefined
+        : {
             h: animation.h.value,
             s: animation.s.value,
             l: animation.l.value,
-        }
-        : undefined;
+        };
 }
 export function getHslAnimationFromHsl(hsl, animationOptions, reduceFactor) {
     const resColor = {
         h: {
             enable: false,
             value: hsl.h,
+            min: hMin,
+            max: hMax,
         },
         s: {
             enable: false,
             value: hsl.s,
+            min: sMin,
+            max: sMax,
         },
         l: {
             enable: false,
             value: hsl.l,
+            min: lMin,
+            max: lMax,
         },
     };
     if (animationOptions) {
@@ -278,6 +284,8 @@ export function getHslAnimationFromHsl(hsl, animationOptions, reduceFactor) {
 }
 function setColorAnimation(colorValue, colorAnimation, reduceFactor) {
     colorValue.enable = colorAnimation.enable;
+    colorValue.min = colorAnimation.min;
+    colorValue.max = colorAnimation.max;
     if (colorValue.enable) {
         colorValue.velocity = (getRangeValue(colorAnimation.speed) / percentDenominator) * reduceFactor;
         colorValue.decay = decayOffset - getRangeValue(colorAnimation.decay);
@@ -297,7 +305,7 @@ function setColorAnimation(colorValue, colorAnimation, reduceFactor) {
         colorValue.velocity = defaultVelocity;
     }
 }
-export function updateColorValue(data, range, decrease, delta) {
+export function updateColorValue(data, decrease, delta) {
     const minLoops = 0, minDelay = 0, identity = 1, minVelocity = 0, minOffset = 0, velocityFactor = 3.6;
     if (!data.enable ||
         ((data.maxLoops ?? minLoops) > minLoops && (data.loops ?? minLoops) > (data.maxLoops ?? minLoops))) {
@@ -310,7 +318,7 @@ export function updateColorValue(data, range, decrease, delta) {
     if ((data.delayTime ?? minDelay) > minDelay && data.time < (data.delayTime ?? minDelay)) {
         return;
     }
-    const offset = data.offset ? randomInRangeValue(data.offset) : minOffset, velocity = (data.velocity ?? minVelocity) * delta.factor + offset * velocityFactor, decay = data.decay ?? identity, max = getRangeMax(range), min = getRangeMin(range);
+    const offset = data.offset ? randomInRangeValue(data.offset) : minOffset, velocity = (data.velocity ?? minVelocity) * delta.factor + offset * velocityFactor, decay = data.decay ?? identity, max = data.max, min = data.min;
     if (!decrease || data.status === AnimationStatus.increasing) {
         data.value += velocity;
         if (data.value > max) {
@@ -326,8 +334,7 @@ export function updateColorValue(data, range, decrease, delta) {
     }
     else {
         data.value -= velocity;
-        const minValue = 0;
-        if (data.value < minValue) {
+        if (data.value < min) {
             data.loops ??= 0;
             data.loops++;
             data.status = AnimationStatus.increasing;
@@ -342,14 +349,10 @@ export function updateColor(color, delta) {
     if (!color) {
         return;
     }
-    const { h, s, l } = color, ranges = {
-        h: { min: hMin, max: hMax },
-        s: { min: sMin, max: sMax },
-        l: { min: lMin, max: lMax },
-    };
-    updateColorValue(h, ranges.h, false, delta);
-    updateColorValue(s, ranges.s, true, delta);
-    updateColorValue(l, ranges.l, true, delta);
+    const { h, s, l } = color;
+    updateColorValue(h, false, delta);
+    updateColorValue(s, true, delta);
+    updateColorValue(l, true, delta);
 }
 export function alterHsl(color, type, value) {
     return {

package/cjs/Utils/Utils.js

@@ -8,16 +8,70 @@ import { OutModeDirection } from "../Enums/Directions/OutModeDirection.js";
 import { PixelMode } from "../Enums/Modes/PixelMode.js";
 import { StartValueType } from "../Enums/Types/StartValueType.js";
 import { Vector } from "../Core/Utils/Vectors.js";
-const minRadius = 0;
-function memoize(fn) {
-    const cache = new Map();
+const minRadius = 0, minMemoizeSize = 0;
+export function memoize(fn, options) {
+    const cache = new Map(), maxSize = options?.maxSize, ttlMs = options?.ttlMs, keyFn = options?.keyFn, stableStringify = (obj, seen = new WeakSet()) => {
+        if (obj === null) {
+            return "null";
+        }
+        const t = typeof obj;
+        if (t === "undefined") {
+            return "undefined";
+        }
+        if (t === "number" || t === "boolean" || t === "string") {
+            return JSON.stringify(obj);
+        }
+        if (t === "function") {
+            try {
+                const fn = obj;
+                return fn.toString();
+            }
+            catch {
+                return '"[Function]"';
+            }
+        }
+        if (t === "symbol") {
+            try {
+                return obj.toString();
+            }
+            catch {
+                return '"[Symbol]"';
+            }
+        }
+        if (Array.isArray(obj)) {
+            return `[${obj.map(i => stableStringify(i, seen)).join(",")}]`;
+        }
+        if (seen.has(obj)) {
+            return '"[Circular]"';
+        }
+        seen.add(obj);
+        const keys = Object.keys(obj).sort();
+        return `{${keys.map(k => `${JSON.stringify(k)}:${stableStringify(obj[k], seen)}`).join(",")}}`;
+    }, defaultKeyer = (args) => stableStringify(args), makeKey = (args) => (keyFn ? keyFn(args) : defaultKeyer(args)), ensureBounds = () => {
+        if (typeof maxSize === "number" && maxSize >= minMemoizeSize) {
+            while (cache.size > maxSize) {
+                const firstKey = cache.keys().next().value;
+                if (firstKey === undefined)
+                    break;
+                cache.delete(firstKey);
+            }
+        }
+    };
     return (...args) => {
-        const key = JSON.stringify(args);
-        if (cache.has(key)) {
-            return cache.get(key);
+        const key = makeKey(args), now = Date.now(), entry = cache.get(key);
+        if (entry !== undefined) {
+            if (ttlMs && now - entry.ts > ttlMs) {
+                cache.delete(key);
+            }
+            else {
+                cache.delete(key);
+                cache.set(key, { value: entry.value, ts: entry.ts });
+                return entry.value;
+            }
         }
         const result = fn(...args);
-        cache.set(key, result);
+        cache.set(key, { value: result, ts: now });
+        ensureBounds();
         return result;
     };
 }
@@ -98,8 +152,27 @@ export function deepExtend(destination, ...sources) {
         else if (!isObject(destination) || Array.isArray(destination)) {
             destination = {};
         }
-        for (const key of Object.keys(source)) {
-            if (key === "__proto__" || key === "constructor" || key === "prototype") {
+        const sourceKeys = Object.keys(source), dangerousKeys = new Set(["__proto__", "constructor", "prototype"]), 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)) {
+                    continue;
+                }
+                if (key in sourceDict) {
+                    const v = sourceDict[key];
+                    if (v !== undefined) {
+                        destDict[key] = v;
+                    }
+                }
+            }
+            continue;
+        }
+        for (const key of sourceKeys) {
+            if (dangerousKeys.has(key)) {
                 continue;
             }
             const sourceDict = source, destDict = destination, value = sourceDict[key];
@@ -297,7 +370,7 @@ export function cloneStyle(style) {
     const clonedStyle = safeDocument().createElement("div").style;
     for (const key in style) {
         const styleKey = style[key];
-        if (!Object.hasOwn(style, key) || isNull(styleKey)) {
+        if (!(key in style) || isNull(styleKey)) {
             continue;
         }
         const styleValue = style.getPropertyValue?.(styleKey);
@@ -305,11 +378,11 @@ export function cloneStyle(style) {
             continue;
         }
         const stylePriority = style.getPropertyPriority?.(styleKey);
-        if (!stylePriority) {
-            clonedStyle.setProperty(styleKey, styleValue);
+        if (stylePriority) {
+            clonedStyle.setProperty(styleKey, styleValue, stylePriority);
         }
         else {
-            clonedStyle.setProperty(styleKey, styleValue, stylePriority);
+            clonedStyle.setProperty(styleKey, styleValue);
         }
     }
     return clonedStyle;

package/cjs/exports.js

@@ -27,6 +27,7 @@ export * from "./Options/Classes/OptionsColor.js";
 export * from "./Options/Classes/Particles/Bounce/ParticlesBounce.js";
 export * from "./Options/Classes/Particles/Bounce/ParticlesBounceFactor.js";
 export * from "./Options/Classes/Particles/ParticlesOptions.js";
+export * from "./Options/Classes/Particles/Fill.js";
 export * from "./Options/Classes/Particles/Stroke.js";
 export * from "./Options/Classes/Particles/Move/Move.js";
 export * from "./Options/Classes/Particles/Move/MoveAngle.js";

package/dist_browser_Core_Container_js.js

@@ -1,5 +1,5 @@
 /*!
- * tsParticles Engine v4.0.0-alpha.26
+ * tsParticles Engine v4.0.0-alpha.27
  * Author: Matteo Bruni
  * MIT license: https://opensource.org/licenses/MIT
  * Website: https://particles.js.org/
@@ -25,7 +25,7 @@
   \*************************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Canvas: () => (/* binding */ Canvas)\n/* harmony export */ });\n/* harmony import */ var _Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../Utils/CanvasUtils.js */ \"./dist/browser/Utils/CanvasUtils.js\");\n/* harmony import */ var _Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Utils/Utils.js */ \"./dist/browser/Utils/Utils.js\");\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Utils/Constants.js */ \"./dist/browser/Core/Utils/Constants.js\");\n/* harmony import */ var _Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Utils/ColorUtils.js */ \"./dist/browser/Utils/ColorUtils.js\");\n\n\n\n\nconst fColorIndex = 0, sColorIndex = 1;\nfunction setTransformValue(factor, newFactor, key) {\n    const newValue = newFactor[key];\n    if (newValue !== undefined) {\n        factor[key] = (factor[key] ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultTransformValue) * newValue;\n    }\n}\nfunction setStyle(canvas, style, important = false) {\n    if (!style) {\n        return;\n    }\n    const element = canvas, elementStyle = element.style, keys = new Set();\n    for(let i = 0; i < elementStyle.length; i++){\n        const key = elementStyle.item(i);\n        if (!key) {\n            continue;\n        }\n        keys.add(key);\n    }\n    for(let i = 0; i < style.length; i++){\n        const key = style.item(i);\n        if (!key) {\n            continue;\n        }\n        keys.add(key);\n    }\n    for (const key of keys){\n        const value = style.getPropertyValue(key);\n        if (value) {\n            elementStyle.setProperty(key, value, important ? \"important\" : \"\");\n        } else {\n            elementStyle.removeProperty(key);\n        }\n    }\n}\nclass Canvas {\n    container;\n    element;\n    size;\n    zoom = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultZoom;\n    _canvasClearPlugins;\n    _canvasPaintPlugins;\n    _canvasSettings;\n    _clearDrawPlugins;\n    _colorPlugins;\n    _context;\n    _drawParticlePlugins;\n    _drawParticlesCleanupPlugins;\n    _drawParticlesSetupPlugins;\n    _drawPlugins;\n    _drawSettingsCleanupPlugins;\n    _drawSettingsSetupPlugins;\n    _engine;\n    _generated;\n    _mutationObserver;\n    _originalStyle;\n    _pointerEvents;\n    _postDrawUpdaters;\n    _preDrawUpdaters;\n    _resizePlugins;\n    _reusableColorStyles = {};\n    _reusablePluginColors = [\n        undefined,\n        undefined\n    ];\n    _reusableTransform = {};\n    _standardSize;\n    _zoomCenter;\n    constructor(container, engine){\n        this.container = container;\n        this._engine = engine;\n        this._standardSize = {\n            height: 0,\n            width: 0\n        };\n        const pxRatio = container.retina.pixelRatio, stdSize = this._standardSize;\n        this.size = {\n            height: stdSize.height * pxRatio,\n            width: stdSize.width * pxRatio\n        };\n        this._context = null;\n        this._generated = false;\n        this._preDrawUpdaters = [];\n        this._postDrawUpdaters = [];\n        this._resizePlugins = [];\n        this._colorPlugins = [];\n        this._canvasClearPlugins = [];\n        this._canvasPaintPlugins = [];\n        this._clearDrawPlugins = [];\n        this._drawParticlePlugins = [];\n        this._drawParticlesCleanupPlugins = [];\n        this._drawParticlesSetupPlugins = [];\n        this._drawPlugins = [];\n        this._drawSettingsSetupPlugins = [];\n        this._drawSettingsCleanupPlugins = [];\n        this._pointerEvents = \"none\";\n    }\n    get settings() {\n        return this._canvasSettings;\n    }\n    get _fullScreen() {\n        return this.container.actualOptions.fullScreen.enable;\n    }\n    canvasClear() {\n        if (!this.container.actualOptions.clear) {\n            return;\n        }\n        this.draw((ctx)=>{\n            (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.clear)(ctx, this.size);\n        });\n    }\n    clear() {\n        let pluginHandled = false;\n        for (const plugin of this._canvasClearPlugins){\n            pluginHandled = plugin.canvasClear?.() ?? false;\n            if (pluginHandled) {\n                break;\n            }\n        }\n        if (pluginHandled) {\n            return;\n        }\n        this.canvasClear();\n    }\n    destroy() {\n        this.stop();\n        if (this._generated) {\n            const element = this.element;\n            element?.remove();\n            this.element = undefined;\n        } else {\n            this._resetOriginalStyle();\n        }\n        this._preDrawUpdaters = [];\n        this._postDrawUpdaters = [];\n        this._resizePlugins = [];\n        this._colorPlugins = [];\n        this._canvasClearPlugins = [];\n        this._canvasPaintPlugins = [];\n        this._clearDrawPlugins = [];\n        this._drawParticlePlugins = [];\n        this._drawParticlesCleanupPlugins = [];\n        this._drawParticlesSetupPlugins = [];\n        this._drawPlugins = [];\n        this._drawSettingsSetupPlugins = [];\n        this._drawSettingsCleanupPlugins = [];\n    }\n    draw(cb) {\n        const ctx = this._context;\n        if (!ctx) {\n            return;\n        }\n        return cb(ctx);\n    }\n    drawParticle(particle, delta) {\n        if (particle.spawning || particle.destroyed) {\n            return;\n        }\n        const radius = particle.getRadius();\n        if (radius <= _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.minimumSize) {\n            return;\n        }\n        const pfColor = particle.getFillColor(), psColor = particle.getStrokeColor() ?? pfColor;\n        let [fColor, sColor] = this._getPluginParticleColors(particle);\n        fColor ??= pfColor;\n        sColor ??= psColor;\n        if (!fColor && !sColor) {\n            return;\n        }\n        const container = this.container, zIndexOptions = particle.options.zIndex, zIndexFactor = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.zIndexFactorOffset - particle.zIndexFactor, { opacity, strokeOpacity } = particle.getOpacity(), transform = this._reusableTransform, colorStyles = this._reusableColorStyles, fill = fColor ? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.getStyleFromHsl)(fColor, container.hdr, opacity) : undefined, stroke = sColor ? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.getStyleFromHsl)(sColor, container.hdr, strokeOpacity) : fill;\n        transform.a = transform.b = transform.c = transform.d = undefined;\n        colorStyles.fill = fill;\n        colorStyles.stroke = stroke;\n        this.draw((context)=>{\n            for (const plugin of this._drawParticlesSetupPlugins){\n                plugin.drawParticleSetup?.(context, particle, delta);\n            }\n            this._applyPreDrawUpdaters(context, particle, radius, opacity, colorStyles, transform);\n            (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.drawParticle)({\n                container,\n                context,\n                particle,\n                delta,\n                colorStyles,\n                radius: radius * zIndexFactor ** zIndexOptions.sizeRate,\n                opacity: opacity,\n                transform\n            });\n            this._applyPostDrawUpdaters(particle);\n            for (const plugin of this._drawParticlesCleanupPlugins){\n                plugin.drawParticleCleanup?.(context, particle, delta);\n            }\n        });\n    }\n    drawParticlePlugins(particle, delta) {\n        this.draw((ctx)=>{\n            for (const plugin of this._drawParticlePlugins){\n                (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.drawParticlePlugin)(ctx, plugin, particle, delta);\n            }\n        });\n    }\n    drawParticles(delta) {\n        const { particles } = this.container;\n        this.clear();\n        particles.update(delta);\n        this.draw((ctx)=>{\n            for (const plugin of this._drawSettingsSetupPlugins){\n                plugin.drawSettingsSetup?.(ctx, delta);\n            }\n            for (const plugin of this._drawPlugins){\n                plugin.draw?.(ctx, delta);\n            }\n            particles.drawParticles(delta);\n            for (const plugin of this._clearDrawPlugins){\n                plugin.clearDraw?.(ctx, delta);\n            }\n            for (const plugin of this._drawSettingsCleanupPlugins){\n                plugin.drawSettingsCleanup?.(ctx, delta);\n            }\n        });\n    }\n    getZoomCenter() {\n        const pxRatio = this.container.retina.pixelRatio, { width, height } = this.size;\n        if (this._zoomCenter) {\n            return this._zoomCenter;\n        }\n        return {\n            x: width * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.half / pxRatio,\n            y: height * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.half / pxRatio\n        };\n    }\n    init() {\n        this._safeMutationObserver((obs)=>{\n            obs.disconnect();\n        });\n        this._mutationObserver = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.safeMutationObserver)((records)=>{\n            for (const record of records){\n                if (record.type === \"attributes\" && record.attributeName === \"style\") {\n                    this._repairStyle();\n                }\n            }\n        });\n        this.resize();\n        this._initStyle();\n        this.initBackground();\n        this._safeMutationObserver((obs)=>{\n            if (!this.element || !(this.element instanceof Node)) {\n                return;\n            }\n            obs.observe(this.element, {\n                attributes: true\n            });\n        });\n        this.initUpdaters();\n        this.initPlugins();\n        this.paint();\n    }\n    initBackground() {\n        const { container } = this, options = container.actualOptions, background = options.background, element = this.element;\n        if (!element) {\n            return;\n        }\n        const elementStyle = element.style, color = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.rangeColorToRgb)(this._engine, background.color);\n        if (color) {\n            elementStyle.backgroundColor = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.getStyleFromRgb)(color, container.hdr, background.opacity);\n        } else {\n            elementStyle.backgroundColor = \"\";\n        }\n        elementStyle.backgroundImage = background.image || \"\";\n        elementStyle.backgroundPosition = background.position || \"\";\n        elementStyle.backgroundRepeat = background.repeat || \"\";\n        elementStyle.backgroundSize = background.size || \"\";\n    }\n    initPlugins() {\n        this._resizePlugins = [];\n        this._colorPlugins = [];\n        this._canvasClearPlugins = [];\n        this._canvasPaintPlugins = [];\n        this._clearDrawPlugins = [];\n        this._drawParticlePlugins = [];\n        this._drawParticlesSetupPlugins = [];\n        this._drawParticlesCleanupPlugins = [];\n        this._drawPlugins = [];\n        this._drawSettingsSetupPlugins = [];\n        this._drawSettingsCleanupPlugins = [];\n        for (const plugin of this.container.plugins){\n            if (plugin.resize) {\n                this._resizePlugins.push(plugin);\n            }\n            if (plugin.particleFillColor ?? plugin.particleStrokeColor) {\n                this._colorPlugins.push(plugin);\n            }\n            if (plugin.canvasClear) {\n                this._canvasClearPlugins.push(plugin);\n            }\n            if (plugin.canvasPaint) {\n                this._canvasPaintPlugins.push(plugin);\n            }\n            if (plugin.drawParticle) {\n                this._drawParticlePlugins.push(plugin);\n            }\n            if (plugin.drawParticleSetup) {\n                this._drawParticlesSetupPlugins.push(plugin);\n            }\n            if (plugin.drawParticleCleanup) {\n                this._drawParticlesCleanupPlugins.push(plugin);\n            }\n            if (plugin.draw) {\n                this._drawPlugins.push(plugin);\n            }\n            if (plugin.drawSettingsSetup) {\n                this._drawSettingsSetupPlugins.push(plugin);\n            }\n            if (plugin.drawSettingsCleanup) {\n                this._drawSettingsCleanupPlugins.push(plugin);\n            }\n            if (plugin.clearDraw) {\n                this._clearDrawPlugins.push(plugin);\n            }\n        }\n    }\n    initUpdaters() {\n        this._preDrawUpdaters = [];\n        this._postDrawUpdaters = [];\n        for (const updater of this.container.particles.updaters){\n            if (updater.afterDraw) {\n                this._postDrawUpdaters.push(updater);\n            }\n            if (updater.getColorStyles ?? updater.getTransformValues ?? updater.beforeDraw) {\n                this._preDrawUpdaters.push(updater);\n            }\n        }\n    }\n    loadCanvas(canvas) {\n        if (this._generated && this.element) {\n            this.element.remove();\n        }\n        const container = this.container;\n        this._generated = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.generatedAttribute in canvas.dataset ? canvas.dataset[_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.generatedAttribute] === \"true\" : this._generated;\n        this.element = canvas;\n        this.element.ariaHidden = \"true\";\n        this._originalStyle = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.cloneStyle)(this.element.style);\n        const standardSize = this._standardSize;\n        standardSize.height = canvas.offsetHeight;\n        standardSize.width = canvas.offsetWidth;\n        const pxRatio = this.container.retina.pixelRatio, retinaSize = this.size;\n        canvas.height = retinaSize.height = standardSize.height * pxRatio;\n        canvas.width = retinaSize.width = standardSize.width * pxRatio;\n        const canSupportHdrQuery = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.safeMatchMedia)(\"(color-gamut: p3)\");\n        this._canvasSettings = {\n            alpha: true,\n            colorSpace: canSupportHdrQuery?.matches && container.hdr ? \"display-p3\" : \"srgb\",\n            desynchronized: true,\n            willReadFrequently: false\n        };\n        this._context = this.element.getContext(\"2d\", this._canvasSettings);\n        this._safeMutationObserver((obs)=>{\n            obs.disconnect();\n        });\n        container.retina.init();\n        this.initBackground();\n        this._safeMutationObserver((obs)=>{\n            if (!this.element || !(this.element instanceof Node)) {\n                return;\n            }\n            obs.observe(this.element, {\n                attributes: true\n            });\n        });\n    }\n    paint() {\n        let handled = false;\n        for (const plugin of this._canvasPaintPlugins){\n            handled = plugin.canvasPaint?.() ?? false;\n            if (handled) {\n                break;\n            }\n        }\n        if (handled) {\n            return;\n        }\n        this.paintBase();\n    }\n    paintBase(baseColor) {\n        this.draw((ctx)=>{\n            (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.paintBase)(ctx, this.size, baseColor);\n        });\n    }\n    paintImage(image, opacity) {\n        this.draw((ctx)=>{\n            (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.paintImage)(ctx, this.size, image, opacity);\n        });\n    }\n    resize() {\n        if (!this.element) {\n            return false;\n        }\n        const container = this.container, currentSize = container.canvas._standardSize, newSize = {\n            width: this.element.offsetWidth,\n            height: this.element.offsetHeight\n        }, pxRatio = container.retina.pixelRatio, retinaSize = {\n            width: newSize.width * pxRatio,\n            height: newSize.height * pxRatio\n        };\n        if (newSize.height === currentSize.height && newSize.width === currentSize.width && retinaSize.height === this.element.height && retinaSize.width === this.element.width) {\n            return false;\n        }\n        const oldSize = {\n            ...currentSize\n        };\n        currentSize.height = newSize.height;\n        currentSize.width = newSize.width;\n        const canvasSize = this.size;\n        this.element.width = canvasSize.width = retinaSize.width;\n        this.element.height = canvasSize.height = retinaSize.height;\n        if (this.container.started) {\n            container.particles.setResizeFactor({\n                width: currentSize.width / oldSize.width,\n                height: currentSize.height / oldSize.height\n            });\n        }\n        return true;\n    }\n    setPointerEvents(type) {\n        const element = this.element;\n        if (!element) {\n            return;\n        }\n        this._pointerEvents = type;\n        this._repairStyle();\n    }\n    setZoom(zoomLevel, center) {\n        this.zoom = zoomLevel;\n        this._zoomCenter = center;\n    }\n    stop() {\n        this._safeMutationObserver((obs)=>{\n            obs.disconnect();\n        });\n        this._mutationObserver = undefined;\n        this.draw((ctx)=>{\n            (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.clear)(ctx, this.size);\n        });\n    }\n    async windowResize() {\n        if (!this.element || !this.resize()) {\n            return;\n        }\n        const container = this.container, needsRefresh = container.updateActualOptions();\n        container.particles.setDensity();\n        this._applyResizePlugins();\n        if (needsRefresh) {\n            await container.refresh();\n        }\n    }\n    _applyPostDrawUpdaters = (particle)=>{\n        for (const updater of this._postDrawUpdaters){\n            updater.afterDraw?.(particle);\n        }\n    };\n    _applyPreDrawUpdaters = (ctx, particle, radius, zOpacity, colorStyles, transform)=>{\n        for (const updater of this._preDrawUpdaters){\n            if (updater.getColorStyles) {\n                const { fill, stroke } = updater.getColorStyles(particle, ctx, radius, zOpacity);\n                if (fill) {\n                    colorStyles.fill = fill;\n                }\n                if (stroke) {\n                    colorStyles.stroke = stroke;\n                }\n            }\n            if (updater.getTransformValues) {\n                const updaterTransform = updater.getTransformValues(particle);\n                for(const key in updaterTransform){\n                    setTransformValue(transform, updaterTransform, key);\n                }\n            }\n            updater.beforeDraw?.(particle);\n        }\n    };\n    _applyResizePlugins = ()=>{\n        for (const plugin of this._resizePlugins){\n            plugin.resize?.();\n        }\n    };\n    _getPluginParticleColors = (particle)=>{\n        let fColor, sColor;\n        for (const plugin of this._colorPlugins){\n            if (!fColor && plugin.particleFillColor) {\n                fColor = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.rangeColorToHsl)(this._engine, plugin.particleFillColor(particle));\n            }\n            if (!sColor && plugin.particleStrokeColor) {\n                sColor = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.rangeColorToHsl)(this._engine, plugin.particleStrokeColor(particle));\n            }\n            if (fColor && sColor) {\n                break;\n            }\n        }\n        this._reusablePluginColors[fColorIndex] = fColor;\n        this._reusablePluginColors[sColorIndex] = sColor;\n        return this._reusablePluginColors;\n    };\n    _initStyle = ()=>{\n        const element = this.element, options = this.container.actualOptions;\n        if (!element) {\n            return;\n        }\n        if (this._fullScreen) {\n            this._setFullScreenStyle();\n        } else {\n            this._resetOriginalStyle();\n        }\n        for(const key in options.style){\n            if (!key || !Object.hasOwn(options.style, key)) {\n                continue;\n            }\n            const value = options.style[key];\n            if (!value) {\n                continue;\n            }\n            element.style.setProperty(key, value, \"important\");\n        }\n    };\n    _repairStyle = ()=>{\n        const element = this.element;\n        if (!element) {\n            return;\n        }\n        this._safeMutationObserver((observer)=>{\n            observer.disconnect();\n        });\n        this._initStyle();\n        this.initBackground();\n        const pointerEvents = this._pointerEvents;\n        element.style.pointerEvents = pointerEvents;\n        element.setAttribute(\"pointer-events\", pointerEvents);\n        this._safeMutationObserver((observer)=>{\n            if (!(element instanceof Node)) {\n                return;\n            }\n            observer.observe(element, {\n                attributes: true\n            });\n        });\n    };\n    _resetOriginalStyle = ()=>{\n        const element = this.element, originalStyle = this._originalStyle;\n        if (!element || !originalStyle) {\n            return;\n        }\n        setStyle(element, originalStyle, true);\n    };\n    _safeMutationObserver = (callback)=>{\n        if (!this._mutationObserver) {\n            return;\n        }\n        callback(this._mutationObserver);\n    };\n    _setFullScreenStyle = ()=>{\n        const element = this.element;\n        if (!element) {\n            return;\n        }\n        setStyle(element, (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.getFullScreenStyle)(this.container.actualOptions.fullScreen.zIndex), true);\n    };\n}\n\n\n//# sourceURL=webpack://@tsparticles/engine/./dist/browser/Core/Canvas.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Canvas: () => (/* binding */ Canvas)\n/* harmony export */ });\n/* harmony import */ var _Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../Utils/CanvasUtils.js */ \"./dist/browser/Utils/CanvasUtils.js\");\n/* harmony import */ var _Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Utils/Utils.js */ \"./dist/browser/Utils/Utils.js\");\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Utils/Constants.js */ \"./dist/browser/Core/Utils/Constants.js\");\n/* harmony import */ var _Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Utils/ColorUtils.js */ \"./dist/browser/Utils/ColorUtils.js\");\n\n\n\n\nconst fColorIndex = 0, sColorIndex = 1;\nfunction setTransformValue(factor, newFactor, key) {\n    const newValue = newFactor[key];\n    if (newValue !== undefined) {\n        factor[key] = (factor[key] ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultTransformValue) * newValue;\n    }\n}\nfunction setStyle(canvas, style, important = false) {\n    if (!style) {\n        return;\n    }\n    const element = canvas, elementStyle = element.style, keys = new Set();\n    for(let i = 0; i < elementStyle.length; i++){\n        const key = elementStyle.item(i);\n        if (!key) {\n            continue;\n        }\n        keys.add(key);\n    }\n    for(let i = 0; i < style.length; i++){\n        const key = style.item(i);\n        if (!key) {\n            continue;\n        }\n        keys.add(key);\n    }\n    for (const key of keys){\n        const value = style.getPropertyValue(key);\n        if (value) {\n            elementStyle.setProperty(key, value, important ? \"important\" : \"\");\n        } else {\n            elementStyle.removeProperty(key);\n        }\n    }\n}\nclass Canvas {\n    container;\n    element;\n    size;\n    zoom = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultZoom;\n    _canvasClearPlugins;\n    _canvasPaintPlugins;\n    _canvasSettings;\n    _clearDrawPlugins;\n    _colorPlugins;\n    _context;\n    _drawParticlePlugins;\n    _drawParticlesCleanupPlugins;\n    _drawParticlesSetupPlugins;\n    _drawPlugins;\n    _drawSettingsCleanupPlugins;\n    _drawSettingsSetupPlugins;\n    _engine;\n    _generated;\n    _mutationObserver;\n    _originalStyle;\n    _pointerEvents;\n    _postDrawUpdaters;\n    _preDrawUpdaters;\n    _resizePlugins;\n    _reusableColorStyles = {};\n    _reusablePluginColors = [\n        undefined,\n        undefined\n    ];\n    _reusableTransform = {};\n    _standardSize;\n    _zoomCenter;\n    constructor(container, engine){\n        this.container = container;\n        this._engine = engine;\n        this._standardSize = {\n            height: 0,\n            width: 0\n        };\n        const pxRatio = container.retina.pixelRatio, stdSize = this._standardSize;\n        this.size = {\n            height: stdSize.height * pxRatio,\n            width: stdSize.width * pxRatio\n        };\n        this._context = null;\n        this._generated = false;\n        this._preDrawUpdaters = [];\n        this._postDrawUpdaters = [];\n        this._resizePlugins = [];\n        this._colorPlugins = [];\n        this._canvasClearPlugins = [];\n        this._canvasPaintPlugins = [];\n        this._clearDrawPlugins = [];\n        this._drawParticlePlugins = [];\n        this._drawParticlesCleanupPlugins = [];\n        this._drawParticlesSetupPlugins = [];\n        this._drawPlugins = [];\n        this._drawSettingsSetupPlugins = [];\n        this._drawSettingsCleanupPlugins = [];\n        this._pointerEvents = \"none\";\n    }\n    get settings() {\n        return this._canvasSettings;\n    }\n    get _fullScreen() {\n        return this.container.actualOptions.fullScreen.enable;\n    }\n    canvasClear() {\n        if (!this.container.actualOptions.clear) {\n            return;\n        }\n        this.draw((ctx)=>{\n            (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.clear)(ctx, this.size);\n        });\n    }\n    clear() {\n        let pluginHandled = false;\n        for (const plugin of this._canvasClearPlugins){\n            pluginHandled = plugin.canvasClear?.() ?? false;\n            if (pluginHandled) {\n                break;\n            }\n        }\n        if (pluginHandled) {\n            return;\n        }\n        this.canvasClear();\n    }\n    destroy() {\n        this.stop();\n        if (this._generated) {\n            const element = this.element;\n            element?.remove();\n            this.element = undefined;\n        } else {\n            this._resetOriginalStyle();\n        }\n        this._preDrawUpdaters = [];\n        this._postDrawUpdaters = [];\n        this._resizePlugins = [];\n        this._colorPlugins = [];\n        this._canvasClearPlugins = [];\n        this._canvasPaintPlugins = [];\n        this._clearDrawPlugins = [];\n        this._drawParticlePlugins = [];\n        this._drawParticlesCleanupPlugins = [];\n        this._drawParticlesSetupPlugins = [];\n        this._drawPlugins = [];\n        this._drawSettingsSetupPlugins = [];\n        this._drawSettingsCleanupPlugins = [];\n    }\n    draw(cb) {\n        const ctx = this._context;\n        if (!ctx) {\n            return;\n        }\n        return cb(ctx);\n    }\n    drawParticle(particle, delta) {\n        if (particle.spawning || particle.destroyed) {\n            return;\n        }\n        const radius = particle.getRadius();\n        if (radius <= _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.minimumSize) {\n            return;\n        }\n        const pfColor = particle.getFillColor(), psColor = particle.getStrokeColor();\n        let [fColor, sColor] = this._getPluginParticleColors(particle);\n        fColor ??= pfColor;\n        sColor ??= psColor;\n        if (!fColor && !sColor) {\n            return;\n        }\n        const container = this.container, zIndexOptions = particle.options.zIndex, zIndexFactor = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.zIndexFactorOffset - particle.zIndexFactor, { fillOpacity, opacity, strokeOpacity } = particle.getOpacity(), transform = this._reusableTransform, colorStyles = this._reusableColorStyles, fill = fColor ? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.getStyleFromHsl)(fColor, container.hdr, fillOpacity * opacity) : undefined, stroke = sColor ? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.getStyleFromHsl)(sColor, container.hdr, strokeOpacity * opacity) : fill;\n        transform.a = transform.b = transform.c = transform.d = undefined;\n        colorStyles.fill = fill;\n        colorStyles.stroke = stroke;\n        this.draw((context)=>{\n            for (const plugin of this._drawParticlesSetupPlugins){\n                plugin.drawParticleSetup?.(context, particle, delta);\n            }\n            this._applyPreDrawUpdaters(context, particle, radius, opacity, colorStyles, transform);\n            (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.drawParticle)({\n                container,\n                context,\n                particle,\n                delta,\n                colorStyles,\n                radius: radius * zIndexFactor ** zIndexOptions.sizeRate,\n                opacity: opacity,\n                transform\n            });\n            this._applyPostDrawUpdaters(particle);\n            for (const plugin of this._drawParticlesCleanupPlugins){\n                plugin.drawParticleCleanup?.(context, particle, delta);\n            }\n        });\n    }\n    drawParticlePlugins(particle, delta) {\n        this.draw((ctx)=>{\n            for (const plugin of this._drawParticlePlugins){\n                (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.drawParticlePlugin)(ctx, plugin, particle, delta);\n            }\n        });\n    }\n    drawParticles(delta) {\n        const { particles } = this.container;\n        this.clear();\n        particles.update(delta);\n        this.draw((ctx)=>{\n            for (const plugin of this._drawSettingsSetupPlugins){\n                plugin.drawSettingsSetup?.(ctx, delta);\n            }\n            for (const plugin of this._drawPlugins){\n                plugin.draw?.(ctx, delta);\n            }\n            particles.drawParticles(delta);\n            for (const plugin of this._clearDrawPlugins){\n                plugin.clearDraw?.(ctx, delta);\n            }\n            for (const plugin of this._drawSettingsCleanupPlugins){\n                plugin.drawSettingsCleanup?.(ctx, delta);\n            }\n        });\n    }\n    getZoomCenter() {\n        const pxRatio = this.container.retina.pixelRatio, { width, height } = this.size;\n        if (this._zoomCenter) {\n            return this._zoomCenter;\n        }\n        return {\n            x: width * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.half / pxRatio,\n            y: height * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.half / pxRatio\n        };\n    }\n    init() {\n        this._safeMutationObserver((obs)=>{\n            obs.disconnect();\n        });\n        this._mutationObserver = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.safeMutationObserver)((records)=>{\n            for (const record of records){\n                if (record.type === \"attributes\" && record.attributeName === \"style\") {\n                    this._repairStyle();\n                }\n            }\n        });\n        this.resize();\n        this._initStyle();\n        this.initBackground();\n        this._safeMutationObserver((obs)=>{\n            if (!this.element || !(this.element instanceof Node)) {\n                return;\n            }\n            obs.observe(this.element, {\n                attributes: true\n            });\n        });\n        this.initUpdaters();\n        this.initPlugins();\n        this.paint();\n    }\n    initBackground() {\n        const { container } = this, options = container.actualOptions, background = options.background, element = this.element;\n        if (!element) {\n            return;\n        }\n        const elementStyle = element.style, color = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.rangeColorToRgb)(this._engine, background.color);\n        if (color) {\n            elementStyle.backgroundColor = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.getStyleFromRgb)(color, container.hdr, background.opacity);\n        } else {\n            elementStyle.backgroundColor = \"\";\n        }\n        elementStyle.backgroundImage = background.image || \"\";\n        elementStyle.backgroundPosition = background.position || \"\";\n        elementStyle.backgroundRepeat = background.repeat || \"\";\n        elementStyle.backgroundSize = background.size || \"\";\n    }\n    initPlugins() {\n        this._resizePlugins = [];\n        this._colorPlugins = [];\n        this._canvasClearPlugins = [];\n        this._canvasPaintPlugins = [];\n        this._clearDrawPlugins = [];\n        this._drawParticlePlugins = [];\n        this._drawParticlesSetupPlugins = [];\n        this._drawParticlesCleanupPlugins = [];\n        this._drawPlugins = [];\n        this._drawSettingsSetupPlugins = [];\n        this._drawSettingsCleanupPlugins = [];\n        for (const plugin of this.container.plugins){\n            if (plugin.resize) {\n                this._resizePlugins.push(plugin);\n            }\n            if (plugin.particleFillColor ?? plugin.particleStrokeColor) {\n                this._colorPlugins.push(plugin);\n            }\n            if (plugin.canvasClear) {\n                this._canvasClearPlugins.push(plugin);\n            }\n            if (plugin.canvasPaint) {\n                this._canvasPaintPlugins.push(plugin);\n            }\n            if (plugin.drawParticle) {\n                this._drawParticlePlugins.push(plugin);\n            }\n            if (plugin.drawParticleSetup) {\n                this._drawParticlesSetupPlugins.push(plugin);\n            }\n            if (plugin.drawParticleCleanup) {\n                this._drawParticlesCleanupPlugins.push(plugin);\n            }\n            if (plugin.draw) {\n                this._drawPlugins.push(plugin);\n            }\n            if (plugin.drawSettingsSetup) {\n                this._drawSettingsSetupPlugins.push(plugin);\n            }\n            if (plugin.drawSettingsCleanup) {\n                this._drawSettingsCleanupPlugins.push(plugin);\n            }\n            if (plugin.clearDraw) {\n                this._clearDrawPlugins.push(plugin);\n            }\n        }\n    }\n    initUpdaters() {\n        this._preDrawUpdaters = [];\n        this._postDrawUpdaters = [];\n        for (const updater of this.container.particles.updaters){\n            if (updater.afterDraw) {\n                this._postDrawUpdaters.push(updater);\n            }\n            if (updater.getColorStyles ?? updater.getTransformValues ?? updater.beforeDraw) {\n                this._preDrawUpdaters.push(updater);\n            }\n        }\n    }\n    loadCanvas(canvas) {\n        if (this._generated && this.element) {\n            this.element.remove();\n        }\n        const container = this.container;\n        this._generated = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.generatedAttribute in canvas.dataset ? canvas.dataset[_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.generatedAttribute] === \"true\" : this._generated;\n        this.element = canvas;\n        this.element.ariaHidden = \"true\";\n        this._originalStyle = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.cloneStyle)(this.element.style);\n        const standardSize = this._standardSize;\n        standardSize.height = canvas.offsetHeight;\n        standardSize.width = canvas.offsetWidth;\n        const pxRatio = this.container.retina.pixelRatio, retinaSize = this.size;\n        canvas.height = retinaSize.height = standardSize.height * pxRatio;\n        canvas.width = retinaSize.width = standardSize.width * pxRatio;\n        const canSupportHdrQuery = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.safeMatchMedia)(\"(color-gamut: p3)\");\n        this._canvasSettings = {\n            alpha: true,\n            colorSpace: canSupportHdrQuery?.matches && container.hdr ? \"display-p3\" : \"srgb\",\n            desynchronized: true,\n            willReadFrequently: false\n        };\n        this._context = this.element.getContext(\"2d\", this._canvasSettings);\n        if (this._context) {\n            this._context.globalCompositeOperation = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultCompositeValue;\n        }\n        this._safeMutationObserver((obs)=>{\n            obs.disconnect();\n        });\n        container.retina.init();\n        this.initBackground();\n        this._safeMutationObserver((obs)=>{\n            if (!this.element || !(this.element instanceof Node)) {\n                return;\n            }\n            obs.observe(this.element, {\n                attributes: true\n            });\n        });\n    }\n    paint() {\n        let handled = false;\n        for (const plugin of this._canvasPaintPlugins){\n            handled = plugin.canvasPaint?.() ?? false;\n            if (handled) {\n                break;\n            }\n        }\n        if (handled) {\n            return;\n        }\n        this.paintBase();\n    }\n    paintBase(baseColor) {\n        this.draw((ctx)=>{\n            (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.paintBase)(ctx, this.size, baseColor);\n        });\n    }\n    paintImage(image, opacity) {\n        this.draw((ctx)=>{\n            (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.paintImage)(ctx, this.size, image, opacity);\n        });\n    }\n    resize() {\n        if (!this.element) {\n            return false;\n        }\n        const container = this.container, currentSize = container.canvas._standardSize, newSize = {\n            width: this.element.offsetWidth,\n            height: this.element.offsetHeight\n        }, pxRatio = container.retina.pixelRatio, retinaSize = {\n            width: newSize.width * pxRatio,\n            height: newSize.height * pxRatio\n        };\n        if (newSize.height === currentSize.height && newSize.width === currentSize.width && retinaSize.height === this.element.height && retinaSize.width === this.element.width) {\n            return false;\n        }\n        const oldSize = {\n            ...currentSize\n        };\n        currentSize.height = newSize.height;\n        currentSize.width = newSize.width;\n        const canvasSize = this.size;\n        this.element.width = canvasSize.width = retinaSize.width;\n        this.element.height = canvasSize.height = retinaSize.height;\n        if (this.container.started) {\n            container.particles.setResizeFactor({\n                width: currentSize.width / oldSize.width,\n                height: currentSize.height / oldSize.height\n            });\n        }\n        return true;\n    }\n    setPointerEvents(type) {\n        const element = this.element;\n        if (!element) {\n            return;\n        }\n        this._pointerEvents = type;\n        this._repairStyle();\n    }\n    setZoom(zoomLevel, center) {\n        this.zoom = zoomLevel;\n        this._zoomCenter = center;\n    }\n    stop() {\n        this._safeMutationObserver((obs)=>{\n            obs.disconnect();\n        });\n        this._mutationObserver = undefined;\n        this.draw((ctx)=>{\n            (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.clear)(ctx, this.size);\n        });\n    }\n    async windowResize() {\n        if (!this.element || !this.resize()) {\n            return;\n        }\n        const container = this.container, needsRefresh = container.updateActualOptions();\n        container.particles.setDensity();\n        this._applyResizePlugins();\n        if (needsRefresh) {\n            await container.refresh();\n        }\n    }\n    _applyPostDrawUpdaters = (particle)=>{\n        for (const updater of this._postDrawUpdaters){\n            updater.afterDraw?.(particle);\n        }\n    };\n    _applyPreDrawUpdaters = (ctx, particle, radius, zOpacity, colorStyles, transform)=>{\n        for (const updater of this._preDrawUpdaters){\n            if (updater.getColorStyles) {\n                const { fill, stroke } = updater.getColorStyles(particle, ctx, radius, zOpacity);\n                if (fill) {\n                    colorStyles.fill = fill;\n                }\n                if (stroke) {\n                    colorStyles.stroke = stroke;\n                }\n            }\n            if (updater.getTransformValues) {\n                const updaterTransform = updater.getTransformValues(particle);\n                for(const key in updaterTransform){\n                    setTransformValue(transform, updaterTransform, key);\n                }\n            }\n            updater.beforeDraw?.(particle);\n        }\n    };\n    _applyResizePlugins = ()=>{\n        for (const plugin of this._resizePlugins){\n            plugin.resize?.();\n        }\n    };\n    _getPluginParticleColors = (particle)=>{\n        let fColor, sColor;\n        for (const plugin of this._colorPlugins){\n            if (!fColor && plugin.particleFillColor) {\n                fColor = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.rangeColorToHsl)(this._engine, plugin.particleFillColor(particle));\n            }\n            if (!sColor && plugin.particleStrokeColor) {\n                sColor = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.rangeColorToHsl)(this._engine, plugin.particleStrokeColor(particle));\n            }\n            if (fColor && sColor) {\n                break;\n            }\n        }\n        this._reusablePluginColors[fColorIndex] = fColor;\n        this._reusablePluginColors[sColorIndex] = sColor;\n        return this._reusablePluginColors;\n    };\n    _initStyle = ()=>{\n        const element = this.element, options = this.container.actualOptions;\n        if (!element) {\n            return;\n        }\n        if (this._fullScreen) {\n            this._setFullScreenStyle();\n        } else {\n            this._resetOriginalStyle();\n        }\n        for(const key in options.style){\n            if (!key || !(key in options.style)) {\n                continue;\n            }\n            const value = options.style[key];\n            if (!value) {\n                continue;\n            }\n            element.style.setProperty(key, value, \"important\");\n        }\n    };\n    _repairStyle = ()=>{\n        const element = this.element;\n        if (!element) {\n            return;\n        }\n        this._safeMutationObserver((observer)=>{\n            observer.disconnect();\n        });\n        this._initStyle();\n        this.initBackground();\n        const pointerEvents = this._pointerEvents;\n        element.style.pointerEvents = pointerEvents;\n        element.setAttribute(\"pointer-events\", pointerEvents);\n        this._safeMutationObserver((observer)=>{\n            if (!(element instanceof Node)) {\n                return;\n            }\n            observer.observe(element, {\n                attributes: true\n            });\n        });\n    };\n    _resetOriginalStyle = ()=>{\n        const element = this.element, originalStyle = this._originalStyle;\n        if (!element || !originalStyle) {\n            return;\n        }\n        setStyle(element, originalStyle, true);\n    };\n    _safeMutationObserver = (callback)=>{\n        if (!this._mutationObserver) {\n            return;\n        }\n        callback(this._mutationObserver);\n    };\n    _setFullScreenStyle = ()=>{\n        const element = this.element;\n        if (!element) {\n            return;\n        }\n        setStyle(element, (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.getFullScreenStyle)(this.container.actualOptions.fullScreen.zIndex), true);\n    };\n}\n\n\n//# sourceURL=webpack://@tsparticles/engine/./dist/browser/Core/Canvas.js?\n}");
 
 /***/ },
 
@@ -45,7 +45,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
   \***************************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Particle: () => (/* binding */ Particle)\n/* harmony export */ });\n/* harmony import */ var _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Utils/Vectors.js */ \"./dist/browser/Core/Utils/Vectors.js\");\n/* harmony import */ var _Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Utils/ColorUtils.js */ \"./dist/browser/Utils/ColorUtils.js\");\n/* harmony import */ var _Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Utils/MathUtils.js */ \"./dist/browser/Utils/MathUtils.js\");\n/* harmony import */ var _Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Utils/Utils.js */ \"./dist/browser/Utils/Utils.js\");\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Utils/Constants.js */ \"./dist/browser/Core/Utils/Constants.js\");\n/* harmony import */ var _Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Enums/Types/EventType.js */ \"./dist/browser/Enums/Types/EventType.js\");\n/* harmony import */ var _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Enums/Directions/MoveDirection.js */ \"./dist/browser/Enums/Directions/MoveDirection.js\");\n/* harmony import */ var _Enums_Modes_OutMode_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Enums/Modes/OutMode.js */ \"./dist/browser/Enums/Modes/OutMode.js\");\n/* harmony import */ var _Enums_Types_ParticleOutType_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../Enums/Types/ParticleOutType.js */ \"./dist/browser/Enums/Types/ParticleOutType.js\");\n/* harmony import */ var _Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../Utils/OptionsUtils.js */ \"./dist/browser/Utils/OptionsUtils.js\");\n\n\n\n\n\n\n\n\n\n\nfunction loadEffectData(effect, effectOptions, id, reduceDuplicates) {\n    const effectData = effectOptions.options[effect];\n    return (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.deepExtend)({\n        close: effectOptions.close,\n        fill: effectOptions.fill\n    }, (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.itemFromSingleOrMultiple)(effectData, id, reduceDuplicates));\n}\nfunction loadShapeData(shape, shapeOptions, id, reduceDuplicates) {\n    const shapeData = shapeOptions.options[shape];\n    return (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.deepExtend)({\n        close: shapeOptions.close,\n        fill: shapeOptions.fill\n    }, (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.itemFromSingleOrMultiple)(shapeData, id, reduceDuplicates));\n}\nfunction fixOutMode(data) {\n    if (!(0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.isInArray)(data.outMode, data.checkModes)) {\n        return;\n    }\n    const diameter = data.radius * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.double;\n    if (data.coord > data.maxCoord - diameter) {\n        data.setCb(-data.radius);\n    } else if (data.coord < diameter) {\n        data.setCb(data.radius);\n    }\n}\nclass Particle {\n    container;\n    backColor;\n    bubble;\n    color;\n    destroyed;\n    direction;\n    effect;\n    effectClose;\n    effectData;\n    effectFill;\n    group;\n    id;\n    ignoresResizeRatio;\n    initialPosition;\n    initialVelocity;\n    isRotating;\n    lastPathTime;\n    misplaced;\n    moveCenter;\n    offset;\n    opacity;\n    options;\n    outType;\n    pathRotation;\n    position;\n    randomIndexData;\n    retina;\n    roll;\n    rotation;\n    shape;\n    shapeClose;\n    shapeData;\n    shapeFill;\n    sides;\n    size;\n    slow;\n    spawning;\n    strokeColor;\n    strokeOpacity;\n    strokeWidth;\n    unbreakable;\n    velocity;\n    zIndexFactor;\n    _cachedOpacityData = {\n        opacity: _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultOpacity,\n        strokeOpacity: _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultOpacity\n    };\n    _cachedPosition = _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector3d.origin;\n    _cachedRotateData = {\n        sin: 0,\n        cos: 0\n    };\n    _cachedTransform = {\n        a: 1,\n        b: 0,\n        c: 0,\n        d: 1\n    };\n    _engine;\n    constructor(engine, container){\n        this.container = container;\n        this._engine = engine;\n    }\n    destroy(override) {\n        if (this.unbreakable || this.destroyed) {\n            return;\n        }\n        this.destroyed = true;\n        this.bubble.inRange = false;\n        this.slow.inRange = false;\n        const container = this.container, shapeDrawer = this.shape ? container.particles.shapeDrawers.get(this.shape) : undefined;\n        shapeDrawer?.particleDestroy?.(this);\n        for (const plugin of container.particleDestroyedPlugins){\n            plugin.particleDestroyed?.(this, override);\n        }\n        for (const updater of container.particles.updaters){\n            updater.particleDestroyed?.(this, override);\n        }\n        this._engine.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_5__.EventType.particleDestroyed, {\n            container: this.container,\n            data: {\n                particle: this\n            }\n        });\n    }\n    draw(delta) {\n        const container = this.container, canvas = container.canvas;\n        canvas.drawParticlePlugins(this, delta);\n        canvas.drawParticle(this, delta);\n    }\n    getAngle() {\n        return this.rotation + (this.pathRotation ? this.velocity.angle : _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultAngle);\n    }\n    getFillColor() {\n        return this._getRollColor(this.bubble.color ?? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_1__.getHslFromAnimation)(this.color));\n    }\n    getMass() {\n        return this.getRadius() ** _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.squareExp * Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.half;\n    }\n    getOpacity() {\n        const zIndexOptions = this.options.zIndex, zIndexFactor = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.zIndexFactorOffset - this.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, opacity = this.bubble.opacity ?? (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRangeValue)(this.opacity?.value ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultOpacity), strokeOpacity = this.strokeOpacity ?? opacity;\n        this._cachedOpacityData.opacity = opacity * zOpacityFactor;\n        this._cachedOpacityData.strokeOpacity = strokeOpacity * zOpacityFactor;\n        return this._cachedOpacityData;\n    }\n    getPosition() {\n        this._cachedPosition.x = this.position.x + this.offset.x;\n        this._cachedPosition.y = this.position.y + this.offset.y;\n        this._cachedPosition.z = this.position.z;\n        return this._cachedPosition;\n    }\n    getRadius() {\n        return this.bubble.radius ?? this.size.value;\n    }\n    getRotateData() {\n        const angle = this.getAngle();\n        this._cachedRotateData.sin = Math.sin(angle);\n        this._cachedRotateData.cos = Math.cos(angle);\n        return this._cachedRotateData;\n    }\n    getStrokeColor() {\n        return this._getRollColor(this.bubble.color ?? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_1__.getHslFromAnimation)(this.strokeColor));\n    }\n    getTransformData(externalTransform) {\n        const rotateData = this.getRotateData(), rotating = this.isRotating;\n        this._cachedTransform.a = rotateData.cos * (externalTransform.a ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultTransform.a);\n        this._cachedTransform.b = rotating ? rotateData.sin * (externalTransform.b ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.identity) : externalTransform.b ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultTransform.b;\n        this._cachedTransform.c = rotating ? -rotateData.sin * (externalTransform.c ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.identity) : externalTransform.c ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultTransform.c;\n        this._cachedTransform.d = rotateData.cos * (externalTransform.d ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultTransform.d);\n        return this._cachedTransform;\n    }\n    init(id, position, overrideOptions, group) {\n        const container = this.container;\n        this.id = id;\n        this.group = group;\n        this.effectClose = true;\n        this.effectFill = true;\n        this.shapeClose = true;\n        this.shapeFill = true;\n        this.pathRotation = false;\n        this.lastPathTime = 0;\n        this.destroyed = false;\n        this.unbreakable = false;\n        this.isRotating = false;\n        this.rotation = 0;\n        this.misplaced = false;\n        this.retina = {\n            maxDistance: {}\n        };\n        this.outType = _Enums_Types_ParticleOutType_js__WEBPACK_IMPORTED_MODULE_8__.ParticleOutType.normal;\n        this.ignoresResizeRatio = true;\n        const pxRatio = container.retina.pixelRatio, mainOptions = container.actualOptions, particlesOptions = (0,_Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_9__.loadParticlesOptions)(this._engine, container, mainOptions.particles), reduceDuplicates = particlesOptions.reduceDuplicates, effectType = particlesOptions.effect.type, shapeType = particlesOptions.shape.type;\n        this.effect = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.itemFromSingleOrMultiple)(effectType, this.id, reduceDuplicates);\n        this.shape = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.itemFromSingleOrMultiple)(shapeType, this.id, reduceDuplicates);\n        const effectOptions = particlesOptions.effect, shapeOptions = particlesOptions.shape;\n        if (overrideOptions) {\n            if (overrideOptions.effect?.type) {\n                const overrideEffectType = overrideOptions.effect.type, effect = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.itemFromSingleOrMultiple)(overrideEffectType, this.id, reduceDuplicates);\n                if (effect) {\n                    this.effect = effect;\n                    effectOptions.load(overrideOptions.effect);\n                }\n            }\n            if (overrideOptions.shape?.type) {\n                const overrideShapeType = overrideOptions.shape.type, shape = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.itemFromSingleOrMultiple)(overrideShapeType, this.id, reduceDuplicates);\n                if (shape) {\n                    this.shape = shape;\n                    shapeOptions.load(overrideOptions.shape);\n                }\n            }\n        }\n        if (this.effect === _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.randomColorValue) {\n            const availableEffects = [\n                ...this.container.particles.effectDrawers.keys()\n            ];\n            this.effect = availableEffects[Math.floor((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRandom)() * availableEffects.length)];\n        }\n        if (this.shape === _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.randomColorValue) {\n            const availableShapes = [\n                ...this.container.particles.shapeDrawers.keys()\n            ];\n            this.shape = availableShapes[Math.floor((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRandom)() * availableShapes.length)];\n        }\n        this.effectData = this.effect ? loadEffectData(this.effect, effectOptions, this.id, reduceDuplicates) : undefined;\n        this.shapeData = this.shape ? loadShapeData(this.shape, shapeOptions, this.id, reduceDuplicates) : undefined;\n        particlesOptions.load(overrideOptions);\n        const effectData = this.effectData;\n        if (effectData) {\n            particlesOptions.load(effectData.particles);\n        }\n        const shapeData = this.shapeData;\n        if (shapeData) {\n            particlesOptions.load(shapeData.particles);\n        }\n        this.effectFill = effectData?.fill ?? particlesOptions.effect.fill;\n        this.effectClose = effectData?.close ?? particlesOptions.effect.close;\n        this.shapeFill = shapeData?.fill ?? particlesOptions.shape.fill;\n        this.shapeClose = shapeData?.close ?? particlesOptions.shape.close;\n        this.options = particlesOptions;\n        container.retina.initParticle(this);\n        this.size = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.initParticleNumericAnimationValue)(this.options.size, pxRatio);\n        this.bubble = {\n            inRange: false\n        };\n        this.slow = {\n            inRange: false,\n            factor: 1\n        };\n        this._initPosition(position);\n        this.initialVelocity = this._calculateVelocity();\n        this.velocity = this.initialVelocity.copy();\n        const particles = container.particles;\n        particles.setLastZIndex(this.position.z);\n        this.zIndexFactor = this.position.z / container.zLayers;\n        this.sides = 24;\n        let effectDrawer, shapeDrawer;\n        if (this.effect) {\n            effectDrawer = container.particles.effectDrawers.get(this.effect);\n        }\n        if (effectDrawer?.loadEffect) {\n            effectDrawer.loadEffect(this);\n        }\n        if (this.shape) {\n            shapeDrawer = container.particles.shapeDrawers.get(this.shape);\n        }\n        if (shapeDrawer?.loadShape) {\n            shapeDrawer.loadShape(this);\n        }\n        const sideCountFunc = shapeDrawer?.getSidesCount;\n        if (sideCountFunc) {\n            this.sides = sideCountFunc(this);\n        }\n        this.spawning = false;\n        for (const updater of particles.updaters){\n            updater.init(this);\n        }\n        effectDrawer?.particleInit?.(container, this);\n        shapeDrawer?.particleInit?.(container, this);\n        for (const plugin of container.particleCreatedPlugins){\n            plugin.particleCreated?.(this);\n        }\n    }\n    isInsideCanvas() {\n        const radius = this.getRadius(), canvasSize = this.container.canvas.size, position = this.position;\n        return position.x >= -radius && position.y >= -radius && position.y <= canvasSize.height + radius && position.x <= canvasSize.width + radius;\n    }\n    isShowingBack() {\n        if (!this.roll) {\n            return false;\n        }\n        const angle = this.roll.angle;\n        if (this.roll.horizontal && this.roll.vertical) {\n            const normalizedAngle = angle % _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.doublePI, adjustedAngle = normalizedAngle < _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultAngle ? normalizedAngle + _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.doublePI : normalizedAngle;\n            return adjustedAngle >= Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.half && adjustedAngle < Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.triple * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.half;\n        }\n        if (this.roll.horizontal) {\n            const normalizedAngle = (angle + Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.half) % (Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.double), adjustedAngle = normalizedAngle < _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultAngle ? normalizedAngle + Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.double : normalizedAngle;\n            return adjustedAngle >= Math.PI && adjustedAngle < Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.double;\n        }\n        if (this.roll.vertical) {\n            const normalizedAngle = angle % (Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.double), adjustedAngle = normalizedAngle < _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultAngle ? normalizedAngle + Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.double : normalizedAngle;\n            return adjustedAngle >= Math.PI && adjustedAngle < Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.double;\n        }\n        return false;\n    }\n    isVisible() {\n        return !this.destroyed && !this.spawning && this.isInsideCanvas();\n    }\n    reset() {\n        for (const updater of this.container.particles.updaters){\n            updater.reset?.(this);\n        }\n    }\n    _calcPosition = (position, zIndex)=>{\n        let tryCount = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultRetryCount, posVec = position ? _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector3d.create(position.x, position.y, zIndex) : undefined;\n        const container = this.container, plugins = container.particlePositionPlugins, outModes = this.options.move.outModes, radius = this.getRadius(), canvasSize = container.canvas.size, abortController = new AbortController(), { signal } = abortController;\n        while(!signal.aborted){\n            for (const plugin of plugins){\n                const pluginPos = plugin.particlePosition?.(posVec, this);\n                if (pluginPos) {\n                    return _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector3d.create(pluginPos.x, pluginPos.y, zIndex);\n                }\n            }\n            const exactPosition = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.calcExactPositionOrRandomFromSize)({\n                size: canvasSize,\n                position: posVec\n            }), pos = _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector3d.create(exactPosition.x, exactPosition.y, zIndex);\n            this._fixHorizontal(pos, radius, outModes.left ?? outModes.default);\n            this._fixHorizontal(pos, radius, outModes.right ?? outModes.default);\n            this._fixVertical(pos, radius, outModes.top ?? outModes.default);\n            this._fixVertical(pos, radius, outModes.bottom ?? outModes.default);\n            let isValidPosition = true;\n            for (const plugin of container.particles.checkParticlePositionPlugins){\n                isValidPosition = plugin.checkParticlePosition?.(this, pos, tryCount) ?? true;\n                if (!isValidPosition) {\n                    break;\n                }\n            }\n            if (isValidPosition) {\n                return pos;\n            }\n            tryCount += _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.tryCountIncrement;\n            posVec = undefined;\n        }\n        return posVec;\n    };\n    _calculateVelocity = ()=>{\n        const baseVelocity = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getParticleBaseVelocity)(this.direction), res = baseVelocity.copy(), moveOptions = this.options.move;\n        if (moveOptions.direction === _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_6__.MoveDirection.inside || moveOptions.direction === _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_6__.MoveDirection.outside) {\n            return res;\n        }\n        const rad = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.degToRad)((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRangeValue)(moveOptions.angle.value)), radOffset = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.degToRad)((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRangeValue)(moveOptions.angle.offset)), range = {\n            left: radOffset - rad * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.half,\n            right: radOffset + rad * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.half\n        };\n        if (!moveOptions.straight) {\n            res.angle += (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.randomInRangeValue)((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.setRangeValue)(range.left, range.right));\n        }\n        if (moveOptions.random && typeof moveOptions.speed === \"number\") {\n            res.length *= (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRandom)();\n        }\n        return res;\n    };\n    _fixHorizontal = (pos, radius, outMode)=>{\n        fixOutMode({\n            outMode,\n            checkModes: [\n                _Enums_Modes_OutMode_js__WEBPACK_IMPORTED_MODULE_7__.OutMode.bounce\n            ],\n            coord: pos.x,\n            maxCoord: this.container.canvas.size.width,\n            setCb: (value)=>pos.x += value,\n            radius\n        });\n    };\n    _fixVertical = (pos, radius, outMode)=>{\n        fixOutMode({\n            outMode,\n            checkModes: [\n                _Enums_Modes_OutMode_js__WEBPACK_IMPORTED_MODULE_7__.OutMode.bounce\n            ],\n            coord: pos.y,\n            maxCoord: this.container.canvas.size.height,\n            setCb: (value)=>pos.y += value,\n            radius\n        });\n    };\n    _getRollColor = (color)=>{\n        if (!color || !this.roll || !this.backColor && !this.roll.alter) {\n            return color;\n        }\n        if (!this.isShowingBack()) {\n            return color;\n        }\n        if (this.backColor) {\n            return this.backColor;\n        }\n        if (this.roll.alter) {\n            return (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_1__.alterHsl)(color, this.roll.alter.type, this.roll.alter.value);\n        }\n        return color;\n    };\n    _initPosition = (position)=>{\n        const container = this.container, zIndexValue = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRangeValue)(this.options.zIndex.value), initialPosition = this._calcPosition(position, (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.clamp)(zIndexValue, _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.minZ, container.zLayers));\n        if (!initialPosition) {\n            throw new Error(\"a valid position cannot be found for particle\");\n        }\n        this.position = initialPosition;\n        this.initialPosition = this.position.copy();\n        const canvasSize = container.canvas.size;\n        this.moveCenter = {\n            ...(0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.getPosition)(this.options.move.center, canvasSize),\n            radius: this.options.move.center.radius,\n            mode: this.options.move.center.mode\n        };\n        this.direction = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getParticleDirectionAngle)(this.options.move.direction, this.position, this.moveCenter);\n        switch(this.options.move.direction){\n            case _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_6__.MoveDirection.inside:\n                this.outType = _Enums_Types_ParticleOutType_js__WEBPACK_IMPORTED_MODULE_8__.ParticleOutType.inside;\n                break;\n            case _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_6__.MoveDirection.outside:\n                this.outType = _Enums_Types_ParticleOutType_js__WEBPACK_IMPORTED_MODULE_8__.ParticleOutType.outside;\n                break;\n            default:\n                break;\n        }\n        this.offset = _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector.origin;\n    };\n}\n\n\n//# sourceURL=webpack://@tsparticles/engine/./dist/browser/Core/Particle.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Particle: () => (/* binding */ Particle)\n/* harmony export */ });\n/* harmony import */ var _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Utils/Vectors.js */ \"./dist/browser/Core/Utils/Vectors.js\");\n/* harmony import */ var _Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Utils/ColorUtils.js */ \"./dist/browser/Utils/ColorUtils.js\");\n/* harmony import */ var _Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Utils/MathUtils.js */ \"./dist/browser/Utils/MathUtils.js\");\n/* harmony import */ var _Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Utils/Utils.js */ \"./dist/browser/Utils/Utils.js\");\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Utils/Constants.js */ \"./dist/browser/Core/Utils/Constants.js\");\n/* harmony import */ var _Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Enums/Types/EventType.js */ \"./dist/browser/Enums/Types/EventType.js\");\n/* harmony import */ var _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Enums/Directions/MoveDirection.js */ \"./dist/browser/Enums/Directions/MoveDirection.js\");\n/* harmony import */ var _Enums_Modes_OutMode_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Enums/Modes/OutMode.js */ \"./dist/browser/Enums/Modes/OutMode.js\");\n/* harmony import */ var _Enums_Types_ParticleOutType_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../Enums/Types/ParticleOutType.js */ \"./dist/browser/Enums/Types/ParticleOutType.js\");\n/* harmony import */ var _Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../Utils/OptionsUtils.js */ \"./dist/browser/Utils/OptionsUtils.js\");\n\n\n\n\n\n\n\n\n\n\nfunction loadEffectData(effect, effectOptions, id, reduceDuplicates) {\n    const effectData = effectOptions.options[effect];\n    return (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.deepExtend)({\n        close: effectOptions.close\n    }, (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.itemFromSingleOrMultiple)(effectData, id, reduceDuplicates));\n}\nfunction loadShapeData(shape, shapeOptions, id, reduceDuplicates) {\n    const shapeData = shapeOptions.options[shape];\n    return (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.deepExtend)({\n        close: shapeOptions.close\n    }, (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.itemFromSingleOrMultiple)(shapeData, id, reduceDuplicates));\n}\nfunction fixOutMode(data) {\n    if (!(0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.isInArray)(data.outMode, data.checkModes)) {\n        return;\n    }\n    const diameter = data.radius * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.double;\n    if (data.coord > data.maxCoord - diameter) {\n        data.setCb(-data.radius);\n    } else if (data.coord < diameter) {\n        data.setCb(data.radius);\n    }\n}\nclass Particle {\n    container;\n    backColor;\n    bubble;\n    destroyed;\n    direction;\n    effect;\n    effectClose;\n    effectData;\n    fillColor;\n    fillEnabled;\n    fillOpacity;\n    group;\n    id;\n    ignoresResizeRatio;\n    initialPosition;\n    initialVelocity;\n    isRotating;\n    lastPathTime;\n    misplaced;\n    moveCenter;\n    offset;\n    opacity;\n    options;\n    outType;\n    pathRotation;\n    position;\n    randomIndexData;\n    retina;\n    roll;\n    rotation;\n    shape;\n    shapeClose;\n    shapeData;\n    sides;\n    size;\n    slow;\n    spawning;\n    strokeColor;\n    strokeOpacity;\n    strokeWidth;\n    unbreakable;\n    velocity;\n    zIndexFactor;\n    _cachedOpacityData = {\n        fillOpacity: _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultOpacity,\n        opacity: _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultOpacity,\n        strokeOpacity: _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultOpacity\n    };\n    _cachedPosition = _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector3d.origin;\n    _cachedRotateData = {\n        sin: 0,\n        cos: 0\n    };\n    _cachedTransform = {\n        a: 1,\n        b: 0,\n        c: 0,\n        d: 1\n    };\n    _engine;\n    constructor(engine, container){\n        this.container = container;\n        this._engine = engine;\n    }\n    destroy(override) {\n        if (this.unbreakable || this.destroyed) {\n            return;\n        }\n        this.destroyed = true;\n        this.bubble.inRange = false;\n        this.slow.inRange = false;\n        const container = this.container, shapeDrawer = this.shape ? container.particles.shapeDrawers.get(this.shape) : undefined;\n        shapeDrawer?.particleDestroy?.(this);\n        for (const plugin of container.particleDestroyedPlugins){\n            plugin.particleDestroyed?.(this, override);\n        }\n        for (const updater of container.particles.updaters){\n            updater.particleDestroyed?.(this, override);\n        }\n        this._engine.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_5__.EventType.particleDestroyed, {\n            container: this.container,\n            data: {\n                particle: this\n            }\n        });\n    }\n    draw(delta) {\n        const container = this.container, canvas = container.canvas;\n        canvas.drawParticlePlugins(this, delta);\n        canvas.drawParticle(this, delta);\n    }\n    getAngle() {\n        return this.rotation + (this.pathRotation ? this.velocity.angle : _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultAngle);\n    }\n    getFillColor() {\n        return this._getRollColor(this.bubble.color ?? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_1__.getHslFromAnimation)(this.fillColor));\n    }\n    getMass() {\n        return this.getRadius() ** _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.squareExp * Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.half;\n    }\n    getOpacity() {\n        const zIndexOptions = this.options.zIndex, zIndexFactor = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.zIndexFactorOffset - this.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, opacity = this.bubble.opacity ?? (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRangeValue)(this.opacity?.value ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultOpacity), fillOpacity = this.fillOpacity ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultOpacity, strokeOpacity = this.strokeOpacity ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultOpacity;\n        this._cachedOpacityData.fillOpacity = opacity * fillOpacity * zOpacityFactor;\n        this._cachedOpacityData.opacity = opacity * zOpacityFactor;\n        this._cachedOpacityData.strokeOpacity = opacity * strokeOpacity * zOpacityFactor;\n        return this._cachedOpacityData;\n    }\n    getPosition() {\n        this._cachedPosition.x = this.position.x + this.offset.x;\n        this._cachedPosition.y = this.position.y + this.offset.y;\n        this._cachedPosition.z = this.position.z;\n        return this._cachedPosition;\n    }\n    getRadius() {\n        return this.bubble.radius ?? this.size.value;\n    }\n    getRotateData() {\n        const angle = this.getAngle();\n        this._cachedRotateData.sin = Math.sin(angle);\n        this._cachedRotateData.cos = Math.cos(angle);\n        return this._cachedRotateData;\n    }\n    getStrokeColor() {\n        return this._getRollColor(this.bubble.color ?? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_1__.getHslFromAnimation)(this.strokeColor));\n    }\n    getTransformData(externalTransform) {\n        const rotateData = this.getRotateData(), rotating = this.isRotating;\n        this._cachedTransform.a = rotateData.cos * (externalTransform.a ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultTransform.a);\n        this._cachedTransform.b = rotating ? rotateData.sin * (externalTransform.b ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.identity) : externalTransform.b ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultTransform.b;\n        this._cachedTransform.c = rotating ? -rotateData.sin * (externalTransform.c ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.identity) : externalTransform.c ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultTransform.c;\n        this._cachedTransform.d = rotateData.cos * (externalTransform.d ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultTransform.d);\n        return this._cachedTransform;\n    }\n    init(id, position, overrideOptions, group) {\n        const container = this.container;\n        this.id = id;\n        this.group = group;\n        this.effectClose = true;\n        this.shapeClose = true;\n        this.pathRotation = false;\n        this.lastPathTime = 0;\n        this.destroyed = false;\n        this.unbreakable = false;\n        this.isRotating = false;\n        this.rotation = 0;\n        this.misplaced = false;\n        this.retina = {\n            maxDistance: {}\n        };\n        this.outType = _Enums_Types_ParticleOutType_js__WEBPACK_IMPORTED_MODULE_8__.ParticleOutType.normal;\n        this.ignoresResizeRatio = true;\n        const pxRatio = container.retina.pixelRatio, mainOptions = container.actualOptions, particlesOptions = (0,_Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_9__.loadParticlesOptions)(this._engine, container, mainOptions.particles), reduceDuplicates = particlesOptions.reduceDuplicates, effectType = particlesOptions.effect.type, shapeType = particlesOptions.shape.type;\n        this.effect = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.itemFromSingleOrMultiple)(effectType, this.id, reduceDuplicates);\n        this.shape = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.itemFromSingleOrMultiple)(shapeType, this.id, reduceDuplicates);\n        const effectOptions = particlesOptions.effect, shapeOptions = particlesOptions.shape;\n        if (overrideOptions) {\n            if (overrideOptions.effect?.type) {\n                const overrideEffectType = overrideOptions.effect.type, effect = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.itemFromSingleOrMultiple)(overrideEffectType, this.id, reduceDuplicates);\n                if (effect) {\n                    this.effect = effect;\n                    effectOptions.load(overrideOptions.effect);\n                }\n            }\n            if (overrideOptions.shape?.type) {\n                const overrideShapeType = overrideOptions.shape.type, shape = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.itemFromSingleOrMultiple)(overrideShapeType, this.id, reduceDuplicates);\n                if (shape) {\n                    this.shape = shape;\n                    shapeOptions.load(overrideOptions.shape);\n                }\n            }\n        }\n        if (this.effect === _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.randomColorValue) {\n            const availableEffects = [\n                ...this.container.particles.effectDrawers.keys()\n            ];\n            this.effect = availableEffects[Math.floor((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRandom)() * availableEffects.length)];\n        }\n        if (this.shape === _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.randomColorValue) {\n            const availableShapes = [\n                ...this.container.particles.shapeDrawers.keys()\n            ];\n            this.shape = availableShapes[Math.floor((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRandom)() * availableShapes.length)];\n        }\n        this.effectData = this.effect ? loadEffectData(this.effect, effectOptions, this.id, reduceDuplicates) : undefined;\n        this.shapeData = this.shape ? loadShapeData(this.shape, shapeOptions, this.id, reduceDuplicates) : undefined;\n        particlesOptions.load(overrideOptions);\n        const effectData = this.effectData;\n        if (effectData) {\n            particlesOptions.load(effectData.particles);\n        }\n        const shapeData = this.shapeData;\n        if (shapeData) {\n            particlesOptions.load(shapeData.particles);\n        }\n        this.effectClose = effectData?.close ?? particlesOptions.effect.close;\n        this.shapeClose = shapeData?.close ?? particlesOptions.shape.close;\n        this.options = particlesOptions;\n        container.retina.initParticle(this);\n        this.size = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.initParticleNumericAnimationValue)(this.options.size, pxRatio);\n        this.bubble = {\n            inRange: false\n        };\n        this.slow = {\n            inRange: false,\n            factor: 1\n        };\n        this._initPosition(position);\n        this.initialVelocity = this._calculateVelocity();\n        this.velocity = this.initialVelocity.copy();\n        const particles = container.particles;\n        particles.setLastZIndex(this.position.z);\n        this.zIndexFactor = this.position.z / container.zLayers;\n        this.sides = 24;\n        let effectDrawer, shapeDrawer;\n        if (this.effect) {\n            effectDrawer = container.particles.effectDrawers.get(this.effect);\n        }\n        if (effectDrawer?.loadEffect) {\n            effectDrawer.loadEffect(this);\n        }\n        if (this.shape) {\n            shapeDrawer = container.particles.shapeDrawers.get(this.shape);\n        }\n        if (shapeDrawer?.loadShape) {\n            shapeDrawer.loadShape(this);\n        }\n        const sideCountFunc = shapeDrawer?.getSidesCount;\n        if (sideCountFunc) {\n            this.sides = sideCountFunc(this);\n        }\n        this.spawning = false;\n        for (const updater of particles.updaters){\n            updater.init(this);\n        }\n        effectDrawer?.particleInit?.(container, this);\n        shapeDrawer?.particleInit?.(container, this);\n        for (const plugin of container.particleCreatedPlugins){\n            plugin.particleCreated?.(this);\n        }\n    }\n    isInsideCanvas() {\n        const radius = this.getRadius(), canvasSize = this.container.canvas.size, position = this.position;\n        return position.x >= -radius && position.y >= -radius && position.y <= canvasSize.height + radius && position.x <= canvasSize.width + radius;\n    }\n    isShowingBack() {\n        if (!this.roll) {\n            return false;\n        }\n        const angle = this.roll.angle;\n        if (this.roll.horizontal && this.roll.vertical) {\n            const normalizedAngle = angle % _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.doublePI, adjustedAngle = normalizedAngle < _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultAngle ? normalizedAngle + _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.doublePI : normalizedAngle;\n            return adjustedAngle >= Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.half && adjustedAngle < Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.triple * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.half;\n        }\n        if (this.roll.horizontal) {\n            const normalizedAngle = (angle + Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.half) % (Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.double), adjustedAngle = normalizedAngle < _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultAngle ? normalizedAngle + Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.double : normalizedAngle;\n            return adjustedAngle >= Math.PI && adjustedAngle < Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.double;\n        }\n        if (this.roll.vertical) {\n            const normalizedAngle = angle % (Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.double), adjustedAngle = normalizedAngle < _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultAngle ? normalizedAngle + Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.double : normalizedAngle;\n            return adjustedAngle >= Math.PI && adjustedAngle < Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.double;\n        }\n        return false;\n    }\n    isVisible() {\n        return !this.destroyed && !this.spawning && this.isInsideCanvas();\n    }\n    reset() {\n        for (const updater of this.container.particles.updaters){\n            updater.reset?.(this);\n        }\n    }\n    _calcPosition = (position, zIndex)=>{\n        let tryCount = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultRetryCount, posVec = position ? _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector3d.create(position.x, position.y, zIndex) : undefined;\n        const container = this.container, plugins = container.particlePositionPlugins, outModes = this.options.move.outModes, radius = this.getRadius(), canvasSize = container.canvas.size, abortController = new AbortController(), { signal } = abortController;\n        while(!signal.aborted){\n            for (const plugin of plugins){\n                const pluginPos = plugin.particlePosition?.(posVec, this);\n                if (pluginPos) {\n                    return _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector3d.create(pluginPos.x, pluginPos.y, zIndex);\n                }\n            }\n            const exactPosition = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.calcExactPositionOrRandomFromSize)({\n                size: canvasSize,\n                position: posVec\n            }), pos = _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector3d.create(exactPosition.x, exactPosition.y, zIndex);\n            this._fixHorizontal(pos, radius, outModes.left ?? outModes.default);\n            this._fixHorizontal(pos, radius, outModes.right ?? outModes.default);\n            this._fixVertical(pos, radius, outModes.top ?? outModes.default);\n            this._fixVertical(pos, radius, outModes.bottom ?? outModes.default);\n            let isValidPosition = true;\n            for (const plugin of container.particles.checkParticlePositionPlugins){\n                isValidPosition = plugin.checkParticlePosition?.(this, pos, tryCount) ?? true;\n                if (!isValidPosition) {\n                    break;\n                }\n            }\n            if (isValidPosition) {\n                return pos;\n            }\n            tryCount += _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.tryCountIncrement;\n            posVec = undefined;\n        }\n        return posVec;\n    };\n    _calculateVelocity = ()=>{\n        const baseVelocity = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getParticleBaseVelocity)(this.direction), res = baseVelocity.copy(), moveOptions = this.options.move;\n        if (moveOptions.direction === _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_6__.MoveDirection.inside || moveOptions.direction === _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_6__.MoveDirection.outside) {\n            return res;\n        }\n        const rad = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.degToRad)((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRangeValue)(moveOptions.angle.value)), radOffset = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.degToRad)((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRangeValue)(moveOptions.angle.offset)), range = {\n            left: radOffset - rad * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.half,\n            right: radOffset + rad * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.half\n        };\n        if (!moveOptions.straight) {\n            res.angle += (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.randomInRangeValue)((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.setRangeValue)(range.left, range.right));\n        }\n        if (moveOptions.random && typeof moveOptions.speed === \"number\") {\n            res.length *= (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRandom)();\n        }\n        return res;\n    };\n    _fixHorizontal = (pos, radius, outMode)=>{\n        fixOutMode({\n            outMode,\n            checkModes: [\n                _Enums_Modes_OutMode_js__WEBPACK_IMPORTED_MODULE_7__.OutMode.bounce\n            ],\n            coord: pos.x,\n            maxCoord: this.container.canvas.size.width,\n            setCb: (value)=>pos.x += value,\n            radius\n        });\n    };\n    _fixVertical = (pos, radius, outMode)=>{\n        fixOutMode({\n            outMode,\n            checkModes: [\n                _Enums_Modes_OutMode_js__WEBPACK_IMPORTED_MODULE_7__.OutMode.bounce\n            ],\n            coord: pos.y,\n            maxCoord: this.container.canvas.size.height,\n            setCb: (value)=>pos.y += value,\n            radius\n        });\n    };\n    _getRollColor = (color)=>{\n        if (!color || !this.roll || !this.backColor && !this.roll.alter) {\n            return color;\n        }\n        if (!this.isShowingBack()) {\n            return color;\n        }\n        if (this.backColor) {\n            return this.backColor;\n        }\n        if (this.roll.alter) {\n            return (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_1__.alterHsl)(color, this.roll.alter.type, this.roll.alter.value);\n        }\n        return color;\n    };\n    _initPosition = (position)=>{\n        const container = this.container, zIndexValue = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRangeValue)(this.options.zIndex.value), initialPosition = this._calcPosition(position, (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.clamp)(zIndexValue, _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.minZ, container.zLayers));\n        if (!initialPosition) {\n            throw new Error(\"a valid position cannot be found for particle\");\n        }\n        this.position = initialPosition;\n        this.initialPosition = this.position.copy();\n        const canvasSize = container.canvas.size;\n        this.moveCenter = {\n            ...(0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.getPosition)(this.options.move.center, canvasSize),\n            radius: this.options.move.center.radius,\n            mode: this.options.move.center.mode\n        };\n        this.direction = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getParticleDirectionAngle)(this.options.move.direction, this.position, this.moveCenter);\n        switch(this.options.move.direction){\n            case _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_6__.MoveDirection.inside:\n                this.outType = _Enums_Types_ParticleOutType_js__WEBPACK_IMPORTED_MODULE_8__.ParticleOutType.inside;\n                break;\n            case _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_6__.MoveDirection.outside:\n                this.outType = _Enums_Types_ParticleOutType_js__WEBPACK_IMPORTED_MODULE_8__.ParticleOutType.outside;\n                break;\n            default:\n                break;\n        }\n        this.offset = _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector.origin;\n    };\n}\n\n\n//# sourceURL=webpack://@tsparticles/engine/./dist/browser/Core/Particle.js?\n}");
 
 /***/ },
 

package/esm/Core/Canvas.js

@@ -1,6 +1,6 @@
 import { clear, drawParticle, drawParticlePlugin, paintBase, paintImage } from "../Utils/CanvasUtils.js";
 import { cloneStyle, getFullScreenStyle, safeMatchMedia, safeMutationObserver } from "../Utils/Utils.js";
-import { defaultTransformValue, defaultZoom, generatedAttribute, half, minimumSize, zIndexFactorOffset, } from "./Utils/Constants.js";
+import { defaultCompositeValue, defaultTransformValue, defaultZoom, generatedAttribute, half, minimumSize, zIndexFactorOffset, } from "./Utils/Constants.js";
 import { getStyleFromHsl, getStyleFromRgb, rangeColorToHsl, rangeColorToRgb } from "../Utils/ColorUtils.js";
 const fColorIndex = 0, sColorIndex = 1;
 function setTransformValue(factor, newFactor, key) {
@@ -163,14 +163,14 @@ export class Canvas {
         if (radius <= minimumSize) {
             return;
         }
-        const pfColor = particle.getFillColor(), psColor = particle.getStrokeColor() ?? pfColor;
+        const pfColor = particle.getFillColor(), psColor = particle.getStrokeColor();
         let [fColor, sColor] = this._getPluginParticleColors(particle);
         fColor ??= pfColor;
         sColor ??= psColor;
         if (!fColor && !sColor) {
             return;
         }
-        const container = this.container, zIndexOptions = particle.options.zIndex, zIndexFactor = zIndexFactorOffset - particle.zIndexFactor, { opacity, strokeOpacity } = particle.getOpacity(), transform = this._reusableTransform, colorStyles = this._reusableColorStyles, fill = fColor ? getStyleFromHsl(fColor, container.hdr, opacity) : undefined, stroke = sColor ? getStyleFromHsl(sColor, container.hdr, strokeOpacity) : fill;
+        const container = this.container, zIndexOptions = particle.options.zIndex, zIndexFactor = zIndexFactorOffset - particle.zIndexFactor, { fillOpacity, opacity, strokeOpacity } = particle.getOpacity(), transform = this._reusableTransform, colorStyles = this._reusableColorStyles, fill = fColor ? getStyleFromHsl(fColor, container.hdr, fillOpacity * opacity) : undefined, stroke = sColor ? getStyleFromHsl(sColor, container.hdr, strokeOpacity * opacity) : fill;
         transform.a = transform.b = transform.c = transform.d = undefined;
         colorStyles.fill = fill;
         colorStyles.stroke = stroke;
@@ -357,6 +357,9 @@ export class Canvas {
             willReadFrequently: false,
         };
         this._context = this.element.getContext("2d", this._canvasSettings);
+        if (this._context) {
+            this._context.globalCompositeOperation = defaultCompositeValue;
+        }
         this._safeMutationObserver(obs => {
             obs.disconnect();
         });
@@ -514,7 +517,7 @@ export class Canvas {
             this._resetOriginalStyle();
         }
         for (const key in options.style) {
-            if (!key || !Object.hasOwn(options.style, key)) {
+            if (!key || !(key in options.style)) {
                 continue;
             }
             const value = options.style[key];

package/esm/Core/Engine.js

@@ -60,6 +60,7 @@ export class Engine {
         shapes: new Map(),
         updaters: new Map(),
     };
+    palettes = new Map();
     plugins = [];
     presets = new Map();
     shapeDrawers = new Map();
@@ -83,7 +84,7 @@ export class Engine {
         return this._domArray;
     }
     get version() {
-        return "4.0.0-alpha.26";
+        return "4.0.0-alpha.27";
     }
     addColorManager(name, manager) {
         this.colorManagers.set(name, manager);
@@ -105,6 +106,9 @@ export class Engine {
     addEventListener(type, listener) {
         this._eventDispatcher.addEventListener(type, listener);
     }
+    addPalette(name, palette) {
+        this.palettes.set(name, palette);
+    }
     addParticleUpdater(name, updaterInitializer) {
         this.initializers.updaters.set(name, updaterInitializer);
     }
@@ -145,6 +149,9 @@ export class Engine {
     getEffectDrawers(container, force = false) {
         return getItemMapFromInitializer(container, this.effectDrawers, this.initializers.effects, force);
     }
+    getPalette(name) {
+        return this.palettes.get(name);
+    }
     getPlugin(plugin) {
         return this.plugins.find(t => t.id === plugin);
     }

package/esm/Core/Interfaces/IPalette.js

@@ -0,0 +1 @@
+export {};