tsparticles 2.7.0 → 2.8.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.0
+ * v2.8.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);
@@ -1298,12 +1312,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, {
@@ -1512,14 +1530,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 +1572,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 +2753,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 +2791,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;
     }
@@ -4711,7 +4786,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();
@@ -5579,7 +5654,6 @@ tsParticles.init();
 
 
 
-
 
 
 ;// CONCATENATED MODULE: ../../plugins/absorbers/dist/esm/Options/Classes/AbsorberSizeLimit.js