@tsparticles/engine 4.0.0-alpha.8 → 4.0.0-beta.0

package/esm/Options/Classes/Particles/Shape/Shape.js

@@ -1,9 +1,11 @@
 import { deepExtend } from "../../../../Utils/Utils.js";
 import { isNull } from "../../../../Utils/TypeUtils.js";
 export class Shape {
+    close;
+    options;
+    type;
     constructor() {
         this.close = true;
-        this.fill = true;
         this.options = {};
         this.type = "circle";
     }
@@ -23,9 +25,6 @@ export class Shape {
         if (data.close !== undefined) {
             this.close = data.close;
         }
-        if (data.fill !== undefined) {
-            this.fill = data.fill;
-        }
         if (data.type !== undefined) {
             this.type = data.type;
         }

package/esm/Options/Classes/Particles/Size/Size.js

@@ -2,6 +2,7 @@ import { RangedAnimationValueWithRandom } from "../../ValueWithRandom.js";
 import { SizeAnimation } from "./SizeAnimation.js";
 import { isNull } from "../../../../Utils/TypeUtils.js";
 export class Size extends RangedAnimationValueWithRandom {
+    animation;
     constructor() {
         super();
         this.animation = new SizeAnimation();

package/esm/Options/Classes/Particles/Size/SizeAnimation.js

@@ -2,6 +2,7 @@ import { DestroyType } from "../../../../Enums/Types/DestroyType.js";
 import { RangedAnimationOptions } from "../../AnimationOptions.js";
 import { isNull } from "../../../../Utils/TypeUtils.js";
 export class SizeAnimation extends RangedAnimationOptions {
+    destroy;
     constructor() {
         super();
         this.destroy = DestroyType.none;

package/esm/Options/Classes/Particles/Stroke.js

@@ -2,6 +2,9 @@ import { AnimatableColor } from "../AnimatableColor.js";
 import { isNull } from "../../../Utils/TypeUtils.js";
 import { setRangeValue } from "../../../Utils/MathUtils.js";
 export class Stroke {
+    color;
+    opacity;
+    width;
     constructor() {
         this.width = 0;
     }

package/esm/Options/Classes/Particles/ZIndex/ZIndex.js

@@ -1,6 +1,9 @@
 import { ValueWithRandom } from "../../ValueWithRandom.js";
 import { isNull } from "../../../../Utils/TypeUtils.js";
 export class ZIndex extends ValueWithRandom {
+    opacityRate;
+    sizeRate;
+    velocityRate;
     constructor() {
         super();
         this.opacityRate = 1;

package/esm/Options/Classes/ResizeEvent.js

@@ -1,5 +1,7 @@
 import { isNull } from "../../Utils/TypeUtils.js";
 export class ResizeEvent {
+    delay;
+    enable;
     constructor() {
         this.delay = 0.5;
         this.enable = true;

package/esm/Options/Classes/ValueWithRandom.js

@@ -2,6 +2,7 @@ import { AnimationOptions, RangedAnimationOptions } from "./AnimationOptions.js"
 import { isNull } from "../../Utils/TypeUtils.js";
 import { setRangeValue } from "../../Utils/MathUtils.js";
 export class ValueWithRandom {
+    value;
     constructor() {
         this.value = 0;
     }
@@ -15,10 +16,7 @@ export class ValueWithRandom {
     }
 }
 export class AnimationValueWithRandom extends ValueWithRandom {
-    constructor() {
-        super();
-        this.animation = new AnimationOptions();
-    }
+    animation = new AnimationOptions();
     load(data) {
         super.load(data);
         if (isNull(data)) {
@@ -31,6 +29,7 @@ export class AnimationValueWithRandom extends ValueWithRandom {
     }
 }
 export class RangedAnimationValueWithRandom extends AnimationValueWithRandom {
+    animation;
     constructor() {
         super();
         this.animation = new RangedAnimationOptions();

package/esm/Utils/CanvasUtils.js

@@ -1,11 +1,4 @@
-import { lFactor, minStrokeWidth, originPoint } from "../Core/Utils/Constants.js";
-import { AlterType } from "../Enums/Types/AlterType.js";
-export function drawLine(context, begin, end) {
-    context.beginPath();
-    context.moveTo(begin.x, begin.y);
-    context.lineTo(end.x, end.y);
-    context.closePath();
-}
+import { defaultZoom, minStrokeWidth, originPoint } from "../Core/Utils/Constants.js";
 export function paintBase(context, dimension, baseColor) {
     context.fillStyle = baseColor ?? "rgba(0,0,0,0)";
     context.fillRect(originPoint.x, originPoint.y, dimension.width, dimension.height);
@@ -14,20 +7,24 @@ export function paintImage(context, dimension, image, opacity) {
     if (!image) {
         return;
     }
+    const prevAlpha = context.globalAlpha;
     context.globalAlpha = opacity;
     context.drawImage(image, originPoint.x, originPoint.y, dimension.width, dimension.height);
-    context.globalAlpha = 1;
+    context.globalAlpha = prevAlpha;
 }
 export function clear(context, dimension) {
     context.clearRect(originPoint.x, originPoint.y, dimension.width, dimension.height);
 }
 export function drawParticle(data) {
-    const { container, context, particle, delta, colorStyles, radius, opacity, transform } = data, pos = particle.getPosition(), transformData = particle.getTransformData(transform);
+    const { container, context, particle, delta, colorStyles, radius, opacity, transform } = data, { effectDrawers, shapeDrawers } = container.particles, pos = particle.getPosition(), transformData = particle.getTransformData(transform), drawScale = defaultZoom, drawPosition = {
+        x: pos.x,
+        y: pos.y,
+    };
     context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, pos.x, pos.y);
     if (colorStyles.fill) {
         context.fillStyle = colorStyles.fill;
     }
-    const strokeWidth = particle.strokeWidth ?? minStrokeWidth;
+    const fillEnabled = !!particle.fillEnabled, strokeWidth = particle.strokeWidth ?? minStrokeWidth;
     context.lineWidth = strokeWidth;
     if (colorStyles.stroke) {
         context.strokeStyle = colorStyles.stroke;
@@ -36,49 +33,54 @@ export function drawParticle(data) {
         context,
         particle,
         radius,
+        drawRadius: radius * drawScale,
         opacity,
         delta,
         pixelRatio: container.retina.pixelRatio,
-        fill: particle.shapeFill,
-        stroke: strokeWidth > minStrokeWidth || !particle.shapeFill,
+        fill: fillEnabled,
+        stroke: strokeWidth > minStrokeWidth,
         transformData,
+        position: { ...pos },
+        drawPosition,
+        drawScale,
     };
-    drawBeforeEffect(container, drawData);
-    drawShapeBeforeDraw(container, drawData);
-    drawShape(container, drawData);
-    drawShapeAfterDraw(container, drawData);
-    drawAfterEffect(container, drawData);
+    for (const plugin of container.plugins) {
+        plugin.drawParticleTransform?.(drawData);
+    }
+    const effect = particle.effect ? effectDrawers.get(particle.effect) : undefined, shape = particle.shape ? shapeDrawers.get(particle.shape) : undefined;
+    drawBeforeEffect(effect, drawData);
+    drawShapeBeforeDraw(shape, drawData);
+    drawShape(shape, drawData);
+    drawShapeAfterDraw(shape, drawData);
+    drawAfterEffect(effect, drawData);
     context.resetTransform();
 }
-export function drawAfterEffect(container, data) {
+export function drawAfterEffect(drawer, data) {
+    if (!drawer?.drawAfter) {
+        return;
+    }
     const { particle } = data;
     if (!particle.effect) {
         return;
     }
-    const drawer = container.effectDrawers.get(particle.effect), drawFunc = drawer?.drawAfter;
-    if (!drawFunc) {
+    drawer.drawAfter(data);
+}
+export function drawBeforeEffect(drawer, data) {
+    if (!drawer?.drawBefore) {
         return;
     }
-    drawFunc(data);
-}
-export function drawBeforeEffect(container, data) {
     const { particle } = data;
     if (!particle.effect) {
         return;
     }
-    const drawer = container.effectDrawers.get(particle.effect);
-    if (!drawer?.drawBefore) {
-        return;
-    }
     drawer.drawBefore(data);
 }
-export function drawShape(container, data) {
-    const { context, particle, stroke } = data;
-    if (!particle.shape) {
+export function drawShape(drawer, data) {
+    if (!drawer) {
         return;
     }
-    const drawer = container.shapeDrawers.get(particle.shape);
-    if (!drawer) {
+    const { context, fill, particle, stroke } = data;
+    if (!particle.shape) {
         return;
     }
     context.beginPath();
@@ -89,30 +91,28 @@ export function drawShape(container, data) {
     if (stroke) {
         context.stroke();
     }
-    if (particle.shapeFill) {
+    if (fill) {
         context.fill();
     }
 }
-export function drawShapeAfterDraw(container, data) {
-    const { particle } = data;
-    if (!particle.shape) {
-        return;
-    }
-    const drawer = container.shapeDrawers.get(particle.shape);
+export function drawShapeAfterDraw(drawer, data) {
     if (!drawer?.afterDraw) {
         return;
     }
-    drawer.afterDraw(data);
-}
-export function drawShapeBeforeDraw(container, data) {
     const { particle } = data;
     if (!particle.shape) {
         return;
     }
-    const drawer = container.shapeDrawers.get(particle.shape);
+    drawer.afterDraw(data);
+}
+export function drawShapeBeforeDraw(drawer, data) {
     if (!drawer?.beforeDraw) {
         return;
     }
+    const { particle } = data;
+    if (!particle.shape) {
+        return;
+    }
     drawer.beforeDraw(data);
 }
 export function drawParticlePlugin(context, plugin, particle, delta) {
@@ -121,10 +121,3 @@ export function drawParticlePlugin(context, plugin, particle, delta) {
     }
     plugin.drawParticle(context, particle, delta);
 }
-export function alterHsl(color, type, value) {
-    return {
-        h: color.h,
-        s: color.s,
-        l: color.l + (type === AlterType.darken ? -lFactor : lFactor) * value,
-    };
-}

package/esm/Utils/ColorUtils.js

@@ -1,6 +1,7 @@
-import { clamp, getRandom, getRandomInRange, getRangeMax, getRangeMin, getRangeValue, mix, randomInRangeValue, setRangeValue, } from "./MathUtils.js";
-import { decayOffset, defaultLoops, defaultOpacity, defaultRgbMin, defaultTime, defaultVelocity, double, hMax, hMin, hPhase, half, identity, lMax, lMin, midColorValue, millisecondsToSeconds, percentDenominator, phaseNumerator, randomColorValue, rgbMax, sMax, sMin, sNormalizedOffset, sextuple, triple, } from "../Core/Utils/Constants.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";
 import { AnimationStatus } from "../Enums/AnimationStatus.js";
 import { itemFromArray } from "./Utils.js";
 const styleCache = new Map(), maxCacheSize = 1000, firstIndex = 0, rgbFixedPrecision = 2, hslFixedPrecision = 2;
@@ -189,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 {
@@ -245,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) {
@@ -277,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);
@@ -296,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))) {
@@ -309,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) {
@@ -325,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;
@@ -341,12 +349,15 @@ 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 },
+    const { h, s, l } = color;
+    updateColorValue(h, false, delta);
+    updateColorValue(s, true, delta);
+    updateColorValue(l, true, delta);
+}
+export function alterHsl(color, type, value) {
+    return {
+        h: color.h,
+        s: color.s,
+        l: color.l + (type === AlterType.darken ? -lFactor : lFactor) * value,
     };
-    updateColorValue(h, ranges.h, false, delta);
-    updateColorValue(s, ranges.s, true, delta);
-    updateColorValue(l, ranges.l, true, delta);
 }

package/esm/Utils/EventDispatcher.js

@@ -1,5 +1,6 @@
 import { deleteCount, minIndex } from "../Core/Utils/Constants.js";
 export class EventDispatcher {
+    _listeners;
     constructor() {
         this._listeners = new Map();
     }

package/esm/Utils/MathUtils.js

@@ -21,10 +21,8 @@ export function getRandomInRange(min, max) {
     return getRandom() * (max - min) + min;
 }
 export function setAnimationFunctions(nextFrame, cancel) {
-    _animationLoop.nextFrame = (callback) => nextFrame(callback);
-    _animationLoop.cancel = (handle) => {
-        cancel(handle);
-    };
+    _animationLoop.nextFrame = nextFrame;
+    _animationLoop.cancel = cancel;
 }
 export function animate(fn) {
     return _animationLoop.nextFrame(fn);
@@ -68,11 +66,18 @@ export function setRangeValue(source, value) {
         : setRangeValue(min, max);
 }
 export function getDistances(pointA, pointB) {
-    const dx = pointA.x - pointB.x, dy = pointA.y - pointB.y, squareExp = 2;
-    return { dx: dx, dy: dy, distance: Math.sqrt(dx ** squareExp + dy ** squareExp) };
+    const dx = pointA.x - pointB.x, dy = pointA.y - pointB.y;
+    return { dx: dx, dy: dy, distance: Math.hypot(dx, dy) };
+}
+export function getDistanceSq(pointA, pointB) {
+    const dx = pointA.x - pointB.x, dy = pointA.y - pointB.y;
+    return dx * dx + dy * dy;
 }
 export function getDistance(pointA, pointB) {
-    return getDistances(pointA, pointB).distance;
+    return Math.sqrt(getDistanceSq(pointA, pointB));
+}
+export function checkDistance(pointA, pointB, distance) {
+    return getDistanceSq(pointA, pointB) <= distance * distance;
 }
 export function degToRad(degrees) {
     return degrees * degToRadFactor;

package/esm/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;
     };
 }
@@ -48,13 +102,6 @@ export function safeMutationObserver(callback) {
 export function isInArray(value, array) {
     return value === array || (isArray(array) && array.includes(value));
 }
-export async function loadFont(font, weight) {
-    try {
-        await safeDocument().fonts.load(`${weight ?? "400"} 36px '${font ?? "Verdana"}'`);
-    }
-    catch {
-    }
-}
 export function arrayRandomIndex(array) {
     return Math.floor(getRandom() * array.length);
 }
@@ -90,33 +137,48 @@ export function calculateBounds(point, radius) {
 }
 export function deepExtend(destination, ...sources) {
     for (const source of sources) {
-        if (source === undefined || source === null) {
+        if (isNull(source)) {
             continue;
         }
         if (!isObject(source)) {
             destination = source;
             continue;
         }
-        const sourceIsArray = Array.isArray(source);
-        if (sourceIsArray) {
+        if (Array.isArray(source)) {
             if (!Array.isArray(destination)) {
                 destination = [];
             }
         }
-        else {
-            if (!isObject(destination) || Array.isArray(destination)) {
-                destination = {};
+        else if (!isObject(destination) || Array.isArray(destination)) {
+            destination = {};
+        }
+        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 in source) {
-            if (key === "__proto__") {
+        for (const key of sourceKeys) {
+            if (dangerousKeys.has(key)) {
                 continue;
             }
-            const sourceDict = source, value = sourceDict[key], destDict = destination;
-            destDict[key] =
-                isObject(value) && Array.isArray(value)
-                    ? value.map(v => deepExtend(destDict[key], v))
-                    : deepExtend(destDict[key], value);
+            const sourceDict = source, destDict = destination, value = sourceDict[key];
+            destDict[key] = Array.isArray(value)
+                ? value.map(v => deepExtend(undefined, v))
+                : deepExtend(destDict[key], value);
         }
     }
     return destination;
@@ -178,6 +240,8 @@ export function initParticleNumericAnimationValue(options, pxRatio) {
             case AnimationMode.random:
                 res.status = getRandom() >= half ? AnimationStatus.increasing : AnimationStatus.decreasing;
                 break;
+            default:
+                break;
         }
         const autoStatus = animationOptions.mode === AnimationMode.auto;
         switch (animationOptions.startValue) {
@@ -243,6 +307,8 @@ function checkDestroy(particle, destroyType, value, minValue, maxValue) {
                 particle.destroy();
             }
             break;
+        default:
+            break;
     }
 }
 export function updateAnimation(particle, data, changeDirection, destroyType, delta) {
@@ -290,6 +356,9 @@ export function updateAnimation(particle, data, changeDirection, destroyType, de
             else {
                 data.value -= velocity;
             }
+            break;
+        default:
+            break;
     }
     if (data.velocity && decay !== identity) {
         data.velocity *= decay;
@@ -301,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);
@@ -309,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;
@@ -365,3 +434,12 @@ export async function getItemsFromInitializer(container, map, initializers, forc
     }
     return res;
 }
+export async function getItemMapFromInitializer(container, map, initializers, force = false) {
+    let res = map.get(container);
+    if (!res || force) {
+        const entries = await Promise.all([...initializers.entries()].map(([key, initializer]) => initializer(container).then(item => [key, item])));
+        res = new Map(entries);
+        map.set(container, res);
+    }
+    return res;
+}

package/esm/exports.js

@@ -1,5 +1,4 @@
 export * from "./Core/Utils/Constants.js";
-export * from "./Core/Utils/Point.js";
 export * from "./Core/Utils/Ranges.js";
 export * from "./Core/Utils/Vectors.js";
 export * from "./Enums/Directions/MoveDirection.js";
@@ -28,8 +27,8 @@ 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/MoveAttract.js";
 export * from "./Options/Classes/Particles/Move/Move.js";
 export * from "./Options/Classes/Particles/Move/MoveAngle.js";
 export * from "./Options/Classes/Particles/Move/MoveCenter.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/engine",
-  "version": "4.0.0-alpha.8",
+  "version": "4.0.0-beta.0",
   "description": "Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.",
   "homepage": "https://particles.js.org",
   "scripts": {