@tsparticles/effect-trail 4.0.0-beta.0 → 4.0.0-beta.10
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/410.min.js +1 -0
- package/README.md +23 -0
- package/browser/TrailDrawer.js +7 -3
- package/browser/index.js +4 -4
- package/cjs/TrailDrawer.js +7 -3
- package/cjs/index.js +4 -4
- package/dist_browser_TrailDrawer_js.js +2 -2
- package/esm/TrailDrawer.js +7 -3
- package/esm/index.js +4 -4
- package/package.json +4 -5
- package/report.html +84 -29
- package/tsparticles.effect.trail.js +2 -2
- package/tsparticles.effect.trail.min.js +1 -1
- package/types/TrailDrawer.d.ts +2 -0
- package/543.min.js +0 -1
- package/umd/TrailDrawer.js +0 -94
- package/umd/index.js +0 -56
package/410.min.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";(this.webpackChunk_tsparticles_effect_trail=this.webpackChunk_tsparticles_effect_trail||[]).push([[410],{410(t,a,i){i.d(a,{TrailDrawer:()=>r});var e=i(303);let l={a:1,b:0,c:0,d:1};class r{_container;constructor(t){this._container=t}drawAfter(t){let{context:a,drawPosition:i,drawRadius:r,drawScale:n,particle:h,transformData:o}=t,s=this._container,d=r*e.double,c=s.retina.pixelRatio,f=h.trail;if(!f||!h.trailLength)return;let g=h.trailLength*n+r;if(f.push({color:a.fillStyle||a.strokeStyle,position:{x:i.x,y:i.y},transformData:o}),f.length<3)return;let x=Math.floor(g);f.length>x&&f.splice(0,f.length-x);let p=Math.min(f.length,g),u={width:s.canvas.size.width*n+d,height:s.canvas.size.height*n+d};a.save(),a.lineCap="butt",a.lineJoin="round";for(let t=p-2;t>0;t--){let i=f[t+1],r=f[t],o=f[t-1];if(!i||!r||!o)continue;let s=i.position,x=r.position,y=o.position,b=h.trailTransform?r.transformData??l:l,{distance:m}=(0,e.getDistances)(s,x),{distance:M}=(0,e.getDistances)(x,y);if(m>g*e.double||M>g*e.double||Math.abs(s.x-x.x)>u.width*e.half||Math.abs(s.y-x.y)>u.height*e.half||Math.abs(x.x-y.x)>u.width*e.half||Math.abs(x.y-y.y)>u.height*e.half)continue;a.setTransform(b.a,b.b,b.c,b.d,x.x,x.y);let W=(s.x+x.x)*e.half-x.x,_=(s.y+x.y)*e.half-x.y,v=(x.x+y.x)*e.half-x.x,w=(x.y+y.y)*e.half-x.y;a.beginPath(),a.moveTo(W,_),a.quadraticCurveTo(e.originPoint.x,e.originPoint.y,v,w);let k=Math.max(t/p*d,c,(h.trailMinWidth??-1)*n),R=a.globalAlpha;a.globalAlpha=h.trailFade?t/p:e.defaultAlpha,a.lineWidth=h.trailMaxWidth?Math.min(k,h.trailMaxWidth*n):k,a.strokeStyle=r.color,a.stroke(),a.globalAlpha=R}a.restore()}particleInit(t,a){a.trail=[];let 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}}}}]);
|
package/README.md
CHANGED
|
@@ -8,6 +8,12 @@
|
|
|
8
8
|
|
|
9
9
|
[tsParticles](https://github.com/tsparticles/tsparticles) additional trail effect.
|
|
10
10
|
|
|
11
|
+
## Quick checklist
|
|
12
|
+
|
|
13
|
+
1. Install `@tsparticles/engine` (or use the CDN bundle below)
|
|
14
|
+
2. Call the package loader function(s) before `tsParticles.load(...)`
|
|
15
|
+
3. Apply the package options in your `tsParticles.load(...)` config
|
|
16
|
+
|
|
11
17
|
## How to use it
|
|
12
18
|
|
|
13
19
|
### CDN / Vanilla JS / jQuery
|
|
@@ -73,3 +79,20 @@ import { loadTrailEffect } from "@tsparticles/effect-trail";
|
|
|
73
79
|
await loadTrailEffect(tsParticles);
|
|
74
80
|
})();
|
|
75
81
|
```
|
|
82
|
+
|
|
83
|
+
## Option mapping
|
|
84
|
+
|
|
85
|
+
- Effects are usually enabled through dedicated package loaders and effect-specific options.
|
|
86
|
+
- Package scope: `trail`
|
|
87
|
+
- Start from the usage snippet in this README, then merge with your main options object incrementally.
|
|
88
|
+
|
|
89
|
+
## Common pitfalls
|
|
90
|
+
|
|
91
|
+
- Calling `tsParticles.load(...)` before `loadTrailEffect(...)`
|
|
92
|
+
- Verify required peer packages before enabling advanced options
|
|
93
|
+
- Change one option group at a time to isolate regressions quickly
|
|
94
|
+
|
|
95
|
+
## Related docs
|
|
96
|
+
|
|
97
|
+
- All packages catalog: <https://github.com/tsparticles/tsparticles>
|
|
98
|
+
- Main docs: <https://particles.js.org/docs/>
|
package/browser/TrailDrawer.js
CHANGED
|
@@ -7,8 +7,12 @@ const defaultTransform = {
|
|
|
7
7
|
d: 1,
|
|
8
8
|
};
|
|
9
9
|
export class TrailDrawer {
|
|
10
|
+
_container;
|
|
11
|
+
constructor(container) {
|
|
12
|
+
this._container = container;
|
|
13
|
+
}
|
|
10
14
|
drawAfter(data) {
|
|
11
|
-
const { context, drawPosition, drawRadius, drawScale, particle, transformData } = data, diameter = drawRadius * double, pxRatio =
|
|
15
|
+
const { context, drawPosition, drawRadius, drawScale, particle, transformData } = data, container = this._container, diameter = drawRadius * double, pxRatio = container.retina.pixelRatio, trail = particle.trail;
|
|
12
16
|
if (!trail || !particle.trailLength) {
|
|
13
17
|
return;
|
|
14
18
|
}
|
|
@@ -29,8 +33,8 @@ export class TrailDrawer {
|
|
|
29
33
|
trail.splice(firstIndex, trail.length - pathLengthFloor);
|
|
30
34
|
}
|
|
31
35
|
const trailLength = Math.min(trail.length, pathLength), canvasSize = {
|
|
32
|
-
width:
|
|
33
|
-
height:
|
|
36
|
+
width: container.canvas.size.width * drawScale + diameter,
|
|
37
|
+
height: container.canvas.size.height * drawScale + diameter,
|
|
34
38
|
};
|
|
35
39
|
context.save();
|
|
36
40
|
context.lineCap = "butt";
|
package/browser/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
export async function loadTrailEffect(engine) {
|
|
2
|
-
engine.checkVersion("4.0.0-beta.
|
|
3
|
-
await engine.register(e => {
|
|
4
|
-
e.addEffect("trail", async () => {
|
|
2
|
+
engine.checkVersion("4.0.0-beta.10");
|
|
3
|
+
await engine.pluginManager.register(e => {
|
|
4
|
+
e.pluginManager.addEffect("trail", async (container) => {
|
|
5
5
|
const { TrailDrawer } = await import("./TrailDrawer.js");
|
|
6
|
-
return new TrailDrawer();
|
|
6
|
+
return new TrailDrawer(container);
|
|
7
7
|
});
|
|
8
8
|
});
|
|
9
9
|
}
|
package/cjs/TrailDrawer.js
CHANGED
|
@@ -7,8 +7,12 @@ const defaultTransform = {
|
|
|
7
7
|
d: 1,
|
|
8
8
|
};
|
|
9
9
|
export class TrailDrawer {
|
|
10
|
+
_container;
|
|
11
|
+
constructor(container) {
|
|
12
|
+
this._container = container;
|
|
13
|
+
}
|
|
10
14
|
drawAfter(data) {
|
|
11
|
-
const { context, drawPosition, drawRadius, drawScale, particle, transformData } = data, diameter = drawRadius * double, pxRatio =
|
|
15
|
+
const { context, drawPosition, drawRadius, drawScale, particle, transformData } = data, container = this._container, diameter = drawRadius * double, pxRatio = container.retina.pixelRatio, trail = particle.trail;
|
|
12
16
|
if (!trail || !particle.trailLength) {
|
|
13
17
|
return;
|
|
14
18
|
}
|
|
@@ -29,8 +33,8 @@ export class TrailDrawer {
|
|
|
29
33
|
trail.splice(firstIndex, trail.length - pathLengthFloor);
|
|
30
34
|
}
|
|
31
35
|
const trailLength = Math.min(trail.length, pathLength), canvasSize = {
|
|
32
|
-
width:
|
|
33
|
-
height:
|
|
36
|
+
width: container.canvas.size.width * drawScale + diameter,
|
|
37
|
+
height: container.canvas.size.height * drawScale + diameter,
|
|
34
38
|
};
|
|
35
39
|
context.save();
|
|
36
40
|
context.lineCap = "butt";
|
package/cjs/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
export async function loadTrailEffect(engine) {
|
|
2
|
-
engine.checkVersion("4.0.0-beta.
|
|
3
|
-
await engine.register(e => {
|
|
4
|
-
e.addEffect("trail", async () => {
|
|
2
|
+
engine.checkVersion("4.0.0-beta.10");
|
|
3
|
+
await engine.pluginManager.register(e => {
|
|
4
|
+
e.pluginManager.addEffect("trail", async (container) => {
|
|
5
5
|
const { TrailDrawer } = await import("./TrailDrawer.js");
|
|
6
|
-
return new TrailDrawer();
|
|
6
|
+
return new TrailDrawer(container);
|
|
7
7
|
});
|
|
8
8
|
});
|
|
9
9
|
}
|
|
@@ -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
|
-
* v4.0.0-beta.
|
|
7
|
+
* v4.0.0-beta.10
|
|
8
8
|
*/
|
|
9
9
|
"use strict";
|
|
10
10
|
/*
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
\*************************************/
|
|
24
24
|
(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
|
|
25
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 = 3, trailLengthOffset = 1, minWidth = -1, firstIndex = 0, defaultLength = 10, loopTrailLengthOffset = 2, loopTrailLengthMinIndex = 0;\nconst defaultTransform = {\n a: 1,\n b: 0,\n c: 0,\n d: 1\n};\nclass TrailDrawer {\n drawAfter(data) {\n const { context, drawPosition, drawRadius, drawScale, particle, transformData } = data, diameter = drawRadius * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.double, pxRatio =
|
|
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 = 3, trailLengthOffset = 1, minWidth = -1, firstIndex = 0, defaultLength = 10, loopTrailLengthOffset = 2, loopTrailLengthMinIndex = 0;\nconst defaultTransform = {\n a: 1,\n b: 0,\n c: 0,\n d: 1\n};\nclass TrailDrawer {\n _container;\n constructor(container){\n this._container = container;\n }\n drawAfter(data) {\n const { context, drawPosition, drawRadius, drawScale, particle, transformData } = data, container = this._container, diameter = drawRadius * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.double, pxRatio = container.retina.pixelRatio, trail = particle.trail;\n if (!trail || !particle.trailLength) {\n return;\n }\n const currentPos = drawPosition, pathLength = particle.trailLength * drawScale + drawRadius;\n trail.push({\n color: context.fillStyle || context.strokeStyle,\n position: {\n x: currentPos.x,\n y: currentPos.y\n },\n transformData\n });\n if (trail.length < minTrailLength) {\n return;\n }\n const pathLengthFloor = Math.floor(pathLength);\n if (trail.length > pathLengthFloor) {\n trail.splice(firstIndex, trail.length - pathLengthFloor);\n }\n const trailLength = Math.min(trail.length, pathLength), canvasSize = {\n width: container.canvas.size.width * drawScale + diameter,\n height: container.canvas.size.height * drawScale + diameter\n };\n context.save();\n context.lineCap = \"butt\";\n context.lineJoin = \"round\";\n for(let i = trailLength - loopTrailLengthOffset; i > loopTrailLengthMinIndex; i--){\n const previousStep = trail[i + trailLengthOffset], step = trail[i], nextStep = trail[i - trailLengthOffset];\n if (!previousStep || !step || !nextStep) {\n continue;\n }\n const previousPosition = previousStep.position, position = step.position, nextPosition = nextStep.position, stepTransformData = particle.trailTransform ? step.transformData ?? defaultTransform : defaultTransform, { distance: previousDistance } = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistances)(previousPosition, position), { distance: nextDistance } = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistances)(position, nextPosition);\n if (previousDistance > pathLength * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.double || nextDistance > pathLength * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.double) {\n continue;\n }\n if (Math.abs(previousPosition.x - position.x) > canvasSize.width * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half || Math.abs(previousPosition.y - position.y) > canvasSize.height * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half || Math.abs(position.x - nextPosition.x) > canvasSize.width * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half || Math.abs(position.y - nextPosition.y) > canvasSize.height * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half) {\n continue;\n }\n context.setTransform(stepTransformData.a, stepTransformData.b, stepTransformData.c, stepTransformData.d, position.x, position.y);\n const startX = (previousPosition.x + position.x) * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half - position.x, startY = (previousPosition.y + position.y) * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half - position.y, endX = (position.x + nextPosition.x) * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half - position.x, endY = (position.y + nextPosition.y) * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half - position.y;\n context.beginPath();\n context.moveTo(startX, startY);\n context.quadraticCurveTo(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.x, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.y, endX, endY);\n const width = Math.max(i / trailLength * diameter, pxRatio, (particle.trailMinWidth ?? minWidth) * drawScale), 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 * drawScale) : width;\n context.strokeStyle = step.color;\n context.stroke();\n context.globalAlpha = oldAlpha;\n }\n context.restore();\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\n//# sourceURL=webpack://@tsparticles/effect-trail/./dist/browser/TrailDrawer.js?\n}");
|
|
27
27
|
|
|
28
28
|
/***/ }
|
|
29
29
|
|
package/esm/TrailDrawer.js
CHANGED
|
@@ -7,8 +7,12 @@ const defaultTransform = {
|
|
|
7
7
|
d: 1,
|
|
8
8
|
};
|
|
9
9
|
export class TrailDrawer {
|
|
10
|
+
_container;
|
|
11
|
+
constructor(container) {
|
|
12
|
+
this._container = container;
|
|
13
|
+
}
|
|
10
14
|
drawAfter(data) {
|
|
11
|
-
const { context, drawPosition, drawRadius, drawScale, particle, transformData } = data, diameter = drawRadius * double, pxRatio =
|
|
15
|
+
const { context, drawPosition, drawRadius, drawScale, particle, transformData } = data, container = this._container, diameter = drawRadius * double, pxRatio = container.retina.pixelRatio, trail = particle.trail;
|
|
12
16
|
if (!trail || !particle.trailLength) {
|
|
13
17
|
return;
|
|
14
18
|
}
|
|
@@ -29,8 +33,8 @@ export class TrailDrawer {
|
|
|
29
33
|
trail.splice(firstIndex, trail.length - pathLengthFloor);
|
|
30
34
|
}
|
|
31
35
|
const trailLength = Math.min(trail.length, pathLength), canvasSize = {
|
|
32
|
-
width:
|
|
33
|
-
height:
|
|
36
|
+
width: container.canvas.size.width * drawScale + diameter,
|
|
37
|
+
height: container.canvas.size.height * drawScale + diameter,
|
|
34
38
|
};
|
|
35
39
|
context.save();
|
|
36
40
|
context.lineCap = "butt";
|
package/esm/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
export async function loadTrailEffect(engine) {
|
|
2
|
-
engine.checkVersion("4.0.0-beta.
|
|
3
|
-
await engine.register(e => {
|
|
4
|
-
e.addEffect("trail", async () => {
|
|
2
|
+
engine.checkVersion("4.0.0-beta.10");
|
|
3
|
+
await engine.pluginManager.register(e => {
|
|
4
|
+
e.pluginManager.addEffect("trail", async (container) => {
|
|
5
5
|
const { TrailDrawer } = await import("./TrailDrawer.js");
|
|
6
|
-
return new TrailDrawer();
|
|
6
|
+
return new TrailDrawer(container);
|
|
7
7
|
});
|
|
8
8
|
});
|
|
9
9
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tsparticles/effect-trail",
|
|
3
|
-
"version": "4.0.0-beta.
|
|
3
|
+
"version": "4.0.0-beta.10",
|
|
4
4
|
"description": "tsParticles trail effect",
|
|
5
5
|
"homepage": "https://particles.js.org",
|
|
6
6
|
"repository": {
|
|
@@ -94,13 +94,12 @@
|
|
|
94
94
|
"browser": "./browser/index.js",
|
|
95
95
|
"import": "./esm/index.js",
|
|
96
96
|
"require": "./cjs/index.js",
|
|
97
|
-
"
|
|
98
|
-
"default": "./cjs/index.js"
|
|
97
|
+
"default": "./esm/index.js"
|
|
99
98
|
},
|
|
100
99
|
"./package.json": "./package.json"
|
|
101
100
|
},
|
|
102
|
-
"
|
|
103
|
-
"@tsparticles/engine": "4.0.0-beta.
|
|
101
|
+
"peerDependencies": {
|
|
102
|
+
"@tsparticles/engine": "4.0.0-beta.10"
|
|
104
103
|
},
|
|
105
104
|
"publishConfig": {
|
|
106
105
|
"access": "public"
|