@tsparticles/interaction-external-grab 3.0.0-alpha.1 → 3.0.0-beta.0

package/tsparticles.interaction.external.grab.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v3.0.0-alpha.1
+ * v3.0.0-beta.0
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -91,9 +91,9 @@ __webpack_require__.r(__webpack_exports__);
 
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, {
-  "Grab": () => (/* reexport */ Grab),
-  "GrabLinks": () => (/* reexport */ GrabLinks),
-  "loadExternalGrabInteraction": () => (/* binding */ loadExternalGrabInteraction)
+  Grab: () => (/* reexport */ Grab),
+  GrabLinks: () => (/* reexport */ GrabLinks),
+  loadExternalGrabInteraction: () => (/* binding */ loadExternalGrabInteraction)
 });
 
 // EXTERNAL MODULE: external {"commonjs":"@tsparticles/engine","commonjs2":"@tsparticles/engine","amd":"@tsparticles/engine","root":"window"}
@@ -144,18 +144,16 @@ class Grab {
     this.links = value;
   }
   load(data) {
-    var _a, _b;
     if (!data) {
       return;
     }
     if (data.distance !== undefined) {
       this.distance = data.distance;
     }
-    this.links.load((_b = (_a = data.links) !== null && _a !== void 0 ? _a : data.lineLinked) !== null && _b !== void 0 ? _b : data.line_linked);
+    this.links.load(data.links ?? data.lineLinked ?? data.line_linked);
   }
 }
-;// CONCATENATED MODULE: ./dist/browser/Grabber.js
-
+;// CONCATENATED MODULE: ./dist/browser/Utils.js
 
 function drawGrabLine(context, width, begin, end, colorLine, opacity) {
   (0,engine_root_window_.drawLine)(context, begin, end);
@@ -165,11 +163,14 @@ function drawGrabLine(context, width, begin, end, colorLine, opacity) {
 }
 function drawGrab(container, particle, lineColor, opacity, mousePos) {
   container.canvas.draw(ctx => {
-    var _a;
     const beginPos = particle.getPosition();
-    drawGrabLine(ctx, (_a = particle.retina.linksWidth) !== null && _a !== void 0 ? _a : 0, beginPos, mousePos, lineColor, opacity);
+    drawGrabLine(ctx, particle.retina.linksWidth ?? 0, beginPos, mousePos, lineColor, opacity);
   });
 }
+;// CONCATENATED MODULE: ./dist/browser/Grabber.js
+
+
+
 class Grabber extends engine_root_window_.ExternalInteractorBase {
   constructor(container) {
     super(container);
@@ -184,7 +185,6 @@ class Grabber extends engine_root_window_.ExternalInteractorBase {
     container.retina.grabModeDistance = grab.distance * container.retina.pixelRatio;
   }
   async interact() {
-    var _a, _b;
     const container = this.container,
       options = container.actualOptions,
       interactivity = options.interactivity;
@@ -212,23 +212,22 @@ class Grabber extends engine_root_window_.ExternalInteractorBase {
       if (opacityLine <= 0) {
         continue;
       }
-      const optColor = (_a = grabLineOptions.color) !== null && _a !== void 0 ? _a : (_b = particle.options.links) === null || _b === void 0 ? void 0 : _b.color;
+      const optColor = grabLineOptions.color ?? particle.options.links?.color;
       if (!container.particles.grabLineColor && optColor) {
         const linksOptions = interactivity.modes.grab.links;
         container.particles.grabLineColor = (0,engine_root_window_.getLinkRandomColor)(optColor, linksOptions.blink, linksOptions.consent);
       }
       const colorLine = (0,engine_root_window_.getLinkColor)(particle, undefined, container.particles.grabLineColor);
       if (!colorLine) {
-        return;
+        continue;
       }
       drawGrab(container, particle, colorLine, opacityLine, mousePos);
     }
   }
   isEnabled(particle) {
-    var _a;
     const container = this.container,
       mouse = container.interactivity.mouse,
-      events = ((_a = particle === null || particle === void 0 ? void 0 : particle.interactivity) !== null && _a !== void 0 ? _a : container.actualOptions.interactivity).events;
+      events = (particle?.interactivity ?? container.actualOptions.interactivity).events;
     return events.onHover.enable && !!mouse.position && (0,engine_root_window_.isInArray)("grab", events.onHover.mode);
   }
   loadModeOptions(options, ...sources) {
@@ -236,15 +235,15 @@ class Grabber extends engine_root_window_.ExternalInteractorBase {
       options.grab = new Grab();
     }
     for (const source of sources) {
-      options.grab.load(source === null || source === void 0 ? void 0 : source.grab);
+      options.grab.load(source?.grab);
     }
   }
   reset() {}
 }
 ;// CONCATENATED MODULE: ./dist/browser/index.js
 
-async function loadExternalGrabInteraction(engine) {
-  await engine.addInteractor("externalGrab", container => new Grabber(container));
+async function loadExternalGrabInteraction(engine, refresh = true) {
+  await engine.addInteractor("externalGrab", container => new Grabber(container), refresh);
 }
 
 

package/tsparticles.interaction.external.grab.min.js

@@ -1,2 +1,2 @@
 /*! For license information please see tsparticles.interaction.external.grab.min.js.LICENSE.txt */
-!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 i="object"==typeof exports?e(require("@tsparticles/engine")):e(t.window);for(var n in i)("object"==typeof exports?exports:t)[n]=i[n]}}(this,(t=>(()=>{"use strict";var e={533:e=>{e.exports=t}},i={};function n(t){var o=i[t];if(void 0!==o)return o.exports;var r=i[t]={exports:{}};return e[t](r,r.exports,n),r.exports}n.d=(t,e)=>{for(var i in e)n.o(e,i)&&!n.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},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 o={};return(()=>{n.r(o),n.d(o,{Grab:()=>i,GrabLinks:()=>e,loadExternalGrabInteraction:()=>a});var t=n(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 i{constructor(){this.distance=100,this.links=new e}get lineLinked(){return this.links}set lineLinked(t){this.links=t}get line_linked(){return this.links}set line_linked(t){this.links=t}load(t){var e,i;t&&(void 0!==t.distance&&(this.distance=t.distance),this.links.load(null!==(i=null!==(e=t.links)&&void 0!==e?e:t.lineLinked)&&void 0!==i?i:t.line_linked))}}function r(e,i,n,o,r){e.canvas.draw((e=>{var s;const a=i.getPosition();!function(e,i,n,o,r,s){(0,t.drawLine)(e,n,o),e.strokeStyle=(0,t.getStyleFromRgb)(r,s),e.lineWidth=i,e.stroke()}(e,null!==(s=i.retina.linksWidth)&&void 0!==s?s:0,a,r,n,o)}))}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(){var e,i;const n=this.container,o=n.actualOptions.interactivity;if(!o.modes.grab||!o.events.onHover.enable||n.interactivity.status!==t.mouseMoveEvent)return;const s=n.interactivity.mouse.position;if(!s)return;const a=n.retina.grabModeDistance;if(!a||a<0)return;const l=n.particles.quadTree.queryCircle(s,a,(t=>this.isEnabled(t)));for(const c of l){const l=c.getPosition(),d=(0,t.getDistance)(l,s);if(d>a)continue;const u=o.modes.grab.links,v=u.opacity,p=v-d*v/a;if(p<=0)continue;const b=null!==(e=u.color)&&void 0!==e?e:null===(i=c.options.links)||void 0===i?void 0:i.color;if(!n.particles.grabLineColor&&b){const e=o.modes.grab.links;n.particles.grabLineColor=(0,t.getLinkRandomColor)(b,e.blink,e.consent)}const f=(0,t.getLinkColor)(c,void 0,n.particles.grabLineColor);if(!f)return;r(n,c,f,p,s)}}isEnabled(e){var i;const n=this.container,o=n.interactivity.mouse,r=(null!==(i=null==e?void 0:e.interactivity)&&void 0!==i?i:n.actualOptions.interactivity).events;return r.onHover.enable&&!!o.position&&(0,t.isInArray)("grab",r.onHover.mode)}loadModeOptions(t,...e){t.grab||(t.grab=new i);for(const i of e)t.grab.load(null==i?void 0:i.grab)}reset(){}}async function a(t){await t.addInteractor("externalGrab",(t=>new s(t)))}})(),o})()));
+!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 i="object"==typeof exports?e(require("@tsparticles/engine")):e(t.window);for(var n in i)("object"==typeof exports?exports:t)[n]=i[n]}}(this,(t=>(()=>{"use strict";var e={533:e=>{e.exports=t}},i={};function n(t){var o=i[t];if(void 0!==o)return o.exports;var r=i[t]={exports:{}};return e[t](r,r.exports,n),r.exports}n.d=(t,e)=>{for(var i in e)n.o(e,i)&&!n.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},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 o={};return(()=>{n.r(o),n.d(o,{Grab:()=>i,GrabLinks:()=>e,loadExternalGrabInteraction:()=>a});var t=n(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 i{constructor(){this.distance=100,this.links=new e}get lineLinked(){return this.links}set lineLinked(t){this.links=t}get line_linked(){return this.links}set line_linked(t){this.links=t}load(t){t&&(void 0!==t.distance&&(this.distance=t.distance),this.links.load(t.links??t.lineLinked??t.line_linked))}}function r(e,i,n,o,r){e.canvas.draw((e=>{const s=i.getPosition();!function(e,i,n,o,r,s){(0,t.drawLine)(e,n,o),e.strokeStyle=(0,t.getStyleFromRgb)(r,s),e.lineWidth=i,e.stroke()}(e,i.retina.linksWidth??0,s,r,n,o)}))}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,i=e.actualOptions.interactivity;if(!i.modes.grab||!i.events.onHover.enable||e.interactivity.status!==t.mouseMoveEvent)return;const n=e.interactivity.mouse.position;if(!n)return;const o=e.retina.grabModeDistance;if(!o||o<0)return;const s=e.particles.quadTree.queryCircle(n,o,(t=>this.isEnabled(t)));for(const a of s){const s=a.getPosition(),c=(0,t.getDistance)(s,n);if(c>o)continue;const l=i.modes.grab.links,d=l.opacity,p=d-c*d/o;if(p<=0)continue;const u=l.color??a.options.links?.color;if(!e.particles.grabLineColor&&u){const n=i.modes.grab.links;e.particles.grabLineColor=(0,t.getLinkRandomColor)(u,n.blink,n.consent)}const b=(0,t.getLinkColor)(a,void 0,e.particles.grabLineColor);b&&r(e,a,b,p,n)}}isEnabled(e){const i=this.container,n=i.interactivity.mouse,o=(e?.interactivity??i.actualOptions.interactivity).events;return o.onHover.enable&&!!n.position&&(0,t.isInArray)("grab",o.onHover.mode)}loadModeOptions(t,...e){t.grab||(t.grab=new i);for(const i of e)t.grab.load(i?.grab)}reset(){}}async function a(t,e=!0){await t.addInteractor("externalGrab",(t=>new s(t)),e)}})(),o})()));

package/tsparticles.interaction.external.grab.min.js.LICENSE.txt

@@ -1,8 +1 @@
-/*!
- * Author : Matteo Bruni
- * MIT license: https://opensource.org/licenses/MIT
- * Demo / Generator : https://particles.js.org/
- * GitHub : https://www.github.com/matteobruni/tsparticles
- * How to use? : Check the GitHub README
- * v3.0.0-alpha.1
- */
+/*! tsParticles Grab External Interaction v3.0.0-beta.0 by Matteo Bruni */

package/types/Grabber.d.ts

@@ -1,7 +1,5 @@
-import { ExternalInteractorBase } from "@tsparticles/engine";
+import { ExternalInteractorBase, type IModes, type Modes, type Particle, type RecursivePartial } from "@tsparticles/engine";
 import type { GrabContainer, GrabMode, IGrabMode } from "./Types";
-import type { ICoordinates, IModes, IRgb, Modes, Particle, RecursivePartial } from "@tsparticles/engine";
-export declare function drawGrabLine(context: CanvasRenderingContext2D, width: number, begin: ICoordinates, end: ICoordinates, colorLine: IRgb, opacity: number): void;
 export declare class Grabber extends ExternalInteractorBase<GrabContainer> {
     constructor(container: GrabContainer);
     clear(): void;

package/types/Options/Classes/GrabLinks.d.ts

@@ -1,6 +1,5 @@
-import type { IOptionLoader, RecursivePartial } from "@tsparticles/engine";
+import { type IOptionLoader, OptionsColor, type RecursivePartial } from "@tsparticles/engine";
 import type { IGrabLinks } from "../Interfaces/IGrabLinks";
-import { OptionsColor } from "@tsparticles/engine";
 export declare class GrabLinks implements IGrabLinks, IOptionLoader<IGrabLinks> {
     blink: boolean;
     color?: OptionsColor;

package/types/Types.d.ts

@@ -1,4 +1,4 @@
-import type { Container, IRgb } from "@tsparticles/engine";
+import type { Container, IRgb, OptionsColor, Particle } from "@tsparticles/engine";
 import type { Grab } from "./Options/Classes/Grab";
 import type { GrabOptions } from "./Options/Classes/GrabOptions";
 import type { IGrab } from "./Options/Interfaces/IGrab";
@@ -17,3 +17,13 @@ export type GrabContainer = Container & {
         grabModeDistance?: number;
     };
 };
+export type LinkParticle = Particle & {
+    options: {
+        links?: {
+            color?: OptionsColor;
+        };
+    };
+    retina: {
+        linksWidth?: number;
+    };
+};

package/types/Utils.d.ts

@@ -0,0 +1,4 @@
+import type { GrabContainer, LinkParticle } from "./Types";
+import { type ICoordinates, type IRgb } from "@tsparticles/engine";
+export declare function drawGrabLine(context: CanvasRenderingContext2D, width: number, begin: ICoordinates, end: ICoordinates, colorLine: IRgb, opacity: number): void;
+export declare function drawGrab(container: GrabContainer, particle: LinkParticle, lineColor: IRgb, opacity: number, mousePos: ICoordinates): void;

package/types/index.d.ts

@@ -1,5 +1,5 @@
 import type { Engine } from "@tsparticles/engine";
-export declare function loadExternalGrabInteraction(engine: Engine): Promise<void>;
+export declare function loadExternalGrabInteraction(engine: Engine, refresh?: boolean): Promise<void>;
 export * from "./Options/Classes/Grab";
 export * from "./Options/Classes/GrabLinks";
 export * from "./Options/Interfaces/IGrab";

package/umd/Grabber.js

@@ -4,28 +4,15 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "@tsparticles/engine", "./Options/Classes/Grab"], factory);
+        define(["require", "exports", "@tsparticles/engine", "./Options/Classes/Grab", "./Utils"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.Grabber = exports.drawGrabLine = void 0;
+    exports.Grabber = void 0;
     const engine_1 = require("@tsparticles/engine");
     const Grab_1 = require("./Options/Classes/Grab");
-    function drawGrabLine(context, width, begin, end, colorLine, opacity) {
-        (0, engine_1.drawLine)(context, begin, end);
-        context.strokeStyle = (0, engine_1.getStyleFromRgb)(colorLine, opacity);
-        context.lineWidth = width;
-        context.stroke();
-    }
-    exports.drawGrabLine = drawGrabLine;
-    function drawGrab(container, particle, lineColor, opacity, mousePos) {
-        container.canvas.draw((ctx) => {
-            var _a;
-            const beginPos = particle.getPosition();
-            drawGrabLine(ctx, (_a = particle.retina.linksWidth) !== null && _a !== void 0 ? _a : 0, beginPos, mousePos, lineColor, opacity);
-        });
-    }
+    const Utils_1 = require("./Utils");
     class Grabber extends engine_1.ExternalInteractorBase {
         constructor(container) {
             super(container);
@@ -40,7 +27,6 @@
             container.retina.grabModeDistance = grab.distance * container.retina.pixelRatio;
         }
         async interact() {
-            var _a, _b;
             const container = this.container, options = container.actualOptions, interactivity = options.interactivity;
             if (!interactivity.modes.grab ||
                 !interactivity.events.onHover.enable ||
@@ -65,21 +51,20 @@
                 if (opacityLine <= 0) {
                     continue;
                 }
-                const optColor = (_a = grabLineOptions.color) !== null && _a !== void 0 ? _a : (_b = particle.options.links) === null || _b === void 0 ? void 0 : _b.color;
+                const optColor = grabLineOptions.color ?? particle.options.links?.color;
                 if (!container.particles.grabLineColor && optColor) {
                     const linksOptions = interactivity.modes.grab.links;
                     container.particles.grabLineColor = (0, engine_1.getLinkRandomColor)(optColor, linksOptions.blink, linksOptions.consent);
                 }
                 const colorLine = (0, engine_1.getLinkColor)(particle, undefined, container.particles.grabLineColor);
                 if (!colorLine) {
-                    return;
+                    continue;
                 }
-                drawGrab(container, particle, colorLine, opacityLine, mousePos);
+                (0, Utils_1.drawGrab)(container, particle, colorLine, opacityLine, mousePos);
             }
         }
         isEnabled(particle) {
-            var _a;
-            const container = this.container, mouse = container.interactivity.mouse, events = ((_a = particle === null || particle === void 0 ? void 0 : particle.interactivity) !== null && _a !== void 0 ? _a : container.actualOptions.interactivity).events;
+            const container = this.container, mouse = container.interactivity.mouse, events = (particle?.interactivity ?? container.actualOptions.interactivity).events;
             return events.onHover.enable && !!mouse.position && (0, engine_1.isInArray)("grab", events.onHover.mode);
         }
         loadModeOptions(options, ...sources) {
@@ -87,7 +72,7 @@
                 options.grab = new Grab_1.Grab();
             }
             for (const source of sources) {
-                options.grab.load(source === null || source === void 0 ? void 0 : source.grab);
+                options.grab.load(source?.grab);
             }
         }
         reset() {

package/umd/Options/Classes/Grab.js

@@ -29,14 +29,13 @@
             this.links = value;
         }
         load(data) {
-            var _a, _b;
             if (!data) {
                 return;
             }
             if (data.distance !== undefined) {
                 this.distance = data.distance;
             }
-            this.links.load((_b = (_a = data.links) !== null && _a !== void 0 ? _a : data.lineLinked) !== null && _b !== void 0 ? _b : data.line_linked);
+            this.links.load(data.links ?? data.lineLinked ?? data.line_linked);
         }
     }
     exports.Grab = Grab;

package/umd/Utils.js

@@ -0,0 +1,28 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports", "@tsparticles/engine"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.drawGrab = exports.drawGrabLine = void 0;
+    const engine_1 = require("@tsparticles/engine");
+    function drawGrabLine(context, width, begin, end, colorLine, opacity) {
+        (0, engine_1.drawLine)(context, begin, end);
+        context.strokeStyle = (0, engine_1.getStyleFromRgb)(colorLine, opacity);
+        context.lineWidth = width;
+        context.stroke();
+    }
+    exports.drawGrabLine = drawGrabLine;
+    function drawGrab(container, particle, lineColor, opacity, mousePos) {
+        container.canvas.draw((ctx) => {
+            const beginPos = particle.getPosition();
+            drawGrabLine(ctx, particle.retina.linksWidth ?? 0, beginPos, mousePos, lineColor, opacity);
+        });
+    }
+    exports.drawGrab = drawGrab;
+});

package/umd/index.js

@@ -25,8 +25,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.loadExternalGrabInteraction = void 0;
     const Grabber_1 = require("./Grabber");
-    async function loadExternalGrabInteraction(engine) {
-        await engine.addInteractor("externalGrab", (container) => new Grabber_1.Grabber(container));
+    async function loadExternalGrabInteraction(engine, refresh = true) {
+        await engine.addInteractor("externalGrab", (container) => new Grabber_1.Grabber(container), refresh);
     }
     exports.loadExternalGrabInteraction = loadExternalGrabInteraction;
     __exportStar(require("./Options/Classes/Grab"), exports);