@tsparticles/interaction-external-grab 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.
Files changed (14) hide show
  1. package/browser/Grabber.js +4 -3
  2. package/browser/Utils.js +2 -1
  3. package/cjs/Grabber.js +4 -3
  4. package/cjs/Utils.js +2 -1
  5. package/esm/Grabber.js +4 -3
  6. package/esm/Utils.js +2 -1
  7. package/package.json +2 -2
  8. package/report.html +2 -2
  9. package/tsparticles.interaction.external.grab.js +9 -5
  10. package/tsparticles.interaction.external.grab.min.js +1 -1
  11. package/tsparticles.interaction.external.grab.min.js.LICENSE.txt +1 -1
  12. package/types/Types.d.ts +4 -4
  13. package/umd/Grabber.js +4 -3
  14. package/umd/Utils.js +2 -1
package/browser/Grabber.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { ExternalInteractorBase, getDistance, getLinkColor, getLinkRandomColor, isInArray, mouseMoveEvent, } from "@tsparticles/engine";
2
2
  import { Grab } from "./Options/Classes/Grab.js";
3
3
  import { drawGrab } from "./Utils.js";
4
- const grabMode = "grab";
4
+ const grabMode = "grab", minDistance = 0, minOpacity = 0;
5
5
  export class Grabber extends ExternalInteractorBase {
6
6
  constructor(container) {
7
7
  super(container);
@@ -27,7 +27,7 @@ export class Grabber extends ExternalInteractorBase {
27
27
  return;
28
28
  }
29
29
  const distance = container.retina.grabModeDistance;
30
- if (!distance || distance < 0) {
30
+ if (!distance || distance < minDistance) {
31
31
  return;
32
32
  }
33
33
  const query = container.particles.quadTree.queryCircle(mousePos, distance, (p) => this.isEnabled(p));
@@ -37,7 +37,7 @@ export class Grabber extends ExternalInteractorBase {
37
37
  continue;
38
38
  }
39
39
  const grabLineOptions = interactivity.modes.grab.links, lineOpacity = grabLineOptions.opacity, opacityLine = lineOpacity - (pointDistance * lineOpacity) / distance;
40
- if (opacityLine <= 0) {
40
+ if (opacityLine <= minOpacity) {
41
41
  continue;
42
42
  }
43
43
  const optColor = grabLineOptions.color ?? particle.options.links?.color;
@@ -51,6 +51,7 @@ export class Grabber extends ExternalInteractorBase {
51
51
  }
52
52
  drawGrab(container, particle, colorLine, opacityLine, mousePos);
53
53
  }
54
+ await Promise.resolve();
54
55
  }
55
56
  isEnabled(particle) {
56
57
  const container = this.container, mouse = container.interactivity.mouse, events = (particle?.interactivity ?? container.actualOptions.interactivity).events;
package/browser/Utils.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { drawLine, getStyleFromRgb } from "@tsparticles/engine";
2
+ const defaultWidth = 0;
2
3
  export function drawGrabLine(context, width, begin, end, colorLine, opacity) {
3
4
  drawLine(context, begin, end);
4
5
  context.strokeStyle = getStyleFromRgb(colorLine, opacity);
@@ -8,6 +9,6 @@ export function drawGrabLine(context, width, begin, end, colorLine, opacity) {
8
9
  export function drawGrab(container, particle, lineColor, opacity, mousePos) {
9
10
  container.canvas.draw((ctx) => {
10
11
  const beginPos = particle.getPosition();
11
- drawGrabLine(ctx, particle.retina.linksWidth ?? 0, beginPos, mousePos, lineColor, opacity);
12
+ drawGrabLine(ctx, particle.retina.linksWidth ?? defaultWidth, beginPos, mousePos, lineColor, opacity);
12
13
  });
13
14
  }
package/cjs/Grabber.js CHANGED
@@ -4,7 +4,7 @@ exports.Grabber = void 0;
4
4
  const engine_1 = require("@tsparticles/engine");
5
5
  const Grab_js_1 = require("./Options/Classes/Grab.js");
6
6
  const Utils_js_1 = require("./Utils.js");
7
- const grabMode = "grab";
7
+ const grabMode = "grab", minDistance = 0, minOpacity = 0;
8
8
  class Grabber extends engine_1.ExternalInteractorBase {
9
9
  constructor(container) {
10
10
  super(container);
@@ -30,7 +30,7 @@ class Grabber extends engine_1.ExternalInteractorBase {
30
30
  return;
31
31
  }
32
32
  const distance = container.retina.grabModeDistance;
33
- if (!distance || distance < 0) {
33
+ if (!distance || distance < minDistance) {
34
34
  return;
35
35
  }
36
36
  const query = container.particles.quadTree.queryCircle(mousePos, distance, (p) => this.isEnabled(p));
@@ -40,7 +40,7 @@ class Grabber extends engine_1.ExternalInteractorBase {
40
40
  continue;
41
41
  }
42
42
  const grabLineOptions = interactivity.modes.grab.links, lineOpacity = grabLineOptions.opacity, opacityLine = lineOpacity - (pointDistance * lineOpacity) / distance;
43
- if (opacityLine <= 0) {
43
+ if (opacityLine <= minOpacity) {
44
44
  continue;
45
45
  }
46
46
  const optColor = grabLineOptions.color ?? particle.options.links?.color;
@@ -54,6 +54,7 @@ class Grabber extends engine_1.ExternalInteractorBase {
54
54
  }
55
55
  (0, Utils_js_1.drawGrab)(container, particle, colorLine, opacityLine, mousePos);
56
56
  }
57
+ await Promise.resolve();
57
58
  }
58
59
  isEnabled(particle) {
59
60
  const container = this.container, mouse = container.interactivity.mouse, events = (particle?.interactivity ?? container.actualOptions.interactivity).events;
package/cjs/Utils.js CHANGED
@@ -2,6 +2,7 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.drawGrab = exports.drawGrabLine = void 0;
4
4
  const engine_1 = require("@tsparticles/engine");
5
+ const defaultWidth = 0;
5
6
  function drawGrabLine(context, width, begin, end, colorLine, opacity) {
6
7
  (0, engine_1.drawLine)(context, begin, end);
7
8
  context.strokeStyle = (0, engine_1.getStyleFromRgb)(colorLine, opacity);
@@ -12,7 +13,7 @@ exports.drawGrabLine = drawGrabLine;
12
13
  function drawGrab(container, particle, lineColor, opacity, mousePos) {
13
14
  container.canvas.draw((ctx) => {
14
15
  const beginPos = particle.getPosition();
15
- drawGrabLine(ctx, particle.retina.linksWidth ?? 0, beginPos, mousePos, lineColor, opacity);
16
+ drawGrabLine(ctx, particle.retina.linksWidth ?? defaultWidth, beginPos, mousePos, lineColor, opacity);
16
17
  });
17
18
  }
18
19
  exports.drawGrab = drawGrab;
package/esm/Grabber.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { ExternalInteractorBase, getDistance, getLinkColor, getLinkRandomColor, isInArray, mouseMoveEvent, } from "@tsparticles/engine";
2
2
  import { Grab } from "./Options/Classes/Grab.js";
3
3
  import { drawGrab } from "./Utils.js";
4
- const grabMode = "grab";
4
+ const grabMode = "grab", minDistance = 0, minOpacity = 0;
5
5
  export class Grabber extends ExternalInteractorBase {
6
6
  constructor(container) {
7
7
  super(container);
@@ -27,7 +27,7 @@ export class Grabber extends ExternalInteractorBase {
27
27
  return;
28
28
  }
29
29
  const distance = container.retina.grabModeDistance;
30
- if (!distance || distance < 0) {
30
+ if (!distance || distance < minDistance) {
31
31
  return;
32
32
  }
33
33
  const query = container.particles.quadTree.queryCircle(mousePos, distance, (p) => this.isEnabled(p));
@@ -37,7 +37,7 @@ export class Grabber extends ExternalInteractorBase {
37
37
  continue;
38
38
  }
39
39
  const grabLineOptions = interactivity.modes.grab.links, lineOpacity = grabLineOptions.opacity, opacityLine = lineOpacity - (pointDistance * lineOpacity) / distance;
40
- if (opacityLine <= 0) {
40
+ if (opacityLine <= minOpacity) {
41
41
  continue;
42
42
  }
43
43
  const optColor = grabLineOptions.color ?? particle.options.links?.color;
@@ -51,6 +51,7 @@ export class Grabber extends ExternalInteractorBase {
51
51
  }
52
52
  drawGrab(container, particle, colorLine, opacityLine, mousePos);
53
53
  }
54
+ await Promise.resolve();
54
55
  }
55
56
  isEnabled(particle) {
56
57
  const container = this.container, mouse = container.interactivity.mouse, events = (particle?.interactivity ?? container.actualOptions.interactivity).events;
package/esm/Utils.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { drawLine, getStyleFromRgb } from "@tsparticles/engine";
2
+ const defaultWidth = 0;
2
3
  export function drawGrabLine(context, width, begin, end, colorLine, opacity) {
3
4
  drawLine(context, begin, end);
4
5
  context.strokeStyle = getStyleFromRgb(colorLine, opacity);
@@ -8,6 +9,6 @@ export function drawGrabLine(context, width, begin, end, colorLine, opacity) {
8
9
  export function drawGrab(container, particle, lineColor, opacity, mousePos) {
9
10
  container.canvas.draw((ctx) => {
10
11
  const beginPos = particle.getPosition();
11
- drawGrabLine(ctx, particle.retina.linksWidth ?? 0, beginPos, mousePos, lineColor, opacity);
12
+ drawGrabLine(ctx, particle.retina.linksWidth ?? defaultWidth, beginPos, mousePos, lineColor, opacity);
12
13
  });
13
14
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tsparticles/interaction-external-grab",
3
- "version": "3.0.3",
3
+ "version": "3.1.0",
4
4
  "description": "tsParticles grab 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.3"
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-grab [26 Dec 2023 at 19:25]</title>
6
+ <title>@tsparticles/interaction-external-grab [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.grab.js","isAsset":true,"statSize":4580,"parsedSize":8313,"gzipSize":2436,"groups":[{"label":"dist/browser","path":"./dist/browser","statSize":4538,"groups":[{"id":506,"label":"index.js + 4 modules (concatenated)","path":"./dist/browser/index.js + 4 modules (concatenated)","statSize":4538,"parsedSize":8313,"gzipSize":2436,"concatenated":true,"groups":[{"label":"dist/browser","path":"./dist/browser/index.js + 4 modules (concatenated)/dist/browser","statSize":4538,"groups":[{"id":null,"label":"index.js","path":"./dist/browser/index.js + 4 modules (concatenated)/dist/browser/index.js","statSize":399,"parsedSize":730,"gzipSize":214,"inaccurateSizes":true},{"id":null,"label":"Grabber.js","path":"./dist/browser/index.js + 4 modules (concatenated)/dist/browser/Grabber.js","statSize":2709,"parsedSize":4962,"gzipSize":1454,"inaccurateSizes":true},{"label":"Options/Classes","path":"./dist/browser/index.js + 4 modules (concatenated)/dist/browser/Options/Classes","statSize":882,"groups":[{"id":null,"label":"Grab.js","path":"./dist/browser/index.js + 4 modules (concatenated)/dist/browser/Options/Classes/Grab.js","statSize":317,"parsedSize":580,"gzipSize":170,"inaccurateSizes":true},{"id":null,"label":"GrabLinks.js","path":"./dist/browser/index.js + 4 modules (concatenated)/dist/browser/Options/Classes/GrabLinks.js","statSize":565,"parsedSize":1035,"gzipSize":303,"inaccurateSizes":true}],"parsedSize":1615,"gzipSize":473,"inaccurateSizes":true},{"id":null,"label":"Utils.js","path":"./dist/browser/index.js + 4 modules (concatenated)/dist/browser/Utils.js","statSize":548,"parsedSize":1003,"gzipSize":294,"inaccurateSizes":true}],"parsedSize":8313,"gzipSize":2436,"inaccurateSizes":true}]}],"parsedSize":8313,"gzipSize":2436},{"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.grab":true}}];
34
+ window.chartData = [{"label":"tsparticles.interaction.external.grab.js","isAsset":true,"statSize":4700,"parsedSize":8433,"gzipSize":2474,"groups":[{"label":"dist/browser","path":"./dist/browser","statSize":4658,"groups":[{"id":540,"label":"index.js + 4 modules (concatenated)","path":"./dist/browser/index.js + 4 modules (concatenated)","statSize":4658,"parsedSize":8433,"gzipSize":2474,"concatenated":true,"groups":[{"label":"dist/browser","path":"./dist/browser/index.js + 4 modules (concatenated)/dist/browser","statSize":4658,"groups":[{"id":null,"label":"index.js","path":"./dist/browser/index.js + 4 modules (concatenated)/dist/browser/index.js","statSize":399,"parsedSize":722,"gzipSize":211,"inaccurateSizes":true},{"id":null,"label":"Grabber.js","path":"./dist/browser/index.js + 4 modules (concatenated)/dist/browser/Grabber.js","statSize":2794,"parsedSize":5058,"gzipSize":1483,"inaccurateSizes":true},{"label":"Options/Classes","path":"./dist/browser/index.js + 4 modules (concatenated)/dist/browser/Options/Classes","statSize":882,"groups":[{"id":null,"label":"Grab.js","path":"./dist/browser/index.js + 4 modules (concatenated)/dist/browser/Options/Classes/Grab.js","statSize":317,"parsedSize":573,"gzipSize":168,"inaccurateSizes":true},{"id":null,"label":"GrabLinks.js","path":"./dist/browser/index.js + 4 modules (concatenated)/dist/browser/Options/Classes/GrabLinks.js","statSize":565,"parsedSize":1022,"gzipSize":300,"inaccurateSizes":true}],"parsedSize":1596,"gzipSize":468,"inaccurateSizes":true},{"id":null,"label":"Utils.js","path":"./dist/browser/index.js + 4 modules (concatenated)/dist/browser/Utils.js","statSize":583,"parsedSize":1055,"gzipSize":309,"inaccurateSizes":true}],"parsedSize":8433,"gzipSize":2474,"inaccurateSizes":true}]}],"parsedSize":8433,"gzipSize":2474},{"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.grab":true}}];
35
35
  window.entrypoints = ["tsparticles.interaction.external.grab","tsparticles.interaction.external.grab.min"];
36
36
  window.defaultSizes = "parsed";
37
37
  </script>
package/tsparticles.interaction.external.grab.js CHANGED
@@ -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.3
7
+ * v3.1.0
8
8
  */
9
9
  (function webpackUniversalModuleDefinition(root, factory) {
10
10
  if(typeof exports === 'object' && typeof module === 'object')
@@ -143,6 +143,7 @@ class Grab {
143
143
  }
144
144
  ;// CONCATENATED MODULE: ./dist/browser/Utils.js
145
145
 
146
+ const defaultWidth = 0;
146
147
  function drawGrabLine(context, width, begin, end, colorLine, opacity) {
147
148
  (0,engine_root_window_.drawLine)(context, begin, end);
148
149
  context.strokeStyle = (0,engine_root_window_.getStyleFromRgb)(colorLine, opacity);
@@ -152,14 +153,16 @@ function drawGrabLine(context, width, begin, end, colorLine, opacity) {
152
153
  function drawGrab(container, particle, lineColor, opacity, mousePos) {
153
154
  container.canvas.draw(ctx => {
154
155
  const beginPos = particle.getPosition();
155
- drawGrabLine(ctx, particle.retina.linksWidth ?? 0, beginPos, mousePos, lineColor, opacity);
156
+ drawGrabLine(ctx, particle.retina.linksWidth ?? defaultWidth, beginPos, mousePos, lineColor, opacity);
156
157
  });
157
158
  }
158
159
  ;// CONCATENATED MODULE: ./dist/browser/Grabber.js
159
160
 
160
161
 
161
162
 
162
- const grabMode = "grab";
163
+ const grabMode = "grab",
164
+ minDistance = 0,
165
+ minOpacity = 0;
163
166
  class Grabber extends engine_root_window_.ExternalInteractorBase {
164
167
  constructor(container) {
165
168
  super(container);
@@ -185,7 +188,7 @@ class Grabber extends engine_root_window_.ExternalInteractorBase {
185
188
  return;
186
189
  }
187
190
  const distance = container.retina.grabModeDistance;
188
- if (!distance || distance < 0) {
191
+ if (!distance || distance < minDistance) {
189
192
  return;
190
193
  }
191
194
  const query = container.particles.quadTree.queryCircle(mousePos, distance, p => this.isEnabled(p));
@@ -198,7 +201,7 @@ class Grabber extends engine_root_window_.ExternalInteractorBase {
198
201
  const grabLineOptions = interactivity.modes.grab.links,
199
202
  lineOpacity = grabLineOptions.opacity,
200
203
  opacityLine = lineOpacity - pointDistance * lineOpacity / distance;
201
- if (opacityLine <= 0) {
204
+ if (opacityLine <= minOpacity) {
202
205
  continue;
203
206
  }
204
207
  const optColor = grabLineOptions.color ?? particle.options.links?.color;
@@ -212,6 +215,7 @@ class Grabber extends engine_root_window_.ExternalInteractorBase {
212
215
  }
213
216
  drawGrab(container, particle, colorLine, opacityLine, mousePos);
214
217
  }
218
+ await Promise.resolve();
215
219
  }
216
220
  isEnabled(particle) {
217
221
  const container = this.container,
package/tsparticles.interaction.external.grab.min.js CHANGED
@@ -1,2 +1,2 @@
1
1
  /*! For license information please see tsparticles.interaction.external.grab.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 o="object"==typeof exports?e(require("@tsparticles/engine")):e(t.window);for(var i in o)("object"==typeof exports?exports:t)[i]=o[i]}}(this,(t=>(()=>{"use strict";var e={533:e=>{e.exports=t}},o={};function i(t){var n=o[t];if(void 0!==n)return n.exports;var r=o[t]={exports:{}};return e[t](r,r.exports,i),r.exports}i.d=(t,e)=>{for(var o in e)i.o(e,o)&&!i.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:e[o]})},i.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),i.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var n={};return(()=>{i.r(n),i.d(n,{Grab:()=>o,GrabLinks:()=>e,loadExternalGrabInteraction:()=>a});var t=i(533);class e{constructor(){this.blink=!1,this.consent=!1,this.opacity=1}load(e){e&&(void 0!==e.blink&&(this.blink=e.blink),void 0!==e.color&&(this.color=t.OptionsColor.create(this.color,e.color)),void 0!==e.consent&&(this.consent=e.consent),void 0!==e.opacity&&(this.opacity=e.opacity))}}class o{constructor(){this.distance=100,this.links=new e}load(t){t&&(void 0!==t.distance&&(this.distance=t.distance),this.links.load(t.links))}}function r(e,o,i,n,r){e.canvas.draw((e=>{const s=o.getPosition();!function(e,o,i,n,r,s){(0,t.drawLine)(e,i,n),e.strokeStyle=(0,t.getStyleFromRgb)(r,s),e.lineWidth=o,e.stroke()}(e,o.retina.linksWidth??0,s,r,i,n)}))}class s extends t.ExternalInteractorBase{constructor(t){super(t)}clear(){}init(){const t=this.container,e=t.actualOptions.interactivity.modes.grab;e&&(t.retina.grabModeDistance=e.distance*t.retina.pixelRatio)}async interact(){const e=this.container,o=e.actualOptions.interactivity;if(!o.modes.grab||!o.events.onHover.enable||e.interactivity.status!==t.mouseMoveEvent)return;const i=e.interactivity.mouse.position;if(!i)return;const n=e.retina.grabModeDistance;if(!n||n<0)return;const s=e.particles.quadTree.queryCircle(i,n,(t=>this.isEnabled(t)));for(const a of s){const s=a.getPosition(),c=(0,t.getDistance)(s,i);if(c>n)continue;const l=o.modes.grab.links,d=l.opacity,p=d-c*d/n;if(p<=0)continue;const b=l.color??a.options.links?.color;if(!e.particles.grabLineColor&&b){const i=o.modes.grab.links;e.particles.grabLineColor=(0,t.getLinkRandomColor)(b,i.blink,i.consent)}const u=(0,t.getLinkColor)(a,void 0,e.particles.grabLineColor);u&&r(e,a,u,p,i)}}isEnabled(e){const o=this.container,i=o.interactivity.mouse,n=(e?.interactivity??o.actualOptions.interactivity).events;return n.onHover.enable&&!!i.position&&(0,t.isInArray)("grab",n.onHover.mode)}loadModeOptions(t,...e){t.grab||(t.grab=new o);for(const o of e)t.grab.load(o?.grab)}reset(){}}async function a(t,e=!0){await t.addInteractor("externalGrab",(t=>new s(t)),e)}})(),n})()));
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 i in o)("object"==typeof exports?exports:t)[i]=o[i]}}(this,(t=>(()=>{"use strict";var e={533:e=>{e.exports=t}},o={};function i(t){var n=o[t];if(void 0!==n)return n.exports;var r=o[t]={exports:{}};return e[t](r,r.exports,i),r.exports}i.d=(t,e)=>{for(var o in e)i.o(e,o)&&!i.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:e[o]})},i.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),i.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var n={};return(()=>{i.r(n),i.d(n,{Grab:()=>o,GrabLinks:()=>e,loadExternalGrabInteraction:()=>a});var t=i(533);class e{constructor(){this.blink=!1,this.consent=!1,this.opacity=1}load(e){e&&(void 0!==e.blink&&(this.blink=e.blink),void 0!==e.color&&(this.color=t.OptionsColor.create(this.color,e.color)),void 0!==e.consent&&(this.consent=e.consent),void 0!==e.opacity&&(this.opacity=e.opacity))}}class o{constructor(){this.distance=100,this.links=new e}load(t){t&&(void 0!==t.distance&&(this.distance=t.distance),this.links.load(t.links))}}function r(e,o,i,n,r){e.canvas.draw((e=>{const s=o.getPosition();!function(e,o,i,n,r,s){(0,t.drawLine)(e,i,n),e.strokeStyle=(0,t.getStyleFromRgb)(r,s),e.lineWidth=o,e.stroke()}(e,o.retina.linksWidth??0,s,r,i,n)}))}class s extends t.ExternalInteractorBase{constructor(t){super(t)}clear(){}init(){const t=this.container,e=t.actualOptions.interactivity.modes.grab;e&&(t.retina.grabModeDistance=e.distance*t.retina.pixelRatio)}async interact(){const e=this.container,o=e.actualOptions.interactivity;if(!o.modes.grab||!o.events.onHover.enable||e.interactivity.status!==t.mouseMoveEvent)return;const i=e.interactivity.mouse.position;if(!i)return;const n=e.retina.grabModeDistance;if(!n||n<0)return;const s=e.particles.quadTree.queryCircle(i,n,(t=>this.isEnabled(t)));for(const a of s){const s=a.getPosition(),c=(0,t.getDistance)(s,i);if(c>n)continue;const l=o.modes.grab.links,d=l.opacity,p=d-c*d/n;if(p<=0)continue;const b=l.color??a.options.links?.color;if(!e.particles.grabLineColor&&b){const i=o.modes.grab.links;e.particles.grabLineColor=(0,t.getLinkRandomColor)(b,i.blink,i.consent)}const u=(0,t.getLinkColor)(a,void 0,e.particles.grabLineColor);u&&r(e,a,u,p,i)}await Promise.resolve()}isEnabled(e){const o=this.container,i=o.interactivity.mouse,n=(e?.interactivity??o.actualOptions.interactivity).events;return n.onHover.enable&&!!i.position&&(0,t.isInArray)("grab",n.onHover.mode)}loadModeOptions(t,...e){t.grab||(t.grab=new o);for(const o of e)t.grab.load(o?.grab)}reset(){}}async function a(t,e=!0){await t.addInteractor("externalGrab",(t=>new s(t)),e)}})(),n})()));
package/tsparticles.interaction.external.grab.min.js.LICENSE.txt CHANGED
@@ -1 +1 @@
1
- /*! tsParticles Grab External Interaction v3.0.3 by Matteo Bruni */
1
+ /*! tsParticles Grab External Interaction v3.1.0 by Matteo Bruni */
package/types/Types.d.ts CHANGED
@@ -2,12 +2,12 @@ import type { Container, IRgb, OptionsColor, Particle } from "@tsparticles/engin
2
2
  import type { Grab } from "./Options/Classes/Grab.js";
3
3
  import type { GrabOptions } from "./Options/Classes/GrabOptions.js";
4
4
  import type { IGrab } from "./Options/Interfaces/IGrab.js";
5
- export type IGrabMode = {
5
+ export interface IGrabMode {
6
6
  grab: IGrab;
7
- };
8
- export type GrabMode = {
7
+ }
8
+ export interface GrabMode {
9
9
  grab?: Grab;
10
- };
10
+ }
11
11
  export type GrabContainer = Container & {
12
12
  actualOptions: GrabOptions;
13
13
  particles: {
package/umd/Grabber.js CHANGED
@@ -13,7 +13,7 @@
13
13
  const engine_1 = require("@tsparticles/engine");
14
14
  const Grab_js_1 = require("./Options/Classes/Grab.js");
15
15
  const Utils_js_1 = require("./Utils.js");
16
- const grabMode = "grab";
16
+ const grabMode = "grab", minDistance = 0, minOpacity = 0;
17
17
  class Grabber extends engine_1.ExternalInteractorBase {
18
18
  constructor(container) {
19
19
  super(container);
@@ -39,7 +39,7 @@
39
39
  return;
40
40
  }
41
41
  const distance = container.retina.grabModeDistance;
42
- if (!distance || distance < 0) {
42
+ if (!distance || distance < minDistance) {
43
43
  return;
44
44
  }
45
45
  const query = container.particles.quadTree.queryCircle(mousePos, distance, (p) => this.isEnabled(p));
@@ -49,7 +49,7 @@
49
49
  continue;
50
50
  }
51
51
  const grabLineOptions = interactivity.modes.grab.links, lineOpacity = grabLineOptions.opacity, opacityLine = lineOpacity - (pointDistance * lineOpacity) / distance;
52
- if (opacityLine <= 0) {
52
+ if (opacityLine <= minOpacity) {
53
53
  continue;
54
54
  }
55
55
  const optColor = grabLineOptions.color ?? particle.options.links?.color;
@@ -63,6 +63,7 @@
63
63
  }
64
64
  (0, Utils_js_1.drawGrab)(container, particle, colorLine, opacityLine, mousePos);
65
65
  }
66
+ await Promise.resolve();
66
67
  }
67
68
  isEnabled(particle) {
68
69
  const container = this.container, mouse = container.interactivity.mouse, events = (particle?.interactivity ?? container.actualOptions.interactivity).events;
package/umd/Utils.js CHANGED
@@ -11,6 +11,7 @@
11
11
  Object.defineProperty(exports, "__esModule", { value: true });
12
12
  exports.drawGrab = exports.drawGrabLine = void 0;
13
13
  const engine_1 = require("@tsparticles/engine");
14
+ const defaultWidth = 0;
14
15
  function drawGrabLine(context, width, begin, end, colorLine, opacity) {
15
16
  (0, engine_1.drawLine)(context, begin, end);
16
17
  context.strokeStyle = (0, engine_1.getStyleFromRgb)(colorLine, opacity);
@@ -21,7 +22,7 @@
21
22
  function drawGrab(container, particle, lineColor, opacity, mousePos) {
22
23
  container.canvas.draw((ctx) => {
23
24
  const beginPos = particle.getPosition();
24
- drawGrabLine(ctx, particle.retina.linksWidth ?? 0, beginPos, mousePos, lineColor, opacity);
25
+ drawGrabLine(ctx, particle.retina.linksWidth ?? defaultWidth, beginPos, mousePos, lineColor, opacity);
25
26
  });
26
27
  }
27
28
  exports.drawGrab = drawGrab;