tsparticles 3.0.0-alpha.0 → 3.0.0-alpha.1

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-alpha.0
+ * v3.0.0-alpha.1
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -724,21 +724,41 @@ function initParticleNumericAnimationValue(options, pxRatio) {
     maxLoops: getRangeValue(options.animation.count)
   };
   if (animationOptions.enable) {
-    res.status = "increasing";
     res.decay = 1 - getRangeValue(animationOptions.decay);
+    let autoStatus = false;
+    switch (animationOptions.mode) {
+      case "increase":
+        res.status = "increasing";
+        break;
+      case "decrease":
+        res.status = "decreasing";
+        break;
+      case "random":
+        res.status = getRandom() >= 0.5 ? "increasing" : "decreasing";
+        break;
+      case "auto":
+        autoStatus = true;
+        break;
+    }
     switch (animationOptions.startValue) {
       case "min":
         res.value = res.min;
-        res.status = "increasing";
+        if (autoStatus) {
+          res.status = "increasing";
+        }
         break;
       case "random":
         res.value = randomInRange(res);
-        res.status = getRandom() >= 0.5 ? "increasing" : "decreasing";
+        if (autoStatus) {
+          res.status = getRandom() >= 0.5 ? "increasing" : "decreasing";
+        }
         break;
       case "max":
       default:
         res.value = res.max;
-        res.status = "decreasing";
+        if (autoStatus) {
+          res.status = "decreasing";
+        }
         break;
     }
   }
@@ -1641,28 +1661,28 @@ class EventListeners {
     this.container = container;
     this.canPush = true;
     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()
+      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);
+    this._manageListeners(true);
   }
   removeListeners() {
-    this.manageListeners(false);
+    this._manageListeners(false);
   }
-  doMouseTouchClick(e) {
+  _doMouseTouchClick(e) {
     const container = this.container,
       options = container.actualOptions;
     if (this.canPush) {
@@ -1674,16 +1694,16 @@ class EventListeners {
       mouseInteractivity.clickPosition = Object.assign({}, mousePos);
       mouseInteractivity.clickTime = new Date().getTime();
       const onClick = options.interactivity.events.onClick;
-      executeOnSingleOrMultiple(onClick.mode, mode => this.handleClickMode(mode));
+      executeOnSingleOrMultiple(onClick.mode, mode => this._handleClickMode(mode));
     }
     if (e.type === "touchend") {
-      setTimeout(() => this.mouseTouchFinish(), 500);
+      setTimeout(() => this._mouseTouchFinish(), 500);
     }
   }
-  handleClickMode(mode) {
+  _handleClickMode(mode) {
     this.container.handleClickMode(mode);
   }
-  handleThemeChange(e) {
+  _handleThemeChange(e) {
     const mediaEvent = e,
       container = this.container,
       options = container.options,
@@ -1694,18 +1714,17 @@ class EventListeners {
       container.loadTheme(themeName);
     }
   }
-  handleVisibilityChange() {
+  _handleVisibilityChange() {
     const container = this.container,
       options = container.actualOptions;
-    this.mouseTouchFinish();
+    this._mouseTouchFinish();
     if (!options.pauseOnBlur) {
       return;
     }
-    if (document === null || document === void 0 ? void 0 : document.hidden) {
-      container.pageHidden = true;
+    container.pageHidden = (document === null || document === void 0 ? void 0 : document.hidden) || false;
+    if (container.pageHidden) {
       container.pause();
     } else {
-      container.pageHidden = false;
       if (container.getAnimationStatus()) {
         container.play(true);
       } else {
@@ -1713,7 +1732,7 @@ class EventListeners {
       }
     }
   }
-  handleWindowResize() {
+  _handleWindowResize() {
     if (this.resizeTimeout) {
       clearTimeout(this.resizeTimeout);
       delete this.resizeTimeout;
@@ -1723,7 +1742,7 @@ class EventListeners {
       return (_a = this.container.canvas) === null || _a === void 0 ? void 0 : _a.windowResize();
     }, this.container.actualOptions.interactivity.events.resize.delay * 1000);
   }
-  manageListeners(add) {
+  _manageInteractivityEvents(add) {
     var _a;
     const handlers = this.handlers,
       container = this.container,
@@ -1739,18 +1758,6 @@ class EventListeners {
     } else {
       container.interactivity.element = container.canvas.element;
     }
-    const mediaMatch = safeMatchMedia("(prefers-color-scheme: dark)");
-    if (mediaMatch) {
-      if (mediaMatch.addEventListener !== undefined) {
-        manageListener(mediaMatch, "change", handlers.themeChange, add);
-      } else if (mediaMatch.addListener !== undefined) {
-        if (add) {
-          mediaMatch.addListener(handlers.oldThemeChange);
-        } else {
-          mediaMatch.removeListener(handlers.oldThemeChange);
-        }
-      }
-    }
     const interactivityEl = container.interactivity.element;
     if (!interactivityEl) {
       return;
@@ -1773,33 +1780,66 @@ class EventListeners {
     if (container.canvas.element) {
       container.canvas.element.style.pointerEvents = html === container.canvas.element ? "initial" : "none";
     }
-    if (options.interactivity.events.resize) {
-      if (typeof ResizeObserver !== "undefined") {
-        if (this.resizeObserver && !add) {
-          if (container.canvas.element) {
-            this.resizeObserver.unobserve(container.canvas.element);
-          }
-          this.resizeObserver.disconnect();
-          delete this.resizeObserver;
-        } else if (!this.resizeObserver && add && container.canvas.element) {
-          this.resizeObserver = new ResizeObserver(entries => {
-            const entry = entries.find(e => e.target === container.canvas.element);
-            if (!entry) {
-              return;
-            }
-            this.handleWindowResize();
-          });
-          this.resizeObserver.observe(container.canvas.element);
-        }
+  }
+  _manageListeners(add) {
+    this._manageMediaEvents(add);
+    this._manageInteractivityEvents(add);
+    this._manageResizeEvent(add);
+    this._manageVisibilityEvent(add);
+  }
+  _manageMediaEvents(add) {
+    const handlers = this.handlers,
+      mediaMatch = safeMatchMedia("(prefers-color-scheme: dark)");
+    if (!mediaMatch) {
+      return;
+    }
+    if (mediaMatch.addEventListener !== undefined) {
+      manageListener(mediaMatch, "change", handlers.themeChange, add);
+      return;
+    }
+    if (mediaMatch.addListener !== undefined) {
+      if (add) {
+        mediaMatch.addListener(handlers.oldThemeChange);
       } else {
-        manageListener(window, resizeEvent, handlers.resize, add);
+        mediaMatch.removeListener(handlers.oldThemeChange);
+      }
+    }
+  }
+  _manageResizeEvent(add) {
+    const handlers = this.handlers,
+      container = this.container,
+      options = container.actualOptions;
+    if (!options.interactivity.events.resize) {
+      return;
+    }
+    if (typeof ResizeObserver === "undefined") {
+      manageListener(window, resizeEvent, handlers.resize, add);
+      return;
+    }
+    if (this.resizeObserver && !add) {
+      if (container.canvas.element) {
+        this.resizeObserver.unobserve(container.canvas.element);
       }
+      this.resizeObserver.disconnect();
+      delete this.resizeObserver;
+    } else if (!this.resizeObserver && add && container.canvas.element) {
+      this.resizeObserver = new ResizeObserver(entries => {
+        const entry = entries.find(e => e.target === container.canvas.element);
+        if (!entry) {
+          return;
+        }
+        this._handleWindowResize();
+      });
+      this.resizeObserver.observe(container.canvas.element);
     }
-    if (document) {
-      manageListener(document, visibilityChangeEvent, handlers.visibilityChange, add, false);
+  }
+  _manageVisibilityEvent(add) {
+    if (!document) {
+      return;
     }
+    manageListener(document, visibilityChangeEvent, this.handlers.visibilityChange, add);
   }
-  mouseDown() {
+  _mouseDown() {
     const interactivity = this.container.interactivity;
     if (interactivity) {
       const mouse = interactivity.mouse;
@@ -1807,7 +1847,7 @@ class EventListeners {
       mouse.downPosition = mouse.position;
     }
   }
-  mouseTouchClick(e) {
+  _mouseTouchClick(e) {
     const container = this.container,
       options = container.actualOptions,
       mouse = container.interactivity.mouse;
@@ -1827,11 +1867,11 @@ class EventListeners {
       }
     }
     if (!handled) {
-      this.doMouseTouchClick(e);
+      this._doMouseTouchClick(e);
     }
     mouse.clicking = false;
   }
-  mouseTouchFinish() {
+  _mouseTouchFinish() {
     const interactivity = this.container.interactivity;
     if (!interactivity) {
       return;
@@ -1844,7 +1884,7 @@ class EventListeners {
     mouse.inside = false;
     mouse.clicking = false;
   }
-  mouseTouchMove(e) {
+  _mouseTouchMove(e) {
     var _a, _b, _c, _d, _e, _f, _g;
     const container = this.container,
       options = container.actualOptions;
@@ -2313,14 +2353,15 @@ class Interactivity {
 
 class ManualParticle {
   load(data) {
-    var _a, _b;
+    var _a, _b, _c;
     if (!data) {
       return;
     }
     if (data.position !== undefined) {
       this.position = {
         x: (_a = data.position.x) !== null && _a !== void 0 ? _a : 50,
-        y: (_b = data.position.y) !== null && _b !== void 0 ? _b : 50
+        y: (_b = data.position.y) !== null && _b !== void 0 ? _b : 50,
+        mode: (_c = data.position.mode) !== null && _c !== void 0 ? _c : "percent"
       };
     }
     if (data.options !== undefined) {
@@ -2553,6 +2594,7 @@ class AnimationOptions {
 class RangedAnimationOptions extends AnimationOptions {
   constructor() {
     super();
+    this.mode = "auto";
     this.startValue = "random";
   }
   load(data) {
@@ -2563,6 +2605,9 @@ class RangedAnimationOptions extends AnimationOptions {
     if (data.minimumValue !== undefined) {
       this.minimumValue = data.minimumValue;
     }
+    if (data.mode !== undefined) {
+      this.mode = data.mode;
+    }
     if (data.startValue !== undefined) {
       this.startValue = data.startValue;
     }
@@ -3209,12 +3254,20 @@ class Shape {
   constructor() {
     this.options = {};
     this.type = "circle";
+    this.close = true;
+    this.fill = true;
   }
   load(data) {
     var _a;
     if (!data) {
       return;
     }
+    if (data.close !== undefined) {
+      this.close = data.close;
+    }
+    if (data.fill !== undefined) {
+      this.fill = data.fill;
+    }
     const options = data.options;
     if (options !== undefined) {
       for (const shape in options) {
@@ -3981,7 +4034,10 @@ class Particle {
   _loadShapeData(shapeOptions, reduceDuplicates) {
     const shapeData = shapeOptions.options[this.shape];
     if (shapeData) {
-      return deepExtend({}, itemFromSingleOrMultiple(shapeData, this.id, reduceDuplicates));
+      return deepExtend({
+        close: shapeOptions.close,
+        fill: shapeOptions.fill
+      }, itemFromSingleOrMultiple(shapeData, this.id, reduceDuplicates));
     }
   }
 }
@@ -4164,10 +4220,10 @@ class Particles {
     const container = this.container,
       options = container.actualOptions;
     for (const particle of options.manualParticles) {
-      this.addParticle(calcPositionFromSize({
+      this.addParticle(particle.position ? particle.position.mode === "precise" ? particle.position : calcPositionFromSize({
         size: container.canvas.size,
         position: particle.position
-      }), particle.options);
+      }) : undefined, particle.options);
     }
   }
   addParticle(position, overrideOptions, group, initializer) {
@@ -4271,22 +4327,9 @@ class Particles {
     }
     let deleted = 0;
     for (let i = index; deleted < quantity && i < this.count; i++) {
-      const particle = this.array[i];
-      if (!particle || particle.group !== group) {
-        continue;
+      if (this._removeParticle(i--, group, override)) {
+        deleted++;
       }
-      particle.destroy(override);
-      this.array.splice(i--, 1);
-      const idx = this.zArray.indexOf(particle);
-      this.zArray.splice(idx, 1);
-      this.pool.push(particle);
-      deleted++;
-      this._engine.dispatchEvent("particleRemoved", {
-        container: this.container,
-        data: {
-          particle
-        }
-      });
     }
   }
   removeQuantity(quantity, group) {
@@ -4407,6 +4450,24 @@ class Particles {
       return;
     }
   }
+  _removeParticle(index, group, override) {
+    const particle = this.array[index];
+    if (!particle || particle.group !== group) {
+      return false;
+    }
+    particle.destroy(override);
+    this.array.splice(index, 1);
+    const zIdx = this.zArray.indexOf(particle);
+    this.zArray.splice(zIdx, 1);
+    this.pool.push(particle);
+    this._engine.dispatchEvent("particleRemoved", {
+      container: this.container,
+      data: {
+        particle
+      }
+    });
+    return true;
+  }
 }
 ;// CONCATENATED MODULE: ../../engine/dist/esm/Core/Retina.js
 
@@ -5533,6 +5594,7 @@ const tsParticles = new Engine();
 
 
 
+
 
 
 ;// CONCATENATED MODULE: ../../plugins/absorbers/dist/esm/Options/Classes/AbsorberSizeLimit.js