@tsparticles/slim 3.0.1 → 3.0.3

package/tsparticles.slim.bundle.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v3.0.1
+ * v3.0.3
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -3900,6 +3900,12 @@ class Particle {
       updater.particleDestroyed && updater.particleDestroyed(this, override);
     }
     pathGenerator && pathGenerator.reset(this);
+    this._engine.dispatchEvent("particleDestroyed", {
+      container: this.container,
+      data: {
+        particle: this
+      }
+    });
   }
   draw(delta) {
     const container = this.container,
@@ -4252,6 +4258,11 @@ const qTreeRectangle = canvasSize => {
 };
 class Particles {
   constructor(engine, container) {
+    this._addToPool = (...particles) => {
+      for (const particle of particles) {
+        this._pool.push(particle);
+      }
+    };
     this._applyDensity = (options, manualCount, group) => {
       const numberOptions = options.number;
       if (!options.number.density?.enable) {
@@ -4322,17 +4333,17 @@ class Particles {
       if (!particle || particle.group !== group) {
         return false;
       }
-      particle.destroy(override);
       const zIdx = this._zArray.indexOf(particle);
       this._array.splice(index, 1);
       this._zArray.splice(zIdx, 1);
-      this._pool.push(particle);
+      particle.destroy(override);
       this._engine.dispatchEvent("particleRemoved", {
         container: this._container,
         data: {
           particle
         }
       });
+      this._addToPool(particle);
       return true;
     };
     this._engine = engine;
@@ -4530,7 +4541,15 @@ class Particles {
       const checkDelete = p => !particlesToDelete.has(p);
       this._array = this.filter(checkDelete);
       this._zArray = this._zArray.filter(checkDelete);
-      this._pool.push(...particlesToDelete);
+      for (const particle of particlesToDelete) {
+        this._engine.dispatchEvent("particleRemoved", {
+          container: this._container,
+          data: {
+            particle
+          }
+        });
+      }
+      this._addToPool(...particlesToDelete);
     }
     await this._interactionManager.externalInteract(delta);
     for (const particle of this._array) {
@@ -5146,7 +5165,7 @@ class Engine {
     return res;
   }
   get version() {
-    return "3.0.1";
+    return "3.0.3";
   }
   addConfig(config) {
     const name = config.name ?? "default";
@@ -5261,7 +5280,7 @@ class Engine {
     this._initialized = true;
   }
   async load(params) {
-    const id = params.id ?? `tsparticles${Math.floor(getRandom() * 10000)}`,
+    const id = params.id ?? params.element?.id ?? `tsparticles${Math.floor(getRandom() * 10000)}`,
       {
         index,
         url
@@ -6467,8 +6486,9 @@ class EmojiDrawer {
     this._emojiShapeDict = new Map();
   }
   destroy() {
-    for (const [, emojiData] of this._emojiShapeDict) {
+    for (const [key, emojiData] of this._emojiShapeDict) {
       emojiData instanceof ImageBitmap && emojiData?.close();
+      this._emojiShapeDict.delete(key);
     }
   }
   draw(data) {
@@ -6503,52 +6523,50 @@ class EmojiDrawer {
     delete particle.emojiData;
   }
   particleInit(container, particle) {
-    if (!particle.emojiData) {
-      const shapeData = particle.shapeData;
-      if (!shapeData?.value) {
-        return;
-      }
-      const emoji = itemFromSingleOrMultiple(shapeData.value, particle.randomIndexData),
-        font = shapeData.font ?? defaultFont;
-      if (!emoji) {
+    const shapeData = particle.shapeData;
+    if (!shapeData?.value) {
+      return;
+    }
+    const emoji = itemFromSingleOrMultiple(shapeData.value, particle.randomIndexData),
+      font = shapeData.font ?? defaultFont;
+    if (!emoji) {
+      return;
+    }
+    const key = `${emoji}_${font}`,
+      existingData = this._emojiShapeDict.get(key);
+    if (existingData) {
+      particle.emojiData = existingData;
+      return;
+    }
+    const canvasSize = getRangeMax(particle.size.value) * 2;
+    let emojiData;
+    if (typeof OffscreenCanvas !== "undefined") {
+      const canvas = new OffscreenCanvas(canvasSize, canvasSize),
+        context = canvas.getContext("2d");
+      if (!context) {
         return;
       }
-      const key = `${emoji}_${font}`,
-        existingData = this._emojiShapeDict.get(key);
-      if (existingData) {
-        particle.emojiData = existingData;
+      context.font = `400 ${getRangeMax(particle.size.value) * 2}px ${font}`;
+      context.textBaseline = "middle";
+      context.textAlign = "center";
+      context.fillText(emoji, getRangeMax(particle.size.value), getRangeMax(particle.size.value));
+      emojiData = canvas.transferToImageBitmap();
+    } else {
+      const canvas = document.createElement("canvas");
+      canvas.width = canvasSize;
+      canvas.height = canvasSize;
+      const context = canvas.getContext("2d");
+      if (!context) {
         return;
       }
-      const canvasSize = getRangeMax(particle.size.value) * 2;
-      let emojiData;
-      if (typeof OffscreenCanvas !== "undefined") {
-        const canvas = new OffscreenCanvas(canvasSize, canvasSize),
-          context = canvas.getContext("2d");
-        if (!context) {
-          return;
-        }
-        context.font = `400 ${getRangeMax(particle.size.value) * 2}px ${font}`;
-        context.textBaseline = "middle";
-        context.textAlign = "center";
-        context.fillText(emoji, getRangeMax(particle.size.value), getRangeMax(particle.size.value));
-        emojiData = canvas.transferToImageBitmap();
-      } else {
-        const canvas = document.createElement("canvas");
-        canvas.width = canvasSize;
-        canvas.height = canvasSize;
-        const context = canvas.getContext("2d");
-        if (!context) {
-          return;
-        }
-        context.font = `400 ${getRangeMax(particle.size.value) * 2}px ${font}`;
-        context.textBaseline = "middle";
-        context.textAlign = "center";
-        context.fillText(emoji, getRangeMax(particle.size.value), getRangeMax(particle.size.value));
-        emojiData = canvas;
-      }
-      this._emojiShapeDict.set(key, emojiData);
-      particle.emojiData = emojiData;
+      context.font = `400 ${getRangeMax(particle.size.value) * 2}px ${font}`;
+      context.textBaseline = "middle";
+      context.textAlign = "center";
+      context.fillText(emoji, getRangeMax(particle.size.value), getRangeMax(particle.size.value));
+      emojiData = canvas;
     }
+    this._emojiShapeDict.set(key, emojiData);
+    particle.emojiData = emojiData;
   }
 }
 ;// CONCATENATED MODULE: ../../shapes/emoji/dist/browser/index.js