@tsparticles/engine 3.0.0-beta.1 → 3.0.0-beta.3

package/esm/Core/Engine.js

@@ -1,5 +1,5 @@
 import { errorPrefix, generatedAttribute } from "./Utils/Constants.js";
-import { executeOnSingleOrMultiple, getLogger, isBoolean, isFunction, isString, itemFromSingleOrMultiple, } from "../Utils/Utils.js";
+import { executeOnSingleOrMultiple, getLogger, itemFromSingleOrMultiple } from "../Utils/Utils.js";
 import { Container } from "./Container.js";
 import { EventDispatcher } from "../Utils/EventDispatcher.js";
 import { getRandom } from "../Utils/NumberUtils.js";
@@ -50,18 +50,12 @@ export class Engine {
         return res;
     }
     get version() {
-        return "3.0.0-beta.1";
+        return "3.0.0-beta.3";
     }
-    addConfig(nameOrConfig, config) {
-        if (isString(nameOrConfig)) {
-            if (config) {
-                config.name = nameOrConfig;
-                this._configs.set(nameOrConfig, config);
-            }
-        }
-        else {
-            this._configs.set(nameOrConfig.name ?? "default", nameOrConfig);
-        }
+    addConfig(config) {
+        const name = config.name ?? "default";
+        this._configs.set(name, config);
+        this._eventDispatcher.dispatchEvent("configAdded", { data: { name, config } });
     }
     addEventListener(type, listener) {
         this._eventDispatcher.addEventListener(type, listener);
@@ -90,45 +84,11 @@ export class Engine {
         (override || !this.getPreset(preset)) && this.presets.set(preset, options);
         await this.refresh(refresh);
     }
-    async addShape(shape, drawer, initOrRefresh, afterEffectOrRefresh, destroyOrRefresh, refresh = true) {
-        let customDrawer;
-        let realRefresh = refresh, realInit, realAfterEffect, realDestroy;
-        if (isBoolean(initOrRefresh)) {
-            realRefresh = initOrRefresh;
-            realInit = undefined;
-        }
-        else {
-            realInit = initOrRefresh;
-        }
-        if (isBoolean(afterEffectOrRefresh)) {
-            realRefresh = afterEffectOrRefresh;
-            realAfterEffect = undefined;
-        }
-        else {
-            realAfterEffect = afterEffectOrRefresh;
-        }
-        if (isBoolean(destroyOrRefresh)) {
-            realRefresh = destroyOrRefresh;
-            realDestroy = undefined;
-        }
-        else {
-            realDestroy = destroyOrRefresh;
-        }
-        if (isFunction(drawer)) {
-            customDrawer = {
-                afterEffect: realAfterEffect,
-                destroy: realDestroy,
-                draw: drawer,
-                init: realInit,
-            };
-        }
-        else {
-            customDrawer = drawer;
-        }
+    async addShape(shape, drawer, refresh = true) {
         executeOnSingleOrMultiple(shape, (type) => {
-            !this.getShapeDrawer(type) && this.drawers.set(type, customDrawer);
+            !this.getShapeDrawer(type) && this.drawers.set(type, drawer);
         });
-        await this.refresh(realRefresh);
+        await this.refresh(refresh);
     }
     clearPlugins(container) {
         this.updaters.delete(container);
@@ -194,7 +154,7 @@ export class Engine {
             domContainer.id = id;
             document.body.append(domContainer);
         }
-        const currentOptions = itemFromSingleOrMultiple(options, index), dom = this.dom(), oldIndex = dom.findIndex((v) => v.id === id);
+        const currentOptions = itemFromSingleOrMultiple(options, index), dom = this.dom(), oldIndex = dom.findIndex((v) => v.id.description === id);
         if (oldIndex >= 0) {
             const old = this.domItem(oldIndex);
             if (old && !old.destroyed) {

package/esm/Core/Particle.js

@@ -7,7 +7,17 @@ import { Vector3d } from "./Utils/Vector3d.js";
 import { alterHsl } from "../Utils/CanvasUtils.js";
 import { errorPrefix } from "./Utils/Constants.js";
 import { loadParticlesOptions } from "../Utils/OptionsUtils.js";
-const fixOutMode = (data) => {
+function loadShapeData(shape, shapeOptions, id, reduceDuplicates) {
+    const shapeData = shapeOptions.options[shape];
+    if (!shapeData) {
+        return;
+    }
+    return deepExtend({
+        close: shapeOptions.close,
+        fill: shapeOptions.fill,
+    }, itemFromSingleOrMultiple(shapeData, id, reduceDuplicates));
+}
+function fixOutMode(data) {
     if (!isInArray(data.outMode, data.checkModes)) {
         return;
     }
@@ -18,7 +28,7 @@ const fixOutMode = (data) => {
     else if (data.coord < diameter) {
         data.setCb(data.radius);
     }
-};
+}
 export class Particle {
     constructor(engine, id, container, position, overrideOptions, group) {
         this.container = container;
@@ -129,16 +139,6 @@ export class Particle {
             }
             this.offset = Vector.origin;
         };
-        this._loadShapeData = (shapeOptions, reduceDuplicates) => {
-            const shapeData = shapeOptions.options[this.shape];
-            if (!shapeData) {
-                return;
-            }
-            return deepExtend({
-                close: shapeOptions.close,
-                fill: shapeOptions.fill,
-            }, itemFromSingleOrMultiple(shapeData, this.id, reduceDuplicates));
-        };
         this._engine = engine;
         this.init(id, position, overrideOptions, group);
     }
@@ -217,7 +217,7 @@ export class Particle {
                 shapeOptions.load(overrideOptions.shape);
             }
         }
-        this.shapeData = this._loadShapeData(shapeOptions, reduceDuplicates);
+        this.shapeData = loadShapeData(this.shape, shapeOptions, this.id, reduceDuplicates);
         particlesOptions.load(overrideOptions);
         const shapeData = this.shapeData;
         if (shapeData) {

package/esm/Core/Particles.js

@@ -70,8 +70,9 @@ export class Particles {
                 return false;
             }
             particle.destroy(override);
+            const zIdx = this._zArray.indexOf(particle);
             this._array.splice(index, 1);
-            this._zArray = this._zArray.splice(this._zArray.indexOf(particle), 1);
+            this._zArray.splice(zIdx, 1);
             this.pool.push(particle);
             this._engine.dispatchEvent("particleRemoved", {
                 container: this._container,
@@ -172,7 +173,7 @@ export class Particles {
         }
         this.addManualParticles();
         if (!handled) {
-            const particlesOptions = options.particles, groups = options.particles.groups;
+            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++) {

package/esm/Utils/CanvasUtils.js

@@ -58,7 +58,8 @@ export function drawParticle(data) {
     if (colorStyles.stroke) {
         context.strokeStyle = colorStyles.stroke;
     }
-    drawShape(container, context, particle, radius, opacity, delta);
+    const drawData = { container, context, particle, radius, opacity, delta };
+    drawShape(drawData);
     if (strokeWidth > 0) {
         context.stroke();
     }
@@ -68,11 +69,12 @@ export function drawParticle(data) {
     if (particle.fill) {
         context.fill();
     }
-    drawShapeAfterEffect(container, context, particle, radius, opacity, delta);
+    drawShapeAfterEffect(drawData);
     context.globalCompositeOperation = "source-over";
     context.setTransform(1, 0, 0, 1, 0, 0);
 }
-export function drawShape(container, context, particle, radius, opacity, delta) {
+export function drawShape(data) {
+    const { container, context, particle, radius, opacity, delta } = data;
     if (!particle.shape) {
         return;
     }
@@ -80,9 +82,10 @@ export function drawShape(container, context, particle, radius, opacity, delta)
     if (!drawer) {
         return;
     }
-    drawer.draw(context, particle, radius, opacity, delta, container.retina.pixelRatio);
+    drawer.draw({ context, particle, radius, opacity, delta, pixelRatio: container.retina.pixelRatio });
 }
-export function drawShapeAfterEffect(container, context, particle, radius, opacity, delta) {
+export function drawShapeAfterEffect(data) {
+    const { container, context, particle, radius, opacity, delta } = data;
     if (!particle.shape) {
         return;
     }
@@ -90,7 +93,7 @@ export function drawShapeAfterEffect(container, context, particle, radius, opaci
     if (!drawer || !drawer.afterEffect) {
         return;
     }
-    drawer.afterEffect(context, particle, radius, opacity, delta, container.retina.pixelRatio);
+    drawer.afterEffect({ context, particle, radius, opacity, delta, pixelRatio: container.retina.pixelRatio });
 }
 export function drawPlugin(context, plugin, delta) {
     if (!plugin.draw) {

package/esm/Utils/Utils.js

@@ -52,6 +52,12 @@ export function safeMatchMedia(query) {
     }
     return matchMedia(query);
 }
+export function safeIntersectionObserver(callback) {
+    if (isSsr() || typeof IntersectionObserver === "undefined") {
+        return;
+    }
+    return new IntersectionObserver(callback);
+}
 export function safeMutationObserver(callback) {
     if (isSsr() || typeof MutationObserver === "undefined") {
         return;

package/esm/export-types.js

@@ -15,7 +15,6 @@ export * from "./Core/Interfaces/IInteractor.js";
 export * from "./Core/Interfaces/ILoadParams.js";
 export * from "./Core/Interfaces/IMouseData.js";
 export * from "./Core/Interfaces/IMovePathGenerator.js";
-export * from "./Core/Interfaces/IParticle.js";
 export * from "./Core/Interfaces/IParticleColorStyle.js";
 export * from "./Core/Interfaces/IParticleHslAnimation.js";
 export * from "./Core/Interfaces/IParticleLife.js";
@@ -93,5 +92,4 @@ export * from "./Types/PathOptions.js";
 export * from "./Types/RangeValue.js";
 export * from "./Types/RecursivePartial.js";
 export * from "./Types/ShapeData.js";
-export * from "./Types/ShapeDrawerFunctions.js";
 export * from "./Types/SingleOrMultiple.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/engine",
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0-beta.3",
   "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": {
@@ -8,7 +8,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/matteobruni/tsparticles.git",
+    "url": "git+https://github.com/tsparticles/tsparticles.git",
     "directory": "engine"
   },
   "keywords": [
@@ -67,7 +67,7 @@
   "author": "Matteo Bruni <matteo.bruni@me.com>",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/matteobruni/tsparticles/issues"
+    "url": "https://github.com/tsparticles/tsparticles/issues"
   },
   "funding": [
     {