@tsparticles/interaction-particles-links 3.0.0-alpha.1 → 3.0.0-beta.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/README.md +25 -19
- package/browser/CircleWarp.js +7 -23
- package/browser/LinkInstance.js +121 -114
- package/browser/Linker.js +37 -54
- package/browser/Options/Classes/Links.js +1 -1
- package/browser/Utils.js +24 -8
- package/browser/index.js +5 -5
- package/browser/interaction.js +2 -2
- package/browser/plugin.js +2 -2
- package/cjs/CircleWarp.js +7 -23
- package/cjs/LinkInstance.js +123 -127
- package/cjs/Linker.js +66 -94
- package/cjs/Options/Classes/Links.js +1 -1
- package/cjs/Utils.js +26 -8
- package/cjs/index.js +3 -14
- package/cjs/interaction.js +4 -15
- package/cjs/plugin.js +5 -16
- package/esm/CircleWarp.js +7 -23
- package/esm/LinkInstance.js +121 -114
- package/esm/Linker.js +37 -54
- package/esm/Options/Classes/Links.js +1 -1
- package/esm/Utils.js +24 -8
- package/esm/index.js +5 -5
- package/esm/interaction.js +2 -2
- package/esm/plugin.js +2 -2
- package/package.json +6 -5
- package/report.html +4 -4
- package/tsparticles.interaction.particles.links.js +244 -204
- package/tsparticles.interaction.particles.links.min.js +1 -1
- package/tsparticles.interaction.particles.links.min.js.LICENSE.txt +1 -8
- package/types/CircleWarp.d.ts +1 -2
- package/types/Interfaces.d.ts +22 -0
- package/types/LinkInstance.d.ts +7 -8
- package/types/Linker.d.ts +3 -7
- package/types/Options/Classes/Links.d.ts +1 -2
- package/types/Options/Classes/LinksShadow.d.ts +1 -2
- package/types/Options/Classes/LinksTriangle.d.ts +1 -2
- package/types/Types.d.ts +47 -0
- package/types/Utils.d.ts +5 -4
- package/types/index.d.ts +1 -1
- package/types/interaction.d.ts +1 -1
- package/types/plugin.d.ts +1 -1
- package/umd/CircleWarp.js +7 -23
- package/umd/LinkInstance.js +121 -114
- package/umd/Linker.js +36 -53
- package/umd/Options/Classes/Links.js +2 -2
- package/umd/Utils.js +26 -8
- package/umd/index.js +3 -3
- package/umd/interaction.js +4 -4
- package/umd/plugin.js +4 -4
- package/browser/Options/Interfaces/IParticlesLinkOptions.js +0 -1
- package/cjs/LinkParticle.js +0 -2
- package/cjs/Options/Classes/ParticlesLinkOptions.js +0 -2
- package/cjs/Options/Interfaces/IParticlesLinkOptions.js +0 -2
- package/esm/ILink.js +0 -1
- package/esm/LinkContainer.js +0 -1
- package/esm/LinkParticle.js +0 -1
- package/esm/Options/Classes/ParticlesLinkOptions.js +0 -1
- package/esm/Options/Interfaces/IParticlesLinkOptions.js +0 -1
- package/types/ILink.d.ts +0 -9
- package/types/LinkContainer.d.ts +0 -7
- package/types/LinkParticle.d.ts +0 -11
- package/types/Options/Classes/ParticlesLinkOptions.d.ts +0 -5
- package/types/Options/Interfaces/IParticlesLinkOptions.d.ts +0 -7
- package/umd/LinkParticle.js +0 -12
- package/umd/Options/Classes/ParticlesLinkOptions.js +0 -12
- package/umd/Options/Interfaces/IParticlesLinkOptions.js +0 -12
- /package/browser/{ILink.js → Interfaces.js} +0 -0
- /package/browser/{LinkContainer.js → Types.js} +0 -0
- /package/cjs/{ILink.js → Interfaces.js} +0 -0
- /package/cjs/{LinkContainer.js → Types.js} +0 -0
- /package/{browser/LinkParticle.js → esm/Interfaces.js} +0 -0
- /package/{browser/Options/Classes/ParticlesLinkOptions.js → esm/Types.js} +0 -0
- /package/umd/{ILink.js → Interfaces.js} +0 -0
- /package/umd/{LinkContainer.js → Types.js} +0 -0
package/cjs/LinkInstance.js
CHANGED
|
@@ -1,158 +1,154 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
3
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
4
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
5
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
6
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
7
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
8
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
9
|
-
});
|
|
10
|
-
};
|
|
11
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
3
|
exports.LinkInstance = void 0;
|
|
13
|
-
const Utils_1 = require("./Utils");
|
|
14
4
|
const engine_1 = require("@tsparticles/engine");
|
|
15
|
-
|
|
16
|
-
ids.sort((a, b) => a - b);
|
|
17
|
-
return ids.join("_");
|
|
18
|
-
}
|
|
19
|
-
function setLinkFrequency(particles, dictionary) {
|
|
20
|
-
const key = getLinkKey(particles.map((t) => t.id));
|
|
21
|
-
let res = dictionary.get(key);
|
|
22
|
-
if (res === undefined) {
|
|
23
|
-
res = (0, engine_1.getRandom)();
|
|
24
|
-
dictionary.set(key, res);
|
|
25
|
-
}
|
|
26
|
-
return res;
|
|
27
|
-
}
|
|
5
|
+
const Utils_1 = require("./Utils");
|
|
28
6
|
class LinkInstance {
|
|
29
7
|
constructor(container) {
|
|
30
8
|
this.container = container;
|
|
9
|
+
this._drawLinkLine = (p1, link) => {
|
|
10
|
+
const p1LinksOptions = p1.options.links;
|
|
11
|
+
if (!p1LinksOptions?.enable) {
|
|
12
|
+
return;
|
|
13
|
+
}
|
|
14
|
+
const container = this.container, options = container.actualOptions, p2 = link.destination, pos1 = p1.getPosition(), pos2 = p2.getPosition();
|
|
15
|
+
let opacity = link.opacity;
|
|
16
|
+
container.canvas.draw((ctx) => {
|
|
17
|
+
let colorLine;
|
|
18
|
+
const twinkle = p1.options.twinkle?.lines;
|
|
19
|
+
if (twinkle?.enable) {
|
|
20
|
+
const twinkleFreq = twinkle.frequency, twinkleRgb = (0, engine_1.rangeColorToRgb)(twinkle.color), twinkling = (0, engine_1.getRandom)() < twinkleFreq;
|
|
21
|
+
if (twinkling && twinkleRgb) {
|
|
22
|
+
colorLine = twinkleRgb;
|
|
23
|
+
opacity = (0, engine_1.getRangeValue)(twinkle.opacity);
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
if (!colorLine) {
|
|
27
|
+
const linkColor = p1LinksOptions.id !== undefined
|
|
28
|
+
? container.particles.linksColors.get(p1LinksOptions.id)
|
|
29
|
+
: container.particles.linksColor;
|
|
30
|
+
colorLine = (0, engine_1.getLinkColor)(p1, p2, linkColor);
|
|
31
|
+
}
|
|
32
|
+
if (!colorLine) {
|
|
33
|
+
return;
|
|
34
|
+
}
|
|
35
|
+
const width = p1.retina.linksWidth ?? 0, maxDistance = p1.retina.linksDistance ?? 0, { backgroundMask } = options;
|
|
36
|
+
(0, Utils_1.drawLinkLine)({
|
|
37
|
+
context: ctx,
|
|
38
|
+
width,
|
|
39
|
+
begin: pos1,
|
|
40
|
+
end: pos2,
|
|
41
|
+
maxDistance,
|
|
42
|
+
canvasSize: container.canvas.size,
|
|
43
|
+
links: p1LinksOptions,
|
|
44
|
+
backgroundMask: backgroundMask,
|
|
45
|
+
colorLine,
|
|
46
|
+
opacity,
|
|
47
|
+
});
|
|
48
|
+
});
|
|
49
|
+
};
|
|
50
|
+
this._drawLinkTriangle = (p1, link1, link2) => {
|
|
51
|
+
const linksOptions = p1.options.links;
|
|
52
|
+
if (!linksOptions?.enable) {
|
|
53
|
+
return;
|
|
54
|
+
}
|
|
55
|
+
const triangleOptions = linksOptions.triangles;
|
|
56
|
+
if (!triangleOptions.enable) {
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
59
|
+
const container = this.container, options = container.actualOptions, p2 = link1.destination, p3 = link2.destination, opacityTriangle = triangleOptions.opacity ?? (link1.opacity + link2.opacity) / 2;
|
|
60
|
+
if (opacityTriangle <= 0) {
|
|
61
|
+
return;
|
|
62
|
+
}
|
|
63
|
+
container.canvas.draw((ctx) => {
|
|
64
|
+
const pos1 = p1.getPosition(), pos2 = p2.getPosition(), pos3 = p3.getPosition(), linksDistance = p1.retina.linksDistance ?? 0;
|
|
65
|
+
if ((0, engine_1.getDistance)(pos1, pos2) > linksDistance ||
|
|
66
|
+
(0, engine_1.getDistance)(pos3, pos2) > linksDistance ||
|
|
67
|
+
(0, engine_1.getDistance)(pos3, pos1) > linksDistance) {
|
|
68
|
+
return;
|
|
69
|
+
}
|
|
70
|
+
let colorTriangle = (0, engine_1.rangeColorToRgb)(triangleOptions.color);
|
|
71
|
+
if (!colorTriangle) {
|
|
72
|
+
const linkColor = linksOptions.id !== undefined
|
|
73
|
+
? container.particles.linksColors.get(linksOptions.id)
|
|
74
|
+
: container.particles.linksColor;
|
|
75
|
+
colorTriangle = (0, engine_1.getLinkColor)(p1, p2, linkColor);
|
|
76
|
+
}
|
|
77
|
+
if (!colorTriangle) {
|
|
78
|
+
return;
|
|
79
|
+
}
|
|
80
|
+
(0, Utils_1.drawLinkTriangle)({
|
|
81
|
+
context: ctx,
|
|
82
|
+
pos1,
|
|
83
|
+
pos2,
|
|
84
|
+
pos3,
|
|
85
|
+
backgroundMask: options.backgroundMask,
|
|
86
|
+
colorTriangle,
|
|
87
|
+
opacityTriangle,
|
|
88
|
+
});
|
|
89
|
+
});
|
|
90
|
+
};
|
|
91
|
+
this._drawTriangles = (options, p1, link, p1Links) => {
|
|
92
|
+
const p2 = link.destination;
|
|
93
|
+
if (!(options.links?.triangles.enable && p2.options.links?.triangles.enable)) {
|
|
94
|
+
return;
|
|
95
|
+
}
|
|
96
|
+
const vertices = p2.links?.filter((t) => {
|
|
97
|
+
const linkFreq = this._getLinkFrequency(p2, t.destination);
|
|
98
|
+
return (p2.options.links &&
|
|
99
|
+
linkFreq <= p2.options.links.frequency &&
|
|
100
|
+
p1Links.findIndex((l) => l.destination === t.destination) >= 0);
|
|
101
|
+
});
|
|
102
|
+
if (!vertices?.length) {
|
|
103
|
+
return;
|
|
104
|
+
}
|
|
105
|
+
for (const vertex of vertices) {
|
|
106
|
+
const p3 = vertex.destination, triangleFreq = this._getTriangleFrequency(p1, p2, p3);
|
|
107
|
+
if (triangleFreq > options.links.triangles.frequency) {
|
|
108
|
+
continue;
|
|
109
|
+
}
|
|
110
|
+
this._drawLinkTriangle(p1, link, vertex);
|
|
111
|
+
}
|
|
112
|
+
};
|
|
113
|
+
this._getLinkFrequency = (p1, p2) => {
|
|
114
|
+
return (0, Utils_1.setLinkFrequency)([p1, p2], this._freqs.links);
|
|
115
|
+
};
|
|
116
|
+
this._getTriangleFrequency = (p1, p2, p3) => {
|
|
117
|
+
return (0, Utils_1.setLinkFrequency)([p1, p2, p3], this._freqs.triangles);
|
|
118
|
+
};
|
|
31
119
|
this._freqs = {
|
|
32
120
|
links: new Map(),
|
|
33
121
|
triangles: new Map(),
|
|
34
122
|
};
|
|
35
123
|
}
|
|
36
124
|
drawParticle(context, particle) {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
if (!particle.links || particle.links.length <= 0) {
|
|
125
|
+
const { links, options } = particle;
|
|
126
|
+
if (!links || links.length <= 0) {
|
|
40
127
|
return;
|
|
41
128
|
}
|
|
42
|
-
const p1Links =
|
|
129
|
+
const p1Links = links.filter((l) => options.links && this._getLinkFrequency(particle, l.destination) <= options.links.frequency);
|
|
43
130
|
for (const link of p1Links) {
|
|
44
|
-
this.
|
|
45
|
-
if (link.opacity > 0 && (
|
|
46
|
-
this.
|
|
131
|
+
this._drawTriangles(options, particle, link, p1Links);
|
|
132
|
+
if (link.opacity > 0 && (particle.retina.linksWidth ?? 0) > 0) {
|
|
133
|
+
this._drawLinkLine(particle, link);
|
|
47
134
|
}
|
|
48
135
|
}
|
|
49
136
|
}
|
|
50
|
-
init() {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
this._freqs.triangles = new Map();
|
|
54
|
-
});
|
|
137
|
+
async init() {
|
|
138
|
+
this._freqs.links = new Map();
|
|
139
|
+
this._freqs.triangles = new Map();
|
|
55
140
|
}
|
|
56
141
|
particleCreated(particle) {
|
|
57
142
|
particle.links = [];
|
|
58
143
|
if (!particle.options.links) {
|
|
59
144
|
return;
|
|
60
145
|
}
|
|
61
|
-
const ratio = this.container.retina.pixelRatio;
|
|
62
|
-
|
|
63
|
-
|
|
146
|
+
const ratio = this.container.retina.pixelRatio, { retina } = particle, { distance, width } = particle.options.links;
|
|
147
|
+
retina.linksDistance = distance * ratio;
|
|
148
|
+
retina.linksWidth = width * ratio;
|
|
64
149
|
}
|
|
65
150
|
particleDestroyed(particle) {
|
|
66
151
|
particle.links = [];
|
|
67
152
|
}
|
|
68
|
-
drawLinkLine(p1, link) {
|
|
69
|
-
const container = this.container, options = container.actualOptions, p2 = link.destination, pos1 = p1.getPosition(), pos2 = p2.getPosition();
|
|
70
|
-
let opacity = link.opacity;
|
|
71
|
-
container.canvas.draw((ctx) => {
|
|
72
|
-
var _a, _b, _c;
|
|
73
|
-
if (!p1.options.links) {
|
|
74
|
-
return;
|
|
75
|
-
}
|
|
76
|
-
let colorLine;
|
|
77
|
-
const twinkle = (_a = p1.options.twinkle) === null || _a === void 0 ? void 0 : _a.lines;
|
|
78
|
-
if (twinkle === null || twinkle === void 0 ? void 0 : twinkle.enable) {
|
|
79
|
-
const twinkleFreq = twinkle.frequency, twinkleRgb = (0, engine_1.rangeColorToRgb)(twinkle.color), twinkling = (0, engine_1.getRandom)() < twinkleFreq;
|
|
80
|
-
if (twinkling && twinkleRgb) {
|
|
81
|
-
colorLine = twinkleRgb;
|
|
82
|
-
opacity = (0, engine_1.getRangeValue)(twinkle.opacity);
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
if (!colorLine) {
|
|
86
|
-
const linksOptions = p1.options.links, linkColor = (linksOptions === null || linksOptions === void 0 ? void 0 : linksOptions.id) !== undefined
|
|
87
|
-
? container.particles.linksColors.get(linksOptions.id)
|
|
88
|
-
: container.particles.linksColor;
|
|
89
|
-
colorLine = (0, engine_1.getLinkColor)(p1, p2, linkColor);
|
|
90
|
-
}
|
|
91
|
-
if (!colorLine) {
|
|
92
|
-
return;
|
|
93
|
-
}
|
|
94
|
-
const width = (_b = p1.retina.linksWidth) !== null && _b !== void 0 ? _b : 0, maxDistance = (_c = p1.retina.linksDistance) !== null && _c !== void 0 ? _c : 0;
|
|
95
|
-
(0, Utils_1.drawLinkLine)(ctx, width, pos1, pos2, maxDistance, container.canvas.size, p1.options.links.warp, options.backgroundMask.enable, options.backgroundMask.composite, colorLine, opacity, p1.options.links.shadow);
|
|
96
|
-
});
|
|
97
|
-
}
|
|
98
|
-
drawLinkTriangle(p1, link1, link2) {
|
|
99
|
-
var _a;
|
|
100
|
-
if (!p1.options.links) {
|
|
101
|
-
return;
|
|
102
|
-
}
|
|
103
|
-
const container = this.container, options = container.actualOptions, p2 = link1.destination, p3 = link2.destination, triangleOptions = p1.options.links.triangles, opacityTriangle = (_a = triangleOptions.opacity) !== null && _a !== void 0 ? _a : (link1.opacity + link2.opacity) / 2;
|
|
104
|
-
if (opacityTriangle <= 0) {
|
|
105
|
-
return;
|
|
106
|
-
}
|
|
107
|
-
container.canvas.draw((ctx) => {
|
|
108
|
-
var _a;
|
|
109
|
-
const pos1 = p1.getPosition(), pos2 = p2.getPosition(), pos3 = p3.getPosition(), linksDistance = (_a = p1.retina.linksDistance) !== null && _a !== void 0 ? _a : 0;
|
|
110
|
-
if ((0, engine_1.getDistance)(pos1, pos2) > linksDistance ||
|
|
111
|
-
(0, engine_1.getDistance)(pos3, pos2) > linksDistance ||
|
|
112
|
-
(0, engine_1.getDistance)(pos3, pos1) > linksDistance) {
|
|
113
|
-
return;
|
|
114
|
-
}
|
|
115
|
-
let colorTriangle = (0, engine_1.rangeColorToRgb)(triangleOptions.color);
|
|
116
|
-
if (!colorTriangle) {
|
|
117
|
-
const linksOptions = p1.options.links, linkColor = (linksOptions === null || linksOptions === void 0 ? void 0 : linksOptions.id) !== undefined
|
|
118
|
-
? container.particles.linksColors.get(linksOptions.id)
|
|
119
|
-
: container.particles.linksColor;
|
|
120
|
-
colorTriangle = (0, engine_1.getLinkColor)(p1, p2, linkColor);
|
|
121
|
-
}
|
|
122
|
-
if (!colorTriangle) {
|
|
123
|
-
return;
|
|
124
|
-
}
|
|
125
|
-
(0, Utils_1.drawLinkTriangle)(ctx, pos1, pos2, pos3, options.backgroundMask.enable, options.backgroundMask.composite, colorTriangle, opacityTriangle);
|
|
126
|
-
});
|
|
127
|
-
}
|
|
128
|
-
drawTriangles(options, p1, link, p1Links) {
|
|
129
|
-
var _a, _b, _c;
|
|
130
|
-
const p2 = link.destination;
|
|
131
|
-
if (!(((_a = options.links) === null || _a === void 0 ? void 0 : _a.triangles.enable) && ((_b = p2.options.links) === null || _b === void 0 ? void 0 : _b.triangles.enable))) {
|
|
132
|
-
return;
|
|
133
|
-
}
|
|
134
|
-
const vertices = (_c = p2.links) === null || _c === void 0 ? void 0 : _c.filter((t) => {
|
|
135
|
-
const linkFreq = this.getLinkFrequency(p2, t.destination);
|
|
136
|
-
return (p2.options.links &&
|
|
137
|
-
linkFreq <= p2.options.links.frequency &&
|
|
138
|
-
p1Links.findIndex((l) => l.destination === t.destination) >= 0);
|
|
139
|
-
});
|
|
140
|
-
if (!(vertices === null || vertices === void 0 ? void 0 : vertices.length)) {
|
|
141
|
-
return;
|
|
142
|
-
}
|
|
143
|
-
for (const vertex of vertices) {
|
|
144
|
-
const p3 = vertex.destination, triangleFreq = this.getTriangleFrequency(p1, p2, p3);
|
|
145
|
-
if (triangleFreq > options.links.triangles.frequency) {
|
|
146
|
-
continue;
|
|
147
|
-
}
|
|
148
|
-
this.drawLinkTriangle(p1, link, vertex);
|
|
149
|
-
}
|
|
150
|
-
}
|
|
151
|
-
getLinkFrequency(p1, p2) {
|
|
152
|
-
return setLinkFrequency([p1, p2], this._freqs.links);
|
|
153
|
-
}
|
|
154
|
-
getTriangleFrequency(p1, p2, p3) {
|
|
155
|
-
return setLinkFrequency([p1, p2, p3], this._freqs.triangles);
|
|
156
|
-
}
|
|
157
153
|
}
|
|
158
154
|
exports.LinkInstance = LinkInstance;
|
package/cjs/Linker.js
CHANGED
|
@@ -1,49 +1,46 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
3
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
4
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
5
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
6
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
7
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
8
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
9
|
-
});
|
|
10
|
-
};
|
|
11
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
3
|
exports.Linker = void 0;
|
|
13
4
|
const engine_1 = require("@tsparticles/engine");
|
|
14
5
|
const CircleWarp_1 = require("./CircleWarp");
|
|
15
6
|
const Links_1 = require("./Options/Classes/Links");
|
|
16
7
|
function getLinkDistance(pos1, pos2, optDistance, canvasSize, warp) {
|
|
17
|
-
|
|
8
|
+
const { dx, dy, distance } = (0, engine_1.getDistances)(pos1, pos2);
|
|
18
9
|
if (!warp || distance <= optDistance) {
|
|
19
10
|
return distance;
|
|
20
11
|
}
|
|
21
|
-
const
|
|
22
|
-
x:
|
|
23
|
-
y:
|
|
12
|
+
const absDiffs = {
|
|
13
|
+
x: Math.abs(dx),
|
|
14
|
+
y: Math.abs(dy),
|
|
15
|
+
}, warpDistances = {
|
|
16
|
+
x: Math.min(absDiffs.x, canvasSize.width - absDiffs.x),
|
|
17
|
+
y: Math.min(absDiffs.y, canvasSize.height - absDiffs.y),
|
|
24
18
|
};
|
|
25
|
-
|
|
26
|
-
if (distance <= optDistance) {
|
|
27
|
-
return distance;
|
|
28
|
-
}
|
|
29
|
-
const pos2SE = {
|
|
30
|
-
x: pos2.x - canvasSize.width,
|
|
31
|
-
y: pos2.y - canvasSize.height,
|
|
32
|
-
};
|
|
33
|
-
distance = (0, engine_1.getDistance)(pos1, pos2SE);
|
|
34
|
-
if (distance <= optDistance) {
|
|
35
|
-
return distance;
|
|
36
|
-
}
|
|
37
|
-
const pos2SW = {
|
|
38
|
-
x: pos2.x,
|
|
39
|
-
y: pos2.y - canvasSize.height,
|
|
40
|
-
};
|
|
41
|
-
distance = (0, engine_1.getDistance)(pos1, pos2SW);
|
|
42
|
-
return distance;
|
|
19
|
+
return Math.sqrt(warpDistances.x ** 2 + warpDistances.y ** 2);
|
|
43
20
|
}
|
|
44
21
|
class Linker extends engine_1.ParticlesInteractorBase {
|
|
45
22
|
constructor(container) {
|
|
46
23
|
super(container);
|
|
24
|
+
this._setColor = (p1) => {
|
|
25
|
+
if (!p1.options.links) {
|
|
26
|
+
return;
|
|
27
|
+
}
|
|
28
|
+
const container = this.linkContainer, linksOptions = p1.options.links;
|
|
29
|
+
let linkColor = linksOptions.id === undefined
|
|
30
|
+
? container.particles.linksColor
|
|
31
|
+
: container.particles.linksColors.get(linksOptions.id);
|
|
32
|
+
if (linkColor) {
|
|
33
|
+
return;
|
|
34
|
+
}
|
|
35
|
+
const optColor = linksOptions.color;
|
|
36
|
+
linkColor = (0, engine_1.getLinkRandomColor)(optColor, linksOptions.blink, linksOptions.consent);
|
|
37
|
+
if (linksOptions.id === undefined) {
|
|
38
|
+
container.particles.linksColor = linkColor;
|
|
39
|
+
}
|
|
40
|
+
else {
|
|
41
|
+
container.particles.linksColors.set(linksOptions.id, linkColor);
|
|
42
|
+
}
|
|
43
|
+
};
|
|
47
44
|
this.linkContainer = container;
|
|
48
45
|
}
|
|
49
46
|
clear() {
|
|
@@ -52,83 +49,58 @@ class Linker extends engine_1.ParticlesInteractorBase {
|
|
|
52
49
|
this.linkContainer.particles.linksColor = undefined;
|
|
53
50
|
this.linkContainer.particles.linksColors = new Map();
|
|
54
51
|
}
|
|
55
|
-
interact(p1) {
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
52
|
+
async interact(p1) {
|
|
53
|
+
if (!p1.options.links) {
|
|
54
|
+
return;
|
|
55
|
+
}
|
|
56
|
+
p1.links = [];
|
|
57
|
+
const pos1 = p1.getPosition(), container = this.container, canvasSize = container.canvas.size;
|
|
58
|
+
if (pos1.x < 0 || pos1.y < 0 || pos1.x > canvasSize.width || pos1.y > canvasSize.height) {
|
|
59
|
+
return;
|
|
60
|
+
}
|
|
61
|
+
const linkOpt1 = p1.options.links, optOpacity = linkOpt1.opacity, optDistance = p1.retina.linksDistance ?? 0, warp = linkOpt1.warp, range = warp
|
|
62
|
+
? new CircleWarp_1.CircleWarp(pos1.x, pos1.y, optDistance, canvasSize)
|
|
63
|
+
: new engine_1.Circle(pos1.x, pos1.y, optDistance), query = container.particles.quadTree.query(range);
|
|
64
|
+
for (const p2 of query) {
|
|
65
|
+
const linkOpt2 = p2.options.links;
|
|
66
|
+
if (p1 === p2 ||
|
|
67
|
+
!linkOpt2?.enable ||
|
|
68
|
+
linkOpt1.id !== linkOpt2.id ||
|
|
69
|
+
p2.spawning ||
|
|
70
|
+
p2.destroyed ||
|
|
71
|
+
!p2.links ||
|
|
72
|
+
p1.links.some((t) => t.destination === p2) ||
|
|
73
|
+
p2.links.some((t) => t.destination === p1)) {
|
|
74
|
+
continue;
|
|
60
75
|
}
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
return;
|
|
76
|
+
const pos2 = p2.getPosition();
|
|
77
|
+
if (pos2.x < 0 || pos2.y < 0 || pos2.x > canvasSize.width || pos2.y > canvasSize.height) {
|
|
78
|
+
continue;
|
|
65
79
|
}
|
|
66
|
-
const
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
for (const p2 of query) {
|
|
70
|
-
const linkOpt2 = p2.options.links;
|
|
71
|
-
if (p1 === p2 ||
|
|
72
|
-
!(linkOpt2 === null || linkOpt2 === void 0 ? void 0 : linkOpt2.enable) ||
|
|
73
|
-
linkOpt1.id !== linkOpt2.id ||
|
|
74
|
-
p2.spawning ||
|
|
75
|
-
p2.destroyed ||
|
|
76
|
-
!p2.links ||
|
|
77
|
-
p1.links.map((t) => t.destination).indexOf(p2) !== -1 ||
|
|
78
|
-
p2.links.map((t) => t.destination).indexOf(p1) !== -1) {
|
|
79
|
-
continue;
|
|
80
|
-
}
|
|
81
|
-
const pos2 = p2.getPosition();
|
|
82
|
-
if (pos2.x < 0 || pos2.y < 0 || pos2.x > canvasSize.width || pos2.y > canvasSize.height) {
|
|
83
|
-
continue;
|
|
84
|
-
}
|
|
85
|
-
const distance = getLinkDistance(pos1, pos2, optDistance, canvasSize, warp && linkOpt2.warp);
|
|
86
|
-
if (distance > optDistance) {
|
|
87
|
-
return;
|
|
88
|
-
}
|
|
89
|
-
const opacityLine = (1 - distance / optDistance) * optOpacity;
|
|
90
|
-
this.setColor(p1);
|
|
91
|
-
p1.links.push({
|
|
92
|
-
destination: p2,
|
|
93
|
-
opacity: opacityLine,
|
|
94
|
-
});
|
|
80
|
+
const distance = getLinkDistance(pos1, pos2, optDistance, canvasSize, warp && linkOpt2.warp);
|
|
81
|
+
if (distance > optDistance) {
|
|
82
|
+
continue;
|
|
95
83
|
}
|
|
96
|
-
|
|
84
|
+
const opacityLine = (1 - distance / optDistance) * optOpacity;
|
|
85
|
+
this._setColor(p1);
|
|
86
|
+
p1.links.push({
|
|
87
|
+
destination: p2,
|
|
88
|
+
opacity: opacityLine,
|
|
89
|
+
});
|
|
90
|
+
}
|
|
97
91
|
}
|
|
98
92
|
isEnabled(particle) {
|
|
99
|
-
|
|
100
|
-
return !!((_a = particle.options.links) === null || _a === void 0 ? void 0 : _a.enable);
|
|
93
|
+
return !!particle.options.links?.enable;
|
|
101
94
|
}
|
|
102
95
|
loadParticlesOptions(options, ...sources) {
|
|
103
|
-
var _a, _b;
|
|
104
96
|
if (!options.links) {
|
|
105
97
|
options.links = new Links_1.Links();
|
|
106
98
|
}
|
|
107
99
|
for (const source of sources) {
|
|
108
|
-
options.links.load(
|
|
100
|
+
options.links.load(source?.links ?? source?.lineLinked ?? source?.line_linked);
|
|
109
101
|
}
|
|
110
102
|
}
|
|
111
103
|
reset() {
|
|
112
104
|
}
|
|
113
|
-
setColor(p1) {
|
|
114
|
-
if (!p1.options.links) {
|
|
115
|
-
return;
|
|
116
|
-
}
|
|
117
|
-
const container = this.linkContainer, linksOptions = p1.options.links;
|
|
118
|
-
let linkColor = linksOptions.id === undefined
|
|
119
|
-
? container.particles.linksColor
|
|
120
|
-
: container.particles.linksColors.get(linksOptions.id);
|
|
121
|
-
if (linkColor) {
|
|
122
|
-
return;
|
|
123
|
-
}
|
|
124
|
-
const optColor = linksOptions.color;
|
|
125
|
-
linkColor = (0, engine_1.getLinkRandomColor)(optColor, linksOptions.blink, linksOptions.consent);
|
|
126
|
-
if (linksOptions.id === undefined) {
|
|
127
|
-
container.particles.linksColor = linkColor;
|
|
128
|
-
}
|
|
129
|
-
else {
|
|
130
|
-
container.particles.linksColors.set(linksOptions.id, linkColor);
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
105
|
}
|
|
134
106
|
exports.Linker = Linker;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.Links = void 0;
|
|
4
|
+
const engine_1 = require("@tsparticles/engine");
|
|
4
5
|
const LinksShadow_1 = require("./LinksShadow");
|
|
5
6
|
const LinksTriangle_1 = require("./LinksTriangle");
|
|
6
|
-
const engine_1 = require("@tsparticles/engine");
|
|
7
7
|
class Links {
|
|
8
8
|
constructor() {
|
|
9
9
|
this.blink = false;
|
package/cjs/Utils.js
CHANGED
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.drawLinkTriangle = exports.drawLinkLine = void 0;
|
|
3
|
+
exports.setLinkFrequency = exports.getLinkKey = exports.drawLinkTriangle = exports.drawLinkLine = void 0;
|
|
4
4
|
const engine_1 = require("@tsparticles/engine");
|
|
5
|
-
function drawLinkLine(
|
|
5
|
+
function drawLinkLine(params) {
|
|
6
6
|
let drawn = false;
|
|
7
|
+
const { begin, end, maxDistance, context, canvasSize, width, backgroundMask, colorLine, opacity, links } = params;
|
|
7
8
|
if ((0, engine_1.getDistance)(begin, end) <= maxDistance) {
|
|
8
9
|
(0, engine_1.drawLine)(context, begin, end);
|
|
9
10
|
drawn = true;
|
|
10
11
|
}
|
|
11
|
-
else if (warp) {
|
|
12
|
+
else if (links.warp) {
|
|
12
13
|
let pi1;
|
|
13
14
|
let pi2;
|
|
14
15
|
const endNE = {
|
|
@@ -57,10 +58,11 @@ function drawLinkLine(context, width, begin, end, maxDistance, canvasSize, warp,
|
|
|
57
58
|
return;
|
|
58
59
|
}
|
|
59
60
|
context.lineWidth = width;
|
|
60
|
-
if (backgroundMask) {
|
|
61
|
-
context.globalCompositeOperation = composite;
|
|
61
|
+
if (backgroundMask.enable) {
|
|
62
|
+
context.globalCompositeOperation = backgroundMask.composite;
|
|
62
63
|
}
|
|
63
64
|
context.strokeStyle = (0, engine_1.getStyleFromRgb)(colorLine, opacity);
|
|
65
|
+
const { shadow } = links;
|
|
64
66
|
if (shadow.enable) {
|
|
65
67
|
const shadowColor = (0, engine_1.rangeColorToRgb)(shadow.color);
|
|
66
68
|
if (shadowColor) {
|
|
@@ -71,12 +73,28 @@ function drawLinkLine(context, width, begin, end, maxDistance, canvasSize, warp,
|
|
|
71
73
|
context.stroke();
|
|
72
74
|
}
|
|
73
75
|
exports.drawLinkLine = drawLinkLine;
|
|
74
|
-
function drawLinkTriangle(
|
|
76
|
+
function drawLinkTriangle(params) {
|
|
77
|
+
const { context, pos1, pos2, pos3, backgroundMask, colorTriangle, opacityTriangle } = params;
|
|
75
78
|
(0, engine_1.drawTriangle)(context, pos1, pos2, pos3);
|
|
76
|
-
if (backgroundMask) {
|
|
77
|
-
context.globalCompositeOperation = composite;
|
|
79
|
+
if (backgroundMask.enable) {
|
|
80
|
+
context.globalCompositeOperation = backgroundMask.composite;
|
|
78
81
|
}
|
|
79
82
|
context.fillStyle = (0, engine_1.getStyleFromRgb)(colorTriangle, opacityTriangle);
|
|
80
83
|
context.fill();
|
|
81
84
|
}
|
|
82
85
|
exports.drawLinkTriangle = drawLinkTriangle;
|
|
86
|
+
function getLinkKey(ids) {
|
|
87
|
+
ids.sort((a, b) => a - b);
|
|
88
|
+
return ids.join("_");
|
|
89
|
+
}
|
|
90
|
+
exports.getLinkKey = getLinkKey;
|
|
91
|
+
function setLinkFrequency(particles, dictionary) {
|
|
92
|
+
const key = getLinkKey(particles.map((t) => t.id));
|
|
93
|
+
let res = dictionary.get(key);
|
|
94
|
+
if (res === undefined) {
|
|
95
|
+
res = (0, engine_1.getRandom)();
|
|
96
|
+
dictionary.set(key, res);
|
|
97
|
+
}
|
|
98
|
+
return res;
|
|
99
|
+
}
|
|
100
|
+
exports.setLinkFrequency = setLinkFrequency;
|
package/cjs/index.js
CHANGED
|
@@ -13,24 +13,13 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
|
|
|
13
13
|
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
14
|
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
15
|
};
|
|
16
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
17
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
18
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
19
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
20
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
21
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
22
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
23
|
-
});
|
|
24
|
-
};
|
|
25
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
17
|
exports.loadParticlesLinksInteraction = void 0;
|
|
27
18
|
const interaction_1 = require("./interaction");
|
|
28
19
|
const plugin_1 = require("./plugin");
|
|
29
|
-
function loadParticlesLinksInteraction(engine) {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
yield (0, plugin_1.loadPlugin)(engine);
|
|
33
|
-
});
|
|
20
|
+
async function loadParticlesLinksInteraction(engine, refresh = true) {
|
|
21
|
+
await (0, interaction_1.loadLinksInteraction)(engine, refresh);
|
|
22
|
+
await (0, plugin_1.loadLinksPlugin)(engine, refresh);
|
|
34
23
|
}
|
|
35
24
|
exports.loadParticlesLinksInteraction = loadParticlesLinksInteraction;
|
|
36
25
|
__exportStar(require("./Options/Classes/Links"), exports);
|
package/cjs/interaction.js
CHANGED
|
@@ -1,19 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
3
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
4
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
5
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
6
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
7
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
8
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
9
|
-
});
|
|
10
|
-
};
|
|
11
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
|
-
exports.
|
|
3
|
+
exports.loadLinksInteraction = void 0;
|
|
13
4
|
const Linker_1 = require("./Linker");
|
|
14
|
-
function
|
|
15
|
-
|
|
16
|
-
yield engine.addInteractor("particlesLinks", (container) => new Linker_1.Linker(container));
|
|
17
|
-
});
|
|
5
|
+
async function loadLinksInteraction(engine, refresh = true) {
|
|
6
|
+
await engine.addInteractor("particlesLinks", (container) => new Linker_1.Linker(container), refresh);
|
|
18
7
|
}
|
|
19
|
-
exports.
|
|
8
|
+
exports.loadLinksInteraction = loadLinksInteraction;
|
package/cjs/plugin.js
CHANGED
|
@@ -1,15 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
3
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
4
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
5
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
6
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
7
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
8
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
9
|
-
});
|
|
10
|
-
};
|
|
11
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
|
-
exports.
|
|
3
|
+
exports.loadLinksPlugin = void 0;
|
|
13
4
|
const LinkInstance_1 = require("./LinkInstance");
|
|
14
5
|
class LinksPlugin {
|
|
15
6
|
constructor() {
|
|
@@ -24,10 +15,8 @@ class LinksPlugin {
|
|
|
24
15
|
return true;
|
|
25
16
|
}
|
|
26
17
|
}
|
|
27
|
-
function
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
yield engine.addPlugin(plugin);
|
|
31
|
-
});
|
|
18
|
+
async function loadLinksPlugin(engine, refresh = true) {
|
|
19
|
+
const plugin = new LinksPlugin();
|
|
20
|
+
await engine.addPlugin(plugin, refresh);
|
|
32
21
|
}
|
|
33
|
-
exports.
|
|
22
|
+
exports.loadLinksPlugin = loadLinksPlugin;
|