tsparticles 3.0.0-beta.4 → 3.0.0

package/tsparticles.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.0-beta.4
+ * v3.0.0
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -1228,7 +1228,8 @@ function drawParticle(data) {
     particle,
     radius,
     opacity,
-    delta
+    delta,
+    transformData
   };
   context.beginPath();
   drawShape(drawData);
@@ -1253,7 +1254,8 @@ function drawEffect(data) {
     particle,
     radius,
     opacity,
-    delta
+    delta,
+    transformData
   } = data;
   if (!particle.effect) {
     return;
@@ -1268,7 +1270,10 @@ function drawEffect(data) {
     radius,
     opacity,
     delta,
-    pixelRatio: container.retina.pixelRatio
+    pixelRatio: container.retina.pixelRatio,
+    transformData: {
+      ...transformData
+    }
   });
 }
 function drawShape(data) {
@@ -1278,7 +1283,8 @@ function drawShape(data) {
     particle,
     radius,
     opacity,
-    delta
+    delta,
+    transformData
   } = data;
   if (!particle.shape) {
     return;
@@ -1293,7 +1299,10 @@ function drawShape(data) {
     radius,
     opacity,
     delta,
-    pixelRatio: container.retina.pixelRatio
+    pixelRatio: container.retina.pixelRatio,
+    transformData: {
+      ...transformData
+    }
   });
 }
 function drawShapeAfterDraw(data) {
@@ -1303,7 +1312,8 @@ function drawShapeAfterDraw(data) {
     particle,
     radius,
     opacity,
-    delta
+    delta,
+    transformData
   } = data;
   if (!particle.shape) {
     return;
@@ -1318,7 +1328,10 @@ function drawShapeAfterDraw(data) {
     radius,
     opacity,
     delta,
-    pixelRatio: container.retina.pixelRatio
+    pixelRatio: container.retina.pixelRatio,
+    transformData: {
+      ...transformData
+    }
   });
 }
 function drawPlugin(context, plugin, delta) {
@@ -1555,7 +1568,7 @@ class Canvas {
       } else if (trailFill.image) {
         this._paintImage(trailFill.image, trailFill.opacity);
       }
-    } else {
+    } else if (options.clear) {
       this.draw(ctx => {
         clear(ctx, this.size);
       });
@@ -2402,11 +2415,7 @@ class Events {
       });
     }
     this.onHover.load(data.onHover);
-    if (isBoolean(data.resize)) {
-      this.resize.enable = data.resize;
-    } else {
-      this.resize.load(data.resize);
-    }
+    this.resize.load(data.resize);
   }
 }
 ;// CONCATENATED MODULE: ../../engine/dist/browser/Options/Classes/Interactivity/Modes/Modes.js
@@ -3431,23 +3440,26 @@ class ParticlesOptions {
     if (!data) {
       return;
     }
-    this.bounce.load(data.bounce);
-    this.color.load(AnimatableColor.create(this.color, data.color));
-    this.effect.load(data.effect);
     if (data.groups !== undefined) {
-      for (const group in data.groups) {
+      for (const group of Object.keys(data.groups)) {
+        if (!Object.hasOwn(data.groups, group)) {
+          continue;
+        }
         const item = data.groups[group];
         if (item !== undefined) {
           this.groups[group] = deepExtend(this.groups[group] ?? {}, item);
         }
       }
     }
-    this.move.load(data.move);
-    this.number.load(data.number);
-    this.opacity.load(data.opacity);
     if (data.reduceDuplicates !== undefined) {
       this.reduceDuplicates = data.reduceDuplicates;
     }
+    this.bounce.load(data.bounce);
+    this.color.load(AnimatableColor.create(this.color, data.color));
+    this.effect.load(data.effect);
+    this.move.load(data.move);
+    this.number.load(data.number);
+    this.opacity.load(data.opacity);
     this.shape.load(data.shape);
     this.size.load(data.size);
     this.shadow.load(data.shadow);
@@ -3520,6 +3532,7 @@ class Options {
     this.autoPlay = true;
     this.background = new Background();
     this.backgroundMask = new BackgroundMask();
+    this.clear = true;
     this.defaultThemes = {};
     this.delay = 0;
     this.fullScreen = new FullScreen();
@@ -3547,6 +3560,12 @@ class Options {
     if (data.autoPlay !== undefined) {
       this.autoPlay = data.autoPlay;
     }
+    if (data.clear !== undefined) {
+      this.clear = data.clear;
+    }
+    if (data.name !== undefined) {
+      this.name = data.name;
+    }
     if (data.delay !== undefined) {
       this.delay = setRangeValue(data.delay);
     }
@@ -3872,7 +3891,9 @@ class Particle {
     this.bubble.inRange = false;
     this.slow.inRange = false;
     const container = this.container,
-      pathGenerator = this.pathGenerator;
+      pathGenerator = this.pathGenerator,
+      shapeDrawer = container.shapeDrawers.get(this.shape);
+    shapeDrawer && shapeDrawer.particleDestroy && shapeDrawer.particleDestroy(this);
     for (const [, plugin] of container.plugins) {
       plugin.particleDestroyed && plugin.particleDestroyed(this, override);
     }
@@ -5126,7 +5147,7 @@ class Engine {
     return res;
   }
   get version() {
-    return "3.0.0-beta.4";
+    return "3.0.0";
   }
   addConfig(config) {
     const name = config.name ?? "default";
@@ -7231,140 +7252,6 @@ class RollUpdater {
 async function loadRollUpdater(engine, refresh = true) {
   await engine.addParticleUpdater("roll", () => new RollUpdater(), refresh);
 }
-;// CONCATENATED MODULE: ../pjs/dist/browser/marcbruederlin/Particles.js
-
-class Particles_Particles {
-  static init(options) {
-    const particles = new Particles_Particles(),
-      selector = options.selector;
-    if (!selector) {
-      throw new Error("No selector provided");
-    }
-    const el = document.querySelector(selector);
-    if (!el) {
-      throw new Error("No element found for selector");
-    }
-    tsParticles.load({
-      id: selector.replace(".", "").replace("!", ""),
-      element: el,
-      options: {
-        fullScreen: {
-          enable: false
-        },
-        particles: {
-          color: {
-            value: options.color ?? "!000000"
-          },
-          links: {
-            color: "random",
-            distance: options.minDistance ?? 120,
-            enable: options.connectParticles ?? false
-          },
-          move: {
-            enable: true,
-            speed: options.speed ?? 0.5
-          },
-          number: {
-            value: options.maxParticles ?? 100
-          },
-          size: {
-            value: {
-              min: 1,
-              max: options.sizeVariations ?? 3
-            }
-          }
-        },
-        responsive: options.responsive?.map(responsive => ({
-          maxWidth: responsive.breakpoint,
-          options: {
-            particles: {
-              color: {
-                value: responsive.options?.color
-              },
-              links: {
-                distance: responsive.options?.minDistance,
-                enable: responsive.options?.connectParticles
-              },
-              number: {
-                value: options.maxParticles
-              },
-              move: {
-                enable: true,
-                speed: responsive.options?.speed
-              },
-              size: {
-                value: responsive.options?.sizeVariations
-              }
-            }
-          }
-        }))
-      }
-    }).then(container => {
-      particles._container = container;
-    });
-    return particles;
-  }
-  destroy() {
-    const container = this._container;
-    container && container.destroy();
-  }
-  pauseAnimation() {
-    const container = this._container;
-    container && container.pause();
-  }
-  resumeAnimation() {
-    const container = this._container;
-    container && container.play();
-  }
-}
-;// CONCATENATED MODULE: ../pjs/dist/browser/VincentGarreau/particles.js
-const initParticlesJS = engine => {
-  const particlesJS = (tagId, options) => {
-    return engine.load({
-      id: tagId,
-      options
-    });
-  };
-  particlesJS.load = (tagId, pathConfigJson, callback) => {
-    engine.load({
-      id: tagId,
-      url: pathConfigJson
-    }).then(container => {
-      if (container) {
-        callback(container);
-      }
-    }).catch(() => {
-      callback(undefined);
-    });
-  };
-  particlesJS.setOnClickHandler = callback => {
-    engine.setOnClickHandler(callback);
-  };
-  const pJSDom = engine.dom();
-  return {
-    particlesJS,
-    pJSDom
-  };
-};
-
-;// CONCATENATED MODULE: ../pjs/dist/browser/index.js
-
-
-const initPjs = engine => {
-  const {
-    particlesJS,
-    pJSDom
-  } = initParticlesJS(engine);
-  window.particlesJS = particlesJS;
-  window.pJSDom = pJSDom;
-  window.Particles = Particles_Particles;
-  return {
-    particlesJS,
-    pJSDom,
-    Particles: Particles_Particles
-  };
-};
-
 ;// CONCATENATED MODULE: ../../move/base/dist/browser/Utils.js
 
 function applyDistance(particle) {
@@ -8065,7 +7952,7 @@ class OutOutMode {
               }
             case "normal":
               {
-                const wrap = particle.options.move.warp,
+                const warp = particle.options.move.warp,
                   canvasSize = container.canvas.size,
                   newPos = {
                     bottom: canvasSize.height + particle.getRadius() + particle.offset.y,
@@ -8078,27 +7965,27 @@ class OutOutMode {
                 if (direction === "right" && nextBounds.left > canvasSize.width + particle.offset.x) {
                   particle.position.x = newPos.left;
                   particle.initialPosition.x = particle.position.x;
-                  if (!wrap) {
+                  if (!warp) {
                     particle.position.y = getRandom() * canvasSize.height;
                     particle.initialPosition.y = particle.position.y;
                   }
                 } else if (direction === "left" && nextBounds.right < -particle.offset.x) {
                   particle.position.x = newPos.right;
                   particle.initialPosition.x = particle.position.x;
-                  if (!wrap) {
+                  if (!warp) {
                     particle.position.y = getRandom() * canvasSize.height;
                     particle.initialPosition.y = particle.position.y;
                   }
                 }
                 if (direction === "bottom" && nextBounds.top > canvasSize.height + particle.offset.y) {
-                  if (!wrap) {
+                  if (!warp) {
                     particle.position.x = getRandom() * canvasSize.width;
                     particle.initialPosition.x = particle.position.x;
                   }
                   particle.position.y = newPos.top;
                   particle.initialPosition.y = particle.position.y;
                 } else if (direction === "top" && nextBounds.bottom < -particle.offset.y) {
-                  if (!wrap) {
+                  if (!warp) {
                     particle.position.x = getRandom() * canvasSize.width;
                     particle.initialPosition.x = particle.position.x;
                   }
@@ -8266,6 +8153,104 @@ async function loadEasingQuadPlugin() {
   addEasing("ease-out-quad", value => 1 - (1 - value) ** 2);
   addEasing("ease-in-out-quad", value => value < 0.5 ? 2 * value ** 2 : 1 - (-2 * value + 2) ** 2 / 2);
 }
+;// 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 [, emojiData] of this._emojiShapeDict) {
+      emojiData instanceof ImageBitmap && emojiData?.close();
+    }
+  }
+  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) {
+    if (!particle.emojiData) {
+      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: ../../interactions/external/attract/dist/browser/Options/Classes/Attract.js
 class Attract {
   constructor() {
@@ -9166,18 +9151,6 @@ class Grab {
     this.distance = 100;
     this.links = new GrabLinks();
   }
-  get lineLinked() {
-    return this.links;
-  }
-  set lineLinked(value) {
-    this.links = value;
-  }
-  get line_linked() {
-    return this.links;
-  }
-  set line_linked(value) {
-    this.links = value;
-  }
   load(data) {
     if (!data) {
       return;
@@ -9185,7 +9158,7 @@ class Grab {
     if (data.distance !== undefined) {
       this.distance = data.distance;
     }
-    this.links.load(data.links ?? data.lineLinked ?? data.line_linked);
+    this.links.load(data.links);
   }
 }
 ;// CONCATENATED MODULE: ../../interactions/external/grab/dist/browser/Utils.js
@@ -9324,12 +9297,6 @@ class Push {
     this.groups = [];
     this.quantity = 4;
   }
-  get particles_nb() {
-    return this.quantity;
-  }
-  set particles_nb(value) {
-    this.quantity = setRangeValue(value);
-  }
   load(data) {
     if (!data) {
       return;
@@ -9343,7 +9310,7 @@ class Push {
     if (!this.groups.length) {
       this.default = true;
     }
-    const quantity = data.quantity ?? data.particles_nb;
+    const quantity = data.quantity;
     if (quantity !== undefined) {
       this.quantity = setRangeValue(quantity);
     }
@@ -9404,17 +9371,11 @@ class Remove {
   constructor() {
     this.quantity = 2;
   }
-  get particles_nb() {
-    return this.quantity;
-  }
-  set particles_nb(value) {
-    this.quantity = setRangeValue(value);
-  }
   load(data) {
     if (!data) {
       return;
     }
-    const quantity = data.quantity ?? data.particles_nb;
+    const quantity = data.quantity;
     if (quantity !== undefined) {
       this.quantity = setRangeValue(quantity);
     }
@@ -10477,8 +10438,9 @@ class ImageDrawer {
         pos = {
           x: -radius,
           y: -radius
-        };
-      context.drawImage(element, pos.x, pos.y, radius * 2, radius * 2 / ratio);
+        },
+        diameter = radius * 2;
+      context.drawImage(element, pos.x, pos.y, diameter, diameter / ratio);
     }
     context.globalAlpha = 1;
   }
@@ -11315,7 +11277,7 @@ class Linker extends ParticlesInteractorBase {
       options.links = new Links();
     }
     for (const source of sources) {
-      options.links.load(source?.links ?? source?.lineLinked ?? source?.line_linked);
+      options.links.load(source?.links);
     }
   }
   reset() {}
@@ -12068,9 +12030,62 @@ class StrokeColorUpdater {
 async function loadStrokeColorUpdater(engine, refresh = true) {
   await engine.addParticleUpdater("strokeColor", container => new StrokeColorUpdater(container), refresh);
 }
+;// CONCATENATED MODULE: ../slim/dist/browser/index.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+async function loadSlim(engine, refresh = true) {
+  await loadParallaxMover(engine, false);
+  await loadExternalAttractInteraction(engine, false);
+  await loadExternalBounceInteraction(engine, false);
+  await loadExternalBubbleInteraction(engine, false);
+  await loadExternalConnectInteraction(engine, false);
+  await loadExternalGrabInteraction(engine, false);
+  await loadExternalPauseInteraction(engine, false);
+  await loadExternalPushInteraction(engine, false);
+  await loadExternalRemoveInteraction(engine, false);
+  await loadExternalRepulseInteraction(engine, false);
+  await loadExternalSlowInteraction(engine, false);
+  await loadParticlesAttractInteraction(engine, false);
+  await loadParticlesCollisionsInteraction(engine, false);
+  await loadParticlesLinksInteraction(engine, false);
+  await loadEasingQuadPlugin();
+  await loadEmojiShape(engine, false);
+  await loadImageShape(engine, false);
+  await loadLineShape(engine, false);
+  await loadPolygonShape(engine, false);
+  await loadSquareShape(engine, false);
+  await loadStarShape(engine, false);
+  await loadLifeUpdater(engine, false);
+  await loadRotateUpdater(engine, false);
+  await loadStrokeColorUpdater(engine, false);
+  await loadBasic(engine, refresh);
+}
 ;// CONCATENATED MODULE: ../../shapes/text/dist/browser/TextDrawer.js
 
-const validTypes = ["text", "character", "char", "multiline-text"];
+const TextDrawer_validTypes = ["text", "character", "char", "multiline-text"];
 class TextDrawer {
   constructor() {
     this._drawLine = (context, line, radius, opacity, index, fill) => {
@@ -12078,11 +12093,12 @@ class TextDrawer {
         pos = {
           x: -offsetX,
           y: radius / 2
-        };
+        },
+        diameter = radius * 2;
       if (fill) {
-        context.fillText(line, pos.x, pos.y + radius * 2 * index);
+        context.fillText(line, pos.x, pos.y + diameter * index);
       } else {
-        context.strokeText(line, pos.x, pos.y + radius * 2 * index);
+        context.strokeText(line, pos.x, pos.y + diameter * index);
       }
     };
   }
@@ -12123,8 +12139,8 @@ class TextDrawer {
   }
   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),
+    if (TextDrawer_validTypes.find(t => isInArray(t, options.particles.shape.type))) {
+      const shapeOptions = TextDrawer_validTypes.map(t => options.particles.shape.options[t]).find(t => !!t),
         promises = [];
       executeOnSingleOrMultiple(shapeOptions, shape => {
         promises.push(loadFont(shape.font, shape.weight));
@@ -12133,7 +12149,7 @@ class TextDrawer {
     }
   }
   particleInit(container, particle) {
-    if (!particle.shape || !validTypes.includes(particle.shape)) {
+    if (!particle.shape || !TextDrawer_validTypes.includes(particle.shape)) {
       return;
     }
     const character = particle.shapeData;
@@ -12150,62 +12166,7 @@ class TextDrawer {
 ;// CONCATENATED MODULE: ../../shapes/text/dist/browser/index.js
 
 async function loadTextShape(engine, refresh = true) {
-  await engine.addShape(validTypes, new TextDrawer(), refresh);
-}
-;// CONCATENATED MODULE: ../slim/dist/browser/index.js
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-async function loadSlim(engine, refresh = true) {
-  initPjs(engine);
-  await loadParallaxMover(engine, false);
-  await loadExternalAttractInteraction(engine, false);
-  await loadExternalBounceInteraction(engine, false);
-  await loadExternalBubbleInteraction(engine, false);
-  await loadExternalConnectInteraction(engine, false);
-  await loadExternalGrabInteraction(engine, false);
-  await loadExternalPauseInteraction(engine, false);
-  await loadExternalPushInteraction(engine, false);
-  await loadExternalRemoveInteraction(engine, false);
-  await loadExternalRepulseInteraction(engine, false);
-  await loadExternalSlowInteraction(engine, false);
-  await loadParticlesAttractInteraction(engine, false);
-  await loadParticlesCollisionsInteraction(engine, false);
-  await loadParticlesLinksInteraction(engine, false);
-  await loadEasingQuadPlugin();
-  await loadImageShape(engine, false);
-  await loadLineShape(engine, false);
-  await loadPolygonShape(engine, false);
-  await loadSquareShape(engine, false);
-  await loadStarShape(engine, false);
-  await loadTextShape(engine, false);
-  await loadLifeUpdater(engine, false);
-  await loadRotateUpdater(engine, false);
-  await loadStrokeColorUpdater(engine, false);
-  await loadBasic(engine, refresh);
+  await engine.addShape(TextDrawer_validTypes, new TextDrawer(), refresh);
 }
 ;// CONCATENATED MODULE: ../../updaters/tilt/dist/browser/Options/Classes/TiltAnimation.js
 
@@ -12593,12 +12554,14 @@ async function loadWobbleUpdater(engine, refresh = true) {
 
 
 
+
 async function loadFull(engine, refresh = true) {
   await loadDestroyUpdater(engine, false);
   await loadRollUpdater(engine, false);
   await loadTiltUpdater(engine, false);
   await loadTwinkleUpdater(engine, false);
   await loadWobbleUpdater(engine, false);
+  await loadTextShape(engine, false);
   await loadExternalTrailInteraction(engine, false);
   await loadAbsorbersPlugin(engine, false);
   await loadEmittersPlugin(engine, false);