@tsparticles/all 3.0.1 → 3.0.3

package/tsparticles.all.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
@@ -7684,6 +7703,7 @@ class EmitterInstance {
         }
         if (this._lifeCount > 0 || this._immortal) {
           this.position = this._calcPosition();
+          this._shape?.resize(this.position, this.size);
           this._spawnDelay = getRangeValue(this.options.life.delay ?? 0) * 1000 / this.container.retina.reduceFactor;
         } else {
           this._destroy();
@@ -10780,8 +10800,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) {
@@ -10816,52 +10837,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
@@ -19929,32 +19948,35 @@ class SoundsInstance {
         return;
       }
       for (const event of soundsOptions.events) {
-        const cb = async args => {
-          if (this._container !== args.container) {
-            return;
-          }
-          if (!this._container || this._container.muted || this._container.destroyed) {
-            executeOnSingleOrMultiple(event.event, item => {
-              this._engine.removeEventListener(item, cb);
-            });
-            return;
-          }
-          if (event.filter && !event.filter(args)) {
-            return;
-          }
-          if (event.audio) {
-            this._playBuffer(itemFromSingleOrMultiple(event.audio));
-          } else if (event.melodies) {
-            const melody = itemFromArray(event.melodies);
-            if (melody.melodies.length) {
-              await Promise.allSettled(melody.melodies.map(m => this._playNote(m.notes, 0, melody.loop)));
-            } else {
-              await this._playNote(melody.notes, 0, melody.loop);
+        const cb = args => {
+          (async () => {
+            const filterNotValid = event.filter && !event.filter(args);
+            if (this._container !== args.container) {
+              return;
             }
-          } else if (event.notes) {
-            const note = itemFromArray(event.notes);
-            await this._playNote([note], 0, false);
-          }
+            if (!this._container || this._container.muted || this._container.destroyed) {
+              executeOnSingleOrMultiple(event.event, item => {
+                this._engine.removeEventListener(item, cb);
+              });
+              return;
+            }
+            if (filterNotValid) {
+              return;
+            }
+            if (event.audio) {
+              this._playBuffer(itemFromSingleOrMultiple(event.audio));
+            } else if (event.melodies) {
+              const melody = itemFromArray(event.melodies);
+              if (melody.melodies.length) {
+                await Promise.allSettled(melody.melodies.map(m => this._playNote(m.notes, 0, melody.loop)));
+              } else {
+                await this._playNote(melody.notes, 0, melody.loop);
+              }
+            } else if (event.notes) {
+              const note = itemFromArray(event.notes);
+              await this._playNote([note], 0, false);
+            }
+          })();
         };
         executeOnSingleOrMultiple(event.event, item => {
           this._engine.addEventListener(item, cb);
@@ -20107,16 +20129,18 @@ class SoundsInstance {
         unmuteImg.style.display = container.muted ? "none" : "block";
       }
     };
-    this._updateMuteStatus = () => {
+    this._updateMuteStatus = async () => {
       const container = this._container;
       if (container.muted) {
+        await container.audioContext?.suspend();
         this._mute();
       } else {
+        await container.audioContext?.resume();
         this._unmute();
         this._playMuteSound();
       }
     };
-    this._updateVolume = () => {
+    this._updateVolume = async () => {
       const container = this._container,
         soundsOptions = container.actualOptions.sounds;
       if (!soundsOptions?.enable) {
@@ -20134,7 +20158,7 @@ class SoundsInstance {
       }
       if (stateChanged) {
         this._updateMuteIcons();
-        this._updateMuteStatus();
+        await this._updateMuteStatus();
       }
       if (this._gain?.gain) {
         this._gain.gain.value = this._volume / 100;
@@ -20192,10 +20216,10 @@ class SoundsInstance {
         volumeUp
       } = soundsOptions.icons,
       margin = 10;
-    const toggleMute = () => {
+    const toggleMute = async () => {
       container.muted = !container.muted;
       this._updateMuteIcons();
-      this._updateMuteStatus();
+      await this._updateMuteStatus();
     };
     this._muteImg = initImage({
       container,
@@ -20225,12 +20249,12 @@ class SoundsInstance {
       iconOptions: volumeDown,
       margin,
       rightOffsets: [volumeUp.width],
-      clickCb: () => {
+      clickCb: async () => {
         if (container.muted) {
           this._volume = 0;
         }
         this._volume -= soundsOptions.volume.step;
-        this._updateVolume();
+        await this._updateVolume();
       }
     });
     this._volumeUpImg = initImage({
@@ -20241,12 +20265,12 @@ class SoundsInstance {
       iconOptions: volumeUp,
       margin,
       rightOffsets: [],
-      clickCb: () => {
+      clickCb: async () => {
         if (container.muted) {
           this._volume = 0;
         }
         this._volume += soundsOptions.volume.step;
-        this._updateVolume();
+        await this._updateVolume();
       }
     });
   }