@tsparticles/interaction-external-bubble - npm Package Compare versions

Comparing version 3.0.3 to 3.1.0

browser/Bubbler.js

@@ -1,5 +0,5 @@
-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 {
@@ -17,3 +17,3 @@ constructor(container) {
             const distance = container.retina.bubbleModeDistance;
-            if (!distance || distance < 0) {
+            if (!distance || distance < minDistance) {
                 return;
@@ -27,7 +27,8 @@ }
                 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;
@@ -55,3 +56,3 @@ bubble.durationEnd = false;
                         optValue: getRangeMax(particle.options.opacity.value),
-                        value: particle.opacity?.value ?? 1,
+                        value: particle.opacity?.value ?? defaultOpacity,
                     },
@@ -71,3 +72,3 @@ type: "opacity",
             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;
@@ -78,5 +79,5 @@ }
                 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);
@@ -115,3 +116,3 @@ this._hoverBubbleOpacity(particle, ratio);
                 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;
@@ -128,3 +129,3 @@ }
             }
-            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) {
@@ -149,4 +150,4 @@ particle.bubble.opacity = opacity;
             }
-            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;
@@ -197,5 +198,5 @@ }
                 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)
@@ -213,5 +214,5 @@ : new Rectangle(elem.offsetLeft * pxRatio, elem.offsetTop * pxRatio, elem.offsetWidth * pxRatio, elem.offsetHeight * pxRatio), query = container.particles.quadTree.query(area, (p) => this.isEnabled(p));
                     }
-                    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);
                 }
@@ -263,6 +264,7 @@ });
         }
+        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;
@@ -269,0 +271,0 @@ }

cjs/Bubbler.js

@@ -7,3 +7,3 @@ "use strict";
 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 {
@@ -21,3 +21,3 @@ constructor(container) {
             const distance = container.retina.bubbleModeDistance;
-            if (!distance || distance < 0) {
+            if (!distance || distance < minDistance) {
                 return;
@@ -31,7 +31,8 @@ }
                 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;
@@ -59,3 +60,3 @@ bubble.durationEnd = false;
                         optValue: (0, engine_1.getRangeMax)(particle.options.opacity.value),
-                        value: particle.opacity?.value ?? 1,
+                        value: particle.opacity?.value ?? defaultOpacity,
                     },
@@ -75,3 +76,3 @@ type: "opacity",
             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;
@@ -82,5 +83,5 @@ }
                 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);
@@ -119,3 +120,3 @@ this._hoverBubbleOpacity(particle, ratio);
                 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;
@@ -132,3 +133,3 @@ }
             }
-            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) {
@@ -153,4 +154,4 @@ particle.bubble.opacity = opacity;
             }
-            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;
@@ -201,5 +202,5 @@ }
                 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)
@@ -217,5 +218,5 @@ : 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));
                     }
-                    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);
                 }
@@ -267,6 +268,7 @@ });
         }
+        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;
@@ -273,0 +275,0 @@ }

esm/Bubbler.js

@@ -1,5 +0,5 @@
-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 {
@@ -17,3 +17,3 @@ constructor(container) {
             const distance = container.retina.bubbleModeDistance;
-            if (!distance || distance < 0) {
+            if (!distance || distance < minDistance) {
                 return;
@@ -27,7 +27,8 @@ }
                 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;
@@ -55,3 +56,3 @@ bubble.durationEnd = false;
                         optValue: getRangeMax(particle.options.opacity.value),
-                        value: particle.opacity?.value ?? 1,
+                        value: particle.opacity?.value ?? defaultOpacity,
                     },
@@ -71,3 +72,3 @@ type: "opacity",
             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;
@@ -78,5 +79,5 @@ }
                 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);
@@ -115,3 +116,3 @@ this._hoverBubbleOpacity(particle, ratio);
                 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;
@@ -128,3 +129,3 @@ }
             }
-            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) {
@@ -149,4 +150,4 @@ particle.bubble.opacity = opacity;
             }
-            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;
@@ -197,5 +198,5 @@ }
                 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)
@@ -213,5 +214,5 @@ : new Rectangle(elem.offsetLeft * pxRatio, elem.offsetTop * pxRatio, elem.offsetWidth * pxRatio, elem.offsetHeight * pxRatio), query = container.particles.quadTree.query(area, (p) => this.isEnabled(p));
                     }
-                    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);
                 }
@@ -263,6 +264,7 @@ });
         }
+        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;
@@ -269,0 +271,0 @@ }

package.json

 {
   "name": "@tsparticles/interaction-external-bubble",
-  "version": "3.0.3",
+  "version": "3.1.0",
   "description": "tsParticles bubble external interaction",
@@ -90,3 +90,3 @@ "homepage": "https://particles.js.org",
   "dependencies": {
-    "@tsparticles/engine": "^3.0.3"
+    "@tsparticles/engine": "^3.1.0"
   },
@@ -93,0 +93,0 @@ "publishConfig": {

tsparticles.interaction.external.bubble.js

@@ -7,3 +7,3 @@ /*!
  * How to use? : Check the GitHub README
- * v3.0.3
+ * v3.1.0
  */
@@ -187,3 +187,12 @@ (function webpackUniversalModuleDefinition(root, factory) {
 
-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 {
@@ -204,3 +213,3 @@ constructor(container) {
       const distance = container.retina.bubbleModeDistance;
-      if (!distance || distance < 0) {
+      if (!distance || distance < minDistance) {
         return;
@@ -219,7 +228,7 @@ }
           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;
@@ -247,3 +256,3 @@ bubble.durationEnd = false;
             optValue: (0,engine_root_window_.getRangeMax)(particle.options.opacity.value),
-            value: particle.opacity?.value ?? 1
+            value: particle.opacity?.value ?? defaultOpacity
           },
@@ -264,3 +273,3 @@ type: "opacity"
         distance = container.retina.bubbleModeDistance;
-      if (!distance || distance < 0 || mousePos === undefined) {
+      if (!distance || distance < minDistance || !mousePos) {
         return;
@@ -273,5 +282,5 @@ }
           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);
@@ -309,3 +318,3 @@ this._hoverBubbleOpacity(particle, ratio);
         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 {
@@ -323,3 +332,3 @@ particle.bubble.color = particle.bubble.finalColor;
       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);
@@ -355,5 +364,5 @@ if (opacity !== undefined) {
         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;
@@ -406,6 +415,6 @@ }
           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),
@@ -424,5 +433,5 @@ query = container.particles.quadTree.query(area, p => this.isEnabled(p));
           }
-          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);
         }
@@ -481,2 +490,3 @@ });
     }
+    await Promise.resolve();
   }
@@ -494,3 +504,3 @@ isEnabled(particle) {
       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;
@@ -497,0 +507,0 @@ }

tsparticles.interaction.external.bubble.min.js

 /*! 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})()));

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

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

types/Types.d.ts

@@ -5,8 +5,8 @@ import type { Bubble } from "./Options/Classes/Bubble.js";
 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 {
@@ -13,0 +13,0 @@ clicking?: boolean;

umd/Bubbler.js

@@ -16,3 +16,3 @@ (function (factory) {
     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 {
@@ -30,3 +30,3 @@ constructor(container) {
                 const distance = container.retina.bubbleModeDistance;
-                if (!distance || distance < 0) {
+                if (!distance || distance < minDistance) {
                     return;
@@ -40,7 +40,8 @@ }
                     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;
@@ -68,3 +69,3 @@ bubble.durationEnd = false;
                             optValue: (0, engine_1.getRangeMax)(particle.options.opacity.value),
-                            value: particle.opacity?.value ?? 1,
+                            value: particle.opacity?.value ?? defaultOpacity,
                         },
@@ -84,3 +85,3 @@ type: "opacity",
                 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;
@@ -91,5 +92,5 @@ }
                     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);
@@ -128,3 +129,3 @@ this._hoverBubbleOpacity(particle, ratio);
                     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;
@@ -141,3 +142,3 @@ }
                 }
-                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) {
@@ -162,4 +163,4 @@ particle.bubble.opacity = opacity;
                 }
-                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;
@@ -210,5 +211,5 @@ }
                     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)
@@ -226,5 +227,5 @@ : 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));
                         }
-                        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);
                     }
@@ -276,6 +277,7 @@ });
             }
+            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;
@@ -282,0 +284,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

390934

increased by0.52%

Lines of code

2316

increased by0.87%

Dependency changes

• Updated@tsparticles/engine@^3.1.0