@tsparticles/effect-trail 3.0.0-beta.4 → 3.0.0

package/browser/TrailDrawer.js

@@ -1,7 +1,7 @@
-import { getDistance, getRangeValue, } from "@tsparticles/engine";
+import { getRangeValue, } from "@tsparticles/engine";
 export class TrailDrawer {
     draw(data) {
-        const { context, radius, particle } = data, pxRatio = particle.container.retina.pixelRatio, currentPos = particle.getPosition();
+        const { context, radius, particle } = data, diameter = radius * 2, pxRatio = particle.container.retina.pixelRatio, currentPos = particle.getPosition();
         if (!particle.trail || !particle.trailLength) {
             return;
         }
@@ -16,32 +16,48 @@ export 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) > radius * 2) {
-                continue;
-            }
             context.beginPath();
             context.moveTo(lastPos.x - offsetPos.x, lastPos.y - offsetPos.y);
-            context.lineTo(position.x - offsetPos.x, position.y - offsetPos.y);
-            const width = Math.max((i / trailLength) * radius * 2, pxRatio, particle.trailMinWidth ?? -1);
+            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

package/cjs/TrailDrawer.js

@@ -4,7 +4,7 @@ exports.TrailDrawer = void 0;
 const engine_1 = require("@tsparticles/engine");
 class TrailDrawer {
     draw(data) {
-        const { context, radius, particle } = data, pxRatio = particle.container.retina.pixelRatio, currentPos = particle.getPosition();
+        const { context, radius, particle } = data, diameter = radius * 2, pxRatio = particle.container.retina.pixelRatio, currentPos = particle.getPosition();
         if (!particle.trail || !particle.trailLength) {
             return;
         }
@@ -19,32 +19,48 @@ 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 ((0, engine_1.getDistance)(lastPos, position) > radius * 2) {
-                continue;
-            }
             context.beginPath();
             context.moveTo(lastPos.x - offsetPos.x, lastPos.y - offsetPos.y);
-            context.lineTo(position.x - offsetPos.x, position.y - offsetPos.y);
-            const width = Math.max((i / trailLength) * radius * 2, pxRatio, particle.trailMinWidth ?? -1);
+            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 = (0, engine_1.getRangeValue)(effectData?.length ?? 10) * container.retina.pixelRatio;
         particle.trailMaxWidth = effectData?.maxWidth
             ? (0, engine_1.getRangeValue)(effectData.maxWidth) * container.retina.pixelRatio

package/esm/TrailDrawer.js

@@ -1,7 +1,7 @@
-import { getDistance, getRangeValue, } from "@tsparticles/engine";
+import { getRangeValue, } from "@tsparticles/engine";
 export class TrailDrawer {
     draw(data) {
-        const { context, radius, particle } = data, pxRatio = particle.container.retina.pixelRatio, currentPos = particle.getPosition();
+        const { context, radius, particle } = data, diameter = radius * 2, pxRatio = particle.container.retina.pixelRatio, currentPos = particle.getPosition();
         if (!particle.trail || !particle.trailLength) {
             return;
         }
@@ -16,32 +16,48 @@ export 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) > radius * 2) {
-                continue;
-            }
             context.beginPath();
             context.moveTo(lastPos.x - offsetPos.x, lastPos.y - offsetPos.y);
-            context.lineTo(position.x - offsetPos.x, position.y - offsetPos.y);
-            const width = Math.max((i / trailLength) * radius * 2, pxRatio, particle.trailMinWidth ?? -1);
+            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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/effect-trail",
-  "version": "3.0.0-beta.4",
+  "version": "3.0.0",
   "description": "tsParticles trail effect",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -100,7 +100,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@tsparticles/engine": "^3.0.0-beta.4"
+    "@tsparticles/engine": "^3.0.0"
   },
   "publishConfig": {
     "access": "public"