@tsparticles/all 3.0.0-beta.1 → 3.0.0-beta.3

package/tsparticles.all.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')
@@ -206,6 +206,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),
@@ -572,6 +573,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;
@@ -1231,7 +1238,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();
   }
@@ -1241,11 +1256,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;
   }
@@ -1253,9 +1276,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;
   }
@@ -1263,7 +1301,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) {
@@ -3647,7 +3692,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;
   }
@@ -3657,7 +3712,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;
@@ -3782,16 +3837,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);
   }
@@ -3880,7 +3925,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) {
@@ -4191,8 +4236,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,
@@ -4299,7 +4345,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++) {
@@ -4475,7 +4521,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;
@@ -4514,6 +4559,7 @@ class Container {
       }
     };
     this._engine = engine;
+    this.id = Symbol(id);
     this.fpsLimit = 120;
     this.smooth = false;
     this._delay = 0;
@@ -4543,9 +4589,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
     });
@@ -4988,17 +5032,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);
@@ -5027,44 +5071,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);
@@ -5142,7 +5153,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) {
@@ -5424,8 +5435,13 @@ if (!isSsr()) {
 ;// CONCATENATED MODULE: ../../shapes/arrow/dist/browser/ArrowDrawer.js
 
 class ArrowDrawer {
-  draw(context, particle, radius) {
-    const width = radius * 2,
+  draw(data) {
+    const {
+        context,
+        particle,
+        radius
+      } = data,
+      width = radius * 2,
       heightFactor = particle.heightFactor ?? 0.5,
       headWidthFactor = particle.headWidthFactor ?? 0.2,
       bodyHeightFactor = particle.bodyHeightFactor ?? 0.5,
@@ -5456,14 +5472,22 @@ async function loadArrowShape(engine, refresh = true) {
 }
 ;// CONCATENATED MODULE: ../../shapes/bubble/dist/browser/BubbleDrawer.js
 class BubbleDrawer {
-  afterEffect(context, particle, radius) {
+  afterEffect(data) {
+    const {
+      context,
+      radius
+    } = data;
     context.beginPath();
     context.arc(radius / 3, -radius / 3, radius / 3, 0, Math.PI * 2, false);
     context.closePath();
     context.fillStyle = "#fff9";
     context.fill();
   }
-  draw(context, particle, radius) {
+  draw(data) {
+    const {
+      context,
+      radius
+    } = data;
     context.arc(0, 0, radius, 0, Math.PI * 2, false);
   }
 }
@@ -5873,18 +5897,22 @@ async function loadCanvasMaskPlugin(engine, refresh = true) {
   await engine.addPlugin(new CanvasMaskPlugin(engine), refresh);
 }
 ;// CONCATENATED MODULE: ../../shapes/cards/dist/browser/Utils.js
-function drawPath(ctx, radius, path) {
+function drawPath(data, path) {
   if (!path.segments.length || !path.segments[0].values.length) {
     return;
   }
-  ctx.moveTo(path.segments[0].values[0].x * radius, path.segments[0].values[0].y * radius);
+  const {
+    context,
+    radius
+  } = data;
+  context.moveTo(path.segments[0].values[0].x * radius, path.segments[0].values[0].y * radius);
   for (let i = 0; i < path.segments.length; i++) {
     const segment = path.segments[i];
-    ctx.bezierCurveTo(segment.values[1].x * radius, segment.values[1].y * radius, segment.values[2].x * radius, segment.values[2].y * radius, segment.values[3].x * radius, segment.values[3].y * radius);
+    context.bezierCurveTo(segment.values[1].x * radius, segment.values[1].y * radius, segment.values[2].x * radius, segment.values[2].y * radius, segment.values[3].x * radius, segment.values[3].y * radius);
   }
   for (let i = path.segments.length - 1; i >= 0; i--) {
     const segment = path.segments[i];
-    ctx.bezierCurveTo(-segment.values[2].x * radius, segment.values[2].y * radius, -segment.values[1].x * radius, segment.values[1].y * radius, -segment.values[0].x * radius, segment.values[0].y * radius);
+    context.bezierCurveTo(-segment.values[2].x * radius, segment.values[2].y * radius, -segment.values[1].x * radius, segment.values[1].y * radius, -segment.values[0].x * radius, segment.values[0].y * radius);
   }
 }
 const n = 1.0 / 2;
@@ -6129,23 +6157,23 @@ const paths = {
 ;// CONCATENATED MODULE: ../../shapes/cards/dist/browser/CardsSuitsDrawers.js
 
 class SpadeDrawer {
-  draw(context, _particle, radius) {
-    drawPath(context, radius, paths.spade);
+  draw(data) {
+    drawPath(data, paths.spade);
   }
 }
 class HeartDrawer {
-  draw(context, _particle, radius) {
-    drawPath(context, radius, paths.heart);
+  draw(data) {
+    drawPath(data, paths.heart);
   }
 }
 class DiamondDrawer {
-  draw(context, _particle, radius) {
-    drawPath(context, radius, paths.diamond);
+  draw(data) {
+    drawPath(data, paths.diamond);
   }
 }
 class ClubDrawer {
-  draw(context, _particle, radius) {
-    drawPath(context, radius, paths.club);
+  draw(data) {
+    drawPath(data, paths.club);
   }
 }
 ;// CONCATENATED MODULE: ../../shapes/cards/dist/browser/index.js
@@ -6159,21 +6187,31 @@ async function loadCardsShape(engine, refresh = true) {
 ;// CONCATENATED MODULE: ../../shapes/cog/dist/browser/CogDrawer.js
 
 class CogDrawer {
-  afterEffect(ctx, particle, radius) {
+  afterEffect(data) {
+    const {
+      context,
+      particle,
+      radius
+    } = data;
     if (particle.cogHoleRadius === undefined || particle.cogInnerRadius === undefined || particle.cogInnerTaper === undefined || particle.cogNotches === undefined || particle.cogOuterTaper === undefined) {
       return;
     }
     const pi2 = 2 * Math.PI,
       holeRadius = radius * particle.cogHoleRadius / 100;
-    ctx.globalCompositeOperation = "destination-out";
-    ctx.beginPath();
-    ctx.moveTo(holeRadius, 0);
-    ctx.arc(0, 0, holeRadius, 0, pi2);
-    ctx.closePath();
-    ctx.fill();
-    ctx.globalCompositeOperation = "source-over";
-  }
-  draw(ctx, particle, radius) {
+    context.globalCompositeOperation = "destination-out";
+    context.beginPath();
+    context.moveTo(holeRadius, 0);
+    context.arc(0, 0, holeRadius, 0, pi2);
+    context.closePath();
+    context.fill();
+    context.globalCompositeOperation = "source-over";
+  }
+  draw(data) {
+    const {
+      context,
+      particle,
+      radius
+    } = data;
     if (particle.cogHoleRadius === undefined || particle.cogInnerRadius === undefined || particle.cogInnerTaper === undefined || particle.cogNotches === undefined || particle.cogOuterTaper === undefined) {
       return;
     }
@@ -6184,14 +6222,14 @@ class CogDrawer {
       innerRadius = radius * particle.cogInnerRadius / 100;
     let a = angle,
       toggle = false;
-    ctx.moveTo(radius * Math.cos(taperAO), radius * Math.sin(taperAO));
+    context.moveTo(radius * Math.cos(taperAO), radius * Math.sin(taperAO));
     for (; a <= pi2; a += angle) {
       if (toggle) {
-        ctx.lineTo(innerRadius * Math.cos(a - taperAI), innerRadius * Math.sin(a - taperAI));
-        ctx.lineTo(radius * Math.cos(a + taperAO), radius * Math.sin(a + taperAO));
+        context.lineTo(innerRadius * Math.cos(a - taperAI), innerRadius * Math.sin(a - taperAI));
+        context.lineTo(radius * Math.cos(a + taperAO), radius * Math.sin(a + taperAO));
       } else {
-        ctx.lineTo(radius * Math.cos(a - taperAO), radius * Math.sin(a - taperAO));
-        ctx.lineTo(innerRadius * Math.cos(a + taperAI), innerRadius * Math.sin(a + taperAI));
+        context.lineTo(radius * Math.cos(a - taperAO), radius * Math.sin(a - taperAO));
+        context.lineTo(innerRadius * Math.cos(a + taperAI), innerRadius * Math.sin(a + taperAI));
       }
       toggle = !toggle;
     }
@@ -8412,7 +8450,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,
@@ -11216,8 +11259,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;
@@ -11653,8 +11703,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";
@@ -12470,8 +12525,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,
@@ -12705,8 +12765,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);
   }
@@ -12722,8 +12786,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++) {
@@ -12861,8 +12930,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;
     }
@@ -13792,7 +13867,11 @@ async function loadGradientUpdater(engine, refresh = true) {
 }
 ;// CONCATENATED MODULE: ../../shapes/heart/dist/browser/HeartDrawer.js
 class HeartDrawer_HeartDrawer {
-  draw(context, _particle, radius) {
+  draw(data) {
+    const {
+      context,
+      radius
+    } = data;
     const x = -radius,
       y = -radius;
     context.moveTo(x, y + radius / 2);
@@ -14642,8 +14721,14 @@ class MultilineTextDrawer {
       }
     };
   }
-  draw(context, particle, radius, opacity) {
-    const character = particle.shapeData;
+  draw(data) {
+    const {
+        particle,
+        context,
+        radius,
+        opacity
+      } = data,
+      character = particle.shapeData;
     if (character === undefined) {
       return;
     }
@@ -14991,7 +15076,12 @@ function Utils_drawPath(ctx, radius, path) {
 
 
 class PathDrawer {
-  draw(context, particle, radius) {
+  draw(data) {
+    const {
+      context,
+      particle,
+      radius
+    } = data;
     if (!particle.pathData) {
       return;
     }
@@ -16632,7 +16722,7 @@ async function loadPerlinNoisePath(engine, refresh = true) {
       };
     }
   } catch (e) {
-    console.warn("An error occurred in tsParticles pathseg polyfill. If the Polygon Mask is not working, please open an issue here: https://github.com/matteobruni/tsparticles", e);
+    console.warn("An error occurred in tsParticles pathseg polyfill. If the Polygon Mask is not working, please open an issue here: https://github.com/tsparticles/tsparticles", e);
   }
 })();
 ;// CONCATENATED MODULE: ../../plugins/polygonMask/dist/browser/Options/Classes/PolygonMaskDrawStroke.js
@@ -17426,7 +17516,12 @@ function roundedPath(context, path, radius) {
   }
 }
 class RoundedPolygonDrawer {
-  draw(context, particle, radius) {
+  draw(data) {
+    const {
+      context,
+      particle,
+      radius
+    } = data;
     roundedPath(context, polygon(particle.sides, radius), particle.borderRadius ?? 5);
   }
   getSidesCount(particle) {
@@ -17471,8 +17566,13 @@ const RoundedRectDrawer_fixFactor = Math.sqrt(2),
     ctx.quadraticCurveTo(x, y, x + radius.topLeft, y);
   };
 class RoundedRectDrawer {
-  draw(context, particle, radius) {
-    const fixedRadius = radius / RoundedRectDrawer_fixFactor,
+  draw(data) {
+    const {
+        context,
+        particle,
+        radius
+      } = data,
+      fixedRadius = radius / RoundedRectDrawer_fixFactor,
       fixedDiameter = fixedRadius * 2,
       borderRadius = particle.borderRadius ?? 5;
     if ("roundRect" in context) {
@@ -18581,7 +18681,12 @@ async function loadSoundsPlugin(engine, refresh = true) {
 ;// CONCATENATED MODULE: ../../shapes/spiral/dist/browser/SpiralDrawer.js
 
 class SpiralDrawer {
-  draw(context, particle, radius) {
+  draw(data) {
+    const {
+      context,
+      particle,
+      radius
+    } = data;
     if (particle.spiralInnerRadius === undefined || particle.spiralLineSpacing === undefined || particle.spiralWidthFactor === undefined) {
       return;
     }