@tsparticles/path-svg 4.0.5 → 4.1.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.
- package/browser/SVGPathGenerator.js +48 -48
- package/browser/index.js +1 -1
- package/browser/index.lazy.js +1 -1
- package/cjs/SVGPathGenerator.js +48 -48
- package/cjs/index.js +1 -1
- package/cjs/index.lazy.js +1 -1
- package/esm/SVGPathGenerator.js +48 -48
- package/esm/index.js +1 -1
- package/esm/index.lazy.js +1 -1
- package/package.json +3 -3
- package/tsparticles.path.svg.js +50 -50
- package/tsparticles.path.svg.min.js +1 -1
- package/types/SVGPathGenerator.d.ts +1 -8
|
@@ -8,33 +8,33 @@ export var SVGPathDirection;
|
|
|
8
8
|
})(SVGPathDirection || (SVGPathDirection = {}));
|
|
9
9
|
const minStep = 0, minIndex = 0, minWidth = 0, minScale = 1;
|
|
10
10
|
export class SVGPathGenerator {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
11
|
+
#container;
|
|
12
|
+
#offset;
|
|
13
|
+
#paths;
|
|
14
|
+
#res;
|
|
15
|
+
#reverse;
|
|
16
|
+
#scale;
|
|
17
|
+
#size;
|
|
18
|
+
#width;
|
|
19
19
|
constructor(container) {
|
|
20
|
-
this
|
|
21
|
-
this
|
|
22
|
-
this
|
|
23
|
-
this
|
|
24
|
-
this
|
|
25
|
-
this
|
|
26
|
-
this
|
|
27
|
-
this
|
|
20
|
+
this.#container = container;
|
|
21
|
+
this.#paths = [];
|
|
22
|
+
this.#reverse = false;
|
|
23
|
+
this.#size = { width: 0, height: 0 };
|
|
24
|
+
this.#scale = 1;
|
|
25
|
+
this.#offset = { x: 0, y: 0, mode: PixelMode.percent };
|
|
26
|
+
this.#width = 0;
|
|
27
|
+
this.#res = Vector.origin;
|
|
28
28
|
}
|
|
29
29
|
generate(particle, delta) {
|
|
30
|
-
const container = this
|
|
30
|
+
const container = this.#container, pxRatio = container.retina.pixelRatio;
|
|
31
31
|
particle.svgDirection ??= getRandom() > half ? SVGPathDirection.normal : SVGPathDirection.reverse;
|
|
32
|
-
particle.svgPathIndex ??= Math.floor(getRandom() * this.
|
|
32
|
+
particle.svgPathIndex ??= Math.floor(getRandom() * this.#paths.length);
|
|
33
33
|
particle.svgSpeed ??= particle.velocity.mult(particle.retina.moveSpeed * half).length;
|
|
34
|
-
particle.svgStep ??= randomInRangeValue({ min: 0, max: this
|
|
34
|
+
particle.svgStep ??= randomInRangeValue({ min: 0, max: this.#paths[particle.svgPathIndex].length }) * pxRatio;
|
|
35
35
|
particle.svgOffset ??= {
|
|
36
|
-
width: randomInRangeValue({ min: -this
|
|
37
|
-
height: randomInRangeValue({ min: -this
|
|
36
|
+
width: randomInRangeValue({ min: -this.#width * half, max: this.#width * half }) * pxRatio,
|
|
37
|
+
height: randomInRangeValue({ min: -this.#width * half, max: this.#width * half }) * pxRatio,
|
|
38
38
|
};
|
|
39
39
|
particle.svgInitialPosition ??= particle.position.copy();
|
|
40
40
|
particle.velocity.x = 0;
|
|
@@ -45,13 +45,13 @@ export class SVGPathGenerator {
|
|
|
45
45
|
else {
|
|
46
46
|
particle.svgStep -= particle.svgSpeed * delta.factor;
|
|
47
47
|
}
|
|
48
|
-
let path = this
|
|
48
|
+
let path = this.#paths[particle.svgPathIndex];
|
|
49
49
|
const pathLength = path.length, indexOffset = 1;
|
|
50
50
|
if (particle.svgStep >= pathLength) {
|
|
51
51
|
particle.svgPathIndex = particle.svgPathIndex + indexOffset;
|
|
52
|
-
if (particle.svgPathIndex >= this.
|
|
53
|
-
if (this
|
|
54
|
-
particle.svgPathIndex = this.
|
|
52
|
+
if (particle.svgPathIndex >= this.#paths.length) {
|
|
53
|
+
if (this.#reverse) {
|
|
54
|
+
particle.svgPathIndex = this.#paths.length - indexOffset;
|
|
55
55
|
particle.svgDirection = SVGPathDirection.reverse;
|
|
56
56
|
}
|
|
57
57
|
else {
|
|
@@ -63,49 +63,49 @@ export class SVGPathGenerator {
|
|
|
63
63
|
else if (particle.svgStep <= minStep) {
|
|
64
64
|
particle.svgPathIndex = particle.svgPathIndex - indexOffset;
|
|
65
65
|
if (particle.svgPathIndex < minIndex) {
|
|
66
|
-
if (this
|
|
66
|
+
if (this.#reverse) {
|
|
67
67
|
particle.svgPathIndex = 0;
|
|
68
68
|
particle.svgDirection = SVGPathDirection.normal;
|
|
69
69
|
}
|
|
70
70
|
else {
|
|
71
|
-
particle.svgPathIndex = this.
|
|
72
|
-
path = this
|
|
71
|
+
particle.svgPathIndex = this.#paths.length - indexOffset;
|
|
72
|
+
path = this.#paths[particle.svgPathIndex];
|
|
73
73
|
particle.svgStep = path.length;
|
|
74
74
|
}
|
|
75
75
|
}
|
|
76
76
|
}
|
|
77
|
-
path = this
|
|
78
|
-
const pathElement = path.element, pos = pathElement.getPointAtLength(particle.svgStep), canvasSize = this.
|
|
77
|
+
path = this.#paths[particle.svgPathIndex];
|
|
78
|
+
const pathElement = path.element, pos = pathElement.getPointAtLength(particle.svgStep), canvasSize = this.#container.canvas.size, offset = getPosition(this.#offset, canvasSize), scale = this.#scale * pxRatio;
|
|
79
79
|
particle.position.x =
|
|
80
|
-
(pos.x - this.
|
|
80
|
+
(pos.x - this.#size.width * half) * scale + particle.svgInitialPosition.x + offset.x + particle.svgOffset.width;
|
|
81
81
|
particle.position.y =
|
|
82
|
-
(pos.y - this.
|
|
83
|
-
this.
|
|
84
|
-
this.
|
|
85
|
-
return this
|
|
82
|
+
(pos.y - this.#size.height * half) * scale + particle.svgInitialPosition.y + offset.y + particle.svgOffset.height;
|
|
83
|
+
this.#res.x = 0;
|
|
84
|
+
this.#res.y = 0;
|
|
85
|
+
return this.#res;
|
|
86
86
|
}
|
|
87
87
|
init() {
|
|
88
|
-
const options = this.
|
|
89
|
-
this
|
|
90
|
-
this
|
|
91
|
-
this.
|
|
92
|
-
this.
|
|
93
|
-
this.
|
|
94
|
-
this
|
|
88
|
+
const options = this.#container.actualOptions.particles.move.path.options, position = options.position ?? this.#offset;
|
|
89
|
+
this.#reverse = options.reverse ?? this.#reverse;
|
|
90
|
+
this.#scale = options.scale ?? minScale;
|
|
91
|
+
this.#offset.x = position.x;
|
|
92
|
+
this.#offset.y = position.y;
|
|
93
|
+
this.#offset.mode = position.mode;
|
|
94
|
+
this.#width = options.width ?? minWidth;
|
|
95
95
|
if (options.url && !options.path) {
|
|
96
96
|
const url = options.url;
|
|
97
97
|
void (async () => {
|
|
98
98
|
const response = await fetch(url), data = await response.text(), { paths, size } = loadSVGFromString(data);
|
|
99
|
-
this
|
|
100
|
-
this.
|
|
101
|
-
this.
|
|
99
|
+
this.#paths = paths;
|
|
100
|
+
this.#size.width = size.width;
|
|
101
|
+
this.#size.height = size.height;
|
|
102
102
|
})();
|
|
103
103
|
}
|
|
104
104
|
else if (options.path) {
|
|
105
105
|
const path = options.path;
|
|
106
|
-
this
|
|
107
|
-
this.
|
|
108
|
-
this.
|
|
106
|
+
this.#paths = createSVGPaths(options.path.data);
|
|
107
|
+
this.#size.height = path.size.height;
|
|
108
|
+
this.#size.width = path.size.width;
|
|
109
109
|
}
|
|
110
110
|
}
|
|
111
111
|
reset() {
|
package/browser/index.js
CHANGED
|
@@ -2,7 +2,7 @@ import { ensureBaseMoverLoaded } from "@tsparticles/plugin-move";
|
|
|
2
2
|
import { SVGPathGenerator } from "./SVGPathGenerator.js";
|
|
3
3
|
export const svgPathName = "svgPathGenerator";
|
|
4
4
|
export async function loadSVGPath(engine) {
|
|
5
|
-
engine.checkVersion("4.0
|
|
5
|
+
engine.checkVersion("4.1.0");
|
|
6
6
|
await engine.pluginManager.register((e) => {
|
|
7
7
|
ensureBaseMoverLoaded(e);
|
|
8
8
|
e.pluginManager.addPathGenerator?.(svgPathName, container => {
|
package/browser/index.lazy.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export const svgPathName = "svgPathGenerator";
|
|
2
2
|
export async function loadSVGPath(engine) {
|
|
3
|
-
engine.checkVersion("4.0
|
|
3
|
+
engine.checkVersion("4.1.0");
|
|
4
4
|
await engine.pluginManager.register(async (e) => {
|
|
5
5
|
const { ensureBaseMoverLoaded } = await import("@tsparticles/plugin-move/lazy");
|
|
6
6
|
ensureBaseMoverLoaded(e);
|
package/cjs/SVGPathGenerator.js
CHANGED
|
@@ -8,33 +8,33 @@ export var SVGPathDirection;
|
|
|
8
8
|
})(SVGPathDirection || (SVGPathDirection = {}));
|
|
9
9
|
const minStep = 0, minIndex = 0, minWidth = 0, minScale = 1;
|
|
10
10
|
export class SVGPathGenerator {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
11
|
+
#container;
|
|
12
|
+
#offset;
|
|
13
|
+
#paths;
|
|
14
|
+
#res;
|
|
15
|
+
#reverse;
|
|
16
|
+
#scale;
|
|
17
|
+
#size;
|
|
18
|
+
#width;
|
|
19
19
|
constructor(container) {
|
|
20
|
-
this
|
|
21
|
-
this
|
|
22
|
-
this
|
|
23
|
-
this
|
|
24
|
-
this
|
|
25
|
-
this
|
|
26
|
-
this
|
|
27
|
-
this
|
|
20
|
+
this.#container = container;
|
|
21
|
+
this.#paths = [];
|
|
22
|
+
this.#reverse = false;
|
|
23
|
+
this.#size = { width: 0, height: 0 };
|
|
24
|
+
this.#scale = 1;
|
|
25
|
+
this.#offset = { x: 0, y: 0, mode: PixelMode.percent };
|
|
26
|
+
this.#width = 0;
|
|
27
|
+
this.#res = Vector.origin;
|
|
28
28
|
}
|
|
29
29
|
generate(particle, delta) {
|
|
30
|
-
const container = this
|
|
30
|
+
const container = this.#container, pxRatio = container.retina.pixelRatio;
|
|
31
31
|
particle.svgDirection ??= getRandom() > half ? SVGPathDirection.normal : SVGPathDirection.reverse;
|
|
32
|
-
particle.svgPathIndex ??= Math.floor(getRandom() * this.
|
|
32
|
+
particle.svgPathIndex ??= Math.floor(getRandom() * this.#paths.length);
|
|
33
33
|
particle.svgSpeed ??= particle.velocity.mult(particle.retina.moveSpeed * half).length;
|
|
34
|
-
particle.svgStep ??= randomInRangeValue({ min: 0, max: this
|
|
34
|
+
particle.svgStep ??= randomInRangeValue({ min: 0, max: this.#paths[particle.svgPathIndex].length }) * pxRatio;
|
|
35
35
|
particle.svgOffset ??= {
|
|
36
|
-
width: randomInRangeValue({ min: -this
|
|
37
|
-
height: randomInRangeValue({ min: -this
|
|
36
|
+
width: randomInRangeValue({ min: -this.#width * half, max: this.#width * half }) * pxRatio,
|
|
37
|
+
height: randomInRangeValue({ min: -this.#width * half, max: this.#width * half }) * pxRatio,
|
|
38
38
|
};
|
|
39
39
|
particle.svgInitialPosition ??= particle.position.copy();
|
|
40
40
|
particle.velocity.x = 0;
|
|
@@ -45,13 +45,13 @@ export class SVGPathGenerator {
|
|
|
45
45
|
else {
|
|
46
46
|
particle.svgStep -= particle.svgSpeed * delta.factor;
|
|
47
47
|
}
|
|
48
|
-
let path = this
|
|
48
|
+
let path = this.#paths[particle.svgPathIndex];
|
|
49
49
|
const pathLength = path.length, indexOffset = 1;
|
|
50
50
|
if (particle.svgStep >= pathLength) {
|
|
51
51
|
particle.svgPathIndex = particle.svgPathIndex + indexOffset;
|
|
52
|
-
if (particle.svgPathIndex >= this.
|
|
53
|
-
if (this
|
|
54
|
-
particle.svgPathIndex = this.
|
|
52
|
+
if (particle.svgPathIndex >= this.#paths.length) {
|
|
53
|
+
if (this.#reverse) {
|
|
54
|
+
particle.svgPathIndex = this.#paths.length - indexOffset;
|
|
55
55
|
particle.svgDirection = SVGPathDirection.reverse;
|
|
56
56
|
}
|
|
57
57
|
else {
|
|
@@ -63,49 +63,49 @@ export class SVGPathGenerator {
|
|
|
63
63
|
else if (particle.svgStep <= minStep) {
|
|
64
64
|
particle.svgPathIndex = particle.svgPathIndex - indexOffset;
|
|
65
65
|
if (particle.svgPathIndex < minIndex) {
|
|
66
|
-
if (this
|
|
66
|
+
if (this.#reverse) {
|
|
67
67
|
particle.svgPathIndex = 0;
|
|
68
68
|
particle.svgDirection = SVGPathDirection.normal;
|
|
69
69
|
}
|
|
70
70
|
else {
|
|
71
|
-
particle.svgPathIndex = this.
|
|
72
|
-
path = this
|
|
71
|
+
particle.svgPathIndex = this.#paths.length - indexOffset;
|
|
72
|
+
path = this.#paths[particle.svgPathIndex];
|
|
73
73
|
particle.svgStep = path.length;
|
|
74
74
|
}
|
|
75
75
|
}
|
|
76
76
|
}
|
|
77
|
-
path = this
|
|
78
|
-
const pathElement = path.element, pos = pathElement.getPointAtLength(particle.svgStep), canvasSize = this.
|
|
77
|
+
path = this.#paths[particle.svgPathIndex];
|
|
78
|
+
const pathElement = path.element, pos = pathElement.getPointAtLength(particle.svgStep), canvasSize = this.#container.canvas.size, offset = getPosition(this.#offset, canvasSize), scale = this.#scale * pxRatio;
|
|
79
79
|
particle.position.x =
|
|
80
|
-
(pos.x - this.
|
|
80
|
+
(pos.x - this.#size.width * half) * scale + particle.svgInitialPosition.x + offset.x + particle.svgOffset.width;
|
|
81
81
|
particle.position.y =
|
|
82
|
-
(pos.y - this.
|
|
83
|
-
this.
|
|
84
|
-
this.
|
|
85
|
-
return this
|
|
82
|
+
(pos.y - this.#size.height * half) * scale + particle.svgInitialPosition.y + offset.y + particle.svgOffset.height;
|
|
83
|
+
this.#res.x = 0;
|
|
84
|
+
this.#res.y = 0;
|
|
85
|
+
return this.#res;
|
|
86
86
|
}
|
|
87
87
|
init() {
|
|
88
|
-
const options = this.
|
|
89
|
-
this
|
|
90
|
-
this
|
|
91
|
-
this.
|
|
92
|
-
this.
|
|
93
|
-
this.
|
|
94
|
-
this
|
|
88
|
+
const options = this.#container.actualOptions.particles.move.path.options, position = options.position ?? this.#offset;
|
|
89
|
+
this.#reverse = options.reverse ?? this.#reverse;
|
|
90
|
+
this.#scale = options.scale ?? minScale;
|
|
91
|
+
this.#offset.x = position.x;
|
|
92
|
+
this.#offset.y = position.y;
|
|
93
|
+
this.#offset.mode = position.mode;
|
|
94
|
+
this.#width = options.width ?? minWidth;
|
|
95
95
|
if (options.url && !options.path) {
|
|
96
96
|
const url = options.url;
|
|
97
97
|
void (async () => {
|
|
98
98
|
const response = await fetch(url), data = await response.text(), { paths, size } = loadSVGFromString(data);
|
|
99
|
-
this
|
|
100
|
-
this.
|
|
101
|
-
this.
|
|
99
|
+
this.#paths = paths;
|
|
100
|
+
this.#size.width = size.width;
|
|
101
|
+
this.#size.height = size.height;
|
|
102
102
|
})();
|
|
103
103
|
}
|
|
104
104
|
else if (options.path) {
|
|
105
105
|
const path = options.path;
|
|
106
|
-
this
|
|
107
|
-
this.
|
|
108
|
-
this.
|
|
106
|
+
this.#paths = createSVGPaths(options.path.data);
|
|
107
|
+
this.#size.height = path.size.height;
|
|
108
|
+
this.#size.width = path.size.width;
|
|
109
109
|
}
|
|
110
110
|
}
|
|
111
111
|
reset() {
|
package/cjs/index.js
CHANGED
|
@@ -2,7 +2,7 @@ import { ensureBaseMoverLoaded } from "@tsparticles/plugin-move";
|
|
|
2
2
|
import { SVGPathGenerator } from "./SVGPathGenerator.js";
|
|
3
3
|
export const svgPathName = "svgPathGenerator";
|
|
4
4
|
export async function loadSVGPath(engine) {
|
|
5
|
-
engine.checkVersion("4.0
|
|
5
|
+
engine.checkVersion("4.1.0");
|
|
6
6
|
await engine.pluginManager.register((e) => {
|
|
7
7
|
ensureBaseMoverLoaded(e);
|
|
8
8
|
e.pluginManager.addPathGenerator?.(svgPathName, container => {
|
package/cjs/index.lazy.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export const svgPathName = "svgPathGenerator";
|
|
2
2
|
export async function loadSVGPath(engine) {
|
|
3
|
-
engine.checkVersion("4.0
|
|
3
|
+
engine.checkVersion("4.1.0");
|
|
4
4
|
await engine.pluginManager.register(async (e) => {
|
|
5
5
|
const { ensureBaseMoverLoaded } = await import("@tsparticles/plugin-move/lazy");
|
|
6
6
|
ensureBaseMoverLoaded(e);
|
package/esm/SVGPathGenerator.js
CHANGED
|
@@ -8,33 +8,33 @@ export var SVGPathDirection;
|
|
|
8
8
|
})(SVGPathDirection || (SVGPathDirection = {}));
|
|
9
9
|
const minStep = 0, minIndex = 0, minWidth = 0, minScale = 1;
|
|
10
10
|
export class SVGPathGenerator {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
11
|
+
#container;
|
|
12
|
+
#offset;
|
|
13
|
+
#paths;
|
|
14
|
+
#res;
|
|
15
|
+
#reverse;
|
|
16
|
+
#scale;
|
|
17
|
+
#size;
|
|
18
|
+
#width;
|
|
19
19
|
constructor(container) {
|
|
20
|
-
this
|
|
21
|
-
this
|
|
22
|
-
this
|
|
23
|
-
this
|
|
24
|
-
this
|
|
25
|
-
this
|
|
26
|
-
this
|
|
27
|
-
this
|
|
20
|
+
this.#container = container;
|
|
21
|
+
this.#paths = [];
|
|
22
|
+
this.#reverse = false;
|
|
23
|
+
this.#size = { width: 0, height: 0 };
|
|
24
|
+
this.#scale = 1;
|
|
25
|
+
this.#offset = { x: 0, y: 0, mode: PixelMode.percent };
|
|
26
|
+
this.#width = 0;
|
|
27
|
+
this.#res = Vector.origin;
|
|
28
28
|
}
|
|
29
29
|
generate(particle, delta) {
|
|
30
|
-
const container = this
|
|
30
|
+
const container = this.#container, pxRatio = container.retina.pixelRatio;
|
|
31
31
|
particle.svgDirection ??= getRandom() > half ? SVGPathDirection.normal : SVGPathDirection.reverse;
|
|
32
|
-
particle.svgPathIndex ??= Math.floor(getRandom() * this.
|
|
32
|
+
particle.svgPathIndex ??= Math.floor(getRandom() * this.#paths.length);
|
|
33
33
|
particle.svgSpeed ??= particle.velocity.mult(particle.retina.moveSpeed * half).length;
|
|
34
|
-
particle.svgStep ??= randomInRangeValue({ min: 0, max: this
|
|
34
|
+
particle.svgStep ??= randomInRangeValue({ min: 0, max: this.#paths[particle.svgPathIndex].length }) * pxRatio;
|
|
35
35
|
particle.svgOffset ??= {
|
|
36
|
-
width: randomInRangeValue({ min: -this
|
|
37
|
-
height: randomInRangeValue({ min: -this
|
|
36
|
+
width: randomInRangeValue({ min: -this.#width * half, max: this.#width * half }) * pxRatio,
|
|
37
|
+
height: randomInRangeValue({ min: -this.#width * half, max: this.#width * half }) * pxRatio,
|
|
38
38
|
};
|
|
39
39
|
particle.svgInitialPosition ??= particle.position.copy();
|
|
40
40
|
particle.velocity.x = 0;
|
|
@@ -45,13 +45,13 @@ export class SVGPathGenerator {
|
|
|
45
45
|
else {
|
|
46
46
|
particle.svgStep -= particle.svgSpeed * delta.factor;
|
|
47
47
|
}
|
|
48
|
-
let path = this
|
|
48
|
+
let path = this.#paths[particle.svgPathIndex];
|
|
49
49
|
const pathLength = path.length, indexOffset = 1;
|
|
50
50
|
if (particle.svgStep >= pathLength) {
|
|
51
51
|
particle.svgPathIndex = particle.svgPathIndex + indexOffset;
|
|
52
|
-
if (particle.svgPathIndex >= this.
|
|
53
|
-
if (this
|
|
54
|
-
particle.svgPathIndex = this.
|
|
52
|
+
if (particle.svgPathIndex >= this.#paths.length) {
|
|
53
|
+
if (this.#reverse) {
|
|
54
|
+
particle.svgPathIndex = this.#paths.length - indexOffset;
|
|
55
55
|
particle.svgDirection = SVGPathDirection.reverse;
|
|
56
56
|
}
|
|
57
57
|
else {
|
|
@@ -63,49 +63,49 @@ export class SVGPathGenerator {
|
|
|
63
63
|
else if (particle.svgStep <= minStep) {
|
|
64
64
|
particle.svgPathIndex = particle.svgPathIndex - indexOffset;
|
|
65
65
|
if (particle.svgPathIndex < minIndex) {
|
|
66
|
-
if (this
|
|
66
|
+
if (this.#reverse) {
|
|
67
67
|
particle.svgPathIndex = 0;
|
|
68
68
|
particle.svgDirection = SVGPathDirection.normal;
|
|
69
69
|
}
|
|
70
70
|
else {
|
|
71
|
-
particle.svgPathIndex = this.
|
|
72
|
-
path = this
|
|
71
|
+
particle.svgPathIndex = this.#paths.length - indexOffset;
|
|
72
|
+
path = this.#paths[particle.svgPathIndex];
|
|
73
73
|
particle.svgStep = path.length;
|
|
74
74
|
}
|
|
75
75
|
}
|
|
76
76
|
}
|
|
77
|
-
path = this
|
|
78
|
-
const pathElement = path.element, pos = pathElement.getPointAtLength(particle.svgStep), canvasSize = this.
|
|
77
|
+
path = this.#paths[particle.svgPathIndex];
|
|
78
|
+
const pathElement = path.element, pos = pathElement.getPointAtLength(particle.svgStep), canvasSize = this.#container.canvas.size, offset = getPosition(this.#offset, canvasSize), scale = this.#scale * pxRatio;
|
|
79
79
|
particle.position.x =
|
|
80
|
-
(pos.x - this.
|
|
80
|
+
(pos.x - this.#size.width * half) * scale + particle.svgInitialPosition.x + offset.x + particle.svgOffset.width;
|
|
81
81
|
particle.position.y =
|
|
82
|
-
(pos.y - this.
|
|
83
|
-
this.
|
|
84
|
-
this.
|
|
85
|
-
return this
|
|
82
|
+
(pos.y - this.#size.height * half) * scale + particle.svgInitialPosition.y + offset.y + particle.svgOffset.height;
|
|
83
|
+
this.#res.x = 0;
|
|
84
|
+
this.#res.y = 0;
|
|
85
|
+
return this.#res;
|
|
86
86
|
}
|
|
87
87
|
init() {
|
|
88
|
-
const options = this.
|
|
89
|
-
this
|
|
90
|
-
this
|
|
91
|
-
this.
|
|
92
|
-
this.
|
|
93
|
-
this.
|
|
94
|
-
this
|
|
88
|
+
const options = this.#container.actualOptions.particles.move.path.options, position = options.position ?? this.#offset;
|
|
89
|
+
this.#reverse = options.reverse ?? this.#reverse;
|
|
90
|
+
this.#scale = options.scale ?? minScale;
|
|
91
|
+
this.#offset.x = position.x;
|
|
92
|
+
this.#offset.y = position.y;
|
|
93
|
+
this.#offset.mode = position.mode;
|
|
94
|
+
this.#width = options.width ?? minWidth;
|
|
95
95
|
if (options.url && !options.path) {
|
|
96
96
|
const url = options.url;
|
|
97
97
|
void (async () => {
|
|
98
98
|
const response = await fetch(url), data = await response.text(), { paths, size } = loadSVGFromString(data);
|
|
99
|
-
this
|
|
100
|
-
this.
|
|
101
|
-
this.
|
|
99
|
+
this.#paths = paths;
|
|
100
|
+
this.#size.width = size.width;
|
|
101
|
+
this.#size.height = size.height;
|
|
102
102
|
})();
|
|
103
103
|
}
|
|
104
104
|
else if (options.path) {
|
|
105
105
|
const path = options.path;
|
|
106
|
-
this
|
|
107
|
-
this.
|
|
108
|
-
this.
|
|
106
|
+
this.#paths = createSVGPaths(options.path.data);
|
|
107
|
+
this.#size.height = path.size.height;
|
|
108
|
+
this.#size.width = path.size.width;
|
|
109
109
|
}
|
|
110
110
|
}
|
|
111
111
|
reset() {
|
package/esm/index.js
CHANGED
|
@@ -2,7 +2,7 @@ import { ensureBaseMoverLoaded } from "@tsparticles/plugin-move";
|
|
|
2
2
|
import { SVGPathGenerator } from "./SVGPathGenerator.js";
|
|
3
3
|
export const svgPathName = "svgPathGenerator";
|
|
4
4
|
export async function loadSVGPath(engine) {
|
|
5
|
-
engine.checkVersion("4.0
|
|
5
|
+
engine.checkVersion("4.1.0");
|
|
6
6
|
await engine.pluginManager.register((e) => {
|
|
7
7
|
ensureBaseMoverLoaded(e);
|
|
8
8
|
e.pluginManager.addPathGenerator?.(svgPathName, container => {
|
package/esm/index.lazy.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export const svgPathName = "svgPathGenerator";
|
|
2
2
|
export async function loadSVGPath(engine) {
|
|
3
|
-
engine.checkVersion("4.0
|
|
3
|
+
engine.checkVersion("4.1.0");
|
|
4
4
|
await engine.pluginManager.register(async (e) => {
|
|
5
5
|
const { ensureBaseMoverLoaded } = await import("@tsparticles/plugin-move/lazy");
|
|
6
6
|
ensureBaseMoverLoaded(e);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tsparticles/path-svg",
|
|
3
|
-
"version": "4.0
|
|
3
|
+
"version": "4.1.0",
|
|
4
4
|
"description": "tsParticles svg path",
|
|
5
5
|
"homepage": "https://particles.js.org",
|
|
6
6
|
"repository": {
|
|
@@ -107,8 +107,8 @@
|
|
|
107
107
|
"./package.json": "./package.json"
|
|
108
108
|
},
|
|
109
109
|
"peerDependencies": {
|
|
110
|
-
"@tsparticles/engine": "4.0
|
|
111
|
-
"@tsparticles/plugin-move": "4.0
|
|
110
|
+
"@tsparticles/engine": "4.1.0",
|
|
111
|
+
"@tsparticles/plugin-move": "4.1.0"
|
|
112
112
|
},
|
|
113
113
|
"publishConfig": {
|
|
114
114
|
"access": "public"
|
package/tsparticles.path.svg.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
(function(g){g.__tsParticlesInternals=g.__tsParticlesInternals||{};g.__tsParticlesInternals.bundles=g.__tsParticlesInternals.bundles||{};g.__tsParticlesInternals.effects=g.__tsParticlesInternals.effects||{};g.__tsParticlesInternals.engine=g.__tsParticlesInternals.engine||{};g.__tsParticlesInternals.interactions=g.__tsParticlesInternals.interactions||{};g.__tsParticlesInternals.palettes=g.__tsParticlesInternals.palettes||{};g.__tsParticlesInternals.paths=g.__tsParticlesInternals.paths||{};g.__tsParticlesInternals.plugins=g.__tsParticlesInternals.plugins||{};g.__tsParticlesInternals.plugins=g.__tsParticlesInternals.plugins||{};g.__tsParticlesInternals.plugins.emittersShapes=g.__tsParticlesInternals.plugins.emittersShapes||{};g.__tsParticlesInternals.presets=g.__tsParticlesInternals.presets||{};g.__tsParticlesInternals.shapes=g.__tsParticlesInternals.shapes||{};g.__tsParticlesInternals.updaters=g.__tsParticlesInternals.updaters||{};g.__tsParticlesInternals.utils=g.__tsParticlesInternals.utils||{};g.__tsParticlesInternals.canvas=g.__tsParticlesInternals.canvas||{};g.__tsParticlesInternals.canvas=g.__tsParticlesInternals.canvas||{};g.__tsParticlesInternals.canvas.utils=g.__tsParticlesInternals.canvas.utils||{};g.__tsParticlesInternals.path=g.__tsParticlesInternals.path||{};g.__tsParticlesInternals.path=g.__tsParticlesInternals.path||{};g.__tsParticlesInternals.path.utils=g.__tsParticlesInternals.path.utils||{};var __tsProxyFactory=typeof Proxy!=="undefined"?function(obj){return new Proxy(obj,{get:function(target,key){if(!(key in target)){target[key]={};}return target[key];}});}:function(obj){return obj;};g.__tsParticlesInternals.bundles=__tsProxyFactory(g.__tsParticlesInternals.bundles);g.__tsParticlesInternals.effects=__tsProxyFactory(g.__tsParticlesInternals.effects);g.__tsParticlesInternals.interactions=__tsProxyFactory(g.__tsParticlesInternals.interactions);g.__tsParticlesInternals.palettes=__tsProxyFactory(g.__tsParticlesInternals.palettes);g.__tsParticlesInternals.paths=__tsProxyFactory(g.__tsParticlesInternals.paths);g.__tsParticlesInternals.plugins=__tsProxyFactory(g.__tsParticlesInternals.plugins);g.__tsParticlesInternals.plugins.emittersShapes=__tsProxyFactory(g.__tsParticlesInternals.plugins.emittersShapes);g.__tsParticlesInternals.presets=__tsProxyFactory(g.__tsParticlesInternals.presets);g.__tsParticlesInternals.shapes=__tsProxyFactory(g.__tsParticlesInternals.shapes);g.__tsParticlesInternals.updaters=__tsProxyFactory(g.__tsParticlesInternals.updaters);g.__tsParticlesInternals.utils=__tsProxyFactory(g.__tsParticlesInternals.utils);g.__tsParticlesInternals.canvas=__tsProxyFactory(g.__tsParticlesInternals.canvas);g.__tsParticlesInternals.path=__tsProxyFactory(g.__tsParticlesInternals.path);g.tsparticlesInternalExports=g.tsparticlesInternalExports||{};})(typeof globalThis!=="undefined"?globalThis:typeof window!=="undefined"?window:this);
|
|
2
|
-
/* Path v4.0
|
|
2
|
+
/* Path v4.1.0 */
|
|
3
3
|
(function (global, factory) {
|
|
4
4
|
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@tsparticles/plugin-move'), require('@tsparticles/engine')) :
|
|
5
5
|
typeof define === 'function' && define.amd ? define(['exports', '@tsparticles/plugin-move', '@tsparticles/engine'], factory) :
|
|
@@ -50,33 +50,33 @@
|
|
|
50
50
|
})(SVGPathDirection || (SVGPathDirection = {}));
|
|
51
51
|
const minStep = 0, minIndex = 0, minWidth = 0, minScale = 1;
|
|
52
52
|
class SVGPathGenerator {
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
53
|
+
#container;
|
|
54
|
+
#offset;
|
|
55
|
+
#paths;
|
|
56
|
+
#res;
|
|
57
|
+
#reverse;
|
|
58
|
+
#scale;
|
|
59
|
+
#size;
|
|
60
|
+
#width;
|
|
61
61
|
constructor(container) {
|
|
62
|
-
this
|
|
63
|
-
this
|
|
64
|
-
this
|
|
65
|
-
this
|
|
66
|
-
this
|
|
67
|
-
this
|
|
68
|
-
this
|
|
69
|
-
this
|
|
62
|
+
this.#container = container;
|
|
63
|
+
this.#paths = [];
|
|
64
|
+
this.#reverse = false;
|
|
65
|
+
this.#size = { width: 0, height: 0 };
|
|
66
|
+
this.#scale = 1;
|
|
67
|
+
this.#offset = { x: 0, y: 0, mode: engine.PixelMode.percent };
|
|
68
|
+
this.#width = 0;
|
|
69
|
+
this.#res = engine.Vector.origin;
|
|
70
70
|
}
|
|
71
71
|
generate(particle, delta) {
|
|
72
|
-
const container = this
|
|
72
|
+
const container = this.#container, pxRatio = container.retina.pixelRatio;
|
|
73
73
|
particle.svgDirection ??= engine.getRandom() > engine.half ? SVGPathDirection.normal : SVGPathDirection.reverse;
|
|
74
|
-
particle.svgPathIndex ??= Math.floor(engine.getRandom() * this.
|
|
74
|
+
particle.svgPathIndex ??= Math.floor(engine.getRandom() * this.#paths.length);
|
|
75
75
|
particle.svgSpeed ??= particle.velocity.mult(particle.retina.moveSpeed * engine.half).length;
|
|
76
|
-
particle.svgStep ??= engine.randomInRangeValue({ min: 0, max: this
|
|
76
|
+
particle.svgStep ??= engine.randomInRangeValue({ min: 0, max: this.#paths[particle.svgPathIndex].length }) * pxRatio;
|
|
77
77
|
particle.svgOffset ??= {
|
|
78
|
-
width: engine.randomInRangeValue({ min: -this
|
|
79
|
-
height: engine.randomInRangeValue({ min: -this
|
|
78
|
+
width: engine.randomInRangeValue({ min: -this.#width * engine.half, max: this.#width * engine.half }) * pxRatio,
|
|
79
|
+
height: engine.randomInRangeValue({ min: -this.#width * engine.half, max: this.#width * engine.half }) * pxRatio,
|
|
80
80
|
};
|
|
81
81
|
particle.svgInitialPosition ??= particle.position.copy();
|
|
82
82
|
particle.velocity.x = 0;
|
|
@@ -87,13 +87,13 @@
|
|
|
87
87
|
else {
|
|
88
88
|
particle.svgStep -= particle.svgSpeed * delta.factor;
|
|
89
89
|
}
|
|
90
|
-
let path = this
|
|
90
|
+
let path = this.#paths[particle.svgPathIndex];
|
|
91
91
|
const pathLength = path.length, indexOffset = 1;
|
|
92
92
|
if (particle.svgStep >= pathLength) {
|
|
93
93
|
particle.svgPathIndex = particle.svgPathIndex + indexOffset;
|
|
94
|
-
if (particle.svgPathIndex >= this.
|
|
95
|
-
if (this
|
|
96
|
-
particle.svgPathIndex = this.
|
|
94
|
+
if (particle.svgPathIndex >= this.#paths.length) {
|
|
95
|
+
if (this.#reverse) {
|
|
96
|
+
particle.svgPathIndex = this.#paths.length - indexOffset;
|
|
97
97
|
particle.svgDirection = SVGPathDirection.reverse;
|
|
98
98
|
}
|
|
99
99
|
else {
|
|
@@ -105,49 +105,49 @@
|
|
|
105
105
|
else if (particle.svgStep <= minStep) {
|
|
106
106
|
particle.svgPathIndex = particle.svgPathIndex - indexOffset;
|
|
107
107
|
if (particle.svgPathIndex < minIndex) {
|
|
108
|
-
if (this
|
|
108
|
+
if (this.#reverse) {
|
|
109
109
|
particle.svgPathIndex = 0;
|
|
110
110
|
particle.svgDirection = SVGPathDirection.normal;
|
|
111
111
|
}
|
|
112
112
|
else {
|
|
113
|
-
particle.svgPathIndex = this.
|
|
114
|
-
path = this
|
|
113
|
+
particle.svgPathIndex = this.#paths.length - indexOffset;
|
|
114
|
+
path = this.#paths[particle.svgPathIndex];
|
|
115
115
|
particle.svgStep = path.length;
|
|
116
116
|
}
|
|
117
117
|
}
|
|
118
118
|
}
|
|
119
|
-
path = this
|
|
120
|
-
const pathElement = path.element, pos = pathElement.getPointAtLength(particle.svgStep), canvasSize = this.
|
|
119
|
+
path = this.#paths[particle.svgPathIndex];
|
|
120
|
+
const pathElement = path.element, pos = pathElement.getPointAtLength(particle.svgStep), canvasSize = this.#container.canvas.size, offset = engine.getPosition(this.#offset, canvasSize), scale = this.#scale * pxRatio;
|
|
121
121
|
particle.position.x =
|
|
122
|
-
(pos.x - this.
|
|
122
|
+
(pos.x - this.#size.width * engine.half) * scale + particle.svgInitialPosition.x + offset.x + particle.svgOffset.width;
|
|
123
123
|
particle.position.y =
|
|
124
|
-
(pos.y - this.
|
|
125
|
-
this.
|
|
126
|
-
this.
|
|
127
|
-
return this
|
|
124
|
+
(pos.y - this.#size.height * engine.half) * scale + particle.svgInitialPosition.y + offset.y + particle.svgOffset.height;
|
|
125
|
+
this.#res.x = 0;
|
|
126
|
+
this.#res.y = 0;
|
|
127
|
+
return this.#res;
|
|
128
128
|
}
|
|
129
129
|
init() {
|
|
130
|
-
const options = this.
|
|
131
|
-
this
|
|
132
|
-
this
|
|
133
|
-
this.
|
|
134
|
-
this.
|
|
135
|
-
this.
|
|
136
|
-
this
|
|
130
|
+
const options = this.#container.actualOptions.particles.move.path.options, position = options.position ?? this.#offset;
|
|
131
|
+
this.#reverse = options.reverse ?? this.#reverse;
|
|
132
|
+
this.#scale = options.scale ?? minScale;
|
|
133
|
+
this.#offset.x = position.x;
|
|
134
|
+
this.#offset.y = position.y;
|
|
135
|
+
this.#offset.mode = position.mode;
|
|
136
|
+
this.#width = options.width ?? minWidth;
|
|
137
137
|
if (options.url && !options.path) {
|
|
138
138
|
const url = options.url;
|
|
139
139
|
void (async () => {
|
|
140
140
|
const response = await fetch(url), data = await response.text(), { paths, size } = loadSVGFromString(data);
|
|
141
|
-
this
|
|
142
|
-
this.
|
|
143
|
-
this.
|
|
141
|
+
this.#paths = paths;
|
|
142
|
+
this.#size.width = size.width;
|
|
143
|
+
this.#size.height = size.height;
|
|
144
144
|
})();
|
|
145
145
|
}
|
|
146
146
|
else if (options.path) {
|
|
147
147
|
const path = options.path;
|
|
148
|
-
this
|
|
149
|
-
this.
|
|
150
|
-
this.
|
|
148
|
+
this.#paths = createSVGPaths(options.path.data);
|
|
149
|
+
this.#size.height = path.size.height;
|
|
150
|
+
this.#size.width = path.size.width;
|
|
151
151
|
}
|
|
152
152
|
}
|
|
153
153
|
reset() {
|
|
@@ -158,7 +158,7 @@
|
|
|
158
158
|
|
|
159
159
|
const svgPathName = "svgPathGenerator";
|
|
160
160
|
async function loadSVGPath(engine) {
|
|
161
|
-
engine.checkVersion("4.0
|
|
161
|
+
engine.checkVersion("4.1.0");
|
|
162
162
|
await engine.pluginManager.register((e) => {
|
|
163
163
|
pluginMove.ensureBaseMoverLoaded(e);
|
|
164
164
|
e.pluginManager.addPathGenerator?.(svgPathName, container => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(t){t.__tsParticlesInternals=t.__tsParticlesInternals||{},t.__tsParticlesInternals.bundles=t.__tsParticlesInternals.bundles||{},t.__tsParticlesInternals.effects=t.__tsParticlesInternals.effects||{},t.__tsParticlesInternals.engine=t.__tsParticlesInternals.engine||{},t.__tsParticlesInternals.interactions=t.__tsParticlesInternals.interactions||{},t.__tsParticlesInternals.palettes=t.__tsParticlesInternals.palettes||{},t.__tsParticlesInternals.paths=t.__tsParticlesInternals.paths||{},t.__tsParticlesInternals.plugins=t.__tsParticlesInternals.plugins||{},t.__tsParticlesInternals.plugins=t.__tsParticlesInternals.plugins||{},t.__tsParticlesInternals.plugins.emittersShapes=t.__tsParticlesInternals.plugins.emittersShapes||{},t.__tsParticlesInternals.presets=t.__tsParticlesInternals.presets||{},t.__tsParticlesInternals.shapes=t.__tsParticlesInternals.shapes||{},t.__tsParticlesInternals.updaters=t.__tsParticlesInternals.updaters||{},t.__tsParticlesInternals.utils=t.__tsParticlesInternals.utils||{},t.__tsParticlesInternals.canvas=t.__tsParticlesInternals.canvas||{},t.__tsParticlesInternals.canvas=t.__tsParticlesInternals.canvas||{},t.__tsParticlesInternals.canvas.utils=t.__tsParticlesInternals.canvas.utils||{},t.__tsParticlesInternals.path=t.__tsParticlesInternals.path||{},t.__tsParticlesInternals.path=t.__tsParticlesInternals.path||{},t.__tsParticlesInternals.path.utils=t.__tsParticlesInternals.path.utils||{};var s="undefined"!=typeof Proxy?function(t){return new Proxy(t,{get:function(t,s){return s in t||(t[s]={}),t[s]}})}:function(t){return t};t.__tsParticlesInternals.bundles=s(t.__tsParticlesInternals.bundles),t.__tsParticlesInternals.effects=s(t.__tsParticlesInternals.effects),t.__tsParticlesInternals.interactions=s(t.__tsParticlesInternals.interactions),t.__tsParticlesInternals.palettes=s(t.__tsParticlesInternals.palettes),t.__tsParticlesInternals.paths=s(t.__tsParticlesInternals.paths),t.__tsParticlesInternals.plugins=s(t.__tsParticlesInternals.plugins),t.__tsParticlesInternals.plugins.emittersShapes=s(t.__tsParticlesInternals.plugins.emittersShapes),t.__tsParticlesInternals.presets=s(t.__tsParticlesInternals.presets),t.__tsParticlesInternals.shapes=s(t.__tsParticlesInternals.shapes),t.__tsParticlesInternals.updaters=s(t.__tsParticlesInternals.updaters),t.__tsParticlesInternals.utils=s(t.__tsParticlesInternals.utils),t.__tsParticlesInternals.canvas=s(t.__tsParticlesInternals.canvas),t.__tsParticlesInternals.path=s(t.__tsParticlesInternals.path),t.tsparticlesInternalExports=t.tsparticlesInternalExports||{}}("undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:this),function(t,s){"object"==typeof exports&&"undefined"!=typeof module?s(exports,require("@tsparticles/plugin-move"),require("@tsparticles/engine")):"function"==typeof define&&define.amd?define(["exports","@tsparticles/plugin-move","@tsparticles/engine"],s):s(((t="undefined"!=typeof globalThis?globalThis:t||self).__tsParticlesInternals=t.__tsParticlesInternals||{},t.__tsParticlesInternals.paths=t.__tsParticlesInternals.paths||{},t.__tsParticlesInternals.paths.svg=t.__tsParticlesInternals.paths.svg||{}),t.__tsParticlesInternals.plugins.move,t.__tsParticlesInternals.engine)}(this,function(t,s,e){"use strict";var n;!function(t){t[t.normal=0]="normal",t[t.reverse=1]="reverse"}(n||(n={}));class a{
|
|
1
|
+
!function(t){t.__tsParticlesInternals=t.__tsParticlesInternals||{},t.__tsParticlesInternals.bundles=t.__tsParticlesInternals.bundles||{},t.__tsParticlesInternals.effects=t.__tsParticlesInternals.effects||{},t.__tsParticlesInternals.engine=t.__tsParticlesInternals.engine||{},t.__tsParticlesInternals.interactions=t.__tsParticlesInternals.interactions||{},t.__tsParticlesInternals.palettes=t.__tsParticlesInternals.palettes||{},t.__tsParticlesInternals.paths=t.__tsParticlesInternals.paths||{},t.__tsParticlesInternals.plugins=t.__tsParticlesInternals.plugins||{},t.__tsParticlesInternals.plugins=t.__tsParticlesInternals.plugins||{},t.__tsParticlesInternals.plugins.emittersShapes=t.__tsParticlesInternals.plugins.emittersShapes||{},t.__tsParticlesInternals.presets=t.__tsParticlesInternals.presets||{},t.__tsParticlesInternals.shapes=t.__tsParticlesInternals.shapes||{},t.__tsParticlesInternals.updaters=t.__tsParticlesInternals.updaters||{},t.__tsParticlesInternals.utils=t.__tsParticlesInternals.utils||{},t.__tsParticlesInternals.canvas=t.__tsParticlesInternals.canvas||{},t.__tsParticlesInternals.canvas=t.__tsParticlesInternals.canvas||{},t.__tsParticlesInternals.canvas.utils=t.__tsParticlesInternals.canvas.utils||{},t.__tsParticlesInternals.path=t.__tsParticlesInternals.path||{},t.__tsParticlesInternals.path=t.__tsParticlesInternals.path||{},t.__tsParticlesInternals.path.utils=t.__tsParticlesInternals.path.utils||{};var s="undefined"!=typeof Proxy?function(t){return new Proxy(t,{get:function(t,s){return s in t||(t[s]={}),t[s]}})}:function(t){return t};t.__tsParticlesInternals.bundles=s(t.__tsParticlesInternals.bundles),t.__tsParticlesInternals.effects=s(t.__tsParticlesInternals.effects),t.__tsParticlesInternals.interactions=s(t.__tsParticlesInternals.interactions),t.__tsParticlesInternals.palettes=s(t.__tsParticlesInternals.palettes),t.__tsParticlesInternals.paths=s(t.__tsParticlesInternals.paths),t.__tsParticlesInternals.plugins=s(t.__tsParticlesInternals.plugins),t.__tsParticlesInternals.plugins.emittersShapes=s(t.__tsParticlesInternals.plugins.emittersShapes),t.__tsParticlesInternals.presets=s(t.__tsParticlesInternals.presets),t.__tsParticlesInternals.shapes=s(t.__tsParticlesInternals.shapes),t.__tsParticlesInternals.updaters=s(t.__tsParticlesInternals.updaters),t.__tsParticlesInternals.utils=s(t.__tsParticlesInternals.utils),t.__tsParticlesInternals.canvas=s(t.__tsParticlesInternals.canvas),t.__tsParticlesInternals.path=s(t.__tsParticlesInternals.path),t.tsparticlesInternalExports=t.tsparticlesInternalExports||{}}("undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:this),function(t,s){"object"==typeof exports&&"undefined"!=typeof module?s(exports,require("@tsparticles/plugin-move"),require("@tsparticles/engine")):"function"==typeof define&&define.amd?define(["exports","@tsparticles/plugin-move","@tsparticles/engine"],s):s(((t="undefined"!=typeof globalThis?globalThis:t||self).__tsParticlesInternals=t.__tsParticlesInternals||{},t.__tsParticlesInternals.paths=t.__tsParticlesInternals.paths||{},t.__tsParticlesInternals.paths.svg=t.__tsParticlesInternals.paths.svg||{}),t.__tsParticlesInternals.plugins.move,t.__tsParticlesInternals.engine)}(this,function(t,s,e){"use strict";var n;!function(t){t[t.normal=0]="normal",t[t.reverse=1]="reverse"}(n||(n={}));class a{#t;#s;#e;#n;#a;#i;#r;#l;constructor(t){this.#t=t,this.#e=[],this.#a=!1,this.#r={width:0,height:0},this.#i=1,this.#s={x:0,y:0,mode:e.PixelMode.percent},this.#l=0,this.#n=e.Vector.origin}generate(t,s){const a=this.#t.retina.pixelRatio;t.svgDirection??=e.getRandom()>e.half?n.normal:n.reverse,t.svgPathIndex??=Math.floor(e.getRandom()*this.#e.length),t.svgSpeed??=t.velocity.mult(t.retina.moveSpeed*e.half).length,t.svgStep??=e.randomInRangeValue({min:0,max:this.#e[t.svgPathIndex].length})*a,t.svgOffset??={width:e.randomInRangeValue({min:-this.#l*e.half,max:this.#l*e.half})*a,height:e.randomInRangeValue({min:-this.#l*e.half,max:this.#l*e.half})*a},t.svgInitialPosition??=t.position.copy(),t.velocity.x=0,t.velocity.y=0,t.svgDirection===n.normal?t.svgStep+=t.svgSpeed*s.factor:t.svgStep-=t.svgSpeed*s.factor;let i=this.#e[t.svgPathIndex];const r=i.length;t.svgStep>=r?(t.svgPathIndex=t.svgPathIndex+1,t.svgPathIndex>=this.#e.length&&(this.#a?(t.svgPathIndex=this.#e.length-1,t.svgDirection=n.reverse):(t.svgPathIndex=0,t.svgStep=0))):t.svgStep<=0&&(t.svgPathIndex=t.svgPathIndex-1,t.svgPathIndex<0&&(this.#a?(t.svgPathIndex=0,t.svgDirection=n.normal):(t.svgPathIndex=this.#e.length-1,i=this.#e[t.svgPathIndex],t.svgStep=i.length))),i=this.#e[t.svgPathIndex];const l=i.element.getPointAtLength(t.svgStep),h=this.#t.canvas.size,c=e.getPosition(this.#s,h),_=this.#i*a;return t.position.x=(l.x-this.#r.width*e.half)*_+t.svgInitialPosition.x+c.x+t.svgOffset.width,t.position.y=(l.y-this.#r.height*e.half)*_+t.svgInitialPosition.y+c.y+t.svgOffset.height,this.#n.x=0,this.#n.y=0,this.#n}init(){const t=this.#t.actualOptions.particles.move.path.options,s=t.position??this.#s;if(this.#a=t.reverse??this.#a,this.#i=t.scale??1,this.#s.x=s.x,this.#s.y=s.y,this.#s.mode=s.mode,this.#l=t.width??0,t.url&&!t.path){const s=t.url;(async()=>{const t=await fetch(s),e=await t.text(),{paths:n,size:a}=function(t){const s=(new DOMParser).parseFromString(t,"image/svg+xml").querySelector("svg");if(!s)return{paths:[],size:{width:0,height:0}};const e=s.querySelectorAll("path"),n=[];for(const t of e)t instanceof SVGPathElement&&n.push({element:t,length:t.getTotalLength()});return{paths:n,size:{width:Number.parseFloat(s.getAttribute("width")??"0"),height:Number.parseFloat(s.getAttribute("height")??"0")}}}(e);this.#e=n,this.#r.width=a.width,this.#r.height=a.height})()}else if(t.path){const s=t.path;this.#e=function(t){const s=e.safeDocument();return t.map(t=>{const e=s.createElementNS("http://www.w3.org/2000/svg","path");return e.setAttribute("d",t),{element:e,length:e.getTotalLength()}})}(t.path.data),this.#r.height=s.size.height,this.#r.width=s.size.width}}reset(){}update(){}}const i="svgPathGenerator";async function r(t){t.checkVersion("4.1.0"),await t.pluginManager.register(t=>{s.ensureBaseMoverLoaded(t),t.pluginManager.addPathGenerator?.(i,t=>Promise.resolve(new a(t)))})}const l=globalThis;l.__tsParticlesInternals=l.__tsParticlesInternals??{},l.loadSVGPath=r,t.loadSVGPath=r,t.svgPathName=i}),Object.assign(globalThis.window||globalThis,{loadSVGPath:(globalThis.__tsParticlesInternals.paths.svg||{}).loadSVGPath}),delete(globalThis.window||globalThis).tsparticlesInternalExports;
|
|
@@ -13,14 +13,7 @@ export type SVGPathParticle = Particle & {
|
|
|
13
13
|
svgStep?: number;
|
|
14
14
|
};
|
|
15
15
|
export declare class SVGPathGenerator implements IMovePathGenerator {
|
|
16
|
-
private
|
|
17
|
-
private readonly _offset;
|
|
18
|
-
private _paths;
|
|
19
|
-
private readonly _res;
|
|
20
|
-
private _reverse;
|
|
21
|
-
private _scale;
|
|
22
|
-
private readonly _size;
|
|
23
|
-
private _width;
|
|
16
|
+
#private;
|
|
24
17
|
constructor(container: Container);
|
|
25
18
|
generate(particle: SVGPathParticle, delta: IDelta): Vector;
|
|
26
19
|
init(): void;
|