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

package/tsparticles.effect.trail.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.4
+ * v3.0.0
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -105,6 +105,7 @@ class TrailDrawer {
         radius,
         particle
       } = data,
+      diameter = radius * 2,
       pxRatio = particle.container.retina.pixelRatio,
       currentPos = particle.getPosition();
     if (!particle.trail || !particle.trailLength) {
@@ -121,34 +122,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 ((0,engine_root_window_.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_root_window_.getRangeValue)(effectData?.length ?? 10) * container.retina.pixelRatio;
     particle.trailMaxWidth = effectData?.maxWidth ? (0,engine_root_window_.getRangeValue)(effectData.maxWidth) * container.retina.pixelRatio : undefined;
     particle.trailMinWidth = effectData?.minWidth ? (0,engine_root_window_.getRangeValue)(effectData.minWidth) * container.retina.pixelRatio : undefined;

package/tsparticles.effect.trail.min.js

@@ -1,2 +1,2 @@
 /*! For license information please see tsparticles.effect.trail.min.js.LICENSE.txt */
-!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],e);else{var i="object"==typeof exports?e(require("@tsparticles/engine")):e(t.window);for(var r in i)("object"==typeof exports?exports:t)[r]=i[r]}}(this,(t=>(()=>{"use strict";var e={533:e=>{e.exports=t}},i={};function r(t){var o=i[t];if(void 0!==o)return o.exports;var a=i[t]={exports:{}};return e[t](a,a.exports,r),a.exports}r.d=(t,e)=>{for(var i in e)r.o(e,i)&&!r.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},r.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var o={};return(()=>{r.r(o),r.d(o,{loadTrailEffect:()=>i});var t=r(533);class e{draw(e){const{context:i,radius:r,particle:o}=e,a=o.container.retina.pixelRatio,n=o.getPosition();if(!o.trail||!o.trailLength)return;const l=o.trailLength;if(o.trail.push({color:i.fillStyle??i.strokeStyle,position:{x:n.x,y:n.y}}),o.trail.length<2)return;o.trail.length>l&&o.trail.shift();const s=Math.min(o.trail.length,l),c=n.x,p=n.y;let d=o.trail[s-1].position;for(let e=s;e>0;e--){const n=o.trail[e-1],l=n.position;if((0,t.getDistance)(d,l)>2*r)continue;i.beginPath(),i.moveTo(d.x-c,d.y-p),i.lineTo(l.x-c,l.y-p);const f=Math.max(e/s*r*2,a,o.trailMinWidth??-1);i.lineWidth=o.trailMaxWidth?Math.min(f,o.trailMaxWidth):f,i.strokeStyle=n.color,i.stroke(),d=l}}particleInit(e,i){i.trail=[];const r=i.effectData;i.trailLength=(0,t.getRangeValue)(r?.length??10)*e.retina.pixelRatio,i.trailMaxWidth=r?.maxWidth?(0,t.getRangeValue)(r.maxWidth)*e.retina.pixelRatio:void 0,i.trailMinWidth=r?.minWidth?(0,t.getRangeValue)(r.minWidth)*e.retina.pixelRatio:void 0}}async function i(t,i=!0){await t.addEffect("trail",new e,i)}})(),o})()));
+!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],e);else{var i="object"==typeof exports?e(require("@tsparticles/engine")):e(t.window);for(var a in i)("object"==typeof exports?exports:t)[a]=i[a]}}(this,(t=>(()=>{"use strict";var e={533:e=>{e.exports=t}},i={};function a(t){var r=i[t];if(void 0!==r)return r.exports;var o=i[t]={exports:{}};return e[t](o,o.exports,a),o.exports}a.d=(t,e)=>{for(var i in e)a.o(e,i)&&!a.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},a.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),a.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var r={};return(()=>{a.r(r),a.d(r,{loadTrailEffect:()=>i});var t=a(533);class e{draw(t){const{context:e,radius:i,particle:a}=t,r=2*i,o=a.container.retina.pixelRatio,n=a.getPosition();if(!a.trail||!a.trailLength)return;const l=a.trailLength;if(a.trail.push({color:e.fillStyle??e.strokeStyle,position:{x:n.x,y:n.y}}),a.trail.length<2)return;for(;a.trail.length>l;)a.trail.shift();const s=Math.min(a.trail.length,l),c=n.x,d=n.y,f=a.container.canvas.size.width+r,p=a.container.canvas.size.height+r;let h=a.trail[s-1].position;e.setTransform(1,0,0,1,n.x,n.y);for(let t=s;t>0;t--){const i=a.trail[t-1],n=i.position;e.beginPath(),e.moveTo(h.x-c,h.y-d);const l={x:(h.x+f)%f,y:(h.y+p)%p};if(Math.abs(h.x-n.x)>f/2||Math.abs(h.y-n.y)>p/2){h=n;continue}e.lineTo((Math.abs(h.x-n.x)>f/2?l.x:n.x)-c,(Math.abs(h.y-n.y)>p/2?l.y:n.y)-d);const x=Math.max(t/s*r,o,a.trailMinWidth??-1),y=e.globalAlpha;e.globalAlpha=a.trailFade?t/s:1,e.lineWidth=a.trailMaxWidth?Math.min(x,a.trailMaxWidth):x,e.strokeStyle=i.color,e.stroke(),e.globalAlpha=y,h=n}const{transformData:x}=t;e.setTransform(x.a,x.b,x.c,x.d,n.x,n.y)}particleInit(e,i){i.trail=[];const a=i.effectData;i.trailFade=a?.fade??!0,i.trailLength=(0,t.getRangeValue)(a?.length??10)*e.retina.pixelRatio,i.trailMaxWidth=a?.maxWidth?(0,t.getRangeValue)(a.maxWidth)*e.retina.pixelRatio:void 0,i.trailMinWidth=a?.minWidth?(0,t.getRangeValue)(a.minWidth)*e.retina.pixelRatio:void 0}}async function i(t,i=!0){await t.addEffect("trail",new e,i)}})(),r})()));

package/tsparticles.effect.trail.min.js.LICENSE.txt

@@ -1 +1 @@
-/*! tsParticles Trail Shape v3.0.0-beta.4 by Matteo Bruni */
+/*! tsParticles Trail Shape v3.0.0 by Matteo Bruni */

package/types/TrailDrawer.d.ts

@@ -5,6 +5,7 @@ type TrailStep = {
 };
 type TrailParticle = Particle & {
     trail?: TrailStep[];
+    trailFade?: boolean;
     trailLength?: number;
     trailMaxWidth?: number;
     trailMinWidth?: number;

package/umd/TrailDrawer.js

@@ -13,7 +13,7 @@
     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;
             }
@@ -28,32 +28,48 @@
             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