@tsparticles/engine 3.0.0-alpha.0 → 3.0.0-beta.0

package/umd/Core/Particles.js

@@ -4,95 +4,172 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./Utils/InteractionManager", "./Particle", "./Utils/Point", "./Utils/QuadTree", "./Utils/Rectangle", "../Utils/NumberUtils"], factory);
+        define(["require", "exports", "../Utils/Utils", "./Utils/InteractionManager", "./Particle", "./Utils/Point", "./Utils/QuadTree", "./Utils/Rectangle", "./Utils/Constants"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.Particles = void 0;
+    const Utils_1 = require("../Utils/Utils");
     const InteractionManager_1 = require("./Utils/InteractionManager");
     const Particle_1 = require("./Particle");
     const Point_1 = require("./Utils/Point");
     const QuadTree_1 = require("./Utils/QuadTree");
     const Rectangle_1 = require("./Utils/Rectangle");
-    const NumberUtils_1 = require("../Utils/NumberUtils");
+    const Constants_1 = require("./Utils/Constants");
+    const qTreeCapacity = 4;
+    const qTreeRectangle = (canvasSize) => {
+        return new Rectangle_1.Rectangle(-canvasSize.width / 4, -canvasSize.height / 4, (canvasSize.width * 3) / 2, (canvasSize.height * 3) / 2);
+    };
     class Particles {
         constructor(engine, container) {
-            this.container = container;
+            this._applyDensity = (options, manualCount, group) => {
+                if (!options.number.density?.enable) {
+                    return;
+                }
+                const numberOptions = options.number, densityFactor = this._initDensityFactor(numberOptions.density), optParticlesNumber = numberOptions.value, optParticlesLimit = numberOptions.limit > 0 ? numberOptions.limit : optParticlesNumber, particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + manualCount, particlesCount = Math.min(this.count, this.filter((t) => t.group === group).length);
+                this.limit = numberOptions.limit * densityFactor;
+                if (particlesCount < particlesNumber) {
+                    this.push(Math.abs(particlesNumber - particlesCount), undefined, options, group);
+                }
+                else if (particlesCount > particlesNumber) {
+                    this.removeQuantity(particlesCount - particlesNumber, group);
+                }
+            };
+            this._initDensityFactor = (densityOptions) => {
+                const container = this._container;
+                if (!container.canvas.element || !densityOptions.enable) {
+                    return 1;
+                }
+                const canvas = container.canvas.element, pxRatio = container.retina.pixelRatio;
+                return (canvas.width * canvas.height) / (densityOptions.height * densityOptions.width * pxRatio ** 2);
+            };
+            this._pushParticle = (position, overrideOptions, group, initializer) => {
+                try {
+                    let particle = this.pool.pop();
+                    if (particle) {
+                        particle.init(this._nextId, position, overrideOptions, group);
+                    }
+                    else {
+                        particle = new Particle_1.Particle(this._engine, this._nextId, this._container, position, overrideOptions, group);
+                    }
+                    let canAdd = true;
+                    if (initializer) {
+                        canAdd = initializer(particle);
+                    }
+                    if (!canAdd) {
+                        return;
+                    }
+                    this._array.push(particle);
+                    this._zArray.push(particle);
+                    this._nextId++;
+                    this._engine.dispatchEvent("particleAdded", {
+                        container: this._container,
+                        data: {
+                            particle,
+                        },
+                    });
+                    return particle;
+                }
+                catch (e) {
+                    (0, Utils_1.getLogger)().warning(`${Constants_1.errorPrefix} adding particle: ${e}`);
+                    return;
+                }
+            };
+            this._removeParticle = (index, group, override) => {
+                const particle = this._array[index];
+                if (!particle || particle.group !== group) {
+                    return false;
+                }
+                particle.destroy(override);
+                this._array.splice(index, 1);
+                this._zArray = this._zArray.splice(this._zArray.indexOf(particle), 1);
+                this.pool.push(particle);
+                this._engine.dispatchEvent("particleRemoved", {
+                    container: this._container,
+                    data: {
+                        particle,
+                    },
+                });
+                return true;
+            };
             this._engine = engine;
-            this.nextId = 0;
-            this.array = [];
-            this.zArray = [];
+            this._container = container;
+            this._nextId = 0;
+            this._array = [];
+            this._zArray = [];
             this.pool = [];
             this.limit = 0;
             this.needsSort = false;
             this.lastZIndex = 0;
-            this.interactionManager = new InteractionManager_1.InteractionManager(this._engine, container);
-            const canvasSize = this.container.canvas.size;
-            this.quadTree = new QuadTree_1.QuadTree(new Rectangle_1.Rectangle(-canvasSize.width / 4, -canvasSize.height / 4, (canvasSize.width * 3) / 2, (canvasSize.height * 3) / 2), 4);
-            this.movers = this._engine.plugins.getMovers(container, true);
-            this.updaters = this._engine.plugins.getUpdaters(container, true);
+            this._interactionManager = new InteractionManager_1.InteractionManager(engine, container);
+            const canvasSize = container.canvas.size;
+            this.quadTree = new QuadTree_1.QuadTree(qTreeRectangle(canvasSize), qTreeCapacity);
+            this.movers = this._engine.getMovers(container, true);
+            this.updaters = this._engine.getUpdaters(container, true);
         }
         get count() {
-            return this.array.length;
+            return this._array.length;
         }
         addManualParticles() {
-            const container = this.container, options = container.actualOptions;
+            const container = this._container, options = container.actualOptions;
             for (const particle of options.manualParticles) {
-                this.addParticle((0, NumberUtils_1.calcPositionFromSize)({
-                    size: container.canvas.size,
-                    position: particle.position,
-                }), particle.options);
+                this.addParticle(particle.position ? (0, Utils_1.getPosition)(particle.position, container.canvas.size) : undefined, particle.options);
             }
         }
         addParticle(position, overrideOptions, group, initializer) {
-            const container = this.container, options = container.actualOptions, limit = options.particles.number.limit;
+            this.pushing = true;
+            const container = this._container, options = container.actualOptions, limit = options.particles.number.limit;
             if (limit > 0) {
                 const countToRemove = this.count + 1 - limit;
                 if (countToRemove > 0) {
                     this.removeQuantity(countToRemove);
                 }
             }
-            return this._pushParticle(position, overrideOptions, group, initializer);
+            const res = this._pushParticle(position, overrideOptions, group, initializer);
+            this.pushing = false;
+            return res;
         }
         clear() {
-            this.array = [];
-            this.zArray = [];
+            this._array = [];
+            this._zArray = [];
         }
         destroy() {
-            this.array = [];
-            this.zArray = [];
+            this._array = [];
+            this._zArray = [];
             this.movers = [];
             this.updaters = [];
         }
         async draw(delta) {
-            const container = this.container, canvasSize = this.container.canvas.size;
-            this.quadTree = new QuadTree_1.QuadTree(new Rectangle_1.Rectangle(-canvasSize.width / 4, -canvasSize.height / 4, (canvasSize.width * 3) / 2, (canvasSize.height * 3) / 2), 4);
-            container.canvas.clear();
+            const container = this._container, canvas = container.canvas;
+            canvas.clear();
             await this.update(delta);
-            if (this.needsSort) {
-                this.zArray.sort((a, b) => b.position.z - a.position.z || a.id - b.id);
-                this.lastZIndex = this.zArray[this.zArray.length - 1].position.z;
-                this.needsSort = false;
-            }
             for (const [, plugin] of container.plugins) {
-                container.canvas.drawPlugin(plugin, delta);
+                canvas.drawPlugin(plugin, delta);
             }
-            for (const p of this.zArray) {
+            for (const p of this._zArray) {
                 p.draw(delta);
             }
         }
+        filter(condition) {
+            return this._array.filter(condition);
+        }
+        find(condition) {
+            return this._array.find(condition);
+        }
+        get(index) {
+            return this._array[index];
+        }
         handleClickMode(mode) {
-            this.interactionManager.handleClickMode(mode);
+            this._interactionManager.handleClickMode(mode);
         }
         init() {
-            var _a;
-            const container = this.container, options = container.actualOptions;
+            const container = this._container, options = container.actualOptions;
             this.lastZIndex = 0;
             this.needsSort = false;
             let handled = false;
-            this.updaters = this._engine.plugins.getUpdaters(container, true);
-            this.interactionManager.init();
+            this.updaters = this._engine.getUpdaters(container, true);
+            this._interactionManager.init();
             for (const [, plugin] of container.plugins) {
                 if (plugin.particlesInitialization !== undefined) {
                     handled = plugin.particlesInitialization();
@@ -101,29 +178,28 @@
                     break;
                 }
             }
-            this.interactionManager.init();
+            this._interactionManager.init();
             for (const [, pathGenerator] of container.pathGenerators) {
                 pathGenerator.init(container);
             }
             this.addManualParticles();
             if (!handled) {
-                for (const group in options.particles.groups) {
-                    const groupOptions = options.particles.groups[group];
-                    for (let i = this.count, j = 0; j < ((_a = groupOptions.number) === null || _a === void 0 ? void 0 : _a.value) && i < options.particles.number.value; i++, j++) {
+                const particlesOptions = options.particles, groups = options.particles.groups;
+                for (const group in groups) {
+                    const groupOptions = groups[group];
+                    for (let i = this.count, j = 0; j < groupOptions.number?.value && i < particlesOptions.number.value; i++, j++) {
                         this.addParticle(undefined, groupOptions, group);
                     }
                 }
-                for (let i = this.count; i < options.particles.number.value; i++) {
+                for (let i = this.count; i < particlesOptions.number.value; i++) {
                     this.addParticle();
                 }
             }
         }
         push(nb, mouse, overrideOptions, group) {
-            this.pushing = true;
             for (let i = 0; i < nb; i++) {
-                this.addParticle(mouse === null || mouse === void 0 ? void 0 : mouse.position, overrideOptions, group);
+                this.addParticle(mouse?.position, overrideOptions, group);
             }
-            this.pushing = false;
         }
         async redraw() {
             this.clear();
@@ -131,7 +207,7 @@
             await this.draw({ value: 0, factor: 0 });
         }
         remove(particle, group, override) {
-            this.removeAt(this.array.indexOf(particle), undefined, group, override);
+            this.removeAt(this._array.indexOf(particle), undefined, group, override);
         }
         removeAt(index, quantity = 1, group, override) {
             if (index < 0 || index > this.count) {
@@ -139,44 +215,29 @@
             }
             let deleted = 0;
             for (let i = index; deleted < quantity && i < this.count; i++) {
-                const particle = this.array[i];
-                if (!particle || particle.group !== group) {
-                    continue;
-                }
-                particle.destroy(override);
-                this.array.splice(i--, 1);
-                const idx = this.zArray.indexOf(particle);
-                this.zArray.splice(idx, 1);
-                this.pool.push(particle);
-                deleted++;
-                this._engine.dispatchEvent("particleRemoved", {
-                    container: this.container,
-                    data: {
-                        particle,
-                    },
-                });
+                this._removeParticle(i--, group, override) && deleted++;
             }
         }
         removeQuantity(quantity, group) {
             this.removeAt(0, quantity, group);
         }
         setDensity() {
-            const options = this.container.actualOptions;
-            for (const group in options.particles.groups) {
-                this._applyDensity(options.particles.groups[group], 0, group);
+            const options = this._container.actualOptions, groups = options.particles.groups;
+            for (const group in groups) {
+                this._applyDensity(groups[group], 0, group);
             }
             this._applyDensity(options.particles, options.manualParticles.length);
         }
         async update(delta) {
-            var _a, _b;
-            const container = this.container, particlesToDelete = [];
+            const container = this._container, particlesToDelete = new Set();
+            this.quadTree = new QuadTree_1.QuadTree(qTreeRectangle(container.canvas.size), qTreeCapacity);
             for (const [, pathGenerator] of container.pathGenerators) {
                 pathGenerator.update();
             }
             for (const [, plugin] of container.plugins) {
-                (_a = plugin.update) === null || _a === void 0 ? void 0 : _a.call(plugin, delta);
+                plugin.update && plugin.update(delta);
             }
-            for (const particle of this.array) {
+            for (const particle of this._array) {
                 const resizeFactor = container.canvas.resizeFactor;
                 if (resizeFactor && !particle.ignoresResizeRatio) {
                     particle.position.x *= resizeFactor.width;
@@ -185,90 +246,43 @@
                     particle.initialPosition.y *= resizeFactor.height;
                 }
                 particle.ignoresResizeRatio = false;
-                await this.interactionManager.reset(particle);
-                for (const [, plugin] of this.container.plugins) {
+                await this._interactionManager.reset(particle);
+                for (const [, plugin] of this._container.plugins) {
                     if (particle.destroyed) {
                         break;
                     }
-                    (_b = plugin.particleUpdate) === null || _b === void 0 ? void 0 : _b.call(plugin, particle, delta);
+                    plugin.particleUpdate && plugin.particleUpdate(particle, delta);
                 }
                 for (const mover of this.movers) {
-                    if (mover.isEnabled(particle)) {
-                        mover.move(particle, delta);
-                    }
+                    mover.isEnabled(particle) && mover.move(particle, delta);
                 }
                 if (particle.destroyed) {
-                    particlesToDelete.push(particle);
+                    particlesToDelete.add(particle);
                     continue;
                 }
                 this.quadTree.insert(new Point_1.Point(particle.getPosition(), particle));
             }
-            for (const particle of particlesToDelete) {
-                this.remove(particle);
+            if (particlesToDelete.size) {
+                const checkDelete = (p) => !particlesToDelete.has(p);
+                this._array = this.filter(checkDelete);
+                this._zArray = this._zArray.filter(checkDelete);
+                this.pool.push(...particlesToDelete);
             }
-            await this.interactionManager.externalInteract(delta);
-            for (const particle of this.array) {
+            await this._interactionManager.externalInteract(delta);
+            for (const particle of this._array) {
                 for (const updater of this.updaters) {
                     updater.update(particle, delta);
                 }
                 if (!particle.destroyed && !particle.spawning) {
-                    await this.interactionManager.particlesInteract(particle, delta);
+                    await this._interactionManager.particlesInteract(particle, delta);
                 }
             }
             delete container.canvas.resizeFactor;
-        }
-        _applyDensity(options, manualCount, group) {
-            var _a;
-            if (!((_a = options.number.density) === null || _a === void 0 ? void 0 : _a.enable)) {
-                return;
-            }
-            const numberOptions = options.number, densityFactor = this._initDensityFactor(numberOptions.density), optParticlesNumber = numberOptions.value, optParticlesLimit = numberOptions.limit > 0 ? numberOptions.limit : optParticlesNumber, particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + manualCount, particlesCount = Math.min(this.count, this.array.filter((t) => t.group === group).length);
-            this.limit = numberOptions.limit * densityFactor;
-            if (particlesCount < particlesNumber) {
-                this.push(Math.abs(particlesNumber - particlesCount), undefined, options, group);
-            }
-            else if (particlesCount > particlesNumber) {
-                this.removeQuantity(particlesCount - particlesNumber, group);
-            }
-        }
-        _initDensityFactor(densityOptions) {
-            const container = this.container;
-            if (!container.canvas.element || !densityOptions.enable) {
-                return 1;
-            }
-            const canvas = container.canvas.element, pxRatio = container.retina.pixelRatio;
-            return (canvas.width * canvas.height) / (densityOptions.factor * pxRatio ** 2 * densityOptions.area);
-        }
-        _pushParticle(position, overrideOptions, group, initializer) {
-            try {
-                let particle = this.pool.pop();
-                if (particle) {
-                    particle.init(this.nextId, position, overrideOptions, group);
-                }
-                else {
-                    particle = new Particle_1.Particle(this._engine, this.nextId, this.container, position, overrideOptions, group);
-                }
-                let canAdd = true;
-                if (initializer) {
-                    canAdd = initializer(particle);
-                }
-                if (!canAdd) {
-                    return;
-                }
-                this.array.push(particle);
-                this.zArray.push(particle);
-                this.nextId++;
-                this._engine.dispatchEvent("particleAdded", {
-                    container: this.container,
-                    data: {
-                        particle,
-                    },
-                });
-                return particle;
-            }
-            catch (e) {
-                console.warn(`error adding particle: ${e}`);
-                return;
+            if (this.needsSort) {
+                const zArray = this._zArray;
+                zArray.sort((a, b) => b.position.z - a.position.z || a.id - b.id);
+                this.lastZIndex = zArray[zArray.length - 1].position.z;
+                this.needsSort = false;
             }
         }
     }

package/umd/Core/Retina.js

@@ -15,32 +15,34 @@
     class Retina {
         constructor(container) {
             this.container = container;
+            this.pixelRatio = 1;
+            this.reduceFactor = 1;
         }
         init() {
             const container = this.container, options = container.actualOptions;
             this.pixelRatio = !options.detectRetina || (0, Utils_1.isSsr)() ? 1 : window.devicePixelRatio;
             this.reduceFactor = 1;
-            const ratio = this.pixelRatio;
-            if (container.canvas.element) {
-                const element = container.canvas.element;
-                container.canvas.size.width = element.offsetWidth * ratio;
-                container.canvas.size.height = element.offsetHeight * ratio;
+            const ratio = this.pixelRatio, canvas = container.canvas;
+            if (canvas.element) {
+                const element = canvas.element;
+                canvas.size.width = element.offsetWidth * ratio;
+                canvas.size.height = element.offsetHeight * ratio;
             }
-            const particles = options.particles;
-            this.attractDistance = (0, NumberUtils_1.getRangeValue)(particles.move.attract.distance) * ratio;
+            const particles = options.particles, moveOptions = particles.move;
+            this.attractDistance = (0, NumberUtils_1.getRangeValue)(moveOptions.attract.distance) * ratio;
+            this.maxSpeed = (0, NumberUtils_1.getRangeValue)(moveOptions.gravity.maxSpeed) * ratio;
             this.sizeAnimationSpeed = (0, NumberUtils_1.getRangeValue)(particles.size.animation.speed) * ratio;
-            this.maxSpeed = (0, NumberUtils_1.getRangeValue)(particles.move.gravity.maxSpeed) * ratio;
         }
         initParticle(particle) {
-            const options = particle.options, ratio = this.pixelRatio, moveDistance = options.move.distance, props = particle.retina;
-            props.attractDistance = (0, NumberUtils_1.getRangeValue)(options.move.attract.distance) * ratio;
-            props.moveDrift = (0, NumberUtils_1.getRangeValue)(options.move.drift) * ratio;
-            props.moveSpeed = (0, NumberUtils_1.getRangeValue)(options.move.speed) * ratio;
+            const options = particle.options, ratio = this.pixelRatio, moveOptions = options.move, moveDistance = moveOptions.distance, props = particle.retina;
+            props.attractDistance = (0, NumberUtils_1.getRangeValue)(moveOptions.attract.distance) * ratio;
+            props.moveDrift = (0, NumberUtils_1.getRangeValue)(moveOptions.drift) * ratio;
+            props.moveSpeed = (0, NumberUtils_1.getRangeValue)(moveOptions.speed) * ratio;
             props.sizeAnimationSpeed = (0, NumberUtils_1.getRangeValue)(options.size.animation.speed) * ratio;
             const maxDistance = props.maxDistance;
             maxDistance.horizontal = moveDistance.horizontal !== undefined ? moveDistance.horizontal * ratio : undefined;
             maxDistance.vertical = moveDistance.vertical !== undefined ? moveDistance.vertical * ratio : undefined;
-            props.maxSpeed = (0, NumberUtils_1.getRangeValue)(options.move.gravity.maxSpeed) * ratio;
+            props.maxSpeed = (0, NumberUtils_1.getRangeValue)(moveOptions.gravity.maxSpeed) * ratio;
         }
     }
     exports.Retina = Retina;

package/umd/Core/Utils/Circle.js

@@ -4,13 +4,14 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./Range", "../../Utils/NumberUtils"], factory);
+        define(["require", "exports", "./Range", "./Rectangle", "../../Utils/NumberUtils"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.Circle = void 0;
     const Range_1 = require("./Range");
+    const Rectangle_1 = require("./Rectangle");
     const NumberUtils_1 = require("../../Utils/NumberUtils");
     class Circle extends Range_1.Range {
         constructor(x, y, radius) {
@@ -21,14 +22,17 @@
             return (0, NumberUtils_1.getDistance)(point, this.position) <= this.radius;
         }
         intersects(range) {
-            const rect = range, circle = range, pos1 = this.position, pos2 = range.position, distPos = { x: Math.abs(pos2.x - pos1.x), y: Math.abs(pos2.y - pos1.y) }, r = this.radius;
-            if (circle.radius !== undefined) {
-                const rSum = r + circle.radius, dist = Math.sqrt(distPos.x ** 2 + distPos.y ** 2);
+            const pos1 = this.position, pos2 = range.position, distPos = { x: Math.abs(pos2.x - pos1.x), y: Math.abs(pos2.y - pos1.y) }, r = this.radius;
+            if (range instanceof Circle) {
+                const rSum = r + range.radius, dist = Math.sqrt(distPos.x ** 2 + distPos.y ** 2);
                 return rSum > dist;
             }
-            else if (rect.size !== undefined) {
-                const w = rect.size.width, h = rect.size.height, edges = Math.pow(distPos.x - w, 2) + Math.pow(distPos.y - h, 2);
-                return edges <= r ** 2 || (distPos.x <= r + w && distPos.y <= r + h) || distPos.x <= w || distPos.y <= h;
+            else if (range instanceof Rectangle_1.Rectangle) {
+                const { width, height } = range.size, edges = Math.pow(distPos.x - width, 2) + Math.pow(distPos.y - height, 2);
+                return (edges <= r ** 2 ||
+                    (distPos.x <= r + width && distPos.y <= r + height) ||
+                    distPos.x <= width ||
+                    distPos.y <= height);
             }
             return false;
         }

package/umd/Core/Utils/Constants.js

@@ -9,17 +9,18 @@
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.visibilityChangeEvent = exports.resizeEvent = exports.touchCancelEvent = exports.mouseOutEvent = exports.mouseLeaveEvent = exports.touchMoveEvent = exports.touchStartEvent = exports.mouseMoveEvent = exports.mouseUpEvent = exports.mouseDownEvent = exports.touchEndEvent = exports.generatedAttribute = void 0;
+    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.touchEndEvent = "touchend";
     exports.mouseDownEvent = "pointerdown";
     exports.mouseUpEvent = "pointerup";
+    exports.mouseLeaveEvent = "pointerleave";
+    exports.mouseOutEvent = "pointerout";
     exports.mouseMoveEvent = "pointermove";
     exports.touchStartEvent = "touchstart";
+    exports.touchEndEvent = "touchend";
     exports.touchMoveEvent = "touchmove";
-    exports.mouseLeaveEvent = "pointerleave";
-    exports.mouseOutEvent = "pointerout";
     exports.touchCancelEvent = "touchcancel";
     exports.resizeEvent = "resize";
     exports.visibilityChangeEvent = "visibilitychange";
+    exports.errorPrefix = "tsParticles - Error";
 });