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

package/esm/Repulser.js

@@ -3,86 +3,17 @@ import { DivType, ExternalInteractorBase, divMode, divModeExecute, isDivModeEnab
 import { Repulse } from "./Options/Classes/Repulse.js";
 const repulseMode = "repulse", minDistance = 0, repulseRadiusFactor = 6, repulseRadiusPower = 3, squarePower = 2, minRadius = 0, minSpeed = 0, easingOffset = 1;
 export class Repulser extends ExternalInteractorBase {
+    handleClickMode;
+    _clickVec;
+    _engine;
+    _maxDistance;
+    _normVec;
     constructor(engine, container) {
         super(container);
-        this._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 = [];
-            }
-        };
-        this._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));
-        };
-        this._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);
-            }
-        };
-        this._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);
-            });
-        };
         this._engine = engine;
+        this._maxDistance = 0;
+        this._normVec = Vector.origin;
+        this._clickVec = Vector.origin;
         container.repulse ??= { particles: [] };
         this.handleClickMode = (mode, interactivityData) => {
             const options = this.container.actualOptions, repulseOpts = options.interactivity?.modes.repulse;
@@ -109,6 +40,9 @@ export class Repulser extends ExternalInteractorBase {
             }, repulseOpts.duration * millisecondsToSeconds);
         };
     }
+    get maxDistance() {
+        return this._maxDistance;
+    }
     clear() {
     }
     init() {
@@ -116,6 +50,7 @@ export class Repulser extends ExternalInteractorBase {
         if (!repulse) {
             return;
         }
+        this._maxDistance = repulse.distance;
         container.retina.repulseModeDistance = repulse.distance * container.retina.pixelRatio;
     }
     interact(interactivityData) {
@@ -156,4 +91,84 @@ 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.grid.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);
+                    this._clickVec.x = dx;
+                    this._clickVec.y = dy;
+                    this._clickVec.length = force;
+                    particle.velocity.setTo(this._clickVec);
+                }
+            }
+        }
+        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.grid.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);
+            this._normVec.x = !distance ? velocity : (dx / distance) * repulseFactor;
+            this._normVec.y = !distance ? velocity : (dy / distance) * repulseFactor;
+            particle.position.addTo(this._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/esm/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/interaction-external-repulse",
-  "version": "4.0.0-alpha.5",
+  "version": "4.0.0-beta.0",
   "description": "tsParticles repulse external interaction",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -87,8 +87,8 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@tsparticles/engine": "4.0.0-alpha.5",
-    "@tsparticles/plugin-interactivity": "4.0.0-alpha.5"
+    "@tsparticles/engine": "4.0.0-beta.0",
+    "@tsparticles/plugin-interactivity": "4.0.0-beta.0"
   },
   "publishConfig": {
     "access": "public"