@tsparticles/interaction-external-bubble 3.0.2 → 3.1.0

package/browser/Bubbler.js

@@ -1,7 +1,7 @@
-import { Circle, ExternalInteractorBase, Rectangle, colorMix, divMode, divModeExecute, getDistance, getRangeMax, isDivModeEnabled, isInArray, itemFromSingleOrMultiple, mouseLeaveEvent, mouseMoveEvent, rangeColorToHsl, rgbToHsl, } from "@tsparticles/engine";
+import { Circle, ExternalInteractorBase, Rectangle, colorMix, divMode, divModeExecute, getDistance, getRangeMax, isDivModeEnabled, isInArray, itemFromSingleOrMultiple, millisecondsToSeconds, mouseLeaveEvent, mouseMoveEvent, rangeColorToHsl, rgbToHsl, } from "@tsparticles/engine";
 import { Bubble } from "./Options/Classes/Bubble.js";
 import { calculateBubbleValue } from "./Utils.js";
-const bubbleMode = "bubble";
+const bubbleMode = "bubble", minDistance = 0, defaultClickTime = 0, double = 2, defaultOpacity = 1, ratioOffset = 1, defaultBubbleValue = 0, minRatio = 0, half = 0.5, defaultRatio = 1;
 export class Bubbler extends ExternalInteractorBase {
     constructor(container) {
         super(container);
@@ -14,7 +14,7 @@ export class Bubbler extends ExternalInteractorBase {
                 container.bubble = {};
             }
             const distance = container.retina.bubbleModeDistance;
-            if (!distance || distance < 0) {
+            if (!distance || distance < minDistance) {
                 return;
             }
             const query = container.particles.quadTree.queryCircle(mouseClickPos, distance, (p) => this.isEnabled(p)), { bubble } = container;
@@ -23,11 +23,12 @@ export class Bubbler extends ExternalInteractorBase {
                     continue;
                 }
                 particle.bubble.inRange = !bubble.durationEnd;
-                const pos = particle.getPosition(), distMouse = getDistance(pos, mouseClickPos), timeSpent = (new Date().getTime() - (container.interactivity.mouse.clickTime || 0)) / 1000;
+                const pos = particle.getPosition(), distMouse = getDistance(pos, mouseClickPos), timeSpent = (new Date().getTime() - (container.interactivity.mouse.clickTime ?? defaultClickTime)) /
+                    millisecondsToSeconds;
                 if (timeSpent > bubbleOptions.duration) {
                     bubble.durationEnd = true;
                 }
-                if (timeSpent > bubbleOptions.duration * 2) {
+                if (timeSpent > bubbleOptions.duration * double) {
                     bubble.clicking = false;
                     bubble.durationEnd = false;
                 }
@@ -50,7 +51,7 @@ export class Bubbler extends ExternalInteractorBase {
                     },
                     particlesObj: {
                         optValue: getRangeMax(particle.options.opacity.value),
-                        value: particle.opacity?.value ?? 1,
+                        value: particle.opacity?.value ?? defaultOpacity,
                     },
                     type: "opacity",
                 };
@@ -65,15 +66,15 @@ export class Bubbler extends ExternalInteractorBase {
         };
         this._hoverBubble = () => {
             const container = this.container, mousePos = container.interactivity.mouse.position, distance = container.retina.bubbleModeDistance;
-            if (!distance || distance < 0 || mousePos === undefined) {
+            if (!distance || distance < minDistance || !mousePos) {
                 return;
             }
             const query = container.particles.quadTree.queryCircle(mousePos, distance, (p) => this.isEnabled(p));
             for (const particle of query) {
                 particle.bubble.inRange = true;
-                const pos = particle.getPosition(), pointDistance = getDistance(pos, mousePos), ratio = 1 - pointDistance / distance;
+                const pos = particle.getPosition(), pointDistance = getDistance(pos, mousePos), ratio = ratioOffset - pointDistance / distance;
                 if (pointDistance <= distance) {
-                    if (ratio >= 0 && container.interactivity.status === mouseMoveEvent) {
+                    if (ratio >= minRatio && container.interactivity.status === mouseMoveEvent) {
                         this._hoverBubbleSize(particle, ratio);
                         this._hoverBubbleOpacity(particle, ratio);
                         this._hoverBubbleColor(particle, ratio);
@@ -107,7 +108,7 @@ export class Bubbler extends ExternalInteractorBase {
                 particle.bubble.color = undefined;
                 const pColor = particle.getFillColor();
                 particle.bubble.color = pColor
-                    ? rgbToHsl(colorMix(pColor, particle.bubble.finalColor, 1 - ratio, ratio))
+                    ? rgbToHsl(colorMix(pColor, particle.bubble.finalColor, ratioOffset - ratio, ratio))
                     : particle.bubble.finalColor;
             }
             else {
@@ -119,7 +120,7 @@ export class Bubbler extends ExternalInteractorBase {
             if (!modeOpacity) {
                 return;
             }
-            const optOpacity = particle.options.opacity.value, pOpacity = particle.opacity?.value ?? 1, opacity = calculateBubbleValue(pOpacity, modeOpacity, getRangeMax(optOpacity), ratio);
+            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;
             }
@@ -139,8 +140,8 @@ export class Bubbler extends ExternalInteractorBase {
             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 || 0, type = data.type;
-            if (!bubbleDistance || bubbleDistance < 0 || bubbleParam === particlesParam) {
+            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;
             }
             if (!container.bubble) {
@@ -186,9 +187,9 @@ export class Bubbler extends ExternalInteractorBase {
             }
             selectors.forEach((item) => {
                 const elem = item, pxRatio = container.retina.pixelRatio, pos = {
-                    x: (elem.offsetLeft + elem.offsetWidth / 2) * pxRatio,
-                    y: (elem.offsetTop + elem.offsetHeight / 2) * pxRatio,
-                }, repulseRadius = (elem.offsetWidth / 2) * pxRatio, area = div.type === "circle"
+                    x: (elem.offsetLeft + elem.offsetWidth * half) * pxRatio,
+                    y: (elem.offsetTop + elem.offsetHeight * half) * pxRatio,
+                }, repulseRadius = elem.offsetWidth * half * pxRatio, area = div.type === "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(p));
                 for (const particle of query) {
@@ -201,9 +202,9 @@ export class Bubbler extends ExternalInteractorBase {
                         this.clear(particle, delta, true);
                         particle.bubble.div = elem;
                     }
-                    this._hoverBubbleSize(particle, 1, divBubble);
-                    this._hoverBubbleOpacity(particle, 1, divBubble);
-                    this._hoverBubbleColor(particle, 1, divBubble);
+                    this._hoverBubbleSize(particle, defaultRatio, divBubble);
+                    this._hoverBubbleOpacity(particle, defaultRatio, divBubble);
+                    this._hoverBubbleColor(particle, defaultRatio, divBubble);
                 }
             });
         };
@@ -250,10 +251,11 @@ export class Bubbler extends ExternalInteractorBase {
         else {
             divModeExecute(bubbleMode, divs, (selector, div) => this._singleSelectorHover(delta, selector, div));
         }
+        await Promise.resolve();
     }
     isEnabled(particle) {
         const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse, events = (particle?.interactivity ?? options.interactivity).events, { onClick, onDiv, onHover } = events, divBubble = isDivModeEnabled(bubbleMode, onDiv);
-        if (!(divBubble || (onHover.enable && mouse.position) || (onClick.enable && mouse.clickPosition))) {
+        if (!(divBubble || (onHover.enable && !!mouse.position) || (onClick.enable && mouse.clickPosition))) {
             return false;
         }
         return isInArray(bubbleMode, onHover.mode) || isInArray(bubbleMode, onClick.mode) || divBubble;

package/cjs/Bubbler.js

@@ -4,7 +4,7 @@ exports.Bubbler = void 0;
 const engine_1 = require("@tsparticles/engine");
 const Bubble_js_1 = require("./Options/Classes/Bubble.js");
 const Utils_js_1 = require("./Utils.js");
-const bubbleMode = "bubble";
+const bubbleMode = "bubble", minDistance = 0, defaultClickTime = 0, double = 2, defaultOpacity = 1, ratioOffset = 1, defaultBubbleValue = 0, minRatio = 0, half = 0.5, defaultRatio = 1;
 class Bubbler extends engine_1.ExternalInteractorBase {
     constructor(container) {
         super(container);
@@ -17,7 +17,7 @@ class Bubbler extends engine_1.ExternalInteractorBase {
                 container.bubble = {};
             }
             const distance = container.retina.bubbleModeDistance;
-            if (!distance || distance < 0) {
+            if (!distance || distance < minDistance) {
                 return;
             }
             const query = container.particles.quadTree.queryCircle(mouseClickPos, distance, (p) => this.isEnabled(p)), { bubble } = container;
@@ -26,11 +26,12 @@ class Bubbler extends engine_1.ExternalInteractorBase {
                     continue;
                 }
                 particle.bubble.inRange = !bubble.durationEnd;
-                const pos = particle.getPosition(), distMouse = (0, engine_1.getDistance)(pos, mouseClickPos), timeSpent = (new Date().getTime() - (container.interactivity.mouse.clickTime || 0)) / 1000;
+                const pos = particle.getPosition(), distMouse = (0, engine_1.getDistance)(pos, mouseClickPos), timeSpent = (new Date().getTime() - (container.interactivity.mouse.clickTime ?? defaultClickTime)) /
+                    engine_1.millisecondsToSeconds;
                 if (timeSpent > bubbleOptions.duration) {
                     bubble.durationEnd = true;
                 }
-                if (timeSpent > bubbleOptions.duration * 2) {
+                if (timeSpent > bubbleOptions.duration * double) {
                     bubble.clicking = false;
                     bubble.durationEnd = false;
                 }
@@ -53,7 +54,7 @@ class Bubbler extends engine_1.ExternalInteractorBase {
                     },
                     particlesObj: {
                         optValue: (0, engine_1.getRangeMax)(particle.options.opacity.value),
-                        value: particle.opacity?.value ?? 1,
+                        value: particle.opacity?.value ?? defaultOpacity,
                     },
                     type: "opacity",
                 };
@@ -68,15 +69,15 @@ class Bubbler extends engine_1.ExternalInteractorBase {
         };
         this._hoverBubble = () => {
             const container = this.container, mousePos = container.interactivity.mouse.position, distance = container.retina.bubbleModeDistance;
-            if (!distance || distance < 0 || mousePos === undefined) {
+            if (!distance || distance < minDistance || !mousePos) {
                 return;
             }
             const query = container.particles.quadTree.queryCircle(mousePos, distance, (p) => this.isEnabled(p));
             for (const particle of query) {
                 particle.bubble.inRange = true;
-                const pos = particle.getPosition(), pointDistance = (0, engine_1.getDistance)(pos, mousePos), ratio = 1 - pointDistance / distance;
+                const pos = particle.getPosition(), pointDistance = (0, engine_1.getDistance)(pos, mousePos), ratio = ratioOffset - pointDistance / distance;
                 if (pointDistance <= distance) {
-                    if (ratio >= 0 && container.interactivity.status === engine_1.mouseMoveEvent) {
+                    if (ratio >= minRatio && container.interactivity.status === engine_1.mouseMoveEvent) {
                         this._hoverBubbleSize(particle, ratio);
                         this._hoverBubbleOpacity(particle, ratio);
                         this._hoverBubbleColor(particle, ratio);
@@ -110,7 +111,7 @@ class Bubbler extends engine_1.ExternalInteractorBase {
                 particle.bubble.color = undefined;
                 const pColor = particle.getFillColor();
                 particle.bubble.color = pColor
-                    ? (0, engine_1.rgbToHsl)((0, engine_1.colorMix)(pColor, particle.bubble.finalColor, 1 - ratio, ratio))
+                    ? (0, engine_1.rgbToHsl)((0, engine_1.colorMix)(pColor, particle.bubble.finalColor, ratioOffset - ratio, ratio))
                     : particle.bubble.finalColor;
             }
             else {
@@ -122,7 +123,7 @@ class Bubbler extends engine_1.ExternalInteractorBase {
             if (!modeOpacity) {
                 return;
             }
-            const optOpacity = particle.options.opacity.value, pOpacity = particle.opacity?.value ?? 1, opacity = (0, Utils_js_1.calculateBubbleValue)(pOpacity, modeOpacity, (0, engine_1.getRangeMax)(optOpacity), ratio);
+            const optOpacity = particle.options.opacity.value, pOpacity = particle.opacity?.value ?? defaultOpacity, opacity = (0, Utils_js_1.calculateBubbleValue)(pOpacity, modeOpacity, (0, engine_1.getRangeMax)(optOpacity), ratio);
             if (opacity !== undefined) {
                 particle.bubble.opacity = opacity;
             }
@@ -142,8 +143,8 @@ class Bubbler extends engine_1.ExternalInteractorBase {
             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 || 0, type = data.type;
-            if (!bubbleDistance || bubbleDistance < 0 || bubbleParam === particlesParam) {
+            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;
             }
             if (!container.bubble) {
@@ -189,9 +190,9 @@ class Bubbler extends engine_1.ExternalInteractorBase {
             }
             selectors.forEach((item) => {
                 const elem = item, pxRatio = container.retina.pixelRatio, pos = {
-                    x: (elem.offsetLeft + elem.offsetWidth / 2) * pxRatio,
-                    y: (elem.offsetTop + elem.offsetHeight / 2) * pxRatio,
-                }, repulseRadius = (elem.offsetWidth / 2) * pxRatio, area = div.type === "circle"
+                    x: (elem.offsetLeft + elem.offsetWidth * half) * pxRatio,
+                    y: (elem.offsetTop + elem.offsetHeight * half) * pxRatio,
+                }, repulseRadius = elem.offsetWidth * half * pxRatio, area = div.type === "circle"
                     ? new engine_1.Circle(pos.x, pos.y, repulseRadius)
                     : new engine_1.Rectangle(elem.offsetLeft * pxRatio, elem.offsetTop * pxRatio, elem.offsetWidth * pxRatio, elem.offsetHeight * pxRatio), query = container.particles.quadTree.query(area, (p) => this.isEnabled(p));
                 for (const particle of query) {
@@ -204,9 +205,9 @@ class Bubbler extends engine_1.ExternalInteractorBase {
                         this.clear(particle, delta, true);
                         particle.bubble.div = elem;
                     }
-                    this._hoverBubbleSize(particle, 1, divBubble);
-                    this._hoverBubbleOpacity(particle, 1, divBubble);
-                    this._hoverBubbleColor(particle, 1, divBubble);
+                    this._hoverBubbleSize(particle, defaultRatio, divBubble);
+                    this._hoverBubbleOpacity(particle, defaultRatio, divBubble);
+                    this._hoverBubbleColor(particle, defaultRatio, divBubble);
                 }
             });
         };
@@ -253,10 +254,11 @@ class Bubbler extends engine_1.ExternalInteractorBase {
         else {
             (0, engine_1.divModeExecute)(bubbleMode, divs, (selector, div) => this._singleSelectorHover(delta, selector, div));
         }
+        await Promise.resolve();
     }
     isEnabled(particle) {
         const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse, events = (particle?.interactivity ?? options.interactivity).events, { onClick, onDiv, onHover } = events, divBubble = (0, engine_1.isDivModeEnabled)(bubbleMode, onDiv);
-        if (!(divBubble || (onHover.enable && mouse.position) || (onClick.enable && mouse.clickPosition))) {
+        if (!(divBubble || (onHover.enable && !!mouse.position) || (onClick.enable && mouse.clickPosition))) {
             return false;
         }
         return (0, engine_1.isInArray)(bubbleMode, onHover.mode) || (0, engine_1.isInArray)(bubbleMode, onClick.mode) || divBubble;

package/esm/Bubbler.js

@@ -1,7 +1,7 @@
-import { Circle, ExternalInteractorBase, Rectangle, colorMix, divMode, divModeExecute, getDistance, getRangeMax, isDivModeEnabled, isInArray, itemFromSingleOrMultiple, mouseLeaveEvent, mouseMoveEvent, rangeColorToHsl, rgbToHsl, } from "@tsparticles/engine";
+import { Circle, ExternalInteractorBase, Rectangle, colorMix, divMode, divModeExecute, getDistance, getRangeMax, isDivModeEnabled, isInArray, itemFromSingleOrMultiple, millisecondsToSeconds, mouseLeaveEvent, mouseMoveEvent, rangeColorToHsl, rgbToHsl, } from "@tsparticles/engine";
 import { Bubble } from "./Options/Classes/Bubble.js";
 import { calculateBubbleValue } from "./Utils.js";
-const bubbleMode = "bubble";
+const bubbleMode = "bubble", minDistance = 0, defaultClickTime = 0, double = 2, defaultOpacity = 1, ratioOffset = 1, defaultBubbleValue = 0, minRatio = 0, half = 0.5, defaultRatio = 1;
 export class Bubbler extends ExternalInteractorBase {
     constructor(container) {
         super(container);
@@ -14,7 +14,7 @@ export class Bubbler extends ExternalInteractorBase {
                 container.bubble = {};
             }
             const distance = container.retina.bubbleModeDistance;
-            if (!distance || distance < 0) {
+            if (!distance || distance < minDistance) {
                 return;
             }
             const query = container.particles.quadTree.queryCircle(mouseClickPos, distance, (p) => this.isEnabled(p)), { bubble } = container;
@@ -23,11 +23,12 @@ export class Bubbler extends ExternalInteractorBase {
                     continue;
                 }
                 particle.bubble.inRange = !bubble.durationEnd;
-                const pos = particle.getPosition(), distMouse = getDistance(pos, mouseClickPos), timeSpent = (new Date().getTime() - (container.interactivity.mouse.clickTime || 0)) / 1000;
+                const pos = particle.getPosition(), distMouse = getDistance(pos, mouseClickPos), timeSpent = (new Date().getTime() - (container.interactivity.mouse.clickTime ?? defaultClickTime)) /
+                    millisecondsToSeconds;
                 if (timeSpent > bubbleOptions.duration) {
                     bubble.durationEnd = true;
                 }
-                if (timeSpent > bubbleOptions.duration * 2) {
+                if (timeSpent > bubbleOptions.duration * double) {
                     bubble.clicking = false;
                     bubble.durationEnd = false;
                 }
@@ -50,7 +51,7 @@ export class Bubbler extends ExternalInteractorBase {
                     },
                     particlesObj: {
                         optValue: getRangeMax(particle.options.opacity.value),
-                        value: particle.opacity?.value ?? 1,
+                        value: particle.opacity?.value ?? defaultOpacity,
                     },
                     type: "opacity",
                 };
@@ -65,15 +66,15 @@ export class Bubbler extends ExternalInteractorBase {
         };
         this._hoverBubble = () => {
             const container = this.container, mousePos = container.interactivity.mouse.position, distance = container.retina.bubbleModeDistance;
-            if (!distance || distance < 0 || mousePos === undefined) {
+            if (!distance || distance < minDistance || !mousePos) {
                 return;
             }
             const query = container.particles.quadTree.queryCircle(mousePos, distance, (p) => this.isEnabled(p));
             for (const particle of query) {
                 particle.bubble.inRange = true;
-                const pos = particle.getPosition(), pointDistance = getDistance(pos, mousePos), ratio = 1 - pointDistance / distance;
+                const pos = particle.getPosition(), pointDistance = getDistance(pos, mousePos), ratio = ratioOffset - pointDistance / distance;
                 if (pointDistance <= distance) {
-                    if (ratio >= 0 && container.interactivity.status === mouseMoveEvent) {
+                    if (ratio >= minRatio && container.interactivity.status === mouseMoveEvent) {
                         this._hoverBubbleSize(particle, ratio);
                         this._hoverBubbleOpacity(particle, ratio);
                         this._hoverBubbleColor(particle, ratio);
@@ -107,7 +108,7 @@ export class Bubbler extends ExternalInteractorBase {
                 particle.bubble.color = undefined;
                 const pColor = particle.getFillColor();
                 particle.bubble.color = pColor
-                    ? rgbToHsl(colorMix(pColor, particle.bubble.finalColor, 1 - ratio, ratio))
+                    ? rgbToHsl(colorMix(pColor, particle.bubble.finalColor, ratioOffset - ratio, ratio))
                     : particle.bubble.finalColor;
             }
             else {
@@ -119,7 +120,7 @@ export class Bubbler extends ExternalInteractorBase {
             if (!modeOpacity) {
                 return;
             }
-            const optOpacity = particle.options.opacity.value, pOpacity = particle.opacity?.value ?? 1, opacity = calculateBubbleValue(pOpacity, modeOpacity, getRangeMax(optOpacity), ratio);
+            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;
             }
@@ -139,8 +140,8 @@ export class Bubbler extends ExternalInteractorBase {
             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 || 0, type = data.type;
-            if (!bubbleDistance || bubbleDistance < 0 || bubbleParam === particlesParam) {
+            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;
             }
             if (!container.bubble) {
@@ -186,9 +187,9 @@ export class Bubbler extends ExternalInteractorBase {
             }
             selectors.forEach((item) => {
                 const elem = item, pxRatio = container.retina.pixelRatio, pos = {
-                    x: (elem.offsetLeft + elem.offsetWidth / 2) * pxRatio,
-                    y: (elem.offsetTop + elem.offsetHeight / 2) * pxRatio,
-                }, repulseRadius = (elem.offsetWidth / 2) * pxRatio, area = div.type === "circle"
+                    x: (elem.offsetLeft + elem.offsetWidth * half) * pxRatio,
+                    y: (elem.offsetTop + elem.offsetHeight * half) * pxRatio,
+                }, repulseRadius = elem.offsetWidth * half * pxRatio, area = div.type === "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(p));
                 for (const particle of query) {
@@ -201,9 +202,9 @@ export class Bubbler extends ExternalInteractorBase {
                         this.clear(particle, delta, true);
                         particle.bubble.div = elem;
                     }
-                    this._hoverBubbleSize(particle, 1, divBubble);
-                    this._hoverBubbleOpacity(particle, 1, divBubble);
-                    this._hoverBubbleColor(particle, 1, divBubble);
+                    this._hoverBubbleSize(particle, defaultRatio, divBubble);
+                    this._hoverBubbleOpacity(particle, defaultRatio, divBubble);
+                    this._hoverBubbleColor(particle, defaultRatio, divBubble);
                 }
             });
         };
@@ -250,10 +251,11 @@ export class Bubbler extends ExternalInteractorBase {
         else {
             divModeExecute(bubbleMode, divs, (selector, div) => this._singleSelectorHover(delta, selector, div));
         }
+        await Promise.resolve();
     }
     isEnabled(particle) {
         const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse, events = (particle?.interactivity ?? options.interactivity).events, { onClick, onDiv, onHover } = events, divBubble = isDivModeEnabled(bubbleMode, onDiv);
-        if (!(divBubble || (onHover.enable && mouse.position) || (onClick.enable && mouse.clickPosition))) {
+        if (!(divBubble || (onHover.enable && !!mouse.position) || (onClick.enable && mouse.clickPosition))) {
             return false;
         }
         return isInArray(bubbleMode, onHover.mode) || isInArray(bubbleMode, onClick.mode) || divBubble;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/interaction-external-bubble",
-  "version": "3.0.2",
+  "version": "3.1.0",
   "description": "tsParticles bubble external interaction",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -87,7 +87,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@tsparticles/engine": "^3.0.2"
+    "@tsparticles/engine": "^3.1.0"
   },
   "publishConfig": {
     "access": "public"

package/report.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
-    <title>@tsparticles/interaction-external-bubble [6 Dec 2023 at 17:39]</title>
+    <title>@tsparticles/interaction-external-bubble [13 Jan 2024 at 22:59]</title>
     <link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABrVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+O1foceMD///+J0/qK1Pr7/v8Xdr/9///W8P4UdL7L7P0Scr2r4Pyj3vwad8D5/f/2/f+55f3E6f34+/2H0/ojfMKpzOd0rNgQcb3F3O/j9f7c8v6g3Pz0/P/w+v/q+P7n9v6T1/uQ1vuE0vqLut/y+v+Z2fvt+f+15Pzv9fuc2/vR7v2V2Pvd6/bg9P7I6/285/2y4/yp3/zp8vk8i8kqgMT7/P31+fyv4vxGkcz6/P6/6P3j7vfS5PNnpNUxhcbO7f7F6v3O4vHK3/DA2u631Ouy0eqXweKJud5wqthfoNMMbLvY8f73+v2dxeR8sNtTmdDx9/zX6PSjyeaCtd1YnNGX2PuQveCGt95Nls42h8dLlM3F4vBtAAAAM3RSTlMAAyOx0/sKBvik8opWGBMOAe3l1snDm2E9LSb06eHcu5JpHbarfHZCN9CBb08zzkdNS0kYaptYAAAFV0lEQVRYw92X51/aYBDHHS2O2qqttVbrqNq9m+TJIAYIShBkWwqIiCgoWvfeq7Z2/s29hyQNyUcR7LveGwVyXy6XH8/9rqxglLfUPLxVduUor3h0rfp2TYvpivk37929TkG037hffoX0+peVtZQc1589rigVUdXS/ABSAyEmGIO/1XfvldSK8vs3OqB6u3m0nxmIrvgB0dj7rr7Y9IbuF68hnfFaiHA/sxqm0wciIG43P60qKv9WXWc1RXGh/mFESFABTSBi0sNAKzqet17eCtOb3kZIDwxEEU0oAIJGYxNBDhBND29e0rtXXbcpuPmED9IhEAAQ/AXEaF8EPmnrrKsv0LvWR3fg5sWDNAFZOgAgaKvZDogHNU9MFwnnYROkc56RD5CjAbQX9Ow4g7upCsvYu55aSI/Nj0H1akgKQEUM94dwK65hYRmFU9MIcH/fqJYOZYcnuJSU/waKDgTOEVaVKhwrTRP5XzgSpAITYzom7UvkhFX5VutmxeNnWDjjswTKTyfgluNDGbUpWissXhF3s7mlSml+czWkg3D0l1nNjGNjz3myOQOa1KM/jOS6ebdbAVTCi4gljHSFrviza7tOgRWcS0MOUX9zdNgag5w7rRqA44Lzw0hr1WqES36dFliSJFlh2rXIae3FFcDDgKdxrUIDePr8jGcSClV1u7A9xeN0ModY/pHMxmR1EzRh8TJiwqsHmKW0l4FCEZI+jHio+JdPPE9qwQtTRxku2D8sIeRL2LnxWSllANCQGOIiqVHAz2ye2JR0DcH+HoxDkaADLjgxjKQ+AwCX/g0+DNgdG0ukYCONAe+dbc2IAc6fwt1ARoDSezNHxV2Cmzwv3O6lDMV55edBGwGK9n1+x2F8EDfAGCxug8MhpsMEcTEAWf3rx2vZhe/LAmtIn/6apE6PN0ULKgywD9mmdxbmFl3OvD5AS5fW5zLbv/YHmcsBTjf/afDz3MaZTVCfAP9z6/Bw6ycv8EUBWJIn9zYcoAWWlW9+OzO3vkTy8H+RANLmdrpOuYWdZYEXpo+TlCJrW5EARb7fF+bWdqf3hhyZI1nWJQHgznErZhbjoEsWqi8dQNoE294aldzFurwSABL2XXMf9+H1VQGke9exw5P/AnA5Pv5ngMul7LOvO922iwACu8WkCwLCafvM4CeWPxfA8lNHcWZSoi8EwMAIciKX2Z4SWCMAa3snCZ/G4EA8D6CMLNFsGQhkkz/gQNEBbPCbWsxGUpYVu3z8IyNAknwJkfPMEhLyrdi5RTyUVACkw4GSFRNWJNEW+fgPGwHD8/JxnRuLabN4CGNRkAE23na2+VmEAUmrYymSGjMAYqH84YUIyzgzs3XC7gNgH36Vcc4zKY9o9fgPBXUAiHHwVboBHGLiX6Zcjp1f2wu4tvzZKo0ecPnDtQYDQvJXaBeNzce45Fp28ZQLrEZVuFqgBwOalArKXnW1UzlnSusQKJqKYNuz4tOnI6sZG4zanpemv+7ySU2jbA9h6uhcgpfy6G2PahirDZ6zvq6zDduMVFTKvzw8wgyEdelwY9in3XkEPs3osJuwRQ4qTkfzifndg9Gfc4pdsu82+tTnHZTBa2EAMrqr2t43pguc8tNm7JQVQ2S0ukj2d22dhXYP0/veWtwKrCkNoNimAN5+Xr/oLrxswKbVJjteWrX7eR63o4j9q0GxnaBdWgGA5VStpanIjQmEhV0/nVt5VOFUvix6awJhPcAaTEShgrG+iGyvb5a0Ndb1YGHFPEwoqAinoaykaID1o1pdPNu7XsnCKQ3R+hwWIIhGvORcJUBYXe3Xa3vq/mF/N9V13ugufMkfXn+KHsRD0B8AAAAASUVORK5CYII=" type="image/x-icon" />
 
     <script>
@@ -31,7 +31,7 @@
   <body>
     <div id="app"></div>
     <script>
-      window.chartData = [{"label":"tsparticles.interaction.external.bubble.js","isAsset":true,"statSize":14238,"parsedSize":18134,"gzipSize":4062,"groups":[{"label":"dist/browser","path":"./dist/browser","statSize":14196,"groups":[{"id":403,"label":"index.js + 5 modules (concatenated)","path":"./dist/browser/index.js + 5 modules (concatenated)","statSize":14196,"parsedSize":18134,"gzipSize":4062,"concatenated":true,"groups":[{"label":"dist/browser","path":"./dist/browser/index.js + 5 modules (concatenated)/dist/browser","statSize":14196,"groups":[{"id":null,"label":"index.js","path":"./dist/browser/index.js + 5 modules (concatenated)/dist/browser/index.js","statSize":509,"parsedSize":650,"gzipSize":145,"inaccurateSizes":true},{"id":null,"label":"Bubbler.js","path":"./dist/browser/index.js + 5 modules (concatenated)/dist/browser/Bubbler.js","statSize":11607,"parsedSize":14826,"gzipSize":3321,"inaccurateSizes":true},{"label":"Options/Classes","path":"./dist/browser/index.js + 5 modules (concatenated)/dist/browser/Options/Classes","statSize":1626,"groups":[{"id":null,"label":"Bubble.js","path":"./dist/browser/index.js + 5 modules (concatenated)/dist/browser/Options/Classes/Bubble.js","statSize":419,"parsedSize":535,"gzipSize":119,"inaccurateSizes":true},{"id":null,"label":"BubbleBase.js","path":"./dist/browser/index.js + 5 modules (concatenated)/dist/browser/Options/Classes/BubbleBase.js","statSize":893,"parsedSize":1140,"gzipSize":255,"inaccurateSizes":true},{"id":null,"label":"BubbleDiv.js","path":"./dist/browser/index.js + 5 modules (concatenated)/dist/browser/Options/Classes/BubbleDiv.js","statSize":314,"parsedSize":401,"gzipSize":89,"inaccurateSizes":true}],"parsedSize":2077,"gzipSize":465,"inaccurateSizes":true},{"id":null,"label":"Utils.js","path":"./dist/browser/index.js + 5 modules (concatenated)/dist/browser/Utils.js","statSize":454,"parsedSize":579,"gzipSize":129,"inaccurateSizes":true}],"parsedSize":18134,"gzipSize":4062,"inaccurateSizes":true}]}],"parsedSize":18134,"gzipSize":4062},{"label":"engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles","path":"./engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles","statSize":42,"groups":[{"id":533,"label":"engine\",\"root\":\"window\"}","path":"./engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles/engine\",\"root\":\"window\"}","statSize":42}],"parsedSize":0,"gzipSize":0}],"isInitialByEntrypoint":{"tsparticles.interaction.external.bubble":true}}];
+      window.chartData = [{"label":"tsparticles.interaction.external.bubble.js","isAsset":true,"statSize":14632,"parsedSize":18541,"gzipSize":4168,"groups":[{"label":"dist/browser","path":"./dist/browser","statSize":14590,"groups":[{"id":322,"label":"index.js + 5 modules (concatenated)","path":"./dist/browser/index.js + 5 modules (concatenated)","statSize":14590,"parsedSize":18541,"gzipSize":4168,"concatenated":true,"groups":[{"label":"dist/browser","path":"./dist/browser/index.js + 5 modules (concatenated)/dist/browser","statSize":14590,"groups":[{"id":null,"label":"index.js","path":"./dist/browser/index.js + 5 modules (concatenated)/dist/browser/index.js","statSize":509,"parsedSize":646,"gzipSize":145,"inaccurateSizes":true},{"id":null,"label":"Bubbler.js","path":"./dist/browser/index.js + 5 modules (concatenated)/dist/browser/Bubbler.js","statSize":12001,"parsedSize":15250,"gzipSize":3428,"inaccurateSizes":true},{"label":"Options/Classes","path":"./dist/browser/index.js + 5 modules (concatenated)/dist/browser/Options/Classes","statSize":1626,"groups":[{"id":null,"label":"Bubble.js","path":"./dist/browser/index.js + 5 modules (concatenated)/dist/browser/Options/Classes/Bubble.js","statSize":419,"parsedSize":532,"gzipSize":119,"inaccurateSizes":true},{"id":null,"label":"BubbleBase.js","path":"./dist/browser/index.js + 5 modules (concatenated)/dist/browser/Options/Classes/BubbleBase.js","statSize":893,"parsedSize":1134,"gzipSize":255,"inaccurateSizes":true},{"id":null,"label":"BubbleDiv.js","path":"./dist/browser/index.js + 5 modules (concatenated)/dist/browser/Options/Classes/BubbleDiv.js","statSize":314,"parsedSize":399,"gzipSize":89,"inaccurateSizes":true}],"parsedSize":2066,"gzipSize":464,"inaccurateSizes":true},{"id":null,"label":"Utils.js","path":"./dist/browser/index.js + 5 modules (concatenated)/dist/browser/Utils.js","statSize":454,"parsedSize":576,"gzipSize":129,"inaccurateSizes":true}],"parsedSize":18541,"gzipSize":4168,"inaccurateSizes":true}]}],"parsedSize":18541,"gzipSize":4168},{"label":"engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles","path":"./engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles","statSize":42,"groups":[{"id":533,"label":"engine\",\"root\":\"window\"}","path":"./engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles/engine\",\"root\":\"window\"}","statSize":42}],"parsedSize":0,"gzipSize":0}],"isInitialByEntrypoint":{"tsparticles.interaction.external.bubble":true}}];
       window.entrypoints = ["tsparticles.interaction.external.bubble","tsparticles.interaction.external.bubble.min"];
       window.defaultSizes = "parsed";
     </script>

package/tsparticles.interaction.external.bubble.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v3.0.2
+ * v3.1.0
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -183,7 +183,16 @@ function calculateBubbleValue(particleValue, modeValue, optionsValue, ratio) {
 
 
 
-const bubbleMode = "bubble";
+const bubbleMode = "bubble",
+  minDistance = 0,
+  defaultClickTime = 0,
+  Bubbler_double = 2,
+  defaultOpacity = 1,
+  ratioOffset = 1,
+  defaultBubbleValue = 0,
+  minRatio = 0,
+  half = 0.5,
+  defaultRatio = 1;
 class Bubbler extends engine_root_window_.ExternalInteractorBase {
   constructor(container) {
     super(container);
@@ -199,7 +208,7 @@ class Bubbler extends engine_root_window_.ExternalInteractorBase {
         container.bubble = {};
       }
       const distance = container.retina.bubbleModeDistance;
-      if (!distance || distance < 0) {
+      if (!distance || distance < minDistance) {
         return;
       }
       const query = container.particles.quadTree.queryCircle(mouseClickPos, distance, p => this.isEnabled(p)),
@@ -213,11 +222,11 @@ class Bubbler extends engine_root_window_.ExternalInteractorBase {
         particle.bubble.inRange = !bubble.durationEnd;
         const pos = particle.getPosition(),
           distMouse = (0,engine_root_window_.getDistance)(pos, mouseClickPos),
-          timeSpent = (new Date().getTime() - (container.interactivity.mouse.clickTime || 0)) / 1000;
+          timeSpent = (new Date().getTime() - (container.interactivity.mouse.clickTime ?? defaultClickTime)) / engine_root_window_.millisecondsToSeconds;
         if (timeSpent > bubbleOptions.duration) {
           bubble.durationEnd = true;
         }
-        if (timeSpent > bubbleOptions.duration * 2) {
+        if (timeSpent > bubbleOptions.duration * Bubbler_double) {
           bubble.clicking = false;
           bubble.durationEnd = false;
         }
@@ -240,7 +249,7 @@ class Bubbler extends engine_root_window_.ExternalInteractorBase {
           },
           particlesObj: {
             optValue: (0,engine_root_window_.getRangeMax)(particle.options.opacity.value),
-            value: particle.opacity?.value ?? 1
+            value: particle.opacity?.value ?? defaultOpacity
           },
           type: "opacity"
         };
@@ -256,7 +265,7 @@ class Bubbler extends engine_root_window_.ExternalInteractorBase {
       const container = this.container,
         mousePos = container.interactivity.mouse.position,
         distance = container.retina.bubbleModeDistance;
-      if (!distance || distance < 0 || mousePos === undefined) {
+      if (!distance || distance < minDistance || !mousePos) {
         return;
       }
       const query = container.particles.quadTree.queryCircle(mousePos, distance, p => this.isEnabled(p));
@@ -264,9 +273,9 @@ class Bubbler extends engine_root_window_.ExternalInteractorBase {
         particle.bubble.inRange = true;
         const pos = particle.getPosition(),
           pointDistance = (0,engine_root_window_.getDistance)(pos, mousePos),
-          ratio = 1 - pointDistance / distance;
+          ratio = ratioOffset - pointDistance / distance;
         if (pointDistance <= distance) {
-          if (ratio >= 0 && container.interactivity.status === engine_root_window_.mouseMoveEvent) {
+          if (ratio >= minRatio && container.interactivity.status === engine_root_window_.mouseMoveEvent) {
             this._hoverBubbleSize(particle, ratio);
             this._hoverBubbleOpacity(particle, ratio);
             this._hoverBubbleColor(particle, ratio);
@@ -299,7 +308,7 @@ class Bubbler extends engine_root_window_.ExternalInteractorBase {
       if (bubbleOptions.mix) {
         particle.bubble.color = undefined;
         const pColor = particle.getFillColor();
-        particle.bubble.color = pColor ? (0,engine_root_window_.rgbToHsl)((0,engine_root_window_.colorMix)(pColor, particle.bubble.finalColor, 1 - ratio, ratio)) : particle.bubble.finalColor;
+        particle.bubble.color = pColor ? (0,engine_root_window_.rgbToHsl)((0,engine_root_window_.colorMix)(pColor, particle.bubble.finalColor, ratioOffset - ratio, ratio)) : particle.bubble.finalColor;
       } else {
         particle.bubble.color = particle.bubble.finalColor;
       }
@@ -312,7 +321,7 @@ class Bubbler extends engine_root_window_.ExternalInteractorBase {
         return;
       }
       const optOpacity = particle.options.opacity.value,
-        pOpacity = particle.opacity?.value ?? 1,
+        pOpacity = particle.opacity?.value ?? defaultOpacity,
         opacity = calculateBubbleValue(pOpacity, modeOpacity, (0,engine_root_window_.getRangeMax)(optOpacity), ratio);
       if (opacity !== undefined) {
         particle.bubble.opacity = opacity;
@@ -343,9 +352,9 @@ class Bubbler extends engine_root_window_.ExternalInteractorBase {
         bubbleDistance = container.retina.bubbleModeDistance,
         particlesParam = data.particlesObj.optValue,
         pObjBubble = data.bubbleObj.value,
-        pObj = data.particlesObj.value || 0,
+        pObj = data.particlesObj.value ?? defaultBubbleValue,
         type = data.type;
-      if (!bubbleDistance || bubbleDistance < 0 || bubbleParam === particlesParam) {
+      if (!bubbleDistance || bubbleDistance < minDistance || bubbleParam === particlesParam) {
         return;
       }
       if (!container.bubble) {
@@ -393,10 +402,10 @@ class Bubbler extends engine_root_window_.ExternalInteractorBase {
         const elem = item,
           pxRatio = container.retina.pixelRatio,
           pos = {
-            x: (elem.offsetLeft + elem.offsetWidth / 2) * pxRatio,
-            y: (elem.offsetTop + elem.offsetHeight / 2) * pxRatio
+            x: (elem.offsetLeft + elem.offsetWidth * half) * pxRatio,
+            y: (elem.offsetTop + elem.offsetHeight * half) * pxRatio
           },
-          repulseRadius = elem.offsetWidth / 2 * pxRatio,
+          repulseRadius = elem.offsetWidth * half * pxRatio,
           area = div.type === "circle" ? new engine_root_window_.Circle(pos.x, pos.y, repulseRadius) : new engine_root_window_.Rectangle(elem.offsetLeft * pxRatio, elem.offsetTop * pxRatio, elem.offsetWidth * pxRatio, elem.offsetHeight * pxRatio),
           query = container.particles.quadTree.query(area, p => this.isEnabled(p));
         for (const particle of query) {
@@ -410,9 +419,9 @@ class Bubbler extends engine_root_window_.ExternalInteractorBase {
             this.clear(particle, delta, true);
             particle.bubble.div = elem;
           }
-          this._hoverBubbleSize(particle, 1, divBubble);
-          this._hoverBubbleOpacity(particle, 1, divBubble);
-          this._hoverBubbleColor(particle, 1, divBubble);
+          this._hoverBubbleSize(particle, defaultRatio, divBubble);
+          this._hoverBubbleOpacity(particle, defaultRatio, divBubble);
+          this._hoverBubbleColor(particle, defaultRatio, divBubble);
         }
       });
     };
@@ -466,6 +475,7 @@ class Bubbler extends engine_root_window_.ExternalInteractorBase {
     } else {
       (0,engine_root_window_.divModeExecute)(bubbleMode, divs, (selector, div) => this._singleSelectorHover(delta, selector, div));
     }
+    await Promise.resolve();
   }
   isEnabled(particle) {
     const container = this.container,
@@ -478,7 +488,7 @@ class Bubbler extends engine_root_window_.ExternalInteractorBase {
         onHover
       } = events,
       divBubble = (0,engine_root_window_.isDivModeEnabled)(bubbleMode, onDiv);
-    if (!(divBubble || onHover.enable && mouse.position || onClick.enable && mouse.clickPosition)) {
+    if (!(divBubble || onHover.enable && !!mouse.position || onClick.enable && mouse.clickPosition)) {
       return false;
     }
     return (0,engine_root_window_.isInArray)(bubbleMode, onHover.mode) || (0,engine_root_window_.isInArray)(bubbleMode, onClick.mode) || divBubble;

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

@@ -1,2 +1,2 @@
 /*! For license information please see tsparticles.interaction.external.bubble.min.js.LICENSE.txt */
-!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],t);else{var i="object"==typeof exports?t(require("@tsparticles/engine")):t(e.window);for(var o in i)("object"==typeof exports?exports:e)[o]=i[o]}}(this,(e=>(()=>{"use strict";var t={533:t=>{t.exports=e}},i={};function o(e){var n=i[e];if(void 0!==n)return n.exports;var b=i[e]={exports:{}};return t[e](b,b.exports,o),b.exports}o.d=(e,t)=>{for(var i in t)o.o(t,i)&&!o.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{o.r(n),o.d(n,{Bubble:()=>b,BubbleBase:()=>t,BubbleDiv:()=>i,loadExternalBubbleInteraction:()=>a});var e=o(533);class t{constructor(){this.distance=200,this.duration=.4,this.mix=!1}load(t){if(t){if(void 0!==t.distance&&(this.distance=t.distance),void 0!==t.duration&&(this.duration=t.duration),void 0!==t.mix&&(this.mix=t.mix),void 0!==t.opacity&&(this.opacity=t.opacity),void 0!==t.color){const i=(0,e.isArray)(this.color)?void 0:this.color;this.color=(0,e.executeOnSingleOrMultiple)(t.color,(t=>e.OptionsColor.create(i,t)))}void 0!==t.size&&(this.size=t.size)}}}class i extends t{constructor(){super(),this.selectors=[]}load(e){super.load(e),e&&void 0!==e.selectors&&(this.selectors=e.selectors)}}class b extends t{load(t){super.load(t),t&&(this.divs=(0,e.executeOnSingleOrMultiple)(t.divs,(e=>{const t=new i;return t.load(e),t})))}}function l(t,i,o,n){if(i>=o){const b=t+(i-o)*n;return(0,e.clamp)(b,t,i)}if(i<o){const b=t-(o-i)*n;return(0,e.clamp)(b,i,t)}}const s="bubble";class r extends e.ExternalInteractorBase{constructor(t){super(t),this._clickBubble=()=>{const t=this.container,i=t.actualOptions,o=t.interactivity.mouse.clickPosition,n=i.interactivity.modes.bubble;if(!n||!o)return;t.bubble||(t.bubble={});const b=t.retina.bubbleModeDistance;if(!b||b<0)return;const l=t.particles.quadTree.queryCircle(o,b,(e=>this.isEnabled(e))),{bubble:s}=t;for(const i of l){if(!s.clicking)continue;i.bubble.inRange=!s.durationEnd;const l=i.getPosition(),r=(0,e.getDistance)(l,o),a=((new Date).getTime()-(t.interactivity.mouse.clickTime||0))/1e3;a>n.duration&&(s.durationEnd=!0),a>2*n.duration&&(s.clicking=!1,s.durationEnd=!1);const c={bubbleObj:{optValue:t.retina.bubbleModeSize,value:i.bubble.radius},particlesObj:{optValue:(0,e.getRangeMax)(i.options.size.value)*t.retina.pixelRatio,value:i.size.value},type:"size"};this._process(i,r,a,c);const u={bubbleObj:{optValue:n.opacity,value:i.bubble.opacity},particlesObj:{optValue:(0,e.getRangeMax)(i.options.opacity.value),value:i.opacity?.value??1},type:"opacity"};this._process(i,r,a,u),!s.durationEnd&&r<=b?this._hoverBubbleColor(i,r):delete i.bubble.color}},this._hoverBubble=()=>{const t=this.container,i=t.interactivity.mouse.position,o=t.retina.bubbleModeDistance;if(!o||o<0||void 0===i)return;const n=t.particles.quadTree.queryCircle(i,o,(e=>this.isEnabled(e)));for(const b of n){b.bubble.inRange=!0;const n=b.getPosition(),l=(0,e.getDistance)(n,i),s=1-l/o;l<=o?s>=0&&t.interactivity.status===e.mouseMoveEvent&&(this._hoverBubbleSize(b,s),this._hoverBubbleOpacity(b,s),this._hoverBubbleColor(b,s)):this.reset(b),t.interactivity.status===e.mouseLeaveEvent&&this.reset(b)}},this._hoverBubbleColor=(t,i,o)=>{const n=this.container.actualOptions,b=o??n.interactivity.modes.bubble;if(b){if(!t.bubble.finalColor){const i=b.color;if(!i)return;const o=(0,e.itemFromSingleOrMultiple)(i);t.bubble.finalColor=(0,e.rangeColorToHsl)(o)}if(t.bubble.finalColor)if(b.mix){t.bubble.color=void 0;const o=t.getFillColor();t.bubble.color=o?(0,e.rgbToHsl)((0,e.colorMix)(o,t.bubble.finalColor,1-i,i)):t.bubble.finalColor}else t.bubble.color=t.bubble.finalColor}},this._hoverBubbleOpacity=(t,i,o)=>{const n=this.container.actualOptions,b=o?.opacity??n.interactivity.modes.bubble?.opacity;if(!b)return;const s=t.options.opacity.value,r=l(t.opacity?.value??1,b,(0,e.getRangeMax)(s),i);void 0!==r&&(t.bubble.opacity=r)},this._hoverBubbleSize=(t,i,o)=>{const n=this.container,b=o?.size?o.size*n.retina.pixelRatio:n.retina.bubbleModeSize;if(void 0===b)return;const s=(0,e.getRangeMax)(t.options.size.value)*n.retina.pixelRatio,r=l(t.size.value,b,s,i);void 0!==r&&(t.bubble.radius=r)},this._process=(e,t,i,o)=>{const n=this.container,b=o.bubbleObj.optValue,l=n.actualOptions.interactivity.modes.bubble;if(!l||void 0===b)return;const s=l.duration,r=n.retina.bubbleModeDistance,a=o.particlesObj.optValue,c=o.bubbleObj.value,u=o.particlesObj.value||0,d=o.type;if(r&&!(r<0)&&b!==a)if(n.bubble||(n.bubble={}),n.bubble.durationEnd)c&&("size"===d&&delete e.bubble.radius,"opacity"===d&&delete e.bubble.opacity);else if(t<=r){if((c??u)!==b){const t=u-i*(u-b)/s;"size"===d&&(e.bubble.radius=t),"opacity"===d&&(e.bubble.opacity=t)}}else"size"===d&&delete e.bubble.radius,"opacity"===d&&delete e.bubble.opacity},this._singleSelectorHover=(t,i,o)=>{const n=this.container,b=document.querySelectorAll(i),l=n.actualOptions.interactivity.modes.bubble;l&&b.length&&b.forEach((i=>{const b=i,s=n.retina.pixelRatio,r={x:(b.offsetLeft+b.offsetWidth/2)*s,y:(b.offsetTop+b.offsetHeight/2)*s},a=b.offsetWidth/2*s,c="circle"===o.type?new e.Circle(r.x,r.y,a):new e.Rectangle(b.offsetLeft*s,b.offsetTop*s,b.offsetWidth*s,b.offsetHeight*s),u=n.particles.quadTree.query(c,(e=>this.isEnabled(e)));for(const i of u){if(!c.contains(i.getPosition()))continue;i.bubble.inRange=!0;const o=l.divs,n=(0,e.divMode)(o,b);i.bubble.div&&i.bubble.div===b||(this.clear(i,t,!0),i.bubble.div=b),this._hoverBubbleSize(i,1,n),this._hoverBubbleOpacity(i,1,n),this._hoverBubbleColor(i,1,n)}}))},t.bubble||(t.bubble={}),this.handleClickMode=e=>{e===s&&(t.bubble||(t.bubble={}),t.bubble.clicking=!0)}}clear(e,t,i){e.bubble.inRange&&!i||(delete e.bubble.div,delete e.bubble.opacity,delete e.bubble.radius,delete e.bubble.color)}init(){const e=this.container,t=e.actualOptions.interactivity.modes.bubble;t&&(e.retina.bubbleModeDistance=t.distance*e.retina.pixelRatio,void 0!==t.size&&(e.retina.bubbleModeSize=t.size*e.retina.pixelRatio))}async interact(t){const i=this.container.actualOptions.interactivity.events,o=i.onHover,n=i.onClick,b=o.enable,l=o.mode,r=n.enable,a=n.mode,c=i.onDiv;b&&(0,e.isInArray)(s,l)?this._hoverBubble():r&&(0,e.isInArray)(s,a)?this._clickBubble():(0,e.divModeExecute)(s,c,((e,i)=>this._singleSelectorHover(t,e,i)))}isEnabled(t){const i=this.container,o=i.actualOptions,n=i.interactivity.mouse,b=(t?.interactivity??o.interactivity).events,{onClick:l,onDiv:r,onHover:a}=b,c=(0,e.isDivModeEnabled)(s,r);return!!(c||a.enable&&n.position||l.enable&&n.clickPosition)&&((0,e.isInArray)(s,a.mode)||(0,e.isInArray)(s,l.mode)||c)}loadModeOptions(e,...t){e.bubble||(e.bubble=new b);for(const i of t)e.bubble.load(i?.bubble)}reset(e){e.bubble.inRange=!1}}async function a(e,t=!0){await e.addInteractor("externalBubble",(e=>new r(e)),t)}})(),n})()));
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],t);else{var i="object"==typeof exports?t(require("@tsparticles/engine")):t(e.window);for(var o in i)("object"==typeof exports?exports:e)[o]=i[o]}}(this,(e=>(()=>{"use strict";var t={533:t=>{t.exports=e}},i={};function o(e){var n=i[e];if(void 0!==n)return n.exports;var b=i[e]={exports:{}};return t[e](b,b.exports,o),b.exports}o.d=(e,t)=>{for(var i in t)o.o(t,i)&&!o.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{o.r(n),o.d(n,{Bubble:()=>b,BubbleBase:()=>t,BubbleDiv:()=>i,loadExternalBubbleInteraction:()=>a});var e=o(533);class t{constructor(){this.distance=200,this.duration=.4,this.mix=!1}load(t){if(t){if(void 0!==t.distance&&(this.distance=t.distance),void 0!==t.duration&&(this.duration=t.duration),void 0!==t.mix&&(this.mix=t.mix),void 0!==t.opacity&&(this.opacity=t.opacity),void 0!==t.color){const i=(0,e.isArray)(this.color)?void 0:this.color;this.color=(0,e.executeOnSingleOrMultiple)(t.color,(t=>e.OptionsColor.create(i,t)))}void 0!==t.size&&(this.size=t.size)}}}class i extends t{constructor(){super(),this.selectors=[]}load(e){super.load(e),e&&void 0!==e.selectors&&(this.selectors=e.selectors)}}class b extends t{load(t){super.load(t),t&&(this.divs=(0,e.executeOnSingleOrMultiple)(t.divs,(e=>{const t=new i;return t.load(e),t})))}}function s(t,i,o,n){if(i>=o){const b=t+(i-o)*n;return(0,e.clamp)(b,t,i)}if(i<o){const b=t-(o-i)*n;return(0,e.clamp)(b,i,t)}}const l="bubble";class r extends e.ExternalInteractorBase{constructor(t){super(t),this._clickBubble=()=>{const t=this.container,i=t.actualOptions,o=t.interactivity.mouse.clickPosition,n=i.interactivity.modes.bubble;if(!n||!o)return;t.bubble||(t.bubble={});const b=t.retina.bubbleModeDistance;if(!b||b<0)return;const s=t.particles.quadTree.queryCircle(o,b,(e=>this.isEnabled(e))),{bubble:l}=t;for(const i of s){if(!l.clicking)continue;i.bubble.inRange=!l.durationEnd;const s=i.getPosition(),r=(0,e.getDistance)(s,o),a=((new Date).getTime()-(t.interactivity.mouse.clickTime??0))/e.millisecondsToSeconds;a>n.duration&&(l.durationEnd=!0),a>2*n.duration&&(l.clicking=!1,l.durationEnd=!1);const c={bubbleObj:{optValue:t.retina.bubbleModeSize,value:i.bubble.radius},particlesObj:{optValue:(0,e.getRangeMax)(i.options.size.value)*t.retina.pixelRatio,value:i.size.value},type:"size"};this._process(i,r,a,c);const u={bubbleObj:{optValue:n.opacity,value:i.bubble.opacity},particlesObj:{optValue:(0,e.getRangeMax)(i.options.opacity.value),value:i.opacity?.value??1},type:"opacity"};this._process(i,r,a,u),!l.durationEnd&&r<=b?this._hoverBubbleColor(i,r):delete i.bubble.color}},this._hoverBubble=()=>{const t=this.container,i=t.interactivity.mouse.position,o=t.retina.bubbleModeDistance;if(!o||o<0||!i)return;const n=t.particles.quadTree.queryCircle(i,o,(e=>this.isEnabled(e)));for(const b of n){b.bubble.inRange=!0;const n=b.getPosition(),s=(0,e.getDistance)(n,i),l=1-s/o;s<=o?l>=0&&t.interactivity.status===e.mouseMoveEvent&&(this._hoverBubbleSize(b,l),this._hoverBubbleOpacity(b,l),this._hoverBubbleColor(b,l)):this.reset(b),t.interactivity.status===e.mouseLeaveEvent&&this.reset(b)}},this._hoverBubbleColor=(t,i,o)=>{const n=this.container.actualOptions,b=o??n.interactivity.modes.bubble;if(b){if(!t.bubble.finalColor){const i=b.color;if(!i)return;const o=(0,e.itemFromSingleOrMultiple)(i);t.bubble.finalColor=(0,e.rangeColorToHsl)(o)}if(t.bubble.finalColor)if(b.mix){t.bubble.color=void 0;const o=t.getFillColor();t.bubble.color=o?(0,e.rgbToHsl)((0,e.colorMix)(o,t.bubble.finalColor,1-i,i)):t.bubble.finalColor}else t.bubble.color=t.bubble.finalColor}},this._hoverBubbleOpacity=(t,i,o)=>{const n=this.container.actualOptions,b=o?.opacity??n.interactivity.modes.bubble?.opacity;if(!b)return;const l=t.options.opacity.value,r=s(t.opacity?.value??1,b,(0,e.getRangeMax)(l),i);void 0!==r&&(t.bubble.opacity=r)},this._hoverBubbleSize=(t,i,o)=>{const n=this.container,b=o?.size?o.size*n.retina.pixelRatio:n.retina.bubbleModeSize;if(void 0===b)return;const l=(0,e.getRangeMax)(t.options.size.value)*n.retina.pixelRatio,r=s(t.size.value,b,l,i);void 0!==r&&(t.bubble.radius=r)},this._process=(e,t,i,o)=>{const n=this.container,b=o.bubbleObj.optValue,s=n.actualOptions.interactivity.modes.bubble;if(!s||void 0===b)return;const l=s.duration,r=n.retina.bubbleModeDistance,a=o.particlesObj.optValue,c=o.bubbleObj.value,u=o.particlesObj.value??0,d=o.type;if(r&&!(r<0)&&b!==a)if(n.bubble||(n.bubble={}),n.bubble.durationEnd)c&&("size"===d&&delete e.bubble.radius,"opacity"===d&&delete e.bubble.opacity);else if(t<=r){if((c??u)!==b){const t=u-i*(u-b)/l;"size"===d&&(e.bubble.radius=t),"opacity"===d&&(e.bubble.opacity=t)}}else"size"===d&&delete e.bubble.radius,"opacity"===d&&delete e.bubble.opacity},this._singleSelectorHover=(t,i,o)=>{const n=this.container,b=document.querySelectorAll(i),s=n.actualOptions.interactivity.modes.bubble;s&&b.length&&b.forEach((i=>{const b=i,l=n.retina.pixelRatio,r={x:(b.offsetLeft+.5*b.offsetWidth)*l,y:(b.offsetTop+.5*b.offsetHeight)*l},a=.5*b.offsetWidth*l,c="circle"===o.type?new e.Circle(r.x,r.y,a):new e.Rectangle(b.offsetLeft*l,b.offsetTop*l,b.offsetWidth*l,b.offsetHeight*l),u=n.particles.quadTree.query(c,(e=>this.isEnabled(e)));for(const i of u){if(!c.contains(i.getPosition()))continue;i.bubble.inRange=!0;const o=s.divs,n=(0,e.divMode)(o,b);i.bubble.div&&i.bubble.div===b||(this.clear(i,t,!0),i.bubble.div=b),this._hoverBubbleSize(i,1,n),this._hoverBubbleOpacity(i,1,n),this._hoverBubbleColor(i,1,n)}}))},t.bubble||(t.bubble={}),this.handleClickMode=e=>{e===l&&(t.bubble||(t.bubble={}),t.bubble.clicking=!0)}}clear(e,t,i){e.bubble.inRange&&!i||(delete e.bubble.div,delete e.bubble.opacity,delete e.bubble.radius,delete e.bubble.color)}init(){const e=this.container,t=e.actualOptions.interactivity.modes.bubble;t&&(e.retina.bubbleModeDistance=t.distance*e.retina.pixelRatio,void 0!==t.size&&(e.retina.bubbleModeSize=t.size*e.retina.pixelRatio))}async interact(t){const i=this.container.actualOptions.interactivity.events,o=i.onHover,n=i.onClick,b=o.enable,s=o.mode,r=n.enable,a=n.mode,c=i.onDiv;b&&(0,e.isInArray)(l,s)?this._hoverBubble():r&&(0,e.isInArray)(l,a)?this._clickBubble():(0,e.divModeExecute)(l,c,((e,i)=>this._singleSelectorHover(t,e,i))),await Promise.resolve()}isEnabled(t){const i=this.container,o=i.actualOptions,n=i.interactivity.mouse,b=(t?.interactivity??o.interactivity).events,{onClick:s,onDiv:r,onHover:a}=b,c=(0,e.isDivModeEnabled)(l,r);return!!(c||a.enable&&n.position||s.enable&&n.clickPosition)&&((0,e.isInArray)(l,a.mode)||(0,e.isInArray)(l,s.mode)||c)}loadModeOptions(e,...t){e.bubble||(e.bubble=new b);for(const i of t)e.bubble.load(i?.bubble)}reset(e){e.bubble.inRange=!1}}async function a(e,t=!0){await e.addInteractor("externalBubble",(e=>new r(e)),t)}})(),n})()));

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

@@ -1 +1 @@
-/*! tsParticles Bubble External Interaction v3.0.2 by Matteo Bruni */
+/*! tsParticles Bubble External Interaction v3.1.0 by Matteo Bruni */

package/types/Types.d.ts

@@ -2,12 +2,12 @@ import type { Bubble } from "./Options/Classes/Bubble.js";
 import type { BubbleOptions } from "./Options/Classes/BubbleOptions.js";
 import type { Container } from "@tsparticles/engine";
 import type { IBubble } from "./Options/Interfaces/IBubble.js";
-export type IBubbleMode = {
+export interface IBubbleMode {
     bubble: IBubble;
-};
-export type BubbleMode = {
+}
+export interface BubbleMode {
     bubble?: Bubble;
-};
+}
 interface IContainerBubble {
     clicking?: boolean;
     durationEnd?: boolean;

package/umd/Bubbler.js

@@ -13,7 +13,7 @@
     const engine_1 = require("@tsparticles/engine");
     const Bubble_js_1 = require("./Options/Classes/Bubble.js");
     const Utils_js_1 = require("./Utils.js");
-    const bubbleMode = "bubble";
+    const bubbleMode = "bubble", minDistance = 0, defaultClickTime = 0, double = 2, defaultOpacity = 1, ratioOffset = 1, defaultBubbleValue = 0, minRatio = 0, half = 0.5, defaultRatio = 1;
     class Bubbler extends engine_1.ExternalInteractorBase {
         constructor(container) {
             super(container);
@@ -26,7 +26,7 @@
                     container.bubble = {};
                 }
                 const distance = container.retina.bubbleModeDistance;
-                if (!distance || distance < 0) {
+                if (!distance || distance < minDistance) {
                     return;
                 }
                 const query = container.particles.quadTree.queryCircle(mouseClickPos, distance, (p) => this.isEnabled(p)), { bubble } = container;
@@ -35,11 +35,12 @@
                         continue;
                     }
                     particle.bubble.inRange = !bubble.durationEnd;
-                    const pos = particle.getPosition(), distMouse = (0, engine_1.getDistance)(pos, mouseClickPos), timeSpent = (new Date().getTime() - (container.interactivity.mouse.clickTime || 0)) / 1000;
+                    const pos = particle.getPosition(), distMouse = (0, engine_1.getDistance)(pos, mouseClickPos), timeSpent = (new Date().getTime() - (container.interactivity.mouse.clickTime ?? defaultClickTime)) /
+                        engine_1.millisecondsToSeconds;
                     if (timeSpent > bubbleOptions.duration) {
                         bubble.durationEnd = true;
                     }
-                    if (timeSpent > bubbleOptions.duration * 2) {
+                    if (timeSpent > bubbleOptions.duration * double) {
                         bubble.clicking = false;
                         bubble.durationEnd = false;
                     }
@@ -62,7 +63,7 @@
                         },
                         particlesObj: {
                             optValue: (0, engine_1.getRangeMax)(particle.options.opacity.value),
-                            value: particle.opacity?.value ?? 1,
+                            value: particle.opacity?.value ?? defaultOpacity,
                         },
                         type: "opacity",
                     };
@@ -77,15 +78,15 @@
             };
             this._hoverBubble = () => {
                 const container = this.container, mousePos = container.interactivity.mouse.position, distance = container.retina.bubbleModeDistance;
-                if (!distance || distance < 0 || mousePos === undefined) {
+                if (!distance || distance < minDistance || !mousePos) {
                     return;
                 }
                 const query = container.particles.quadTree.queryCircle(mousePos, distance, (p) => this.isEnabled(p));
                 for (const particle of query) {
                     particle.bubble.inRange = true;
-                    const pos = particle.getPosition(), pointDistance = (0, engine_1.getDistance)(pos, mousePos), ratio = 1 - pointDistance / distance;
+                    const pos = particle.getPosition(), pointDistance = (0, engine_1.getDistance)(pos, mousePos), ratio = ratioOffset - pointDistance / distance;
                     if (pointDistance <= distance) {
-                        if (ratio >= 0 && container.interactivity.status === engine_1.mouseMoveEvent) {
+                        if (ratio >= minRatio && container.interactivity.status === engine_1.mouseMoveEvent) {
                             this._hoverBubbleSize(particle, ratio);
                             this._hoverBubbleOpacity(particle, ratio);
                             this._hoverBubbleColor(particle, ratio);
@@ -119,7 +120,7 @@
                     particle.bubble.color = undefined;
                     const pColor = particle.getFillColor();
                     particle.bubble.color = pColor
-                        ? (0, engine_1.rgbToHsl)((0, engine_1.colorMix)(pColor, particle.bubble.finalColor, 1 - ratio, ratio))
+                        ? (0, engine_1.rgbToHsl)((0, engine_1.colorMix)(pColor, particle.bubble.finalColor, ratioOffset - ratio, ratio))
                         : particle.bubble.finalColor;
                 }
                 else {
@@ -131,7 +132,7 @@
                 if (!modeOpacity) {
                     return;
                 }
-                const optOpacity = particle.options.opacity.value, pOpacity = particle.opacity?.value ?? 1, opacity = (0, Utils_js_1.calculateBubbleValue)(pOpacity, modeOpacity, (0, engine_1.getRangeMax)(optOpacity), ratio);
+                const optOpacity = particle.options.opacity.value, pOpacity = particle.opacity?.value ?? defaultOpacity, opacity = (0, Utils_js_1.calculateBubbleValue)(pOpacity, modeOpacity, (0, engine_1.getRangeMax)(optOpacity), ratio);
                 if (opacity !== undefined) {
                     particle.bubble.opacity = opacity;
                 }
@@ -151,8 +152,8 @@
                 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 || 0, type = data.type;
-                if (!bubbleDistance || bubbleDistance < 0 || bubbleParam === particlesParam) {
+                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;
                 }
                 if (!container.bubble) {
@@ -198,9 +199,9 @@
                 }
                 selectors.forEach((item) => {
                     const elem = item, pxRatio = container.retina.pixelRatio, pos = {
-                        x: (elem.offsetLeft + elem.offsetWidth / 2) * pxRatio,
-                        y: (elem.offsetTop + elem.offsetHeight / 2) * pxRatio,
-                    }, repulseRadius = (elem.offsetWidth / 2) * pxRatio, area = div.type === "circle"
+                        x: (elem.offsetLeft + elem.offsetWidth * half) * pxRatio,
+                        y: (elem.offsetTop + elem.offsetHeight * half) * pxRatio,
+                    }, repulseRadius = elem.offsetWidth * half * pxRatio, area = div.type === "circle"
                         ? new engine_1.Circle(pos.x, pos.y, repulseRadius)
                         : new engine_1.Rectangle(elem.offsetLeft * pxRatio, elem.offsetTop * pxRatio, elem.offsetWidth * pxRatio, elem.offsetHeight * pxRatio), query = container.particles.quadTree.query(area, (p) => this.isEnabled(p));
                     for (const particle of query) {
@@ -213,9 +214,9 @@
                             this.clear(particle, delta, true);
                             particle.bubble.div = elem;
                         }
-                        this._hoverBubbleSize(particle, 1, divBubble);
-                        this._hoverBubbleOpacity(particle, 1, divBubble);
-                        this._hoverBubbleColor(particle, 1, divBubble);
+                        this._hoverBubbleSize(particle, defaultRatio, divBubble);
+                        this._hoverBubbleOpacity(particle, defaultRatio, divBubble);
+                        this._hoverBubbleColor(particle, defaultRatio, divBubble);
                     }
                 });
             };
@@ -262,10 +263,11 @@
             else {
                 (0, engine_1.divModeExecute)(bubbleMode, divs, (selector, div) => this._singleSelectorHover(delta, selector, div));
             }
+            await Promise.resolve();
         }
         isEnabled(particle) {
             const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse, events = (particle?.interactivity ?? options.interactivity).events, { onClick, onDiv, onHover } = events, divBubble = (0, engine_1.isDivModeEnabled)(bubbleMode, onDiv);
-            if (!(divBubble || (onHover.enable && mouse.position) || (onClick.enable && mouse.clickPosition))) {
+            if (!(divBubble || (onHover.enable && !!mouse.position) || (onClick.enable && mouse.clickPosition))) {
                 return false;
             }
             return (0, engine_1.isInArray)(bubbleMode, onHover.mode) || (0, engine_1.isInArray)(bubbleMode, onClick.mode) || divBubble;