@tsparticles/interaction-external-bubble 4.0.0-alpha.8 → 4.0.0-beta.1

package/esm/Bubbler.js

@@ -5,207 +5,13 @@ import { ProcessBubbleType } from "./Enums.js";
 import { calculateBubbleValue } from "./Utils.js";
 const bubbleMode = "bubble", minDistance = 0, defaultClickTime = 0, defaultOpacity = 1, ratioOffset = 1, defaultBubbleValue = 0, minRatio = 0, defaultRatio = 1;
 export class Bubbler extends ExternalInteractorBase {
-    constructor(engine, container) {
+    handleClickMode;
+    _maxDistance;
+    _pluginManager;
+    constructor(pluginManager, container) {
         super(container);
-        this._clickBubble = interactivityData => {
-            const container = this.container, options = container.actualOptions, mouseClickPos = interactivityData.mouse.clickPosition, bubbleOptions = options.interactivity?.modes.bubble;
-            if (!bubbleOptions || !mouseClickPos) {
-                return;
-            }
-            container.bubble ??= {};
-            const distance = container.retina.bubbleModeDistance;
-            if (!distance || distance < minDistance) {
-                return;
-            }
-            const query = container.particles.quadTree.queryCircle(mouseClickPos, distance, p => this.isEnabled(interactivityData, p)), { bubble } = container;
-            for (const particle of query) {
-                if (!bubble.clicking) {
-                    continue;
-                }
-                particle.bubble.inRange = !bubble.durationEnd;
-                const pos = particle.getPosition(), distMouse = getDistance(pos, mouseClickPos), timeSpent = (new Date().getTime() - (interactivityData.mouse.clickTime ?? defaultClickTime)) / millisecondsToSeconds;
-                if (timeSpent > bubbleOptions.duration) {
-                    bubble.durationEnd = true;
-                }
-                if (timeSpent > bubbleOptions.duration * double) {
-                    bubble.clicking = false;
-                    bubble.durationEnd = false;
-                }
-                const sizeData = {
-                    bubbleObj: {
-                        optValue: container.retina.bubbleModeSize,
-                        value: particle.bubble.radius,
-                    },
-                    particlesObj: {
-                        optValue: getRangeMax(particle.options.size.value) * container.retina.pixelRatio,
-                        value: particle.size.value,
-                    },
-                    type: ProcessBubbleType.size,
-                };
-                this._process(particle, distMouse, timeSpent, sizeData);
-                const opacityData = {
-                    bubbleObj: {
-                        optValue: bubbleOptions.opacity,
-                        value: particle.bubble.opacity,
-                    },
-                    particlesObj: {
-                        optValue: getRangeMax(particle.options.opacity.value),
-                        value: particle.opacity?.value ?? defaultOpacity,
-                    },
-                    type: ProcessBubbleType.opacity,
-                };
-                this._process(particle, distMouse, timeSpent, opacityData);
-                if (!bubble.durationEnd && distMouse <= distance) {
-                    this._hoverBubbleColor(particle, distMouse);
-                }
-                else {
-                    delete particle.bubble.color;
-                }
-            }
-        };
-        this._hoverBubble = interactivityData => {
-            const container = this.container, mousePos = interactivityData.mouse.position, distance = container.retina.bubbleModeDistance;
-            if (!distance || distance < minDistance || !mousePos) {
-                return;
-            }
-            const query = container.particles.quadTree.queryCircle(mousePos, distance, p => this.isEnabled(interactivityData, p));
-            for (const particle of query) {
-                particle.bubble.inRange = true;
-                const pos = particle.getPosition(), pointDistance = getDistance(pos, mousePos), ratio = ratioOffset - pointDistance / distance;
-                if (pointDistance <= distance) {
-                    if (ratio >= minRatio && interactivityData.status === mouseMoveEvent) {
-                        this._hoverBubbleSize(particle, ratio);
-                        this._hoverBubbleOpacity(particle, ratio);
-                        this._hoverBubbleColor(particle, ratio);
-                    }
-                }
-                else {
-                    this.reset(interactivityData, particle);
-                }
-                if (interactivityData.status === mouseLeaveEvent) {
-                    this.reset(interactivityData, particle);
-                }
-            }
-        };
-        this._hoverBubbleColor = (particle, ratio, divBubble) => {
-            const options = this.container.actualOptions, bubbleOptions = divBubble ?? options.interactivity?.modes.bubble;
-            if (!bubbleOptions) {
-                return;
-            }
-            if (!particle.bubble.finalColor) {
-                const modeColor = bubbleOptions.color;
-                if (!modeColor) {
-                    return;
-                }
-                const bubbleColor = itemFromSingleOrMultiple(modeColor);
-                particle.bubble.finalColor = rangeColorToHsl(this._engine, bubbleColor);
-            }
-            if (!particle.bubble.finalColor) {
-                return;
-            }
-            if (bubbleOptions.mix) {
-                particle.bubble.color = undefined;
-                const pColor = particle.getFillColor();
-                particle.bubble.color = pColor
-                    ? rgbToHsl(colorMix(pColor, particle.bubble.finalColor, ratioOffset - ratio, ratio))
-                    : particle.bubble.finalColor;
-            }
-            else {
-                particle.bubble.color = particle.bubble.finalColor;
-            }
-        };
-        this._hoverBubbleOpacity = (particle, ratio, divBubble) => {
-            const container = this.container, options = container.actualOptions, modeOpacity = divBubble?.opacity ?? options.interactivity?.modes.bubble?.opacity;
-            if (!modeOpacity) {
-                return;
-            }
-            const optOpacity = particle.options.opacity.value, pOpacity = particle.opacity?.value ?? defaultOpacity, opacity = calculateBubbleValue(pOpacity, modeOpacity, getRangeMax(optOpacity), ratio);
-            if (opacity !== undefined) {
-                particle.bubble.opacity = opacity;
-            }
-        };
-        this._hoverBubbleSize = (particle, ratio, divBubble) => {
-            const container = this.container, modeSize = divBubble?.size ? divBubble.size * container.retina.pixelRatio : container.retina.bubbleModeSize;
-            if (modeSize === undefined) {
-                return;
-            }
-            const optSize = getRangeMax(particle.options.size.value) * container.retina.pixelRatio, pSize = particle.size.value, size = calculateBubbleValue(pSize, modeSize, optSize, ratio);
-            if (size !== undefined) {
-                particle.bubble.radius = size;
-            }
-        };
-        this._process = (particle, distMouse, timeSpent, data) => {
-            const container = this.container, bubbleParam = data.bubbleObj.optValue, options = container.actualOptions, bubbleOptions = options.interactivity?.modes.bubble;
-            if (!bubbleOptions || bubbleParam === undefined) {
-                return;
-            }
-            const bubbleDuration = bubbleOptions.duration, bubbleDistance = container.retina.bubbleModeDistance, particlesParam = data.particlesObj.optValue, pObjBubble = data.bubbleObj.value, pObj = data.particlesObj.value ?? defaultBubbleValue, type = data.type;
-            if (!bubbleDistance || bubbleDistance < minDistance || bubbleParam === particlesParam) {
-                return;
-            }
-            container.bubble ??= {};
-            if (container.bubble.durationEnd) {
-                if (pObjBubble) {
-                    if (type === ProcessBubbleType.size) {
-                        delete particle.bubble.radius;
-                    }
-                    if (type === ProcessBubbleType.opacity) {
-                        delete particle.bubble.opacity;
-                    }
-                }
-            }
-            else {
-                if (distMouse <= bubbleDistance) {
-                    const obj = pObjBubble ?? pObj;
-                    if (obj !== bubbleParam) {
-                        const value = pObj - (timeSpent * (pObj - bubbleParam)) / bubbleDuration;
-                        if (type === ProcessBubbleType.size) {
-                            particle.bubble.radius = value;
-                        }
-                        if (type === ProcessBubbleType.opacity) {
-                            particle.bubble.opacity = value;
-                        }
-                    }
-                }
-                else {
-                    if (type === ProcessBubbleType.size) {
-                        delete particle.bubble.radius;
-                    }
-                    if (type === ProcessBubbleType.opacity) {
-                        delete particle.bubble.opacity;
-                    }
-                }
-            }
-        };
-        this._singleSelectorHover = (interactivityData, delta, selector, div) => {
-            const container = this.container, selectors = safeDocument().querySelectorAll(selector), bubble = container.actualOptions.interactivity?.modes.bubble;
-            if (!bubble || !selectors.length) {
-                return;
-            }
-            selectors.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), query = container.particles.quadTree.query(area, p => this.isEnabled(interactivityData, p));
-                for (const particle of query) {
-                    if (!area.contains(particle.getPosition())) {
-                        continue;
-                    }
-                    particle.bubble.inRange = true;
-                    const divs = bubble.divs, divBubble = divMode(divs, elem);
-                    if (!particle.bubble.div || particle.bubble.div !== elem) {
-                        this.clear(particle, delta, true);
-                        particle.bubble.div = elem;
-                    }
-                    this._hoverBubbleSize(particle, defaultRatio, divBubble);
-                    this._hoverBubbleOpacity(particle, defaultRatio, divBubble);
-                    this._hoverBubbleColor(particle, defaultRatio, divBubble);
-                }
-            });
-        };
-        this._engine = engine;
+        this._pluginManager = pluginManager;
+        this._maxDistance = 0;
         container.bubble ??= {};
         this.handleClickMode = (mode) => {
             if (mode !== bubbleMode) {
@@ -215,6 +21,9 @@ export class Bubbler extends ExternalInteractorBase {
             container.bubble.clicking = true;
         };
     }
+    get maxDistance() {
+        return this._maxDistance;
+    }
     clear(particle, _delta, force) {
         if (particle.bubble.inRange && !force) {
             return;
@@ -229,6 +38,7 @@ export class Bubbler extends ExternalInteractorBase {
         if (!bubble) {
             return;
         }
+        this._maxDistance = bubble.distance;
         container.retina.bubbleModeDistance = bubble.distance * container.retina.pixelRatio;
         if (bubble.size !== undefined) {
             container.retina.bubbleModeSize = bubble.size * container.retina.pixelRatio;
@@ -272,4 +82,202 @@ export class Bubbler extends ExternalInteractorBase {
     reset(_interactivityData, particle) {
         particle.bubble.inRange = false;
     }
+    _clickBubble = interactivityData => {
+        const container = this.container, options = container.actualOptions, mouseClickPos = interactivityData.mouse.clickPosition, bubbleOptions = options.interactivity?.modes.bubble;
+        if (!bubbleOptions || !mouseClickPos) {
+            return;
+        }
+        container.bubble ??= {};
+        const distance = container.retina.bubbleModeDistance;
+        if (!distance || distance < minDistance) {
+            return;
+        }
+        const query = container.particles.grid.queryCircle(mouseClickPos, distance, p => this.isEnabled(interactivityData, p)), { bubble } = container;
+        for (const particle of query) {
+            if (!bubble.clicking) {
+                continue;
+            }
+            particle.bubble.inRange = !bubble.durationEnd;
+            const pos = particle.getPosition(), distMouse = getDistance(pos, mouseClickPos), timeSpent = (performance.now() - (interactivityData.mouse.clickTime ?? defaultClickTime)) / millisecondsToSeconds;
+            if (timeSpent > bubbleOptions.duration) {
+                bubble.durationEnd = true;
+            }
+            if (timeSpent > bubbleOptions.duration * double) {
+                bubble.clicking = false;
+                bubble.durationEnd = false;
+            }
+            const sizeData = {
+                bubbleObj: {
+                    optValue: container.retina.bubbleModeSize,
+                    value: particle.bubble.radius,
+                },
+                particlesObj: {
+                    optValue: getRangeMax(particle.options.size.value) * container.retina.pixelRatio,
+                    value: particle.size.value,
+                },
+                type: ProcessBubbleType.size,
+            };
+            this._process(particle, distMouse, timeSpent, sizeData);
+            const opacityData = {
+                bubbleObj: {
+                    optValue: bubbleOptions.opacity,
+                    value: particle.bubble.opacity,
+                },
+                particlesObj: {
+                    optValue: getRangeMax(particle.options.opacity.value),
+                    value: particle.opacity?.value ?? defaultOpacity,
+                },
+                type: ProcessBubbleType.opacity,
+            };
+            this._process(particle, distMouse, timeSpent, opacityData);
+            if (!bubble.durationEnd && distMouse <= distance) {
+                this._hoverBubbleColor(particle, distMouse);
+            }
+            else {
+                delete particle.bubble.color;
+            }
+        }
+    };
+    _hoverBubble = interactivityData => {
+        const container = this.container, mousePos = interactivityData.mouse.position, distance = container.retina.bubbleModeDistance;
+        if (!distance || distance < minDistance || !mousePos) {
+            return;
+        }
+        const query = container.particles.grid.queryCircle(mousePos, distance, p => this.isEnabled(interactivityData, p));
+        for (const particle of query) {
+            particle.bubble.inRange = true;
+            const pos = particle.getPosition(), pointDistance = getDistance(pos, mousePos), ratio = ratioOffset - pointDistance / distance;
+            if (pointDistance <= distance) {
+                if (ratio >= minRatio && interactivityData.status === mouseMoveEvent) {
+                    this._hoverBubbleSize(particle, ratio);
+                    this._hoverBubbleOpacity(particle, ratio);
+                    this._hoverBubbleColor(particle, ratio);
+                }
+            }
+            else {
+                this.reset(interactivityData, particle);
+            }
+            if (interactivityData.status === mouseLeaveEvent) {
+                this.reset(interactivityData, particle);
+            }
+        }
+    };
+    _hoverBubbleColor = (particle, ratio, divBubble) => {
+        const options = this.container.actualOptions, bubbleOptions = divBubble ?? options.interactivity?.modes.bubble;
+        if (!bubbleOptions) {
+            return;
+        }
+        if (!particle.bubble.finalColor) {
+            const modeColor = bubbleOptions.color;
+            if (!modeColor) {
+                return;
+            }
+            const bubbleColor = itemFromSingleOrMultiple(modeColor);
+            particle.bubble.finalColor = rangeColorToHsl(this._pluginManager, bubbleColor);
+        }
+        if (!particle.bubble.finalColor) {
+            return;
+        }
+        if (bubbleOptions.mix) {
+            particle.bubble.color = undefined;
+            const pColor = particle.getFillColor();
+            particle.bubble.color = pColor
+                ? rgbToHsl(colorMix(pColor, particle.bubble.finalColor, ratioOffset - ratio, ratio))
+                : particle.bubble.finalColor;
+        }
+        else {
+            particle.bubble.color = particle.bubble.finalColor;
+        }
+    };
+    _hoverBubbleOpacity = (particle, ratio, divBubble) => {
+        const container = this.container, options = container.actualOptions, modeOpacity = divBubble?.opacity ?? options.interactivity?.modes.bubble?.opacity;
+        if (!modeOpacity) {
+            return;
+        }
+        const optOpacity = particle.options.opacity.value, pOpacity = particle.opacity?.value ?? defaultOpacity, opacity = calculateBubbleValue(pOpacity, modeOpacity, getRangeMax(optOpacity), ratio);
+        if (opacity !== undefined) {
+            particle.bubble.opacity = opacity;
+        }
+    };
+    _hoverBubbleSize = (particle, ratio, divBubble) => {
+        const container = this.container, modeSize = divBubble?.size ? divBubble.size * container.retina.pixelRatio : container.retina.bubbleModeSize;
+        if (modeSize === undefined) {
+            return;
+        }
+        const optSize = getRangeMax(particle.options.size.value) * container.retina.pixelRatio, pSize = particle.size.value, size = calculateBubbleValue(pSize, modeSize, optSize, ratio);
+        if (size !== undefined) {
+            particle.bubble.radius = size;
+        }
+    };
+    _process = (particle, distMouse, timeSpent, data) => {
+        const container = this.container, bubbleParam = data.bubbleObj.optValue, options = container.actualOptions, bubbleOptions = options.interactivity?.modes.bubble;
+        if (!bubbleOptions || bubbleParam === undefined) {
+            return;
+        }
+        const bubbleDuration = bubbleOptions.duration, bubbleDistance = container.retina.bubbleModeDistance, particlesParam = data.particlesObj.optValue, pObjBubble = data.bubbleObj.value, pObj = data.particlesObj.value ?? defaultBubbleValue, type = data.type;
+        if (!bubbleDistance || bubbleDistance < minDistance || bubbleParam === particlesParam) {
+            return;
+        }
+        container.bubble ??= {};
+        if (container.bubble.durationEnd) {
+            if (pObjBubble) {
+                if (type === ProcessBubbleType.size) {
+                    delete particle.bubble.radius;
+                }
+                if (type === ProcessBubbleType.opacity) {
+                    delete particle.bubble.opacity;
+                }
+            }
+        }
+        else {
+            if (distMouse <= bubbleDistance) {
+                const obj = pObjBubble ?? pObj;
+                if (obj !== bubbleParam) {
+                    const value = pObj - (timeSpent * (pObj - bubbleParam)) / bubbleDuration;
+                    if (type === ProcessBubbleType.size) {
+                        particle.bubble.radius = value;
+                    }
+                    if (type === ProcessBubbleType.opacity) {
+                        particle.bubble.opacity = value;
+                    }
+                }
+            }
+            else {
+                if (type === ProcessBubbleType.size) {
+                    delete particle.bubble.radius;
+                }
+                if (type === ProcessBubbleType.opacity) {
+                    delete particle.bubble.opacity;
+                }
+            }
+        }
+    };
+    _singleSelectorHover = (interactivityData, delta, selector, div) => {
+        const container = this.container, selectors = safeDocument().querySelectorAll(selector), bubble = container.actualOptions.interactivity?.modes.bubble;
+        if (!bubble || !selectors.length) {
+            return;
+        }
+        selectors.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), query = container.particles.grid.query(area, p => this.isEnabled(interactivityData, p));
+            for (const particle of query) {
+                if (!area.contains(particle.getPosition())) {
+                    continue;
+                }
+                particle.bubble.inRange = true;
+                const divs = bubble.divs, divBubble = divMode(divs, elem);
+                if (!particle.bubble.div || particle.bubble.div !== elem) {
+                    this.clear(particle, delta, true);
+                    particle.bubble.div = elem;
+                }
+                this._hoverBubbleSize(particle, defaultRatio, divBubble);
+                this._hoverBubbleOpacity(particle, defaultRatio, divBubble);
+                this._hoverBubbleColor(particle, defaultRatio, divBubble);
+            }
+        });
+    };
 }

package/esm/Options/Classes/Bubble.js

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

package/esm/Options/Classes/BubbleBase.js

@@ -1,5 +1,11 @@
 import { OptionsColor, executeOnSingleOrMultiple, isArray, isNull, } from "@tsparticles/engine";
 export class BubbleBase {
+    color;
+    distance;
+    duration;
+    mix;
+    opacity;
+    size;
     constructor() {
         this.distance = 200;
         this.duration = 0.4;

package/esm/Options/Classes/BubbleDiv.js

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

package/esm/index.js

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

package/package.json

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