@tsparticles/interaction-particles-links 4.0.5 → 4.1.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/browser/CircleWarp.js +4 -4
- package/browser/LinkInstance.js +31 -31
- package/browser/Linker.js +12 -12
- package/browser/LinksPlugin.js +3 -3
- package/browser/index.js +1 -1
- package/browser/index.lazy.js +1 -1
- package/cjs/CircleWarp.js +4 -4
- package/cjs/LinkInstance.js +31 -31
- package/cjs/Linker.js +12 -12
- package/cjs/LinksPlugin.js +3 -3
- package/cjs/index.js +1 -1
- package/cjs/index.lazy.js +1 -1
- package/esm/CircleWarp.js +4 -4
- package/esm/LinkInstance.js +31 -31
- package/esm/Linker.js +12 -12
- package/esm/LinksPlugin.js +3 -3
- package/esm/index.js +1 -1
- package/esm/index.lazy.js +1 -1
- package/package.json +4 -4
- package/report.html +1 -1
- package/tsparticles.interaction.particles.links.js +52 -52
- package/tsparticles.interaction.particles.links.min.js +1 -1
- package/types/CircleWarp.d.ts +1 -1
- package/types/LinkInstance.d.ts +1 -8
- package/types/Linker.d.ts +1 -4
- package/types/LinksPlugin.d.ts +1 -1
package/esm/LinkInstance.js
CHANGED
|
@@ -2,14 +2,14 @@ import { getLinkColor as engineGetLinkColor, getRandom, getRangeValue, getStyleF
|
|
|
2
2
|
import { setLinkFrequency } from "./Utils.js";
|
|
3
3
|
const minOpacity = 0, minWidth = 0, minDistance = 0, maxFrequency = 1, defaultFrequency = 0;
|
|
4
4
|
export class LinkInstance {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
#colorCache = new Map();
|
|
6
|
+
#container;
|
|
7
|
+
#freqs;
|
|
8
|
+
#pluginManager;
|
|
9
9
|
constructor(pluginManager, container) {
|
|
10
|
-
this
|
|
11
|
-
this
|
|
12
|
-
this
|
|
10
|
+
this.#pluginManager = pluginManager;
|
|
11
|
+
this.#container = container;
|
|
12
|
+
this.#freqs = { links: new Map(), triangles: new Map() };
|
|
13
13
|
}
|
|
14
14
|
drawParticle(context, particle) {
|
|
15
15
|
const { links, options } = particle;
|
|
@@ -26,13 +26,13 @@ export class LinkInstance {
|
|
|
26
26
|
};
|
|
27
27
|
for (const link of links) {
|
|
28
28
|
if (linkOpts.frequency < maxFrequency &&
|
|
29
|
-
this
|
|
29
|
+
this.#getLinkFrequency(particle, link.destination) > linkOpts.frequency) {
|
|
30
30
|
continue;
|
|
31
31
|
}
|
|
32
32
|
const pos2 = link.destination.getPosition();
|
|
33
33
|
if (trianglesEnabled && !link.isWarped && p1Destinations) {
|
|
34
34
|
flushLines();
|
|
35
|
-
this
|
|
35
|
+
this.#drawTriangles(options, particle, link, p1Destinations, pos1, pos2, context);
|
|
36
36
|
}
|
|
37
37
|
if (link.opacity <= minOpacity || width <= minWidth) {
|
|
38
38
|
continue;
|
|
@@ -42,7 +42,7 @@ export class LinkInstance {
|
|
|
42
42
|
}
|
|
43
43
|
let opacity = link.opacity, colorLine = link.color;
|
|
44
44
|
const twinkleRgb = twinkle?.enable && getRandom() < twinkle.frequency
|
|
45
|
-
? rangeColorToRgb(this
|
|
45
|
+
? rangeColorToRgb(this.#pluginManager, twinkle.color)
|
|
46
46
|
: undefined;
|
|
47
47
|
if (twinkle && twinkleRgb) {
|
|
48
48
|
colorLine = twinkleRgb;
|
|
@@ -50,14 +50,14 @@ export class LinkInstance {
|
|
|
50
50
|
}
|
|
51
51
|
if (!colorLine) {
|
|
52
52
|
const linkColor = linkOpts.id !== undefined
|
|
53
|
-
? this.
|
|
54
|
-
: this.
|
|
53
|
+
? this.#container.particles.linksColors.get(linkOpts.id)
|
|
54
|
+
: this.#container.particles.linksColor;
|
|
55
55
|
colorLine = engineGetLinkColor(particle, link.destination, linkColor);
|
|
56
56
|
}
|
|
57
57
|
if (!colorLine) {
|
|
58
58
|
continue;
|
|
59
59
|
}
|
|
60
|
-
const colorStyle = this
|
|
60
|
+
const colorStyle = this.#getCachedStyle(colorLine);
|
|
61
61
|
if (colorStyle !== currentColorStyle || width !== currentWidth || opacity !== currentAlpha) {
|
|
62
62
|
flushLines();
|
|
63
63
|
context.strokeStyle = colorStyle;
|
|
@@ -70,7 +70,7 @@ export class LinkInstance {
|
|
|
70
70
|
pathOpen = true;
|
|
71
71
|
}
|
|
72
72
|
if (link.isWarped) {
|
|
73
|
-
const canvasSize = this.
|
|
73
|
+
const canvasSize = this.#container.canvas.size, dx = pos2.x - pos1.x, dy = pos2.y - pos1.y;
|
|
74
74
|
let sx = originPoint.x, sy = originPoint.y;
|
|
75
75
|
if (Math.abs(dx) > canvasSize.width * half) {
|
|
76
76
|
sx = dx > minDistance ? -canvasSize.width : canvasSize.width;
|
|
@@ -92,9 +92,9 @@ export class LinkInstance {
|
|
|
92
92
|
context.globalAlpha = originalAlpha;
|
|
93
93
|
}
|
|
94
94
|
init() {
|
|
95
|
-
this.
|
|
96
|
-
this.
|
|
97
|
-
this.
|
|
95
|
+
this.#freqs.links.clear();
|
|
96
|
+
this.#freqs.triangles.clear();
|
|
97
|
+
this.#colorCache.clear();
|
|
98
98
|
return Promise.resolve();
|
|
99
99
|
}
|
|
100
100
|
particleCreated(particle) {
|
|
@@ -104,14 +104,14 @@ export class LinkInstance {
|
|
|
104
104
|
}
|
|
105
105
|
particle.linksDistance = particle.options.links.distance;
|
|
106
106
|
particle.linksWidth = particle.options.links.width;
|
|
107
|
-
const ratio = this.
|
|
107
|
+
const ratio = this.#container.retina.pixelRatio;
|
|
108
108
|
particle.retina.linksDistance = particle.linksDistance * ratio;
|
|
109
109
|
particle.retina.linksWidth = particle.linksWidth * ratio;
|
|
110
110
|
}
|
|
111
111
|
particleDestroyed(particle) {
|
|
112
112
|
particle.links = [];
|
|
113
113
|
}
|
|
114
|
-
|
|
114
|
+
#drawTriangles(options, p1, link, p1Destinations, pos1, pos2, context) {
|
|
115
115
|
const p2 = link.destination, triangleOptions = options.links?.triangles;
|
|
116
116
|
if (!triangleOptions?.enable || !p2.options.links?.triangles.enable) {
|
|
117
117
|
return;
|
|
@@ -122,21 +122,21 @@ export class LinkInstance {
|
|
|
122
122
|
}
|
|
123
123
|
for (const vertex of p2Links) {
|
|
124
124
|
if (vertex.isWarped ||
|
|
125
|
-
this
|
|
125
|
+
this.#getLinkFrequency(p2, vertex.destination) > p2.options.links.frequency ||
|
|
126
126
|
!p1Destinations.has(vertex.destination.id)) {
|
|
127
127
|
continue;
|
|
128
128
|
}
|
|
129
129
|
const p3 = vertex.destination;
|
|
130
|
-
if (this
|
|
130
|
+
if (this.#getTriangleFrequency(p1, p2, p3) > (options.links?.triangles.frequency ?? defaultFrequency)) {
|
|
131
131
|
continue;
|
|
132
132
|
}
|
|
133
|
-
const opacityTriangle = triangleOptions.opacity ?? (link.opacity + vertex.opacity) * half, colorTriangle = rangeColorToRgb(this
|
|
133
|
+
const opacityTriangle = triangleOptions.opacity ?? (link.opacity + vertex.opacity) * half, colorTriangle = rangeColorToRgb(this.#pluginManager, triangleOptions.color) ?? link.color;
|
|
134
134
|
if (!colorTriangle || opacityTriangle <= minOpacity) {
|
|
135
135
|
continue;
|
|
136
136
|
}
|
|
137
137
|
const pos3 = p3.getPosition();
|
|
138
138
|
context.save();
|
|
139
|
-
context.fillStyle = this
|
|
139
|
+
context.fillStyle = this.#getCachedStyle(colorTriangle);
|
|
140
140
|
context.globalAlpha = opacityTriangle;
|
|
141
141
|
context.beginPath();
|
|
142
142
|
context.moveTo(pos1.x, pos1.y);
|
|
@@ -147,19 +147,19 @@ export class LinkInstance {
|
|
|
147
147
|
context.restore();
|
|
148
148
|
}
|
|
149
149
|
}
|
|
150
|
-
|
|
150
|
+
#getCachedStyle(rgb) {
|
|
151
151
|
const key = `${rgb.r},${rgb.g},${rgb.b}`;
|
|
152
|
-
let style = this.
|
|
152
|
+
let style = this.#colorCache.get(key);
|
|
153
153
|
if (!style) {
|
|
154
|
-
style = getStyleFromRgb(rgb, this.
|
|
155
|
-
this.
|
|
154
|
+
style = getStyleFromRgb(rgb, this.#container.hdr);
|
|
155
|
+
this.#colorCache.set(key, style);
|
|
156
156
|
}
|
|
157
157
|
return style;
|
|
158
158
|
}
|
|
159
|
-
|
|
160
|
-
return setLinkFrequency([p1, p2], this.
|
|
159
|
+
#getLinkFrequency(p1, p2) {
|
|
160
|
+
return setLinkFrequency([p1, p2], this.#freqs.links);
|
|
161
161
|
}
|
|
162
|
-
|
|
163
|
-
return setLinkFrequency([p1, p2, p3], this.
|
|
162
|
+
#getTriangleFrequency(p1, p2, p3) {
|
|
163
|
+
return setLinkFrequency([p1, p2, p3], this.#freqs.triangles);
|
|
164
164
|
}
|
|
165
165
|
}
|
package/esm/Linker.js
CHANGED
|
@@ -11,15 +11,15 @@ function getWarpDistance(pos1, pos2, canvasSize) {
|
|
|
11
11
|
return Math.hypot(warpDistances.x, warpDistances.y);
|
|
12
12
|
}
|
|
13
13
|
export class Linker extends ParticlesInteractorBase {
|
|
14
|
-
|
|
15
|
-
|
|
14
|
+
#maxDistance;
|
|
15
|
+
#pluginManager;
|
|
16
16
|
constructor(pluginManager, container) {
|
|
17
17
|
super(container);
|
|
18
|
-
this
|
|
19
|
-
this
|
|
18
|
+
this.#pluginManager = pluginManager;
|
|
19
|
+
this.#maxDistance = 0;
|
|
20
20
|
}
|
|
21
21
|
get maxDistance() {
|
|
22
|
-
return this
|
|
22
|
+
return this.#maxDistance;
|
|
23
23
|
}
|
|
24
24
|
clear() {
|
|
25
25
|
}
|
|
@@ -32,8 +32,8 @@ export class Linker extends ParticlesInteractorBase {
|
|
|
32
32
|
return;
|
|
33
33
|
}
|
|
34
34
|
p1.links = [];
|
|
35
|
-
if (p1.linksDistance && p1.linksDistance > this
|
|
36
|
-
this
|
|
35
|
+
if (p1.linksDistance && p1.linksDistance > this.#maxDistance) {
|
|
36
|
+
this.#maxDistance = p1.linksDistance;
|
|
37
37
|
}
|
|
38
38
|
const pos1 = p1.getPosition(), container = this.container, canvasSize = container.canvas.size;
|
|
39
39
|
if (pos1.x < originPoint.x || pos1.y < originPoint.y || pos1.x > canvasSize.width || pos1.y > canvasSize.height) {
|
|
@@ -61,11 +61,11 @@ export class Linker extends ParticlesInteractorBase {
|
|
|
61
61
|
continue;
|
|
62
62
|
}
|
|
63
63
|
const opacityLine = (opacityOffset - distance / optDistance) * optOpacity;
|
|
64
|
-
this
|
|
64
|
+
this.#setColor(p1);
|
|
65
65
|
p1.links.push({
|
|
66
66
|
destination: p2,
|
|
67
67
|
opacity: opacityLine,
|
|
68
|
-
color: this
|
|
68
|
+
color: this.#getLinkColor(p1, p2),
|
|
69
69
|
isWarped: distWarp < distDirect,
|
|
70
70
|
});
|
|
71
71
|
}
|
|
@@ -81,7 +81,7 @@ export class Linker extends ParticlesInteractorBase {
|
|
|
81
81
|
}
|
|
82
82
|
reset() {
|
|
83
83
|
}
|
|
84
|
-
|
|
84
|
+
#getLinkColor(p1, p2) {
|
|
85
85
|
const container = this.container, linksOptions = p1.options.links;
|
|
86
86
|
if (!linksOptions) {
|
|
87
87
|
return;
|
|
@@ -91,7 +91,7 @@ export class Linker extends ParticlesInteractorBase {
|
|
|
91
91
|
: container.particles.linksColor;
|
|
92
92
|
return getLinkColor(p1, p2, linkColor);
|
|
93
93
|
}
|
|
94
|
-
|
|
94
|
+
#setColor(p1) {
|
|
95
95
|
if (!p1.options.links) {
|
|
96
96
|
return;
|
|
97
97
|
}
|
|
@@ -102,7 +102,7 @@ export class Linker extends ParticlesInteractorBase {
|
|
|
102
102
|
if (linkColor) {
|
|
103
103
|
return;
|
|
104
104
|
}
|
|
105
|
-
linkColor = getLinkRandomColor(this
|
|
105
|
+
linkColor = getLinkRandomColor(this.#pluginManager, linksOptions.color, linksOptions.blink, linksOptions.consent);
|
|
106
106
|
if (linksOptions.id === undefined) {
|
|
107
107
|
container.particles.linksColor = linkColor;
|
|
108
108
|
}
|
package/esm/LinksPlugin.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
export class LinksPlugin {
|
|
2
2
|
id = "links";
|
|
3
|
-
|
|
3
|
+
#pluginManager;
|
|
4
4
|
constructor(pluginManager) {
|
|
5
|
-
this
|
|
5
|
+
this.#pluginManager = pluginManager;
|
|
6
6
|
}
|
|
7
7
|
async getPlugin(container) {
|
|
8
8
|
const { LinkInstance } = await import("./LinkInstance.js");
|
|
9
|
-
return new LinkInstance(this
|
|
9
|
+
return new LinkInstance(this.#pluginManager, container);
|
|
10
10
|
}
|
|
11
11
|
loadOptions() {
|
|
12
12
|
}
|
package/esm/index.js
CHANGED
|
@@ -2,7 +2,7 @@ import { ensureInteractivityPluginLoaded } from "@tsparticles/plugin-interactivi
|
|
|
2
2
|
import { Linker } from "./Linker.js";
|
|
3
3
|
import { LinksPlugin } from "./LinksPlugin.js";
|
|
4
4
|
export async function loadParticlesLinksInteraction(engine) {
|
|
5
|
-
engine.checkVersion("4.
|
|
5
|
+
engine.checkVersion("4.1.1");
|
|
6
6
|
await engine.pluginManager.register((e) => {
|
|
7
7
|
const pluginManager = e.pluginManager;
|
|
8
8
|
ensureInteractivityPluginLoaded(e);
|
package/esm/index.lazy.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export async function loadParticlesLinksInteraction(engine) {
|
|
2
|
-
engine.checkVersion("4.
|
|
2
|
+
engine.checkVersion("4.1.1");
|
|
3
3
|
await engine.pluginManager.register(async (e) => {
|
|
4
4
|
const pluginManager = e.pluginManager, [{ ensureInteractivityPluginLoaded }, { LinksPlugin },] = await Promise.all([
|
|
5
5
|
import("@tsparticles/plugin-interactivity/lazy"),
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tsparticles/interaction-particles-links",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.1.1",
|
|
4
4
|
"description": "tsParticles links particles interaction",
|
|
5
5
|
"homepage": "https://particles.js.org",
|
|
6
6
|
"repository": {
|
|
@@ -97,10 +97,10 @@
|
|
|
97
97
|
},
|
|
98
98
|
"type": "module",
|
|
99
99
|
"peerDependencies": {
|
|
100
|
-
"@tsparticles/engine": "4.
|
|
101
|
-
"@tsparticles/plugin-interactivity": "4.
|
|
100
|
+
"@tsparticles/engine": "4.1.1",
|
|
101
|
+
"@tsparticles/plugin-interactivity": "4.1.1"
|
|
102
102
|
},
|
|
103
103
|
"dependencies": {
|
|
104
|
-
"@tsparticles/canvas-utils": "4.
|
|
104
|
+
"@tsparticles/canvas-utils": "4.1.1"
|
|
105
105
|
}
|
|
106
106
|
}
|
package/report.html
CHANGED
|
@@ -4930,7 +4930,7 @@ var drawChart = (function (exports) {
|
|
|
4930
4930
|
</script>
|
|
4931
4931
|
<script>
|
|
4932
4932
|
/*<!--*/
|
|
4933
|
-
const data = {"version":2,"tree":{"name":"root","children":[{"name":"tsparticles.interaction.particles.links.js","children":[{"name":"dist/browser","children":[{"uid":"
|
|
4933
|
+
const data = {"version":2,"tree":{"name":"root","children":[{"name":"tsparticles.interaction.particles.links.js","children":[{"name":"dist/browser","children":[{"uid":"3c157510-1","name":"CircleWarp.js"},{"name":"Options/Classes","children":[{"uid":"3c157510-3","name":"LinksShadow.js"},{"uid":"3c157510-5","name":"LinksTriangle.js"},{"uid":"3c157510-7","name":"Links.js"}]},{"uid":"3c157510-9","name":"Linker.js"},{"uid":"3c157510-11","name":"LinksPlugin.js"},{"uid":"3c157510-13","name":"index.js"},{"uid":"3c157510-15","name":"browser.js"},{"uid":"3c157510-17","name":"Utils.js"},{"uid":"3c157510-19","name":"LinkInstance.js"}]}]}],"isRoot":true},"nodeParts":{"3c157510-1":{"renderedLength":2053,"gzipLength":0,"brotliLength":0,"metaUid":"3c157510-0"},"3c157510-3":{"renderedLength":642,"gzipLength":0,"brotliLength":0,"metaUid":"3c157510-2"},"3c157510-5":{"renderedLength":762,"gzipLength":0,"brotliLength":0,"metaUid":"3c157510-4"},"3c157510-7":{"renderedLength":1881,"gzipLength":0,"brotliLength":0,"metaUid":"3c157510-6"},"3c157510-9":{"renderedLength":4871,"gzipLength":0,"brotliLength":0,"metaUid":"3c157510-8"},"3c157510-11":{"renderedLength":487,"gzipLength":0,"brotliLength":0,"metaUid":"3c157510-10"},"3c157510-13":{"renderedLength":524,"gzipLength":0,"brotliLength":0,"metaUid":"3c157510-12"},"3c157510-15":{"renderedLength":201,"gzipLength":0,"brotliLength":0,"metaUid":"3c157510-14"},"3c157510-17":{"renderedLength":390,"gzipLength":0,"brotliLength":0,"metaUid":"3c157510-16"},"3c157510-19":{"renderedLength":7639,"gzipLength":0,"brotliLength":0,"metaUid":"3c157510-18"}},"nodeMetas":{"3c157510-0":{"id":"/dist/browser/CircleWarp.js","moduleParts":{"tsparticles.interaction.particles.links.js":"3c157510-1"},"imported":[{"uid":"3c157510-21"}],"importedBy":[{"uid":"3c157510-8"}]},"3c157510-2":{"id":"/dist/browser/Options/Classes/LinksShadow.js","moduleParts":{"tsparticles.interaction.particles.links.js":"3c157510-3"},"imported":[{"uid":"3c157510-21"}],"importedBy":[{"uid":"3c157510-12"},{"uid":"3c157510-6"}]},"3c157510-4":{"id":"/dist/browser/Options/Classes/LinksTriangle.js","moduleParts":{"tsparticles.interaction.particles.links.js":"3c157510-5"},"imported":[{"uid":"3c157510-21"}],"importedBy":[{"uid":"3c157510-12"},{"uid":"3c157510-6"}]},"3c157510-6":{"id":"/dist/browser/Options/Classes/Links.js","moduleParts":{"tsparticles.interaction.particles.links.js":"3c157510-7"},"imported":[{"uid":"3c157510-21"},{"uid":"3c157510-2"},{"uid":"3c157510-4"}],"importedBy":[{"uid":"3c157510-12"},{"uid":"3c157510-8"}]},"3c157510-8":{"id":"/dist/browser/Linker.js","moduleParts":{"tsparticles.interaction.particles.links.js":"3c157510-9"},"imported":[{"uid":"3c157510-21"},{"uid":"3c157510-0"},{"uid":"3c157510-6"},{"uid":"3c157510-20"}],"importedBy":[{"uid":"3c157510-12"}]},"3c157510-10":{"id":"/dist/browser/LinksPlugin.js","moduleParts":{"tsparticles.interaction.particles.links.js":"3c157510-11"},"imported":[{"uid":"3c157510-18","dynamic":true}],"importedBy":[{"uid":"3c157510-12"}]},"3c157510-12":{"id":"/dist/browser/index.js","moduleParts":{"tsparticles.interaction.particles.links.js":"3c157510-13"},"imported":[{"uid":"3c157510-20"},{"uid":"3c157510-8"},{"uid":"3c157510-10"},{"uid":"3c157510-6"},{"uid":"3c157510-2"},{"uid":"3c157510-4"}],"importedBy":[{"uid":"3c157510-14"}]},"3c157510-14":{"id":"/dist/browser/browser.js","moduleParts":{"tsparticles.interaction.particles.links.js":"3c157510-15"},"imported":[{"uid":"3c157510-12"}],"importedBy":[],"isEntry":true},"3c157510-16":{"id":"/dist/browser/Utils.js","moduleParts":{"tsparticles.interaction.particles.links.js":"3c157510-17"},"imported":[{"uid":"3c157510-21"}],"importedBy":[{"uid":"3c157510-18"}]},"3c157510-18":{"id":"/dist/browser/LinkInstance.js","moduleParts":{"tsparticles.interaction.particles.links.js":"3c157510-19"},"imported":[{"uid":"3c157510-21"},{"uid":"3c157510-16"}],"importedBy":[{"uid":"3c157510-10"}]},"3c157510-20":{"id":"@tsparticles/plugin-interactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"3c157510-12"},{"uid":"3c157510-8"}],"isExternal":true},"3c157510-21":{"id":"@tsparticles/engine","moduleParts":{},"imported":[],"importedBy":[{"uid":"3c157510-8"},{"uid":"3c157510-6"},{"uid":"3c157510-2"},{"uid":"3c157510-4"},{"uid":"3c157510-0"},{"uid":"3c157510-18"},{"uid":"3c157510-16"}],"isExternal":true}},"env":{"rollup":"4.60.4"},"options":{"gzip":false,"brotli":false,"sourcemap":false}};
|
|
4934
4934
|
|
|
4935
4935
|
const run = () => {
|
|
4936
4936
|
const width = window.innerWidth;
|
|
@@ -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
|
-
/* Particles Interaction v4.
|
|
2
|
+
/* Particles Interaction v4.1.1 */
|
|
3
3
|
(function (global, factory) {
|
|
4
4
|
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@tsparticles/plugin-interactivity'), require('@tsparticles/engine')) :
|
|
5
5
|
typeof define === 'function' && define.amd ? define(['exports', '@tsparticles/plugin-interactivity', '@tsparticles/engine'], factory) :
|
|
@@ -7,15 +7,15 @@
|
|
|
7
7
|
})(this, (function (exports, pluginInteractivity, engine) { 'use strict';
|
|
8
8
|
|
|
9
9
|
class CircleWarp extends engine.Circle {
|
|
10
|
-
canvasSize;
|
|
10
|
+
#canvasSize;
|
|
11
11
|
constructor(x, y, radius, canvasSize) {
|
|
12
12
|
super(x, y, radius);
|
|
13
|
-
this
|
|
13
|
+
this.#canvasSize = canvasSize;
|
|
14
14
|
}
|
|
15
15
|
contains(point) {
|
|
16
16
|
if (super.contains(point))
|
|
17
17
|
return true;
|
|
18
|
-
const { width, height } = this
|
|
18
|
+
const { width, height } = this.#canvasSize, { x, y } = point;
|
|
19
19
|
return (super.contains({ x: x - width, y }) ||
|
|
20
20
|
super.contains({ x: x + width, y }) ||
|
|
21
21
|
super.contains({ x, y: y - height }) ||
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
intersects(range) {
|
|
29
29
|
if (super.intersects(range))
|
|
30
30
|
return true;
|
|
31
|
-
const { width, height } = this
|
|
31
|
+
const { width, height } = this.#canvasSize, pos = range.position, shifts = [
|
|
32
32
|
{ x: -width, y: 0 },
|
|
33
33
|
{ x: width, y: 0 },
|
|
34
34
|
{ x: 0, y: -height },
|
|
@@ -180,15 +180,15 @@
|
|
|
180
180
|
return Math.hypot(warpDistances.x, warpDistances.y);
|
|
181
181
|
}
|
|
182
182
|
class Linker extends pluginInteractivity.ParticlesInteractorBase {
|
|
183
|
-
|
|
184
|
-
|
|
183
|
+
#maxDistance;
|
|
184
|
+
#pluginManager;
|
|
185
185
|
constructor(pluginManager, container) {
|
|
186
186
|
super(container);
|
|
187
|
-
this
|
|
188
|
-
this
|
|
187
|
+
this.#pluginManager = pluginManager;
|
|
188
|
+
this.#maxDistance = 0;
|
|
189
189
|
}
|
|
190
190
|
get maxDistance() {
|
|
191
|
-
return this
|
|
191
|
+
return this.#maxDistance;
|
|
192
192
|
}
|
|
193
193
|
clear() {
|
|
194
194
|
}
|
|
@@ -201,8 +201,8 @@
|
|
|
201
201
|
return;
|
|
202
202
|
}
|
|
203
203
|
p1.links = [];
|
|
204
|
-
if (p1.linksDistance && p1.linksDistance > this
|
|
205
|
-
this
|
|
204
|
+
if (p1.linksDistance && p1.linksDistance > this.#maxDistance) {
|
|
205
|
+
this.#maxDistance = p1.linksDistance;
|
|
206
206
|
}
|
|
207
207
|
const pos1 = p1.getPosition(), container = this.container, canvasSize = container.canvas.size;
|
|
208
208
|
if (pos1.x < engine.originPoint.x || pos1.y < engine.originPoint.y || pos1.x > canvasSize.width || pos1.y > canvasSize.height) {
|
|
@@ -230,11 +230,11 @@
|
|
|
230
230
|
continue;
|
|
231
231
|
}
|
|
232
232
|
const opacityLine = (opacityOffset - distance / optDistance) * optOpacity;
|
|
233
|
-
this
|
|
233
|
+
this.#setColor(p1);
|
|
234
234
|
p1.links.push({
|
|
235
235
|
destination: p2,
|
|
236
236
|
opacity: opacityLine,
|
|
237
|
-
color: this
|
|
237
|
+
color: this.#getLinkColor(p1, p2),
|
|
238
238
|
isWarped: distWarp < distDirect,
|
|
239
239
|
});
|
|
240
240
|
}
|
|
@@ -250,7 +250,7 @@
|
|
|
250
250
|
}
|
|
251
251
|
reset() {
|
|
252
252
|
}
|
|
253
|
-
|
|
253
|
+
#getLinkColor(p1, p2) {
|
|
254
254
|
const container = this.container, linksOptions = p1.options.links;
|
|
255
255
|
if (!linksOptions) {
|
|
256
256
|
return;
|
|
@@ -260,7 +260,7 @@
|
|
|
260
260
|
: container.particles.linksColor;
|
|
261
261
|
return engine.getLinkColor(p1, p2, linkColor);
|
|
262
262
|
}
|
|
263
|
-
|
|
263
|
+
#setColor(p1) {
|
|
264
264
|
if (!p1.options.links) {
|
|
265
265
|
return;
|
|
266
266
|
}
|
|
@@ -271,7 +271,7 @@
|
|
|
271
271
|
if (linkColor) {
|
|
272
272
|
return;
|
|
273
273
|
}
|
|
274
|
-
linkColor = engine.getLinkRandomColor(this
|
|
274
|
+
linkColor = engine.getLinkRandomColor(this.#pluginManager, linksOptions.color, linksOptions.blink, linksOptions.consent);
|
|
275
275
|
if (linksOptions.id === undefined) {
|
|
276
276
|
container.particles.linksColor = linkColor;
|
|
277
277
|
}
|
|
@@ -283,13 +283,13 @@
|
|
|
283
283
|
|
|
284
284
|
class LinksPlugin {
|
|
285
285
|
id = "links";
|
|
286
|
-
|
|
286
|
+
#pluginManager;
|
|
287
287
|
constructor(pluginManager) {
|
|
288
|
-
this
|
|
288
|
+
this.#pluginManager = pluginManager;
|
|
289
289
|
}
|
|
290
290
|
async getPlugin(container) {
|
|
291
291
|
const { LinkInstance } = await Promise.resolve().then(function () { return LinkInstance$1; });
|
|
292
|
-
return new LinkInstance(this
|
|
292
|
+
return new LinkInstance(this.#pluginManager, container);
|
|
293
293
|
}
|
|
294
294
|
loadOptions() {
|
|
295
295
|
}
|
|
@@ -299,7 +299,7 @@
|
|
|
299
299
|
}
|
|
300
300
|
|
|
301
301
|
async function loadParticlesLinksInteraction(engine) {
|
|
302
|
-
engine.checkVersion("4.
|
|
302
|
+
engine.checkVersion("4.1.1");
|
|
303
303
|
await engine.pluginManager.register((e) => {
|
|
304
304
|
const pluginManager = e.pluginManager;
|
|
305
305
|
pluginInteractivity.ensureInteractivityPluginLoaded(e);
|
|
@@ -329,14 +329,14 @@
|
|
|
329
329
|
|
|
330
330
|
const minOpacity = 0, minWidth = 0, minDistance = 0, maxFrequency = 1, defaultFrequency = 0;
|
|
331
331
|
class LinkInstance {
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
332
|
+
#colorCache = new Map();
|
|
333
|
+
#container;
|
|
334
|
+
#freqs;
|
|
335
|
+
#pluginManager;
|
|
336
336
|
constructor(pluginManager, container) {
|
|
337
|
-
this
|
|
338
|
-
this
|
|
339
|
-
this
|
|
337
|
+
this.#pluginManager = pluginManager;
|
|
338
|
+
this.#container = container;
|
|
339
|
+
this.#freqs = { links: new Map(), triangles: new Map() };
|
|
340
340
|
}
|
|
341
341
|
drawParticle(context, particle) {
|
|
342
342
|
const { links, options } = particle;
|
|
@@ -353,13 +353,13 @@
|
|
|
353
353
|
};
|
|
354
354
|
for (const link of links) {
|
|
355
355
|
if (linkOpts.frequency < maxFrequency &&
|
|
356
|
-
this
|
|
356
|
+
this.#getLinkFrequency(particle, link.destination) > linkOpts.frequency) {
|
|
357
357
|
continue;
|
|
358
358
|
}
|
|
359
359
|
const pos2 = link.destination.getPosition();
|
|
360
360
|
if (trianglesEnabled && !link.isWarped && p1Destinations) {
|
|
361
361
|
flushLines();
|
|
362
|
-
this
|
|
362
|
+
this.#drawTriangles(options, particle, link, p1Destinations, pos1, pos2, context);
|
|
363
363
|
}
|
|
364
364
|
if (link.opacity <= minOpacity || width <= minWidth) {
|
|
365
365
|
continue;
|
|
@@ -369,7 +369,7 @@
|
|
|
369
369
|
}
|
|
370
370
|
let opacity = link.opacity, colorLine = link.color;
|
|
371
371
|
const twinkleRgb = twinkle?.enable && engine.getRandom() < twinkle.frequency
|
|
372
|
-
? engine.rangeColorToRgb(this
|
|
372
|
+
? engine.rangeColorToRgb(this.#pluginManager, twinkle.color)
|
|
373
373
|
: undefined;
|
|
374
374
|
if (twinkle && twinkleRgb) {
|
|
375
375
|
colorLine = twinkleRgb;
|
|
@@ -377,14 +377,14 @@
|
|
|
377
377
|
}
|
|
378
378
|
if (!colorLine) {
|
|
379
379
|
const linkColor = linkOpts.id !== undefined
|
|
380
|
-
? this.
|
|
381
|
-
: this.
|
|
380
|
+
? this.#container.particles.linksColors.get(linkOpts.id)
|
|
381
|
+
: this.#container.particles.linksColor;
|
|
382
382
|
colorLine = engine.getLinkColor(particle, link.destination, linkColor);
|
|
383
383
|
}
|
|
384
384
|
if (!colorLine) {
|
|
385
385
|
continue;
|
|
386
386
|
}
|
|
387
|
-
const colorStyle = this
|
|
387
|
+
const colorStyle = this.#getCachedStyle(colorLine);
|
|
388
388
|
if (colorStyle !== currentColorStyle || width !== currentWidth || opacity !== currentAlpha) {
|
|
389
389
|
flushLines();
|
|
390
390
|
context.strokeStyle = colorStyle;
|
|
@@ -397,7 +397,7 @@
|
|
|
397
397
|
pathOpen = true;
|
|
398
398
|
}
|
|
399
399
|
if (link.isWarped) {
|
|
400
|
-
const canvasSize = this.
|
|
400
|
+
const canvasSize = this.#container.canvas.size, dx = pos2.x - pos1.x, dy = pos2.y - pos1.y;
|
|
401
401
|
let sx = engine.originPoint.x, sy = engine.originPoint.y;
|
|
402
402
|
if (Math.abs(dx) > canvasSize.width * engine.half) {
|
|
403
403
|
sx = dx > minDistance ? -canvasSize.width : canvasSize.width;
|
|
@@ -419,9 +419,9 @@
|
|
|
419
419
|
context.globalAlpha = originalAlpha;
|
|
420
420
|
}
|
|
421
421
|
init() {
|
|
422
|
-
this.
|
|
423
|
-
this.
|
|
424
|
-
this.
|
|
422
|
+
this.#freqs.links.clear();
|
|
423
|
+
this.#freqs.triangles.clear();
|
|
424
|
+
this.#colorCache.clear();
|
|
425
425
|
return Promise.resolve();
|
|
426
426
|
}
|
|
427
427
|
particleCreated(particle) {
|
|
@@ -431,14 +431,14 @@
|
|
|
431
431
|
}
|
|
432
432
|
particle.linksDistance = particle.options.links.distance;
|
|
433
433
|
particle.linksWidth = particle.options.links.width;
|
|
434
|
-
const ratio = this.
|
|
434
|
+
const ratio = this.#container.retina.pixelRatio;
|
|
435
435
|
particle.retina.linksDistance = particle.linksDistance * ratio;
|
|
436
436
|
particle.retina.linksWidth = particle.linksWidth * ratio;
|
|
437
437
|
}
|
|
438
438
|
particleDestroyed(particle) {
|
|
439
439
|
particle.links = [];
|
|
440
440
|
}
|
|
441
|
-
|
|
441
|
+
#drawTriangles(options, p1, link, p1Destinations, pos1, pos2, context) {
|
|
442
442
|
const p2 = link.destination, triangleOptions = options.links?.triangles;
|
|
443
443
|
if (!triangleOptions?.enable || !p2.options.links?.triangles.enable) {
|
|
444
444
|
return;
|
|
@@ -449,21 +449,21 @@
|
|
|
449
449
|
}
|
|
450
450
|
for (const vertex of p2Links) {
|
|
451
451
|
if (vertex.isWarped ||
|
|
452
|
-
this
|
|
452
|
+
this.#getLinkFrequency(p2, vertex.destination) > p2.options.links.frequency ||
|
|
453
453
|
!p1Destinations.has(vertex.destination.id)) {
|
|
454
454
|
continue;
|
|
455
455
|
}
|
|
456
456
|
const p3 = vertex.destination;
|
|
457
|
-
if (this
|
|
457
|
+
if (this.#getTriangleFrequency(p1, p2, p3) > (options.links?.triangles.frequency ?? defaultFrequency)) {
|
|
458
458
|
continue;
|
|
459
459
|
}
|
|
460
|
-
const opacityTriangle = triangleOptions.opacity ?? (link.opacity + vertex.opacity) * engine.half, colorTriangle = engine.rangeColorToRgb(this
|
|
460
|
+
const opacityTriangle = triangleOptions.opacity ?? (link.opacity + vertex.opacity) * engine.half, colorTriangle = engine.rangeColorToRgb(this.#pluginManager, triangleOptions.color) ?? link.color;
|
|
461
461
|
if (!colorTriangle || opacityTriangle <= minOpacity) {
|
|
462
462
|
continue;
|
|
463
463
|
}
|
|
464
464
|
const pos3 = p3.getPosition();
|
|
465
465
|
context.save();
|
|
466
|
-
context.fillStyle = this
|
|
466
|
+
context.fillStyle = this.#getCachedStyle(colorTriangle);
|
|
467
467
|
context.globalAlpha = opacityTriangle;
|
|
468
468
|
context.beginPath();
|
|
469
469
|
context.moveTo(pos1.x, pos1.y);
|
|
@@ -474,20 +474,20 @@
|
|
|
474
474
|
context.restore();
|
|
475
475
|
}
|
|
476
476
|
}
|
|
477
|
-
|
|
477
|
+
#getCachedStyle(rgb) {
|
|
478
478
|
const key = `${rgb.r},${rgb.g},${rgb.b}`;
|
|
479
|
-
let style = this.
|
|
479
|
+
let style = this.#colorCache.get(key);
|
|
480
480
|
if (!style) {
|
|
481
|
-
style = engine.getStyleFromRgb(rgb, this.
|
|
482
|
-
this.
|
|
481
|
+
style = engine.getStyleFromRgb(rgb, this.#container.hdr);
|
|
482
|
+
this.#colorCache.set(key, style);
|
|
483
483
|
}
|
|
484
484
|
return style;
|
|
485
485
|
}
|
|
486
|
-
|
|
487
|
-
return setLinkFrequency([p1, p2], this.
|
|
486
|
+
#getLinkFrequency(p1, p2) {
|
|
487
|
+
return setLinkFrequency([p1, p2], this.#freqs.links);
|
|
488
488
|
}
|
|
489
|
-
|
|
490
|
-
return setLinkFrequency([p1, p2, p3], this.
|
|
489
|
+
#getTriangleFrequency(p1, p2, p3) {
|
|
490
|
+
return setLinkFrequency([p1, p2, p3], this.#freqs.triangles);
|
|
491
491
|
}
|
|
492
492
|
}
|
|
493
493
|
|