tsparticles 3.0.0-beta.1 → 3.0.0-beta.3

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.1
+ * v3.0.0-beta.3
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -207,6 +207,7 @@ __webpack_require__.d(__webpack_exports__, {
   rectBounce: () => (/* reexport */ rectBounce),
   resizeEvent: () => (/* reexport */ resizeEvent),
   rgbToHsl: () => (/* reexport */ rgbToHsl),
+  safeIntersectionObserver: () => (/* reexport */ safeIntersectionObserver),
   safeMatchMedia: () => (/* reexport */ safeMatchMedia),
   safeMutationObserver: () => (/* reexport */ safeMutationObserver),
   setLogger: () => (/* reexport */ setLogger),
@@ -573,6 +574,12 @@ function safeMatchMedia(query) {
   }
   return matchMedia(query);
 }
+function safeIntersectionObserver(callback) {
+  if (isSsr() || typeof IntersectionObserver === "undefined") {
+    return;
+  }
+  return new IntersectionObserver(callback);
+}
 function safeMutationObserver(callback) {
   if (isSsr() || typeof MutationObserver === "undefined") {
     return;
@@ -1232,7 +1239,15 @@ function drawParticle(data) {
   if (colorStyles.stroke) {
     context.strokeStyle = colorStyles.stroke;
   }
-  drawShape(container, context, particle, radius, opacity, delta);
+  const drawData = {
+    container,
+    context,
+    particle,
+    radius,
+    opacity,
+    delta
+  };
+  drawShape(drawData);
   if (strokeWidth > 0) {
     context.stroke();
   }
@@ -1242,11 +1257,19 @@ function drawParticle(data) {
   if (particle.fill) {
     context.fill();
   }
-  drawShapeAfterEffect(container, context, particle, radius, opacity, delta);
+  drawShapeAfterEffect(drawData);
   context.globalCompositeOperation = "source-over";
   context.setTransform(1, 0, 0, 1, 0, 0);
 }
-function drawShape(container, context, particle, radius, opacity, delta) {
+function drawShape(data) {
+  const {
+    container,
+    context,
+    particle,
+    radius,
+    opacity,
+    delta
+  } = data;
   if (!particle.shape) {
     return;
   }
@@ -1254,9 +1277,24 @@ function drawShape(container, context, particle, radius, opacity, delta) {
   if (!drawer) {
     return;
   }
-  drawer.draw(context, particle, radius, opacity, delta, container.retina.pixelRatio);
+  drawer.draw({
+    context,
+    particle,
+    radius,
+    opacity,
+    delta,
+    pixelRatio: container.retina.pixelRatio
+  });
 }
-function drawShapeAfterEffect(container, context, particle, radius, opacity, delta) {
+function drawShapeAfterEffect(data) {
+  const {
+    container,
+    context,
+    particle,
+    radius,
+    opacity,
+    delta
+  } = data;
   if (!particle.shape) {
     return;
   }
@@ -1264,7 +1302,14 @@ function drawShapeAfterEffect(container, context, particle, radius, opacity, del
   if (!drawer || !drawer.afterEffect) {
     return;
   }
-  drawer.afterEffect(context, particle, radius, opacity, delta, container.retina.pixelRatio);
+  drawer.afterEffect({
+    context,
+    particle,
+    radius,
+    opacity,
+    delta,
+    pixelRatio: container.retina.pixelRatio
+  });
 }
 function drawPlugin(context, plugin, delta) {
   if (!plugin.draw) {
@@ -3648,7 +3693,17 @@ class InteractionManager {
 
 
 
-const fixOutMode = data => {
+function loadShapeData(shape, shapeOptions, id, reduceDuplicates) {
+  const shapeData = shapeOptions.options[shape];
+  if (!shapeData) {
+    return;
+  }
+  return deepExtend({
+    close: shapeOptions.close,
+    fill: shapeOptions.fill
+  }, itemFromSingleOrMultiple(shapeData, id, reduceDuplicates));
+}
+function fixOutMode(data) {
   if (!isInArray(data.outMode, data.checkModes)) {
     return;
   }
@@ -3658,7 +3713,7 @@ const fixOutMode = data => {
   } else if (data.coord < diameter) {
     data.setCb(data.radius);
   }
-};
+}
 class Particle {
   constructor(engine, id, container, position, overrideOptions, group) {
     this.container = container;
@@ -3783,16 +3838,6 @@ class Particle {
       }
       this.offset = Vector.origin;
     };
-    this._loadShapeData = (shapeOptions, reduceDuplicates) => {
-      const shapeData = shapeOptions.options[this.shape];
-      if (!shapeData) {
-        return;
-      }
-      return deepExtend({
-        close: shapeOptions.close,
-        fill: shapeOptions.fill
-      }, itemFromSingleOrMultiple(shapeData, this.id, reduceDuplicates));
-    };
     this._engine = engine;
     this.init(id, position, overrideOptions, group);
   }
@@ -3881,7 +3926,7 @@ class Particle {
         shapeOptions.load(overrideOptions.shape);
       }
     }
-    this.shapeData = this._loadShapeData(shapeOptions, reduceDuplicates);
+    this.shapeData = loadShapeData(this.shape, shapeOptions, this.id, reduceDuplicates);
     particlesOptions.load(overrideOptions);
     const shapeData = this.shapeData;
     if (shapeData) {
@@ -4192,8 +4237,9 @@ class Particles {
         return false;
       }
       particle.destroy(override);
+      const zIdx = this._zArray.indexOf(particle);
       this._array.splice(index, 1);
-      this._zArray = this._zArray.splice(this._zArray.indexOf(particle), 1);
+      this._zArray.splice(zIdx, 1);
       this.pool.push(particle);
       this._engine.dispatchEvent("particleRemoved", {
         container: this._container,
@@ -4300,7 +4346,7 @@ class Particles {
     this.addManualParticles();
     if (!handled) {
       const particlesOptions = options.particles,
-        groups = options.particles.groups;
+        groups = particlesOptions.groups;
       for (const group in groups) {
         const groupOptions = groups[group];
         for (let i = this.count, j = 0; j < groupOptions.number?.value && i < particlesOptions.number.value; i++, j++) {
@@ -4476,7 +4522,6 @@ function loadContainerOptions(engine, container, ...sourceOptionsArr) {
 }
 class Container {
   constructor(engine, id, sourceOptions) {
-    this.id = id;
     this._intersectionManager = entries => {
       if (!guardCheck(this) || !this.actualOptions.pauseOnOutsideViewport) {
         return;
@@ -4515,6 +4560,7 @@ class Container {
       }
     };
     this._engine = engine;
+    this.id = Symbol(id);
     this.fpsLimit = 120;
     this.smooth = false;
     this._delay = 0;
@@ -4544,9 +4590,7 @@ class Container {
     this._options = loadContainerOptions(this._engine, this);
     this.actualOptions = loadContainerOptions(this._engine, this);
     this._eventListeners = new EventListeners(this);
-    if (typeof IntersectionObserver !== "undefined" && IntersectionObserver) {
-      this._intersectionObserver = new IntersectionObserver(entries => this._intersectionManager(entries));
-    }
+    this._intersectionObserver = safeIntersectionObserver(entries => this._intersectionManager(entries));
     this._engine.dispatchEvent("containerBuilt", {
       container: this
     });
@@ -4989,17 +5033,17 @@ class Engine {
     return res;
   }
   get version() {
-    return "3.0.0-beta.1";
+    return "3.0.0-beta.3";
   }
-  addConfig(nameOrConfig, config) {
-    if (isString(nameOrConfig)) {
-      if (config) {
-        config.name = nameOrConfig;
-        this._configs.set(nameOrConfig, config);
+  addConfig(config) {
+    const name = config.name ?? "default";
+    this._configs.set(name, config);
+    this._eventDispatcher.dispatchEvent("configAdded", {
+      data: {
+        name,
+        config
       }
-    } else {
-      this._configs.set(nameOrConfig.name ?? "default", nameOrConfig);
-    }
+    });
   }
   addEventListener(type, listener) {
     this._eventDispatcher.addEventListener(type, listener);
@@ -5028,44 +5072,11 @@ class Engine {
     (override || !this.getPreset(preset)) && this.presets.set(preset, options);
     await this.refresh(refresh);
   }
-  async addShape(shape, drawer, initOrRefresh, afterEffectOrRefresh, destroyOrRefresh, refresh = true) {
-    let customDrawer;
-    let realRefresh = refresh,
-      realInit,
-      realAfterEffect,
-      realDestroy;
-    if (isBoolean(initOrRefresh)) {
-      realRefresh = initOrRefresh;
-      realInit = undefined;
-    } else {
-      realInit = initOrRefresh;
-    }
-    if (isBoolean(afterEffectOrRefresh)) {
-      realRefresh = afterEffectOrRefresh;
-      realAfterEffect = undefined;
-    } else {
-      realAfterEffect = afterEffectOrRefresh;
-    }
-    if (isBoolean(destroyOrRefresh)) {
-      realRefresh = destroyOrRefresh;
-      realDestroy = undefined;
-    } else {
-      realDestroy = destroyOrRefresh;
-    }
-    if (isFunction(drawer)) {
-      customDrawer = {
-        afterEffect: realAfterEffect,
-        destroy: realDestroy,
-        draw: drawer,
-        init: realInit
-      };
-    } else {
-      customDrawer = drawer;
-    }
+  async addShape(shape, drawer, refresh = true) {
     executeOnSingleOrMultiple(shape, type => {
-      !this.getShapeDrawer(type) && this.drawers.set(type, customDrawer);
+      !this.getShapeDrawer(type) && this.drawers.set(type, drawer);
     });
-    await this.refresh(realRefresh);
+    await this.refresh(refresh);
   }
   clearPlugins(container) {
     this.updaters.delete(container);
@@ -5143,7 +5154,7 @@ class Engine {
     }
     const currentOptions = itemFromSingleOrMultiple(options, index),
       dom = this.dom(),
-      oldIndex = dom.findIndex(v => v.id === id);
+      oldIndex = dom.findIndex(v => v.id.description === id);
     if (oldIndex >= 0) {
       const old = this.domItem(oldIndex);
       if (old && !old.destroyed) {
@@ -7284,7 +7295,12 @@ async function loadBaseMover(engine, refresh = true) {
 ;// CONCATENATED MODULE: ../../shapes/circle/dist/browser/CircleDrawer.js
 
 class CircleDrawer {
-  draw(context, particle, radius) {
+  draw(data) {
+    const {
+      context,
+      particle,
+      radius
+    } = data;
     if (!particle.circleRange) {
       particle.circleRange = {
         min: 0,
@@ -10088,8 +10104,15 @@ class ImageDrawer {
     }
     this._engine.images.push(image);
   }
-  draw(context, particle, radius, opacity, delta) {
-    const image = particle.image,
+  draw(data) {
+    const {
+        context,
+        radius,
+        particle,
+        opacity,
+        delta
+      } = data,
+      image = particle.image,
       element = image?.element;
     if (!image) {
       return;
@@ -10525,8 +10548,13 @@ async function loadLifeUpdater(engine, refresh = true) {
 }
 ;// CONCATENATED MODULE: ../../shapes/line/dist/browser/LineDrawer.js
 class LineDrawer {
-  draw(context, particle, radius) {
-    const shapeData = particle.shapeData;
+  draw(data) {
+    const {
+        context,
+        particle,
+        radius
+      } = data,
+      shapeData = particle.shapeData;
     context.moveTo(-radius / 2, 0);
     context.lineTo(radius / 2, 0);
     context.lineCap = shapeData?.cap ?? "butt";
@@ -11342,8 +11370,13 @@ async function loadParticlesLinksInteraction(engine, refresh = true) {
 ;// CONCATENATED MODULE: ../../shapes/polygon/dist/browser/PolygonDrawerBase.js
 
 class PolygonDrawerBase {
-  draw(context, particle, radius) {
-    const start = this.getCenter(particle, radius),
+  draw(data) {
+    const {
+        context,
+        particle,
+        radius
+      } = data,
+      start = this.getCenter(particle, radius),
       side = this.getSidesData(particle, radius),
       sideCount = side.count.numerator * side.count.denominator,
       decimalSides = side.count.numerator / side.count.denominator,
@@ -11577,8 +11610,12 @@ async function loadRotateUpdater(engine, refresh = true) {
 ;// CONCATENATED MODULE: ../../shapes/square/dist/browser/SquareDrawer.js
 const fixFactor = Math.sqrt(2);
 class SquareDrawer {
-  draw(context, particle, radius) {
-    const fixedRadius = radius / fixFactor,
+  draw(data) {
+    const {
+        context,
+        radius
+      } = data,
+      fixedRadius = radius / fixFactor,
       fixedDiameter = fixedRadius * 2;
     context.rect(-fixedRadius, -fixedRadius, fixedDiameter, fixedDiameter);
   }
@@ -11594,8 +11631,13 @@ async function loadSquareShape(engine, refresh = true) {
 ;// CONCATENATED MODULE: ../../shapes/star/dist/browser/StarDrawer.js
 
 class StarDrawer {
-  draw(context, particle, radius) {
-    const sides = particle.sides,
+  draw(data) {
+    const {
+        context,
+        particle,
+        radius
+      } = data,
+      sides = particle.sides,
       inset = particle.starInset ?? 2;
     context.moveTo(0, 0 - radius);
     for (let i = 0; i < sides; i++) {
@@ -11733,8 +11775,14 @@ async function loadStrokeColorUpdater(engine, refresh = true) {
 
 const validTypes = ["text", "character", "char"];
 class TextDrawer {
-  draw(context, particle, radius, opacity) {
-    const character = particle.shapeData;
+  draw(data) {
+    const {
+        context,
+        particle,
+        radius,
+        opacity
+      } = data,
+      character = particle.shapeData;
     if (character === undefined) {
       return;
     }