tsparticles 2.7.1 → 2.9.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.7.1
+ * v2.9.0
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -187,6 +187,7 @@ __webpack_require__.d(__webpack_exports__, {
   "mouseOutEvent": () => (/* reexport */ mouseOutEvent),
   "mouseUpEvent": () => (/* reexport */ mouseUpEvent),
   "paintBase": () => (/* reexport */ paintBase),
+  "paintImage": () => (/* reexport */ paintImage),
   "parseAlpha": () => (/* reexport */ parseAlpha),
   "randomInRange": () => (/* reexport */ randomInRange),
   "rangeColorToHsl": () => (/* reexport */ rangeColorToHsl),
@@ -1049,6 +1050,14 @@ function paintBase(context, dimension, baseColor) {
   context.fillStyle = baseColor !== null && baseColor !== void 0 ? baseColor : "rgba(0,0,0,0)";
   context.fillRect(0, 0, dimension.width, dimension.height);
 }
+function paintImage(context, dimension, image, opacity) {
+  if (!image) {
+    return;
+  }
+  context.globalAlpha = opacity;
+  context.drawImage(image, 0, 0, dimension.width, dimension.height);
+  context.globalAlpha = 1;
+}
 function clear(context, dimension) {
   context.clearRect(0, 0, dimension.width, dimension.height);
 }
@@ -1203,11 +1212,16 @@ class Canvas {
   }
   clear() {
     const options = this.container.actualOptions,
-      trail = options.particles.move.trail;
+      trail = options.particles.move.trail,
+      trailFill = this._trailFill;
     if (options.backgroundMask.enable) {
       this.paint();
-    } else if (trail.enable && trail.length > 0 && this._trailFillColor) {
-      this._paintBase(getStyleFromRgb(this._trailFillColor, 1 / trail.length));
+    } else if (trail.enable && trail.length > 0 && trailFill) {
+      if (trailFill.color) {
+        this._paintBase(getStyleFromRgb(trailFill.color, trailFill.opacity));
+      } else if (trailFill.image) {
+        this._paintImage(trailFill.image, trailFill.opacity);
+      }
     } else {
       this.draw(ctx => {
         clear(ctx, this.size);
@@ -1222,9 +1236,7 @@ class Canvas {
     } else {
       this._resetOriginalStyle();
     }
-    this.draw(ctx => {
-      clear(ctx, this.size);
-    });
+    this.stop();
     this._preDrawUpdaters = [];
     this._postDrawUpdaters = [];
     this._resizePlugins = [];
@@ -1298,12 +1310,16 @@ class Canvas {
       drawPlugin(ctx, plugin, delta);
     });
   }
-  init() {
+  async init() {
     var _a;
     this.resize();
     this._initStyle();
     this._initCover();
-    this._initTrail();
+    try {
+      await this._initTrail();
+    } catch (e) {
+      console.error(e);
+    }
     this.initBackground();
     if (this.element) {
       (_a = this._mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.element, {
@@ -1409,6 +1425,11 @@ class Canvas {
       };
     }
   }
+  stop() {
+    this.draw(ctx => {
+      clear(ctx, this.size);
+    });
+  }
   async windowResize() {
     if (!this.element) {
       return;
@@ -1512,14 +1533,40 @@ class Canvas {
       element.style.setProperty(key, value, "important");
     }
   }
-  _initTrail() {
+  async _initTrail() {
     const options = this.container.actualOptions,
       trail = options.particles.move.trail,
-      fillColor = rangeColorToRgb(trail.fillColor);
-    if (fillColor) {
+      trailFill = trail.fill;
+    if (!trail.enable) {
+      return;
+    }
+    if (trailFill.color) {
+      const fillColor = rangeColorToRgb(trailFill.color);
+      if (!fillColor) {
+        return;
+      }
       const trail = options.particles.move.trail;
-      this._trailFillColor = Object.assign(Object.assign({}, fillColor), {
-        a: 1 / trail.length
+      this._trailFill = {
+        color: Object.assign({}, fillColor),
+        opacity: 1 / trail.length
+      };
+    } else {
+      await new Promise((resolve, reject) => {
+        if (!trailFill.image) {
+          return;
+        }
+        const img = document.createElement("img");
+        img.addEventListener("load", () => {
+          this._trailFill = {
+            image: img,
+            opacity: 1 / trail.length
+          };
+          resolve();
+        });
+        img.addEventListener("error", evt => {
+          reject(evt.error);
+        });
+        img.src = trailFill.image;
       });
     }
   }
@@ -1528,6 +1575,11 @@ class Canvas {
       paintBase(ctx, this.size, baseColor);
     });
   }
+  _paintImage(image, opacity) {
+    this.draw(ctx => {
+      paintImage(ctx, this.size, image, opacity);
+    });
+  }
   _repairStyle() {
     var _a, _b;
     const element = this.element;
@@ -2704,14 +2756,36 @@ class MovePath {
     }
   }
 }
+;// CONCATENATED MODULE: ../../engine/dist/esm/Options/Classes/Particles/Move/MoveTrailFill.js
+
+class MoveTrailFill {
+  load(data) {
+    if (!data) {
+      return;
+    }
+    if (data.color !== undefined) {
+      this.color = OptionsColor.create(this.color, data.color);
+    }
+    if (data.image !== undefined) {
+      this.image = data.image;
+    }
+  }
+}
 ;// CONCATENATED MODULE: ../../engine/dist/esm/Options/Classes/Particles/Move/MoveTrail.js
 
 class MoveTrail {
   constructor() {
     this.enable = false;
     this.length = 10;
-    this.fillColor = new OptionsColor();
-    this.fillColor.value = "#000000";
+    this.fill = new MoveTrailFill();
+  }
+  get fillColor() {
+    return this.fill.color;
+  }
+  set fillColor(value) {
+    this.fill.load({
+      color: value
+    });
   }
   load(data) {
     if (!data) {
@@ -2720,7 +2794,11 @@ class MoveTrail {
     if (data.enable !== undefined) {
       this.enable = data.enable;
     }
-    this.fillColor = OptionsColor.create(this.fillColor, data.fillColor);
+    if (data.fill !== undefined || data.fillColor !== undefined) {
+      this.fill.load(data.fill || {
+        color: data.fillColor
+      });
+    }
     if (data.length !== undefined) {
       this.length = data.length;
     }
@@ -3039,7 +3117,7 @@ class ParticlesNumber {
   constructor() {
     this.density = new ParticlesDensity();
     this.limit = 0;
-    this.value = 100;
+    this.value = 0;
   }
   get max() {
     return this.limit;
@@ -4711,7 +4789,7 @@ class Container {
       this.plugins.set(id, plugin);
     }
     this.retina.init();
-    this.canvas.init();
+    await this.canvas.init();
     this.updateActualOptions();
     this.canvas.initBackground();
     this.canvas.resize();
@@ -4878,7 +4956,7 @@ class Container {
     this._eventListeners.removeListeners();
     this.pause();
     this.particles.clear();
-    this.canvas.clear();
+    this.canvas.stop();
     if (this.interactivity.element instanceof HTMLElement && this._intersectionObserver) {
       this._intersectionObserver.unobserve(this.interactivity.element);
     }
@@ -5196,6 +5274,9 @@ class Engine {
     this._loader = new Loader(this);
     this.plugins = new Plugins(this);
   }
+  get version() {
+    return "2.9.0";
+  }
   addEventListener(type, listener) {
     this._eventDispatcher.addEventListener(type, listener);
   }
@@ -5987,9 +6068,13 @@ class Split {
     this.sizeOffset = true;
   }
   load(data) {
+    var _a;
     if (!data) {
       return;
     }
+    if (data.color !== undefined) {
+      this.color = OptionsColor.create(this.color, data.color);
+    }
     if (data.count !== undefined) {
       this.count = data.count;
     }
@@ -6001,6 +6086,18 @@ class Split {
     if (data.sizeOffset !== undefined) {
       this.sizeOffset = data.sizeOffset;
     }
+    if (data.colorOffset) {
+      this.colorOffset = (_a = this.colorOffset) !== null && _a !== void 0 ? _a : {};
+      if (data.colorOffset.h !== undefined) {
+        this.colorOffset.h = data.colorOffset.h;
+      }
+      if (data.colorOffset.s !== undefined) {
+        this.colorOffset.s = data.colorOffset.s;
+      }
+      if (data.colorOffset.l !== undefined) {
+        this.colorOffset.l = data.colorOffset.l;
+      }
+    }
   }
 }
 ;// CONCATENATED MODULE: ../../updaters/destroy/dist/esm/Options/Classes/Destroy.js
@@ -6092,18 +6189,34 @@ class DestroyUpdater {
     }
   }
   addSplitParticle(parent, splitParticlesOptions) {
+    var _a, _b, _c;
     const destroyOptions = parent.options.destroy;
     if (!destroyOptions) {
       return;
     }
     const splitOptions = destroyOptions.split,
       options = loadParticlesOptions(this.engine, this.container, parent.options),
-      factor = getValue(splitOptions.factor);
-    options.color.load({
-      value: {
-        hsl: parent.getFillColor()
-      }
-    });
+      factor = getValue(splitOptions.factor),
+      parentColor = parent.getFillColor();
+    if (splitOptions.color) {
+      options.color.load(splitOptions.color);
+    } else if (splitOptions.colorOffset && parentColor) {
+      options.color.load({
+        value: {
+          hsl: {
+            h: parentColor.h + getRangeValue((_a = splitOptions.colorOffset.h) !== null && _a !== void 0 ? _a : 0),
+            s: parentColor.s + getRangeValue((_b = splitOptions.colorOffset.s) !== null && _b !== void 0 ? _b : 0),
+            l: parentColor.l + getRangeValue((_c = splitOptions.colorOffset.l) !== null && _c !== void 0 ? _c : 0)
+          }
+        }
+      });
+    } else {
+      options.color.load({
+        value: {
+          hsl: parent.getFillColor()
+        }
+      });
+    }
     options.move.load({
       center: {
         x: parent.position.x,
@@ -6193,7 +6306,7 @@ class EmitterLife {
     this.wait = false;
   }
   load(data) {
-    if (data === undefined) {
+    if (!data) {
       return;
     }
     if (data.count !== undefined) {
@@ -6266,14 +6379,14 @@ class Emitter {
     this.startCount = 0;
   }
   load(data) {
-    if (data === undefined) {
+    if (!data) {
       return;
     }
     if (data.autoPlay !== undefined) {
       this.autoPlay = data.autoPlay;
     }
     if (data.size !== undefined) {
-      if (this.size === undefined) {
+      if (!this.size) {
         this.size = new EmitterSize();
       }
       this.size.load(data.size);