tsparticles 1.42.2 → 1.43.0

package/umd/Core/Utils/EventListeners.js

@@ -4,14 +4,14 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "../../Utils", "./Constants"], factory);
+        define(["require", "exports", "./Constants", "../../Utils/Utils"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.EventListeners = void 0;
-    const Utils_1 = require("../../Utils");
     const Constants_1 = require("./Constants");
+    const Utils_1 = require("../../Utils/Utils");
     function manageListener(element, event, handler, add, options) {
         if (add) {
             let addOptions = { passive: true };
@@ -54,9 +54,7 @@
         }
         manageListeners(add) {
             var _a;
-            const container = this.container;
-            const options = container.actualOptions;
-            const detectType = options.interactivity.detectsOn;
+            const container = this.container, options = container.actualOptions, detectType = options.interactivity.detectsOn;
             let mouseLeaveEvent = Constants_1.Constants.mouseLeaveEvent;
             if (detectType === "window") {
                 container.interactivity.element = window;
@@ -142,8 +140,7 @@
             this.resizeTimeout = setTimeout(async () => { var _a; return await ((_a = this.container.canvas) === null || _a === void 0 ? void 0 : _a.windowResize()); }, 500);
         }
         handleVisibilityChange() {
-            const container = this.container;
-            const options = container.actualOptions;
+            const container = this.container, options = container.actualOptions;
             this.mouseTouchFinish();
             if (!options.pauseOnBlur) {
                 return;
@@ -172,9 +169,8 @@
         }
         mouseTouchMove(e) {
             var _a, _b, _c, _d, _e, _f, _g;
-            const container = this.container;
-            const options = container.actualOptions;
-            if (((_a = container.interactivity) === null || _a === void 0 ? void 0 : _a.element) === undefined) {
+            const container = this.container, options = container.actualOptions;
+            if (!((_a = container.interactivity) === null || _a === void 0 ? void 0 : _a.element)) {
                 return;
             }
             container.interactivity.mouse.inside = true;
@@ -241,7 +237,7 @@
         }
         mouseTouchFinish() {
             const interactivity = this.container.interactivity;
-            if (interactivity === undefined) {
+            if (!interactivity) {
                 return;
             }
             const mouse = interactivity.mouse;
@@ -253,21 +249,20 @@
             mouse.clicking = false;
         }
         mouseTouchClick(e) {
-            const container = this.container;
-            const options = container.actualOptions;
-            const mouse = container.interactivity.mouse;
+            const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse;
             mouse.inside = true;
             let handled = false;
             const mousePosition = mouse.position;
-            if (mousePosition === undefined || !options.interactivity.events.onClick.enable) {
+            if (!mousePosition || !options.interactivity.events.onClick.enable) {
                 return;
             }
             for (const [, plugin] of container.plugins) {
-                if (plugin.clickPositionValid !== undefined) {
-                    handled = plugin.clickPositionValid(mousePosition);
-                    if (handled) {
-                        break;
-                    }
+                if (!plugin.clickPositionValid) {
+                    continue;
+                }
+                handled = plugin.clickPositionValid(mousePosition);
+                if (handled) {
+                    break;
                 }
             }
             if (!handled) {
@@ -276,19 +271,16 @@
             mouse.clicking = false;
         }
         doMouseTouchClick(e) {
-            const container = this.container;
-            const options = container.actualOptions;
+            const container = this.container, options = container.actualOptions;
             if (this.canPush) {
                 const mousePos = container.interactivity.mouse.position;
-                if (mousePos) {
-                    container.interactivity.mouse.clickPosition = {
-                        x: mousePos.x,
-                        y: mousePos.y,
-                    };
-                }
-                else {
+                if (!mousePos) {
                     return;
                 }
+                container.interactivity.mouse.clickPosition = {
+                    x: mousePos.x,
+                    y: mousePos.y,
+                };
                 container.interactivity.mouse.clickTime = new Date().getTime();
                 const onClick = options.interactivity.events.onClick;
                 if (onClick.mode instanceof Array) {
@@ -305,78 +297,15 @@
             }
         }
         handleThemeChange(e) {
-            const mediaEvent = e;
-            const themeName = mediaEvent.matches
+            const mediaEvent = e, themeName = mediaEvent.matches
                 ? this.container.options.defaultDarkTheme
-                : this.container.options.defaultLightTheme;
-            const theme = this.container.options.themes.find((theme) => theme.name === themeName);
+                : this.container.options.defaultLightTheme, theme = this.container.options.themes.find((theme) => theme.name === themeName);
             if (theme && theme.default.auto) {
                 this.container.loadTheme(themeName);
             }
         }
         handleClickMode(mode) {
-            const container = this.container;
-            const options = container.actualOptions;
-            const pushNb = options.interactivity.modes.push.quantity;
-            const removeNb = options.interactivity.modes.remove.quantity;
-            switch (mode) {
-                case "push": {
-                    if (pushNb > 0) {
-                        const pushOptions = options.interactivity.modes.push;
-                        const group = (0, Utils_1.itemFromArray)([undefined, ...pushOptions.groups]);
-                        const groupOptions = group !== undefined ? container.actualOptions.particles.groups[group] : undefined;
-                        container.particles.push(pushNb, container.interactivity.mouse, groupOptions, group);
-                    }
-                    break;
-                }
-                case "remove":
-                    container.particles.removeQuantity(removeNb);
-                    break;
-                case "bubble":
-                    container.bubble.clicking = true;
-                    break;
-                case "repulse":
-                    container.repulse.clicking = true;
-                    container.repulse.count = 0;
-                    for (const particle of container.repulse.particles) {
-                        particle.velocity.setTo(particle.initialVelocity);
-                    }
-                    container.repulse.particles = [];
-                    container.repulse.finish = false;
-                    setTimeout(() => {
-                        if (!container.destroyed) {
-                            container.repulse.clicking = false;
-                        }
-                    }, options.interactivity.modes.repulse.duration * 1000);
-                    break;
-                case "attract":
-                    container.attract.clicking = true;
-                    container.attract.count = 0;
-                    for (const particle of container.attract.particles) {
-                        particle.velocity.setTo(particle.initialVelocity);
-                    }
-                    container.attract.particles = [];
-                    container.attract.finish = false;
-                    setTimeout(() => {
-                        if (!container.destroyed) {
-                            container.attract.clicking = false;
-                        }
-                    }, options.interactivity.modes.attract.duration * 1000);
-                    break;
-                case "pause":
-                    if (container.getAnimationStatus()) {
-                        container.pause();
-                    }
-                    else {
-                        container.play();
-                    }
-                    break;
-            }
-            for (const [, plugin] of container.plugins) {
-                if (plugin.handleClickMode) {
-                    plugin.handleClickMode(mode);
-                }
-            }
+            this.container.handleClickMode(mode);
         }
     }
     exports.EventListeners = EventListeners;

package/umd/Core/Utils/FrameManager.js

@@ -24,8 +24,7 @@
                     return;
                 }
                 (_a = container.lastFrameTime) !== null && _a !== void 0 ? _a : (container.lastFrameTime = timestamp);
-                const deltaValue = timestamp - container.lastFrameTime;
-                const delta = {
+                const deltaValue = timestamp - container.lastFrameTime, delta = {
                     value: deltaValue,
                     factor: (60 * deltaValue) / 1000,
                 };

package/umd/Core/Utils/InteractionManager.js

@@ -63,6 +63,13 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
                 }
             }
         }
+        handleClickMode(mode) {
+            for (const interactor of this.externalInteractors) {
+                if (interactor.handleClickMode) {
+                    interactor.handleClickMode(mode);
+                }
+            }
+        }
     }
     exports.InteractionManager = InteractionManager;
     _InteractionManager_engine = new WeakMap();

package/umd/Core/Utils/Plugins.js

@@ -23,8 +23,10 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
             __classPrivateFieldSet(this, _Plugins_engine, engine, "f");
             this.plugins = [];
             this.interactorsInitializers = new Map();
+            this.moversInitializers = new Map();
             this.updatersInitializers = new Map();
             this.interactors = new Map();
+            this.movers = new Map();
             this.updaters = new Map();
             this.presets = new Map();
             this.drawers = new Map();
@@ -61,14 +63,14 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
                 this.presets.set(presetKey, options);
             }
         }
+        getShapeDrawer(type) {
+            return this.drawers.get(type);
+        }
         addShapeDrawer(type, drawer) {
             if (!this.getShapeDrawer(type)) {
                 this.drawers.set(type, drawer);
             }
         }
-        getShapeDrawer(type) {
-            return this.drawers.get(type);
-        }
         getSupportedShapes() {
             return this.drawers.keys();
         }
@@ -102,6 +104,17 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
         addParticleUpdater(name, initUpdater) {
             this.updatersInitializers.set(name, initUpdater);
         }
+        getMovers(container, force = false) {
+            let res = this.movers.get(container);
+            if (!res || force) {
+                res = [...this.moversInitializers.values()].map((t) => t(container));
+                this.movers.set(container, res);
+            }
+            return res;
+        }
+        addParticleMover(name, initMover) {
+            this.moversInitializers.set(name, initMover);
+        }
     }
     exports.Plugins = Plugins;
     _Plugins_engine = new WeakMap();

package/umd/Core/Utils/QuadTree.js

@@ -4,7 +4,7 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./Circle", "./CircleWarp", "./Rectangle", "../../Utils"], factory);
+        define(["require", "exports", "./Circle", "./CircleWarp", "./Rectangle", "../../Utils/NumberUtils"], factory);
     }
 })(function (require, exports) {
     "use strict";
@@ -13,7 +13,7 @@
     const Circle_1 = require("./Circle");
     const CircleWarp_1 = require("./CircleWarp");
     const Rectangle_1 = require("./Rectangle");
-    const Utils_1 = require("../../Utils");
+    const NumberUtils_1 = require("../../Utils/NumberUtils");
     class QuadTree {
         constructor(rectangle, capacity) {
             this.rectangle = rectangle;
@@ -21,18 +21,6 @@
             this.points = [];
             this.divided = false;
         }
-        subdivide() {
-            const x = this.rectangle.position.x;
-            const y = this.rectangle.position.y;
-            const w = this.rectangle.size.width;
-            const h = this.rectangle.size.height;
-            const capacity = this.capacity;
-            this.northEast = new QuadTree(new Rectangle_1.Rectangle(x, y, w / 2, h / 2), capacity);
-            this.northWest = new QuadTree(new Rectangle_1.Rectangle(x + w / 2, y, w / 2, h / 2), capacity);
-            this.southEast = new QuadTree(new Rectangle_1.Rectangle(x, y + h / 2, w / 2, h / 2), capacity);
-            this.southWest = new QuadTree(new Rectangle_1.Rectangle(x + w / 2, y + h / 2, w / 2, h / 2), capacity);
-            this.divided = true;
-        }
         insert(point) {
             var _a, _b, _c, _d, _e;
             if (!this.rectangle.contains(point.position)) {
@@ -54,8 +42,7 @@
             return this.query(new Circle_1.Circle(position.x, position.y, radius));
         }
         queryCircleWarp(position, radius, containerOrSize) {
-            const container = containerOrSize;
-            const size = containerOrSize;
+            const container = containerOrSize, size = containerOrSize;
             return this.query(new CircleWarp_1.CircleWarp(position.x, position.y, radius, container.canvas !== undefined ? container.canvas.size : size));
         }
         queryRectangle(position, size) {
@@ -67,22 +54,28 @@
             if (!range.intersects(this.rectangle)) {
                 return [];
             }
-            else {
-                for (const p of this.points) {
-                    if (!range.contains(p.position) && (0, Utils_1.getDistance)(range.position, p.position) > p.particle.getRadius()) {
-                        continue;
-                    }
-                    res.push(p.particle);
-                }
-                if (this.divided) {
-                    (_a = this.northEast) === null || _a === void 0 ? void 0 : _a.query(range, res);
-                    (_b = this.northWest) === null || _b === void 0 ? void 0 : _b.query(range, res);
-                    (_c = this.southEast) === null || _c === void 0 ? void 0 : _c.query(range, res);
-                    (_d = this.southWest) === null || _d === void 0 ? void 0 : _d.query(range, res);
+            for (const p of this.points) {
+                if (!range.contains(p.position) && (0, NumberUtils_1.getDistance)(range.position, p.position) > p.particle.getRadius()) {
+                    continue;
                 }
+                res.push(p.particle);
+            }
+            if (this.divided) {
+                (_a = this.northEast) === null || _a === void 0 ? void 0 : _a.query(range, res);
+                (_b = this.northWest) === null || _b === void 0 ? void 0 : _b.query(range, res);
+                (_c = this.southEast) === null || _c === void 0 ? void 0 : _c.query(range, res);
+                (_d = this.southWest) === null || _d === void 0 ? void 0 : _d.query(range, res);
             }
             return res;
         }
+        subdivide() {
+            const x = this.rectangle.position.x, y = this.rectangle.position.y, w = this.rectangle.size.width, h = this.rectangle.size.height, capacity = this.capacity;
+            this.northEast = new QuadTree(new Rectangle_1.Rectangle(x, y, w / 2, h / 2), capacity);
+            this.northWest = new QuadTree(new Rectangle_1.Rectangle(x + w / 2, y, w / 2, h / 2), capacity);
+            this.southEast = new QuadTree(new Rectangle_1.Rectangle(x, y + h / 2, w / 2, h / 2), capacity);
+            this.southWest = new QuadTree(new Rectangle_1.Rectangle(x + w / 2, y + h / 2, w / 2, h / 2), capacity);
+            this.divided = true;
+        }
     }
     exports.QuadTree = QuadTree;
 });

package/umd/Core/Utils/Rectangle.js

@@ -20,28 +20,19 @@
             };
         }
         contains(point) {
-            const w = this.size.width;
-            const h = this.size.height;
-            const pos = this.position;
+            const w = this.size.width, h = this.size.height, pos = this.position;
             return point.x >= pos.x && point.x <= pos.x + w && point.y >= pos.y && point.y <= pos.y + h;
         }
         intersects(range) {
-            const rect = range;
-            const circle = range;
-            const w = this.size.width;
-            const h = this.size.height;
-            const pos1 = this.position;
-            const pos2 = range.position;
+            const rect = range, circle = range, w = this.size.width, h = this.size.height, pos1 = this.position, pos2 = range.position;
             if (circle.radius !== undefined) {
                 return circle.intersects(this);
             }
-            else if (rect.size !== undefined) {
-                const size2 = rect.size;
-                const w2 = size2.width;
-                const h2 = size2.height;
-                return pos2.x < pos1.x + w && pos2.x + w2 > pos1.x && pos2.y < pos1.y + h && pos2.y + h2 > pos1.y;
+            if (!rect.size) {
+                return false;
             }
-            return false;
+            const size2 = rect.size, w2 = size2.width, h2 = size2.height;
+            return pos2.x < pos1.x + w && pos2.x + w2 > pos1.x && pos2.y < pos1.y + h && pos2.y + h2 > pos1.y;
         }
     }
     exports.Rectangle = Rectangle;

package/umd/Core/Utils/Vector.js

@@ -11,20 +11,18 @@
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.Vector = void 0;
     class Vector {
-        constructor(x, y) {
-            let defX, defY;
-            if (y === undefined) {
-                if (typeof x === "number") {
-                    throw new Error("tsParticles - Vector not initialized correctly");
-                }
-                const coords = x;
-                [defX, defY] = [coords.x, coords.y];
+        constructor(xOrCoords, y) {
+            if (typeof xOrCoords !== "number" && xOrCoords) {
+                this.x = xOrCoords.x;
+                this.y = xOrCoords.y;
+            }
+            else if (xOrCoords !== undefined && y !== undefined) {
+                this.x = xOrCoords;
+                this.y = y;
             }
             else {
-                [defX, defY] = [x, y];
+                throw new Error("tsParticles - Vector not initialized correctly");
             }
-            this.x = defX;
-            this.y = defY;
         }
         static clone(source) {
             return Vector.create(source.x, source.y);
@@ -42,7 +40,7 @@
             this.updateFromAngle(angle, this.length);
         }
         get length() {
-            return Math.sqrt(this.x ** 2 + this.y ** 2);
+            return Math.sqrt(this.getLengthSq());
         }
         set length(length) {
             this.updateFromAngle(this.angle, length);
@@ -90,9 +88,9 @@
         copy() {
             return Vector.clone(this);
         }
-        setTo(velocity) {
-            this.x = velocity.x;
-            this.y = velocity.y;
+        setTo(v) {
+            this.x = v.x;
+            this.y = v.y;
         }
         rotate(angle) {
             return Vector.create(this.x * Math.cos(angle) - this.y * Math.sin(angle), this.x * Math.sin(angle) + this.y * Math.cos(angle));

package/umd/Core/Utils/Vector3d.js

@@ -12,9 +12,17 @@
     exports.Vector3d = void 0;
     const Vector_1 = require("./Vector");
     class Vector3d extends Vector_1.Vector {
-        constructor(x, y, z) {
-            super(x, y);
-            this.z = z === undefined ? x.z : z;
+        constructor(xOrCoords, y, z) {
+            super(xOrCoords, y);
+            if (typeof xOrCoords !== "number" && xOrCoords) {
+                this.z = xOrCoords.z;
+            }
+            else if (z !== undefined) {
+                this.z = z;
+            }
+            else {
+                throw new Error("tsParticles - Vector not initialized correctly");
+            }
         }
         static clone(source) {
             return Vector3d.create(source.x, source.y, source.z);
@@ -22,6 +30,9 @@
         static create(x, y, z) {
             return new Vector3d(x, y, z);
         }
+        static get origin() {
+            return Vector3d.create(0, 0, 0);
+        }
         add(v) {
             return v instanceof Vector3d ? Vector3d.create(this.x + v.x, this.y + v.y, this.z + v.z) : super.add(v);
         }
@@ -59,8 +70,9 @@
         }
         setTo(v) {
             super.setTo(v);
-            if (v instanceof Vector3d) {
-                this.z = v.z;
+            const v3d = v;
+            if (v3d.z !== undefined) {
+                this.z = v3d.z;
             }
         }
     }

package/umd/Interactions/External/Attract/Attractor.js

@@ -4,17 +4,48 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "../../../Core", "../../../Utils"], factory);
+        define(["require", "exports", "../../../Utils/NumberUtils", "../../../Core/Utils/Circle", "../../../Core/Utils/Constants", "../../../Core/Utils/ExternalInteractorBase", "../../../Core/Utils/Vector", "../../../Utils/Utils"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.Attractor = void 0;
-    const Core_1 = require("../../../Core");
-    const Utils_1 = require("../../../Utils");
-    class Attractor extends Core_1.ExternalInteractorBase {
+    const NumberUtils_1 = require("../../../Utils/NumberUtils");
+    const Circle_1 = require("../../../Core/Utils/Circle");
+    const Constants_1 = require("../../../Core/Utils/Constants");
+    const ExternalInteractorBase_1 = require("../../../Core/Utils/ExternalInteractorBase");
+    const Vector_1 = require("../../../Core/Utils/Vector");
+    const Utils_1 = require("../../../Utils/Utils");
+    class Attractor extends ExternalInteractorBase_1.ExternalInteractorBase {
         constructor(container) {
             super(container);
+            if (!container.attract) {
+                container.attract = { particles: [] };
+            }
+            this.handleClickMode = (mode) => {
+                const options = this.container.actualOptions;
+                if (mode !== "attract") {
+                    return;
+                }
+                if (!container.attract) {
+                    container.attract = { particles: [] };
+                }
+                container.attract.clicking = true;
+                container.attract.count = 0;
+                for (const particle of container.attract.particles) {
+                    particle.velocity.setTo(particle.initialVelocity);
+                }
+                container.attract.particles = [];
+                container.attract.finish = false;
+                setTimeout(() => {
+                    if (!container.destroyed) {
+                        if (!container.attract) {
+                            container.attract = { particles: [] };
+                        }
+                        container.attract.clicking = false;
+                    }
+                }, options.interactivity.modes.attract.duration * 1000);
+            };
         }
         isEnabled() {
             const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse, events = options.interactivity.events;
@@ -27,7 +58,7 @@
         reset() {
         }
         async interact() {
-            const container = this.container, options = container.actualOptions, mouseMoveStatus = container.interactivity.status === Core_1.Constants.mouseMoveEvent, events = options.interactivity.events, hoverEnabled = events.onHover.enable, hoverMode = events.onHover.mode, clickEnabled = events.onClick.enable, clickMode = events.onClick.mode;
+            const container = this.container, options = container.actualOptions, mouseMoveStatus = container.interactivity.status === Constants_1.Constants.mouseMoveEvent, events = options.interactivity.events, hoverEnabled = events.onHover.enable, hoverMode = events.onHover.mode, clickEnabled = events.onClick.enable, clickMode = events.onClick.mode;
             if (mouseMoveStatus && hoverEnabled && (0, Utils_1.isInArray)("attract", hoverMode)) {
                 this.hoverAttract();
             }
@@ -42,22 +73,25 @@
                 return;
             }
             const attractRadius = container.retina.attractModeDistance;
-            this.processAttract(mousePos, attractRadius, new Core_1.Circle(mousePos.x, mousePos.y, attractRadius));
+            this.processAttract(mousePos, attractRadius, new Circle_1.Circle(mousePos.x, mousePos.y, attractRadius));
         }
         processAttract(position, attractRadius, area) {
             const container = this.container;
             const attractOptions = container.actualOptions.interactivity.modes.attract;
             const query = container.particles.quadTree.query(area);
             for (const particle of query) {
-                const { dx, dy, distance } = (0, Utils_1.getDistances)(particle.position, position);
+                const { dx, dy, distance } = (0, NumberUtils_1.getDistances)(particle.position, position);
                 const velocity = attractOptions.speed * attractOptions.factor;
-                const attractFactor = (0, Utils_1.clamp)((0, Utils_1.calcEasing)(1 - distance / attractRadius, attractOptions.easing) * velocity, 0, attractOptions.maxSpeed);
-                const normVec = Core_1.Vector.create(distance === 0 ? velocity : (dx / distance) * attractFactor, distance === 0 ? velocity : (dy / distance) * attractFactor);
+                const attractFactor = (0, NumberUtils_1.clamp)((0, NumberUtils_1.calcEasing)(1 - distance / attractRadius, attractOptions.easing) * velocity, 0, attractOptions.maxSpeed);
+                const normVec = Vector_1.Vector.create(distance === 0 ? velocity : (dx / distance) * attractFactor, distance === 0 ? velocity : (dy / distance) * attractFactor);
                 particle.position.subFrom(normVec);
             }
         }
         clickAttract() {
             const container = this.container;
+            if (!container.attract) {
+                container.attract = { particles: [] };
+            }
             if (!container.attract.finish) {
                 if (!container.attract.count) {
                     container.attract.count = 0;
@@ -73,7 +107,7 @@
                     return;
                 }
                 const attractRadius = container.retina.attractModeDistance;
-                this.processAttract(mousePos, attractRadius, new Core_1.Circle(mousePos.x, mousePos.y, attractRadius));
+                this.processAttract(mousePos, attractRadius, new Circle_1.Circle(mousePos.x, mousePos.y, attractRadius));
             }
             else if (container.attract.clicking === false) {
                 container.attract.particles = [];