@tsparticles/slim 3.0.0-beta.4 → 3.0.0

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.0-beta.4
+ * v3.0.0
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -1227,7 +1227,8 @@ function drawParticle(data) {
     particle,
     radius,
     opacity,
-    delta
+    delta,
+    transformData
   };
   context.beginPath();
   drawShape(drawData);
@@ -1252,7 +1253,8 @@ function drawEffect(data) {
     particle,
     radius,
     opacity,
-    delta
+    delta,
+    transformData
   } = data;
   if (!particle.effect) {
     return;
@@ -1267,7 +1269,10 @@ function drawEffect(data) {
     radius,
     opacity,
     delta,
-    pixelRatio: container.retina.pixelRatio
+    pixelRatio: container.retina.pixelRatio,
+    transformData: {
+      ...transformData
+    }
   });
 }
 function drawShape(data) {
@@ -1277,7 +1282,8 @@ function drawShape(data) {
     particle,
     radius,
     opacity,
-    delta
+    delta,
+    transformData
   } = data;
   if (!particle.shape) {
     return;
@@ -1292,7 +1298,10 @@ function drawShape(data) {
     radius,
     opacity,
     delta,
-    pixelRatio: container.retina.pixelRatio
+    pixelRatio: container.retina.pixelRatio,
+    transformData: {
+      ...transformData
+    }
   });
 }
 function drawShapeAfterDraw(data) {
@@ -1302,7 +1311,8 @@ function drawShapeAfterDraw(data) {
     particle,
     radius,
     opacity,
-    delta
+    delta,
+    transformData
   } = data;
   if (!particle.shape) {
     return;
@@ -1317,7 +1327,10 @@ function drawShapeAfterDraw(data) {
     radius,
     opacity,
     delta,
-    pixelRatio: container.retina.pixelRatio
+    pixelRatio: container.retina.pixelRatio,
+    transformData: {
+      ...transformData
+    }
   });
 }
 function drawPlugin(context, plugin, delta) {
@@ -1554,7 +1567,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);
       });
@@ -2401,11 +2414,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
@@ -3430,23 +3439,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);
@@ -3519,6 +3531,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();
@@ -3546,6 +3559,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);
     }
@@ -3871,7 +3890,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);
     }
@@ -5125,7 +5146,7 @@ class Engine {
     return res;
   }
   get version() {
-    return "3.0.0-beta.4";
+    return "3.0.0";
   }
   addConfig(config) {
     const name = config.name ?? "default";
@@ -5536,140 +5557,6 @@ if (!isSsr()) {
 
 
 
-;// 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) {
@@ -6370,7 +6257,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,
@@ -6383,27 +6270,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;
                   }
@@ -6571,6 +6458,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() {
@@ -7471,18 +7456,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;
@@ -7490,7 +7463,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
@@ -7629,12 +7602,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;
@@ -7648,7 +7615,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);
     }
@@ -7709,17 +7676,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);
     }
@@ -8782,8 +8743,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;
   }
@@ -9620,7 +9582,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() {}
@@ -10373,90 +10335,6 @@ class StrokeColorUpdater {
 async function loadStrokeColorUpdater(engine, refresh = true) {
   await engine.addParticleUpdater("strokeColor", container => new StrokeColorUpdater(container), 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
-        };
-      if (fill) {
-        context.fillText(line, pos.x, pos.y + radius * 2 * index);
-      } else {
-        context.strokeText(line, pos.x, pos.y + radius * 2 * 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: ./dist/browser/index.js
 
 
@@ -10481,11 +10359,9 @@ async function loadTextShape(engine, refresh = true) {
 
 
 
-
 
 
 async function loadSlim(engine, refresh = true) {
-  initPjs(engine);
   await loadParallaxMover(engine, false);
   await loadExternalAttractInteraction(engine, false);
   await loadExternalBounceInteraction(engine, false);
@@ -10501,12 +10377,12 @@ async function loadSlim(engine, refresh = true) {
   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 loadTextShape(engine, false);
   await loadLifeUpdater(engine, false);
   await loadRotateUpdater(engine, false);
   await loadStrokeColorUpdater(engine, false);