@tsparticles/confetti 3.0.1 → 3.0.3

package/tsparticles.confetti.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
@@ -7201,6 +7220,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();
@@ -7561,6 +7581,103 @@ async function loadEmittersPlugin(engine, refresh = true) {
 
 
 
+;// CONCATENATED MODULE: ../../shapes/emoji/dist/browser/EmojiDrawer.js
+
+const validTypes = ["emoji"];
+const defaultFont = '"Twemoji Mozilla", Apple Color Emoji, "Segoe UI Emoji", "Noto Color Emoji", "EmojiOne Color"';
+class EmojiDrawer {
+  constructor() {
+    this._emojiShapeDict = new Map();
+  }
+  destroy() {
+    for (const [key, emojiData] of this._emojiShapeDict) {
+      emojiData instanceof ImageBitmap && emojiData?.close();
+      this._emojiShapeDict.delete(key);
+    }
+  }
+  draw(data) {
+    const {
+        context,
+        particle,
+        radius,
+        opacity
+      } = data,
+      emojiData = particle.emojiData;
+    if (!emojiData) {
+      return;
+    }
+    context.globalAlpha = opacity;
+    context.drawImage(emojiData, -radius, -radius, radius * 2, radius * 2);
+    context.globalAlpha = 1;
+  }
+  async init(container) {
+    const options = container.actualOptions;
+    if (validTypes.find(t => isInArray(t, options.particles.shape.type))) {
+      const promises = [loadFont(defaultFont)],
+        shapeOptions = validTypes.map(t => options.particles.shape.options[t]).find(t => !!t);
+      if (shapeOptions) {
+        executeOnSingleOrMultiple(shapeOptions, shape => {
+          shape.font && promises.push(loadFont(shape.font));
+        });
+      }
+      await Promise.all(promises);
+    }
+  }
+  particleDestroy(particle) {
+    delete particle.emojiData;
+  }
+  particleInit(container, particle) {
+    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;
+      }
+      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;
+  }
+}
+;// CONCATENATED MODULE: ../../shapes/emoji/dist/browser/index.js
+
+async function loadEmojiShape(engine, refresh = true) {
+  await engine.addShape(validTypes, new EmojiDrawer(), refresh);
+}
 ;// CONCATENATED MODULE: ../../shapes/heart/dist/browser/HeartDrawer.js
 class HeartDrawer_HeartDrawer {
   draw(data) {
@@ -9130,91 +9247,6 @@ class StarDrawer {
 async function loadStarShape(engine, refresh = true) {
   await engine.addShape("star", new StarDrawer(), refresh);
 }
-;// CONCATENATED MODULE: ../../shapes/text/dist/browser/TextDrawer.js
-
-const validTypes = ["text", "character", "char", "multiline-text"];
-class TextDrawer {
-  constructor() {
-    this._drawLine = (context, line, radius, opacity, index, fill) => {
-      const offsetX = line.length * radius / 2,
-        pos = {
-          x: -offsetX,
-          y: radius / 2
-        },
-        diameter = radius * 2;
-      if (fill) {
-        context.fillText(line, pos.x, pos.y + diameter * index);
-      } else {
-        context.strokeText(line, pos.x, pos.y + diameter * index);
-      }
-    };
-  }
-  draw(data) {
-    const {
-        context,
-        particle,
-        radius,
-        opacity
-      } = data,
-      character = particle.shapeData;
-    if (!character) {
-      return;
-    }
-    const textData = character.value;
-    if (textData === undefined) {
-      return;
-    }
-    if (particle.text === undefined) {
-      particle.text = itemFromSingleOrMultiple(textData, particle.randomIndexData);
-    }
-    const text = particle.text,
-      style = character.style ?? "",
-      weight = character.weight ?? "400",
-      size = Math.round(radius) * 2,
-      font = character.font ?? "Verdana",
-      fill = particle.shapeFill;
-    const lines = text?.split("\n");
-    if (!lines) {
-      return;
-    }
-    context.font = `${style} ${weight} ${size}px "${font}"`;
-    context.globalAlpha = opacity;
-    for (let i = 0; i < lines.length; i++) {
-      this._drawLine(context, lines[i], radius, opacity, i, fill);
-    }
-    context.globalAlpha = 1;
-  }
-  async init(container) {
-    const options = container.actualOptions;
-    if (validTypes.find(t => isInArray(t, options.particles.shape.type))) {
-      const shapeOptions = validTypes.map(t => options.particles.shape.options[t]).find(t => !!t),
-        promises = [];
-      executeOnSingleOrMultiple(shapeOptions, shape => {
-        promises.push(loadFont(shape.font, shape.weight));
-      });
-      await Promise.all(promises);
-    }
-  }
-  particleInit(container, particle) {
-    if (!particle.shape || !validTypes.includes(particle.shape)) {
-      return;
-    }
-    const character = particle.shapeData;
-    if (character === undefined) {
-      return;
-    }
-    const textData = character.value;
-    if (textData === undefined) {
-      return;
-    }
-    particle.text = itemFromSingleOrMultiple(textData, particle.randomIndexData);
-  }
-}
-;// CONCATENATED MODULE: ../../shapes/text/dist/browser/index.js
-
-async function loadTextShape(engine, refresh = true) {
-  await engine.addShape(validTypes, new TextDrawer(), refresh);
-}
 ;// CONCATENATED MODULE: ../../updaters/tilt/dist/browser/Options/Classes/TiltAnimation.js
 
 class TiltAnimation {
@@ -9546,7 +9578,7 @@ async function initPlugins(engine) {
   await loadPolygonShape(engine, false);
   await loadSquareShape(engine, false);
   await loadStarShape(engine, false);
-  await loadTextShape(engine, false);
+  await loadEmojiShape(engine, false);
   await loadRotateUpdater(engine, false);
   await loadLifeUpdater(engine, false);
   await loadRollUpdater(engine, false);
@@ -9701,13 +9733,13 @@ async function setConfetti(params) {
         },
         direction: "random",
         animation: {
-          enable: actualOptions.flat,
+          enable: !actualOptions.flat,
           speed: 60
         }
       },
       tilt: {
         direction: "random",
-        enable: actualOptions.flat,
+        enable: !actualOptions.flat,
         value: actualOptions.flat ? 0 : {
           min: 0,
           max: 360
@@ -9722,7 +9754,7 @@ async function setConfetti(params) {
           enable: true,
           value: 25
         },
-        enable: actualOptions.flat,
+        enable: !actualOptions.flat,
         speed: {
           min: 15,
           max: 25
@@ -9730,7 +9762,7 @@ async function setConfetti(params) {
       },
       wobble: {
         distance: 30,
-        enable: actualOptions.flat,
+        enable: !actualOptions.flat,
         speed: {
           min: -15,
           max: 15