tsparticles 2.5.3 → 2.6.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
- * v2.5.3
+ * v2.6.0
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -100,6 +100,7 @@ __webpack_require__.d(__webpack_exports__, {
   "Point": () => (/* reexport */ Point),
   "Range": () => (/* reexport */ Range),
   "Rectangle": () => (/* reexport */ Rectangle),
+  "ResizeEvent": () => (/* reexport */ ResizeEvent),
   "Responsive": () => (/* reexport */ Responsive),
   "RgbColorManager": () => (/* reexport */ RgbColorManager),
   "Shadow": () => (/* reexport */ Shadow),
@@ -372,9 +373,7 @@ function addEasing(name, easing) {
   }
 }
 function getEasing(name) {
-  var _a;
-  const noEasing = value => value;
-  return (_a = easings.get(name)) !== null && _a !== void 0 ? _a : noEasing;
+  return easings.get(name) || (value => value);
 }
 function setRandom(rnd = Math.random) {
   _random = rnd;
@@ -433,7 +432,7 @@ function getDistances(pointA, pointB) {
   return {
     dx: dx,
     dy: dy,
-    distance: Math.sqrt(dx * dx + dy * dy)
+    distance: Math.sqrt(dx ** 2 + dy ** 2)
   };
 }
 function getDistance(pointA, pointB) {
@@ -1019,7 +1018,7 @@ function setColorAnimation(colorValue, colorAnimation, reduceFactor) {
   if (colorValue.enable) {
     colorValue.velocity = getRangeValue(colorAnimation.speed) / 100 * reduceFactor;
     colorValue.decay = 1 - getRangeValue(colorAnimation.decay);
-    colorValue.status = 0;
+    colorValue.status = "increasing";
     if (!colorAnimation.sync) {
       colorValue.velocity *= getRandom();
       colorValue.value *= getRandom();
@@ -1589,19 +1588,21 @@ class EventListeners {
   constructor(container) {
     this.container = container;
     this.canPush = true;
-    this.mouseMoveHandler = e => this.mouseTouchMove(e);
-    this.touchStartHandler = e => this.mouseTouchMove(e);
-    this.touchMoveHandler = e => this.mouseTouchMove(e);
-    this.touchEndHandler = () => this.mouseTouchFinish();
-    this.mouseLeaveHandler = () => this.mouseTouchFinish();
-    this.touchCancelHandler = () => this.mouseTouchFinish();
-    this.touchEndClickHandler = e => this.mouseTouchClick(e);
-    this.mouseUpHandler = e => this.mouseTouchClick(e);
-    this.mouseDownHandler = () => this.mouseDown();
-    this.visibilityChangeHandler = () => this.handleVisibilityChange();
-    this.themeChangeHandler = e => this.handleThemeChange(e);
-    this.oldThemeChangeHandler = e => this.handleThemeChange(e);
-    this.resizeHandler = () => this.handleWindowResize();
+    this.handlers = {
+      mouseMove: e => this.mouseTouchMove(e),
+      touchStart: e => this.mouseTouchMove(e),
+      touchMove: e => this.mouseTouchMove(e),
+      touchEnd: () => this.mouseTouchFinish(),
+      mouseLeave: () => this.mouseTouchFinish(),
+      touchCancel: () => this.mouseTouchFinish(),
+      touchEndClick: e => this.mouseTouchClick(e),
+      mouseUp: e => this.mouseTouchClick(e),
+      mouseDown: () => this.mouseDown(),
+      visibilityChange: () => this.handleVisibilityChange(),
+      themeChange: e => this.handleThemeChange(e),
+      oldThemeChange: e => this.handleThemeChange(e),
+      resize: () => this.handleWindowResize()
+    };
   }
   addListeners() {
     this.manageListeners(true);
@@ -1613,12 +1614,13 @@ class EventListeners {
     const container = this.container,
       options = container.actualOptions;
     if (this.canPush) {
-      const mousePos = container.interactivity.mouse.position;
+      const mouseInteractivity = container.interactivity.mouse,
+        mousePos = mouseInteractivity.position;
       if (!mousePos) {
         return;
       }
-      container.interactivity.mouse.clickPosition = Object.assign({}, mousePos);
-      container.interactivity.mouse.clickTime = new Date().getTime();
+      mouseInteractivity.clickPosition = Object.assign({}, mousePos);
+      mouseInteractivity.clickTime = new Date().getTime();
       const onClick = options.interactivity.events.onClick;
       executeOnSingleOrMultiple(onClick.mode, mode => this.handleClickMode(mode));
     }
@@ -1631,10 +1633,13 @@ class EventListeners {
   }
   handleThemeChange(e) {
     const mediaEvent = e,
-      themeName = mediaEvent.matches ? this.container.options.defaultThemes.dark : this.container.options.defaultThemes.light,
-      theme = this.container.options.themes.find(theme => theme.name === themeName);
+      container = this.container,
+      options = container.options,
+      defaultThemes = options.defaultThemes,
+      themeName = mediaEvent.matches ? defaultThemes.dark : defaultThemes.light,
+      theme = options.themes.find(theme => theme.name === themeName);
     if (theme && theme.default.auto) {
-      this.container.loadTheme(themeName);
+      container.loadTheme(themeName);
     }
   }
   handleVisibilityChange() {
@@ -1664,11 +1669,12 @@ class EventListeners {
     this.resizeTimeout = setTimeout(async () => {
       var _a;
       return (_a = this.container.canvas) === null || _a === void 0 ? void 0 : _a.windowResize();
-    }, 500);
+    }, this.container.actualOptions.interactivity.events.resize.delay * 1000);
   }
   manageListeners(add) {
     var _a;
-    const container = this.container,
+    const handlers = this.handlers,
+      container = this.container,
       options = container.actualOptions,
       detectType = options.interactivity.detectsOn;
     let mouseLeaveTmpEvent = mouseLeaveEvent;
@@ -1684,12 +1690,12 @@ class EventListeners {
     const mediaMatch = safeMatchMedia("(prefers-color-scheme: dark)");
     if (mediaMatch) {
       if (mediaMatch.addEventListener !== undefined) {
-        manageListener(mediaMatch, "change", this.themeChangeHandler, add);
+        manageListener(mediaMatch, "change", handlers.themeChange, add);
       } else if (mediaMatch.addListener !== undefined) {
         if (add) {
-          mediaMatch.addListener(this.oldThemeChangeHandler);
+          mediaMatch.addListener(handlers.oldThemeChange);
         } else {
-          mediaMatch.removeListener(this.oldThemeChangeHandler);
+          mediaMatch.removeListener(handlers.oldThemeChange);
         }
       }
     }
@@ -1699,18 +1705,18 @@ class EventListeners {
     }
     const html = interactivityEl;
     if (options.interactivity.events.onHover.enable || options.interactivity.events.onClick.enable) {
-      manageListener(interactivityEl, mouseMoveEvent, this.mouseMoveHandler, add);
-      manageListener(interactivityEl, touchStartEvent, this.touchStartHandler, add);
-      manageListener(interactivityEl, touchMoveEvent, this.touchMoveHandler, add);
+      manageListener(interactivityEl, mouseMoveEvent, handlers.mouseMove, add);
+      manageListener(interactivityEl, touchStartEvent, handlers.touchStart, add);
+      manageListener(interactivityEl, touchMoveEvent, handlers.touchMove, add);
       if (!options.interactivity.events.onClick.enable) {
-        manageListener(interactivityEl, touchEndEvent, this.touchEndHandler, add);
+        manageListener(interactivityEl, touchEndEvent, handlers.touchEnd, add);
       } else {
-        manageListener(interactivityEl, touchEndEvent, this.touchEndClickHandler, add);
-        manageListener(interactivityEl, mouseUpEvent, this.mouseUpHandler, add);
-        manageListener(interactivityEl, mouseDownEvent, this.mouseDownHandler, add);
+        manageListener(interactivityEl, touchEndEvent, handlers.touchEndClick, add);
+        manageListener(interactivityEl, mouseUpEvent, handlers.mouseUp, add);
+        manageListener(interactivityEl, mouseDownEvent, handlers.mouseDown, add);
       }
-      manageListener(interactivityEl, mouseLeaveTmpEvent, this.mouseLeaveHandler, add);
-      manageListener(interactivityEl, touchCancelEvent, this.touchCancelHandler, add);
+      manageListener(interactivityEl, mouseLeaveTmpEvent, handlers.mouseLeave, add);
+      manageListener(interactivityEl, touchCancelEvent, handlers.touchCancel, add);
     }
     if (container.canvas.element) {
       container.canvas.element.style.pointerEvents = html === container.canvas.element ? "initial" : "none";
@@ -1734,11 +1740,11 @@ class EventListeners {
           this.resizeObserver.observe(container.canvas.element);
         }
       } else {
-        manageListener(window, resizeEvent, this.resizeHandler, add);
+        manageListener(window, resizeEvent, handlers.resize, add);
       }
     }
     if (document) {
-      manageListener(document, visibilityChangeEvent, this.visibilityChangeHandler, add, false);
+      manageListener(document, visibilityChangeEvent, handlers.visibilityChange, add, false);
     }
   }
   mouseDown() {
@@ -2130,17 +2136,36 @@ class HoverEvent {
     this.parallax.load(data.parallax);
   }
 }
+;// CONCATENATED MODULE: ../../engine/dist/esm/Options/Classes/Interactivity/Events/ResizeEvent.js
+class ResizeEvent {
+  constructor() {
+    this.delay = 0.5;
+    this.enable = true;
+  }
+  load(data) {
+    if (data === undefined) {
+      return;
+    }
+    if (data.delay !== undefined) {
+      this.delay = data.delay;
+    }
+    if (data.enable !== undefined) {
+      this.enable = data.enable;
+    }
+  }
+}
 ;// CONCATENATED MODULE: ../../engine/dist/esm/Options/Classes/Interactivity/Events/Events.js
 
 
 
 
+
 class Events {
   constructor() {
     this.onClick = new ClickEvent();
     this.onDiv = new DivEvent();
     this.onHover = new HoverEvent();
-    this.resize = true;
+    this.resize = new ResizeEvent();
   }
   get onclick() {
     return this.onClick;
@@ -2175,8 +2200,10 @@ class Events {
       });
     }
     this.onHover.load((_c = data.onHover) !== null && _c !== void 0 ? _c : data.onhover);
-    if (data.resize !== undefined) {
-      this.resize = data.resize;
+    if (typeof data.resize === "boolean") {
+      this.resize.enable = data.resize;
+    } else {
+      this.resize.load(data.resize);
     }
   }
 }
@@ -3495,9 +3522,14 @@ class Options {
     this.responsive.sort((a, b) => a.maxWidth - b.maxWidth);
     if (data.themes !== undefined) {
       for (const theme of data.themes) {
-        const optTheme = new Theme();
-        optTheme.load(theme);
-        this.themes.push(optTheme);
+        const existingTheme = this.themes.find(t => t.name === theme.name);
+        if (!existingTheme) {
+          const optTheme = new Theme();
+          optTheme.load(theme);
+          this.themes.push(optTheme);
+        } else {
+          existingTheme.load(theme);
+        }
       }
     }
     this.defaultThemes.dark = (_d = this._findDefaultTheme("dark")) === null || _d === void 0 ? void 0 : _d.name;
@@ -3560,10 +3592,10 @@ class InteractionManager {
     this._particleInteractors = [];
     for (const interactor of this._interactors) {
       switch (interactor.type) {
-        case 0:
+        case "external":
           this._externalInteractors.push(interactor);
           break;
-        case 1:
+        case "particles":
           this._particleInteractors.push(interactor);
           break;
       }
@@ -3619,6 +3651,7 @@ class Particle {
     this.init(id, position, overrideOptions, group);
   }
   destroy(override) {
+    var _a;
     if (this.unbreakable || this.destroyed) {
       return;
     }
@@ -3635,6 +3668,7 @@ class Particle {
         updater.particleDestroyed(this, override);
       }
     }
+    (_a = this.pathGenerator) === null || _a === void 0 ? void 0 : _a.reset(this);
   }
   draw(delta) {
     const container = this.container;
@@ -3746,21 +3780,21 @@ class Particle {
       maxLoops: getRangeValue(sizeOptions.animation.count)
     };
     if (sizeAnimation.enable) {
-      this.size.status = 0;
+      this.size.status = "increasing";
       this.size.decay = 1 - getRangeValue(sizeAnimation.decay);
       switch (sizeAnimation.startValue) {
         case "min":
           this.size.value = this.size.min;
-          this.size.status = 0;
+          this.size.status = "increasing";
           break;
         case "random":
           this.size.value = randomInRange(this.size) * pxRatio;
-          this.size.status = getRandom() >= 0.5 ? 0 : 1;
+          this.size.status = getRandom() >= 0.5 ? "increasing" : "decreasing";
           break;
         case "max":
         default:
           this.size.value = this.size.max;
-          this.size.status = 1;
+          this.size.status = "decreasing";
           break;
       }
     }
@@ -3889,9 +3923,9 @@ class Particle {
     return pos;
   }
   _calculateVelocity() {
-    const baseVelocity = getParticleBaseVelocity(this.direction);
-    const res = baseVelocity.copy();
-    const moveOptions = this.options.move;
+    const baseVelocity = getParticleBaseVelocity(this.direction),
+      res = baseVelocity.copy(),
+      moveOptions = this.options.move;
     if (moveOptions.direction === "inside" || moveOptions.direction === "outside") {
       return res;
     }
@@ -4426,7 +4460,8 @@ const defaultPathGeneratorKey = "default",
       return v;
     },
     init: () => {},
-    update: () => {}
+    update: () => {},
+    reset: () => {}
   };
 class Container {
   constructor(engine, id, sourceOptions) {
@@ -4864,9 +4899,6 @@ class Container {
 
 
 
-function fetchError(statusCode) {
-  console.error(`tsParticles - Error ${statusCode} while retrieving config file`);
-}
 async function getDataFromUrl(jsonUrl, index) {
   const url = itemFromSingleOrMultiple(jsonUrl, index);
   if (!url) {
@@ -4876,7 +4908,7 @@ async function getDataFromUrl(jsonUrl, index) {
   if (response.ok) {
     return response.json();
   }
-  fetchError(response.status);
+  console.error(`tsParticles - Error ${response.status} while retrieving config file`);
 }
 class Loader {
   constructor(engine) {
@@ -5244,7 +5276,7 @@ class HslColorManager {
     var _a;
     const colorValue = color.value,
       hslColor = (_a = colorValue.hsl) !== null && _a !== void 0 ? _a : color.value;
-    if (hslColor.h !== undefined && hslColor.l !== undefined) {
+    if (hslColor.h !== undefined && hslColor.s !== undefined && hslColor.l !== undefined) {
       return hslToRgb(hslColor);
     }
   }
@@ -5319,14 +5351,14 @@ class RgbColorManager {
 class ExternalInteractorBase {
   constructor(container) {
     this.container = container;
-    this.type = 0;
+    this.type = "external";
   }
 }
 ;// CONCATENATED MODULE: ../../engine/dist/esm/Core/Utils/ParticlesInteractorBase.js
 class ParticlesInteractorBase {
   constructor(container) {
     this.container = container;
-    this.type = 1;
+    this.type = "particles";
   }
 }
 ;// CONCATENATED MODULE: ../../engine/dist/esm/index.js
@@ -5517,6 +5549,7 @@ tsParticles.init();
 
 
 
+
 
 
 ;// CONCATENATED MODULE: ../../plugins/absorbers/dist/esm/Options/Classes/AbsorberSizeLimit.js
@@ -7117,13 +7150,13 @@ function updateAngle(particle, delta) {
     return;
   }
   switch (rotate.status) {
-    case 0:
+    case "increasing":
       rotate.value += speed;
       if (rotate.value > max) {
         rotate.value -= max;
       }
       break;
-    case 1:
+    case "decreasing":
     default:
       rotate.value -= speed;
       if (rotate.value < 0) {
@@ -7157,10 +7190,10 @@ class RotateUpdater {
     switch (rotateDirection) {
       case "counter-clockwise":
       case "counterClockwise":
-        particle.rotate.status = 1;
+        particle.rotate.status = "decreasing";
         break;
       case "clockwise":
-        particle.rotate.status = 0;
+        particle.rotate.status = "increasing";
         break;
     }
     const rotateAnimation = rotateOptions.animation;
@@ -7410,16 +7443,16 @@ function updateColorValue(delta, value, valueAnimation, max, decrease) {
   const offset = randomInRange(valueAnimation.offset),
     velocity = ((_a = value.velocity) !== null && _a !== void 0 ? _a : 0) * delta.factor + offset * 3.6,
     decay = (_b = value.decay) !== null && _b !== void 0 ? _b : 1;
-  if (!decrease || colorValue.status === 0) {
+  if (!decrease || colorValue.status === "increasing") {
     colorValue.value += velocity;
     if (decrease && colorValue.value > max) {
-      colorValue.status = 1;
+      colorValue.status = "decreasing";
       colorValue.value -= colorValue.value % max;
     }
   } else {
     colorValue.value -= velocity;
     if (colorValue.value < 0) {
-      colorValue.status = 0;
+      colorValue.status = "increasing";
       colorValue.value += colorValue.value;
     }
   }
@@ -9476,9 +9509,9 @@ function updateOpacity(particle, delta) {
     return;
   }
   switch (particle.opacity.status) {
-    case 0:
+    case "increasing":
       if (particle.opacity.value >= maxValue) {
-        particle.opacity.status = 1;
+        particle.opacity.status = "decreasing";
         if (!particle.opacity.loops) {
           particle.opacity.loops = 0;
         }
@@ -9487,9 +9520,9 @@ function updateOpacity(particle, delta) {
         particle.opacity.value += ((_e = particle.opacity.velocity) !== null && _e !== void 0 ? _e : 0) * delta.factor;
       }
       break;
-    case 1:
+    case "decreasing":
       if (particle.opacity.value <= minValue) {
-        particle.opacity.status = 0;
+        particle.opacity.status = "increasing";
         if (!particle.opacity.loops) {
           particle.opacity.loops = 0;
         }
@@ -9524,23 +9557,23 @@ class OpacityUpdater {
     const opacityAnimation = opacityOptions.animation;
     if (opacityAnimation.enable) {
       particle.opacity.decay = 1 - getRangeValue(opacityAnimation.decay);
-      particle.opacity.status = 0;
+      particle.opacity.status = "increasing";
       const opacityRange = opacityOptions.value;
       particle.opacity.min = getRangeMin(opacityRange);
       particle.opacity.max = getRangeMax(opacityRange);
       switch (opacityAnimation.startValue) {
         case "min":
           particle.opacity.value = particle.opacity.min;
-          particle.opacity.status = 0;
+          particle.opacity.status = "increasing";
           break;
         case "random":
           particle.opacity.value = randomInRange(particle.opacity);
-          particle.opacity.status = getRandom() >= 0.5 ? 0 : 1;
+          particle.opacity.status = getRandom() >= 0.5 ? "increasing" : "decreasing";
           break;
         case "max":
         default:
           particle.opacity.value = particle.opacity.max;
-          particle.opacity.status = 1;
+          particle.opacity.status = "decreasing";
           break;
       }
       particle.opacity.velocity = getRangeValue(opacityAnimation.speed) / 100 * this.container.retina.reduceFactor;
@@ -10290,6 +10323,7 @@ class Linker extends ParticlesInteractorBase {
   }
   clear() {}
   init() {
+    this.linkContainer.particles.linksColor = undefined;
     this.linkContainer.particles.linksColors = new Map();
   }
   async interact(p1) {
@@ -10488,14 +10522,13 @@ class LinkInstance {
   }
   drawParticle(context, particle) {
     var _a;
-    const container = this.container,
-      pOptions = particle.options;
+    const pOptions = particle.options;
     if (!particle.links || particle.links.length <= 0) {
       return;
     }
     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);
+      this.drawTriangles(pOptions, particle, link, p1Links);
       if (link.opacity > 0 && ((_a = particle.retina.linksWidth) !== null && _a !== void 0 ? _a : 0) > 0) {
         this.drawLinkLine(particle, link);
       }
@@ -10588,7 +10621,7 @@ class LinkInstance {
       drawLinkTriangle(ctx, pos1, pos2, pos3, options.backgroundMask.enable, options.backgroundMask.composite, colorTriangle, opacityTriangle);
     });
   }
-  drawTriangles(container, options, p1, link, p1Links) {
+  drawTriangles(options, p1, link, p1Links) {
     var _a, _b, _c;
     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))) {
@@ -10759,9 +10792,9 @@ function updateSize(particle, delta) {
     return;
   }
   switch (particle.size.status) {
-    case 0:
+    case "increasing":
       if (particle.size.value >= maxValue) {
-        particle.size.status = 1;
+        particle.size.status = "decreasing";
         if (!particle.size.loops) {
           particle.size.loops = 0;
         }
@@ -10770,9 +10803,9 @@ function updateSize(particle, delta) {
         particle.size.value += sizeVelocity;
       }
       break;
-    case 1:
+    case "decreasing":
       if (particle.size.value <= minValue) {
-        particle.size.status = 0;
+        particle.size.status = "increasing";
         if (!particle.size.loops) {
           particle.size.loops = 0;
         }
@@ -10875,16 +10908,16 @@ function StrokeColorUpdater_updateColorValue(delta, value, valueAnimation, max,
   const offset = randomInRange(valueAnimation.offset),
     velocity = ((_a = value.velocity) !== null && _a !== void 0 ? _a : 0) * delta.factor + offset * 3.6,
     decay = (_b = value.decay) !== null && _b !== void 0 ? _b : 1;
-  if (!decrease || colorValue.status === 0) {
+  if (!decrease || colorValue.status === "increasing") {
     colorValue.value += velocity;
     if (decrease && colorValue.value > max) {
-      colorValue.status = 1;
+      colorValue.status = "decreasing";
       colorValue.value -= colorValue.value % max;
     }
   } else {
     colorValue.value -= velocity;
     if (colorValue.value < 0) {
-      colorValue.status = 0;
+      colorValue.status = "increasing";
       colorValue.value += colorValue.value;
     }
   }
@@ -11138,13 +11171,13 @@ function updateTilt(particle, delta) {
     return;
   }
   switch (particle.tilt.status) {
-    case 0:
+    case "increasing":
       particle.tilt.value += speed;
       if (particle.tilt.value > max) {
         particle.tilt.value -= max;
       }
       break;
-    case 1:
+    case "decreasing":
     default:
       particle.tilt.value -= speed;
       if (particle.tilt.value < 0) {
@@ -11188,10 +11221,10 @@ class TiltUpdater {
     switch (tiltDirection) {
       case "counter-clockwise":
       case "counterClockwise":
-        particle.tilt.status = 1;
+        particle.tilt.status = "decreasing";
         break;
       case "clockwise":
-        particle.tilt.status = 0;
+        particle.tilt.status = "increasing";
         break;
     }
     const tiltAnimation = (_a = particle.options.tilt) === null || _a === void 0 ? void 0 : _a.animation;