@tsparticles/effect-trail - npm Package Compare versions

Comparing version 3.0.0-beta.5 to 3.0.0

browser/TrailDrawer.js

@@ -1,2 +0,2 @@
-import { getDistance, getRangeValue, } from "@tsparticles/engine";
+import { getRangeValue, } from "@tsparticles/engine";
 export class TrailDrawer {
@@ -19,3 +19,3 @@ draw(data) {
         }
-        if (particle.trail.length > pathLength) {
+        while (particle.trail.length > pathLength) {
             particle.trail.shift();
@@ -26,18 +26,33 @@ }
             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) {
+            context.beginPath();
+            context.moveTo(lastPos.x - offsetPos.x, lastPos.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.beginPath();
-            context.moveTo(lastPos.x - offsetPos.x, lastPos.y - offsetPos.y);
-            context.lineTo(position.x - offsetPos.x, position.y - offsetPos.y);
+            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);
     }
@@ -47,2 +62,3 @@ particleInit(container, particle) {
         const effectData = particle.effectData;
+        particle.trailFade = effectData?.fade ?? true;
         particle.trailLength = getRangeValue(effectData?.length ?? 10) * container.retina.pixelRatio;
@@ -49,0 +65,0 @@ particle.trailMaxWidth = effectData?.maxWidth

cjs/TrailDrawer.js

@@ -22,3 +22,3 @@ "use strict";
         }
-        if (particle.trail.length > pathLength) {
+        while (particle.trail.length > pathLength) {
             particle.trail.shift();
@@ -29,18 +29,33 @@ }
             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) > diameter) {
+            context.beginPath();
+            context.moveTo(lastPos.x - offsetPos.x, lastPos.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.beginPath();
-            context.moveTo(lastPos.x - offsetPos.x, lastPos.y - offsetPos.y);
-            context.lineTo(position.x - offsetPos.x, position.y - offsetPos.y);
+            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);
     }
@@ -50,2 +65,3 @@ particleInit(container, particle) {
         const effectData = particle.effectData;
+        particle.trailFade = effectData?.fade ?? true;
         particle.trailLength = (0, engine_1.getRangeValue)(effectData?.length ?? 10) * container.retina.pixelRatio;
@@ -52,0 +68,0 @@ particle.trailMaxWidth = effectData?.maxWidth

esm/TrailDrawer.js

@@ -1,2 +0,2 @@
-import { getDistance, getRangeValue, } from "@tsparticles/engine";
+import { getRangeValue, } from "@tsparticles/engine";
 export class TrailDrawer {
@@ -19,3 +19,3 @@ draw(data) {
         }
-        if (particle.trail.length > pathLength) {
+        while (particle.trail.length > pathLength) {
             particle.trail.shift();
@@ -26,18 +26,33 @@ }
             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) {
+            context.beginPath();
+            context.moveTo(lastPos.x - offsetPos.x, lastPos.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.beginPath();
-            context.moveTo(lastPos.x - offsetPos.x, lastPos.y - offsetPos.y);
-            context.lineTo(position.x - offsetPos.x, position.y - offsetPos.y);
+            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);
     }
@@ -47,2 +62,3 @@ particleInit(container, particle) {
         const effectData = particle.effectData;
+        particle.trailFade = effectData?.fade ?? true;
         particle.trailLength = getRangeValue(effectData?.length ?? 10) * container.retina.pixelRatio;
@@ -49,0 +65,0 @@ particle.trailMaxWidth = effectData?.maxWidth

package.json

 {
   "name": "@tsparticles/effect-trail",
-  "version": "3.0.0-beta.5",
+  "version": "3.0.0",
   "description": "tsParticles trail effect",
@@ -103,3 +103,3 @@ "homepage": "https://particles.js.org",
   "dependencies": {
-    "@tsparticles/engine": "^3.0.0-beta.5"
+    "@tsparticles/engine": "^3.0.0"
   },
@@ -106,0 +106,0 @@ "publishConfig": {

tsparticles.effect.trail.js

@@ -7,3 +7,3 @@ /*!
  * How to use? : Check the GitHub README
- * v3.0.0-beta.5
+ * v3.0.0
  */
@@ -126,3 +126,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
     }
-    if (particle.trail.length > pathLength) {
+    while (particle.trail.length > pathLength) {
       particle.trail.shift();
@@ -134,19 +134,36 @@ }
         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) > diameter) {
+      context.beginPath();
+      context.moveTo(lastPos.x - offsetPos.x, lastPos.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.beginPath();
-      context.moveTo(lastPos.x - offsetPos.x, lastPos.y - offsetPos.y);
-      context.lineTo(position.x - offsetPos.x, position.y - offsetPos.y);
+      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);
   }
@@ -156,2 +173,3 @@ particleInit(container, particle) {
     const effectData = particle.effectData;
+    particle.trailFade = effectData?.fade ?? true;
     particle.trailLength = (0,engine_root_window_.getRangeValue)(effectData?.length ?? 10) * container.retina.pixelRatio;
@@ -158,0 +176,0 @@ particle.trailMaxWidth = effectData?.maxWidth ? (0,engine_root_window_.getRangeValue)(effectData.maxWidth) * container.retina.pixelRatio : undefined;

tsparticles.effect.trail.min.js

 /*! 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=2*r,n=o.container.retina.pixelRatio,l=o.getPosition();if(!o.trail||!o.trailLength)return;const s=o.trailLength;if(o.trail.push({color:i.fillStyle??i.strokeStyle,position:{x:l.x,y:l.y}}),o.trail.length<2)return;o.trail.length>s&&o.trail.shift();const c=Math.min(o.trail.length,s),p=l.x,d=l.y;let f=o.trail[c-1].position;for(let e=c;e>0;e--){const r=o.trail[e-1],l=r.position;if((0,t.getDistance)(f,l)>a)continue;i.beginPath(),i.moveTo(f.x-p,f.y-d),i.lineTo(l.x-p,l.y-d);const s=Math.max(e/c*a,n,o.trailMinWidth??-1);i.lineWidth=o.trailMaxWidth?Math.min(s,o.trailMaxWidth):s,i.strokeStyle=r.color,i.stroke(),f=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})()));

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

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

types/TrailDrawer.d.ts

@@ -8,2 +8,3 @@ import { type Container, type ICoordinates, type IEffectDrawer, type IShapeDrawData, type Particle } from "@tsparticles/engine";
     trail?: TrailStep[];
+    trailFade?: boolean;
     trailLength?: number;
@@ -10,0 +11,0 @@ trailMaxWidth?: number;

umd/TrailDrawer.js

@@ -31,3 +31,3 @@ (function (factory) {
             }
-            if (particle.trail.length > pathLength) {
+            while (particle.trail.length > pathLength) {
                 particle.trail.shift();
@@ -38,18 +38,33 @@ }
                 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) > diameter) {
+                context.beginPath();
+                context.moveTo(lastPos.x - offsetPos.x, lastPos.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.beginPath();
-                context.moveTo(lastPos.x - offsetPos.x, lastPos.y - offsetPos.y);
-                context.lineTo(position.x - offsetPos.x, position.y - offsetPos.y);
+                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);
         }
@@ -59,2 +74,3 @@ particleInit(container, particle) {
             const effectData = particle.effectData;
+            particle.trailFade = effectData?.fade ?? true;
             particle.trailLength = (0, engine_1.getRangeValue)(effectData?.length ?? 10) * container.retina.pixelRatio;
@@ -61,0 +77,0 @@ particle.trailMaxWidth = effectData?.maxWidth

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

307968

increased by1.87%

Lines of code

524

increased by18.82%

Number of low quality alerts

1

decreased by-50%

Dependency changes

• Updated@tsparticles/engine@^3.0.0