@tsparticles/interaction-external-connect 3.0.3 → 3.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/browser/Connector.js +13 -14
- package/browser/Utils.js +6 -5
- package/cjs/Connector.js +13 -14
- package/cjs/Utils.js +5 -4
- package/esm/Connector.js +13 -14
- package/esm/Utils.js +6 -5
- package/package.json +2 -2
- package/report.html +2 -2
- package/tsparticles.interaction.external.connect.js +24 -16
- package/tsparticles.interaction.external.connect.min.js +1 -1
- package/tsparticles.interaction.external.connect.min.js.LICENSE.txt +1 -1
- package/types/Types.d.ts +4 -4
- package/umd/Connector.js +13 -14
- package/umd/Utils.js +5 -4
package/browser/Connector.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ExternalInteractorBase, isInArray, } from "@tsparticles/engine";
|
|
2
2
|
import { Connect } from "./Options/Classes/Connect.js";
|
|
3
3
|
import { drawConnection } from "./Utils.js";
|
|
4
|
-
const connectMode = "connect";
|
|
4
|
+
const connectMode = "connect", minDistance = 0;
|
|
5
5
|
export class Connector extends ExternalInteractorBase {
|
|
6
6
|
constructor(container) {
|
|
7
7
|
super(container);
|
|
@@ -19,27 +19,26 @@ export class Connector extends ExternalInteractorBase {
|
|
|
19
19
|
async interact() {
|
|
20
20
|
const container = this.container, options = container.actualOptions;
|
|
21
21
|
if (options.interactivity.events.onHover.enable && container.interactivity.status === "pointermove") {
|
|
22
|
-
const mousePos = container.interactivity.mouse.position;
|
|
23
|
-
if (!
|
|
24
|
-
|
|
25
|
-
!
|
|
26
|
-
|
|
22
|
+
const mousePos = container.interactivity.mouse.position, { connectModeDistance, connectModeRadius } = container.retina;
|
|
23
|
+
if (!connectModeDistance ||
|
|
24
|
+
connectModeDistance < minDistance ||
|
|
25
|
+
!connectModeRadius ||
|
|
26
|
+
connectModeRadius < minDistance ||
|
|
27
27
|
!mousePos) {
|
|
28
28
|
return;
|
|
29
29
|
}
|
|
30
|
-
const distance = Math.abs(
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
const
|
|
34
|
-
|
|
35
|
-
const pos2 = p2.getPosition(), distMax = Math.abs(container.retina.connectModeDistance), xDiff = Math.abs(pos1.x - pos2.x), yDiff = Math.abs(pos1.y - pos2.y);
|
|
30
|
+
const distance = Math.abs(connectModeRadius), query = container.particles.quadTree.queryCircle(mousePos, distance, (p) => this.isEnabled(p));
|
|
31
|
+
query.forEach((p1, i) => {
|
|
32
|
+
const pos1 = p1.getPosition(), indexOffset = 1;
|
|
33
|
+
for (const p2 of query.slice(i + indexOffset)) {
|
|
34
|
+
const pos2 = p2.getPosition(), distMax = Math.abs(connectModeDistance), xDiff = Math.abs(pos1.x - pos2.x), yDiff = Math.abs(pos1.y - pos2.y);
|
|
36
35
|
if (xDiff < distMax && yDiff < distMax) {
|
|
37
36
|
drawConnection(container, p1, p2);
|
|
38
37
|
}
|
|
39
38
|
}
|
|
40
|
-
|
|
41
|
-
}
|
|
39
|
+
});
|
|
42
40
|
}
|
|
41
|
+
await Promise.resolve();
|
|
43
42
|
}
|
|
44
43
|
isEnabled(particle) {
|
|
45
44
|
const container = this.container, mouse = container.interactivity.mouse, events = (particle?.interactivity ?? container.actualOptions.interactivity).events;
|
package/browser/Utils.js
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
|
-
import { colorMix, drawLine, getStyleFromHsl, getStyleFromRgb, } from "@tsparticles/engine";
|
|
1
|
+
import { clamp, colorMix, drawLine, getStyleFromHsl, getStyleFromRgb, } from "@tsparticles/engine";
|
|
2
|
+
const gradientMin = 0, gradientMax = 1, defaultLinksWidth = 0;
|
|
2
3
|
export function gradient(context, p1, p2, opacity) {
|
|
3
4
|
const gradStop = Math.floor(p2.getRadius() / p1.getRadius()), color1 = p1.getFillColor(), color2 = p2.getFillColor();
|
|
4
5
|
if (!color1 || !color2) {
|
|
5
6
|
return;
|
|
6
7
|
}
|
|
7
8
|
const sourcePos = p1.getPosition(), destPos = p2.getPosition(), midRgb = colorMix(color1, color2, p1.getRadius(), p2.getRadius()), grad = context.createLinearGradient(sourcePos.x, sourcePos.y, destPos.x, destPos.y);
|
|
8
|
-
grad.addColorStop(
|
|
9
|
-
grad.addColorStop(gradStop
|
|
10
|
-
grad.addColorStop(
|
|
9
|
+
grad.addColorStop(gradientMin, getStyleFromHsl(color1, opacity));
|
|
10
|
+
grad.addColorStop(clamp(gradStop, gradientMin, gradientMax), getStyleFromRgb(midRgb, opacity));
|
|
11
|
+
grad.addColorStop(gradientMax, getStyleFromHsl(color2, opacity));
|
|
11
12
|
return grad;
|
|
12
13
|
}
|
|
13
14
|
export function drawConnectLine(context, width, lineStyle, begin, end) {
|
|
@@ -30,6 +31,6 @@ export function drawConnection(container, p1, p2) {
|
|
|
30
31
|
return;
|
|
31
32
|
}
|
|
32
33
|
const pos1 = p1.getPosition(), pos2 = p2.getPosition();
|
|
33
|
-
drawConnectLine(ctx, p1.retina.linksWidth ??
|
|
34
|
+
drawConnectLine(ctx, p1.retina.linksWidth ?? defaultLinksWidth, ls, pos1, pos2);
|
|
34
35
|
});
|
|
35
36
|
}
|
package/cjs/Connector.js
CHANGED
|
@@ -4,7 +4,7 @@ exports.Connector = void 0;
|
|
|
4
4
|
const engine_1 = require("@tsparticles/engine");
|
|
5
5
|
const Connect_js_1 = require("./Options/Classes/Connect.js");
|
|
6
6
|
const Utils_js_1 = require("./Utils.js");
|
|
7
|
-
const connectMode = "connect";
|
|
7
|
+
const connectMode = "connect", minDistance = 0;
|
|
8
8
|
class Connector extends engine_1.ExternalInteractorBase {
|
|
9
9
|
constructor(container) {
|
|
10
10
|
super(container);
|
|
@@ -22,27 +22,26 @@ class Connector extends engine_1.ExternalInteractorBase {
|
|
|
22
22
|
async interact() {
|
|
23
23
|
const container = this.container, options = container.actualOptions;
|
|
24
24
|
if (options.interactivity.events.onHover.enable && container.interactivity.status === "pointermove") {
|
|
25
|
-
const mousePos = container.interactivity.mouse.position;
|
|
26
|
-
if (!
|
|
27
|
-
|
|
28
|
-
!
|
|
29
|
-
|
|
25
|
+
const mousePos = container.interactivity.mouse.position, { connectModeDistance, connectModeRadius } = container.retina;
|
|
26
|
+
if (!connectModeDistance ||
|
|
27
|
+
connectModeDistance < minDistance ||
|
|
28
|
+
!connectModeRadius ||
|
|
29
|
+
connectModeRadius < minDistance ||
|
|
30
30
|
!mousePos) {
|
|
31
31
|
return;
|
|
32
32
|
}
|
|
33
|
-
const distance = Math.abs(
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
const
|
|
37
|
-
|
|
38
|
-
const pos2 = p2.getPosition(), distMax = Math.abs(container.retina.connectModeDistance), xDiff = Math.abs(pos1.x - pos2.x), yDiff = Math.abs(pos1.y - pos2.y);
|
|
33
|
+
const distance = Math.abs(connectModeRadius), query = container.particles.quadTree.queryCircle(mousePos, distance, (p) => this.isEnabled(p));
|
|
34
|
+
query.forEach((p1, i) => {
|
|
35
|
+
const pos1 = p1.getPosition(), indexOffset = 1;
|
|
36
|
+
for (const p2 of query.slice(i + indexOffset)) {
|
|
37
|
+
const pos2 = p2.getPosition(), distMax = Math.abs(connectModeDistance), xDiff = Math.abs(pos1.x - pos2.x), yDiff = Math.abs(pos1.y - pos2.y);
|
|
39
38
|
if (xDiff < distMax && yDiff < distMax) {
|
|
40
39
|
(0, Utils_js_1.drawConnection)(container, p1, p2);
|
|
41
40
|
}
|
|
42
41
|
}
|
|
43
|
-
|
|
44
|
-
}
|
|
42
|
+
});
|
|
45
43
|
}
|
|
44
|
+
await Promise.resolve();
|
|
46
45
|
}
|
|
47
46
|
isEnabled(particle) {
|
|
48
47
|
const container = this.container, mouse = container.interactivity.mouse, events = (particle?.interactivity ?? container.actualOptions.interactivity).events;
|
package/cjs/Utils.js
CHANGED
|
@@ -2,15 +2,16 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.drawConnection = exports.lineStyle = exports.drawConnectLine = exports.gradient = void 0;
|
|
4
4
|
const engine_1 = require("@tsparticles/engine");
|
|
5
|
+
const gradientMin = 0, gradientMax = 1, defaultLinksWidth = 0;
|
|
5
6
|
function gradient(context, p1, p2, opacity) {
|
|
6
7
|
const gradStop = Math.floor(p2.getRadius() / p1.getRadius()), color1 = p1.getFillColor(), color2 = p2.getFillColor();
|
|
7
8
|
if (!color1 || !color2) {
|
|
8
9
|
return;
|
|
9
10
|
}
|
|
10
11
|
const sourcePos = p1.getPosition(), destPos = p2.getPosition(), midRgb = (0, engine_1.colorMix)(color1, color2, p1.getRadius(), p2.getRadius()), grad = context.createLinearGradient(sourcePos.x, sourcePos.y, destPos.x, destPos.y);
|
|
11
|
-
grad.addColorStop(
|
|
12
|
-
grad.addColorStop(gradStop
|
|
13
|
-
grad.addColorStop(
|
|
12
|
+
grad.addColorStop(gradientMin, (0, engine_1.getStyleFromHsl)(color1, opacity));
|
|
13
|
+
grad.addColorStop((0, engine_1.clamp)(gradStop, gradientMin, gradientMax), (0, engine_1.getStyleFromRgb)(midRgb, opacity));
|
|
14
|
+
grad.addColorStop(gradientMax, (0, engine_1.getStyleFromHsl)(color2, opacity));
|
|
14
15
|
return grad;
|
|
15
16
|
}
|
|
16
17
|
exports.gradient = gradient;
|
|
@@ -36,7 +37,7 @@ function drawConnection(container, p1, p2) {
|
|
|
36
37
|
return;
|
|
37
38
|
}
|
|
38
39
|
const pos1 = p1.getPosition(), pos2 = p2.getPosition();
|
|
39
|
-
drawConnectLine(ctx, p1.retina.linksWidth ??
|
|
40
|
+
drawConnectLine(ctx, p1.retina.linksWidth ?? defaultLinksWidth, ls, pos1, pos2);
|
|
40
41
|
});
|
|
41
42
|
}
|
|
42
43
|
exports.drawConnection = drawConnection;
|
package/esm/Connector.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ExternalInteractorBase, isInArray, } from "@tsparticles/engine";
|
|
2
2
|
import { Connect } from "./Options/Classes/Connect.js";
|
|
3
3
|
import { drawConnection } from "./Utils.js";
|
|
4
|
-
const connectMode = "connect";
|
|
4
|
+
const connectMode = "connect", minDistance = 0;
|
|
5
5
|
export class Connector extends ExternalInteractorBase {
|
|
6
6
|
constructor(container) {
|
|
7
7
|
super(container);
|
|
@@ -19,27 +19,26 @@ export class Connector extends ExternalInteractorBase {
|
|
|
19
19
|
async interact() {
|
|
20
20
|
const container = this.container, options = container.actualOptions;
|
|
21
21
|
if (options.interactivity.events.onHover.enable && container.interactivity.status === "pointermove") {
|
|
22
|
-
const mousePos = container.interactivity.mouse.position;
|
|
23
|
-
if (!
|
|
24
|
-
|
|
25
|
-
!
|
|
26
|
-
|
|
22
|
+
const mousePos = container.interactivity.mouse.position, { connectModeDistance, connectModeRadius } = container.retina;
|
|
23
|
+
if (!connectModeDistance ||
|
|
24
|
+
connectModeDistance < minDistance ||
|
|
25
|
+
!connectModeRadius ||
|
|
26
|
+
connectModeRadius < minDistance ||
|
|
27
27
|
!mousePos) {
|
|
28
28
|
return;
|
|
29
29
|
}
|
|
30
|
-
const distance = Math.abs(
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
const
|
|
34
|
-
|
|
35
|
-
const pos2 = p2.getPosition(), distMax = Math.abs(container.retina.connectModeDistance), xDiff = Math.abs(pos1.x - pos2.x), yDiff = Math.abs(pos1.y - pos2.y);
|
|
30
|
+
const distance = Math.abs(connectModeRadius), query = container.particles.quadTree.queryCircle(mousePos, distance, (p) => this.isEnabled(p));
|
|
31
|
+
query.forEach((p1, i) => {
|
|
32
|
+
const pos1 = p1.getPosition(), indexOffset = 1;
|
|
33
|
+
for (const p2 of query.slice(i + indexOffset)) {
|
|
34
|
+
const pos2 = p2.getPosition(), distMax = Math.abs(connectModeDistance), xDiff = Math.abs(pos1.x - pos2.x), yDiff = Math.abs(pos1.y - pos2.y);
|
|
36
35
|
if (xDiff < distMax && yDiff < distMax) {
|
|
37
36
|
drawConnection(container, p1, p2);
|
|
38
37
|
}
|
|
39
38
|
}
|
|
40
|
-
|
|
41
|
-
}
|
|
39
|
+
});
|
|
42
40
|
}
|
|
41
|
+
await Promise.resolve();
|
|
43
42
|
}
|
|
44
43
|
isEnabled(particle) {
|
|
45
44
|
const container = this.container, mouse = container.interactivity.mouse, events = (particle?.interactivity ?? container.actualOptions.interactivity).events;
|
package/esm/Utils.js
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
|
-
import { colorMix, drawLine, getStyleFromHsl, getStyleFromRgb, } from "@tsparticles/engine";
|
|
1
|
+
import { clamp, colorMix, drawLine, getStyleFromHsl, getStyleFromRgb, } from "@tsparticles/engine";
|
|
2
|
+
const gradientMin = 0, gradientMax = 1, defaultLinksWidth = 0;
|
|
2
3
|
export function gradient(context, p1, p2, opacity) {
|
|
3
4
|
const gradStop = Math.floor(p2.getRadius() / p1.getRadius()), color1 = p1.getFillColor(), color2 = p2.getFillColor();
|
|
4
5
|
if (!color1 || !color2) {
|
|
5
6
|
return;
|
|
6
7
|
}
|
|
7
8
|
const sourcePos = p1.getPosition(), destPos = p2.getPosition(), midRgb = colorMix(color1, color2, p1.getRadius(), p2.getRadius()), grad = context.createLinearGradient(sourcePos.x, sourcePos.y, destPos.x, destPos.y);
|
|
8
|
-
grad.addColorStop(
|
|
9
|
-
grad.addColorStop(gradStop
|
|
10
|
-
grad.addColorStop(
|
|
9
|
+
grad.addColorStop(gradientMin, getStyleFromHsl(color1, opacity));
|
|
10
|
+
grad.addColorStop(clamp(gradStop, gradientMin, gradientMax), getStyleFromRgb(midRgb, opacity));
|
|
11
|
+
grad.addColorStop(gradientMax, getStyleFromHsl(color2, opacity));
|
|
11
12
|
return grad;
|
|
12
13
|
}
|
|
13
14
|
export function drawConnectLine(context, width, lineStyle, begin, end) {
|
|
@@ -30,6 +31,6 @@ export function drawConnection(container, p1, p2) {
|
|
|
30
31
|
return;
|
|
31
32
|
}
|
|
32
33
|
const pos1 = p1.getPosition(), pos2 = p2.getPosition();
|
|
33
|
-
drawConnectLine(ctx, p1.retina.linksWidth ??
|
|
34
|
+
drawConnectLine(ctx, p1.retina.linksWidth ?? defaultLinksWidth, ls, pos1, pos2);
|
|
34
35
|
});
|
|
35
36
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tsparticles/interaction-external-connect",
|
|
3
|
-
"version": "3.0
|
|
3
|
+
"version": "3.1.0",
|
|
4
4
|
"description": "tsParticles connect external interaction",
|
|
5
5
|
"homepage": "https://particles.js.org",
|
|
6
6
|
"repository": {
|
|
@@ -87,7 +87,7 @@
|
|
|
87
87
|
"./package.json": "./package.json"
|
|
88
88
|
},
|
|
89
89
|
"dependencies": {
|
|
90
|
-
"@tsparticles/engine": "^3.0
|
|
90
|
+
"@tsparticles/engine": "^3.1.0"
|
|
91
91
|
},
|
|
92
92
|
"publishConfig": {
|
|
93
93
|
"access": "public"
|
package/report.html
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8"/>
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
|
6
|
-
<title>@tsparticles/interaction-external-connect [
|
|
6
|
+
<title>@tsparticles/interaction-external-connect [13 Jan 2024 at 22:59]</title>
|
|
7
7
|
<link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABrVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+O1foceMD///+J0/qK1Pr7/v8Xdr/9///W8P4UdL7L7P0Scr2r4Pyj3vwad8D5/f/2/f+55f3E6f34+/2H0/ojfMKpzOd0rNgQcb3F3O/j9f7c8v6g3Pz0/P/w+v/q+P7n9v6T1/uQ1vuE0vqLut/y+v+Z2fvt+f+15Pzv9fuc2/vR7v2V2Pvd6/bg9P7I6/285/2y4/yp3/zp8vk8i8kqgMT7/P31+fyv4vxGkcz6/P6/6P3j7vfS5PNnpNUxhcbO7f7F6v3O4vHK3/DA2u631Ouy0eqXweKJud5wqthfoNMMbLvY8f73+v2dxeR8sNtTmdDx9/zX6PSjyeaCtd1YnNGX2PuQveCGt95Nls42h8dLlM3F4vBtAAAAM3RSTlMAAyOx0/sKBvik8opWGBMOAe3l1snDm2E9LSb06eHcu5JpHbarfHZCN9CBb08zzkdNS0kYaptYAAAFV0lEQVRYw92X51/aYBDHHS2O2qqttVbrqNq9m+TJIAYIShBkWwqIiCgoWvfeq7Z2/s29hyQNyUcR7LveGwVyXy6XH8/9rqxglLfUPLxVduUor3h0rfp2TYvpivk37929TkG037hffoX0+peVtZQc1589rigVUdXS/ABSAyEmGIO/1XfvldSK8vs3OqB6u3m0nxmIrvgB0dj7rr7Y9IbuF68hnfFaiHA/sxqm0wciIG43P60qKv9WXWc1RXGh/mFESFABTSBi0sNAKzqet17eCtOb3kZIDwxEEU0oAIJGYxNBDhBND29e0rtXXbcpuPmED9IhEAAQ/AXEaF8EPmnrrKsv0LvWR3fg5sWDNAFZOgAgaKvZDogHNU9MFwnnYROkc56RD5CjAbQX9Ow4g7upCsvYu55aSI/Nj0H1akgKQEUM94dwK65hYRmFU9MIcH/fqJYOZYcnuJSU/waKDgTOEVaVKhwrTRP5XzgSpAITYzom7UvkhFX5VutmxeNnWDjjswTKTyfgluNDGbUpWissXhF3s7mlSml+czWkg3D0l1nNjGNjz3myOQOa1KM/jOS6ebdbAVTCi4gljHSFrviza7tOgRWcS0MOUX9zdNgag5w7rRqA44Lzw0hr1WqES36dFliSJFlh2rXIae3FFcDDgKdxrUIDePr8jGcSClV1u7A9xeN0ModY/pHMxmR1EzRh8TJiwqsHmKW0l4FCEZI+jHio+JdPPE9qwQtTRxku2D8sIeRL2LnxWSllANCQGOIiqVHAz2ye2JR0DcH+HoxDkaADLjgxjKQ+AwCX/g0+DNgdG0ukYCONAe+dbc2IAc6fwt1ARoDSezNHxV2Cmzwv3O6lDMV55edBGwGK9n1+x2F8EDfAGCxug8MhpsMEcTEAWf3rx2vZhe/LAmtIn/6apE6PN0ULKgywD9mmdxbmFl3OvD5AS5fW5zLbv/YHmcsBTjf/afDz3MaZTVCfAP9z6/Bw6ycv8EUBWJIn9zYcoAWWlW9+OzO3vkTy8H+RANLmdrpOuYWdZYEXpo+TlCJrW5EARb7fF+bWdqf3hhyZI1nWJQHgznErZhbjoEsWqi8dQNoE294aldzFurwSABL2XXMf9+H1VQGke9exw5P/AnA5Pv5ngMul7LOvO922iwACu8WkCwLCafvM4CeWPxfA8lNHcWZSoi8EwMAIciKX2Z4SWCMAa3snCZ/G4EA8D6CMLNFsGQhkkz/gQNEBbPCbWsxGUpYVu3z8IyNAknwJkfPMEhLyrdi5RTyUVACkw4GSFRNWJNEW+fgPGwHD8/JxnRuLabN4CGNRkAE23na2+VmEAUmrYymSGjMAYqH84YUIyzgzs3XC7gNgH36Vcc4zKY9o9fgPBXUAiHHwVboBHGLiX6Zcjp1f2wu4tvzZKo0ecPnDtQYDQvJXaBeNzce45Fp28ZQLrEZVuFqgBwOalArKXnW1UzlnSusQKJqKYNuz4tOnI6sZG4zanpemv+7ySU2jbA9h6uhcgpfy6G2PahirDZ6zvq6zDduMVFTKvzw8wgyEdelwY9in3XkEPs3osJuwRQ4qTkfzifndg9Gfc4pdsu82+tTnHZTBa2EAMrqr2t43pguc8tNm7JQVQ2S0ukj2d22dhXYP0/veWtwKrCkNoNimAN5+Xr/oLrxswKbVJjteWrX7eR63o4j9q0GxnaBdWgGA5VStpanIjQmEhV0/nVt5VOFUvix6awJhPcAaTEShgrG+iGyvb5a0Ndb1YGHFPEwoqAinoaykaID1o1pdPNu7XsnCKQ3R+hwWIIhGvORcJUBYXe3Xa3vq/mF/N9V13ugufMkfXn+KHsRD0B8AAAAASUVORK5CYII=" type="image/x-icon" />
|
|
8
8
|
|
|
9
9
|
<script>
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
<body>
|
|
32
32
|
<div id="app"></div>
|
|
33
33
|
<script>
|
|
34
|
-
window.chartData = [{"label":"tsparticles.interaction.external.connect.js","isAsset":true,"statSize":
|
|
34
|
+
window.chartData = [{"label":"tsparticles.interaction.external.connect.js","isAsset":true,"statSize":5195,"parsedSize":8970,"gzipSize":2685,"groups":[{"label":"dist/browser","path":"./dist/browser","statSize":5153,"groups":[{"id":881,"label":"index.js + 4 modules (concatenated)","path":"./dist/browser/index.js + 4 modules (concatenated)","statSize":5153,"parsedSize":8970,"gzipSize":2685,"concatenated":true,"groups":[{"label":"dist/browser","path":"./dist/browser/index.js + 4 modules (concatenated)/dist/browser","statSize":5153,"groups":[{"id":null,"label":"index.js","path":"./dist/browser/index.js + 4 modules (concatenated)/dist/browser/index.js","statSize":423,"parsedSize":736,"gzipSize":220,"inaccurateSizes":true},{"id":null,"label":"Connector.js","path":"./dist/browser/index.js + 4 modules (concatenated)/dist/browser/Connector.js","statSize":2444,"parsedSize":4254,"gzipSize":1273,"inaccurateSizes":true},{"label":"Options/Classes","path":"./dist/browser/index.js + 4 modules (concatenated)/dist/browser/Options/Classes","statSize":636,"groups":[{"id":null,"label":"Connect.js","path":"./dist/browser/index.js + 4 modules (concatenated)/dist/browser/Options/Classes/Connect.js","statSize":426,"parsedSize":741,"gzipSize":221,"inaccurateSizes":true},{"id":null,"label":"ConnectLinks.js","path":"./dist/browser/index.js + 4 modules (concatenated)/dist/browser/Options/Classes/ConnectLinks.js","statSize":210,"parsedSize":365,"gzipSize":109,"inaccurateSizes":true}],"parsedSize":1107,"gzipSize":331,"inaccurateSizes":true},{"id":null,"label":"Utils.js","path":"./dist/browser/index.js + 4 modules (concatenated)/dist/browser/Utils.js","statSize":1650,"parsedSize":2872,"gzipSize":859,"inaccurateSizes":true}],"parsedSize":8970,"gzipSize":2685,"inaccurateSizes":true}]}],"parsedSize":8970,"gzipSize":2685},{"label":"engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles","path":"./engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles","statSize":42,"groups":[{"id":533,"label":"engine\",\"root\":\"window\"}","path":"./engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles/engine\",\"root\":\"window\"}","statSize":42}],"parsedSize":0,"gzipSize":0}],"isInitialByEntrypoint":{"tsparticles.interaction.external.connect":true}}];
|
|
35
35
|
window.entrypoints = ["tsparticles.interaction.external.connect","tsparticles.interaction.external.connect.min"];
|
|
36
36
|
window.defaultSizes = "parsed";
|
|
37
37
|
</script>
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Demo / Generator : https://particles.js.org/
|
|
5
5
|
* GitHub : https://www.github.com/matteobruni/tsparticles
|
|
6
6
|
* How to use? : Check the GitHub README
|
|
7
|
-
* v3.0
|
|
7
|
+
* v3.1.0
|
|
8
8
|
*/
|
|
9
9
|
(function webpackUniversalModuleDefinition(root, factory) {
|
|
10
10
|
if(typeof exports === 'object' && typeof module === 'object')
|
|
@@ -135,6 +135,9 @@ class Connect {
|
|
|
135
135
|
}
|
|
136
136
|
;// CONCATENATED MODULE: ./dist/browser/Utils.js
|
|
137
137
|
|
|
138
|
+
const gradientMin = 0,
|
|
139
|
+
gradientMax = 1,
|
|
140
|
+
defaultLinksWidth = 0;
|
|
138
141
|
function gradient(context, p1, p2, opacity) {
|
|
139
142
|
const gradStop = Math.floor(p2.getRadius() / p1.getRadius()),
|
|
140
143
|
color1 = p1.getFillColor(),
|
|
@@ -146,9 +149,9 @@ function gradient(context, p1, p2, opacity) {
|
|
|
146
149
|
destPos = p2.getPosition(),
|
|
147
150
|
midRgb = (0,engine_root_window_.colorMix)(color1, color2, p1.getRadius(), p2.getRadius()),
|
|
148
151
|
grad = context.createLinearGradient(sourcePos.x, sourcePos.y, destPos.x, destPos.y);
|
|
149
|
-
grad.addColorStop(
|
|
150
|
-
grad.addColorStop(gradStop
|
|
151
|
-
grad.addColorStop(
|
|
152
|
+
grad.addColorStop(gradientMin, (0,engine_root_window_.getStyleFromHsl)(color1, opacity));
|
|
153
|
+
grad.addColorStop((0,engine_root_window_.clamp)(gradStop, gradientMin, gradientMax), (0,engine_root_window_.getStyleFromRgb)(midRgb, opacity));
|
|
154
|
+
grad.addColorStop(gradientMax, (0,engine_root_window_.getStyleFromHsl)(color2, opacity));
|
|
152
155
|
return grad;
|
|
153
156
|
}
|
|
154
157
|
function drawConnectLine(context, width, lineStyle, begin, end) {
|
|
@@ -173,14 +176,15 @@ function drawConnection(container, p1, p2) {
|
|
|
173
176
|
}
|
|
174
177
|
const pos1 = p1.getPosition(),
|
|
175
178
|
pos2 = p2.getPosition();
|
|
176
|
-
drawConnectLine(ctx, p1.retina.linksWidth ??
|
|
179
|
+
drawConnectLine(ctx, p1.retina.linksWidth ?? defaultLinksWidth, ls, pos1, pos2);
|
|
177
180
|
});
|
|
178
181
|
}
|
|
179
182
|
;// CONCATENATED MODULE: ./dist/browser/Connector.js
|
|
180
183
|
|
|
181
184
|
|
|
182
185
|
|
|
183
|
-
const connectMode = "connect"
|
|
186
|
+
const connectMode = "connect",
|
|
187
|
+
minDistance = 0;
|
|
184
188
|
class Connector extends engine_root_window_.ExternalInteractorBase {
|
|
185
189
|
constructor(container) {
|
|
186
190
|
super(container);
|
|
@@ -199,27 +203,31 @@ class Connector extends engine_root_window_.ExternalInteractorBase {
|
|
|
199
203
|
const container = this.container,
|
|
200
204
|
options = container.actualOptions;
|
|
201
205
|
if (options.interactivity.events.onHover.enable && container.interactivity.status === "pointermove") {
|
|
202
|
-
const mousePos = container.interactivity.mouse.position
|
|
203
|
-
|
|
206
|
+
const mousePos = container.interactivity.mouse.position,
|
|
207
|
+
{
|
|
208
|
+
connectModeDistance,
|
|
209
|
+
connectModeRadius
|
|
210
|
+
} = container.retina;
|
|
211
|
+
if (!connectModeDistance || connectModeDistance < minDistance || !connectModeRadius || connectModeRadius < minDistance || !mousePos) {
|
|
204
212
|
return;
|
|
205
213
|
}
|
|
206
|
-
const distance = Math.abs(
|
|
214
|
+
const distance = Math.abs(connectModeRadius),
|
|
207
215
|
query = container.particles.quadTree.queryCircle(mousePos, distance, p => this.isEnabled(p));
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
for (const p2 of query.slice(i +
|
|
216
|
+
query.forEach((p1, i) => {
|
|
217
|
+
const pos1 = p1.getPosition(),
|
|
218
|
+
indexOffset = 1;
|
|
219
|
+
for (const p2 of query.slice(i + indexOffset)) {
|
|
212
220
|
const pos2 = p2.getPosition(),
|
|
213
|
-
distMax = Math.abs(
|
|
221
|
+
distMax = Math.abs(connectModeDistance),
|
|
214
222
|
xDiff = Math.abs(pos1.x - pos2.x),
|
|
215
223
|
yDiff = Math.abs(pos1.y - pos2.y);
|
|
216
224
|
if (xDiff < distMax && yDiff < distMax) {
|
|
217
225
|
drawConnection(container, p1, p2);
|
|
218
226
|
}
|
|
219
227
|
}
|
|
220
|
-
|
|
221
|
-
}
|
|
228
|
+
});
|
|
222
229
|
}
|
|
230
|
+
await Promise.resolve();
|
|
223
231
|
}
|
|
224
232
|
isEnabled(particle) {
|
|
225
233
|
const container = this.container,
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! For license information please see tsparticles.interaction.external.connect.min.js.LICENSE.txt */
|
|
2
|
-
!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],e);else{var
|
|
2
|
+
!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],e);else{var o="object"==typeof exports?e(require("@tsparticles/engine")):e(t.window);for(var n in o)("object"==typeof exports?exports:t)[n]=o[n]}}(this,(t=>(()=>{"use strict";var e={533:e=>{e.exports=t}},o={};function n(t){var i=o[t];if(void 0!==i)return i.exports;var r=o[t]={exports:{}};return e[t](r,r.exports,n),r.exports}n.d=(t,e)=>{for(var o in e)n.o(e,o)&&!n.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:e[o]})},n.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),n.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var i={};return(()=>{n.r(i),n.d(i,{Connect:()=>o,ConnectLinks:()=>e,loadExternalConnectInteraction:()=>d});var t=n(533);class e{constructor(){this.opacity=.5}load(t){t&&void 0!==t.opacity&&(this.opacity=t.opacity)}}class o{constructor(){this.distance=80,this.links=new e,this.radius=60}load(t){t&&(void 0!==t.distance&&(this.distance=t.distance),this.links.load(t.links),void 0!==t.radius&&(this.radius=t.radius))}}const r=0,s=1;function a(e,o,n,i){const a=e.actualOptions.interactivity.modes.connect;if(a)return function(e,o,n,i){const a=Math.floor(n.getRadius()/o.getRadius()),c=o.getFillColor(),l=n.getFillColor();if(!c||!l)return;const d=o.getPosition(),u=n.getPosition(),p=(0,t.colorMix)(c,l,o.getRadius(),n.getRadius()),y=e.createLinearGradient(d.x,d.y,u.x,u.y);return y.addColorStop(r,(0,t.getStyleFromHsl)(c,i)),y.addColorStop((0,t.clamp)(a,r,s),(0,t.getStyleFromRgb)(p,i)),y.addColorStop(s,(0,t.getStyleFromHsl)(l,i)),y}(o,n,i,a.links.opacity)}function c(e,o,n){e.canvas.draw((i=>{const r=a(e,i,o,n);if(!r)return;const s=o.getPosition(),c=n.getPosition();!function(e,o,n,i,r){(0,t.drawLine)(e,i,r),e.lineWidth=o,e.strokeStyle=n,e.stroke()}(i,o.retina.linksWidth??0,r,s,c)}))}class l extends t.ExternalInteractorBase{constructor(t){super(t)}clear(){}init(){const t=this.container,e=t.actualOptions.interactivity.modes.connect;e&&(t.retina.connectModeDistance=e.distance*t.retina.pixelRatio,t.retina.connectModeRadius=e.radius*t.retina.pixelRatio)}async interact(){const t=this.container;if(t.actualOptions.interactivity.events.onHover.enable&&"pointermove"===t.interactivity.status){const e=t.interactivity.mouse.position,{connectModeDistance:o,connectModeRadius:n}=t.retina;if(!o||o<0||!n||n<0||!e)return;const i=Math.abs(n),r=t.particles.quadTree.queryCircle(e,i,(t=>this.isEnabled(t)));r.forEach(((e,n)=>{const i=e.getPosition();for(const s of r.slice(n+1)){const n=s.getPosition(),r=Math.abs(o),a=Math.abs(i.x-n.x),l=Math.abs(i.y-n.y);a<r&&l<r&&c(t,e,s)}}))}await Promise.resolve()}isEnabled(e){const o=this.container,n=o.interactivity.mouse,i=(e?.interactivity??o.actualOptions.interactivity).events;return!(!i.onHover.enable||!n.position)&&(0,t.isInArray)("connect",i.onHover.mode)}loadModeOptions(t,...e){t.connect||(t.connect=new o);for(const o of e)t.connect.load(o?.connect)}reset(){}}async function d(t,e=!0){await t.addInteractor("externalConnect",(t=>new l(t)),e)}})(),i})()));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
/*! tsParticles Connect External Interaction v3.0
|
|
1
|
+
/*! tsParticles Connect External Interaction v3.1.0 by Matteo Bruni */
|
package/types/Types.d.ts
CHANGED
|
@@ -2,12 +2,12 @@ import type { Container, Particle } from "@tsparticles/engine";
|
|
|
2
2
|
import type { Connect } from "./Options/Classes/Connect.js";
|
|
3
3
|
import type { ConnectOptions } from "./Options/Classes/ConnectOptions.js";
|
|
4
4
|
import type { IConnect } from "./Options/Interfaces/IConnect.js";
|
|
5
|
-
export
|
|
5
|
+
export interface IConnectMode {
|
|
6
6
|
connect: IConnect;
|
|
7
|
-
}
|
|
8
|
-
export
|
|
7
|
+
}
|
|
8
|
+
export interface ConnectMode {
|
|
9
9
|
connect?: Connect;
|
|
10
|
-
}
|
|
10
|
+
}
|
|
11
11
|
export type ConnectContainer = Container & {
|
|
12
12
|
actualOptions: ConnectOptions;
|
|
13
13
|
retina: {
|
package/umd/Connector.js
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
const engine_1 = require("@tsparticles/engine");
|
|
14
14
|
const Connect_js_1 = require("./Options/Classes/Connect.js");
|
|
15
15
|
const Utils_js_1 = require("./Utils.js");
|
|
16
|
-
const connectMode = "connect";
|
|
16
|
+
const connectMode = "connect", minDistance = 0;
|
|
17
17
|
class Connector extends engine_1.ExternalInteractorBase {
|
|
18
18
|
constructor(container) {
|
|
19
19
|
super(container);
|
|
@@ -31,27 +31,26 @@
|
|
|
31
31
|
async interact() {
|
|
32
32
|
const container = this.container, options = container.actualOptions;
|
|
33
33
|
if (options.interactivity.events.onHover.enable && container.interactivity.status === "pointermove") {
|
|
34
|
-
const mousePos = container.interactivity.mouse.position;
|
|
35
|
-
if (!
|
|
36
|
-
|
|
37
|
-
!
|
|
38
|
-
|
|
34
|
+
const mousePos = container.interactivity.mouse.position, { connectModeDistance, connectModeRadius } = container.retina;
|
|
35
|
+
if (!connectModeDistance ||
|
|
36
|
+
connectModeDistance < minDistance ||
|
|
37
|
+
!connectModeRadius ||
|
|
38
|
+
connectModeRadius < minDistance ||
|
|
39
39
|
!mousePos) {
|
|
40
40
|
return;
|
|
41
41
|
}
|
|
42
|
-
const distance = Math.abs(
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
const
|
|
46
|
-
|
|
47
|
-
const pos2 = p2.getPosition(), distMax = Math.abs(container.retina.connectModeDistance), xDiff = Math.abs(pos1.x - pos2.x), yDiff = Math.abs(pos1.y - pos2.y);
|
|
42
|
+
const distance = Math.abs(connectModeRadius), query = container.particles.quadTree.queryCircle(mousePos, distance, (p) => this.isEnabled(p));
|
|
43
|
+
query.forEach((p1, i) => {
|
|
44
|
+
const pos1 = p1.getPosition(), indexOffset = 1;
|
|
45
|
+
for (const p2 of query.slice(i + indexOffset)) {
|
|
46
|
+
const pos2 = p2.getPosition(), distMax = Math.abs(connectModeDistance), xDiff = Math.abs(pos1.x - pos2.x), yDiff = Math.abs(pos1.y - pos2.y);
|
|
48
47
|
if (xDiff < distMax && yDiff < distMax) {
|
|
49
48
|
(0, Utils_js_1.drawConnection)(container, p1, p2);
|
|
50
49
|
}
|
|
51
50
|
}
|
|
52
|
-
|
|
53
|
-
}
|
|
51
|
+
});
|
|
54
52
|
}
|
|
53
|
+
await Promise.resolve();
|
|
55
54
|
}
|
|
56
55
|
isEnabled(particle) {
|
|
57
56
|
const container = this.container, mouse = container.interactivity.mouse, events = (particle?.interactivity ?? container.actualOptions.interactivity).events;
|
package/umd/Utils.js
CHANGED
|
@@ -11,15 +11,16 @@
|
|
|
11
11
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
12
|
exports.drawConnection = exports.lineStyle = exports.drawConnectLine = exports.gradient = void 0;
|
|
13
13
|
const engine_1 = require("@tsparticles/engine");
|
|
14
|
+
const gradientMin = 0, gradientMax = 1, defaultLinksWidth = 0;
|
|
14
15
|
function gradient(context, p1, p2, opacity) {
|
|
15
16
|
const gradStop = Math.floor(p2.getRadius() / p1.getRadius()), color1 = p1.getFillColor(), color2 = p2.getFillColor();
|
|
16
17
|
if (!color1 || !color2) {
|
|
17
18
|
return;
|
|
18
19
|
}
|
|
19
20
|
const sourcePos = p1.getPosition(), destPos = p2.getPosition(), midRgb = (0, engine_1.colorMix)(color1, color2, p1.getRadius(), p2.getRadius()), grad = context.createLinearGradient(sourcePos.x, sourcePos.y, destPos.x, destPos.y);
|
|
20
|
-
grad.addColorStop(
|
|
21
|
-
grad.addColorStop(gradStop
|
|
22
|
-
grad.addColorStop(
|
|
21
|
+
grad.addColorStop(gradientMin, (0, engine_1.getStyleFromHsl)(color1, opacity));
|
|
22
|
+
grad.addColorStop((0, engine_1.clamp)(gradStop, gradientMin, gradientMax), (0, engine_1.getStyleFromRgb)(midRgb, opacity));
|
|
23
|
+
grad.addColorStop(gradientMax, (0, engine_1.getStyleFromHsl)(color2, opacity));
|
|
23
24
|
return grad;
|
|
24
25
|
}
|
|
25
26
|
exports.gradient = gradient;
|
|
@@ -45,7 +46,7 @@
|
|
|
45
46
|
return;
|
|
46
47
|
}
|
|
47
48
|
const pos1 = p1.getPosition(), pos2 = p2.getPosition();
|
|
48
|
-
drawConnectLine(ctx, p1.retina.linksWidth ??
|
|
49
|
+
drawConnectLine(ctx, p1.retina.linksWidth ?? defaultLinksWidth, ls, pos1, pos2);
|
|
49
50
|
});
|
|
50
51
|
}
|
|
51
52
|
exports.drawConnection = drawConnection;
|