@tsparticles/engine 4.0.0-alpha.2 → 4.0.0-alpha.3

package/umd/Core/Engine.js

@@ -50,6 +50,7 @@ var __importStar = (this && this.__importStar) || (function () {
     const EventType_js_1 = require("../Enums/Types/EventType.js");
     const LogUtils_js_1 = require("../Utils/LogUtils.js");
     const MathUtils_js_1 = require("../Utils/MathUtils.js");
+    const fullPercent = "100%";
     async function getItemsFromInitializer(container, map, initializers, force = false) {
         let res = map.get(container);
         if (!res || force) {
@@ -71,6 +72,7 @@ var __importStar = (this && this.__importStar) || (function () {
         return data.fallback;
     }
     const getCanvasFromContainer = (domContainer) => {
+        const documentSafe = (0, Utils_js_1.safeDocument)();
         let canvasEl;
         if (domContainer instanceof HTMLCanvasElement || domContainer.tagName.toLowerCase() === Constants_js_1.canvasTag) {
             canvasEl = domContainer;
@@ -83,28 +85,24 @@ var __importStar = (this && this.__importStar) || (function () {
                 canvasEl.dataset[Constants_js_1.generatedAttribute] = Constants_js_1.generatedFalse;
             }
             else {
-                canvasEl = (0, Utils_js_1.safeDocument)().createElement(Constants_js_1.canvasTag);
+                canvasEl = documentSafe.createElement(Constants_js_1.canvasTag);
                 canvasEl.dataset[Constants_js_1.generatedAttribute] = Constants_js_1.generatedTrue;
                 domContainer.appendChild(canvasEl);
             }
         }
-        const fullPercent = "100%";
-        if (!canvasEl.style.width) {
-            canvasEl.style.width = fullPercent;
-        }
-        if (!canvasEl.style.height) {
-            canvasEl.style.height = fullPercent;
-        }
+        canvasEl.style.width ||= fullPercent;
+        canvasEl.style.height ||= fullPercent;
         return canvasEl;
     }, getDomContainer = (id, source) => {
-        let domContainer = source ?? (0, Utils_js_1.safeDocument)().getElementById(id);
+        const documentSafe = (0, Utils_js_1.safeDocument)();
+        let domContainer = source ?? document.getElementById(id);
         if (domContainer) {
             return domContainer;
         }
-        domContainer = (0, Utils_js_1.safeDocument)().createElement("div");
+        domContainer = documentSafe.createElement("div");
         domContainer.id = id;
         domContainer.dataset[Constants_js_1.generatedAttribute] = Constants_js_1.generatedTrue;
-        (0, Utils_js_1.safeDocument)().body.append(domContainer);
+        documentSafe.body.append(domContainer);
         return domContainer;
     };
     class Engine {
@@ -141,7 +139,7 @@ var __importStar = (this && this.__importStar) || (function () {
             return this._domArray;
         }
         get version() {
-            return "4.0.0-alpha.2";
+            return "4.0.0-alpha.3";
         }
         addColorManager(manager) {
             this.colorManagers.set(manager.key, manager);
@@ -267,10 +265,32 @@ var __importStar = (this && this.__importStar) || (function () {
             if (this._initialized) {
                 return;
             }
-            for (const loadPromise of this._loadPromises) {
-                await loadPromise(this);
+            const executed = new Set(), allLoaders = new Set(this._loadPromises), stack = [...allLoaders];
+            while (stack.length) {
+                const loader = stack.shift();
+                if (!loader) {
+                    continue;
+                }
+                if (executed.has(loader)) {
+                    continue;
+                }
+                executed.add(loader);
+                const inner = [], origRegister = this.register.bind(this);
+                this.register = (...loaders) => {
+                    inner.push(...loaders);
+                    for (const loader of loaders) {
+                        allLoaders.add(loader);
+                    }
+                };
+                await loader(this);
+                this.register = origRegister;
+                stack.unshift(...inner);
+                this._loadPromises.delete(loader);
             }
             this._loadPromises.clear();
+            for (const loader of allLoaders) {
+                this._loadPromises.add(loader);
+            }
             this._initialized = true;
         }
         item(index) {

package/umd/Core/Interfaces/IParticleOpacityData.js

@@ -0,0 +1,12 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});

package/umd/Core/Interfaces/IParticleRotateData.js

@@ -0,0 +1,12 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});

package/umd/Core/Particle.js

@@ -51,51 +51,50 @@
     class Particle {
         constructor(engine, container) {
             this.container = container;
-            this._calcPosition = (container, position, zIndex, tryCount = Constants_js_1.defaultRetryCount) => {
-                const plugins = container.plugins.values();
-                for (const plugin of plugins) {
-                    const pluginPos = plugin.particlePosition?.(position, this);
-                    if (pluginPos) {
-                        return Vectors_js_1.Vector3d.create(pluginPos.x, pluginPos.y, zIndex);
+            this._cachedOpacityData = {
+                opacity: Constants_js_1.defaultOpacity,
+                strokeOpacity: Constants_js_1.defaultOpacity,
+            };
+            this._cachedPosition = Vectors_js_1.Vector3d.origin;
+            this._cachedRotateData = { sin: 0, cos: 0 };
+            this._cachedTransform = {
+                a: 1,
+                b: 0,
+                c: 0,
+                d: 1,
+            };
+            this._calcPosition = (position, zIndex) => {
+                let tryCount = Constants_js_1.defaultRetryCount, posVec = position ? Vectors_js_1.Vector3d.create(position.x, position.y, zIndex) : undefined;
+                const container = this.container, plugins = Array.from(container.plugins.values()), outModes = this.options.move.outModes, radius = this.getRadius(), canvasSize = container.canvas.size, abortController = new AbortController(), { signal } = abortController;
+                while (!signal.aborted) {
+                    for (const plugin of plugins) {
+                        const pluginPos = plugin.particlePosition?.(posVec, this);
+                        if (pluginPos) {
+                            return Vectors_js_1.Vector3d.create(pluginPos.x, pluginPos.y, zIndex);
+                        }
                     }
-                }
-                const canvasSize = container.canvas.size, exactPosition = (0, MathUtils_js_1.calcExactPositionOrRandomFromSize)({
-                    size: canvasSize,
-                    position: position,
-                }), pos = Vectors_js_1.Vector3d.create(exactPosition.x, exactPosition.y, zIndex), radius = this.getRadius(), outModes = this.options.move.outModes, fixHorizontal = (outMode) => {
-                    fixOutMode({
-                        outMode,
-                        checkModes: [OutMode_js_1.OutMode.bounce],
-                        coord: pos.x,
-                        maxCoord: container.canvas.size.width,
-                        setCb: (value) => (pos.x += value),
-                        radius,
-                    });
-                }, fixVertical = (outMode) => {
-                    fixOutMode({
-                        outMode,
-                        checkModes: [OutMode_js_1.OutMode.bounce],
-                        coord: pos.y,
-                        maxCoord: container.canvas.size.height,
-                        setCb: (value) => (pos.y += value),
-                        radius,
-                    });
-                };
-                fixHorizontal(outModes.left ?? outModes.default);
-                fixHorizontal(outModes.right ?? outModes.default);
-                fixVertical(outModes.top ?? outModes.default);
-                fixVertical(outModes.bottom ?? outModes.default);
-                let isValidPosition = true;
-                for (const plugin of plugins) {
-                    isValidPosition = plugin.checkParticlePosition?.(this, pos, tryCount);
-                    if (isValidPosition === false) {
-                        break;
+                    const exactPosition = (0, MathUtils_js_1.calcExactPositionOrRandomFromSize)({
+                        size: canvasSize,
+                        position: posVec,
+                    }), pos = Vectors_js_1.Vector3d.create(exactPosition.x, exactPosition.y, zIndex);
+                    this._fixHorizontal(pos, radius, outModes.left ?? outModes.default);
+                    this._fixHorizontal(pos, radius, outModes.right ?? outModes.default);
+                    this._fixVertical(pos, radius, outModes.top ?? outModes.default);
+                    this._fixVertical(pos, radius, outModes.bottom ?? outModes.default);
+                    let isValidPosition = true;
+                    for (const plugin of plugins) {
+                        isValidPosition = plugin.checkParticlePosition?.(this, pos, tryCount) ?? true;
+                        if (!isValidPosition) {
+                            break;
+                        }
                     }
+                    if (isValidPosition) {
+                        return pos;
+                    }
+                    tryCount += Constants_js_1.tryCountIncrement;
+                    posVec = undefined;
                 }
-                if (!isValidPosition) {
-                    return this._calcPosition(container, undefined, zIndex, tryCount + Constants_js_1.tryCountIncrement);
-                }
-                return pos;
+                return posVec;
             };
             this._calculateVelocity = () => {
                 const baseVelocity = (0, MathUtils_js_1.getParticleBaseVelocity)(this.direction), res = baseVelocity.copy(), moveOptions = this.options.move;
@@ -114,6 +113,26 @@
                 }
                 return res;
             };
+            this._fixHorizontal = (pos, radius, outMode) => {
+                fixOutMode({
+                    outMode,
+                    checkModes: [OutMode_js_1.OutMode.bounce],
+                    coord: pos.x,
+                    maxCoord: this.container.canvas.size.width,
+                    setCb: (value) => (pos.x += value),
+                    radius,
+                });
+            };
+            this._fixVertical = (pos, radius, outMode) => {
+                fixOutMode({
+                    outMode,
+                    checkModes: [OutMode_js_1.OutMode.bounce],
+                    coord: pos.y,
+                    maxCoord: this.container.canvas.size.height,
+                    setCb: (value) => (pos.y += value),
+                    radius,
+                });
+            };
             this._getRollColor = color => {
                 if (!color || !this.roll || (!this.backColor && !this.roll.alter)) {
                     return color;
@@ -132,7 +151,11 @@
             };
             this._initPosition = position => {
                 const container = this.container, zIndexValue = (0, MathUtils_js_1.getRangeValue)(this.options.zIndex.value);
-                this.position = this._calcPosition(container, position, (0, MathUtils_js_1.clamp)(zIndexValue, Constants_js_1.minZ, container.zLayers));
+                const initialPosition = this._calcPosition(position, (0, MathUtils_js_1.clamp)(zIndexValue, Constants_js_1.minZ, container.zLayers));
+                if (!initialPosition) {
+                    throw new Error("a valid position cannot be found for particle");
+                }
+                this.position = initialPosition;
                 this.initialPosition = this.position.copy();
                 const canvasSize = container.canvas.size;
                 this.moveCenter = {
@@ -192,19 +215,42 @@
         getMass() {
             return this.getRadius() ** Constants_js_1.squareExp * Math.PI * Constants_js_1.half;
         }
+        getOpacity() {
+            const zIndexOptions = this.options.zIndex, zIndexFactor = Constants_js_1.zIndexFactorOffset - this.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, opacity = this.bubble.opacity ?? (0, MathUtils_js_1.getRangeValue)(this.opacity?.value ?? Constants_js_1.defaultOpacity), strokeOpacity = this.strokeOpacity ?? opacity;
+            this._cachedOpacityData.opacity = opacity * zOpacityFactor;
+            this._cachedOpacityData.strokeOpacity = strokeOpacity * zOpacityFactor;
+            return this._cachedOpacityData;
+        }
         getPosition() {
-            return {
-                x: this.position.x + this.offset.x,
-                y: this.position.y + this.offset.y,
-                z: this.position.z,
-            };
+            this._cachedPosition.x = this.position.x + this.offset.x;
+            this._cachedPosition.y = this.position.y + this.offset.y;
+            this._cachedPosition.z = this.position.z;
+            return this._cachedPosition;
         }
         getRadius() {
             return this.bubble.radius ?? this.size.value;
         }
+        getRotateData() {
+            const angle = this.getAngle();
+            this._cachedRotateData.sin = Math.sin(angle);
+            this._cachedRotateData.cos = Math.cos(angle);
+            return this._cachedRotateData;
+        }
         getStrokeColor() {
             return this._getRollColor(this.bubble.color ?? (0, ColorUtils_js_1.getHslFromAnimation)(this.strokeColor));
         }
+        getTransformData(externalTransform) {
+            const rotateData = this.getRotateData(), rotating = this.isRotating;
+            this._cachedTransform.a = rotateData.cos * (externalTransform.a ?? Constants_js_1.defaultTransform.a);
+            this._cachedTransform.b = rotating
+                ? rotateData.sin * (externalTransform.b ?? Constants_js_1.identity)
+                : (externalTransform.b ?? Constants_js_1.defaultTransform.b);
+            this._cachedTransform.c = rotating
+                ? -rotateData.sin * (externalTransform.c ?? Constants_js_1.identity)
+                : (externalTransform.c ?? Constants_js_1.defaultTransform.c);
+            this._cachedTransform.d = rotateData.cos * (externalTransform.d ?? Constants_js_1.defaultTransform.d);
+            return this._cachedTransform;
+        }
         init(id, position, overrideOptions, group) {
             const container = this.container, engine = this._engine;
             this.id = id;

package/umd/Utils/CanvasUtils.js

@@ -53,15 +53,7 @@
         context.clearRect(Constants_js_1.originPoint.x, Constants_js_1.originPoint.y, dimension.width, dimension.height);
     }
     function drawParticle(data) {
-        const { container, context, particle, delta, colorStyles, radius, opacity, transform } = data, pos = particle.getPosition(), angle = particle.getAngle(), rotateData = {
-            sin: Math.sin(angle),
-            cos: Math.cos(angle),
-        }, rotating = particle.isRotating, transformData = {
-            a: rotateData.cos * (transform.a ?? Constants_js_1.defaultTransform.a),
-            b: rotating ? rotateData.sin * (transform.b ?? Constants_js_1.identity) : (transform.b ?? Constants_js_1.defaultTransform.b),
-            c: rotating ? -rotateData.sin * (transform.c ?? Constants_js_1.identity) : (transform.c ?? Constants_js_1.defaultTransform.c),
-            d: rotateData.cos * (transform.d ?? Constants_js_1.defaultTransform.d),
-        };
+        const { container, context, particle, delta, colorStyles, radius, opacity, transform } = data, pos = particle.getPosition(), transformData = particle.getTransformData(transform);
         context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, pos.x, pos.y);
         if (colorStyles.fill) {
             context.fillStyle = colorStyles.fill;
@@ -72,24 +64,25 @@
             context.strokeStyle = colorStyles.stroke;
         }
         const drawData = {
-            container,
             context,
             particle,
             radius,
             opacity,
             delta,
+            pixelRatio: container.retina.pixelRatio,
+            fill: particle.shapeFill,
+            stroke: strokeWidth > Constants_js_1.minStrokeWidth || !particle.shapeFill,
             transformData,
-            strokeWidth,
         };
-        drawBeforeEffect(drawData);
-        drawShapeBeforeDraw(drawData);
-        drawShape(drawData);
-        drawShapeAfterDraw(drawData);
-        drawAfterEffect(drawData);
+        drawBeforeEffect(container, drawData);
+        drawShapeBeforeDraw(container, drawData);
+        drawShape(container, drawData);
+        drawShapeAfterDraw(container, drawData);
+        drawAfterEffect(container, drawData);
         context.resetTransform();
     }
-    function drawAfterEffect(data) {
-        const { container, context, particle, radius, opacity, strokeWidth, delta, transformData } = data;
+    function drawAfterEffect(container, data) {
+        const { particle } = data;
         if (!particle.effect) {
             return;
         }
@@ -97,20 +90,10 @@
         if (!drawFunc) {
             return;
         }
-        drawFunc({
-            context,
-            particle,
-            radius,
-            opacity,
-            delta,
-            pixelRatio: container.retina.pixelRatio,
-            fill: particle.shapeFill,
-            stroke: strokeWidth > Constants_js_1.minStrokeWidth || !particle.shapeFill,
-            transformData: { ...transformData },
-        });
+        drawFunc(data);
     }
-    function drawBeforeEffect(data) {
-        const { container, context, particle, radius, opacity, strokeWidth, delta, transformData } = data;
+    function drawBeforeEffect(container, data) {
+        const { particle } = data;
         if (!particle.effect) {
             return;
         }
@@ -118,20 +101,10 @@
         if (!drawer?.drawBefore) {
             return;
         }
-        drawer.drawBefore({
-            context,
-            particle,
-            radius,
-            opacity,
-            delta,
-            pixelRatio: container.retina.pixelRatio,
-            fill: particle.shapeFill,
-            stroke: strokeWidth > Constants_js_1.minStrokeWidth || !particle.shapeFill,
-            transformData: { ...transformData },
-        });
+        drawer.drawBefore(data);
     }
-    function drawShape(data) {
-        const { container, context, particle, radius, opacity, delta, strokeWidth, transformData } = data;
+    function drawShape(container, data) {
+        const { context, particle, stroke } = data;
         if (!particle.shape) {
             return;
         }
@@ -140,29 +113,19 @@
             return;
         }
         context.beginPath();
-        drawer.draw({
-            context,
-            particle,
-            radius,
-            opacity,
-            delta,
-            pixelRatio: container.retina.pixelRatio,
-            fill: particle.shapeFill,
-            stroke: strokeWidth > Constants_js_1.minStrokeWidth || !particle.shapeFill,
-            transformData: { ...transformData },
-        });
+        drawer.draw(data);
         if (particle.shapeClose) {
             context.closePath();
         }
-        if (strokeWidth > Constants_js_1.minStrokeWidth) {
+        if (stroke) {
             context.stroke();
         }
         if (particle.shapeFill) {
             context.fill();
         }
     }
-    function drawShapeAfterDraw(data) {
-        const { container, context, particle, radius, opacity, strokeWidth, delta, transformData } = data;
+    function drawShapeAfterDraw(container, data) {
+        const { particle } = data;
         if (!particle.shape) {
             return;
         }
@@ -170,20 +133,10 @@
         if (!drawer?.afterDraw) {
             return;
         }
-        drawer.afterDraw({
-            context,
-            particle,
-            radius,
-            opacity,
-            delta,
-            pixelRatio: container.retina.pixelRatio,
-            fill: particle.shapeFill,
-            stroke: strokeWidth > Constants_js_1.minStrokeWidth || !particle.shapeFill,
-            transformData: { ...transformData },
-        });
+        drawer.afterDraw(data);
     }
-    function drawShapeBeforeDraw(data) {
-        const { container, context, particle, radius, opacity, strokeWidth, delta, transformData } = data;
+    function drawShapeBeforeDraw(container, data) {
+        const { particle } = data;
         if (!particle.shape) {
             return;
         }
@@ -191,17 +144,7 @@
         if (!drawer?.beforeDraw) {
             return;
         }
-        drawer.beforeDraw({
-            context,
-            particle,
-            radius,
-            opacity,
-            delta,
-            pixelRatio: container.retina.pixelRatio,
-            fill: particle.shapeFill,
-            stroke: strokeWidth > Constants_js_1.minStrokeWidth || !particle.shapeFill,
-            transformData: { ...transformData },
-        });
+        drawer.beforeDraw(data);
     }
     function drawPlugin(context, plugin, delta) {
         if (!plugin.draw) {

package/umd/Utils/ColorUtils.js

@@ -33,6 +33,17 @@
     const TypeUtils_js_1 = require("./TypeUtils.js");
     const AnimationStatus_js_1 = require("../Enums/AnimationStatus.js");
     const Utils_js_1 = require("./Utils.js");
+    const styleCache = new Map(), maxCacheSize = 1000;
+    function getCachedStyle(key, generator) {
+        let cached = styleCache.get(key);
+        if (!cached) {
+            cached = generator();
+            if (styleCache.size < maxCacheSize) {
+                styleCache.set(key, cached);
+            }
+        }
+        return cached;
+    }
     function stringToRgba(engine, input) {
         if (!input) {
             return;
@@ -185,7 +196,8 @@
         };
     }
     function getStyleFromRgb(color, hdr, opacity) {
-        return hdr ? getHdrStyleFromRgb(color, opacity) : getSdrStyleFromRgb(color, opacity);
+        const op = opacity ?? Constants_js_1.defaultOpacity, key = `rgb-${color.r.toString()}-${color.g.toString()}-${color.b.toString()}-${hdr ? "hdr" : "sdr"}-${op.toString()}`;
+        return getCachedStyle(key, () => (hdr ? getHdrStyleFromRgb(color, opacity) : getSdrStyleFromRgb(color, opacity)));
     }
     function getHdrStyleFromRgb(color, opacity) {
         return `color(display-p3 ${(color.r / Constants_js_1.rgbMax).toString()} ${(color.g / Constants_js_1.rgbMax).toString()} ${(color.b / Constants_js_1.rgbMax).toString()} / ${(opacity ?? Constants_js_1.defaultOpacity).toString()})`;
@@ -194,7 +206,8 @@
         return `rgba(${color.r.toString()}, ${color.g.toString()}, ${color.b.toString()}, ${(opacity ?? Constants_js_1.defaultOpacity).toString()})`;
     }
     function getStyleFromHsl(color, hdr, opacity) {
-        return hdr ? getHdrStyleFromHsl(color, opacity) : getSdrStyleFromHsl(color, opacity);
+        const op = opacity ?? Constants_js_1.defaultOpacity, key = `hsl-${color.h.toString()}-${color.s.toString()}-${color.l.toString()}-${hdr ? "hdr" : "sdr"}-${op.toString()}`;
+        return getCachedStyle(key, () => (hdr ? getHdrStyleFromHsl(color, opacity) : getSdrStyleFromHsl(color, opacity)));
     }
     function getHdrStyleFromHsl(color, opacity) {
         return getHdrStyleFromRgb(hslToRgb(color), opacity);

package/umd/Utils/MathUtils.js

@@ -173,9 +173,10 @@
         return calcPositionOrRandomFromSize({ size: data.size, position });
     }
     function calcExactPositionOrRandomFromSize(data) {
+        const { position, size } = data;
         return {
-            x: data.position?.x ?? getRandom() * data.size.width,
-            y: data.position?.y ?? getRandom() * data.size.height,
+            x: position?.x ?? getRandom() * size.width,
+            y: position?.y ?? getRandom() * size.height,
         };
     }
     function calcExactPositionOrRandomFromSizeRanged(data) {

package/umd/Utils/Utils.js

@@ -367,7 +367,7 @@
         const clonedStyle = safeDocument().createElement("div").style;
         for (const key in style) {
             const styleKey = style[key];
-            if (!Object.prototype.hasOwnProperty.call(style, key) || (0, TypeUtils_js_1.isNull)(styleKey)) {
+            if (!Object.hasOwn(style, key) || (0, TypeUtils_js_1.isNull)(styleKey)) {
                 continue;
             }
             const styleValue = style.getPropertyValue?.(styleKey);