@tsparticles/fireworks 3.0.1 → 3.0.3

package/tsparticles.fireworks.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
@@ -5561,6 +5580,7 @@ if (!isSsr()) {
 
 class FireworkOptions {
   constructor() {
+    this.background = "none";
     this.brightness = {
       min: -30,
       max: 30
@@ -5571,7 +5591,7 @@ class FireworkOptions {
       min: 10,
       max: 30
     };
-    this.rate = 20;
+    this.rate = 10;
     this.saturation = {
       min: -30,
       max: 30
@@ -5590,6 +5610,9 @@ class FireworkOptions {
     if (!data) {
       return;
     }
+    if (data.background !== undefined) {
+      this.background = data.background;
+    }
     if (data.colors !== undefined) {
       if (isArray(data.colors)) {
         this.colors = [...data.colors];
@@ -7122,6 +7145,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();
@@ -7378,6 +7402,19 @@ class ShapeManager {
     return shapeGeneratorss.keys();
   }
 }
+;// CONCATENATED MODULE: ../../plugins/emitters/dist/browser/EmitterShapeBase.js
+class EmitterShapeBase {
+  constructor(position, size, fill, options) {
+    this.position = position;
+    this.size = size;
+    this.fill = fill;
+    this.options = options;
+  }
+  resize(position, size) {
+    this.position = position;
+    this.size = size;
+  }
+}
 ;// CONCATENATED MODULE: ../../plugins/emitters/dist/browser/index.js
 
 
@@ -7482,6 +7519,81 @@ async function loadEmittersPlugin(engine, refresh = true) {
 
 
 
+;// CONCATENATED MODULE: ../../plugins/emittersShapes/square/dist/browser/EmittersSquareShape.js
+
+
+function randomSquareCoordinate(position, offset) {
+  return position + offset * (getRandom() - 0.5);
+}
+class EmittersSquareShape extends EmitterShapeBase {
+  constructor(position, size, fill, options) {
+    super(position, size, fill, options);
+  }
+  async init() {}
+  async randomPosition() {
+    const fill = this.fill,
+      position = this.position,
+      size = this.size;
+    if (fill) {
+      return {
+        position: {
+          x: randomSquareCoordinate(position.x, size.width),
+          y: randomSquareCoordinate(position.y, size.height)
+        }
+      };
+    } else {
+      const halfW = size.width / 2,
+        halfH = size.height / 2,
+        side = Math.floor(getRandom() * 4),
+        v = (getRandom() - 0.5) * 2;
+      switch (side) {
+        case 0:
+          return {
+            position: {
+              x: position.x + v * halfW,
+              y: position.y - halfH
+            }
+          };
+        case 1:
+          return {
+            position: {
+              x: position.x - halfW,
+              y: position.y + v * halfH
+            }
+          };
+        case 2:
+          return {
+            position: {
+              x: position.x + v * halfW,
+              y: position.y + halfH
+            }
+          };
+        case 3:
+        default:
+          return {
+            position: {
+              x: position.x + halfW,
+              y: position.y + v * halfH
+            }
+          };
+      }
+    }
+  }
+}
+;// CONCATENATED MODULE: ../../plugins/emittersShapes/square/dist/browser/EmittersSquareShapeGenerator.js
+
+class EmittersSquareShapeGenerator {
+  generate(position, size, fill, options) {
+    return new EmittersSquareShape(position, size, fill, options);
+  }
+}
+;// CONCATENATED MODULE: ../../plugins/emittersShapes/square/dist/browser/index.js
+
+async function loadEmittersShapeSquare(engine, refresh = true) {
+  const emittersEngine = engine;
+  emittersEngine.addEmitterShapeGenerator && emittersEngine.addEmitterShapeGenerator("square", new EmittersSquareShapeGenerator());
+  await emittersEngine.refresh(refresh);
+}
 ;// CONCATENATED MODULE: ../../updaters/life/dist/browser/Options/Classes/LifeDelay.js
 
 class LifeDelay extends ValueWithRandom {
@@ -8169,32 +8281,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);
@@ -8347,16 +8462,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) {
@@ -8374,7 +8491,7 @@ class SoundsInstance {
       }
       if (stateChanged) {
         this._updateMuteIcons();
-        this._updateMuteStatus();
+        await this._updateMuteStatus();
       }
       if (this._gain?.gain) {
         this._gain.gain.value = this._volume / 100;
@@ -8432,10 +8549,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,
@@ -8465,12 +8582,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({
@@ -8481,12 +8598,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();
       }
     });
   }
@@ -8637,6 +8754,88 @@ class StrokeColorUpdater {
 async function loadStrokeColorUpdater(engine, refresh = true) {
   await engine.addParticleUpdater("strokeColor", container => new StrokeColorUpdater(container), refresh);
 }
+;// CONCATENATED MODULE: ../../effects/trail/dist/browser/TrailDrawer.js
+
+class TrailDrawer {
+  draw(data) {
+    const {
+        context,
+        radius,
+        particle
+      } = data,
+      diameter = radius * 2,
+      pxRatio = particle.container.retina.pixelRatio,
+      currentPos = particle.getPosition();
+    if (!particle.trail || !particle.trailLength) {
+      return;
+    }
+    const pathLength = particle.trailLength;
+    particle.trail.push({
+      color: context.fillStyle ?? context.strokeStyle,
+      position: {
+        x: currentPos.x,
+        y: currentPos.y
+      }
+    });
+    if (particle.trail.length < 2) {
+      return;
+    }
+    while (particle.trail.length > pathLength) {
+      particle.trail.shift();
+    }
+    const trailLength = Math.min(particle.trail.length, pathLength),
+      offsetPos = {
+        x: currentPos.x,
+        y: currentPos.y
+      },
+      canvasSize = {
+        width: particle.container.canvas.size.width + diameter,
+        height: particle.container.canvas.size.height + diameter
+      };
+    let lastPos = particle.trail[trailLength - 1].position;
+    context.setTransform(1, 0, 0, 1, currentPos.x, currentPos.y);
+    for (let i = trailLength; i > 0; i--) {
+      const step = particle.trail[i - 1],
+        position = step.position;
+      context.beginPath();
+      context.moveTo(lastPos.x - offsetPos.x, lastPos.y - offsetPos.y);
+      const warp = {
+        x: (lastPos.x + canvasSize.width) % canvasSize.width,
+        y: (lastPos.y + canvasSize.height) % canvasSize.height
+      };
+      if (Math.abs(lastPos.x - position.x) > canvasSize.width / 2 || Math.abs(lastPos.y - position.y) > canvasSize.height / 2) {
+        lastPos = position;
+        continue;
+      }
+      context.lineTo((Math.abs(lastPos.x - position.x) > canvasSize.width / 2 ? warp.x : position.x) - offsetPos.x, (Math.abs(lastPos.y - position.y) > canvasSize.height / 2 ? warp.y : position.y) - offsetPos.y);
+      const width = Math.max(i / trailLength * diameter, pxRatio, particle.trailMinWidth ?? -1);
+      const oldAlpha = context.globalAlpha;
+      context.globalAlpha = particle.trailFade ? i / trailLength : 1;
+      context.lineWidth = particle.trailMaxWidth ? Math.min(width, particle.trailMaxWidth) : width;
+      context.strokeStyle = step.color;
+      context.stroke();
+      context.globalAlpha = oldAlpha;
+      lastPos = position;
+    }
+    const {
+      transformData
+    } = data;
+    context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, currentPos.x, currentPos.y);
+  }
+  particleInit(container, particle) {
+    particle.trail = [];
+    const effectData = particle.effectData;
+    particle.trailFade = effectData?.fade ?? true;
+    particle.trailLength = getRangeValue(effectData?.length ?? 10) * container.retina.pixelRatio;
+    particle.trailMaxWidth = effectData?.maxWidth ? getRangeValue(effectData.maxWidth) * container.retina.pixelRatio : undefined;
+    particle.trailMinWidth = effectData?.minWidth ? getRangeValue(effectData.minWidth) * container.retina.pixelRatio : undefined;
+  }
+}
+;// CONCATENATED MODULE: ../../effects/trail/dist/browser/index.js
+
+async function loadTrailEffect(engine, refresh = true) {
+  await engine.addEffect("trail", new TrailDrawer(), refresh);
+}
 ;// CONCATENATED MODULE: ./dist/browser/fireworks.js
 
 
@@ -8648,11 +8847,13 @@ async function loadStrokeColorUpdater(engine, refresh = true) {
 
 
 
+
+
 let initialized = false;
 let initializing = false;
 const explodeSoundCheck = args => {
   const data = args.data;
-  return data.particle.shape === "line";
+  return data.particle.shape === "circle" && !!data.particle.splitCount && data.particle.splitCount < 2;
 };
 class FireworksInstance {
   constructor(container) {
@@ -8685,12 +8886,14 @@ async function initPlugins() {
   }
   initializing = true;
   await loadEmittersPlugin(tsParticles, false);
+  await loadEmittersShapeSquare(tsParticles, false);
   await loadSoundsPlugin(tsParticles, false);
   await loadLineShape(tsParticles, false);
   await loadRotateUpdater(tsParticles, false);
   await loadDestroyUpdater(tsParticles, false);
   await loadLifeUpdater(tsParticles, false);
   await loadStrokeColorUpdater(tsParticles, false);
+  await loadTrailEffect(tsParticles, false);
   await loadBasic(tsParticles, false);
   initializing = false;
   initialized = true;
@@ -8709,9 +8912,9 @@ async function fireworks(idOrOptions, sourceOptions) {
   const particlesOptions = {
     detectRetina: true,
     background: {
-      color: "#000"
+      color: options.background
     },
-    fpsLimit: 120,
+    fpsLimit: 60,
     emitters: {
       direction: "top",
       life: {
@@ -8740,7 +8943,7 @@ async function fireworks(idOrOptions, sourceOptions) {
         value: 0
       },
       color: {
-        value: options.colors
+        value: "#fff"
       },
       destroy: {
         mode: "split",
@@ -8761,8 +8964,8 @@ async function fireworks(idOrOptions, sourceOptions) {
             l: options.brightness
           },
           particles: {
-            stroke: {
-              width: 0
+            color: {
+              value: options.colors
             },
             number: {
               value: 0
@@ -8774,12 +8977,23 @@ async function fireworks(idOrOptions, sourceOptions) {
               },
               animation: {
                 enable: true,
-                speed: 0.7,
+                speed: 1,
                 sync: false,
                 startValue: "max",
                 destroy: "min"
               }
             },
+            effect: {
+              type: "trail",
+              options: {
+                trail: {
+                  length: {
+                    min: 5,
+                    max: 10
+                  }
+                }
+              }
+            },
             shape: {
               type: "circle"
             },
@@ -8827,32 +9041,27 @@ async function fireworks(idOrOptions, sourceOptions) {
       life: {
         count: 1
       },
-      shape: {
-        type: "line",
+      effect: {
+        type: "trail",
         options: {
-          line: {
-            cap: "round"
+          trail: {
+            length: {
+              min: 10,
+              max: 30
+            },
+            minWidth: 1,
+            maxWidth: 1
           }
         }
       },
+      shape: {
+        type: "circle"
+      },
       size: {
-        value: {
-          min: 0.1,
-          max: 50
-        },
-        animation: {
-          enable: true,
-          sync: true,
-          speed: 90,
-          startValue: "max",
-          destroy: "min"
-        }
+        value: 1
       },
-      stroke: {
-        color: {
-          value: "#ffffff"
-        },
-        width: 0.5
+      opacity: {
+        value: 0.5
       },
       rotate: {
         path: true
@@ -8872,20 +9081,13 @@ async function fireworks(idOrOptions, sourceOptions) {
         outModes: {
           default: "destroy",
           top: "none"
-        },
-        trail: {
-          fill: {
-            color: "#000"
-          },
-          enable: true,
-          length: 10
         }
       }
     },
     sounds: {
       enable: options.sounds,
       events: [{
-        event: "particleRemoved",
+        event: "particleDestroyed",
         filter: explodeSoundCheck,
         audio: ["https://particles.js.org/audio/explosion0.mp3", "https://particles.js.org/audio/explosion1.mp3", "https://particles.js.org/audio/explosion2.mp3"]
       }],