tsparticles 3.0.0-beta.5 → 3.0.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
- * v3.0.0-beta.5
+ * v3.0.0
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -1228,7 +1228,8 @@ function drawParticle(data) {
     particle,
     radius,
     opacity,
-    delta
+    delta,
+    transformData
   };
   context.beginPath();
   drawShape(drawData);
@@ -1253,7 +1254,8 @@ function drawEffect(data) {
     particle,
     radius,
     opacity,
-    delta
+    delta,
+    transformData
   } = data;
   if (!particle.effect) {
     return;
@@ -1268,7 +1270,10 @@ function drawEffect(data) {
     radius,
     opacity,
     delta,
-    pixelRatio: container.retina.pixelRatio
+    pixelRatio: container.retina.pixelRatio,
+    transformData: {
+      ...transformData
+    }
   });
 }
 function drawShape(data) {
@@ -1278,7 +1283,8 @@ function drawShape(data) {
     particle,
     radius,
     opacity,
-    delta
+    delta,
+    transformData
   } = data;
   if (!particle.shape) {
     return;
@@ -1293,7 +1299,10 @@ function drawShape(data) {
     radius,
     opacity,
     delta,
-    pixelRatio: container.retina.pixelRatio
+    pixelRatio: container.retina.pixelRatio,
+    transformData: {
+      ...transformData
+    }
   });
 }
 function drawShapeAfterDraw(data) {
@@ -1303,7 +1312,8 @@ function drawShapeAfterDraw(data) {
     particle,
     radius,
     opacity,
-    delta
+    delta,
+    transformData
   } = data;
   if (!particle.shape) {
     return;
@@ -1318,7 +1328,10 @@ function drawShapeAfterDraw(data) {
     radius,
     opacity,
     delta,
-    pixelRatio: container.retina.pixelRatio
+    pixelRatio: container.retina.pixelRatio,
+    transformData: {
+      ...transformData
+    }
   });
 }
 function drawPlugin(context, plugin, delta) {
@@ -1555,7 +1568,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);
       });
@@ -3519,6 +3532,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();
@@ -3546,6 +3560,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);
     }
@@ -5127,7 +5147,7 @@ class Engine {
     return res;
   }
   get version() {
-    return "3.0.0-beta.5";
+    return "3.0.0";
   }
   addConfig(config) {
     const name = config.name ?? "default";
@@ -7932,7 +7952,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,
@@ -7945,27 +7965,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;
                   }
@@ -8143,7 +8163,7 @@ class EmojiDrawer {
   }
   destroy() {
     for (const [, emojiData] of this._emojiShapeDict) {
-      emojiData?.close();
+      emojiData instanceof ImageBitmap && emojiData?.close();
     }
   }
   draw(data) {
@@ -8194,17 +8214,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;
     }