@tsparticles/engine 4.0.5 → 4.1.0

package/esm/Core/Utils/SpatialHashGrid.js

@@ -1,41 +1,41 @@
 import { Circle, Rectangle } from "./Ranges.js";
 export class SpatialHashGrid {
-    _cellSize;
-    _cells = new Map();
-    _circlePool = [];
-    _circlePoolIdx;
-    _pendingCellSize;
-    _rectanglePool = [];
-    _rectanglePoolIdx;
+    #cellSize;
+    #cells = new Map();
+    #circlePool = [];
+    #circlePoolIdx;
+    #pendingCellSize;
+    #rectanglePool = [];
+    #rectanglePoolIdx;
     constructor(cellSize) {
-        this._cellSize = cellSize;
-        this._circlePoolIdx = 0;
-        this._rectanglePoolIdx = 0;
+        this.#cellSize = cellSize;
+        this.#circlePoolIdx = 0;
+        this.#rectanglePoolIdx = 0;
     }
     clear() {
-        this._cells.clear();
-        const pendingCellSize = this._pendingCellSize;
+        this.#cells.clear();
+        const pendingCellSize = this.#pendingCellSize;
         if (pendingCellSize) {
-            this._cellSize = pendingCellSize;
+            this.#cellSize = pendingCellSize;
         }
-        this._pendingCellSize = undefined;
+        this.#pendingCellSize = undefined;
     }
     insert(particle) {
-        const { x, y } = particle.getPosition(), key = this._cellKeyFromCoords(x, y);
-        if (!this._cells.has(key)) {
-            this._cells.set(key, []);
+        const { x, y } = particle.getPosition(), key = this.#cellKeyFromCoords(x, y);
+        if (!this.#cells.has(key)) {
+            this.#cells.set(key, []);
         }
-        this._cells.get(key)?.push(particle);
+        this.#cells.get(key)?.push(particle);
     }
     query(range, check, out = []) {
-        const bounds = this._getRangeBounds(range);
+        const bounds = this.#getRangeBounds(range);
         if (!bounds) {
             return out;
         }
-        const minCellX = Math.floor(bounds.minX / this._cellSize), maxCellX = Math.floor(bounds.maxX / this._cellSize), minCellY = Math.floor(bounds.minY / this._cellSize), maxCellY = Math.floor(bounds.maxY / this._cellSize);
+        const minCellX = Math.floor(bounds.minX / this.#cellSize), maxCellX = Math.floor(bounds.maxX / this.#cellSize), minCellY = Math.floor(bounds.minY / this.#cellSize), maxCellY = Math.floor(bounds.maxY / this.#cellSize);
         for (let cx = minCellX; cx <= maxCellX; cx++) {
             for (let cy = minCellY; cy <= maxCellY; cy++) {
-                const key = `${cx}_${cy}`, cellParticles = this._cells.get(key);
+                const key = `${cx}_${cy}`, cellParticles = this.#cells.get(key);
                 if (!cellParticles) {
                     continue;
                 }
@@ -52,29 +52,29 @@ export class SpatialHashGrid {
         return out;
     }
     queryCircle(position, radius, check, out = []) {
-        const circle = this._acquireCircle(position.x, position.y, radius), result = this.query(circle, check, out);
-        this._releaseShapes();
+        const circle = this.#acquireCircle(position.x, position.y, radius), result = this.query(circle, check, out);
+        this.#releaseShapes();
         return result;
     }
     queryRectangle(position, size, check, out = []) {
-        const rect = this._acquireRectangle(position.x, position.y, size.width, size.height), result = this.query(rect, check, out);
-        this._releaseShapes();
+        const rect = this.#acquireRectangle(position.x, position.y, size.width, size.height), result = this.query(rect, check, out);
+        this.#releaseShapes();
         return result;
     }
     setCellSize(cellSize) {
-        this._pendingCellSize = cellSize;
+        this.#pendingCellSize = cellSize;
     }
-    _acquireCircle(x, y, r) {
-        return (this._circlePool[this._circlePoolIdx++] ??= new Circle(x, y, r)).reset(x, y, r);
+    #acquireCircle(x, y, r) {
+        return (this.#circlePool[this.#circlePoolIdx++] ??= new Circle(x, y, r)).reset(x, y, r);
     }
-    _acquireRectangle(x, y, w, h) {
-        return (this._rectanglePool[this._rectanglePoolIdx++] ??= new Rectangle(x, y, w, h)).reset(x, y, w, h);
+    #acquireRectangle(x, y, w, h) {
+        return (this.#rectanglePool[this.#rectanglePoolIdx++] ??= new Rectangle(x, y, w, h)).reset(x, y, w, h);
     }
-    _cellKeyFromCoords(x, y) {
-        const cellX = Math.floor(x / this._cellSize), cellY = Math.floor(y / this._cellSize);
+    #cellKeyFromCoords(x, y) {
+        const cellX = Math.floor(x / this.#cellSize), cellY = Math.floor(y / this.#cellSize);
         return `${cellX}_${cellY}`;
     }
-    _getRangeBounds(range) {
+    #getRangeBounds(range) {
         if (range instanceof Circle) {
             const r = range.radius, { x, y } = range.position;
             return {
@@ -95,8 +95,8 @@ export class SpatialHashGrid {
         }
         return null;
     }
-    _releaseShapes() {
-        this._circlePoolIdx = 0;
-        this._rectanglePoolIdx = 0;
+    #releaseShapes() {
+        this.#circlePoolIdx = 0;
+        this.#rectanglePoolIdx = 0;
     }
 }

package/esm/Core/Utils/Vectors.js

@@ -18,13 +18,13 @@ export class Vector3d {
         return Math.atan2(this.y, this.x);
     }
     set angle(angle) {
-        this._updateFromAngle(angle, this.length);
+        this.#updateFromAngle(angle, this.length);
     }
     get length() {
         return Math.sqrt(this.getLengthSq());
     }
     set length(length) {
-        this._updateFromAngle(this.angle, length);
+        this.#updateFromAngle(this.angle, length);
     }
     static clone(source) {
         return Vector3d.create(source.x, source.y, getZ(source));
@@ -87,7 +87,7 @@ export class Vector3d {
         this.y -= v.y;
         this.z -= getZ(v);
     }
-    _updateFromAngle(angle, length) {
+    #updateFromAngle(angle, length) {
         this.x = Math.cos(angle) * length;
         this.y = Math.sin(angle) * length;
     }

package/esm/Options/Classes/Options.js

@@ -27,11 +27,11 @@ export class Options {
     smooth;
     style;
     zLayers;
-    _container;
-    _pluginManager;
+    #container;
+    #pluginManager;
     constructor(pluginManager, container) {
-        this._pluginManager = pluginManager;
-        this._container = container;
+        this.#pluginManager = pluginManager;
+        this.#container = container;
         this.autoPlay = true;
         this.background = new Background();
         this.clear = true;
@@ -42,7 +42,7 @@ export class Options {
         this.duration = 0;
         this.fpsLimit = 120;
         this.hdr = true;
-        this.particles = loadParticlesOptions(this._pluginManager, this._container);
+        this.particles = loadParticlesOptions(this.#pluginManager, this.#container);
         this.pauseOnBlur = true;
         this.pauseOnOutsideViewport = true;
         this.resize = new ResizeEvent();
@@ -57,12 +57,12 @@ export class Options {
         if (data.preset !== undefined) {
             this.preset = data.preset;
             executeOnSingleOrMultiple(this.preset, preset => {
-                this._importPreset(preset);
+                this.#importPreset(preset);
             });
         }
         if (data.palette !== undefined) {
             this.palette = data.palette;
-            this._importPalette(this.palette);
+            this.#importPalette(this.palette);
         }
         if (data.autoPlay !== undefined) {
             this.autoPlay = data.autoPlay;
@@ -116,12 +116,12 @@ export class Options {
         if (data.smooth !== undefined) {
             this.smooth = data.smooth;
         }
-        this._pluginManager.plugins.forEach(plugin => {
-            plugin.loadOptions(this._container, this, data);
+        this.#pluginManager.plugins.forEach(plugin => {
+            plugin.loadOptions(this.#container, this, data);
         });
     }
-    _importPalette = palette => {
-        const paletteData = this._pluginManager.getPalette(palette);
+    #importPalette = palette => {
+        const paletteData = this.#pluginManager.getPalette(palette);
         if (!paletteData) {
             return;
         }
@@ -138,7 +138,7 @@ export class Options {
             },
         });
     };
-    _importPreset = preset => {
-        this.load(this._pluginManager.getPreset(preset));
+    #importPreset = preset => {
+        this.load(this.#pluginManager.getPreset(preset));
     };
 }

package/esm/Options/Classes/Particles/ParticlesOptions.js

@@ -4,12 +4,10 @@ import { AnimatableColor } from "../AnimatableColor.js";
 import { Effect } from "./Effect/Effect.js";
 import { Fill } from "./Fill.js";
 import { Move } from "./Move/Move.js";
-import { Opacity } from "./Opacity/Opacity.js";
 import { Paint } from "./Paint.js";
 import { ParticlesBounce } from "./Bounce/ParticlesBounce.js";
 import { ParticlesNumber } from "./Number/ParticlesNumber.js";
 import { Shape } from "./Shape/Shape.js";
-import { Size } from "./Size/Size.js";
 import { ZIndex } from "./ZIndex/ZIndex.js";
 export class ParticlesOptions {
     bounce;
@@ -17,24 +15,21 @@ export class ParticlesOptions {
     groups;
     move;
     number;
-    opacity;
     paint;
     palette;
     reduceDuplicates;
     shape;
-    size;
     zIndex;
-    _container;
-    _pluginManager;
+    #container;
+    #pluginManager;
     constructor(pluginManager, container) {
-        this._pluginManager = pluginManager;
-        this._container = container;
+        this.#pluginManager = pluginManager;
+        this.#container = container;
         this.bounce = new ParticlesBounce();
         this.effect = new Effect();
         this.groups = {};
         this.move = new Move();
         this.number = new ParticlesNumber();
-        this.opacity = new Opacity();
         this.paint = new Paint();
         this.paint.color = new AnimatableColor();
         this.paint.color.value = "#fff";
@@ -42,7 +37,6 @@ export class ParticlesOptions {
         this.paint.fill.enable = true;
         this.reduceDuplicates = false;
         this.shape = new Shape();
-        this.size = new Size();
         this.zIndex = new ZIndex();
     }
     load(data) {
@@ -51,7 +45,7 @@ export class ParticlesOptions {
         }
         if (data.palette) {
             this.palette = data.palette;
-            this._importPalette(this.palette);
+            this.#importPalette(this.palette);
         }
         if (data.groups !== undefined) {
             for (const group of Object.keys(data.groups)) {
@@ -71,7 +65,6 @@ export class ParticlesOptions {
         this.effect.load(data.effect);
         this.move.load(data.move);
         this.number.load(data.number);
-        this.opacity.load(data.opacity);
         const paintToLoad = data.paint;
         if (paintToLoad) {
             if (isArray(paintToLoad)) {
@@ -90,15 +83,14 @@ export class ParticlesOptions {
             }
         }
         this.shape.load(data.shape);
-        this.size.load(data.size);
         this.zIndex.load(data.zIndex);
-        if (this._container) {
-            for (const plugin of this._pluginManager.plugins) {
+        if (this.#container) {
+            for (const plugin of this.#pluginManager.plugins) {
                 if (plugin.loadParticlesOptions) {
-                    plugin.loadParticlesOptions(this._container, this, data);
+                    plugin.loadParticlesOptions(this.#container, this, data);
                 }
             }
-            const updaters = this._pluginManager.updaters.get(this._container);
+            const updaters = this.#pluginManager.updaters.get(this.#container);
             if (updaters) {
                 for (const updater of updaters) {
                     if (updater.loadOptions) {
@@ -108,8 +100,8 @@ export class ParticlesOptions {
             }
         }
     }
-    _importPalette = (palette) => {
-        const paletteData = this._pluginManager.getPalette(palette);
+    #importPalette = (palette) => {
+        const paletteData = this.#pluginManager.getPalette(palette);
         if (!paletteData) {
             return;
         }

package/esm/Utils/EventDispatcher.js

@@ -1,37 +1,37 @@
 import { deleteCount, minIndex } from "../Core/Utils/Constants.js";
 export class EventDispatcher {
-    _listeners;
+    #listeners;
     constructor() {
-        this._listeners = new Map();
+        this.#listeners = new Map();
     }
     addEventListener(type, listener) {
         this.removeEventListener(type, listener);
-        let arr = this._listeners.get(type);
+        let arr = this.#listeners.get(type);
         if (!arr) {
             arr = [];
-            this._listeners.set(type, arr);
+            this.#listeners.set(type, arr);
         }
         arr.push(listener);
     }
     dispatchEvent(type, args) {
-        const listeners = this._listeners.get(type);
+        const listeners = this.#listeners.get(type);
         listeners?.forEach(handler => {
             handler(args);
         });
     }
     hasEventListener(type) {
-        return !!this._listeners.get(type);
+        return !!this.#listeners.get(type);
     }
     removeAllEventListeners(type) {
         if (!type) {
-            this._listeners = new Map();
+            this.#listeners = new Map();
         }
         else {
-            this._listeners.delete(type);
+            this.#listeners.delete(type);
         }
     }
     removeEventListener(type, listener) {
-        const arr = this._listeners.get(type);
+        const arr = this.#listeners.get(type);
         if (!arr) {
             return;
         }
@@ -40,7 +40,7 @@ export class EventDispatcher {
             return;
         }
         if (length === deleteCount) {
-            this._listeners.delete(type);
+            this.#listeners.delete(type);
         }
         else {
             arr.splice(idx, deleteCount);

package/esm/exports.js

@@ -40,11 +40,7 @@ export * from "./Options/Classes/Particles/Move/Spin.js";
 export * from "./Options/Classes/Particles/Number/ParticlesNumber.js";
 export * from "./Options/Classes/Particles/Number/ParticlesNumberLimit.js";
 export * from "./Options/Classes/Particles/Number/ParticlesDensity.js";
-export * from "./Options/Classes/Particles/Opacity/Opacity.js";
-export * from "./Options/Classes/Particles/Opacity/OpacityAnimation.js";
 export * from "./Options/Classes/Particles/Shape/Shape.js";
-export * from "./Options/Classes/Particles/Size/Size.js";
-export * from "./Options/Classes/Particles/Size/SizeAnimation.js";
 export * from "./Options/Classes/Particles/ZIndex/ZIndex.js";
 export * from "./Options/Classes/ResizeEvent.js";
 export * from "./Options/Classes/ValueWithRandom.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/engine",
-  "version": "4.0.5",
+  "version": "4.1.0",
   "description": "Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.",
   "homepage": "https://particles.js.org",
   "scripts": {