@tsparticles/interaction-external-repulse 4.0.0-alpha.0 → 4.0.0-alpha.14

package/224.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_interaction_external_repulse=this.webpackChunk_tsparticles_interaction_external_repulse||[]).push([[224],{224(e,t,i){i.d(t,{Repulser:()=>o});var s=i(303),l=i(702),n=i(422);let r="repulse";class o extends l.ExternalInteractorBase{handleClickMode;_engine;constructor(e,t){super(t),this._engine=e,t.repulse??={particles:[]},this.handleClickMode=(e,i)=>{let l=this.container.actualOptions,n=l.interactivity?.modes.repulse;if(!n||e!==r)return;t.repulse??={particles:[]};let o=t.repulse;for(let e of(o.clicking=!0,o.count=0,t.repulse.particles))this.isEnabled(i,e)&&e.velocity.setTo(e.initialVelocity);o.particles=[],o.finish=!1,setTimeout(()=>{t.destroyed||(o.clicking=!1)},n.duration*s.millisecondsToSeconds)}}clear(){}init(){let e=this.container,t=e.actualOptions.interactivity?.modes.repulse;t&&(e.retina.repulseModeDistance=t.distance*e.retina.pixelRatio)}interact(e){let t=this.container.actualOptions,i=e.status===l.mouseMoveEvent,n=t.interactivity?.events;if(!n)return;let o=n.onHover,c=o.enable,a=o.mode,p=n.onClick,u=p.enable,f=p.mode,d=n.onDiv;i&&c&&(0,s.isInArray)(r,a)?this._hoverRepulse(e):u&&(0,s.isInArray)(r,f)?this._clickRepulse(e):(0,l.divModeExecute)(r,d,(t,i)=>{this._singleSelectorRepulse(e,t,i)})}isEnabled(e,t){let i=this.container.actualOptions,n=e.mouse,o=(t?.interactivity??i.interactivity)?.events;if(!o)return!1;let c=o.onDiv,a=o.onHover,p=o.onClick,u=(0,l.isDivModeEnabled)(r,c);if(!(u||a.enable&&n.position||p.enable&&n.clickPosition))return!1;let f=a.mode,d=p.mode;return(0,s.isInArray)(r,f)||(0,s.isInArray)(r,d)||u}loadModeOptions(e,...t){for(let i of(e.repulse??=new n.Z,t))e.repulse.load(i?.repulse)}reset(){}_clickRepulse=e=>{let t=this.container,i=t.actualOptions.interactivity?.modes.repulse;if(!i)return;let l=t.repulse??{particles:[]};if(l.finish||(l.count??=0,l.count++,l.count===t.particles.count&&(l.finish=!0)),l.clicking){let n=t.retina.repulseModeDistance;if(!n||n<0)return;let r=Math.pow(n/6,3),o=e.mouse.clickPosition;if(void 0===o)return;let c=new s.Circle(o.x,o.y,r);for(let n of t.particles.quadTree.query(c,t=>this.isEnabled(e,t))){let{dx:e,dy:t,distance:c}=(0,s.getDistances)(o,n.position),a=c**2,p=-r*i.speed/a;if(a<=r){l.particles.push(n);let i=s.Vector.create(e,t);i.length=p,n.velocity.setTo(i)}}}else if(!1===l.clicking){for(let e of l.particles)e.velocity.setTo(e.initialVelocity);l.particles=[]}};_hoverRepulse=e=>{let t=this.container,i=e.mouse.position,l=t.retina.repulseModeDistance;l&&!(l<0)&&i&&this._processRepulse(e,i,l,new s.Circle(i.x,i.y,l))};_processRepulse=(e,t,i,l,n)=>{let r=this.container,o=r.particles.quadTree.query(l,t=>this.isEnabled(e,t)),c=r.actualOptions.interactivity?.modes.repulse;if(!c)return;let{easing:a,speed:p,factor:u,maxSpeed:f}=c,d=this._engine.getEasing(a),h=(n?.speed??p)*u;for(let e of o){let{dx:l,dy:n,distance:r}=(0,s.getDistances)(e.position,t),o=(0,s.clamp)(d(1-r/i)*h,0,f),c=s.Vector.create(r?l/r*o:h,r?n/r*o:h);e.position.addTo(c)}};_singleSelectorRepulse=(e,t,i)=>{let n=this.container,r=n.actualOptions.interactivity?.modes.repulse;if(!r)return;let o=(0,s.safeDocument)().querySelectorAll(t);o.length&&o.forEach(t=>{let o=n.retina.pixelRatio,c={x:(t.offsetLeft+t.offsetWidth*s.half)*o,y:(t.offsetTop+t.offsetHeight*s.half)*o},a=t.offsetWidth*s.half*o,p=i.type===l.DivType.circle?new s.Circle(c.x,c.y,a):new s.Rectangle(t.offsetLeft*o,t.offsetTop*o,t.offsetWidth*o,t.offsetHeight*o),u=r.divs,f=(0,l.divMode)(u,t);this._processRepulse(e,c,a,p,f)})}}}}]);

package/browser/Options/Classes/Repulse.js

@@ -2,6 +2,7 @@ import { executeOnSingleOrMultiple, isNull, } from "@tsparticles/engine";
 import { RepulseBase } from "./RepulseBase.js";
 import { RepulseDiv } from "./RepulseDiv.js";
 export class Repulse extends RepulseBase {
+    divs;
     load(data) {
         super.load(data);
         if (isNull(data)) {

package/browser/Options/Classes/RepulseBase.js

@@ -1,5 +1,11 @@
 import { EasingType, isNull } from "@tsparticles/engine";
 export class RepulseBase {
+    distance;
+    duration;
+    easing;
+    factor;
+    maxSpeed;
+    speed;
     constructor() {
         this.distance = 200;
         this.duration = 0.4;

package/browser/Options/Classes/RepulseDiv.js

@@ -1,6 +1,7 @@
 import { isNull } from "@tsparticles/engine";
 import { RepulseBase } from "./RepulseBase.js";
 export class RepulseDiv extends RepulseBase {
+    selectors;
     constructor() {
         super();
         this.selectors = [];

package/browser/Repulser.js

@@ -1,90 +1,16 @@
-import { Circle, DivType, ExternalInteractorBase, Rectangle, Vector, clamp, divMode, divModeExecute, getDistances, isDivModeEnabled, isInArray, millisecondsToSeconds, mouseMoveEvent, safeDocument, } from "@tsparticles/engine";
+import { Circle, Rectangle, Vector, clamp, getDistances, half, isInArray, millisecondsToSeconds, safeDocument, } from "@tsparticles/engine";
+import { DivType, ExternalInteractorBase, divMode, divModeExecute, isDivModeEnabled, mouseMoveEvent, } from "@tsparticles/plugin-interactivity";
 import { Repulse } from "./Options/Classes/Repulse.js";
-const repulseMode = "repulse", minDistance = 0, repulseRadiusFactor = 6, repulseRadiusPower = 3, squarePower = 2, minRadius = 0, minSpeed = 0, easingOffset = 1, half = 0.5;
+const repulseMode = "repulse", minDistance = 0, repulseRadiusFactor = 6, repulseRadiusPower = 3, squarePower = 2, minRadius = 0, minSpeed = 0, easingOffset = 1;
 export class Repulser extends ExternalInteractorBase {
+    handleClickMode;
+    _engine;
     constructor(engine, container) {
         super(container);
-        this._clickRepulse = () => {
-            const container = this.container, repulseOptions = container.actualOptions.interactivity.modes.repulse;
-            if (!repulseOptions) {
-                return;
-            }
-            const repulse = container.repulse ?? { particles: [] };
-            if (!repulse.finish) {
-                repulse.count ??= 0;
-                repulse.count++;
-                if (repulse.count === container.particles.count) {
-                    repulse.finish = true;
-                }
-            }
-            if (repulse.clicking) {
-                const repulseDistance = container.retina.repulseModeDistance;
-                if (!repulseDistance || repulseDistance < minDistance) {
-                    return;
-                }
-                const repulseRadius = Math.pow(repulseDistance / repulseRadiusFactor, repulseRadiusPower), mouseClickPos = container.interactivity.mouse.clickPosition;
-                if (mouseClickPos === undefined) {
-                    return;
-                }
-                const range = new Circle(mouseClickPos.x, mouseClickPos.y, repulseRadius), query = container.particles.quadTree.query(range, p => this.isEnabled(p));
-                for (const particle of query) {
-                    const { dx, dy, distance } = getDistances(mouseClickPos, particle.position), d = distance ** squarePower, velocity = repulseOptions.speed, force = (-repulseRadius * velocity) / d;
-                    if (d <= repulseRadius) {
-                        repulse.particles.push(particle);
-                        const vect = Vector.create(dx, dy);
-                        vect.length = force;
-                        particle.velocity.setTo(vect);
-                    }
-                }
-            }
-            else if (repulse.clicking === false) {
-                for (const particle of repulse.particles) {
-                    particle.velocity.setTo(particle.initialVelocity);
-                }
-                repulse.particles = [];
-            }
-        };
-        this._hoverRepulse = () => {
-            const container = this.container, mousePos = container.interactivity.mouse.position, repulseRadius = container.retina.repulseModeDistance;
-            if (!repulseRadius || repulseRadius < minRadius || !mousePos) {
-                return;
-            }
-            this._processRepulse(mousePos, repulseRadius, new Circle(mousePos.x, mousePos.y, repulseRadius));
-        };
-        this._processRepulse = (position, repulseRadius, area, divRepulse) => {
-            const container = this.container, query = container.particles.quadTree.query(area, p => this.isEnabled(p)), repulseOptions = container.actualOptions.interactivity.modes.repulse;
-            if (!repulseOptions) {
-                return;
-            }
-            const { easing, speed, factor, maxSpeed } = repulseOptions, easingFunc = this._engine.getEasing(easing), velocity = (divRepulse?.speed ?? speed) * factor;
-            for (const particle of query) {
-                const { dx, dy, distance } = getDistances(particle.position, position), repulseFactor = clamp(easingFunc(easingOffset - distance / repulseRadius) * velocity, minSpeed, maxSpeed), normVec = Vector.create(!distance ? velocity : (dx / distance) * repulseFactor, !distance ? velocity : (dy / distance) * repulseFactor);
-                particle.position.addTo(normVec);
-            }
-        };
-        this._singleSelectorRepulse = (selector, div) => {
-            const container = this.container, repulse = container.actualOptions.interactivity.modes.repulse;
-            if (!repulse) {
-                return;
-            }
-            const query = safeDocument().querySelectorAll(selector);
-            if (!query.length) {
-                return;
-            }
-            query.forEach(item => {
-                const elem = item, pxRatio = container.retina.pixelRatio, pos = {
-                    x: (elem.offsetLeft + elem.offsetWidth * half) * pxRatio,
-                    y: (elem.offsetTop + elem.offsetHeight * half) * pxRatio,
-                }, repulseRadius = elem.offsetWidth * half * pxRatio, area = div.type === DivType.circle
-                    ? new Circle(pos.x, pos.y, repulseRadius)
-                    : new Rectangle(elem.offsetLeft * pxRatio, elem.offsetTop * pxRatio, elem.offsetWidth * pxRatio, elem.offsetHeight * pxRatio), divs = repulse.divs, divRepulse = divMode(divs, elem);
-                this._processRepulse(pos, repulseRadius, area, divRepulse);
-            });
-        };
         this._engine = engine;
         container.repulse ??= { particles: [] };
-        this.handleClickMode = (mode) => {
-            const options = this.container.actualOptions, repulseOpts = options.interactivity.modes.repulse;
+        this.handleClickMode = (mode, interactivityData) => {
+            const options = this.container.actualOptions, repulseOpts = options.interactivity?.modes.repulse;
             if (!repulseOpts || mode !== repulseMode) {
                 return;
             }
@@ -93,7 +19,7 @@ export class Repulser extends ExternalInteractorBase {
             repulse.clicking = true;
             repulse.count = 0;
             for (const particle of container.repulse.particles) {
-                if (!this.isEnabled(particle)) {
+                if (!this.isEnabled(interactivityData, particle)) {
                     continue;
                 }
                 particle.velocity.setTo(particle.initialVelocity);
@@ -111,28 +37,36 @@ export class Repulser extends ExternalInteractorBase {
     clear() {
     }
     init() {
-        const container = this.container, repulse = container.actualOptions.interactivity.modes.repulse;
+        const container = this.container, repulse = container.actualOptions.interactivity?.modes.repulse;
         if (!repulse) {
             return;
         }
         container.retina.repulseModeDistance = repulse.distance * container.retina.pixelRatio;
     }
-    interact() {
-        const container = this.container, options = container.actualOptions, mouseMoveStatus = container.interactivity.status === mouseMoveEvent, events = options.interactivity.events, hover = events.onHover, hoverEnabled = hover.enable, hoverMode = hover.mode, click = events.onClick, clickEnabled = click.enable, clickMode = click.mode, divs = events.onDiv;
+    interact(interactivityData) {
+        const container = this.container, options = container.actualOptions, mouseMoveStatus = interactivityData.status === mouseMoveEvent, events = options.interactivity?.events;
+        if (!events) {
+            return;
+        }
+        const hover = events.onHover, hoverEnabled = hover.enable, hoverMode = hover.mode, click = events.onClick, clickEnabled = click.enable, clickMode = click.mode, divs = events.onDiv;
         if (mouseMoveStatus && hoverEnabled && isInArray(repulseMode, hoverMode)) {
-            this._hoverRepulse();
+            this._hoverRepulse(interactivityData);
         }
         else if (clickEnabled && isInArray(repulseMode, clickMode)) {
-            this._clickRepulse();
+            this._clickRepulse(interactivityData);
         }
         else {
             divModeExecute(repulseMode, divs, (selector, div) => {
-                this._singleSelectorRepulse(selector, div);
+                this._singleSelectorRepulse(interactivityData, selector, div);
             });
         }
     }
-    isEnabled(particle) {
-        const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse, events = (particle?.interactivity ?? options.interactivity).events, divs = events.onDiv, hover = events.onHover, click = events.onClick, divRepulse = isDivModeEnabled(repulseMode, divs);
+    isEnabled(interactivityData, particle) {
+        const container = this.container, options = container.actualOptions, mouse = interactivityData.mouse, events = (particle?.interactivity ?? options.interactivity)?.events;
+        if (!events) {
+            return false;
+        }
+        const divs = events.onDiv, hover = events.onHover, click = events.onClick, divRepulse = isDivModeEnabled(repulseMode, divs);
         if (!(divRepulse || (hover.enable && !!mouse.position) || (click.enable && mouse.clickPosition))) {
             return false;
         }
@@ -147,4 +81,81 @@ export class Repulser extends ExternalInteractorBase {
     }
     reset() {
     }
+    _clickRepulse = interactivityData => {
+        const container = this.container, repulseOptions = container.actualOptions.interactivity?.modes.repulse;
+        if (!repulseOptions) {
+            return;
+        }
+        const repulse = container.repulse ?? { particles: [] };
+        if (!repulse.finish) {
+            repulse.count ??= 0;
+            repulse.count++;
+            if (repulse.count === container.particles.count) {
+                repulse.finish = true;
+            }
+        }
+        if (repulse.clicking) {
+            const repulseDistance = container.retina.repulseModeDistance;
+            if (!repulseDistance || repulseDistance < minDistance) {
+                return;
+            }
+            const repulseRadius = Math.pow(repulseDistance / repulseRadiusFactor, repulseRadiusPower), mouseClickPos = interactivityData.mouse.clickPosition;
+            if (mouseClickPos === undefined) {
+                return;
+            }
+            const range = new Circle(mouseClickPos.x, mouseClickPos.y, repulseRadius), query = container.particles.quadTree.query(range, p => this.isEnabled(interactivityData, p));
+            for (const particle of query) {
+                const { dx, dy, distance } = getDistances(mouseClickPos, particle.position), d = distance ** squarePower, velocity = repulseOptions.speed, force = (-repulseRadius * velocity) / d;
+                if (d <= repulseRadius) {
+                    repulse.particles.push(particle);
+                    const vect = Vector.create(dx, dy);
+                    vect.length = force;
+                    particle.velocity.setTo(vect);
+                }
+            }
+        }
+        else if (repulse.clicking === false) {
+            for (const particle of repulse.particles) {
+                particle.velocity.setTo(particle.initialVelocity);
+            }
+            repulse.particles = [];
+        }
+    };
+    _hoverRepulse = interactivityData => {
+        const container = this.container, mousePos = interactivityData.mouse.position, repulseRadius = container.retina.repulseModeDistance;
+        if (!repulseRadius || repulseRadius < minRadius || !mousePos) {
+            return;
+        }
+        this._processRepulse(interactivityData, mousePos, repulseRadius, new Circle(mousePos.x, mousePos.y, repulseRadius));
+    };
+    _processRepulse = (interactivityData, position, repulseRadius, area, divRepulse) => {
+        const container = this.container, query = container.particles.quadTree.query(area, p => this.isEnabled(interactivityData, p)), repulseOptions = container.actualOptions.interactivity?.modes.repulse;
+        if (!repulseOptions) {
+            return;
+        }
+        const { easing, speed, factor, maxSpeed } = repulseOptions, easingFunc = this._engine.getEasing(easing), velocity = (divRepulse?.speed ?? speed) * factor;
+        for (const particle of query) {
+            const { dx, dy, distance } = getDistances(particle.position, position), repulseFactor = clamp(easingFunc(easingOffset - distance / repulseRadius) * velocity, minSpeed, maxSpeed), normVec = Vector.create(!distance ? velocity : (dx / distance) * repulseFactor, !distance ? velocity : (dy / distance) * repulseFactor);
+            particle.position.addTo(normVec);
+        }
+    };
+    _singleSelectorRepulse = (interactivityData, selector, div) => {
+        const container = this.container, repulse = container.actualOptions.interactivity?.modes.repulse;
+        if (!repulse) {
+            return;
+        }
+        const query = safeDocument().querySelectorAll(selector);
+        if (!query.length) {
+            return;
+        }
+        query.forEach(item => {
+            const elem = item, pxRatio = container.retina.pixelRatio, pos = {
+                x: (elem.offsetLeft + elem.offsetWidth * half) * pxRatio,
+                y: (elem.offsetTop + elem.offsetHeight * half) * pxRatio,
+            }, repulseRadius = elem.offsetWidth * half * pxRatio, area = div.type === DivType.circle
+                ? new Circle(pos.x, pos.y, repulseRadius)
+                : new Rectangle(elem.offsetLeft * pxRatio, elem.offsetTop * pxRatio, elem.offsetWidth * pxRatio, elem.offsetHeight * pxRatio), divs = repulse.divs, divRepulse = divMode(divs, elem);
+            this._processRepulse(interactivityData, pos, repulseRadius, area, divRepulse);
+        });
+    };
 }

package/browser/index.js

@@ -1,7 +1,9 @@
-export function loadExternalRepulseInteraction(engine) {
-    engine.checkVersion("4.0.0-alpha.0");
-    engine.register(e => {
-        e.addInteractor("externalRepulse", async (container) => {
+export async function loadExternalRepulseInteraction(engine) {
+    engine.checkVersion("4.0.0-alpha.14");
+    await engine.register(async (e) => {
+        const { loadInteractivityPlugin } = await import("@tsparticles/plugin-interactivity");
+        await loadInteractivityPlugin(e);
+        e.addInteractor?.("externalRepulse", async (container) => {
             const { Repulser } = await import("./Repulser.js");
             return new Repulser(engine, container);
         });

package/cjs/Options/Classes/Repulse.js

@@ -2,6 +2,7 @@ import { executeOnSingleOrMultiple, isNull, } from "@tsparticles/engine";
 import { RepulseBase } from "./RepulseBase.js";
 import { RepulseDiv } from "./RepulseDiv.js";
 export class Repulse extends RepulseBase {
+    divs;
     load(data) {
         super.load(data);
         if (isNull(data)) {

package/cjs/Options/Classes/RepulseBase.js

@@ -1,5 +1,11 @@
 import { EasingType, isNull } from "@tsparticles/engine";
 export class RepulseBase {
+    distance;
+    duration;
+    easing;
+    factor;
+    maxSpeed;
+    speed;
     constructor() {
         this.distance = 200;
         this.duration = 0.4;

package/cjs/Options/Classes/RepulseDiv.js

@@ -1,6 +1,7 @@
 import { isNull } from "@tsparticles/engine";
 import { RepulseBase } from "./RepulseBase.js";
 export class RepulseDiv extends RepulseBase {
+    selectors;
     constructor() {
         super();
         this.selectors = [];

package/cjs/Repulser.js

@@ -1,90 +1,16 @@
-import { Circle, DivType, ExternalInteractorBase, Rectangle, Vector, clamp, divMode, divModeExecute, getDistances, isDivModeEnabled, isInArray, millisecondsToSeconds, mouseMoveEvent, safeDocument, } from "@tsparticles/engine";
+import { Circle, Rectangle, Vector, clamp, getDistances, half, isInArray, millisecondsToSeconds, safeDocument, } from "@tsparticles/engine";
+import { DivType, ExternalInteractorBase, divMode, divModeExecute, isDivModeEnabled, mouseMoveEvent, } from "@tsparticles/plugin-interactivity";
 import { Repulse } from "./Options/Classes/Repulse.js";
-const repulseMode = "repulse", minDistance = 0, repulseRadiusFactor = 6, repulseRadiusPower = 3, squarePower = 2, minRadius = 0, minSpeed = 0, easingOffset = 1, half = 0.5;
+const repulseMode = "repulse", minDistance = 0, repulseRadiusFactor = 6, repulseRadiusPower = 3, squarePower = 2, minRadius = 0, minSpeed = 0, easingOffset = 1;
 export class Repulser extends ExternalInteractorBase {
+    handleClickMode;
+    _engine;
     constructor(engine, container) {
         super(container);
-        this._clickRepulse = () => {
-            const container = this.container, repulseOptions = container.actualOptions.interactivity.modes.repulse;
-            if (!repulseOptions) {
-                return;
-            }
-            const repulse = container.repulse ?? { particles: [] };
-            if (!repulse.finish) {
-                repulse.count ??= 0;
-                repulse.count++;
-                if (repulse.count === container.particles.count) {
-                    repulse.finish = true;
-                }
-            }
-            if (repulse.clicking) {
-                const repulseDistance = container.retina.repulseModeDistance;
-                if (!repulseDistance || repulseDistance < minDistance) {
-                    return;
-                }
-                const repulseRadius = Math.pow(repulseDistance / repulseRadiusFactor, repulseRadiusPower), mouseClickPos = container.interactivity.mouse.clickPosition;
-                if (mouseClickPos === undefined) {
-                    return;
-                }
-                const range = new Circle(mouseClickPos.x, mouseClickPos.y, repulseRadius), query = container.particles.quadTree.query(range, p => this.isEnabled(p));
-                for (const particle of query) {
-                    const { dx, dy, distance } = getDistances(mouseClickPos, particle.position), d = distance ** squarePower, velocity = repulseOptions.speed, force = (-repulseRadius * velocity) / d;
-                    if (d <= repulseRadius) {
-                        repulse.particles.push(particle);
-                        const vect = Vector.create(dx, dy);
-                        vect.length = force;
-                        particle.velocity.setTo(vect);
-                    }
-                }
-            }
-            else if (repulse.clicking === false) {
-                for (const particle of repulse.particles) {
-                    particle.velocity.setTo(particle.initialVelocity);
-                }
-                repulse.particles = [];
-            }
-        };
-        this._hoverRepulse = () => {
-            const container = this.container, mousePos = container.interactivity.mouse.position, repulseRadius = container.retina.repulseModeDistance;
-            if (!repulseRadius || repulseRadius < minRadius || !mousePos) {
-                return;
-            }
-            this._processRepulse(mousePos, repulseRadius, new Circle(mousePos.x, mousePos.y, repulseRadius));
-        };
-        this._processRepulse = (position, repulseRadius, area, divRepulse) => {
-            const container = this.container, query = container.particles.quadTree.query(area, p => this.isEnabled(p)), repulseOptions = container.actualOptions.interactivity.modes.repulse;
-            if (!repulseOptions) {
-                return;
-            }
-            const { easing, speed, factor, maxSpeed } = repulseOptions, easingFunc = this._engine.getEasing(easing), velocity = (divRepulse?.speed ?? speed) * factor;
-            for (const particle of query) {
-                const { dx, dy, distance } = getDistances(particle.position, position), repulseFactor = clamp(easingFunc(easingOffset - distance / repulseRadius) * velocity, minSpeed, maxSpeed), normVec = Vector.create(!distance ? velocity : (dx / distance) * repulseFactor, !distance ? velocity : (dy / distance) * repulseFactor);
-                particle.position.addTo(normVec);
-            }
-        };
-        this._singleSelectorRepulse = (selector, div) => {
-            const container = this.container, repulse = container.actualOptions.interactivity.modes.repulse;
-            if (!repulse) {
-                return;
-            }
-            const query = safeDocument().querySelectorAll(selector);
-            if (!query.length) {
-                return;
-            }
-            query.forEach(item => {
-                const elem = item, pxRatio = container.retina.pixelRatio, pos = {
-                    x: (elem.offsetLeft + elem.offsetWidth * half) * pxRatio,
-                    y: (elem.offsetTop + elem.offsetHeight * half) * pxRatio,
-                }, repulseRadius = elem.offsetWidth * half * pxRatio, area = div.type === DivType.circle
-                    ? new Circle(pos.x, pos.y, repulseRadius)
-                    : new Rectangle(elem.offsetLeft * pxRatio, elem.offsetTop * pxRatio, elem.offsetWidth * pxRatio, elem.offsetHeight * pxRatio), divs = repulse.divs, divRepulse = divMode(divs, elem);
-                this._processRepulse(pos, repulseRadius, area, divRepulse);
-            });
-        };
         this._engine = engine;
         container.repulse ??= { particles: [] };
-        this.handleClickMode = (mode) => {
-            const options = this.container.actualOptions, repulseOpts = options.interactivity.modes.repulse;
+        this.handleClickMode = (mode, interactivityData) => {
+            const options = this.container.actualOptions, repulseOpts = options.interactivity?.modes.repulse;
             if (!repulseOpts || mode !== repulseMode) {
                 return;
             }
@@ -93,7 +19,7 @@ export class Repulser extends ExternalInteractorBase {
             repulse.clicking = true;
             repulse.count = 0;
             for (const particle of container.repulse.particles) {
-                if (!this.isEnabled(particle)) {
+                if (!this.isEnabled(interactivityData, particle)) {
                     continue;
                 }
                 particle.velocity.setTo(particle.initialVelocity);
@@ -111,28 +37,36 @@ export class Repulser extends ExternalInteractorBase {
     clear() {
     }
     init() {
-        const container = this.container, repulse = container.actualOptions.interactivity.modes.repulse;
+        const container = this.container, repulse = container.actualOptions.interactivity?.modes.repulse;
         if (!repulse) {
             return;
         }
         container.retina.repulseModeDistance = repulse.distance * container.retina.pixelRatio;
     }
-    interact() {
-        const container = this.container, options = container.actualOptions, mouseMoveStatus = container.interactivity.status === mouseMoveEvent, events = options.interactivity.events, hover = events.onHover, hoverEnabled = hover.enable, hoverMode = hover.mode, click = events.onClick, clickEnabled = click.enable, clickMode = click.mode, divs = events.onDiv;
+    interact(interactivityData) {
+        const container = this.container, options = container.actualOptions, mouseMoveStatus = interactivityData.status === mouseMoveEvent, events = options.interactivity?.events;
+        if (!events) {
+            return;
+        }
+        const hover = events.onHover, hoverEnabled = hover.enable, hoverMode = hover.mode, click = events.onClick, clickEnabled = click.enable, clickMode = click.mode, divs = events.onDiv;
         if (mouseMoveStatus && hoverEnabled && isInArray(repulseMode, hoverMode)) {
-            this._hoverRepulse();
+            this._hoverRepulse(interactivityData);
         }
         else if (clickEnabled && isInArray(repulseMode, clickMode)) {
-            this._clickRepulse();
+            this._clickRepulse(interactivityData);
         }
         else {
             divModeExecute(repulseMode, divs, (selector, div) => {
-                this._singleSelectorRepulse(selector, div);
+                this._singleSelectorRepulse(interactivityData, selector, div);
             });
         }
     }
-    isEnabled(particle) {
-        const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse, events = (particle?.interactivity ?? options.interactivity).events, divs = events.onDiv, hover = events.onHover, click = events.onClick, divRepulse = isDivModeEnabled(repulseMode, divs);
+    isEnabled(interactivityData, particle) {
+        const container = this.container, options = container.actualOptions, mouse = interactivityData.mouse, events = (particle?.interactivity ?? options.interactivity)?.events;
+        if (!events) {
+            return false;
+        }
+        const divs = events.onDiv, hover = events.onHover, click = events.onClick, divRepulse = isDivModeEnabled(repulseMode, divs);
         if (!(divRepulse || (hover.enable && !!mouse.position) || (click.enable && mouse.clickPosition))) {
             return false;
         }
@@ -147,4 +81,81 @@ export class Repulser extends ExternalInteractorBase {
     }
     reset() {
     }
+    _clickRepulse = interactivityData => {
+        const container = this.container, repulseOptions = container.actualOptions.interactivity?.modes.repulse;
+        if (!repulseOptions) {
+            return;
+        }
+        const repulse = container.repulse ?? { particles: [] };
+        if (!repulse.finish) {
+            repulse.count ??= 0;
+            repulse.count++;
+            if (repulse.count === container.particles.count) {
+                repulse.finish = true;
+            }
+        }
+        if (repulse.clicking) {
+            const repulseDistance = container.retina.repulseModeDistance;
+            if (!repulseDistance || repulseDistance < minDistance) {
+                return;
+            }
+            const repulseRadius = Math.pow(repulseDistance / repulseRadiusFactor, repulseRadiusPower), mouseClickPos = interactivityData.mouse.clickPosition;
+            if (mouseClickPos === undefined) {
+                return;
+            }
+            const range = new Circle(mouseClickPos.x, mouseClickPos.y, repulseRadius), query = container.particles.quadTree.query(range, p => this.isEnabled(interactivityData, p));
+            for (const particle of query) {
+                const { dx, dy, distance } = getDistances(mouseClickPos, particle.position), d = distance ** squarePower, velocity = repulseOptions.speed, force = (-repulseRadius * velocity) / d;
+                if (d <= repulseRadius) {
+                    repulse.particles.push(particle);
+                    const vect = Vector.create(dx, dy);
+                    vect.length = force;
+                    particle.velocity.setTo(vect);
+                }
+            }
+        }
+        else if (repulse.clicking === false) {
+            for (const particle of repulse.particles) {
+                particle.velocity.setTo(particle.initialVelocity);
+            }
+            repulse.particles = [];
+        }
+    };
+    _hoverRepulse = interactivityData => {
+        const container = this.container, mousePos = interactivityData.mouse.position, repulseRadius = container.retina.repulseModeDistance;
+        if (!repulseRadius || repulseRadius < minRadius || !mousePos) {
+            return;
+        }
+        this._processRepulse(interactivityData, mousePos, repulseRadius, new Circle(mousePos.x, mousePos.y, repulseRadius));
+    };
+    _processRepulse = (interactivityData, position, repulseRadius, area, divRepulse) => {
+        const container = this.container, query = container.particles.quadTree.query(area, p => this.isEnabled(interactivityData, p)), repulseOptions = container.actualOptions.interactivity?.modes.repulse;
+        if (!repulseOptions) {
+            return;
+        }
+        const { easing, speed, factor, maxSpeed } = repulseOptions, easingFunc = this._engine.getEasing(easing), velocity = (divRepulse?.speed ?? speed) * factor;
+        for (const particle of query) {
+            const { dx, dy, distance } = getDistances(particle.position, position), repulseFactor = clamp(easingFunc(easingOffset - distance / repulseRadius) * velocity, minSpeed, maxSpeed), normVec = Vector.create(!distance ? velocity : (dx / distance) * repulseFactor, !distance ? velocity : (dy / distance) * repulseFactor);
+            particle.position.addTo(normVec);
+        }
+    };
+    _singleSelectorRepulse = (interactivityData, selector, div) => {
+        const container = this.container, repulse = container.actualOptions.interactivity?.modes.repulse;
+        if (!repulse) {
+            return;
+        }
+        const query = safeDocument().querySelectorAll(selector);
+        if (!query.length) {
+            return;
+        }
+        query.forEach(item => {
+            const elem = item, pxRatio = container.retina.pixelRatio, pos = {
+                x: (elem.offsetLeft + elem.offsetWidth * half) * pxRatio,
+                y: (elem.offsetTop + elem.offsetHeight * half) * pxRatio,
+            }, repulseRadius = elem.offsetWidth * half * pxRatio, area = div.type === DivType.circle
+                ? new Circle(pos.x, pos.y, repulseRadius)
+                : new Rectangle(elem.offsetLeft * pxRatio, elem.offsetTop * pxRatio, elem.offsetWidth * pxRatio, elem.offsetHeight * pxRatio), divs = repulse.divs, divRepulse = divMode(divs, elem);
+            this._processRepulse(interactivityData, pos, repulseRadius, area, divRepulse);
+        });
+    };
 }

package/cjs/index.js

@@ -1,7 +1,9 @@
-export function loadExternalRepulseInteraction(engine) {
-    engine.checkVersion("4.0.0-alpha.0");
-    engine.register(e => {
-        e.addInteractor("externalRepulse", async (container) => {
+export async function loadExternalRepulseInteraction(engine) {
+    engine.checkVersion("4.0.0-alpha.14");
+    await engine.register(async (e) => {
+        const { loadInteractivityPlugin } = await import("@tsparticles/plugin-interactivity");
+        await loadInteractivityPlugin(e);
+        e.addInteractor?.("externalRepulse", async (container) => {
             const { Repulser } = await import("./Repulser.js");
             return new Repulser(engine, container);
         });

package/dist_browser_Repulser_js.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
- * v4.0.0-alpha.0
+ * v4.0.0-alpha.14
  */
 "use strict";
 /*
@@ -23,7 +23,7 @@
   \**********************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Repulser: () => (/* binding */ Repulser)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _Options_Classes_Repulse_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Options/Classes/Repulse.js */ \"./dist/browser/Options/Classes/Repulse.js\");\n\n\nconst repulseMode = \"repulse\",\n  minDistance = 0,\n  repulseRadiusFactor = 6,\n  repulseRadiusPower = 3,\n  squarePower = 2,\n  minRadius = 0,\n  minSpeed = 0,\n  easingOffset = 1,\n  half = 0.5;\nclass Repulser extends _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.ExternalInteractorBase {\n  constructor(engine, container) {\n    super(container);\n    this._clickRepulse = () => {\n      const container = this.container,\n        repulseOptions = container.actualOptions.interactivity.modes.repulse;\n      if (!repulseOptions) {\n        return;\n      }\n      const repulse = container.repulse ?? {\n        particles: []\n      };\n      if (!repulse.finish) {\n        repulse.count ??= 0;\n        repulse.count++;\n        if (repulse.count === container.particles.count) {\n          repulse.finish = true;\n        }\n      }\n      if (repulse.clicking) {\n        const repulseDistance = container.retina.repulseModeDistance;\n        if (!repulseDistance || repulseDistance < minDistance) {\n          return;\n        }\n        const repulseRadius = Math.pow(repulseDistance / repulseRadiusFactor, repulseRadiusPower),\n          mouseClickPos = container.interactivity.mouse.clickPosition;\n        if (mouseClickPos === undefined) {\n          return;\n        }\n        const range = new _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Circle(mouseClickPos.x, mouseClickPos.y, repulseRadius),\n          query = container.particles.quadTree.query(range, p => this.isEnabled(p));\n        for (const particle of query) {\n          const {\n              dx,\n              dy,\n              distance\n            } = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistances)(mouseClickPos, particle.position),\n            d = distance ** squarePower,\n            velocity = repulseOptions.speed,\n            force = -repulseRadius * velocity / d;\n          if (d <= repulseRadius) {\n            repulse.particles.push(particle);\n            const vect = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Vector.create(dx, dy);\n            vect.length = force;\n            particle.velocity.setTo(vect);\n          }\n        }\n      } else if (repulse.clicking === false) {\n        for (const particle of repulse.particles) {\n          particle.velocity.setTo(particle.initialVelocity);\n        }\n        repulse.particles = [];\n      }\n    };\n    this._hoverRepulse = () => {\n      const container = this.container,\n        mousePos = container.interactivity.mouse.position,\n        repulseRadius = container.retina.repulseModeDistance;\n      if (!repulseRadius || repulseRadius < minRadius || !mousePos) {\n        return;\n      }\n      this._processRepulse(mousePos, repulseRadius, new _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Circle(mousePos.x, mousePos.y, repulseRadius));\n    };\n    this._processRepulse = (position, repulseRadius, area, divRepulse) => {\n      const container = this.container,\n        query = container.particles.quadTree.query(area, p => this.isEnabled(p)),\n        repulseOptions = container.actualOptions.interactivity.modes.repulse;\n      if (!repulseOptions) {\n        return;\n      }\n      const {\n          easing,\n          speed,\n          factor,\n          maxSpeed\n        } = repulseOptions,\n        easingFunc = this._engine.getEasing(easing),\n        velocity = (divRepulse?.speed ?? speed) * factor;\n      for (const particle of query) {\n        const {\n            dx,\n            dy,\n            distance\n          } = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistances)(particle.position, position),\n          repulseFactor = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.clamp)(easingFunc(easingOffset - distance / repulseRadius) * velocity, minSpeed, maxSpeed),\n          normVec = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Vector.create(!distance ? velocity : dx / distance * repulseFactor, !distance ? velocity : dy / distance * repulseFactor);\n        particle.position.addTo(normVec);\n      }\n    };\n    this._singleSelectorRepulse = (selector, div) => {\n      const container = this.container,\n        repulse = container.actualOptions.interactivity.modes.repulse;\n      if (!repulse) {\n        return;\n      }\n      const query = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.safeDocument)().querySelectorAll(selector);\n      if (!query.length) {\n        return;\n      }\n      query.forEach(item => {\n        const elem = item,\n          pxRatio = container.retina.pixelRatio,\n          pos = {\n            x: (elem.offsetLeft + elem.offsetWidth * half) * pxRatio,\n            y: (elem.offsetTop + elem.offsetHeight * half) * pxRatio\n          },\n          repulseRadius = elem.offsetWidth * half * pxRatio,\n          area = div.type === _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.DivType.circle ? new _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Circle(pos.x, pos.y, repulseRadius) : new _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Rectangle(elem.offsetLeft * pxRatio, elem.offsetTop * pxRatio, elem.offsetWidth * pxRatio, elem.offsetHeight * pxRatio),\n          divs = repulse.divs,\n          divRepulse = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.divMode)(divs, elem);\n        this._processRepulse(pos, repulseRadius, area, divRepulse);\n      });\n    };\n    this._engine = engine;\n    container.repulse ??= {\n      particles: []\n    };\n    this.handleClickMode = mode => {\n      const options = this.container.actualOptions,\n        repulseOpts = options.interactivity.modes.repulse;\n      if (!repulseOpts || mode !== repulseMode) {\n        return;\n      }\n      container.repulse ??= {\n        particles: []\n      };\n      const repulse = container.repulse;\n      repulse.clicking = true;\n      repulse.count = 0;\n      for (const particle of container.repulse.particles) {\n        if (!this.isEnabled(particle)) {\n          continue;\n        }\n        particle.velocity.setTo(particle.initialVelocity);\n      }\n      repulse.particles = [];\n      repulse.finish = false;\n      setTimeout(() => {\n        if (container.destroyed) {\n          return;\n        }\n        repulse.clicking = false;\n      }, repulseOpts.duration * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.millisecondsToSeconds);\n    };\n  }\n  clear() {}\n  init() {\n    const container = this.container,\n      repulse = container.actualOptions.interactivity.modes.repulse;\n    if (!repulse) {\n      return;\n    }\n    container.retina.repulseModeDistance = repulse.distance * container.retina.pixelRatio;\n  }\n  interact() {\n    const container = this.container,\n      options = container.actualOptions,\n      mouseMoveStatus = container.interactivity.status === _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.mouseMoveEvent,\n      events = options.interactivity.events,\n      hover = events.onHover,\n      hoverEnabled = hover.enable,\n      hoverMode = hover.mode,\n      click = events.onClick,\n      clickEnabled = click.enable,\n      clickMode = click.mode,\n      divs = events.onDiv;\n    if (mouseMoveStatus && hoverEnabled && (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(repulseMode, hoverMode)) {\n      this._hoverRepulse();\n    } else if (clickEnabled && (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(repulseMode, clickMode)) {\n      this._clickRepulse();\n    } else {\n      (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.divModeExecute)(repulseMode, divs, (selector, div) => {\n        this._singleSelectorRepulse(selector, div);\n      });\n    }\n  }\n  isEnabled(particle) {\n    const container = this.container,\n      options = container.actualOptions,\n      mouse = container.interactivity.mouse,\n      events = (particle?.interactivity ?? options.interactivity).events,\n      divs = events.onDiv,\n      hover = events.onHover,\n      click = events.onClick,\n      divRepulse = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isDivModeEnabled)(repulseMode, divs);\n    if (!(divRepulse || hover.enable && !!mouse.position || click.enable && mouse.clickPosition)) {\n      return false;\n    }\n    const hoverMode = hover.mode,\n      clickMode = click.mode;\n    return (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(repulseMode, hoverMode) || (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(repulseMode, clickMode) || divRepulse;\n  }\n  loadModeOptions(options, ...sources) {\n    options.repulse ??= new _Options_Classes_Repulse_js__WEBPACK_IMPORTED_MODULE_1__.Repulse();\n    for (const source of sources) {\n      options.repulse.load(source?.repulse);\n    }\n  }\n  reset() {}\n}\n\n//# sourceURL=webpack://@tsparticles/interaction-external-repulse/./dist/browser/Repulser.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Repulser: () => (/* binding */ Repulser)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @tsparticles/plugin-interactivity */ \"@tsparticles/plugin-interactivity\");\n/* harmony import */ var _Options_Classes_Repulse_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Options/Classes/Repulse.js */ \"./dist/browser/Options/Classes/Repulse.js\");\n\n\n\nconst repulseMode = \"repulse\", minDistance = 0, repulseRadiusFactor = 6, repulseRadiusPower = 3, squarePower = 2, minRadius = 0, minSpeed = 0, easingOffset = 1;\nclass Repulser extends _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__.ExternalInteractorBase {\n    handleClickMode;\n    _engine;\n    constructor(engine, container){\n        super(container);\n        this._engine = engine;\n        container.repulse ??= {\n            particles: []\n        };\n        this.handleClickMode = (mode, interactivityData)=>{\n            const options = this.container.actualOptions, repulseOpts = options.interactivity?.modes.repulse;\n            if (!repulseOpts || mode !== repulseMode) {\n                return;\n            }\n            container.repulse ??= {\n                particles: []\n            };\n            const repulse = container.repulse;\n            repulse.clicking = true;\n            repulse.count = 0;\n            for (const particle of container.repulse.particles){\n                if (!this.isEnabled(interactivityData, particle)) {\n                    continue;\n                }\n                particle.velocity.setTo(particle.initialVelocity);\n            }\n            repulse.particles = [];\n            repulse.finish = false;\n            setTimeout(()=>{\n                if (container.destroyed) {\n                    return;\n                }\n                repulse.clicking = false;\n            }, repulseOpts.duration * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.millisecondsToSeconds);\n        };\n    }\n    clear() {}\n    init() {\n        const container = this.container, repulse = container.actualOptions.interactivity?.modes.repulse;\n        if (!repulse) {\n            return;\n        }\n        container.retina.repulseModeDistance = repulse.distance * container.retina.pixelRatio;\n    }\n    interact(interactivityData) {\n        const container = this.container, options = container.actualOptions, mouseMoveStatus = interactivityData.status === _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__.mouseMoveEvent, events = options.interactivity?.events;\n        if (!events) {\n            return;\n        }\n        const hover = events.onHover, hoverEnabled = hover.enable, hoverMode = hover.mode, click = events.onClick, clickEnabled = click.enable, clickMode = click.mode, divs = events.onDiv;\n        if (mouseMoveStatus && hoverEnabled && (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(repulseMode, hoverMode)) {\n            this._hoverRepulse(interactivityData);\n        } else if (clickEnabled && (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(repulseMode, clickMode)) {\n            this._clickRepulse(interactivityData);\n        } else {\n            (0,_tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__.divModeExecute)(repulseMode, divs, (selector, div)=>{\n                this._singleSelectorRepulse(interactivityData, selector, div);\n            });\n        }\n    }\n    isEnabled(interactivityData, particle) {\n        const container = this.container, options = container.actualOptions, mouse = interactivityData.mouse, events = (particle?.interactivity ?? options.interactivity)?.events;\n        if (!events) {\n            return false;\n        }\n        const divs = events.onDiv, hover = events.onHover, click = events.onClick, divRepulse = (0,_tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__.isDivModeEnabled)(repulseMode, divs);\n        if (!(divRepulse || hover.enable && !!mouse.position || click.enable && mouse.clickPosition)) {\n            return false;\n        }\n        const hoverMode = hover.mode, clickMode = click.mode;\n        return (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(repulseMode, hoverMode) || (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(repulseMode, clickMode) || divRepulse;\n    }\n    loadModeOptions(options, ...sources) {\n        options.repulse ??= new _Options_Classes_Repulse_js__WEBPACK_IMPORTED_MODULE_2__.Repulse();\n        for (const source of sources){\n            options.repulse.load(source?.repulse);\n        }\n    }\n    reset() {}\n    _clickRepulse = (interactivityData)=>{\n        const container = this.container, repulseOptions = container.actualOptions.interactivity?.modes.repulse;\n        if (!repulseOptions) {\n            return;\n        }\n        const repulse = container.repulse ?? {\n            particles: []\n        };\n        if (!repulse.finish) {\n            repulse.count ??= 0;\n            repulse.count++;\n            if (repulse.count === container.particles.count) {\n                repulse.finish = true;\n            }\n        }\n        if (repulse.clicking) {\n            const repulseDistance = container.retina.repulseModeDistance;\n            if (!repulseDistance || repulseDistance < minDistance) {\n                return;\n            }\n            const repulseRadius = Math.pow(repulseDistance / repulseRadiusFactor, repulseRadiusPower), mouseClickPos = interactivityData.mouse.clickPosition;\n            if (mouseClickPos === undefined) {\n                return;\n            }\n            const range = new _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Circle(mouseClickPos.x, mouseClickPos.y, repulseRadius), query = container.particles.quadTree.query(range, (p)=>this.isEnabled(interactivityData, p));\n            for (const particle of query){\n                const { dx, dy, distance } = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistances)(mouseClickPos, particle.position), d = distance ** squarePower, velocity = repulseOptions.speed, force = -repulseRadius * velocity / d;\n                if (d <= repulseRadius) {\n                    repulse.particles.push(particle);\n                    const vect = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Vector.create(dx, dy);\n                    vect.length = force;\n                    particle.velocity.setTo(vect);\n                }\n            }\n        } else if (repulse.clicking === false) {\n            for (const particle of repulse.particles){\n                particle.velocity.setTo(particle.initialVelocity);\n            }\n            repulse.particles = [];\n        }\n    };\n    _hoverRepulse = (interactivityData)=>{\n        const container = this.container, mousePos = interactivityData.mouse.position, repulseRadius = container.retina.repulseModeDistance;\n        if (!repulseRadius || repulseRadius < minRadius || !mousePos) {\n            return;\n        }\n        this._processRepulse(interactivityData, mousePos, repulseRadius, new _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Circle(mousePos.x, mousePos.y, repulseRadius));\n    };\n    _processRepulse = (interactivityData, position, repulseRadius, area, divRepulse)=>{\n        const container = this.container, query = container.particles.quadTree.query(area, (p)=>this.isEnabled(interactivityData, p)), repulseOptions = container.actualOptions.interactivity?.modes.repulse;\n        if (!repulseOptions) {\n            return;\n        }\n        const { easing, speed, factor, maxSpeed } = repulseOptions, easingFunc = this._engine.getEasing(easing), velocity = (divRepulse?.speed ?? speed) * factor;\n        for (const particle of query){\n            const { dx, dy, distance } = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistances)(particle.position, position), repulseFactor = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.clamp)(easingFunc(easingOffset - distance / repulseRadius) * velocity, minSpeed, maxSpeed), normVec = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Vector.create(!distance ? velocity : dx / distance * repulseFactor, !distance ? velocity : dy / distance * repulseFactor);\n            particle.position.addTo(normVec);\n        }\n    };\n    _singleSelectorRepulse = (interactivityData, selector, div)=>{\n        const container = this.container, repulse = container.actualOptions.interactivity?.modes.repulse;\n        if (!repulse) {\n            return;\n        }\n        const query = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.safeDocument)().querySelectorAll(selector);\n        if (!query.length) {\n            return;\n        }\n        query.forEach((item)=>{\n            const elem = item, pxRatio = container.retina.pixelRatio, pos = {\n                x: (elem.offsetLeft + elem.offsetWidth * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half) * pxRatio,\n                y: (elem.offsetTop + elem.offsetHeight * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half) * pxRatio\n            }, repulseRadius = elem.offsetWidth * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half * pxRatio, area = div.type === _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__.DivType.circle ? new _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Circle(pos.x, pos.y, repulseRadius) : new _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Rectangle(elem.offsetLeft * pxRatio, elem.offsetTop * pxRatio, elem.offsetWidth * pxRatio, elem.offsetHeight * pxRatio), divs = repulse.divs, divRepulse = (0,_tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__.divMode)(divs, elem);\n            this._processRepulse(interactivityData, pos, repulseRadius, area, divRepulse);\n        });\n    };\n}\n\n\n//# sourceURL=webpack://@tsparticles/interaction-external-repulse/./dist/browser/Repulser.js?\n}");
 
 /***/ }
 

package/esm/Options/Classes/Repulse.js

@@ -2,6 +2,7 @@ import { executeOnSingleOrMultiple, isNull, } from "@tsparticles/engine";
 import { RepulseBase } from "./RepulseBase.js";
 import { RepulseDiv } from "./RepulseDiv.js";
 export class Repulse extends RepulseBase {
+    divs;
     load(data) {
         super.load(data);
         if (isNull(data)) {