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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -4,7 +4,7 @@
4
4
  * Demo / Generator : https://particles.js.org/
5
5
  * GitHub : https://www.github.com/matteobruni/tsparticles
6
6
  * How to use? : Check the GitHub README
7
- * v3.0.0-beta.4
7
+ * v3.0.0
8
8
  */
9
9
  (function webpackUniversalModuleDefinition(root, factory) {
10
10
  if(typeof exports === 'object' && typeof module === 'object')
@@ -105,6 +105,7 @@ class TrailDrawer {
105
105
  radius,
106
106
  particle
107
107
  } = data,
108
+ diameter = radius * 2,
108
109
  pxRatio = particle.container.retina.pixelRatio,
109
110
  currentPos = particle.getPosition();
110
111
  if (!particle.trail || !particle.trailLength) {
@@ -121,34 +122,52 @@ class TrailDrawer {
121
122
  if (particle.trail.length < 2) {
122
123
  return;
123
124
  }
124
- if (particle.trail.length > pathLength) {
125
+ while (particle.trail.length > pathLength) {
125
126
  particle.trail.shift();
126
127
  }
127
128
  const trailLength = Math.min(particle.trail.length, pathLength),
128
129
  offsetPos = {
129
130
  x: currentPos.x,
130
131
  y: currentPos.y
132
+ },
133
+ canvasSize = {
134
+ width: particle.container.canvas.size.width + diameter,
135
+ height: particle.container.canvas.size.height + diameter
131
136
  };
132
137
  let lastPos = particle.trail[trailLength - 1].position;
138
+ context.setTransform(1, 0, 0, 1, currentPos.x, currentPos.y);
133
139
  for (let i = trailLength; i > 0; i--) {
134
140
  const step = particle.trail[i - 1],
135
141
  position = step.position;
136
- if ((0,engine_root_window_.getDistance)(lastPos, position) > radius * 2) {
137
- continue;
138
- }
139
142
  context.beginPath();
140
143
  context.moveTo(lastPos.x - offsetPos.x, lastPos.y - offsetPos.y);
141
- context.lineTo(position.x - offsetPos.x, position.y - offsetPos.y);
142
- const width = Math.max(i / trailLength * radius * 2, pxRatio, particle.trailMinWidth ?? -1);
144
+ const warp = {
145
+ x: (lastPos.x + canvasSize.width) % canvasSize.width,
146
+ y: (lastPos.y + canvasSize.height) % canvasSize.height
147
+ };
148
+ if (Math.abs(lastPos.x - position.x) > canvasSize.width / 2 || Math.abs(lastPos.y - position.y) > canvasSize.height / 2) {
149
+ lastPos = position;
150
+ continue;
151
+ }
152
+ 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);
153
+ const width = Math.max(i / trailLength * diameter, pxRatio, particle.trailMinWidth ?? -1);
154
+ const oldAlpha = context.globalAlpha;
155
+ context.globalAlpha = particle.trailFade ? i / trailLength : 1;
143
156
  context.lineWidth = particle.trailMaxWidth ? Math.min(width, particle.trailMaxWidth) : width;
144
157
  context.strokeStyle = step.color;
145
158
  context.stroke();
159
+ context.globalAlpha = oldAlpha;
146
160
  lastPos = position;
147
161
  }
162
+ const {
163
+ transformData
164
+ } = data;
165
+ context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, currentPos.x, currentPos.y);
148
166
  }
149
167
  particleInit(container, particle) {
150
168
  particle.trail = [];
151
169
  const effectData = particle.effectData;
170
+ particle.trailFade = effectData?.fade ?? true;
152
171
  particle.trailLength = (0,engine_root_window_.getRangeValue)(effectData?.length ?? 10) * container.retina.pixelRatio;
153
172
  particle.trailMaxWidth = effectData?.maxWidth ? (0,engine_root_window_.getRangeValue)(effectData.maxWidth) * container.retina.pixelRatio : undefined;
154
173
  particle.trailMinWidth = effectData?.minWidth ? (0,engine_root_window_.getRangeValue)(effectData.minWidth) * container.retina.pixelRatio : undefined;
@@ -1,2 +1,2 @@
1
1
  /*! For license information please see tsparticles.effect.trail.min.js.LICENSE.txt */
2
- !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})()));
2
+ !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})()));
@@ -1 +1 @@
1
- /*! tsParticles Trail Shape v3.0.0-beta.4 by Matteo Bruni */
1
+ /*! tsParticles Trail Shape v3.0.0 by Matteo Bruni */
@@ -5,6 +5,7 @@ type TrailStep = {
5
5
  };
6
6
  type TrailParticle = Particle & {
7
7
  trail?: TrailStep[];
8
+ trailFade?: boolean;
8
9
  trailLength?: number;
9
10
  trailMaxWidth?: number;
10
11
  trailMinWidth?: number;
@@ -13,7 +13,7 @@
13
13
  const engine_1 = require("@tsparticles/engine");
14
14
  class TrailDrawer {
15
15
  draw(data) {
16
- const { context, radius, particle } = data, pxRatio = particle.container.retina.pixelRatio, currentPos = particle.getPosition();
16
+ const { context, radius, particle } = data, diameter = radius * 2, pxRatio = particle.container.retina.pixelRatio, currentPos = particle.getPosition();
17
17
  if (!particle.trail || !particle.trailLength) {
18
18
  return;
19
19
  }
@@ -28,32 +28,48 @@
28
28
  if (particle.trail.length < 2) {
29
29
  return;
30
30
  }
31
- if (particle.trail.length > pathLength) {
31
+ while (particle.trail.length > pathLength) {
32
32
  particle.trail.shift();
33
33
  }
34
34
  const trailLength = Math.min(particle.trail.length, pathLength), offsetPos = {
35
35
  x: currentPos.x,
36
36
  y: currentPos.y,
37
+ }, canvasSize = {
38
+ width: particle.container.canvas.size.width + diameter,
39
+ height: particle.container.canvas.size.height + diameter,
37
40
  };
38
41
  let lastPos = particle.trail[trailLength - 1].position;
42
+ context.setTransform(1, 0, 0, 1, currentPos.x, currentPos.y);
39
43
  for (let i = trailLength; i > 0; i--) {
40
44
  const step = particle.trail[i - 1], position = step.position;
41
- if ((0, engine_1.getDistance)(lastPos, position) > radius * 2) {
42
- continue;
43
- }
44
45
  context.beginPath();
45
46
  context.moveTo(lastPos.x - offsetPos.x, lastPos.y - offsetPos.y);
46
- context.lineTo(position.x - offsetPos.x, position.y - offsetPos.y);
47
- const width = Math.max((i / trailLength) * radius * 2, pxRatio, particle.trailMinWidth ?? -1);
47
+ const warp = {
48
+ x: (lastPos.x + canvasSize.width) % canvasSize.width,
49
+ y: (lastPos.y + canvasSize.height) % canvasSize.height,
50
+ };
51
+ if (Math.abs(lastPos.x - position.x) > canvasSize.width / 2 ||
52
+ Math.abs(lastPos.y - position.y) > canvasSize.height / 2) {
53
+ lastPos = position;
54
+ continue;
55
+ }
56
+ 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);
57
+ const width = Math.max((i / trailLength) * diameter, pxRatio, particle.trailMinWidth ?? -1);
58
+ const oldAlpha = context.globalAlpha;
59
+ context.globalAlpha = particle.trailFade ? i / trailLength : 1;
48
60
  context.lineWidth = particle.trailMaxWidth ? Math.min(width, particle.trailMaxWidth) : width;
49
61
  context.strokeStyle = step.color;
50
62
  context.stroke();
63
+ context.globalAlpha = oldAlpha;
51
64
  lastPos = position;
52
65
  }
66
+ const { transformData } = data;
67
+ context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, currentPos.x, currentPos.y);
53
68
  }
54
69
  particleInit(container, particle) {
55
70
  particle.trail = [];
56
71
  const effectData = particle.effectData;
72
+ particle.trailFade = effectData?.fade ?? true;
57
73
  particle.trailLength = (0, engine_1.getRangeValue)(effectData?.length ?? 10) * container.retina.pixelRatio;
58
74
  particle.trailMaxWidth = effectData?.maxWidth
59
75
  ? (0, engine_1.getRangeValue)(effectData.maxWidth) * container.retina.pixelRatio