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

package/browser/Core/Particles.js

@@ -1,86 +1,163 @@
+import { getLogger, getPosition } from "../Utils/Utils";
 import { InteractionManager } from "./Utils/InteractionManager";
 import { Particle } from "./Particle";
 import { Point } from "./Utils/Point";
 import { QuadTree } from "./Utils/QuadTree";
 import { Rectangle } from "./Utils/Rectangle";
-import { calcPositionFromSize } from "../Utils/NumberUtils";
+import { errorPrefix } from "./Utils/Constants";
+const qTreeCapacity = 4;
+const qTreeRectangle = (canvasSize) => {
+    return new Rectangle(-canvasSize.width / 4, -canvasSize.height / 4, (canvasSize.width * 3) / 2, (canvasSize.height * 3) / 2);
+};
 export 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(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) {
+                getLogger().warning(`${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(this._engine, container);
-        const canvasSize = this.container.canvas.size;
-        this.quadTree = new QuadTree(new 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(engine, container);
+        const canvasSize = container.canvas.size;
+        this.quadTree = new 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(calcPositionFromSize({
-                size: container.canvas.size,
-                position: particle.position,
-            }), particle.options);
+            this.addParticle(particle.position ? 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(new 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();
@@ -89,29 +166,28 @@ export class Particles {
                 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();
@@ -119,7 +195,7 @@ export class Particles {
         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) {
@@ -127,44 +203,29 @@ export class Particles {
         }
         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(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;
@@ -173,90 +234,43 @@ export class Particles {
                 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(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(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/browser/Core/Retina.js

@@ -3,31 +3,33 @@ import { isSsr } from "../Utils/Utils";
 export 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 || 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 = getRangeValue(particles.move.attract.distance) * ratio;
+        const particles = options.particles, moveOptions = particles.move;
+        this.attractDistance = getRangeValue(moveOptions.attract.distance) * ratio;
+        this.maxSpeed = getRangeValue(moveOptions.gravity.maxSpeed) * ratio;
         this.sizeAnimationSpeed = getRangeValue(particles.size.animation.speed) * ratio;
-        this.maxSpeed = getRangeValue(particles.move.gravity.maxSpeed) * ratio;
     }
     initParticle(particle) {
-        const options = particle.options, ratio = this.pixelRatio, moveDistance = options.move.distance, props = particle.retina;
-        props.attractDistance = getRangeValue(options.move.attract.distance) * ratio;
-        props.moveDrift = getRangeValue(options.move.drift) * ratio;
-        props.moveSpeed = getRangeValue(options.move.speed) * ratio;
+        const options = particle.options, ratio = this.pixelRatio, moveOptions = options.move, moveDistance = moveOptions.distance, props = particle.retina;
+        props.attractDistance = getRangeValue(moveOptions.attract.distance) * ratio;
+        props.moveDrift = getRangeValue(moveOptions.drift) * ratio;
+        props.moveSpeed = getRangeValue(moveOptions.speed) * ratio;
         props.sizeAnimationSpeed = 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 = getRangeValue(options.move.gravity.maxSpeed) * ratio;
+        props.maxSpeed = getRangeValue(moveOptions.gravity.maxSpeed) * ratio;
     }
 }

package/browser/Core/Utils/Circle.js

@@ -1,4 +1,5 @@
 import { Range } from "./Range";
+import { Rectangle } from "./Rectangle";
 import { getDistance } from "../../Utils/NumberUtils";
 export class Circle extends Range {
     constructor(x, y, radius) {
@@ -9,14 +10,17 @@ export class Circle extends Range {
         return 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) {
+            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/browser/Core/Utils/Constants.js

@@ -1,12 +1,13 @@
 export const generatedAttribute = "generated";
-export const touchEndEvent = "touchend";
 export const mouseDownEvent = "pointerdown";
 export const mouseUpEvent = "pointerup";
+export const mouseLeaveEvent = "pointerleave";
+export const mouseOutEvent = "pointerout";
 export const mouseMoveEvent = "pointermove";
 export const touchStartEvent = "touchstart";
+export const touchEndEvent = "touchend";
 export const touchMoveEvent = "touchmove";
-export const mouseLeaveEvent = "pointerleave";
-export const mouseOutEvent = "pointerout";
 export const touchCancelEvent = "touchcancel";
 export const resizeEvent = "resize";
 export const visibilityChangeEvent = "visibilitychange";
+export const errorPrefix = "tsParticles - Error";