@tsparticles/engine 3.9.1 → 4.0.0-alpha.1

package/cjs/Core/Particles.js

@@ -1,36 +1,35 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Particles = void 0;
-const Constants_js_1 = require("./Utils/Constants.js");
-const Utils_js_1 = require("../Utils/Utils.js");
-const EventType_js_1 = require("../Enums/Types/EventType.js");
-const InteractionManager_js_1 = require("./Utils/InteractionManager.js");
-const LimitMode_js_1 = require("../Enums/Modes/LimitMode.js");
-const Particle_js_1 = require("./Particle.js");
-const Point_js_1 = require("./Utils/Point.js");
-const QuadTree_js_1 = require("./Utils/QuadTree.js");
-const Ranges_js_1 = require("./Utils/Ranges.js");
+import { countOffset, defaultDensityFactor, defaultRemoveQuantity, deleteCount, lengthOffset, minCount, minIndex, minLimit, posOffset, qTreeCapacity, sizeFactor, squareExp, } from "./Utils/Constants.js";
+import { EventType } from "../Enums/Types/EventType.js";
+import { InteractionManager } from "./Utils/InteractionManager.js";
+import { LimitMode } from "../Enums/Modes/LimitMode.js";
+import { Particle } from "./Particle.js";
+import { Point } from "./Utils/Point.js";
+import { QuadTree } from "./Utils/QuadTree.js";
+import { Rectangle } from "./Utils/Ranges.js";
+import { getLogger } from "../Utils/LogUtils.js";
+import { getPosition } from "../Utils/Utils.js";
+import { loadParticlesOptions } from "../Utils/OptionsUtils.js";
 const qTreeRectangle = (canvasSize) => {
     const { height, width } = canvasSize;
-    return new Ranges_js_1.Rectangle(Constants_js_1.posOffset * width, Constants_js_1.posOffset * height, Constants_js_1.sizeFactor * width, Constants_js_1.sizeFactor * height);
+    return new Rectangle(posOffset * width, posOffset * height, sizeFactor * width, sizeFactor * height);
 };
-class Particles {
+export class Particles {
     constructor(engine, container) {
         this._addToPool = (...particles) => {
             this._pool.push(...particles);
         };
         this._applyDensity = (options, manualCount, group, groupOptions) => {
             const numberOptions = options.number;
-            if (!options.number.density?.enable) {
+            if (!numberOptions.density.enable) {
                 if (group === undefined) {
                     this._limit = numberOptions.limit.value;
                 }
-                else if (groupOptions?.number.limit?.value ?? numberOptions.limit.value) {
-                    this._groupLimits.set(group, groupOptions?.number.limit?.value ?? numberOptions.limit.value);
+                else if (groupOptions?.number.limit.value ?? numberOptions.limit.value) {
+                    this._groupLimits.set(group, groupOptions?.number.limit.value ?? numberOptions.limit.value);
                 }
                 return;
             }
-            const densityFactor = this._initDensityFactor(numberOptions.density), optParticlesNumber = numberOptions.value, optParticlesLimit = numberOptions.limit.value > Constants_js_1.minLimit ? numberOptions.limit.value : optParticlesNumber, particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + manualCount, particlesCount = Math.min(this.count, this.filter(t => t.group === group).length);
+            const densityFactor = this._initDensityFactor(numberOptions.density), optParticlesNumber = numberOptions.value, optParticlesLimit = numberOptions.limit.value > minLimit ? numberOptions.limit.value : optParticlesNumber, particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + manualCount, particlesCount = Math.min(this.count, this.filter(t => t.group === group).length);
             if (group === undefined) {
                 this._limit = numberOptions.limit.value * densityFactor;
             }
@@ -47,17 +46,14 @@ class Particles {
         this._initDensityFactor = densityOptions => {
             const container = this._container;
             if (!container.canvas.element || !densityOptions.enable) {
-                return Constants_js_1.defaultDensityFactor;
+                return defaultDensityFactor;
             }
             const canvas = container.canvas.element, pxRatio = container.retina.pixelRatio;
-            return (canvas.width * canvas.height) / (densityOptions.height * densityOptions.width * pxRatio ** Constants_js_1.squareExp);
+            return (canvas.width * canvas.height) / (densityOptions.height * densityOptions.width * pxRatio ** squareExp);
         };
         this._pushParticle = (position, overrideOptions, group, initializer) => {
             try {
-                let particle = this._pool.pop();
-                if (!particle) {
-                    particle = new Particle_js_1.Particle(this._engine, this._container);
-                }
+                const particle = this._pool.pop() ?? new Particle(this._engine, this._container);
                 particle.init(this._nextId, position, overrideOptions, group);
                 let canAdd = true;
                 if (initializer) {
@@ -69,7 +65,7 @@ class Particles {
                 this._array.push(particle);
                 this._zArray.push(particle);
                 this._nextId++;
-                this._engine.dispatchEvent(EventType_js_1.EventType.particleAdded, {
+                this._engine.dispatchEvent(EventType.particleAdded, {
                     container: this._container,
                     data: {
                         particle,
@@ -78,19 +74,23 @@ class Particles {
                 return particle;
             }
             catch (e) {
-                (0, Utils_js_1.getLogger)().warning(`${Constants_js_1.errorPrefix} adding particle: ${e}`);
+                getLogger().warning(`error adding particle: ${e}`);
             }
+            return undefined;
         };
         this._removeParticle = (index, group, override) => {
             const particle = this._array[index];
-            if (!particle || particle.group !== group) {
+            if (!particle) {
+                return false;
+            }
+            if (particle.group !== group) {
                 return false;
             }
             const zIdx = this._zArray.indexOf(particle);
-            this._array.splice(index, Constants_js_1.deleteCount);
-            this._zArray.splice(zIdx, Constants_js_1.deleteCount);
+            this._array.splice(index, deleteCount);
+            this._zArray.splice(zIdx, deleteCount);
             particle.destroy(override);
-            this._engine.dispatchEvent(EventType_js_1.EventType.particleRemoved, {
+            this._engine.dispatchEvent(EventType.particleRemoved, {
                 container: this._container,
                 data: {
                     particle,
@@ -109,10 +109,10 @@ class Particles {
         this._groupLimits = new Map();
         this._needsSort = false;
         this._lastZIndex = 0;
-        this._interactionManager = new InteractionManager_js_1.InteractionManager(engine, container);
+        this._interactionManager = new InteractionManager(engine, container);
         this._pluginsInitialized = false;
         const canvasSize = container.canvas.size;
-        this.quadTree = new QuadTree_js_1.QuadTree(qTreeRectangle(canvasSize), Constants_js_1.qTreeCapacity);
+        this.quadTree = new QuadTree(qTreeRectangle(canvasSize), qTreeCapacity);
         this.movers = [];
         this.updaters = [];
     }
@@ -121,20 +121,20 @@ class Particles {
     }
     addManualParticles() {
         const container = this._container, options = container.actualOptions;
-        options.manualParticles.forEach(p => this.addParticle(p.position ? (0, Utils_js_1.getPosition)(p.position, container.canvas.size) : undefined, p.options));
+        options.manualParticles.forEach(p => this.addParticle(p.position ? getPosition(p.position, container.canvas.size) : undefined, p.options));
     }
     addParticle(position, overrideOptions, group, initializer) {
         const limitMode = this._container.actualOptions.particles.number.limit.mode, limit = group === undefined ? this._limit : (this._groupLimits.get(group) ?? this._limit), currentCount = this.count;
-        if (limit > Constants_js_1.minLimit) {
+        if (limit > minLimit) {
             switch (limitMode) {
-                case LimitMode_js_1.LimitMode.delete: {
-                    const countToRemove = currentCount + Constants_js_1.countOffset - limit;
-                    if (countToRemove > Constants_js_1.minCount) {
+                case LimitMode.delete: {
+                    const countToRemove = currentCount + countOffset - limit;
+                    if (countToRemove > minCount) {
                         this.removeQuantity(countToRemove);
                     }
                     break;
                 }
-                case LimitMode_js_1.LimitMode.wait:
+                case LimitMode.wait:
                     if (currentCount >= limit) {
                         return;
                     }
@@ -154,15 +154,9 @@ class Particles {
         this.movers = [];
         this.updaters = [];
     }
-    draw(delta) {
-        const container = this._container, canvas = container.canvas;
-        canvas.clear();
-        this.update(delta);
-        for (const plugin of container.plugins.values()) {
-            canvas.drawPlugin(plugin, delta);
-        }
-        for (const p of this._zArray) {
-            p.draw(delta);
+    drawParticles(delta) {
+        for (const particle of this._zArray) {
+            particle.draw(delta);
         }
     }
     filter(condition) {
@@ -194,7 +188,10 @@ class Particles {
             const particlesOptions = options.particles, groups = particlesOptions.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++) {
+                if (!groupOptions) {
+                    continue;
+                }
+                for (let i = this.count, j = 0; j < groupOptions.number.value && i < particlesOptions.number.value; i++, j++) {
                     this.addParticle(undefined, groupOptions, group);
                 }
             }
@@ -223,13 +220,13 @@ class Particles {
     async redraw() {
         this.clear();
         await this.init();
-        this.draw({ value: 0, factor: 0 });
+        this._container.canvas.drawParticles({ value: 0, factor: 0 });
     }
     remove(particle, group, override) {
         this.removeAt(this._array.indexOf(particle), undefined, group, override);
     }
-    removeAt(index, quantity = Constants_js_1.defaultRemoveQuantity, group, override) {
-        if (index < Constants_js_1.minIndex || index > this.count) {
+    removeAt(index, quantity = defaultRemoveQuantity, group, override) {
+        if (index < minIndex || index > this.count) {
             return;
         }
         let deleted = 0;
@@ -241,12 +238,17 @@ class Particles {
         }
     }
     removeQuantity(quantity, group) {
-        this.removeAt(Constants_js_1.minIndex, quantity, group);
+        this.removeAt(minIndex, quantity, group);
     }
     setDensity() {
         const options = this._container.actualOptions, groups = options.particles.groups, manualCount = options.manualParticles.length;
         for (const group in groups) {
-            this._applyDensity(groups[group], manualCount, group);
+            const groupData = groups[group];
+            if (!groupData) {
+                continue;
+            }
+            const groupDataOptions = loadParticlesOptions(this._engine, this._container, groupData);
+            this._applyDensity(groupDataOptions, manualCount, group);
         }
         this._applyDensity(options.particles, manualCount);
     }
@@ -259,7 +261,7 @@ class Particles {
     }
     update(delta) {
         const container = this._container, particlesToDelete = new Set();
-        this.quadTree = new QuadTree_js_1.QuadTree(qTreeRectangle(container.canvas.size), Constants_js_1.qTreeCapacity);
+        this.quadTree = new QuadTree(qTreeRectangle(container.canvas.size), qTreeCapacity);
         for (const pathGenerator of container.pathGenerators.values()) {
             pathGenerator.update();
         }
@@ -291,14 +293,14 @@ class Particles {
                 particlesToDelete.add(particle);
                 continue;
             }
-            this.quadTree.insert(new Point_js_1.Point(particle.getPosition(), particle));
+            this.quadTree.insert(new Point(particle.getPosition(), particle));
         }
         if (particlesToDelete.size) {
             const checkDelete = (p) => !particlesToDelete.has(p);
             this._array = this.filter(checkDelete);
             this._zArray = this._zArray.filter(checkDelete);
             for (const particle of particlesToDelete) {
-                this._engine.dispatchEvent(EventType_js_1.EventType.particleRemoved, {
+                this._engine.dispatchEvent(EventType.particleRemoved, {
                     container: this._container,
                     data: {
                         particle,
@@ -320,9 +322,12 @@ class Particles {
         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 - Constants_js_1.lengthOffset].position.z;
+            const lastItem = zArray[zArray.length - lengthOffset];
+            if (!lastItem) {
+                return;
+            }
+            this._lastZIndex = lastItem.position.z;
             this._needsSort = false;
         }
     }
 }
-exports.Particles = Particles;

package/cjs/Core/Retina.js

@@ -1,19 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Retina = void 0;
-const Constants_js_1 = require("./Utils/Constants.js");
-const NumberUtils_js_1 = require("../Utils/NumberUtils.js");
-const Utils_js_1 = require("../Utils/Utils.js");
-class Retina {
+import { defaultRatio, defaultReduceFactor } from "./Utils/Constants.js";
+import { getRangeValue } from "../Utils/MathUtils.js";
+export class Retina {
     constructor(container) {
         this.container = container;
-        this.pixelRatio = Constants_js_1.defaultRatio;
-        this.reduceFactor = Constants_js_1.defaultReduceFactor;
+        this.pixelRatio = defaultRatio;
+        this.reduceFactor = defaultReduceFactor;
     }
     init() {
         const container = this.container, options = container.actualOptions;
-        this.pixelRatio = !options.detectRetina || (0, Utils_js_1.isSsr)() ? Constants_js_1.defaultRatio : devicePixelRatio;
-        this.reduceFactor = Constants_js_1.defaultReduceFactor;
+        this.pixelRatio = options.detectRetina ? devicePixelRatio : defaultRatio;
+        this.reduceFactor = defaultReduceFactor;
         const ratio = this.pixelRatio, canvas = container.canvas;
         if (canvas.element) {
             const element = canvas.element;
@@ -21,18 +17,17 @@ class Retina {
             canvas.size.height = element.offsetHeight * ratio;
         }
         const particles = options.particles, moveOptions = particles.move;
-        this.maxSpeed = (0, NumberUtils_js_1.getRangeValue)(moveOptions.gravity.maxSpeed) * ratio;
-        this.sizeAnimationSpeed = (0, NumberUtils_js_1.getRangeValue)(particles.size.animation.speed) * ratio;
+        this.maxSpeed = getRangeValue(moveOptions.gravity.maxSpeed) * ratio;
+        this.sizeAnimationSpeed = getRangeValue(particles.size.animation.speed) * ratio;
     }
     initParticle(particle) {
         const options = particle.options, ratio = this.pixelRatio, moveOptions = options.move, moveDistance = moveOptions.distance, props = particle.retina;
-        props.moveDrift = (0, NumberUtils_js_1.getRangeValue)(moveOptions.drift) * ratio;
-        props.moveSpeed = (0, NumberUtils_js_1.getRangeValue)(moveOptions.speed) * ratio;
-        props.sizeAnimationSpeed = (0, NumberUtils_js_1.getRangeValue)(options.size.animation.speed) * 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 = (0, NumberUtils_js_1.getRangeValue)(moveOptions.gravity.maxSpeed) * ratio;
+        props.maxSpeed = getRangeValue(moveOptions.gravity.maxSpeed) * ratio;
     }
 }
-exports.Retina = Retina;

package/cjs/Core/Utils/Constants.js

@@ -1,14 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.zIndexFactorOffset = exports.minimumLength = exports.minimumSize = exports.defaultTransformValue = exports.minVelocity = exports.threeQuarter = exports.quarter = exports.empty = exports.hPhase = exports.sMin = exports.hMin = exports.lMax = exports.sMax = exports.hMax = exports.rgbMax = exports.inverseFactorNumerator = exports.subdivideCount = exports.defaultReduceFactor = exports.defaultRatio = exports.defaultRemoveQuantity = exports.qTreeCapacity = exports.squareExp = exports.defaultRetryCount = exports.canvasTag = exports.generatedFalse = exports.generatedTrue = exports.defaultAlpha = exports.defaultFps = exports.doublePI = exports.double = exports.midColorValue = exports.randomColorValue = exports.defaultTransform = exports.originPoint = exports.millisecondsToSeconds = exports.half = 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.defaultTime = exports.defaultLoops = exports.defaultVelocity = exports.defaultRgbMin = exports.phaseNumerator = exports.sNormalizedOffset = exports.sextuple = exports.triple = exports.rgbFactor = exports.lMin = exports.lFactor = exports.minStrokeWidth = exports.identity = exports.defaultAngle = exports.manualDefaultPosition = exports.touchDelay = exports.deleteCount = exports.defaultDensityFactor = exports.lengthOffset = exports.manualCount = exports.minIndex = exports.minCount = exports.countOffset = exports.minLimit = exports.sizeFactor = exports.posOffset = exports.defaultRadius = exports.minZ = exports.rollFactor = exports.minRetries = exports.tryCountIncrement = exports.decayOffset = exports.none = exports.one = exports.loadMinIndex = exports.loadRandomFactor = exports.canvasFirstIndex = exports.minFpsLimit = exports.defaultFpsLimit = exports.removeMinIndex = exports.removeDeleteCount = exports.minCoordinate = exports.touchEndLengthOffset = exports.clickRadius = exports.defaultOpacity = void 0;
-exports.generatedAttribute = "generated", 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.touchCancelEvent = "touchcancel", exports.resizeEvent = "resize", exports.visibilityChangeEvent = "visibilitychange", exports.errorPrefix = "tsParticles - Error", exports.percentDenominator = 100, exports.half = 0.5, exports.millisecondsToSeconds = 1000, exports.originPoint = {
+export const generatedAttribute = "generated", mouseDownEvent = "pointerdown", mouseUpEvent = "pointerup", mouseLeaveEvent = "pointerleave", mouseOutEvent = "pointerout", mouseMoveEvent = "pointermove", touchStartEvent = "touchstart", touchEndEvent = "touchend", touchMoveEvent = "touchmove", touchCancelEvent = "touchcancel", resizeEvent = "resize", visibilityChangeEvent = "visibilitychange", percentDenominator = 100, half = 0.5, millisecondsToSeconds = 1000, originPoint = {
     x: 0,
     y: 0,
     z: 0,
-}, exports.defaultTransform = {
+}, defaultTransform = {
     a: 1,
     b: 0,
     c: 0,
     d: 1,
-}, exports.randomColorValue = "random", exports.midColorValue = "mid", exports.double = 2, exports.doublePI = Math.PI * exports.double, exports.defaultFps = 60, exports.defaultAlpha = 1, exports.generatedTrue = "true", exports.generatedFalse = "false", exports.canvasTag = "canvas", exports.defaultRetryCount = 0, exports.squareExp = 2, exports.qTreeCapacity = 4, exports.defaultRemoveQuantity = 1, exports.defaultRatio = 1, exports.defaultReduceFactor = 1, exports.subdivideCount = 4, exports.inverseFactorNumerator = 1.0, exports.rgbMax = 255, exports.hMax = 360, exports.sMax = 100, exports.lMax = 100, exports.hMin = 0, exports.sMin = 0, exports.hPhase = 60, exports.empty = 0, exports.quarter = 0.25, exports.threeQuarter = exports.half + exports.quarter, exports.minVelocity = 0, exports.defaultTransformValue = 1, exports.minimumSize = 0, exports.minimumLength = 0, exports.zIndexFactorOffset = 1, exports.defaultOpacity = 1, exports.clickRadius = 1, exports.touchEndLengthOffset = 1, exports.minCoordinate = 0, exports.removeDeleteCount = 1, exports.removeMinIndex = 0, exports.defaultFpsLimit = 120, exports.minFpsLimit = 0, exports.canvasFirstIndex = 0, exports.loadRandomFactor = 10000, exports.loadMinIndex = 0, exports.one = 1, exports.none = 0, exports.decayOffset = 1, exports.tryCountIncrement = 1, exports.minRetries = 0, exports.rollFactor = 1, exports.minZ = 0, exports.defaultRadius = 0, exports.posOffset = -exports.quarter, exports.sizeFactor = 1.5, exports.minLimit = 0, exports.countOffset = 1, exports.minCount = 0, exports.minIndex = 0, exports.manualCount = 0, exports.lengthOffset = 1, exports.defaultDensityFactor = 1, exports.deleteCount = 1, exports.touchDelay = 500, exports.manualDefaultPosition = 50, exports.defaultAngle = 0, exports.identity = 1, exports.minStrokeWidth = 0, exports.lFactor = 1, exports.lMin = 0, exports.rgbFactor = 255, exports.triple = 3, exports.sextuple = 6, exports.sNormalizedOffset = 1, exports.phaseNumerator = 1, exports.defaultRgbMin = 0, exports.defaultVelocity = 0, exports.defaultLoops = 0, exports.defaultTime = 0;
+}, randomColorValue = "random", midColorValue = "mid", double = 2, doublePI = Math.PI * double, defaultFps = 60, defaultAlpha = 1, generatedTrue = "true", generatedFalse = "false", canvasTag = "canvas", defaultRetryCount = 0, squareExp = 2, qTreeCapacity = 4, defaultRemoveQuantity = 1, defaultRatio = 1, defaultReduceFactor = 1, subdivideCount = 4, inverseFactorNumerator = 1.0, rgbMax = 255, hMax = 360, sMax = 100, lMax = 100, hMin = 0, sMin = 0, hPhase = 60, empty = 0, quarter = 0.25, threeQuarter = half + quarter, minVelocity = 0, defaultTransformValue = 1, minimumSize = 0, minimumLength = 0, zIndexFactorOffset = 1, defaultOpacity = 1, clickRadius = 1, touchEndLengthOffset = 1, minCoordinate = 0, removeDeleteCount = 1, removeMinIndex = 0, defaultFpsLimit = 120, minFpsLimit = 0, canvasFirstIndex = 0, loadRandomFactor = 10000, loadMinIndex = 0, one = 1, none = 0, decayOffset = 1, tryCountIncrement = 1, minRetries = 0, rollFactor = 1, minZ = 0, defaultRadius = 0, posOffset = -quarter, sizeFactor = 1.5, minLimit = 0, countOffset = 1, minCount = 0, minIndex = 0, manualCount = 0, lengthOffset = 1, defaultDensityFactor = 1, deleteCount = 1, touchDelay = 500, manualDefaultPosition = 50, defaultAngle = 0, identity = 1, minStrokeWidth = 0, lFactor = 1, lMin = 0, triple = 3, sextuple = 6, sNormalizedOffset = 1, phaseNumerator = 1, defaultRgbMin = 0, defaultVelocity = 0, defaultLoops = 0, defaultTime = 0;