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

package/scripts/install.js

@@ -8,7 +8,7 @@ try {
     console.log("You can find more samples on CodePen too: https://codepen.io/collection/DPOage");
     console.log("If you need documentation you can find it here: https://particles.js.org/docs");
     console.log(
-        "Don't forget to star the tsParticles repository, if you like the project and want to support it: https://github.com/matteobruni/tsparticles"
+        "Don't forget to star the tsParticles repository, if you like the project and want to support it: https://github.com/tsparticles/tsparticles"
     );
 
     const pkgSettings = require(path.join(process.env.INIT_CWD, "package.json"));
@@ -62,7 +62,7 @@ try {
                 "Found React installed. Please download react-particles to use tsParticles with a component ready to use and easier to configure."
             );
             console.log(
-                "You can read more about the component here: https://github.com/matteobruni/tsparticles/blob/main/components/react/README.md"
+                "You can read more about the component here: https://github.com/tsparticles/tsparticles/blob/main/components/react/README.md"
             );
         }
     }
@@ -90,7 +90,7 @@ try {
                     "Found Vue 3.x installed. Please Download vue3-particles to use tsParticles with a component ready to use and easier to configure."
                 );
                 console.log(
-                    "You can read more about the component here: https://github.com/matteobruni/tsparticles/blob/main/components/vue3/README.md"
+                    "You can read more about the component here: https://github.com/tsparticles/tsparticles/blob/main/components/vue3/README.md"
                 );
             }
         } else {
@@ -100,7 +100,7 @@ try {
                     "Found Vue 2.x installed. Please Download vue2-particles to use tsParticles with a component ready to use and easier to configure."
                 );
                 console.log(
-                    "You can read more about the component here: https://github.com/matteobruni/tsparticles/blob/main/components/vue/README.md"
+                    "You can read more about the component here: https://github.com/tsparticles/tsparticles/blob/main/components/vue/README.md"
                 );
             }
         }
@@ -113,7 +113,7 @@ try {
                 "Found Svelte installed. Please Download svelte-particles to use tsParticles with a component ready to use and easier to configure."
             );
             console.log(
-                "You can read more about the component here: https://github.com/matteobruni/tsparticles/blob/main/components/svelte/README.md"
+                "You can read more about the component here: https://github.com/tsparticles/tsparticles/blob/main/components/svelte/README.md"
             );
         }
     }
@@ -125,7 +125,7 @@ try {
                 "Found Inferno installed. Please Download inferno-particles to use tsParticles with a component ready to use and easier to configure."
             );
             console.log(
-                "You can read more about the component here: https://github.com/matteobruni/tsparticles/blob/main/components/inferno/README.md"
+                "You can read more about the component here: https://github.com/tsparticles/tsparticles/blob/main/components/inferno/README.md"
             );
         }
     }
@@ -137,7 +137,7 @@ try {
                 "Found Preact installed. Please Download preact-particles to use tsParticles with a component ready to use and easier to configure."
             );
             console.log(
-                "You can read more about the component here: https://github.com/matteobruni/tsparticles/blob/main/components/preact/README.md"
+                "You can read more about the component here: https://github.com/tsparticles/tsparticles/blob/main/components/preact/README.md"
             );
         }
     }
@@ -149,7 +149,7 @@ try {
                 "Found jQuery installed. Please Download jquery-particles to use tsParticles with a plugin ready to use and easier to configure."
             );
             console.log(
-                "You can read more about the plugin here: https://github.com/matteobruni/tsparticles/blob/main/components/jquery/README.md"
+                "You can read more about the plugin here: https://github.com/tsparticles/tsparticles/blob/main/components/jquery/README.md"
             );
         }
     }

package/tsparticles.engine.js

@@ -1,5 +1,5 @@
 /*!
- * tsParticles Engine v3.0.0-beta.1
+ * tsParticles Engine v3.0.0-beta.3
  * Author: Matteo Bruni
  * MIT license: https://opensource.org/licenses/MIT
  * Website: https://particles.js.org/
@@ -207,6 +207,7 @@ __webpack_require__.d(__webpack_exports__, {
   rectBounce: () => (/* reexport */ rectBounce),
   resizeEvent: () => (/* reexport */ resizeEvent),
   rgbToHsl: () => (/* reexport */ rgbToHsl),
+  safeIntersectionObserver: () => (/* reexport */ safeIntersectionObserver),
   safeMatchMedia: () => (/* reexport */ safeMatchMedia),
   safeMutationObserver: () => (/* reexport */ safeMutationObserver),
   setLogger: () => (/* reexport */ setLogger),
@@ -573,6 +574,12 @@ function safeMatchMedia(query) {
   }
   return matchMedia(query);
 }
+function safeIntersectionObserver(callback) {
+  if (isSsr() || typeof IntersectionObserver === "undefined") {
+    return;
+  }
+  return new IntersectionObserver(callback);
+}
 function safeMutationObserver(callback) {
   if (isSsr() || typeof MutationObserver === "undefined") {
     return;
@@ -1232,7 +1239,15 @@ 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();
   }
@@ -1242,11 +1257,19 @@ 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);
 }
-function drawShape(container, context, particle, radius, opacity, delta) {
+function drawShape(data) {
+  const {
+    container,
+    context,
+    particle,
+    radius,
+    opacity,
+    delta
+  } = data;
   if (!particle.shape) {
     return;
   }
@@ -1254,9 +1277,24 @@ 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
+  });
 }
-function drawShapeAfterEffect(container, context, particle, radius, opacity, delta) {
+function drawShapeAfterEffect(data) {
+  const {
+    container,
+    context,
+    particle,
+    radius,
+    opacity,
+    delta
+  } = data;
   if (!particle.shape) {
     return;
   }
@@ -1264,7 +1302,14 @@ function drawShapeAfterEffect(container, context, particle, radius, opacity, del
   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
+  });
 }
 function drawPlugin(context, plugin, delta) {
   if (!plugin.draw) {
@@ -3648,7 +3693,17 @@ class InteractionManager {
 
 
 
-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;
   }
@@ -3658,7 +3713,7 @@ const fixOutMode = data => {
   } else if (data.coord < diameter) {
     data.setCb(data.radius);
   }
-};
+}
 class Particle {
   constructor(engine, id, container, position, overrideOptions, group) {
     this.container = container;
@@ -3783,16 +3838,6 @@ 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);
   }
@@ -3881,7 +3926,7 @@ 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) {
@@ -4192,8 +4237,9 @@ 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,
@@ -4300,7 +4346,7 @@ class Particles {
     this.addManualParticles();
     if (!handled) {
       const particlesOptions = options.particles,
-        groups = options.particles.groups;
+        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++) {
@@ -4476,7 +4522,6 @@ function loadContainerOptions(engine, container, ...sourceOptionsArr) {
 }
 class Container {
   constructor(engine, id, sourceOptions) {
-    this.id = id;
     this._intersectionManager = entries => {
       if (!guardCheck(this) || !this.actualOptions.pauseOnOutsideViewport) {
         return;
@@ -4515,6 +4560,7 @@ class Container {
       }
     };
     this._engine = engine;
+    this.id = Symbol(id);
     this.fpsLimit = 120;
     this.smooth = false;
     this._delay = 0;
@@ -4544,9 +4590,7 @@ class Container {
     this._options = loadContainerOptions(this._engine, this);
     this.actualOptions = loadContainerOptions(this._engine, this);
     this._eventListeners = new EventListeners(this);
-    if (typeof IntersectionObserver !== "undefined" && IntersectionObserver) {
-      this._intersectionObserver = new IntersectionObserver(entries => this._intersectionManager(entries));
-    }
+    this._intersectionObserver = safeIntersectionObserver(entries => this._intersectionManager(entries));
     this._engine.dispatchEvent("containerBuilt", {
       container: this
     });
@@ -4989,17 +5033,17 @@ 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);
+  addConfig(config) {
+    const name = config.name ?? "default";
+    this._configs.set(name, config);
+    this._eventDispatcher.dispatchEvent("configAdded", {
+      data: {
+        name,
+        config
       }
-    } else {
-      this._configs.set(nameOrConfig.name ?? "default", nameOrConfig);
-    }
+    });
   }
   addEventListener(type, listener) {
     this._eventDispatcher.addEventListener(type, listener);
@@ -5028,44 +5072,11 @@ 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);
@@ -5143,7 +5154,7 @@ class Engine {
     }
     const currentOptions = itemFromSingleOrMultiple(options, index),
       dom = this.dom(),
-      oldIndex = dom.findIndex(v => v.id === id);
+      oldIndex = dom.findIndex(v => v.id.description === id);
     if (oldIndex >= 0) {
       const old = this.domItem(oldIndex);
       if (old && !old.destroyed) {