@tsparticles/effect-trail 3.9.1 → 4.0.0-alpha.1
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.
- package/916.min.js +2 -0
- package/916.min.js.LICENSE.txt +1 -0
- package/browser/TrailDrawer.js +12 -4
- package/browser/index.js +6 -4
- package/cjs/TrailDrawer.js +23 -19
- package/cjs/index.js +6 -7
- package/dist_browser_TrailDrawer_js.js +30 -0
- package/esm/TrailDrawer.js +12 -4
- package/esm/index.js +6 -4
- package/package.json +4 -3
- package/report.html +5 -4
- package/tsparticles.effect.trail.js +209 -30
- package/tsparticles.effect.trail.min.js +1 -1
- package/tsparticles.effect.trail.min.js.LICENSE.txt +1 -1
- package/types/TrailDrawer.d.ts +1 -1
- package/types/index.d.ts +1 -1
- package/umd/TrailDrawer.js +12 -4
- package/umd/index.js +41 -5
package/916.min.js
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
/*! For license information please see 916.min.js.LICENSE.txt */
|
|
2
|
+
(this.webpackChunk_tsparticles_effect_trail=this.webpackChunk_tsparticles_effect_trail||[]).push([[916],{916(t,a,i){i.d(a,{TrailDrawer:()=>r});var e=i(303);const n={a:1,b:0,c:0,d:1};class r{drawAfter(t){const{context:a,radius:i,particle:r,transformData:l}=t,o=i*e.double,s=r.container.retina.pixelRatio,h=r.getPosition(),c=r.trail;if(!c||!r.trailLength)return;const f=r.trailLength+i;if(c.push({color:a.fillStyle||a.strokeStyle,position:{x:h.x,y:h.y},transformData:{...t.transformData}}),c.length<2)return;for(;c.length>f;)c.shift();const x=Math.min(c.length,f),d=r.container.canvas.size.width+o,g=r.container.canvas.size.height+o,p=c[x-1];if(!p)return;let m=p.position;for(let t=x;t>e.none;t--){const i=c[t-1];if(!i)continue;const l=i.position,h=r.trailTransform?i.transformData??n:n;a.setTransform(h.a,h.b,h.c,h.d,l.x,l.y),a.beginPath(),a.moveTo(m.x-l.x,m.y-l.y);const f={x:(m.x+d)%d,y:(m.y+g)%g};if(Math.abs(m.x-l.x)>d*e.half||Math.abs(m.y-l.y)>g*e.half){m=l;continue}a.lineTo(Math.abs(m.x-l.x)>d*e.half?f.x:e.originPoint.x,Math.abs(m.y-l.y)>g*e.half?f.y:e.originPoint.y);const p=Math.max(t/x*o,s,r.trailMinWidth??-1),y=a.globalAlpha;a.globalAlpha=r.trailFade?t/x:e.defaultAlpha,a.lineWidth=r.trailMaxWidth?Math.min(p,r.trailMaxWidth):p,a.strokeStyle=i.color,a.stroke(),a.globalAlpha=y,m=l}a.setTransform(l.a,l.b,l.c,l.d,h.x,h.y)}particleInit(t,a){a.trail=[];const i=a.effectData;a.trailFade=i?.fade??!0,a.trailLength=(0,e.getRangeValue)(i?.length??10)*t.retina.pixelRatio,a.trailMaxWidth=i?.maxWidth?(0,e.getRangeValue)(i.maxWidth)*t.retina.pixelRatio:void 0,a.trailMinWidth=i?.minWidth?(0,e.getRangeValue)(i.minWidth)*t.retina.pixelRatio:void 0,a.trailTransform=i?.transform??!1}}}}]);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
/*! tsParticles Trail Shape v4.0.0-alpha.1 by Matteo Bruni */
|
package/browser/TrailDrawer.js
CHANGED
|
@@ -7,14 +7,14 @@ const defaultTransform = {
|
|
|
7
7
|
d: 1,
|
|
8
8
|
};
|
|
9
9
|
export class TrailDrawer {
|
|
10
|
-
|
|
10
|
+
drawAfter(data) {
|
|
11
11
|
const { context, radius, particle, transformData } = data, diameter = radius * double, pxRatio = particle.container.retina.pixelRatio, currentPos = particle.getPosition(), trail = particle.trail;
|
|
12
12
|
if (!trail || !particle.trailLength) {
|
|
13
13
|
return;
|
|
14
14
|
}
|
|
15
15
|
const pathLength = particle.trailLength + radius;
|
|
16
16
|
trail.push({
|
|
17
|
-
color: context.fillStyle
|
|
17
|
+
color: context.fillStyle || context.strokeStyle,
|
|
18
18
|
position: {
|
|
19
19
|
x: currentPos.x,
|
|
20
20
|
y: currentPos.y,
|
|
@@ -31,9 +31,17 @@ export class TrailDrawer {
|
|
|
31
31
|
width: particle.container.canvas.size.width + diameter,
|
|
32
32
|
height: particle.container.canvas.size.height + diameter,
|
|
33
33
|
};
|
|
34
|
-
|
|
34
|
+
const trailPos = trail[trailLength - trailLengthOffset];
|
|
35
|
+
if (!trailPos) {
|
|
36
|
+
return;
|
|
37
|
+
}
|
|
38
|
+
let lastPos = trailPos.position;
|
|
35
39
|
for (let i = trailLength; i > none; i--) {
|
|
36
|
-
const step = trail[i - trailLengthOffset]
|
|
40
|
+
const step = trail[i - trailLengthOffset];
|
|
41
|
+
if (!step) {
|
|
42
|
+
continue;
|
|
43
|
+
}
|
|
44
|
+
const position = step.position, stepTransformData = particle.trailTransform
|
|
37
45
|
? (step.transformData ?? defaultTransform)
|
|
38
46
|
: defaultTransform;
|
|
39
47
|
context.setTransform(stepTransformData.a, stepTransformData.b, stepTransformData.c, stepTransformData.d, position.x, position.y);
|
package/browser/index.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
engine.
|
|
4
|
-
|
|
1
|
+
export function loadTrailEffect(engine) {
|
|
2
|
+
engine.checkVersion("4.0.0-alpha.1");
|
|
3
|
+
engine.register(async (e) => {
|
|
4
|
+
const { TrailDrawer } = await import("./TrailDrawer.js");
|
|
5
|
+
e.addEffect("trail", new TrailDrawer());
|
|
6
|
+
});
|
|
5
7
|
}
|
package/cjs/TrailDrawer.js
CHANGED
|
@@ -1,7 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.TrailDrawer = void 0;
|
|
4
|
-
const engine_1 = require("@tsparticles/engine");
|
|
1
|
+
import { defaultAlpha, double, getRangeValue, half, none, originPoint, } from "@tsparticles/engine";
|
|
5
2
|
const minTrailLength = 2, trailLengthOffset = 1, minWidth = -1, defaultLength = 10;
|
|
6
3
|
const defaultTransform = {
|
|
7
4
|
a: 1,
|
|
@@ -9,15 +6,15 @@ const defaultTransform = {
|
|
|
9
6
|
c: 0,
|
|
10
7
|
d: 1,
|
|
11
8
|
};
|
|
12
|
-
class TrailDrawer {
|
|
13
|
-
|
|
14
|
-
const { context, radius, particle, transformData } = data, diameter = radius *
|
|
9
|
+
export class TrailDrawer {
|
|
10
|
+
drawAfter(data) {
|
|
11
|
+
const { context, radius, particle, transformData } = data, diameter = radius * double, pxRatio = particle.container.retina.pixelRatio, currentPos = particle.getPosition(), trail = particle.trail;
|
|
15
12
|
if (!trail || !particle.trailLength) {
|
|
16
13
|
return;
|
|
17
14
|
}
|
|
18
15
|
const pathLength = particle.trailLength + radius;
|
|
19
16
|
trail.push({
|
|
20
|
-
color: context.fillStyle
|
|
17
|
+
color: context.fillStyle || context.strokeStyle,
|
|
21
18
|
position: {
|
|
22
19
|
x: currentPos.x,
|
|
23
20
|
y: currentPos.y,
|
|
@@ -34,9 +31,17 @@ class TrailDrawer {
|
|
|
34
31
|
width: particle.container.canvas.size.width + diameter,
|
|
35
32
|
height: particle.container.canvas.size.height + diameter,
|
|
36
33
|
};
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
34
|
+
const trailPos = trail[trailLength - trailLengthOffset];
|
|
35
|
+
if (!trailPos) {
|
|
36
|
+
return;
|
|
37
|
+
}
|
|
38
|
+
let lastPos = trailPos.position;
|
|
39
|
+
for (let i = trailLength; i > none; i--) {
|
|
40
|
+
const step = trail[i - trailLengthOffset];
|
|
41
|
+
if (!step) {
|
|
42
|
+
continue;
|
|
43
|
+
}
|
|
44
|
+
const position = step.position, stepTransformData = particle.trailTransform
|
|
40
45
|
? (step.transformData ?? defaultTransform)
|
|
41
46
|
: defaultTransform;
|
|
42
47
|
context.setTransform(stepTransformData.a, stepTransformData.b, stepTransformData.c, stepTransformData.d, position.x, position.y);
|
|
@@ -46,14 +51,14 @@ class TrailDrawer {
|
|
|
46
51
|
x: (lastPos.x + canvasSize.width) % canvasSize.width,
|
|
47
52
|
y: (lastPos.y + canvasSize.height) % canvasSize.height,
|
|
48
53
|
};
|
|
49
|
-
if (Math.abs(lastPos.x - position.x) > canvasSize.width *
|
|
50
|
-
Math.abs(lastPos.y - position.y) > canvasSize.height *
|
|
54
|
+
if (Math.abs(lastPos.x - position.x) > canvasSize.width * half ||
|
|
55
|
+
Math.abs(lastPos.y - position.y) > canvasSize.height * half) {
|
|
51
56
|
lastPos = position;
|
|
52
57
|
continue;
|
|
53
58
|
}
|
|
54
|
-
context.lineTo(Math.abs(lastPos.x - position.x) > canvasSize.width *
|
|
59
|
+
context.lineTo(Math.abs(lastPos.x - position.x) > canvasSize.width * half ? warp.x : originPoint.x, Math.abs(lastPos.y - position.y) > canvasSize.height * half ? warp.y : originPoint.y);
|
|
55
60
|
const width = Math.max((i / trailLength) * diameter, pxRatio, particle.trailMinWidth ?? minWidth), oldAlpha = context.globalAlpha;
|
|
56
|
-
context.globalAlpha = particle.trailFade ? i / trailLength :
|
|
61
|
+
context.globalAlpha = particle.trailFade ? i / trailLength : defaultAlpha;
|
|
57
62
|
context.lineWidth = particle.trailMaxWidth ? Math.min(width, particle.trailMaxWidth) : width;
|
|
58
63
|
context.strokeStyle = step.color;
|
|
59
64
|
context.stroke();
|
|
@@ -66,14 +71,13 @@ class TrailDrawer {
|
|
|
66
71
|
particle.trail = [];
|
|
67
72
|
const effectData = particle.effectData;
|
|
68
73
|
particle.trailFade = effectData?.fade ?? true;
|
|
69
|
-
particle.trailLength =
|
|
74
|
+
particle.trailLength = getRangeValue(effectData?.length ?? defaultLength) * container.retina.pixelRatio;
|
|
70
75
|
particle.trailMaxWidth = effectData?.maxWidth
|
|
71
|
-
?
|
|
76
|
+
? getRangeValue(effectData.maxWidth) * container.retina.pixelRatio
|
|
72
77
|
: undefined;
|
|
73
78
|
particle.trailMinWidth = effectData?.minWidth
|
|
74
|
-
?
|
|
79
|
+
? getRangeValue(effectData.minWidth) * container.retina.pixelRatio
|
|
75
80
|
: undefined;
|
|
76
81
|
particle.trailTransform = effectData?.transform ?? false;
|
|
77
82
|
}
|
|
78
83
|
}
|
|
79
|
-
exports.TrailDrawer = TrailDrawer;
|
package/cjs/index.js
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
const
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
await engine.addEffect("trail", new TrailDrawer_js_1.TrailDrawer(), refresh);
|
|
1
|
+
export function loadTrailEffect(engine) {
|
|
2
|
+
engine.checkVersion("4.0.0-alpha.1");
|
|
3
|
+
engine.register(async (e) => {
|
|
4
|
+
const { TrailDrawer } = await import("./TrailDrawer.js");
|
|
5
|
+
e.addEffect("trail", new TrailDrawer());
|
|
6
|
+
});
|
|
8
7
|
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* Author : Matteo Bruni
|
|
3
|
+
* MIT license: https://opensource.org/licenses/MIT
|
|
4
|
+
* Demo / Generator : https://particles.js.org/
|
|
5
|
+
* GitHub : https://www.github.com/matteobruni/tsparticles
|
|
6
|
+
* How to use? : Check the GitHub README
|
|
7
|
+
* v4.0.0-alpha.1
|
|
8
|
+
*/
|
|
9
|
+
"use strict";
|
|
10
|
+
/*
|
|
11
|
+
* ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
|
|
12
|
+
* This devtool is neither made for production nor for readable output files.
|
|
13
|
+
* It uses "eval()" calls to create a separate source file in the browser devtools.
|
|
14
|
+
* If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
|
|
15
|
+
* or disable the default devtool with "devtool: false".
|
|
16
|
+
* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
|
|
17
|
+
*/
|
|
18
|
+
(this["webpackChunk_tsparticles_effect_trail"] = this["webpackChunk_tsparticles_effect_trail"] || []).push([["dist_browser_TrailDrawer_js"],{
|
|
19
|
+
|
|
20
|
+
/***/ "./dist/browser/TrailDrawer.js"
|
|
21
|
+
/*!*************************************!*\
|
|
22
|
+
!*** ./dist/browser/TrailDrawer.js ***!
|
|
23
|
+
\*************************************/
|
|
24
|
+
(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
|
|
25
|
+
|
|
26
|
+
eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ TrailDrawer: () => (/* binding */ TrailDrawer)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nconst minTrailLength = 2,\n trailLengthOffset = 1,\n minWidth = -1,\n defaultLength = 10;\nconst defaultTransform = {\n a: 1,\n b: 0,\n c: 0,\n d: 1\n};\nclass TrailDrawer {\n drawAfter(data) {\n const {\n context,\n radius,\n particle,\n transformData\n } = data,\n diameter = radius * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.double,\n pxRatio = particle.container.retina.pixelRatio,\n currentPos = particle.getPosition(),\n trail = particle.trail;\n if (!trail || !particle.trailLength) {\n return;\n }\n const pathLength = particle.trailLength + radius;\n trail.push({\n color: context.fillStyle || context.strokeStyle,\n position: {\n x: currentPos.x,\n y: currentPos.y\n },\n transformData: {\n ...data.transformData\n }\n });\n if (trail.length < minTrailLength) {\n return;\n }\n while (trail.length > pathLength) {\n trail.shift();\n }\n const trailLength = Math.min(trail.length, pathLength),\n canvasSize = {\n width: particle.container.canvas.size.width + diameter,\n height: particle.container.canvas.size.height + diameter\n };\n const trailPos = trail[trailLength - trailLengthOffset];\n if (!trailPos) {\n return;\n }\n let lastPos = trailPos.position;\n for (let i = trailLength; i > _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.none; i--) {\n const step = trail[i - trailLengthOffset];\n if (!step) {\n continue;\n }\n const position = step.position,\n stepTransformData = particle.trailTransform ? step.transformData ?? defaultTransform : defaultTransform;\n context.setTransform(stepTransformData.a, stepTransformData.b, stepTransformData.c, stepTransformData.d, position.x, position.y);\n context.beginPath();\n context.moveTo(lastPos.x - position.x, lastPos.y - position.y);\n const warp = {\n x: (lastPos.x + canvasSize.width) % canvasSize.width,\n y: (lastPos.y + canvasSize.height) % canvasSize.height\n };\n if (Math.abs(lastPos.x - position.x) > canvasSize.width * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half || Math.abs(lastPos.y - position.y) > canvasSize.height * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half) {\n lastPos = position;\n continue;\n }\n context.lineTo(Math.abs(lastPos.x - position.x) > canvasSize.width * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half ? warp.x : _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.x, Math.abs(lastPos.y - position.y) > canvasSize.height * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half ? warp.y : _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.y);\n const width = Math.max(i / trailLength * diameter, pxRatio, particle.trailMinWidth ?? minWidth),\n oldAlpha = context.globalAlpha;\n context.globalAlpha = particle.trailFade ? i / trailLength : _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.defaultAlpha;\n context.lineWidth = particle.trailMaxWidth ? Math.min(width, particle.trailMaxWidth) : width;\n context.strokeStyle = step.color;\n context.stroke();\n context.globalAlpha = oldAlpha;\n lastPos = position;\n }\n context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, currentPos.x, currentPos.y);\n }\n particleInit(container, particle) {\n particle.trail = [];\n const effectData = particle.effectData;\n particle.trailFade = effectData?.fade ?? true;\n particle.trailLength = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(effectData?.length ?? defaultLength) * container.retina.pixelRatio;\n particle.trailMaxWidth = effectData?.maxWidth ? (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(effectData.maxWidth) * container.retina.pixelRatio : undefined;\n particle.trailMinWidth = effectData?.minWidth ? (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(effectData.minWidth) * container.retina.pixelRatio : undefined;\n particle.trailTransform = effectData?.transform ?? false;\n }\n}\n\n//# sourceURL=webpack://@tsparticles/effect-trail/./dist/browser/TrailDrawer.js?\n}");
|
|
27
|
+
|
|
28
|
+
/***/ }
|
|
29
|
+
|
|
30
|
+
}]);
|
package/esm/TrailDrawer.js
CHANGED
|
@@ -7,14 +7,14 @@ const defaultTransform = {
|
|
|
7
7
|
d: 1,
|
|
8
8
|
};
|
|
9
9
|
export class TrailDrawer {
|
|
10
|
-
|
|
10
|
+
drawAfter(data) {
|
|
11
11
|
const { context, radius, particle, transformData } = data, diameter = radius * double, pxRatio = particle.container.retina.pixelRatio, currentPos = particle.getPosition(), trail = particle.trail;
|
|
12
12
|
if (!trail || !particle.trailLength) {
|
|
13
13
|
return;
|
|
14
14
|
}
|
|
15
15
|
const pathLength = particle.trailLength + radius;
|
|
16
16
|
trail.push({
|
|
17
|
-
color: context.fillStyle
|
|
17
|
+
color: context.fillStyle || context.strokeStyle,
|
|
18
18
|
position: {
|
|
19
19
|
x: currentPos.x,
|
|
20
20
|
y: currentPos.y,
|
|
@@ -31,9 +31,17 @@ export class TrailDrawer {
|
|
|
31
31
|
width: particle.container.canvas.size.width + diameter,
|
|
32
32
|
height: particle.container.canvas.size.height + diameter,
|
|
33
33
|
};
|
|
34
|
-
|
|
34
|
+
const trailPos = trail[trailLength - trailLengthOffset];
|
|
35
|
+
if (!trailPos) {
|
|
36
|
+
return;
|
|
37
|
+
}
|
|
38
|
+
let lastPos = trailPos.position;
|
|
35
39
|
for (let i = trailLength; i > none; i--) {
|
|
36
|
-
const step = trail[i - trailLengthOffset]
|
|
40
|
+
const step = trail[i - trailLengthOffset];
|
|
41
|
+
if (!step) {
|
|
42
|
+
continue;
|
|
43
|
+
}
|
|
44
|
+
const position = step.position, stepTransformData = particle.trailTransform
|
|
37
45
|
? (step.transformData ?? defaultTransform)
|
|
38
46
|
: defaultTransform;
|
|
39
47
|
context.setTransform(stepTransformData.a, stepTransformData.b, stepTransformData.c, stepTransformData.d, position.x, position.y);
|
package/esm/index.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
engine.
|
|
4
|
-
|
|
1
|
+
export function loadTrailEffect(engine) {
|
|
2
|
+
engine.checkVersion("4.0.0-alpha.1");
|
|
3
|
+
engine.register(async (e) => {
|
|
4
|
+
const { TrailDrawer } = await import("./TrailDrawer.js");
|
|
5
|
+
e.addEffect("trail", new TrailDrawer());
|
|
6
|
+
});
|
|
5
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tsparticles/effect-trail",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.0-alpha.1",
|
|
4
4
|
"description": "tsParticles trail effect",
|
|
5
5
|
"homepage": "https://particles.js.org",
|
|
6
6
|
"repository": {
|
|
@@ -100,9 +100,10 @@
|
|
|
100
100
|
"./package.json": "./package.json"
|
|
101
101
|
},
|
|
102
102
|
"dependencies": {
|
|
103
|
-
"@tsparticles/engine": "
|
|
103
|
+
"@tsparticles/engine": "4.0.0-alpha.1"
|
|
104
104
|
},
|
|
105
105
|
"publishConfig": {
|
|
106
106
|
"access": "public"
|
|
107
|
-
}
|
|
107
|
+
},
|
|
108
|
+
"type": "module"
|
|
108
109
|
}
|