@tsparticles/path-svg 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/747.min.js +2 -0
- package/747.min.js.LICENSE.txt +1 -0
- package/browser/SVGPathGenerator.js +48 -64
- package/browser/index.js +6 -4
- package/cjs/SVGPathGenerator.js +51 -71
- package/cjs/index.js +7 -9
- package/dist_browser_SVGPathGenerator_js.js +30 -0
- package/esm/SVGPathGenerator.js +48 -64
- package/esm/index.js +6 -4
- package/package.json +4 -3
- package/report.html +5 -4
- package/tsparticles.path.svg.js +209 -30
- package/tsparticles.path.svg.min.js +1 -1
- package/tsparticles.path.svg.min.js.LICENSE.txt +1 -1
- package/types/index.d.ts +1 -1
- package/umd/SVGPathGenerator.js +47 -63
- package/umd/index.js +41 -5
package/747.min.js
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
/*! For license information please see 747.min.js.LICENSE.txt */
|
|
2
|
+
(this.webpackChunk_tsparticles_path_svg=this.webpackChunk_tsparticles_path_svg||[]).push([[747],{747(t,e,s){s.d(e,{SVGPathGenerator:()=>a});var h,i=s(303);!function(t){t[t.normal=0]="normal",t[t.reverse=1]="reverse"}(h||(h={}));class a{constructor(){this._paths=[],this._reverse=!1,this._size={width:0,height:0},this._scale=1,this._offset={x:0,y:0,mode:i.PixelMode.percent},this._width=0}generate(t,e){const s=t.container.retina.pixelRatio;t.svgDirection??=(0,i.getRandom)()>i.half?h.normal:h.reverse,t.svgPathIndex??=Math.floor((0,i.getRandom)()*this._paths.length),t.svgSpeed??=t.velocity.mult((t.retina.moveSpeed??1)*i.half).length,t.svgStep??=(0,i.randomInRangeValue)({min:0,max:this._paths[t.svgPathIndex].length})*s,t.svgOffset??={width:(0,i.randomInRangeValue)({min:-this._width*i.half,max:this._width*i.half})*s,height:(0,i.randomInRangeValue)({min:-this._width*i.half,max:this._width*i.half})*s},t.svgInitialPosition??=t.position.copy(),t.velocity.x=0,t.velocity.y=0,t.svgDirection===h.normal?t.svgStep+=t.svgSpeed*e.factor:t.svgStep-=t.svgSpeed*e.factor;let a=this._paths[t.svgPathIndex];const n=a.length;t.svgStep>=n?(t.svgPathIndex=t.svgPathIndex+1,t.svgPathIndex>=this._paths.length&&(this._reverse?(t.svgPathIndex=this._paths.length-1,t.svgDirection=h.reverse):(t.svgPathIndex=0,t.svgStep=0))):t.svgStep<=0&&(t.svgPathIndex=t.svgPathIndex-1,t.svgPathIndex<0&&(this._reverse?(t.svgPathIndex=0,t.svgDirection=h.normal):(t.svgPathIndex=this._paths.length-1,a=this._paths[t.svgPathIndex],t.svgStep=a.length))),a=this._paths[t.svgPathIndex];const g=a.element.getPointAtLength(t.svgStep),o=t.container.canvas.size,r=(0,i.getPosition)(this._offset,o),l=this._scale*s;return t.position.x=(g.x-this._size.width*i.half)*l+t.svgInitialPosition.x+r.x+t.svgOffset.width,t.position.y=(g.y-this._size.height*i.half)*l+t.svgInitialPosition.y+r.y+t.svgOffset.height,i.Vector.origin}init(t){const e=t.actualOptions.particles.move.path.options,s=e.position??this._offset;if(this._reverse=e.reverse??this._reverse,this._scale=e.scale??1,this._offset.x=s.x,this._offset.y=s.y,this._offset.mode=s.mode,this._width=e.width??0,e.url&&!e.path){const t=e.url;(async()=>{const e=await fetch(t),s=await e.text(),h=(new DOMParser).parseFromString(s,"image/svg+xml"),i=h.getElementsByTagName("svg")[0];let a=i.getElementsByTagName("path");a.length||(a=h.getElementsByTagName("path")),this._paths=[];for(let t=0;t<a.length;t++){const e=a.item(t);e&&this._paths.push({element:e,length:e.getTotalLength()})}this._size.height=Number.parseFloat(i.getAttribute("height")??"0"),this._size.width=Number.parseFloat(i.getAttribute("width")??"0")})()}else if(e.path){const t=e.path;this._paths=[];for(const e of t.data){const t=(0,i.safeDocument)().createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d",e),this._paths.push({element:t,length:t.getTotalLength()})}this._size.height=t.size.height,this._size.width=t.size.width}}reset(){}update(){}}}}]);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
/*! tsParticles SVG Path v4.0.0-alpha.1 by Matteo Bruni */
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { PixelMode, Vector, getPosition, getRandom, half,
|
|
1
|
+
import { PixelMode, Vector, getPosition, getRandom, half, randomInRangeValue, safeDocument, } from "@tsparticles/engine";
|
|
2
2
|
var SVGPathDirection;
|
|
3
3
|
(function (SVGPathDirection) {
|
|
4
4
|
SVGPathDirection[SVGPathDirection["normal"] = 0] = "normal";
|
|
@@ -16,27 +16,15 @@ export class SVGPathGenerator {
|
|
|
16
16
|
}
|
|
17
17
|
generate(particle, delta) {
|
|
18
18
|
const container = particle.container, pxRatio = container.retina.pixelRatio;
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
if (particle.svgStep === undefined) {
|
|
29
|
-
particle.svgStep = randomInRange({ min: 0, max: this._paths[particle.svgPathIndex].length }) * pxRatio;
|
|
30
|
-
}
|
|
31
|
-
if (particle.svgOffset === undefined) {
|
|
32
|
-
particle.svgOffset = {
|
|
33
|
-
width: randomInRange({ min: -this._width * half, max: this._width * half }) * pxRatio,
|
|
34
|
-
height: randomInRange({ min: -this._width * half, max: this._width * half }) * pxRatio,
|
|
35
|
-
};
|
|
36
|
-
}
|
|
37
|
-
if (particle.svgInitialPosition === undefined) {
|
|
38
|
-
particle.svgInitialPosition = { ...particle.position };
|
|
39
|
-
}
|
|
19
|
+
particle.svgDirection ??= getRandom() > half ? SVGPathDirection.normal : SVGPathDirection.reverse;
|
|
20
|
+
particle.svgPathIndex ??= Math.floor(getRandom() * this._paths.length);
|
|
21
|
+
particle.svgSpeed ??= particle.velocity.mult((particle.retina.moveSpeed ?? defaultSpeed) * half).length;
|
|
22
|
+
particle.svgStep ??= randomInRangeValue({ min: 0, max: this._paths[particle.svgPathIndex].length }) * pxRatio;
|
|
23
|
+
particle.svgOffset ??= {
|
|
24
|
+
width: randomInRangeValue({ min: -this._width * half, max: this._width * half }) * pxRatio,
|
|
25
|
+
height: randomInRangeValue({ min: -this._width * half, max: this._width * half }) * pxRatio,
|
|
26
|
+
};
|
|
27
|
+
particle.svgInitialPosition ??= particle.position.copy();
|
|
40
28
|
particle.velocity.x = 0;
|
|
41
29
|
particle.velocity.y = 0;
|
|
42
30
|
if (particle.svgDirection === SVGPathDirection.normal) {
|
|
@@ -46,50 +34,46 @@ export class SVGPathGenerator {
|
|
|
46
34
|
particle.svgStep -= particle.svgSpeed * delta.factor;
|
|
47
35
|
}
|
|
48
36
|
let path = this._paths[particle.svgPathIndex];
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
if (
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
particle.svgDirection = SVGPathDirection.reverse;
|
|
57
|
-
}
|
|
58
|
-
else {
|
|
59
|
-
particle.svgPathIndex = 0;
|
|
60
|
-
particle.svgStep = 0;
|
|
61
|
-
}
|
|
37
|
+
const pathLength = path.length, indexOffset = 1;
|
|
38
|
+
if (particle.svgStep >= pathLength) {
|
|
39
|
+
particle.svgPathIndex = particle.svgPathIndex + indexOffset;
|
|
40
|
+
if (particle.svgPathIndex >= this._paths.length) {
|
|
41
|
+
if (this._reverse) {
|
|
42
|
+
particle.svgPathIndex = this._paths.length - indexOffset;
|
|
43
|
+
particle.svgDirection = SVGPathDirection.reverse;
|
|
62
44
|
}
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
if (particle.svgPathIndex < minIndex) {
|
|
67
|
-
if (this._reverse) {
|
|
68
|
-
particle.svgPathIndex = 0;
|
|
69
|
-
particle.svgDirection = SVGPathDirection.normal;
|
|
70
|
-
}
|
|
71
|
-
else {
|
|
72
|
-
particle.svgPathIndex = this._paths.length - indexOffset;
|
|
73
|
-
path = this._paths[particle.svgPathIndex];
|
|
74
|
-
particle.svgStep = path.length;
|
|
75
|
-
}
|
|
45
|
+
else {
|
|
46
|
+
particle.svgPathIndex = 0;
|
|
47
|
+
particle.svgStep = 0;
|
|
76
48
|
}
|
|
77
49
|
}
|
|
78
|
-
path = this._paths[particle.svgPathIndex];
|
|
79
50
|
}
|
|
80
|
-
if (
|
|
81
|
-
|
|
82
|
-
particle.
|
|
83
|
-
(
|
|
84
|
-
particle.
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
particle.
|
|
90
|
-
|
|
91
|
-
|
|
51
|
+
else if (particle.svgStep <= minStep) {
|
|
52
|
+
particle.svgPathIndex = particle.svgPathIndex - indexOffset;
|
|
53
|
+
if (particle.svgPathIndex < minIndex) {
|
|
54
|
+
if (this._reverse) {
|
|
55
|
+
particle.svgPathIndex = 0;
|
|
56
|
+
particle.svgDirection = SVGPathDirection.normal;
|
|
57
|
+
}
|
|
58
|
+
else {
|
|
59
|
+
particle.svgPathIndex = this._paths.length - indexOffset;
|
|
60
|
+
path = this._paths[particle.svgPathIndex];
|
|
61
|
+
particle.svgStep = path.length;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
92
64
|
}
|
|
65
|
+
path = this._paths[particle.svgPathIndex];
|
|
66
|
+
const pathElement = path.element, pos = pathElement.getPointAtLength(particle.svgStep), canvasSize = particle.container.canvas.size, offset = getPosition(this._offset, canvasSize), scale = this._scale * pxRatio;
|
|
67
|
+
particle.position.x =
|
|
68
|
+
(pos.x - this._size.width * half) * scale +
|
|
69
|
+
particle.svgInitialPosition.x +
|
|
70
|
+
offset.x +
|
|
71
|
+
particle.svgOffset.width;
|
|
72
|
+
particle.position.y =
|
|
73
|
+
(pos.y - this._size.height * half) * scale +
|
|
74
|
+
particle.svgInitialPosition.y +
|
|
75
|
+
offset.y +
|
|
76
|
+
particle.svgOffset.height;
|
|
93
77
|
return Vector.origin;
|
|
94
78
|
}
|
|
95
79
|
init(container) {
|
|
@@ -119,15 +103,15 @@ export class SVGPathGenerator {
|
|
|
119
103
|
});
|
|
120
104
|
}
|
|
121
105
|
}
|
|
122
|
-
this._size.height = parseFloat(svg.getAttribute("height") ?? "0");
|
|
123
|
-
this._size.width = parseFloat(svg.getAttribute("width") ?? "0");
|
|
106
|
+
this._size.height = Number.parseFloat(svg.getAttribute("height") ?? "0");
|
|
107
|
+
this._size.width = Number.parseFloat(svg.getAttribute("width") ?? "0");
|
|
124
108
|
})();
|
|
125
109
|
}
|
|
126
110
|
else if (options.path) {
|
|
127
111
|
const path = options.path;
|
|
128
112
|
this._paths = [];
|
|
129
113
|
for (const item of path.data) {
|
|
130
|
-
const element =
|
|
114
|
+
const element = safeDocument().createElementNS("http://www.w3.org/2000/svg", "path");
|
|
131
115
|
element.setAttribute("d", item);
|
|
132
116
|
this._paths.push({
|
|
133
117
|
element,
|
package/browser/index.js
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
import { SVGPathGenerator } from "./SVGPathGenerator.js";
|
|
2
1
|
export const svgPathName = "svgPathGenerator";
|
|
3
|
-
export
|
|
4
|
-
engine.checkVersion("
|
|
5
|
-
|
|
2
|
+
export function loadSVGPath(engine) {
|
|
3
|
+
engine.checkVersion("4.0.0-alpha.1");
|
|
4
|
+
engine.register(async (e) => {
|
|
5
|
+
const { SVGPathGenerator } = await import("./SVGPathGenerator.js");
|
|
6
|
+
e.addPathGenerator(svgPathName, new SVGPathGenerator());
|
|
7
|
+
});
|
|
6
8
|
}
|
package/cjs/SVGPathGenerator.js
CHANGED
|
@@ -1,45 +1,30 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.SVGPathGenerator = void 0;
|
|
4
|
-
const engine_1 = require("@tsparticles/engine");
|
|
1
|
+
import { PixelMode, Vector, getPosition, getRandom, half, randomInRangeValue, safeDocument, } from "@tsparticles/engine";
|
|
5
2
|
var SVGPathDirection;
|
|
6
3
|
(function (SVGPathDirection) {
|
|
7
4
|
SVGPathDirection[SVGPathDirection["normal"] = 0] = "normal";
|
|
8
5
|
SVGPathDirection[SVGPathDirection["reverse"] = 1] = "reverse";
|
|
9
6
|
})(SVGPathDirection || (SVGPathDirection = {}));
|
|
10
7
|
const defaultSpeed = 1, minStep = 0, minIndex = 0, minWidth = 0, minScale = 1;
|
|
11
|
-
class SVGPathGenerator {
|
|
8
|
+
export class SVGPathGenerator {
|
|
12
9
|
constructor() {
|
|
13
10
|
this._paths = [];
|
|
14
11
|
this._reverse = false;
|
|
15
12
|
this._size = { width: 0, height: 0 };
|
|
16
13
|
this._scale = 1;
|
|
17
|
-
this._offset = { x: 0, y: 0, mode:
|
|
14
|
+
this._offset = { x: 0, y: 0, mode: PixelMode.percent };
|
|
18
15
|
this._width = 0;
|
|
19
16
|
}
|
|
20
17
|
generate(particle, delta) {
|
|
21
18
|
const container = particle.container, pxRatio = container.retina.pixelRatio;
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
if (particle.svgStep === undefined) {
|
|
32
|
-
particle.svgStep = (0, engine_1.randomInRange)({ min: 0, max: this._paths[particle.svgPathIndex].length }) * pxRatio;
|
|
33
|
-
}
|
|
34
|
-
if (particle.svgOffset === undefined) {
|
|
35
|
-
particle.svgOffset = {
|
|
36
|
-
width: (0, engine_1.randomInRange)({ min: -this._width * engine_1.half, max: this._width * engine_1.half }) * pxRatio,
|
|
37
|
-
height: (0, engine_1.randomInRange)({ min: -this._width * engine_1.half, max: this._width * engine_1.half }) * pxRatio,
|
|
38
|
-
};
|
|
39
|
-
}
|
|
40
|
-
if (particle.svgInitialPosition === undefined) {
|
|
41
|
-
particle.svgInitialPosition = { ...particle.position };
|
|
42
|
-
}
|
|
19
|
+
particle.svgDirection ??= getRandom() > half ? SVGPathDirection.normal : SVGPathDirection.reverse;
|
|
20
|
+
particle.svgPathIndex ??= Math.floor(getRandom() * this._paths.length);
|
|
21
|
+
particle.svgSpeed ??= particle.velocity.mult((particle.retina.moveSpeed ?? defaultSpeed) * half).length;
|
|
22
|
+
particle.svgStep ??= randomInRangeValue({ min: 0, max: this._paths[particle.svgPathIndex].length }) * pxRatio;
|
|
23
|
+
particle.svgOffset ??= {
|
|
24
|
+
width: randomInRangeValue({ min: -this._width * half, max: this._width * half }) * pxRatio,
|
|
25
|
+
height: randomInRangeValue({ min: -this._width * half, max: this._width * half }) * pxRatio,
|
|
26
|
+
};
|
|
27
|
+
particle.svgInitialPosition ??= particle.position.copy();
|
|
43
28
|
particle.velocity.x = 0;
|
|
44
29
|
particle.velocity.y = 0;
|
|
45
30
|
if (particle.svgDirection === SVGPathDirection.normal) {
|
|
@@ -49,51 +34,47 @@ class SVGPathGenerator {
|
|
|
49
34
|
particle.svgStep -= particle.svgSpeed * delta.factor;
|
|
50
35
|
}
|
|
51
36
|
let path = this._paths[particle.svgPathIndex];
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
if (
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
particle.svgDirection = SVGPathDirection.reverse;
|
|
60
|
-
}
|
|
61
|
-
else {
|
|
62
|
-
particle.svgPathIndex = 0;
|
|
63
|
-
particle.svgStep = 0;
|
|
64
|
-
}
|
|
37
|
+
const pathLength = path.length, indexOffset = 1;
|
|
38
|
+
if (particle.svgStep >= pathLength) {
|
|
39
|
+
particle.svgPathIndex = particle.svgPathIndex + indexOffset;
|
|
40
|
+
if (particle.svgPathIndex >= this._paths.length) {
|
|
41
|
+
if (this._reverse) {
|
|
42
|
+
particle.svgPathIndex = this._paths.length - indexOffset;
|
|
43
|
+
particle.svgDirection = SVGPathDirection.reverse;
|
|
65
44
|
}
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
if (particle.svgPathIndex < minIndex) {
|
|
70
|
-
if (this._reverse) {
|
|
71
|
-
particle.svgPathIndex = 0;
|
|
72
|
-
particle.svgDirection = SVGPathDirection.normal;
|
|
73
|
-
}
|
|
74
|
-
else {
|
|
75
|
-
particle.svgPathIndex = this._paths.length - indexOffset;
|
|
76
|
-
path = this._paths[particle.svgPathIndex];
|
|
77
|
-
particle.svgStep = path.length;
|
|
78
|
-
}
|
|
45
|
+
else {
|
|
46
|
+
particle.svgPathIndex = 0;
|
|
47
|
+
particle.svgStep = 0;
|
|
79
48
|
}
|
|
80
49
|
}
|
|
81
|
-
path = this._paths[particle.svgPathIndex];
|
|
82
50
|
}
|
|
83
|
-
if (
|
|
84
|
-
|
|
85
|
-
particle.
|
|
86
|
-
(
|
|
87
|
-
particle.
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
particle.
|
|
93
|
-
|
|
94
|
-
|
|
51
|
+
else if (particle.svgStep <= minStep) {
|
|
52
|
+
particle.svgPathIndex = particle.svgPathIndex - indexOffset;
|
|
53
|
+
if (particle.svgPathIndex < minIndex) {
|
|
54
|
+
if (this._reverse) {
|
|
55
|
+
particle.svgPathIndex = 0;
|
|
56
|
+
particle.svgDirection = SVGPathDirection.normal;
|
|
57
|
+
}
|
|
58
|
+
else {
|
|
59
|
+
particle.svgPathIndex = this._paths.length - indexOffset;
|
|
60
|
+
path = this._paths[particle.svgPathIndex];
|
|
61
|
+
particle.svgStep = path.length;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
95
64
|
}
|
|
96
|
-
|
|
65
|
+
path = this._paths[particle.svgPathIndex];
|
|
66
|
+
const pathElement = path.element, pos = pathElement.getPointAtLength(particle.svgStep), canvasSize = particle.container.canvas.size, offset = getPosition(this._offset, canvasSize), scale = this._scale * pxRatio;
|
|
67
|
+
particle.position.x =
|
|
68
|
+
(pos.x - this._size.width * half) * scale +
|
|
69
|
+
particle.svgInitialPosition.x +
|
|
70
|
+
offset.x +
|
|
71
|
+
particle.svgOffset.width;
|
|
72
|
+
particle.position.y =
|
|
73
|
+
(pos.y - this._size.height * half) * scale +
|
|
74
|
+
particle.svgInitialPosition.y +
|
|
75
|
+
offset.y +
|
|
76
|
+
particle.svgOffset.height;
|
|
77
|
+
return Vector.origin;
|
|
97
78
|
}
|
|
98
79
|
init(container) {
|
|
99
80
|
const options = container.actualOptions.particles.move.path.options, position = options.position ?? this._offset;
|
|
@@ -122,15 +103,15 @@ class SVGPathGenerator {
|
|
|
122
103
|
});
|
|
123
104
|
}
|
|
124
105
|
}
|
|
125
|
-
this._size.height = parseFloat(svg.getAttribute("height") ?? "0");
|
|
126
|
-
this._size.width = parseFloat(svg.getAttribute("width") ?? "0");
|
|
106
|
+
this._size.height = Number.parseFloat(svg.getAttribute("height") ?? "0");
|
|
107
|
+
this._size.width = Number.parseFloat(svg.getAttribute("width") ?? "0");
|
|
127
108
|
})();
|
|
128
109
|
}
|
|
129
110
|
else if (options.path) {
|
|
130
111
|
const path = options.path;
|
|
131
112
|
this._paths = [];
|
|
132
113
|
for (const item of path.data) {
|
|
133
|
-
const element =
|
|
114
|
+
const element = safeDocument().createElementNS("http://www.w3.org/2000/svg", "path");
|
|
134
115
|
element.setAttribute("d", item);
|
|
135
116
|
this._paths.push({
|
|
136
117
|
element,
|
|
@@ -146,4 +127,3 @@ class SVGPathGenerator {
|
|
|
146
127
|
update() {
|
|
147
128
|
}
|
|
148
129
|
}
|
|
149
|
-
exports.SVGPathGenerator = SVGPathGenerator;
|
package/cjs/index.js
CHANGED
|
@@ -1,10 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
const
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
engine.checkVersion("3.9.1");
|
|
9
|
-
await engine.addPathGenerator(exports.svgPathName, new SVGPathGenerator_js_1.SVGPathGenerator(), refresh);
|
|
1
|
+
export const svgPathName = "svgPathGenerator";
|
|
2
|
+
export function loadSVGPath(engine) {
|
|
3
|
+
engine.checkVersion("4.0.0-alpha.1");
|
|
4
|
+
engine.register(async (e) => {
|
|
5
|
+
const { SVGPathGenerator } = await import("./SVGPathGenerator.js");
|
|
6
|
+
e.addPathGenerator(svgPathName, new SVGPathGenerator());
|
|
7
|
+
});
|
|
10
8
|
}
|
|
@@ -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_path_svg"] = this["webpackChunk_tsparticles_path_svg"] || []).push([["dist_browser_SVGPathGenerator_js"],{
|
|
19
|
+
|
|
20
|
+
/***/ "./dist/browser/SVGPathGenerator.js"
|
|
21
|
+
/*!******************************************!*\
|
|
22
|
+
!*** ./dist/browser/SVGPathGenerator.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 */ SVGPathGenerator: () => (/* binding */ SVGPathGenerator)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nvar SVGPathDirection;\n(function (SVGPathDirection) {\n SVGPathDirection[SVGPathDirection[\"normal\"] = 0] = \"normal\";\n SVGPathDirection[SVGPathDirection[\"reverse\"] = 1] = \"reverse\";\n})(SVGPathDirection || (SVGPathDirection = {}));\nconst defaultSpeed = 1,\n minStep = 0,\n minIndex = 0,\n minWidth = 0,\n minScale = 1;\nclass SVGPathGenerator {\n constructor() {\n this._paths = [];\n this._reverse = false;\n this._size = {\n width: 0,\n height: 0\n };\n this._scale = 1;\n this._offset = {\n x: 0,\n y: 0,\n mode: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.PixelMode.percent\n };\n this._width = 0;\n }\n generate(particle, delta) {\n const container = particle.container,\n pxRatio = container.retina.pixelRatio;\n particle.svgDirection ??= (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRandom)() > _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half ? SVGPathDirection.normal : SVGPathDirection.reverse;\n particle.svgPathIndex ??= Math.floor((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRandom)() * this._paths.length);\n particle.svgSpeed ??= particle.velocity.mult((particle.retina.moveSpeed ?? defaultSpeed) * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half).length;\n particle.svgStep ??= (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.randomInRangeValue)({\n min: 0,\n max: this._paths[particle.svgPathIndex].length\n }) * pxRatio;\n particle.svgOffset ??= {\n width: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.randomInRangeValue)({\n min: -this._width * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half,\n max: this._width * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half\n }) * pxRatio,\n height: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.randomInRangeValue)({\n min: -this._width * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half,\n max: this._width * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half\n }) * pxRatio\n };\n particle.svgInitialPosition ??= particle.position.copy();\n particle.velocity.x = 0;\n particle.velocity.y = 0;\n if (particle.svgDirection === SVGPathDirection.normal) {\n particle.svgStep += particle.svgSpeed * delta.factor;\n } else {\n particle.svgStep -= particle.svgSpeed * delta.factor;\n }\n let path = this._paths[particle.svgPathIndex];\n const pathLength = path.length,\n indexOffset = 1;\n if (particle.svgStep >= pathLength) {\n particle.svgPathIndex = particle.svgPathIndex + indexOffset;\n if (particle.svgPathIndex >= this._paths.length) {\n if (this._reverse) {\n particle.svgPathIndex = this._paths.length - indexOffset;\n particle.svgDirection = SVGPathDirection.reverse;\n } else {\n particle.svgPathIndex = 0;\n particle.svgStep = 0;\n }\n }\n } else if (particle.svgStep <= minStep) {\n particle.svgPathIndex = particle.svgPathIndex - indexOffset;\n if (particle.svgPathIndex < minIndex) {\n if (this._reverse) {\n particle.svgPathIndex = 0;\n particle.svgDirection = SVGPathDirection.normal;\n } else {\n particle.svgPathIndex = this._paths.length - indexOffset;\n path = this._paths[particle.svgPathIndex];\n particle.svgStep = path.length;\n }\n }\n }\n path = this._paths[particle.svgPathIndex];\n const pathElement = path.element,\n pos = pathElement.getPointAtLength(particle.svgStep),\n canvasSize = particle.container.canvas.size,\n offset = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getPosition)(this._offset, canvasSize),\n scale = this._scale * pxRatio;\n particle.position.x = (pos.x - this._size.width * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half) * scale + particle.svgInitialPosition.x + offset.x + particle.svgOffset.width;\n particle.position.y = (pos.y - this._size.height * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half) * scale + particle.svgInitialPosition.y + offset.y + particle.svgOffset.height;\n return _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Vector.origin;\n }\n init(container) {\n const options = container.actualOptions.particles.move.path.options,\n position = options.position ?? this._offset;\n this._reverse = options.reverse ?? this._reverse;\n this._scale = options.scale ?? minScale;\n this._offset.x = position.x;\n this._offset.y = position.y;\n this._offset.mode = position.mode;\n this._width = options.width ?? minWidth;\n if (options.url && !options.path) {\n const url = options.url;\n void (async () => {\n const response = await fetch(url),\n data = await response.text();\n const parser = new DOMParser(),\n doc = parser.parseFromString(data, \"image/svg+xml\"),\n firstIndex = 0,\n svg = doc.getElementsByTagName(\"svg\")[firstIndex];\n let svgPaths = svg.getElementsByTagName(\"path\");\n if (!svgPaths.length) {\n svgPaths = doc.getElementsByTagName(\"path\");\n }\n this._paths = [];\n for (let i = 0; i < svgPaths.length; i++) {\n const path = svgPaths.item(i);\n if (path) {\n this._paths.push({\n element: path,\n length: path.getTotalLength()\n });\n }\n }\n this._size.height = Number.parseFloat(svg.getAttribute(\"height\") ?? \"0\");\n this._size.width = Number.parseFloat(svg.getAttribute(\"width\") ?? \"0\");\n })();\n } else if (options.path) {\n const path = options.path;\n this._paths = [];\n for (const item of path.data) {\n const element = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.safeDocument)().createElementNS(\"http://www.w3.org/2000/svg\", \"path\");\n element.setAttribute(\"d\", item);\n this._paths.push({\n element,\n length: element.getTotalLength()\n });\n }\n this._size.height = path.size.height;\n this._size.width = path.size.width;\n }\n }\n reset() {}\n update() {}\n}\n\n//# sourceURL=webpack://@tsparticles/path-svg/./dist/browser/SVGPathGenerator.js?\n}");
|
|
27
|
+
|
|
28
|
+
/***/ }
|
|
29
|
+
|
|
30
|
+
}]);
|
package/esm/SVGPathGenerator.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { PixelMode, Vector, getPosition, getRandom, half,
|
|
1
|
+
import { PixelMode, Vector, getPosition, getRandom, half, randomInRangeValue, safeDocument, } from "@tsparticles/engine";
|
|
2
2
|
var SVGPathDirection;
|
|
3
3
|
(function (SVGPathDirection) {
|
|
4
4
|
SVGPathDirection[SVGPathDirection["normal"] = 0] = "normal";
|
|
@@ -16,27 +16,15 @@ export class SVGPathGenerator {
|
|
|
16
16
|
}
|
|
17
17
|
generate(particle, delta) {
|
|
18
18
|
const container = particle.container, pxRatio = container.retina.pixelRatio;
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
if (particle.svgStep === undefined) {
|
|
29
|
-
particle.svgStep = randomInRange({ min: 0, max: this._paths[particle.svgPathIndex].length }) * pxRatio;
|
|
30
|
-
}
|
|
31
|
-
if (particle.svgOffset === undefined) {
|
|
32
|
-
particle.svgOffset = {
|
|
33
|
-
width: randomInRange({ min: -this._width * half, max: this._width * half }) * pxRatio,
|
|
34
|
-
height: randomInRange({ min: -this._width * half, max: this._width * half }) * pxRatio,
|
|
35
|
-
};
|
|
36
|
-
}
|
|
37
|
-
if (particle.svgInitialPosition === undefined) {
|
|
38
|
-
particle.svgInitialPosition = { ...particle.position };
|
|
39
|
-
}
|
|
19
|
+
particle.svgDirection ??= getRandom() > half ? SVGPathDirection.normal : SVGPathDirection.reverse;
|
|
20
|
+
particle.svgPathIndex ??= Math.floor(getRandom() * this._paths.length);
|
|
21
|
+
particle.svgSpeed ??= particle.velocity.mult((particle.retina.moveSpeed ?? defaultSpeed) * half).length;
|
|
22
|
+
particle.svgStep ??= randomInRangeValue({ min: 0, max: this._paths[particle.svgPathIndex].length }) * pxRatio;
|
|
23
|
+
particle.svgOffset ??= {
|
|
24
|
+
width: randomInRangeValue({ min: -this._width * half, max: this._width * half }) * pxRatio,
|
|
25
|
+
height: randomInRangeValue({ min: -this._width * half, max: this._width * half }) * pxRatio,
|
|
26
|
+
};
|
|
27
|
+
particle.svgInitialPosition ??= particle.position.copy();
|
|
40
28
|
particle.velocity.x = 0;
|
|
41
29
|
particle.velocity.y = 0;
|
|
42
30
|
if (particle.svgDirection === SVGPathDirection.normal) {
|
|
@@ -46,50 +34,46 @@ export class SVGPathGenerator {
|
|
|
46
34
|
particle.svgStep -= particle.svgSpeed * delta.factor;
|
|
47
35
|
}
|
|
48
36
|
let path = this._paths[particle.svgPathIndex];
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
if (
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
particle.svgDirection = SVGPathDirection.reverse;
|
|
57
|
-
}
|
|
58
|
-
else {
|
|
59
|
-
particle.svgPathIndex = 0;
|
|
60
|
-
particle.svgStep = 0;
|
|
61
|
-
}
|
|
37
|
+
const pathLength = path.length, indexOffset = 1;
|
|
38
|
+
if (particle.svgStep >= pathLength) {
|
|
39
|
+
particle.svgPathIndex = particle.svgPathIndex + indexOffset;
|
|
40
|
+
if (particle.svgPathIndex >= this._paths.length) {
|
|
41
|
+
if (this._reverse) {
|
|
42
|
+
particle.svgPathIndex = this._paths.length - indexOffset;
|
|
43
|
+
particle.svgDirection = SVGPathDirection.reverse;
|
|
62
44
|
}
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
if (particle.svgPathIndex < minIndex) {
|
|
67
|
-
if (this._reverse) {
|
|
68
|
-
particle.svgPathIndex = 0;
|
|
69
|
-
particle.svgDirection = SVGPathDirection.normal;
|
|
70
|
-
}
|
|
71
|
-
else {
|
|
72
|
-
particle.svgPathIndex = this._paths.length - indexOffset;
|
|
73
|
-
path = this._paths[particle.svgPathIndex];
|
|
74
|
-
particle.svgStep = path.length;
|
|
75
|
-
}
|
|
45
|
+
else {
|
|
46
|
+
particle.svgPathIndex = 0;
|
|
47
|
+
particle.svgStep = 0;
|
|
76
48
|
}
|
|
77
49
|
}
|
|
78
|
-
path = this._paths[particle.svgPathIndex];
|
|
79
50
|
}
|
|
80
|
-
if (
|
|
81
|
-
|
|
82
|
-
particle.
|
|
83
|
-
(
|
|
84
|
-
particle.
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
particle.
|
|
90
|
-
|
|
91
|
-
|
|
51
|
+
else if (particle.svgStep <= minStep) {
|
|
52
|
+
particle.svgPathIndex = particle.svgPathIndex - indexOffset;
|
|
53
|
+
if (particle.svgPathIndex < minIndex) {
|
|
54
|
+
if (this._reverse) {
|
|
55
|
+
particle.svgPathIndex = 0;
|
|
56
|
+
particle.svgDirection = SVGPathDirection.normal;
|
|
57
|
+
}
|
|
58
|
+
else {
|
|
59
|
+
particle.svgPathIndex = this._paths.length - indexOffset;
|
|
60
|
+
path = this._paths[particle.svgPathIndex];
|
|
61
|
+
particle.svgStep = path.length;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
92
64
|
}
|
|
65
|
+
path = this._paths[particle.svgPathIndex];
|
|
66
|
+
const pathElement = path.element, pos = pathElement.getPointAtLength(particle.svgStep), canvasSize = particle.container.canvas.size, offset = getPosition(this._offset, canvasSize), scale = this._scale * pxRatio;
|
|
67
|
+
particle.position.x =
|
|
68
|
+
(pos.x - this._size.width * half) * scale +
|
|
69
|
+
particle.svgInitialPosition.x +
|
|
70
|
+
offset.x +
|
|
71
|
+
particle.svgOffset.width;
|
|
72
|
+
particle.position.y =
|
|
73
|
+
(pos.y - this._size.height * half) * scale +
|
|
74
|
+
particle.svgInitialPosition.y +
|
|
75
|
+
offset.y +
|
|
76
|
+
particle.svgOffset.height;
|
|
93
77
|
return Vector.origin;
|
|
94
78
|
}
|
|
95
79
|
init(container) {
|
|
@@ -119,15 +103,15 @@ export class SVGPathGenerator {
|
|
|
119
103
|
});
|
|
120
104
|
}
|
|
121
105
|
}
|
|
122
|
-
this._size.height = parseFloat(svg.getAttribute("height") ?? "0");
|
|
123
|
-
this._size.width = parseFloat(svg.getAttribute("width") ?? "0");
|
|
106
|
+
this._size.height = Number.parseFloat(svg.getAttribute("height") ?? "0");
|
|
107
|
+
this._size.width = Number.parseFloat(svg.getAttribute("width") ?? "0");
|
|
124
108
|
})();
|
|
125
109
|
}
|
|
126
110
|
else if (options.path) {
|
|
127
111
|
const path = options.path;
|
|
128
112
|
this._paths = [];
|
|
129
113
|
for (const item of path.data) {
|
|
130
|
-
const element =
|
|
114
|
+
const element = safeDocument().createElementNS("http://www.w3.org/2000/svg", "path");
|
|
131
115
|
element.setAttribute("d", item);
|
|
132
116
|
this._paths.push({
|
|
133
117
|
element,
|
package/esm/index.js
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
import { SVGPathGenerator } from "./SVGPathGenerator.js";
|
|
2
1
|
export const svgPathName = "svgPathGenerator";
|
|
3
|
-
export
|
|
4
|
-
engine.checkVersion("
|
|
5
|
-
|
|
2
|
+
export function loadSVGPath(engine) {
|
|
3
|
+
engine.checkVersion("4.0.0-alpha.1");
|
|
4
|
+
engine.register(async (e) => {
|
|
5
|
+
const { SVGPathGenerator } = await import("./SVGPathGenerator.js");
|
|
6
|
+
e.addPathGenerator(svgPathName, new SVGPathGenerator());
|
|
7
|
+
});
|
|
6
8
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tsparticles/path-svg",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.0-alpha.1",
|
|
4
4
|
"description": "tsParticles svg path",
|
|
5
5
|
"homepage": "https://particles.js.org",
|
|
6
6
|
"repository": {
|
|
@@ -101,9 +101,10 @@
|
|
|
101
101
|
"./package.json": "./package.json"
|
|
102
102
|
},
|
|
103
103
|
"dependencies": {
|
|
104
|
-
"@tsparticles/engine": "
|
|
104
|
+
"@tsparticles/engine": "4.0.0-alpha.1"
|
|
105
105
|
},
|
|
106
106
|
"publishConfig": {
|
|
107
107
|
"access": "public"
|
|
108
|
-
}
|
|
108
|
+
},
|
|
109
|
+
"type": "module"
|
|
109
110
|
}
|