@tsparticles/interaction-particles-links 3.0.0-alpha.0 → 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.
Files changed (75) hide show
  1. package/README.md +25 -19
  2. package/browser/CircleWarp.js +7 -23
  3. package/browser/LinkInstance.js +121 -114
  4. package/browser/Linker.js +37 -54
  5. package/browser/Options/Classes/Links.js +1 -1
  6. package/browser/Utils.js +24 -8
  7. package/browser/index.js +5 -5
  8. package/browser/interaction.js +2 -2
  9. package/browser/plugin.js +2 -2
  10. package/cjs/CircleWarp.js +7 -23
  11. package/cjs/LinkInstance.js +123 -127
  12. package/cjs/Linker.js +66 -94
  13. package/cjs/Options/Classes/Links.js +1 -1
  14. package/cjs/Utils.js +26 -8
  15. package/cjs/index.js +3 -14
  16. package/cjs/interaction.js +4 -15
  17. package/cjs/plugin.js +5 -16
  18. package/esm/CircleWarp.js +7 -23
  19. package/esm/LinkInstance.js +121 -114
  20. package/esm/Linker.js +37 -54
  21. package/esm/Options/Classes/Links.js +1 -1
  22. package/esm/Utils.js +24 -8
  23. package/esm/index.js +5 -5
  24. package/esm/interaction.js +2 -2
  25. package/esm/plugin.js +2 -2
  26. package/package.json +6 -5
  27. package/report.html +4 -4
  28. package/tsparticles.interaction.particles.links.js +244 -204
  29. package/tsparticles.interaction.particles.links.min.js +1 -1
  30. package/tsparticles.interaction.particles.links.min.js.LICENSE.txt +1 -8
  31. package/types/CircleWarp.d.ts +1 -2
  32. package/types/Interfaces.d.ts +22 -0
  33. package/types/LinkInstance.d.ts +7 -8
  34. package/types/Linker.d.ts +3 -7
  35. package/types/Options/Classes/Links.d.ts +1 -2
  36. package/types/Options/Classes/LinksShadow.d.ts +1 -2
  37. package/types/Options/Classes/LinksTriangle.d.ts +1 -2
  38. package/types/Types.d.ts +47 -0
  39. package/types/Utils.d.ts +5 -4
  40. package/types/index.d.ts +1 -1
  41. package/types/interaction.d.ts +1 -1
  42. package/types/plugin.d.ts +1 -1
  43. package/umd/CircleWarp.js +7 -23
  44. package/umd/LinkInstance.js +121 -114
  45. package/umd/Linker.js +36 -53
  46. package/umd/Options/Classes/Links.js +2 -2
  47. package/umd/Utils.js +26 -8
  48. package/umd/index.js +3 -3
  49. package/umd/interaction.js +4 -4
  50. package/umd/plugin.js +4 -4
  51. package/browser/Options/Interfaces/IParticlesLinkOptions.js +0 -1
  52. package/cjs/LinkParticle.js +0 -2
  53. package/cjs/Options/Classes/ParticlesLinkOptions.js +0 -2
  54. package/cjs/Options/Interfaces/IParticlesLinkOptions.js +0 -2
  55. package/esm/ILink.js +0 -1
  56. package/esm/LinkContainer.js +0 -1
  57. package/esm/LinkParticle.js +0 -1
  58. package/esm/Options/Classes/ParticlesLinkOptions.js +0 -1
  59. package/esm/Options/Interfaces/IParticlesLinkOptions.js +0 -1
  60. package/types/ILink.d.ts +0 -9
  61. package/types/LinkContainer.d.ts +0 -7
  62. package/types/LinkParticle.d.ts +0 -11
  63. package/types/Options/Classes/ParticlesLinkOptions.d.ts +0 -5
  64. package/types/Options/Interfaces/IParticlesLinkOptions.d.ts +0 -7
  65. package/umd/LinkParticle.js +0 -12
  66. package/umd/Options/Classes/ParticlesLinkOptions.js +0 -12
  67. package/umd/Options/Interfaces/IParticlesLinkOptions.js +0 -12
  68. /package/browser/{ILink.js → Interfaces.js} +0 -0
  69. /package/browser/{LinkContainer.js → Types.js} +0 -0
  70. /package/cjs/{ILink.js → Interfaces.js} +0 -0
  71. /package/cjs/{LinkContainer.js → Types.js} +0 -0
  72. /package/{browser/LinkParticle.js → esm/Interfaces.js} +0 -0
  73. /package/{browser/Options/Classes/ParticlesLinkOptions.js → esm/Types.js} +0 -0
  74. /package/umd/{ILink.js → Interfaces.js} +0 -0
  75. /package/umd/{LinkContainer.js → Types.js} +0 -0
@@ -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
- function getLinkKey(ids) {
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
- var _a;
38
- const pOptions = particle.options;
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 = particle.links.filter((l) => pOptions.links && this.getLinkFrequency(particle, l.destination) <= pOptions.links.frequency);
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.drawTriangles(pOptions, particle, link, p1Links);
45
- if (link.opacity > 0 && ((_a = particle.retina.linksWidth) !== null && _a !== void 0 ? _a : 0) > 0) {
46
- this.drawLinkLine(particle, link);
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
- return __awaiter(this, void 0, void 0, function* () {
52
- this._freqs.links = new Map();
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
- particle.retina.linksDistance = particle.options.links.distance * ratio;
63
- particle.retina.linksWidth = particle.options.links.width * ratio;
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
- let distance = (0, engine_1.getDistance)(pos1, pos2);
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 pos2NE = {
22
- x: pos2.x - canvasSize.width,
23
- y: pos2.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
- distance = (0, engine_1.getDistance)(pos1, pos2NE);
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
- var _a;
57
- return __awaiter(this, void 0, void 0, function* () {
58
- if (!p1.options.links) {
59
- return;
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
- p1.links = [];
62
- const pos1 = p1.getPosition(), container = this.container, canvasSize = container.canvas.size;
63
- if (pos1.x < 0 || pos1.y < 0 || pos1.x > canvasSize.width || pos1.y > canvasSize.height) {
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 linkOpt1 = p1.options.links, optOpacity = linkOpt1.opacity, optDistance = (_a = p1.retina.linksDistance) !== null && _a !== void 0 ? _a : 0, warp = linkOpt1.warp, range = warp
67
- ? new CircleWarp_1.CircleWarp(pos1.x, pos1.y, optDistance, canvasSize)
68
- : new engine_1.Circle(pos1.x, pos1.y, optDistance), query = container.particles.quadTree.query(range);
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
- var _a;
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((_b = (_a = source === null || source === void 0 ? void 0 : source.links) !== null && _a !== void 0 ? _a : source === null || source === void 0 ? void 0 : source.lineLinked) !== null && _b !== void 0 ? _b : source === null || source === void 0 ? void 0 : source.line_linked);
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(context, width, begin, end, maxDistance, canvasSize, warp, backgroundMask, composite, colorLine, opacity, shadow) {
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(context, pos1, pos2, pos3, backgroundMask, composite, colorTriangle, opacityTriangle) {
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
- return __awaiter(this, void 0, void 0, function* () {
31
- yield (0, interaction_1.loadInteraction)(engine);
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);
@@ -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.loadInteraction = void 0;
3
+ exports.loadLinksInteraction = void 0;
13
4
  const Linker_1 = require("./Linker");
14
- function loadInteraction(engine) {
15
- return __awaiter(this, void 0, void 0, function* () {
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.loadInteraction = loadInteraction;
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.loadPlugin = void 0;
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 loadPlugin(engine) {
28
- return __awaiter(this, void 0, void 0, function* () {
29
- const plugin = new LinksPlugin();
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.loadPlugin = loadPlugin;
22
+ exports.loadLinksPlugin = loadLinksPlugin;