tsparticles 2.3.1 → 2.3.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
- * v2.3.1
+ * v2.3.3
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -20,7 +20,7 @@ return /******/ (() => { // webpackBootstrap
 /******/ 	"use strict";
 /******/ 	var __webpack_modules__ = ({
 
-/***/ 441:
+/***/ 74:
 /***/ (() => {
 
 
@@ -1898,8 +1898,6 @@ __webpack_require__.d(__webpack_exports__, {
   "Rectangle": () => (/* reexport */ Rectangle),
   "Responsive": () => (/* reexport */ Responsive),
   "RgbColorManager": () => (/* reexport */ RgbColorManager),
-  "Rotate": () => (/* reexport */ Rotate),
-  "RotateAnimation": () => (/* reexport */ RotateAnimation),
   "Shadow": () => (/* reexport */ Shadow),
   "Shape": () => (/* reexport */ Shape),
   "Size": () => (/* reexport */ Size),
@@ -1962,6 +1960,7 @@ __webpack_require__.d(__webpack_exports__, {
   "getStyleFromHsl": () => (/* reexport */ getStyleFromHsl),
   "getStyleFromRgb": () => (/* reexport */ getStyleFromRgb),
   "getValue": () => (/* reexport */ getValue),
+  "hasMatchMedia": () => (/* reexport */ hasMatchMedia),
   "hslToRgb": () => (/* reexport */ hslToRgb),
   "hslaToRgba": () => (/* reexport */ hslaToRgba),
   "isDivModeEnabled": () => (/* reexport */ isDivModeEnabled),
@@ -1989,6 +1988,7 @@ __webpack_require__.d(__webpack_exports__, {
   "rectBounce": () => (/* reexport */ rectBounce),
   "resizeEvent": () => (/* reexport */ resizeEvent),
   "rgbToHsl": () => (/* reexport */ rgbToHsl),
+  "safeMatchMedia": () => (/* reexport */ safeMatchMedia),
   "setRandom": () => (/* reexport */ setRandom),
   "setRangeValue": () => (/* reexport */ setRangeValue),
   "singleDivModeExecute": () => (/* reexport */ singleDivModeExecute),
@@ -2489,6 +2489,16 @@ function checkSelector(element, selectors) {
 function isSsr() {
   return typeof window === "undefined" || !window || typeof window.document === "undefined" || !window.document;
 }
+function hasMatchMedia() {
+  return !isSsr() && typeof matchMedia !== "undefined";
+}
+function safeMatchMedia(query) {
+  if (!hasMatchMedia()) {
+    return;
+  }
+
+  return matchMedia(query);
+}
 function animate() {
   return isSsr() ? callback => setTimeout(callback) : callback => (requestAnimationFrame || setTimeout)(callback);
 }
@@ -2507,8 +2517,7 @@ function arrayRandomIndex(array) {
   return Math.floor(getRandom() * array.length);
 }
 function itemFromArray(array, index, useIndex = true) {
-  const fixedIndex = index !== undefined && useIndex ? index % array.length : arrayRandomIndex(array);
-  return array[fixedIndex];
+  return array[index !== undefined && useIndex ? index % array.length : arrayRandomIndex(array)];
 }
 function isPointInside(point, size, offset, radius, direction) {
   return areBoundsInside(calculateBounds(point, radius !== null && radius !== void 0 ? radius : 0), size, offset, direction);
@@ -2709,8 +2718,8 @@ function findItemFromSingleOrMultiple(obj, callback) {
 const randomColorValue = "random",
       midColorValue = "mid",
       colorManagers = new Map();
-function addColorManager(key, manager) {
-  colorManagers.set(key, manager);
+function addColorManager(manager) {
+  colorManagers.set(manager.key, manager);
 }
 
 function hue2rgb(p, q, t) {
@@ -2965,6 +2974,8 @@ function getLinkRandomColor(optColor, blink, consent) {
       return randomColorValue;
     }
 
+    return midColorValue;
+  } else if (color === midColorValue) {
     return midColorValue;
   } else {
     return rangeColorToRgb({
@@ -3070,7 +3081,7 @@ function drawParticle(data) {
   }
 
   context.beginPath();
-  const angle = particle.rotation + (particle.options.rotate.path ? particle.velocity.angle : 0);
+  const angle = particle.rotation + (particle.pathRotation ? particle.velocity.angle : 0);
 
   if (angle !== 0) {
     context.rotate(angle);
@@ -3800,7 +3811,7 @@ class EventListeners {
       container.interactivity.element = container.canvas.element;
     }
 
-    const mediaMatch = !isSsr() && typeof matchMedia !== "undefined" && matchMedia("(prefers-color-scheme: dark)");
+    const mediaMatch = safeMatchMedia("(prefers-color-scheme: dark)");
 
     if (mediaMatch) {
       if (mediaMatch.addEventListener !== undefined) {
@@ -5455,70 +5466,6 @@ class ParticlesNumber {
     }
   }
 
-}
-;// CONCATENATED MODULE: ../../engine/dist/esm/Options/Classes/Particles/Rotate/RotateAnimation.js
-
-class RotateAnimation {
-  constructor() {
-    this.enable = false;
-    this.speed = 0;
-    this.decay = 0;
-    this.sync = false;
-  }
-
-  load(data) {
-    if (!data) {
-      return;
-    }
-
-    if (data.enable !== undefined) {
-      this.enable = data.enable;
-    }
-
-    if (data.speed !== undefined) {
-      this.speed = setRangeValue(data.speed);
-    }
-
-    if (data.decay !== undefined) {
-      this.decay = setRangeValue(data.decay);
-    }
-
-    if (data.sync !== undefined) {
-      this.sync = data.sync;
-    }
-  }
-
-}
-;// CONCATENATED MODULE: ../../engine/dist/esm/Options/Classes/Particles/Rotate/Rotate.js
-
-
-class Rotate extends ValueWithRandom {
-  constructor() {
-    super();
-    this.animation = new RotateAnimation();
-    this.direction = "clockwise";
-    this.path = false;
-    this.value = 0;
-  }
-
-  load(data) {
-    if (!data) {
-      return;
-    }
-
-    super.load(data);
-
-    if (data.direction !== undefined) {
-      this.direction = data.direction;
-    }
-
-    this.animation.load(data.animation);
-
-    if (data.path !== undefined) {
-      this.path = data.path;
-    }
-  }
-
 }
 ;// CONCATENATED MODULE: ../../engine/dist/esm/Options/Classes/Particles/Shadow.js
 
@@ -5843,7 +5790,6 @@ class ZIndex extends ValueWithRandom {
 
 
 
-
 class ParticlesOptions {
   constructor(engine, container) {
     this._engine = engine;
@@ -5857,7 +5803,6 @@ class ParticlesOptions {
     this.number = new ParticlesNumber();
     this.opacity = new Opacity();
     this.reduceDuplicates = false;
-    this.rotate = new Rotate();
     this.shadow = new Shadow();
     this.shape = new Shape();
     this.size = new Size();
@@ -5893,7 +5838,6 @@ class ParticlesOptions {
       this.reduceDuplicates = data.reduceDuplicates;
     }
 
-    this.rotate.load(data.rotate);
     this.shape.load(data.shape);
     this.size.load(data.size);
     this.shadow.load(data.shadow);
@@ -6135,7 +6079,7 @@ class Options {
         this.load(chosenTheme.options);
       }
     } else {
-      const mediaMatch = typeof matchMedia !== "undefined" && matchMedia("(prefers-color-scheme: dark)"),
+      const mediaMatch = safeMatchMedia("(prefers-color-scheme: dark)"),
             clientDarkMode = mediaMatch && mediaMatch.matches,
             defaultTheme = this._findDefaultTheme(clientDarkMode ? "dark" : "light");
 
@@ -6262,6 +6206,7 @@ class Particle {
     this.group = group;
     this._engine = engine;
     this.fill = true;
+    this.pathRotation = false;
     this.close = true;
     this.lastPathTime = 0;
     this.destroyed = false;
@@ -6847,10 +6792,6 @@ class Particles {
     this.limit = 0;
     this.needsSort = false;
     this.lastZIndex = 0;
-    this.freqs = {
-      links: new Map(),
-      triangles: new Map()
-    };
     this.interactionManager = new InteractionManager(this._engine, container);
     const canvasSize = this.container.canvas.size;
     this.quadTree = new QuadTree(new Rectangle(-canvasSize.width / 4, -canvasSize.height / 4, canvasSize.width * 3 / 2, canvasSize.height * 3 / 2), 4);
@@ -6924,45 +6865,6 @@ class Particles {
     }
   }
 
-  getLinkFrequency(p1, p2) {
-    const range = setRangeValue(p1.id, p2.id),
-          key = `${getRangeMin(range)}_${getRangeMax(range)}`;
-    let res = this.freqs.links.get(key);
-
-    if (res === undefined) {
-      res = getRandom();
-      this.freqs.links.set(key, res);
-    }
-
-    return res;
-  }
-
-  getTriangleFrequency(p1, p2, p3) {
-    let [id1, id2, id3] = [p1.id, p2.id, p3.id];
-
-    if (id1 > id2) {
-      [id2, id1] = [id1, id2];
-    }
-
-    if (id2 > id3) {
-      [id3, id2] = [id2, id3];
-    }
-
-    if (id1 > id3) {
-      [id3, id1] = [id1, id3];
-    }
-
-    const key = `${id1}_${id2}_${id3}`;
-    let res = this.freqs.triangles.get(key);
-
-    if (res === undefined) {
-      res = getRandom();
-      this.freqs.triangles.set(key, res);
-    }
-
-    return res;
-  }
-
   handleClickMode(mode) {
     this.interactionManager.handleClickMode(mode);
   }
@@ -6974,8 +6876,6 @@ class Particles {
           options = container.actualOptions;
     this.lastZIndex = 0;
     this.needsSort = false;
-    this.freqs.links = new Map();
-    this.freqs.triangles = new Map();
     let handled = false;
     this.updaters = this._engine.plugins.getUpdaters(container, true);
     this.interactionManager.init();
@@ -7037,7 +6937,7 @@ class Particles {
   }
 
   removeAt(index, quantity = 1, group, override) {
-    if (!(index >= 0 && index <= this.count)) {
+    if (index < 0 || index > this.count) {
       return;
     }
 
@@ -7227,26 +7127,24 @@ class Retina {
     const motionOptions = this.container.actualOptions.motion;
 
     if (motionOptions && (motionOptions.disable || motionOptions.reduce.value)) {
-      if (isSsr() || typeof matchMedia === "undefined" || !matchMedia) {
-        this.reduceFactor = 1;
-      } else {
-        const mediaQuery = matchMedia("(prefers-reduced-motion: reduce)");
+      const mediaQuery = safeMatchMedia("(prefers-reduced-motion: reduce)");
 
-        if (mediaQuery) {
-          this._handleMotionChange(mediaQuery);
+      if (mediaQuery) {
+        this._handleMotionChange(mediaQuery);
 
-          const handleChange = () => {
-            this._handleMotionChange(mediaQuery);
+        const handleChange = () => {
+          this._handleMotionChange(mediaQuery);
 
-            container.refresh().catch(() => {});
-          };
+          container.refresh().catch(() => {});
+        };
 
-          if (mediaQuery.addEventListener !== undefined) {
-            mediaQuery.addEventListener("change", handleChange);
-          } else if (mediaQuery.addListener !== undefined) {
-            mediaQuery.addListener(handleChange);
-          }
+        if (mediaQuery.addEventListener !== undefined) {
+          mediaQuery.addEventListener("change", handleChange);
+        } else if (mediaQuery.addListener !== undefined) {
+          mediaQuery.addListener(handleChange);
         }
+      } else {
+        this.reduceFactor = 1;
       }
     } else {
       this.reduceFactor = 1;
@@ -7540,7 +7438,13 @@ class Container {
   }
 
   exportConfiguration() {
-    return JSON.stringify(this.actualOptions, undefined, 2);
+    return JSON.stringify(this.actualOptions, (key, value) => {
+      if (key === "_engine" || key === "_container") {
+        return;
+      }
+
+      return value;
+    }, 2);
   }
 
   exportImage(callback, type, quality) {
@@ -8047,6 +7951,17 @@ class Loader {
 
 }
 ;// CONCATENATED MODULE: ../../engine/dist/esm/Core/Utils/Plugins.js
+function getItemsFromInitializer(container, map, initializers, force = false) {
+  let res = map.get(container);
+
+  if (!res || force) {
+    res = [...initializers.values()].map(t => t(container));
+    map.set(container, res);
+  }
+
+  return res;
+}
+
 class Plugins {
   constructor(engine) {
     this._engine = engine;
@@ -8119,25 +8034,11 @@ class Plugins {
   }
 
   getInteractors(container, force = false) {
-    let res = this.interactors.get(container);
-
-    if (!res || force) {
-      res = [...this.interactorsInitializers.values()].map(t => t(container));
-      this.interactors.set(container, res);
-    }
-
-    return res;
+    return getItemsFromInitializer(container, this.interactors, this.interactorsInitializers, force);
   }
 
   getMovers(container, force = false) {
-    let res = this.movers.get(container);
-
-    if (!res || force) {
-      res = [...this.moversInitializers.values()].map(t => t(container));
-      this.movers.set(container, res);
-    }
-
-    return res;
+    return getItemsFromInitializer(container, this.movers, this.moversInitializers, force);
   }
 
   getPathGenerator(type) {
@@ -8161,14 +8062,7 @@ class Plugins {
   }
 
   getUpdaters(container, force = false) {
-    let res = this.updaters.get(container);
-
-    if (!res || force) {
-      res = [...this.updatersInitializers.values()].map(t => t(container));
-      this.updaters.set(container, res);
-    }
-
-    return res;
+    return getItemsFromInitializer(container, this.updaters, this.updatersInitializers, force);
   }
 
   loadOptions(options, sourceOptions) {
@@ -8330,6 +8224,7 @@ class Engine {
 
 class HslColorManager {
   constructor() {
+    this.key = "hsl";
     this.stringPrefix = "hsl";
   }
 
@@ -8379,6 +8274,7 @@ class HslColorManager {
 
 class RgbColorManager {
   constructor() {
+    this.key = "rgb";
     this.stringPrefix = "rgb";
   }
 
@@ -8447,8 +8343,8 @@ class ParticlesInteractorBase {
 
 const rgbColorManager = new RgbColorManager(),
       hslColorManager = new HslColorManager();
-addColorManager("rgb", rgbColorManager);
-addColorManager("hsl", hslColorManager);
+addColorManager(rgbColorManager);
+addColorManager(hslColorManager);
 const tsParticles = new Engine();
 tsParticles.init();
 
@@ -8627,10 +8523,6 @@ tsParticles.init();
 
 
 
-
-
-
-
 
 
 
@@ -10379,7 +10271,7 @@ async function loadExternalTrailInteraction(engine) {
 
 
 // EXTERNAL MODULE: ../../plugins/polygonMask/dist/esm/pathseg.js
-var pathseg = __webpack_require__(441);
+var pathseg = __webpack_require__(74);
 ;// CONCATENATED MODULE: ../../plugins/polygonMask/dist/esm/Options/Classes/PolygonMaskDrawStroke.js
 
 class PolygonMaskDrawStroke {
@@ -11443,20 +11335,85 @@ const initPjs = engine => {
 };
 
 
-;// CONCATENATED MODULE: ../../updaters/angle/dist/esm/AngleUpdater.js
+;// CONCATENATED MODULE: ../../updaters/angle/dist/esm/Options/Classes/RotateAnimation.js
+
+class RotateAnimation {
+  constructor() {
+    this.enable = false;
+    this.speed = 0;
+    this.decay = 0;
+    this.sync = false;
+  }
+
+  load(data) {
+    if (!data) {
+      return;
+    }
+
+    if (data.enable !== undefined) {
+      this.enable = data.enable;
+    }
+
+    if (data.speed !== undefined) {
+      this.speed = setRangeValue(data.speed);
+    }
+
+    if (data.decay !== undefined) {
+      this.decay = setRangeValue(data.decay);
+    }
+
+    if (data.sync !== undefined) {
+      this.sync = data.sync;
+    }
+  }
+
+}
+;// CONCATENATED MODULE: ../../updaters/angle/dist/esm/Options/Classes/Rotate.js
+
+
+class Rotate extends ValueWithRandom {
+  constructor() {
+    super();
+    this.animation = new RotateAnimation();
+    this.direction = "clockwise";
+    this.path = false;
+    this.value = 0;
+  }
+
+  load(data) {
+    if (!data) {
+      return;
+    }
+
+    super.load(data);
+
+    if (data.direction !== undefined) {
+      this.direction = data.direction;
+    }
+
+    this.animation.load(data.animation);
+
+    if (data.path !== undefined) {
+      this.path = data.path;
+    }
+  }
+
+}
+;// CONCATENATED MODULE: ../../updaters/angle/dist/esm/RotateUpdater.js
+
 
 
 function updateAngle(particle, delta) {
   var _a, _b;
 
-  const rotate = particle.rotate;
+  const rotate = particle.rotate,
+        rotateOptions = particle.options.rotate;
 
-  if (!rotate) {
+  if (!rotate || !rotateOptions) {
     return;
   }
 
-  const rotateOptions = particle.options.rotate,
-        rotateAnimation = rotateOptions.animation,
+  const rotateAnimation = rotateOptions.animation,
         speed = ((_a = rotate.velocity) !== null && _a !== void 0 ? _a : 0) * delta.factor,
         max = 2 * Math.PI,
         decay = (_b = rotate.decay) !== null && _b !== void 0 ? _b : 1;
@@ -11491,17 +11448,23 @@ function updateAngle(particle, delta) {
   }
 }
 
-class AngleUpdater {
+class RotateUpdater {
   constructor(container) {
     this.container = container;
   }
 
   init(particle) {
     const rotateOptions = particle.options.rotate;
+
+    if (!rotateOptions) {
+      return;
+    }
+
     particle.rotate = {
       enable: rotateOptions.animation.enable,
       value: getRangeValue(rotateOptions.value) * Math.PI / 180
     };
+    particle.pathRotation = rotateOptions.path;
     let rotateDirection = rotateOptions.direction;
 
     if (rotateDirection === "random") {
@@ -11520,7 +11483,7 @@ class AngleUpdater {
         break;
     }
 
-    const rotateAnimation = particle.options.rotate.animation;
+    const rotateAnimation = rotateOptions.animation;
 
     if (rotateAnimation.enable) {
       particle.rotate.decay = 1 - getRangeValue(rotateAnimation.decay);
@@ -11535,9 +11498,23 @@ class AngleUpdater {
   }
 
   isEnabled(particle) {
-    const rotate = particle.options.rotate,
-          rotateAnimation = rotate.animation;
-    return !particle.destroyed && !particle.spawning && rotateAnimation.enable && !rotate.path;
+    const rotate = particle.options.rotate;
+
+    if (!rotate) {
+      return false;
+    }
+
+    return !particle.destroyed && !particle.spawning && rotate.animation.enable && !rotate.path;
+  }
+
+  loadOptions(options, ...sources) {
+    if (!options.rotate) {
+      options.rotate = new Rotate();
+    }
+
+    for (const source of sources) {
+      options.rotate.load(source === null || source === void 0 ? void 0 : source.rotate);
+    }
   }
 
   update(particle, delta) {
@@ -11555,7 +11532,7 @@ class AngleUpdater {
 ;// CONCATENATED MODULE: ../../updaters/angle/dist/esm/index.js
 
 async function loadAngleUpdater(engine) {
-  await engine.addParticleUpdater("angle", container => new AngleUpdater(container));
+  await engine.addParticleUpdater("rotate", container => new RotateUpdater(container));
 }
 ;// CONCATENATED MODULE: ../../move/base/dist/esm/Utils.js
 
@@ -15564,9 +15541,31 @@ function drawLinkTriangle(context, pos1, pos2, pos3, backgroundMask, composite,
 ;// CONCATENATED MODULE: ../../interactions/particles/links/dist/esm/LinkInstance.js
 
 
+
+function getLinkKey(ids) {
+  ids.sort((a, b) => a - b);
+  return ids.join("_");
+}
+
+function setLinkFrequency(particles, dictionary) {
+  const key = getLinkKey(particles.map(t => t.id));
+  let res = dictionary.get(key);
+
+  if (res === undefined) {
+    res = getRandom();
+    dictionary.set(key, res);
+  }
+
+  return res;
+}
+
 class LinkInstance {
   constructor(container) {
     this.container = container;
+    this._freqs = {
+      links: new Map(),
+      triangles: new Map()
+    };
   }
 
   drawParticle(context, particle) {
@@ -15580,7 +15579,7 @@ class LinkInstance {
     }
 
     context.save();
-    const p1Links = particle.links.filter(l => pOptions.links && container.particles.getLinkFrequency(particle, l.destination) <= pOptions.links.frequency);
+    const p1Links = particle.links.filter(l => pOptions.links && this.getLinkFrequency(particle, l.destination) <= pOptions.links.frequency);
 
     for (const link of p1Links) {
       this.drawTriangles(container, pOptions, particle, link, p1Links);
@@ -15593,6 +15592,11 @@ class LinkInstance {
     context.restore();
   }
 
+  init() {
+    this._freqs.links = new Map();
+    this._freqs.triangles = new Map();
+  }
+
   particleCreated(particle) {
     particle.links = [];
 
@@ -15702,15 +15706,14 @@ class LinkInstance {
   drawTriangles(container, options, p1, link, p1Links) {
     var _a, _b, _c;
 
-    const p2 = link.destination,
-          particles = container.particles;
+    const p2 = link.destination;
 
     if (!(((_a = options.links) === null || _a === void 0 ? void 0 : _a.triangles.enable) && ((_b = p2.options.links) === null || _b === void 0 ? void 0 : _b.triangles.enable))) {
       return;
     }
 
     const vertices = (_c = p2.links) === null || _c === void 0 ? void 0 : _c.filter(t => {
-      const linkFreq = container.particles.getLinkFrequency(p2, t.destination);
+      const linkFreq = this.getLinkFrequency(p2, t.destination);
       return p2.options.links && linkFreq <= p2.options.links.frequency && p1Links.findIndex(l => l.destination === t.destination) >= 0;
     });
 
@@ -15720,7 +15723,7 @@ class LinkInstance {
 
     for (const vertex of vertices) {
       const p3 = vertex.destination,
-            triangleFreq = particles.getTriangleFrequency(p1, p2, p3);
+            triangleFreq = this.getTriangleFrequency(p1, p2, p3);
 
       if (triangleFreq > options.links.triangles.frequency) {
         continue;
@@ -15730,6 +15733,14 @@ class LinkInstance {
     }
   }
 
+  getLinkFrequency(p1, p2) {
+    return setLinkFrequency([p1, p2], this._freqs.links);
+  }
+
+  getTriangleFrequency(p1, p2, p3) {
+    return setLinkFrequency([p1, p2, p3], this._freqs.triangles);
+  }
+
 }
 ;// CONCATENATED MODULE: ../../interactions/particles/links/dist/esm/plugin.js