@tsparticles/engine 3.0.3 → 3.2.0

package/cjs/Core/Utils/Constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.errorPrefix = exports.visibilityChangeEvent = exports.resizeEvent = exports.touchCancelEvent = exports.touchMoveEvent = exports.touchEndEvent = exports.touchStartEvent = exports.mouseMoveEvent = exports.mouseOutEvent = exports.mouseLeaveEvent = exports.mouseUpEvent = exports.mouseDownEvent = exports.generatedAttribute = void 0;
+exports.millisecondsToSeconds = exports.halfRandom = exports.percentDenominator = exports.errorPrefix = exports.visibilityChangeEvent = exports.resizeEvent = exports.touchCancelEvent = exports.touchMoveEvent = exports.touchEndEvent = exports.touchStartEvent = exports.mouseMoveEvent = exports.mouseOutEvent = exports.mouseLeaveEvent = exports.mouseUpEvent = exports.mouseDownEvent = exports.generatedAttribute = void 0;
 exports.generatedAttribute = "generated";
 exports.mouseDownEvent = "pointerdown";
 exports.mouseUpEvent = "pointerup";
@@ -14,3 +14,6 @@ exports.touchCancelEvent = "touchcancel";
 exports.resizeEvent = "resize";
 exports.visibilityChangeEvent = "visibilitychange";
 exports.errorPrefix = "tsParticles - Error";
+exports.percentDenominator = 100;
+exports.halfRandom = 0.5;
+exports.millisecondsToSeconds = 1000;

package/cjs/Core/Utils/EventListeners.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.EventListeners = void 0;
 const Utils_js_1 = require("../../Utils/Utils.js");
 const Constants_js_1 = require("./Constants.js");
+const double = 2;
 function manageListener(element, event, handler, add, options) {
     if (add) {
         let addOptions = { passive: true };
@@ -35,13 +36,14 @@ class EventListeners {
                 (0, Utils_js_1.executeOnSingleOrMultiple)(onClick.mode, (mode) => this.container.handleClickMode(mode));
             }
             if (e.type === "touchend") {
-                setTimeout(() => this._mouseTouchFinish(), 500);
+                const touchDelay = 500;
+                setTimeout(() => this._mouseTouchFinish(), touchDelay);
             }
         };
         this._handleThemeChange = (e) => {
             const mediaEvent = e, container = this.container, options = container.options, defaultThemes = options.defaultThemes, themeName = mediaEvent.matches ? defaultThemes.dark : defaultThemes.light, theme = options.themes.find((theme) => theme.name === themeName);
             if (theme && theme.default.auto) {
-                container.loadTheme(themeName);
+                void container.loadTheme(themeName);
             }
         };
         this._handleVisibilityChange = () => {
@@ -56,7 +58,7 @@ class EventListeners {
             }
             else {
                 container.pageHidden = false;
-                if (container.getAnimationStatus()) {
+                if (container.animationStatus) {
                     container.play(true);
                 }
                 else {
@@ -64,15 +66,16 @@ class EventListeners {
                 }
             }
         };
-        this._handleWindowResize = async () => {
+        this._handleWindowResize = () => {
             if (this._resizeTimeout) {
                 clearTimeout(this._resizeTimeout);
                 delete this._resizeTimeout;
             }
-            this._resizeTimeout = setTimeout(async () => {
+            const handleResize = async () => {
                 const canvas = this.container.canvas;
-                canvas && (await canvas.windowResize());
-            }, this.container.actualOptions.interactivity.events.resize.delay * 1000);
+                await canvas?.windowResize();
+            };
+            this._resizeTimeout = setTimeout(() => void handleResize(), this.container.actualOptions.interactivity.events.resize.delay * Constants_js_1.millisecondsToSeconds);
         };
         this._manageInteractivityListeners = (mouseLeaveTmpEvent, add) => {
             const handlers = this._handlers, container = this.container, options = container.actualOptions;
@@ -158,12 +161,12 @@ class EventListeners {
                 delete this._resizeObserver;
             }
             else if (!this._resizeObserver && add && canvasEl) {
-                this._resizeObserver = new ResizeObserver(async (entries) => {
+                this._resizeObserver = new ResizeObserver((entries) => {
                     const entry = entries.find((e) => e.target === canvasEl);
                     if (!entry) {
                         return;
                     }
-                    await this._handleWindowResize();
+                    this._handleWindowResize();
                 });
                 this._resizeObserver.observe(canvasEl);
             }
@@ -214,7 +217,7 @@ class EventListeners {
         };
         this._mouseTouchMove = (e) => {
             const container = this.container, options = container.actualOptions, interactivity = container.interactivity, canvasEl = container.canvas.element;
-            if (!interactivity || !interactivity.element) {
+            if (!interactivity?.element) {
                 return;
             }
             interactivity.mouse.inside = true;
@@ -236,8 +239,8 @@ class EventListeners {
                     if (source && target && canvasEl) {
                         const sourceRect = source.getBoundingClientRect(), targetRect = target.getBoundingClientRect(), canvasRect = canvasEl.getBoundingClientRect();
                         pos = {
-                            x: mouseEvent.offsetX + 2 * sourceRect.left - (targetRect.left + canvasRect.left),
-                            y: mouseEvent.offsetY + 2 * sourceRect.top - (targetRect.top + canvasRect.top),
+                            x: mouseEvent.offsetX + double * sourceRect.left - (targetRect.left + canvasRect.left),
+                            y: mouseEvent.offsetY + double * sourceRect.top - (targetRect.top + canvasRect.top),
                         };
                     }
                     else {
@@ -257,10 +260,10 @@ class EventListeners {
             else {
                 this._canPush = e.type !== "touchmove";
                 if (canvasEl) {
-                    const touchEvent = e, lastTouch = touchEvent.touches[touchEvent.touches.length - 1], canvasRect = canvasEl.getBoundingClientRect();
+                    const touchEvent = e, lengthOffset = 1, lastTouch = touchEvent.touches[touchEvent.touches.length - lengthOffset], canvasRect = canvasEl.getBoundingClientRect(), defaultCoordinate = 0;
                     pos = {
-                        x: lastTouch.clientX - (canvasRect.left ?? 0),
-                        y: lastTouch.clientY - (canvasRect.top ?? 0),
+                        x: lastTouch.clientX - (canvasRect.left ?? defaultCoordinate),
+                        y: lastTouch.clientY - (canvasRect.top ?? defaultCoordinate),
                     };
                 }
             }

package/cjs/Core/Utils/ExternalInteractorBase.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExternalInteractorBase = void 0;
 class ExternalInteractorBase {
     constructor(container) {
-        this.container = container;
         this.type = "external";
+        this.container = container;
     }
 }
 exports.ExternalInteractorBase = ExternalInteractorBase;

package/cjs/Core/Utils/InteractionManager.js

@@ -5,21 +5,24 @@ class InteractionManager {
     constructor(engine, container) {
         this.container = container;
         this._engine = engine;
-        this._interactors = engine.getInteractors(this.container, true);
+        this._interactors = [];
         this._externalInteractors = [];
         this._particleInteractors = [];
     }
     async externalInteract(delta) {
         for (const interactor of this._externalInteractors) {
-            interactor.isEnabled() && (await interactor.interact(delta));
+            if (interactor.isEnabled()) {
+                await interactor.interact(delta);
+            }
         }
     }
     handleClickMode(mode) {
         for (const interactor of this._externalInteractors) {
-            interactor.handleClickMode && interactor.handleClickMode(mode);
+            interactor.handleClickMode?.(mode);
         }
     }
-    init() {
+    async init() {
+        this._interactors = await this._engine.getInteractors(this.container, true);
         this._externalInteractors = [];
         this._particleInteractors = [];
         for (const interactor of this._interactors) {
@@ -39,15 +42,21 @@ class InteractionManager {
             interactor.clear(particle, delta);
         }
         for (const interactor of this._particleInteractors) {
-            interactor.isEnabled(particle) && (await interactor.interact(particle, delta));
+            if (interactor.isEnabled(particle)) {
+                await interactor.interact(particle, delta);
+            }
         }
     }
-    async reset(particle) {
+    reset(particle) {
         for (const interactor of this._externalInteractors) {
-            interactor.isEnabled() && interactor.reset(particle);
+            if (interactor.isEnabled()) {
+                interactor.reset(particle);
+            }
         }
         for (const interactor of this._particleInteractors) {
-            interactor.isEnabled(particle) && interactor.reset(particle);
+            if (interactor.isEnabled(particle)) {
+                interactor.reset(particle);
+            }
         }
     }
 }

package/cjs/Core/Utils/ParticlesInteractorBase.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ParticlesInteractorBase = void 0;
 class ParticlesInteractorBase {
     constructor(container) {
-        this.container = container;
         this.type = "particles";
+        this.container = container;
     }
 }
 exports.ParticlesInteractorBase = ParticlesInteractorBase;

package/cjs/Core/Utils/QuadTree.js

@@ -4,14 +4,16 @@ exports.QuadTree = void 0;
 const Circle_js_1 = require("./Circle.js");
 const Rectangle_js_1 = require("./Rectangle.js");
 const NumberUtils_js_1 = require("../../Utils/NumberUtils.js");
+const half = 0.5, double = 2, subdivideCount = 4;
 class QuadTree {
     constructor(rectangle, capacity) {
         this.rectangle = rectangle;
         this.capacity = capacity;
         this._subdivide = () => {
             const { x, y } = this.rectangle.position, { width, height } = this.rectangle.size, { capacity } = this;
-            for (let i = 0; i < 4; i++) {
-                this._subs.push(new QuadTree(new Rectangle_js_1.Rectangle(x + width * 0.5 * (i % 2), y + height * 0.5 * (Math.round(i * 0.5) - (i % 2)), width * 0.5, height * 0.5), capacity));
+            for (let i = 0; i < subdivideCount; i++) {
+                const fixedIndex = i % double;
+                this._subs.push(new QuadTree(new Rectangle_js_1.Rectangle(x + width * half * fixedIndex, y + height * half * (Math.round(i * half) - fixedIndex), width * half, height * half), capacity));
             }
             this._divided = true;
         };
@@ -33,7 +35,7 @@ class QuadTree {
         return this._subs.some((sub) => sub.insert(point));
     }
     query(range, check, found) {
-        const res = found || [];
+        const res = found ?? [];
         if (!range.intersects(this.rectangle)) {
             return [];
         }

package/cjs/Core/Utils/Vector.js

@@ -2,12 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Vector = void 0;
 const Vector3d_js_1 = require("./Vector3d.js");
+const origin = {
+    x: 0,
+    y: 0,
+    z: 0,
+};
 class Vector extends Vector3d_js_1.Vector3d {
     constructor(xOrCoords, y) {
-        super(xOrCoords, y, 0);
+        super(xOrCoords, y, origin.z);
     }
     static get origin() {
-        return Vector.create(0, 0);
+        return Vector.create(origin.x, origin.y);
     }
     static clone(source) {
         return Vector.create(source.x, source.y);

package/cjs/Core/Utils/Vector3d.js

@@ -3,6 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Vector3d = void 0;
 const Constants_js_1 = require("./Constants.js");
 const Utils_js_1 = require("../../Utils/Utils.js");
+const origin = {
+    x: 0,
+    y: 0,
+    z: 0,
+}, squareExp = 2, inverseFactorNumerator = 1.0;
 class Vector3d {
     constructor(xOrCoords, y, z) {
         this._updateFromAngle = (angle, length) => {
@@ -13,19 +18,19 @@ class Vector3d {
             this.x = xOrCoords.x;
             this.y = xOrCoords.y;
             const coords3d = xOrCoords;
-            this.z = coords3d.z ? coords3d.z : 0;
+            this.z = coords3d.z ? coords3d.z : origin.z;
         }
         else if (xOrCoords !== undefined && y !== undefined) {
             this.x = xOrCoords;
             this.y = y;
-            this.z = z ?? 0;
+            this.z = z ?? origin.z;
         }
         else {
             throw new Error(`${Constants_js_1.errorPrefix} Vector3d not initialized correctly`);
         }
     }
     static get origin() {
-        return Vector3d.create(0, 0, 0);
+        return Vector3d.create(origin.x, origin.y, origin.z);
     }
     get angle() {
         return Math.atan2(this.y, this.x);
@@ -71,7 +76,7 @@ class Vector3d {
         this.z /= n;
     }
     getLengthSq() {
-        return this.x ** 2 + this.y ** 2;
+        return this.x ** squareExp + this.y ** squareExp;
     }
     mult(n) {
         return Vector3d.create(this.x * n, this.y * n, this.z * n);
@@ -82,19 +87,19 @@ class Vector3d {
         this.z *= n;
     }
     normalize() {
-        const length = this.length;
-        if (length != 0) {
-            this.multTo(1.0 / length);
+        const length = this.length, noLength = 0;
+        if (length != noLength) {
+            this.multTo(inverseFactorNumerator / length);
         }
     }
     rotate(angle) {
-        return Vector3d.create(this.x * Math.cos(angle) - this.y * Math.sin(angle), this.x * Math.sin(angle) + this.y * Math.cos(angle), 0);
+        return Vector3d.create(this.x * Math.cos(angle) - this.y * Math.sin(angle), this.x * Math.sin(angle) + this.y * Math.cos(angle), origin.z);
     }
     setTo(c) {
         this.x = c.x;
         this.y = c.y;
         const v3d = c;
-        this.z = v3d.z ? v3d.z : 0;
+        this.z = v3d.z ? v3d.z : origin.z;
     }
     sub(v) {
         return Vector3d.create(this.x - v.x, this.y - v.y, this.z - v.z);

package/cjs/Options/Classes/BackgroundMask/BackgroundMask.js

@@ -18,7 +18,7 @@ class BackgroundMask {
         }
         if (data.cover !== undefined) {
             const cover = data.cover, color = ((0, Utils_js_1.isString)(data.cover) ? { color: data.cover } : data.cover);
-            this.cover.load(cover.color !== undefined ? cover : { color: color });
+            this.cover.load(cover.color !== undefined || cover.image !== undefined ? cover : { color: color });
         }
         if (data.enable !== undefined) {
             this.enable = data.enable;

package/cjs/Options/Classes/BackgroundMask/BackgroundMaskCover.js

@@ -4,8 +4,6 @@ exports.BackgroundMaskCover = void 0;
 const OptionsColor_js_1 = require("../OptionsColor.js");
 class BackgroundMaskCover {
     constructor() {
-        this.color = new OptionsColor_js_1.OptionsColor();
-        this.color.value = "#fff";
         this.opacity = 1;
     }
     load(data) {
@@ -15,6 +13,9 @@ class BackgroundMaskCover {
         if (data.color !== undefined) {
             this.color = OptionsColor_js_1.OptionsColor.create(this.color, data.color);
         }
+        if (data.image !== undefined) {
+            this.image = data.image;
+        }
         if (data.opacity !== undefined) {
             this.opacity = data.opacity;
         }

package/cjs/Options/Classes/ManualParticle.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ManualParticle = void 0;
 const Utils_js_1 = require("../../Utils/Utils.js");
+const defaultPosition = 50;
 class ManualParticle {
     load(data) {
         if (!data) {
@@ -9,8 +10,8 @@ class ManualParticle {
         }
         if (data.position) {
             this.position = {
-                x: data.position.x ?? 50,
-                y: data.position.y ?? 50,
+                x: data.position.x ?? defaultPosition,
+                y: data.position.y ?? defaultPosition,
                 mode: data.position.mode ?? "percent",
             };
         }

package/cjs/Options/Classes/Options.js

@@ -56,6 +56,9 @@ class Options {
         if (data.clear !== undefined) {
             this.clear = data.clear;
         }
+        if (data.key !== undefined) {
+            this.key = data.key;
+        }
         if (data.name !== undefined) {
             this.name = data.name;
         }

package/cjs/Utils/CanvasUtils.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.alterHsl = exports.drawParticlePlugin = exports.drawPlugin = exports.drawShapeAfterDraw = exports.drawShape = exports.drawEffect = exports.drawParticle = exports.clear = exports.paintImage = exports.paintBase = exports.drawLine = void 0;
 const ColorUtils_js_1 = require("./ColorUtils.js");
+const origin = { x: 0, y: 0 };
 function drawLine(context, begin, end) {
     context.beginPath();
     context.moveTo(begin.x, begin.y);
@@ -11,7 +12,7 @@ function drawLine(context, begin, end) {
 exports.drawLine = drawLine;
 function paintBase(context, dimension, baseColor) {
     context.fillStyle = baseColor ?? "rgba(0,0,0,0)";
-    context.fillRect(0, 0, dimension.width, dimension.height);
+    context.fillRect(origin.x, origin.y, dimension.width, dimension.height);
 }
 exports.paintBase = paintBase;
 function paintImage(context, dimension, image, opacity) {
@@ -19,24 +20,23 @@ function paintImage(context, dimension, image, opacity) {
         return;
     }
     context.globalAlpha = opacity;
-    context.drawImage(image, 0, 0, dimension.width, dimension.height);
+    context.drawImage(image, origin.x, origin.y, dimension.width, dimension.height);
     context.globalAlpha = 1;
 }
 exports.paintImage = paintImage;
 function clear(context, dimension) {
-    context.clearRect(0, 0, dimension.width, dimension.height);
+    context.clearRect(origin.x, origin.y, dimension.width, dimension.height);
 }
 exports.clear = clear;
-function drawParticle(data) {
-    const { container, context, particle, delta, colorStyles, backgroundMask, composite, radius, opacity, shadow, transform, } = data;
-    const pos = particle.getPosition(), angle = particle.rotation + (particle.pathRotation ? particle.velocity.angle : 0), rotateData = {
+async function drawParticle(data) {
+    const { container, context, particle, delta, colorStyles, backgroundMask, composite, radius, opacity, shadow, transform, } = data, pos = particle.getPosition(), defaultAngle = 0, angle = particle.rotation + (particle.pathRotation ? particle.velocity.angle : defaultAngle), rotateData = {
         sin: Math.sin(angle),
         cos: Math.cos(angle),
-    }, transformData = {
-        a: rotateData.cos * (transform.a ?? 1),
-        b: rotateData.sin * (transform.b ?? 1),
-        c: -rotateData.sin * (transform.c ?? 1),
-        d: rotateData.cos * (transform.d ?? 1),
+    }, defaultTransformFactor = 1, transformData = {
+        a: rotateData.cos * (transform.a ?? defaultTransformFactor),
+        b: rotateData.sin * (transform.b ?? defaultTransformFactor),
+        c: -rotateData.sin * (transform.c ?? defaultTransformFactor),
+        d: rotateData.cos * (transform.d ?? defaultTransformFactor),
     };
     context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, pos.x, pos.y);
     if (backgroundMask) {
@@ -52,30 +52,29 @@ function drawParticle(data) {
     if (colorStyles.fill) {
         context.fillStyle = colorStyles.fill;
     }
-    const strokeWidth = particle.strokeWidth ?? 0;
+    const minStrokeWidth = 0, strokeWidth = particle.strokeWidth ?? minStrokeWidth;
     context.lineWidth = strokeWidth;
     if (colorStyles.stroke) {
         context.strokeStyle = colorStyles.stroke;
     }
-    const drawData = { container, context, particle, radius, opacity, delta, transformData };
-    context.beginPath();
-    drawShape(drawData);
-    if (particle.shapeClose) {
-        context.closePath();
-    }
-    if (strokeWidth > 0) {
-        context.stroke();
-    }
-    if (particle.shapeFill) {
-        context.fill();
-    }
-    drawShapeAfterDraw(drawData);
-    drawEffect(drawData);
+    const drawData = {
+        container,
+        context,
+        particle,
+        radius,
+        opacity,
+        delta,
+        transformData,
+        strokeWidth,
+    };
+    await drawShape(drawData);
+    await drawShapeAfterDraw(drawData);
+    await drawEffect(drawData);
     context.globalCompositeOperation = "source-over";
-    context.setTransform(1, 0, 0, 1, 0, 0);
+    context.resetTransform();
 }
 exports.drawParticle = drawParticle;
-function drawEffect(data) {
+async function drawEffect(data) {
     const { container, context, particle, radius, opacity, delta, transformData } = data;
     if (!particle.effect) {
         return;
@@ -84,7 +83,7 @@ function drawEffect(data) {
     if (!drawer) {
         return;
     }
-    drawer.draw({
+    await drawer.draw({
         context,
         particle,
         radius,
@@ -95,8 +94,8 @@ function drawEffect(data) {
     });
 }
 exports.drawEffect = drawEffect;
-function drawShape(data) {
-    const { container, context, particle, radius, opacity, delta, transformData } = data;
+async function drawShape(data) {
+    const { container, context, particle, radius, opacity, delta, strokeWidth, transformData } = data, minStrokeWidth = 0;
     if (!particle.shape) {
         return;
     }
@@ -104,7 +103,8 @@ function drawShape(data) {
     if (!drawer) {
         return;
     }
-    drawer.draw({
+    context.beginPath();
+    await drawer.draw({
         context,
         particle,
         radius,
@@ -113,18 +113,27 @@ function drawShape(data) {
         pixelRatio: container.retina.pixelRatio,
         transformData: { ...transformData },
     });
+    if (particle.shapeClose) {
+        context.closePath();
+    }
+    if (strokeWidth > minStrokeWidth) {
+        context.stroke();
+    }
+    if (particle.shapeFill) {
+        context.fill();
+    }
 }
 exports.drawShape = drawShape;
-function drawShapeAfterDraw(data) {
+async function drawShapeAfterDraw(data) {
     const { container, context, particle, radius, opacity, delta, transformData } = data;
     if (!particle.shape) {
         return;
     }
     const drawer = container.shapeDrawers.get(particle.shape);
-    if (!drawer || !drawer.afterDraw) {
+    if (!drawer?.afterDraw) {
         return;
     }
-    drawer.afterDraw({
+    await drawer.afterDraw({
         context,
         particle,
         radius,
@@ -135,25 +144,26 @@ function drawShapeAfterDraw(data) {
     });
 }
 exports.drawShapeAfterDraw = drawShapeAfterDraw;
-function drawPlugin(context, plugin, delta) {
+async function drawPlugin(context, plugin, delta) {
     if (!plugin.draw) {
         return;
     }
-    plugin.draw(context, delta);
+    await plugin.draw(context, delta);
 }
 exports.drawPlugin = drawPlugin;
-function drawParticlePlugin(context, plugin, particle, delta) {
+async function drawParticlePlugin(context, plugin, particle, delta) {
     if (!plugin.drawParticle) {
         return;
     }
-    plugin.drawParticle(context, particle, delta);
+    await plugin.drawParticle(context, particle, delta);
 }
 exports.drawParticlePlugin = drawParticlePlugin;
 function alterHsl(color, type, value) {
+    const lFactor = 1;
     return {
         h: color.h,
         s: color.s,
-        l: color.l + (type === "darken" ? -1 : 1) * value,
+        l: color.l + (type === "darken" ? -lFactor : lFactor) * value,
     };
 }
 exports.alterHsl = alterHsl;