@tsparticles/all 3.0.0-beta.5 → 3.0.0

package/tsparticles.all.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-beta.5
+ * v3.0.0
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -1227,7 +1227,8 @@ function drawParticle(data) {
     particle,
     radius,
     opacity,
-    delta
+    delta,
+    transformData
   };
   context.beginPath();
   drawShape(drawData);
@@ -1252,7 +1253,8 @@ function drawEffect(data) {
     particle,
     radius,
     opacity,
-    delta
+    delta,
+    transformData
   } = data;
   if (!particle.effect) {
     return;
@@ -1267,7 +1269,10 @@ function drawEffect(data) {
     radius,
     opacity,
     delta,
-    pixelRatio: container.retina.pixelRatio
+    pixelRatio: container.retina.pixelRatio,
+    transformData: {
+      ...transformData
+    }
   });
 }
 function drawShape(data) {
@@ -1277,7 +1282,8 @@ function drawShape(data) {
     particle,
     radius,
     opacity,
-    delta
+    delta,
+    transformData
   } = data;
   if (!particle.shape) {
     return;
@@ -1292,7 +1298,10 @@ function drawShape(data) {
     radius,
     opacity,
     delta,
-    pixelRatio: container.retina.pixelRatio
+    pixelRatio: container.retina.pixelRatio,
+    transformData: {
+      ...transformData
+    }
   });
 }
 function drawShapeAfterDraw(data) {
@@ -1302,7 +1311,8 @@ function drawShapeAfterDraw(data) {
     particle,
     radius,
     opacity,
-    delta
+    delta,
+    transformData
   } = data;
   if (!particle.shape) {
     return;
@@ -1317,7 +1327,10 @@ function drawShapeAfterDraw(data) {
     radius,
     opacity,
     delta,
-    pixelRatio: container.retina.pixelRatio
+    pixelRatio: container.retina.pixelRatio,
+    transformData: {
+      ...transformData
+    }
   });
 }
 function drawPlugin(context, plugin, delta) {
@@ -1554,7 +1567,7 @@ class Canvas {
       } else if (trailFill.image) {
         this._paintImage(trailFill.image, trailFill.opacity);
       }
-    } else {
+    } else if (options.clear) {
       this.draw(ctx => {
         clear(ctx, this.size);
       });
@@ -3518,6 +3531,7 @@ class Options {
     this.autoPlay = true;
     this.background = new Background();
     this.backgroundMask = new BackgroundMask();
+    this.clear = true;
     this.defaultThemes = {};
     this.delay = 0;
     this.fullScreen = new FullScreen();
@@ -3545,6 +3559,12 @@ class Options {
     if (data.autoPlay !== undefined) {
       this.autoPlay = data.autoPlay;
     }
+    if (data.clear !== undefined) {
+      this.clear = data.clear;
+    }
+    if (data.name !== undefined) {
+      this.name = data.name;
+    }
     if (data.delay !== undefined) {
       this.delay = setRangeValue(data.delay);
     }
@@ -5126,7 +5146,7 @@ class Engine {
     return res;
   }
   get version() {
-    return "3.0.0-beta.5";
+    return "3.0.0";
   }
   addConfig(config) {
     const name = config.name ?? "default";
@@ -10550,7 +10570,7 @@ class OutOutMode {
               }
             case "normal":
               {
-                const wrap = particle.options.move.warp,
+                const warp = particle.options.move.warp,
                   canvasSize = container.canvas.size,
                   newPos = {
                     bottom: canvasSize.height + particle.getRadius() + particle.offset.y,
@@ -10563,27 +10583,27 @@ class OutOutMode {
                 if (direction === "right" && nextBounds.left > canvasSize.width + particle.offset.x) {
                   particle.position.x = newPos.left;
                   particle.initialPosition.x = particle.position.x;
-                  if (!wrap) {
+                  if (!warp) {
                     particle.position.y = getRandom() * canvasSize.height;
                     particle.initialPosition.y = particle.position.y;
                   }
                 } else if (direction === "left" && nextBounds.right < -particle.offset.x) {
                   particle.position.x = newPos.right;
                   particle.initialPosition.x = particle.position.x;
-                  if (!wrap) {
+                  if (!warp) {
                     particle.position.y = getRandom() * canvasSize.height;
                     particle.initialPosition.y = particle.position.y;
                   }
                 }
                 if (direction === "bottom" && nextBounds.top > canvasSize.height + particle.offset.y) {
-                  if (!wrap) {
+                  if (!warp) {
                     particle.position.x = getRandom() * canvasSize.width;
                     particle.initialPosition.x = particle.position.x;
                   }
                   particle.position.y = newPos.top;
                   particle.initialPosition.y = particle.position.y;
                 } else if (direction === "top" && nextBounds.bottom < -particle.offset.y) {
-                  if (!wrap) {
+                  if (!warp) {
                     particle.position.x = getRandom() * canvasSize.width;
                     particle.initialPosition.x = particle.position.x;
                   }
@@ -10761,7 +10781,7 @@ class EmojiDrawer {
   }
   destroy() {
     for (const [, emojiData] of this._emojiShapeDict) {
-      emojiData?.close();
+      emojiData instanceof ImageBitmap && emojiData?.close();
     }
   }
   draw(data) {
@@ -10812,17 +10832,33 @@ class EmojiDrawer {
         particle.emojiData = existingData;
         return;
       }
-      const canvasSize = getRangeMax(particle.size.value) * 2,
-        canvas = new OffscreenCanvas(canvasSize, canvasSize);
-      const context = canvas.getContext("2d");
-      if (!context) {
-        return;
+      const canvasSize = getRangeMax(particle.size.value) * 2;
+      let emojiData;
+      if (typeof OffscreenCanvas !== "undefined") {
+        const canvas = new OffscreenCanvas(canvasSize, canvasSize),
+          context = canvas.getContext("2d");
+        if (!context) {
+          return;
+        }
+        context.font = `400 ${getRangeMax(particle.size.value) * 2}px ${font}`;
+        context.textBaseline = "middle";
+        context.textAlign = "center";
+        context.fillText(emoji, getRangeMax(particle.size.value), getRangeMax(particle.size.value));
+        emojiData = canvas.transferToImageBitmap();
+      } else {
+        const canvas = document.createElement("canvas");
+        canvas.width = canvasSize;
+        canvas.height = canvasSize;
+        const context = canvas.getContext("2d");
+        if (!context) {
+          return;
+        }
+        context.font = `400 ${getRangeMax(particle.size.value) * 2}px ${font}`;
+        context.textBaseline = "middle";
+        context.textAlign = "center";
+        context.fillText(emoji, getRangeMax(particle.size.value), getRangeMax(particle.size.value));
+        emojiData = canvas;
       }
-      context.font = `400 ${getRangeMax(particle.size.value) * 2}px ${font}`;
-      context.textBaseline = "middle";
-      context.textAlign = "center";
-      context.fillText(emoji, getRangeMax(particle.size.value), getRangeMax(particle.size.value));
-      const emojiData = canvas.transferToImageBitmap();
       this._emojiShapeDict.set(key, emojiData);
       particle.emojiData = emojiData;
     }
@@ -20314,34 +20350,52 @@ class TrailDrawer {
     if (particle.trail.length < 2) {
       return;
     }
-    if (particle.trail.length > pathLength) {
+    while (particle.trail.length > pathLength) {
       particle.trail.shift();
     }
     const trailLength = Math.min(particle.trail.length, pathLength),
       offsetPos = {
         x: currentPos.x,
         y: currentPos.y
+      },
+      canvasSize = {
+        width: particle.container.canvas.size.width + diameter,
+        height: particle.container.canvas.size.height + diameter
       };
     let lastPos = particle.trail[trailLength - 1].position;
+    context.setTransform(1, 0, 0, 1, currentPos.x, currentPos.y);
     for (let i = trailLength; i > 0; i--) {
       const step = particle.trail[i - 1],
         position = step.position;
-      if (getDistance(lastPos, position) > diameter) {
-        continue;
-      }
       context.beginPath();
       context.moveTo(lastPos.x - offsetPos.x, lastPos.y - offsetPos.y);
-      context.lineTo(position.x - offsetPos.x, position.y - offsetPos.y);
+      const warp = {
+        x: (lastPos.x + canvasSize.width) % canvasSize.width,
+        y: (lastPos.y + canvasSize.height) % canvasSize.height
+      };
+      if (Math.abs(lastPos.x - position.x) > canvasSize.width / 2 || Math.abs(lastPos.y - position.y) > canvasSize.height / 2) {
+        lastPos = position;
+        continue;
+      }
+      context.lineTo((Math.abs(lastPos.x - position.x) > canvasSize.width / 2 ? warp.x : position.x) - offsetPos.x, (Math.abs(lastPos.y - position.y) > canvasSize.height / 2 ? warp.y : position.y) - offsetPos.y);
       const width = Math.max(i / trailLength * diameter, pxRatio, particle.trailMinWidth ?? -1);
+      const oldAlpha = context.globalAlpha;
+      context.globalAlpha = particle.trailFade ? i / trailLength : 1;
       context.lineWidth = particle.trailMaxWidth ? Math.min(width, particle.trailMaxWidth) : width;
       context.strokeStyle = step.color;
       context.stroke();
+      context.globalAlpha = oldAlpha;
       lastPos = position;
     }
+    const {
+      transformData
+    } = data;
+    context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, currentPos.x, currentPos.y);
   }
   particleInit(container, particle) {
     particle.trail = [];
     const effectData = particle.effectData;
+    particle.trailFade = effectData?.fade ?? true;
     particle.trailLength = getRangeValue(effectData?.length ?? 10) * container.retina.pixelRatio;
     particle.trailMaxWidth = effectData?.maxWidth ? getRangeValue(effectData.maxWidth) * container.retina.pixelRatio : undefined;
     particle.trailMinWidth = effectData?.minWidth ? getRangeValue(effectData.minWidth) * container.retina.pixelRatio : undefined;