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

package/cjs/Bubbler.js

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

package/cjs/Options/Classes/Bubble.js

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

package/cjs/Options/Classes/BubbleBase.js

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

package/cjs/Options/Classes/BubbleDiv.js

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

package/cjs/index.js

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

package/dist_browser_Bubbler_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v4.0.0-alpha.5
+ * v4.0.0-beta.0
  */
 "use strict";
 /*
@@ -23,7 +23,7 @@
   \*********************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Bubbler: () => (/* binding */ Bubbler)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @tsparticles/plugin-interactivity */ \"@tsparticles/plugin-interactivity\");\n/* harmony import */ var _Options_Classes_Bubble_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Options/Classes/Bubble.js */ \"./dist/browser/Options/Classes/Bubble.js\");\n/* harmony import */ var _Enums_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Enums.js */ \"./dist/browser/Enums.js\");\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Utils.js */ \"./dist/browser/Utils.js\");\n\n\n\n\n\nconst bubbleMode = \"bubble\",\n  minDistance = 0,\n  defaultClickTime = 0,\n  defaultOpacity = 1,\n  ratioOffset = 1,\n  defaultBubbleValue = 0,\n  minRatio = 0,\n  defaultRatio = 1;\nclass Bubbler extends _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__.ExternalInteractorBase {\n  constructor(engine, container) {\n    super(container);\n    this._clickBubble = interactivityData => {\n      const container = this.container,\n        options = container.actualOptions,\n        mouseClickPos = interactivityData.mouse.clickPosition,\n        bubbleOptions = options.interactivity?.modes.bubble;\n      if (!bubbleOptions || !mouseClickPos) {\n        return;\n      }\n      container.bubble ??= {};\n      const distance = container.retina.bubbleModeDistance;\n      if (!distance || distance < minDistance) {\n        return;\n      }\n      const query = container.particles.quadTree.queryCircle(mouseClickPos, distance, p => this.isEnabled(interactivityData, p)),\n        {\n          bubble\n        } = container;\n      for (const particle of query) {\n        if (!bubble.clicking) {\n          continue;\n        }\n        particle.bubble.inRange = !bubble.durationEnd;\n        const pos = particle.getPosition(),\n          distMouse = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistance)(pos, mouseClickPos),\n          timeSpent = (new Date().getTime() - (interactivityData.mouse.clickTime ?? defaultClickTime)) / _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.millisecondsToSeconds;\n        if (timeSpent > bubbleOptions.duration) {\n          bubble.durationEnd = true;\n        }\n        if (timeSpent > bubbleOptions.duration * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.double) {\n          bubble.clicking = false;\n          bubble.durationEnd = false;\n        }\n        const sizeData = {\n          bubbleObj: {\n            optValue: container.retina.bubbleModeSize,\n            value: particle.bubble.radius\n          },\n          particlesObj: {\n            optValue: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeMax)(particle.options.size.value) * container.retina.pixelRatio,\n            value: particle.size.value\n          },\n          type: _Enums_js__WEBPACK_IMPORTED_MODULE_3__.ProcessBubbleType.size\n        };\n        this._process(particle, distMouse, timeSpent, sizeData);\n        const opacityData = {\n          bubbleObj: {\n            optValue: bubbleOptions.opacity,\n            value: particle.bubble.opacity\n          },\n          particlesObj: {\n            optValue: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeMax)(particle.options.opacity.value),\n            value: particle.opacity?.value ?? defaultOpacity\n          },\n          type: _Enums_js__WEBPACK_IMPORTED_MODULE_3__.ProcessBubbleType.opacity\n        };\n        this._process(particle, distMouse, timeSpent, opacityData);\n        if (!bubble.durationEnd && distMouse <= distance) {\n          this._hoverBubbleColor(particle, distMouse);\n        } else {\n          delete particle.bubble.color;\n        }\n      }\n    };\n    this._hoverBubble = interactivityData => {\n      const container = this.container,\n        mousePos = interactivityData.mouse.position,\n        distance = container.retina.bubbleModeDistance;\n      if (!distance || distance < minDistance || !mousePos) {\n        return;\n      }\n      const query = container.particles.quadTree.queryCircle(mousePos, distance, p => this.isEnabled(interactivityData, p));\n      for (const particle of query) {\n        particle.bubble.inRange = true;\n        const pos = particle.getPosition(),\n          pointDistance = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistance)(pos, mousePos),\n          ratio = ratioOffset - pointDistance / distance;\n        if (pointDistance <= distance) {\n          if (ratio >= minRatio && interactivityData.status === _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__.mouseMoveEvent) {\n            this._hoverBubbleSize(particle, ratio);\n            this._hoverBubbleOpacity(particle, ratio);\n            this._hoverBubbleColor(particle, ratio);\n          }\n        } else {\n          this.reset(interactivityData, particle);\n        }\n        if (interactivityData.status === _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__.mouseLeaveEvent) {\n          this.reset(interactivityData, particle);\n        }\n      }\n    };\n    this._hoverBubbleColor = (particle, ratio, divBubble) => {\n      const options = this.container.actualOptions,\n        bubbleOptions = divBubble ?? options.interactivity?.modes.bubble;\n      if (!bubbleOptions) {\n        return;\n      }\n      if (!particle.bubble.finalColor) {\n        const modeColor = bubbleOptions.color;\n        if (!modeColor) {\n          return;\n        }\n        const bubbleColor = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.itemFromSingleOrMultiple)(modeColor);\n        particle.bubble.finalColor = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToHsl)(this._engine, bubbleColor);\n      }\n      if (!particle.bubble.finalColor) {\n        return;\n      }\n      if (bubbleOptions.mix) {\n        particle.bubble.color = undefined;\n        const pColor = particle.getFillColor();\n        particle.bubble.color = pColor ? (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rgbToHsl)((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.colorMix)(pColor, particle.bubble.finalColor, ratioOffset - ratio, ratio)) : particle.bubble.finalColor;\n      } else {\n        particle.bubble.color = particle.bubble.finalColor;\n      }\n    };\n    this._hoverBubbleOpacity = (particle, ratio, divBubble) => {\n      const container = this.container,\n        options = container.actualOptions,\n        modeOpacity = divBubble?.opacity ?? options.interactivity?.modes.bubble?.opacity;\n      if (!modeOpacity) {\n        return;\n      }\n      const optOpacity = particle.options.opacity.value,\n        pOpacity = particle.opacity?.value ?? defaultOpacity,\n        opacity = (0,_Utils_js__WEBPACK_IMPORTED_MODULE_4__.calculateBubbleValue)(pOpacity, modeOpacity, (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeMax)(optOpacity), ratio);\n      if (opacity !== undefined) {\n        particle.bubble.opacity = opacity;\n      }\n    };\n    this._hoverBubbleSize = (particle, ratio, divBubble) => {\n      const container = this.container,\n        modeSize = divBubble?.size ? divBubble.size * container.retina.pixelRatio : container.retina.bubbleModeSize;\n      if (modeSize === undefined) {\n        return;\n      }\n      const optSize = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeMax)(particle.options.size.value) * container.retina.pixelRatio,\n        pSize = particle.size.value,\n        size = (0,_Utils_js__WEBPACK_IMPORTED_MODULE_4__.calculateBubbleValue)(pSize, modeSize, optSize, ratio);\n      if (size !== undefined) {\n        particle.bubble.radius = size;\n      }\n    };\n    this._process = (particle, distMouse, timeSpent, data) => {\n      const container = this.container,\n        bubbleParam = data.bubbleObj.optValue,\n        options = container.actualOptions,\n        bubbleOptions = options.interactivity?.modes.bubble;\n      if (!bubbleOptions || bubbleParam === undefined) {\n        return;\n      }\n      const bubbleDuration = bubbleOptions.duration,\n        bubbleDistance = container.retina.bubbleModeDistance,\n        particlesParam = data.particlesObj.optValue,\n        pObjBubble = data.bubbleObj.value,\n        pObj = data.particlesObj.value ?? defaultBubbleValue,\n        type = data.type;\n      if (!bubbleDistance || bubbleDistance < minDistance || bubbleParam === particlesParam) {\n        return;\n      }\n      container.bubble ??= {};\n      if (container.bubble.durationEnd) {\n        if (pObjBubble) {\n          if (type === _Enums_js__WEBPACK_IMPORTED_MODULE_3__.ProcessBubbleType.size) {\n            delete particle.bubble.radius;\n          }\n          if (type === _Enums_js__WEBPACK_IMPORTED_MODULE_3__.ProcessBubbleType.opacity) {\n            delete particle.bubble.opacity;\n          }\n        }\n      } else {\n        if (distMouse <= bubbleDistance) {\n          const obj = pObjBubble ?? pObj;\n          if (obj !== bubbleParam) {\n            const value = pObj - timeSpent * (pObj - bubbleParam) / bubbleDuration;\n            if (type === _Enums_js__WEBPACK_IMPORTED_MODULE_3__.ProcessBubbleType.size) {\n              particle.bubble.radius = value;\n            }\n            if (type === _Enums_js__WEBPACK_IMPORTED_MODULE_3__.ProcessBubbleType.opacity) {\n              particle.bubble.opacity = value;\n            }\n          }\n        } else {\n          if (type === _Enums_js__WEBPACK_IMPORTED_MODULE_3__.ProcessBubbleType.size) {\n            delete particle.bubble.radius;\n          }\n          if (type === _Enums_js__WEBPACK_IMPORTED_MODULE_3__.ProcessBubbleType.opacity) {\n            delete particle.bubble.opacity;\n          }\n        }\n      }\n    };\n    this._singleSelectorHover = (interactivityData, delta, selector, div) => {\n      const container = this.container,\n        selectors = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.safeDocument)().querySelectorAll(selector),\n        bubble = container.actualOptions.interactivity?.modes.bubble;\n      if (!bubble || !selectors.length) {\n        return;\n      }\n      selectors.forEach(item => {\n        const elem = item,\n          pxRatio = container.retina.pixelRatio,\n          pos = {\n            x: (elem.offsetLeft + elem.offsetWidth * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half) * pxRatio,\n            y: (elem.offsetTop + elem.offsetHeight * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half) * pxRatio\n          },\n          repulseRadius = elem.offsetWidth * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half * pxRatio,\n          area = div.type === _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__.DivType.circle ? new _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Circle(pos.x, pos.y, repulseRadius) : new _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Rectangle(elem.offsetLeft * pxRatio, elem.offsetTop * pxRatio, elem.offsetWidth * pxRatio, elem.offsetHeight * pxRatio),\n          query = container.particles.quadTree.query(area, p => this.isEnabled(interactivityData, p));\n        for (const particle of query) {\n          if (!area.contains(particle.getPosition())) {\n            continue;\n          }\n          particle.bubble.inRange = true;\n          const divs = bubble.divs,\n            divBubble = (0,_tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__.divMode)(divs, elem);\n          if (!particle.bubble.div || particle.bubble.div !== elem) {\n            this.clear(particle, delta, true);\n            particle.bubble.div = elem;\n          }\n          this._hoverBubbleSize(particle, defaultRatio, divBubble);\n          this._hoverBubbleOpacity(particle, defaultRatio, divBubble);\n          this._hoverBubbleColor(particle, defaultRatio, divBubble);\n        }\n      });\n    };\n    this._engine = engine;\n    container.bubble ??= {};\n    this.handleClickMode = mode => {\n      if (mode !== bubbleMode) {\n        return;\n      }\n      container.bubble ??= {};\n      container.bubble.clicking = true;\n    };\n  }\n  clear(particle, _delta, force) {\n    if (particle.bubble.inRange && !force) {\n      return;\n    }\n    delete particle.bubble.div;\n    delete particle.bubble.opacity;\n    delete particle.bubble.radius;\n    delete particle.bubble.color;\n  }\n  init() {\n    const container = this.container,\n      bubble = container.actualOptions.interactivity?.modes.bubble;\n    if (!bubble) {\n      return;\n    }\n    container.retina.bubbleModeDistance = bubble.distance * container.retina.pixelRatio;\n    if (bubble.size !== undefined) {\n      container.retina.bubbleModeSize = bubble.size * container.retina.pixelRatio;\n    }\n  }\n  interact(interactivityData, delta) {\n    const options = this.container.actualOptions,\n      events = options.interactivity?.events;\n    if (!events) {\n      return;\n    }\n    const onHover = events.onHover,\n      onClick = events.onClick,\n      hoverEnabled = onHover.enable,\n      hoverMode = onHover.mode,\n      clickEnabled = onClick.enable,\n      clickMode = onClick.mode,\n      divs = events.onDiv;\n    if (hoverEnabled && (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(bubbleMode, hoverMode)) {\n      this._hoverBubble(interactivityData);\n    } else if (clickEnabled && (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(bubbleMode, clickMode)) {\n      this._clickBubble(interactivityData);\n    } else {\n      (0,_tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__.divModeExecute)(bubbleMode, divs, (selector, div) => {\n        this._singleSelectorHover(interactivityData, delta, selector, div);\n      });\n    }\n  }\n  isEnabled(interactivityData, particle) {\n    const container = this.container,\n      options = container.actualOptions,\n      mouse = interactivityData.mouse,\n      events = (particle?.interactivity ?? options.interactivity)?.events;\n    if (!events) {\n      return false;\n    }\n    const {\n        onClick,\n        onDiv,\n        onHover\n      } = events,\n      divBubble = (0,_tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__.isDivModeEnabled)(bubbleMode, onDiv);\n    if (!(divBubble || onHover.enable && !!mouse.position || onClick.enable && mouse.clickPosition)) {\n      return false;\n    }\n    return (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(bubbleMode, onHover.mode) || (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(bubbleMode, onClick.mode) || divBubble;\n  }\n  loadModeOptions(options, ...sources) {\n    options.bubble ??= new _Options_Classes_Bubble_js__WEBPACK_IMPORTED_MODULE_2__.Bubble();\n    for (const source of sources) {\n      options.bubble.load(source?.bubble);\n    }\n  }\n  reset(_interactivityData, particle) {\n    particle.bubble.inRange = false;\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/interaction-external-bubble/./dist/browser/Bubbler.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Bubbler: () => (/* binding */ Bubbler)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @tsparticles/plugin-interactivity */ \"@tsparticles/plugin-interactivity\");\n/* harmony import */ var _Options_Classes_Bubble_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Options/Classes/Bubble.js */ \"./dist/browser/Options/Classes/Bubble.js\");\n/* harmony import */ var _Enums_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Enums.js */ \"./dist/browser/Enums.js\");\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Utils.js */ \"./dist/browser/Utils.js\");\n\n\n\n\n\nconst bubbleMode = \"bubble\", minDistance = 0, defaultClickTime = 0, defaultOpacity = 1, ratioOffset = 1, defaultBubbleValue = 0, minRatio = 0, defaultRatio = 1;\nclass Bubbler extends _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__.ExternalInteractorBase {\n    handleClickMode;\n    _engine;\n    _maxDistance;\n    constructor(engine, container){\n        super(container);\n        this._engine = engine;\n        this._maxDistance = 0;\n        container.bubble ??= {};\n        this.handleClickMode = (mode)=>{\n            if (mode !== bubbleMode) {\n                return;\n            }\n            container.bubble ??= {};\n            container.bubble.clicking = true;\n        };\n    }\n    get maxDistance() {\n        return this._maxDistance;\n    }\n    clear(particle, _delta, force) {\n        if (particle.bubble.inRange && !force) {\n            return;\n        }\n        delete particle.bubble.div;\n        delete particle.bubble.opacity;\n        delete particle.bubble.radius;\n        delete particle.bubble.color;\n    }\n    init() {\n        const container = this.container, bubble = container.actualOptions.interactivity?.modes.bubble;\n        if (!bubble) {\n            return;\n        }\n        this._maxDistance = bubble.distance;\n        container.retina.bubbleModeDistance = bubble.distance * container.retina.pixelRatio;\n        if (bubble.size !== undefined) {\n            container.retina.bubbleModeSize = bubble.size * container.retina.pixelRatio;\n        }\n    }\n    interact(interactivityData, delta) {\n        const options = this.container.actualOptions, events = options.interactivity?.events;\n        if (!events) {\n            return;\n        }\n        const onHover = events.onHover, onClick = events.onClick, hoverEnabled = onHover.enable, hoverMode = onHover.mode, clickEnabled = onClick.enable, clickMode = onClick.mode, divs = events.onDiv;\n        if (hoverEnabled && (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(bubbleMode, hoverMode)) {\n            this._hoverBubble(interactivityData);\n        } else if (clickEnabled && (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(bubbleMode, clickMode)) {\n            this._clickBubble(interactivityData);\n        } else {\n            (0,_tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__.divModeExecute)(bubbleMode, divs, (selector, div)=>{\n                this._singleSelectorHover(interactivityData, delta, selector, div);\n            });\n        }\n    }\n    isEnabled(interactivityData, particle) {\n        const container = this.container, options = container.actualOptions, mouse = interactivityData.mouse, events = (particle?.interactivity ?? options.interactivity)?.events;\n        if (!events) {\n            return false;\n        }\n        const { onClick, onDiv, onHover } = events, divBubble = (0,_tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__.isDivModeEnabled)(bubbleMode, onDiv);\n        if (!(divBubble || onHover.enable && !!mouse.position || onClick.enable && mouse.clickPosition)) {\n            return false;\n        }\n        return (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(bubbleMode, onHover.mode) || (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(bubbleMode, onClick.mode) || divBubble;\n    }\n    loadModeOptions(options, ...sources) {\n        options.bubble ??= new _Options_Classes_Bubble_js__WEBPACK_IMPORTED_MODULE_2__.Bubble();\n        for (const source of sources){\n            options.bubble.load(source?.bubble);\n        }\n    }\n    reset(_interactivityData, particle) {\n        particle.bubble.inRange = false;\n    }\n    _clickBubble = (interactivityData)=>{\n        const container = this.container, options = container.actualOptions, mouseClickPos = interactivityData.mouse.clickPosition, bubbleOptions = options.interactivity?.modes.bubble;\n        if (!bubbleOptions || !mouseClickPos) {\n            return;\n        }\n        container.bubble ??= {};\n        const distance = container.retina.bubbleModeDistance;\n        if (!distance || distance < minDistance) {\n            return;\n        }\n        const query = container.particles.grid.queryCircle(mouseClickPos, distance, (p)=>this.isEnabled(interactivityData, p)), { bubble } = container;\n        for (const particle of query){\n            if (!bubble.clicking) {\n                continue;\n            }\n            particle.bubble.inRange = !bubble.durationEnd;\n            const pos = particle.getPosition(), distMouse = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistance)(pos, mouseClickPos), timeSpent = (performance.now() - (interactivityData.mouse.clickTime ?? defaultClickTime)) / _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.millisecondsToSeconds;\n            if (timeSpent > bubbleOptions.duration) {\n                bubble.durationEnd = true;\n            }\n            if (timeSpent > bubbleOptions.duration * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.double) {\n                bubble.clicking = false;\n                bubble.durationEnd = false;\n            }\n            const sizeData = {\n                bubbleObj: {\n                    optValue: container.retina.bubbleModeSize,\n                    value: particle.bubble.radius\n                },\n                particlesObj: {\n                    optValue: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeMax)(particle.options.size.value) * container.retina.pixelRatio,\n                    value: particle.size.value\n                },\n                type: _Enums_js__WEBPACK_IMPORTED_MODULE_3__.ProcessBubbleType.size\n            };\n            this._process(particle, distMouse, timeSpent, sizeData);\n            const opacityData = {\n                bubbleObj: {\n                    optValue: bubbleOptions.opacity,\n                    value: particle.bubble.opacity\n                },\n                particlesObj: {\n                    optValue: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeMax)(particle.options.opacity.value),\n                    value: particle.opacity?.value ?? defaultOpacity\n                },\n                type: _Enums_js__WEBPACK_IMPORTED_MODULE_3__.ProcessBubbleType.opacity\n            };\n            this._process(particle, distMouse, timeSpent, opacityData);\n            if (!bubble.durationEnd && distMouse <= distance) {\n                this._hoverBubbleColor(particle, distMouse);\n            } else {\n                delete particle.bubble.color;\n            }\n        }\n    };\n    _hoverBubble = (interactivityData)=>{\n        const container = this.container, mousePos = interactivityData.mouse.position, distance = container.retina.bubbleModeDistance;\n        if (!distance || distance < minDistance || !mousePos) {\n            return;\n        }\n        const query = container.particles.grid.queryCircle(mousePos, distance, (p)=>this.isEnabled(interactivityData, p));\n        for (const particle of query){\n            particle.bubble.inRange = true;\n            const pos = particle.getPosition(), pointDistance = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistance)(pos, mousePos), ratio = ratioOffset - pointDistance / distance;\n            if (pointDistance <= distance) {\n                if (ratio >= minRatio && interactivityData.status === _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__.mouseMoveEvent) {\n                    this._hoverBubbleSize(particle, ratio);\n                    this._hoverBubbleOpacity(particle, ratio);\n                    this._hoverBubbleColor(particle, ratio);\n                }\n            } else {\n                this.reset(interactivityData, particle);\n            }\n            if (interactivityData.status === _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__.mouseLeaveEvent) {\n                this.reset(interactivityData, particle);\n            }\n        }\n    };\n    _hoverBubbleColor = (particle, ratio, divBubble)=>{\n        const options = this.container.actualOptions, bubbleOptions = divBubble ?? options.interactivity?.modes.bubble;\n        if (!bubbleOptions) {\n            return;\n        }\n        if (!particle.bubble.finalColor) {\n            const modeColor = bubbleOptions.color;\n            if (!modeColor) {\n                return;\n            }\n            const bubbleColor = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.itemFromSingleOrMultiple)(modeColor);\n            particle.bubble.finalColor = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToHsl)(this._engine, bubbleColor);\n        }\n        if (!particle.bubble.finalColor) {\n            return;\n        }\n        if (bubbleOptions.mix) {\n            particle.bubble.color = undefined;\n            const pColor = particle.getFillColor();\n            particle.bubble.color = pColor ? (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rgbToHsl)((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.colorMix)(pColor, particle.bubble.finalColor, ratioOffset - ratio, ratio)) : particle.bubble.finalColor;\n        } else {\n            particle.bubble.color = particle.bubble.finalColor;\n        }\n    };\n    _hoverBubbleOpacity = (particle, ratio, divBubble)=>{\n        const container = this.container, options = container.actualOptions, modeOpacity = divBubble?.opacity ?? options.interactivity?.modes.bubble?.opacity;\n        if (!modeOpacity) {\n            return;\n        }\n        const optOpacity = particle.options.opacity.value, pOpacity = particle.opacity?.value ?? defaultOpacity, opacity = (0,_Utils_js__WEBPACK_IMPORTED_MODULE_4__.calculateBubbleValue)(pOpacity, modeOpacity, (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeMax)(optOpacity), ratio);\n        if (opacity !== undefined) {\n            particle.bubble.opacity = opacity;\n        }\n    };\n    _hoverBubbleSize = (particle, ratio, divBubble)=>{\n        const container = this.container, modeSize = divBubble?.size ? divBubble.size * container.retina.pixelRatio : container.retina.bubbleModeSize;\n        if (modeSize === undefined) {\n            return;\n        }\n        const optSize = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeMax)(particle.options.size.value) * container.retina.pixelRatio, pSize = particle.size.value, size = (0,_Utils_js__WEBPACK_IMPORTED_MODULE_4__.calculateBubbleValue)(pSize, modeSize, optSize, ratio);\n        if (size !== undefined) {\n            particle.bubble.radius = size;\n        }\n    };\n    _process = (particle, distMouse, timeSpent, data)=>{\n        const container = this.container, bubbleParam = data.bubbleObj.optValue, options = container.actualOptions, bubbleOptions = options.interactivity?.modes.bubble;\n        if (!bubbleOptions || bubbleParam === undefined) {\n            return;\n        }\n        const bubbleDuration = bubbleOptions.duration, bubbleDistance = container.retina.bubbleModeDistance, particlesParam = data.particlesObj.optValue, pObjBubble = data.bubbleObj.value, pObj = data.particlesObj.value ?? defaultBubbleValue, type = data.type;\n        if (!bubbleDistance || bubbleDistance < minDistance || bubbleParam === particlesParam) {\n            return;\n        }\n        container.bubble ??= {};\n        if (container.bubble.durationEnd) {\n            if (pObjBubble) {\n                if (type === _Enums_js__WEBPACK_IMPORTED_MODULE_3__.ProcessBubbleType.size) {\n                    delete particle.bubble.radius;\n                }\n                if (type === _Enums_js__WEBPACK_IMPORTED_MODULE_3__.ProcessBubbleType.opacity) {\n                    delete particle.bubble.opacity;\n                }\n            }\n        } else {\n            if (distMouse <= bubbleDistance) {\n                const obj = pObjBubble ?? pObj;\n                if (obj !== bubbleParam) {\n                    const value = pObj - timeSpent * (pObj - bubbleParam) / bubbleDuration;\n                    if (type === _Enums_js__WEBPACK_IMPORTED_MODULE_3__.ProcessBubbleType.size) {\n                        particle.bubble.radius = value;\n                    }\n                    if (type === _Enums_js__WEBPACK_IMPORTED_MODULE_3__.ProcessBubbleType.opacity) {\n                        particle.bubble.opacity = value;\n                    }\n                }\n            } else {\n                if (type === _Enums_js__WEBPACK_IMPORTED_MODULE_3__.ProcessBubbleType.size) {\n                    delete particle.bubble.radius;\n                }\n                if (type === _Enums_js__WEBPACK_IMPORTED_MODULE_3__.ProcessBubbleType.opacity) {\n                    delete particle.bubble.opacity;\n                }\n            }\n        }\n    };\n    _singleSelectorHover = (interactivityData, delta, selector, div)=>{\n        const container = this.container, selectors = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.safeDocument)().querySelectorAll(selector), bubble = container.actualOptions.interactivity?.modes.bubble;\n        if (!bubble || !selectors.length) {\n            return;\n        }\n        selectors.forEach((item)=>{\n            const elem = item, pxRatio = container.retina.pixelRatio, pos = {\n                x: (elem.offsetLeft + elem.offsetWidth * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half) * pxRatio,\n                y: (elem.offsetTop + elem.offsetHeight * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half) * pxRatio\n            }, repulseRadius = elem.offsetWidth * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half * pxRatio, area = div.type === _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__.DivType.circle ? new _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Circle(pos.x, pos.y, repulseRadius) : new _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Rectangle(elem.offsetLeft * pxRatio, elem.offsetTop * pxRatio, elem.offsetWidth * pxRatio, elem.offsetHeight * pxRatio), query = container.particles.grid.query(area, (p)=>this.isEnabled(interactivityData, p));\n            for (const particle of query){\n                if (!area.contains(particle.getPosition())) {\n                    continue;\n                }\n                particle.bubble.inRange = true;\n                const divs = bubble.divs, divBubble = (0,_tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__.divMode)(divs, elem);\n                if (!particle.bubble.div || particle.bubble.div !== elem) {\n                    this.clear(particle, delta, true);\n                    particle.bubble.div = elem;\n                }\n                this._hoverBubbleSize(particle, defaultRatio, divBubble);\n                this._hoverBubbleOpacity(particle, defaultRatio, divBubble);\n                this._hoverBubbleColor(particle, defaultRatio, divBubble);\n            }\n        });\n    };\n}\n\n\n//# sourceURL=webpack://@tsparticles/interaction-external-bubble/./dist/browser/Bubbler.js?\n}");
 
 /***/ },
 
@@ -33,7 +33,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
   \*******************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   ProcessBubbleType: () => (/* binding */ ProcessBubbleType)\n/* harmony export */ });\nvar ProcessBubbleType;\n(function (ProcessBubbleType) {\n  ProcessBubbleType[\"color\"] = \"color\";\n  ProcessBubbleType[\"opacity\"] = \"opacity\";\n  ProcessBubbleType[\"size\"] = \"size\";\n})(ProcessBubbleType || (ProcessBubbleType = {}));\n\n//# sourceURL=webpack://@tsparticles/interaction-external-bubble/./dist/browser/Enums.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   ProcessBubbleType: () => (/* binding */ ProcessBubbleType)\n/* harmony export */ });\nvar ProcessBubbleType;\n(function(ProcessBubbleType) {\n    ProcessBubbleType[\"color\"] = \"color\";\n    ProcessBubbleType[\"opacity\"] = \"opacity\";\n    ProcessBubbleType[\"size\"] = \"size\";\n})(ProcessBubbleType || (ProcessBubbleType = {}));\n\n\n//# sourceURL=webpack://@tsparticles/interaction-external-bubble/./dist/browser/Enums.js?\n}");
 
 /***/ },
 
@@ -43,7 +43,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
   \*******************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   calculateBubbleValue: () => (/* binding */ calculateBubbleValue)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nfunction calculateBubbleValue(particleValue, modeValue, optionsValue, ratio) {\n  if (modeValue >= optionsValue) {\n    const value = particleValue + (modeValue - optionsValue) * ratio;\n    return (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.clamp)(value, particleValue, modeValue);\n  } else if (modeValue < optionsValue) {\n    const value = particleValue - (optionsValue - modeValue) * ratio;\n    return (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.clamp)(value, modeValue, particleValue);\n  }\n  return undefined;\n}\n\n//# sourceURL=webpack://@tsparticles/interaction-external-bubble/./dist/browser/Utils.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   calculateBubbleValue: () => (/* binding */ calculateBubbleValue)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nfunction calculateBubbleValue(particleValue, modeValue, optionsValue, ratio) {\n    if (modeValue >= optionsValue) {\n        const value = particleValue + (modeValue - optionsValue) * ratio;\n        return (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.clamp)(value, particleValue, modeValue);\n    } else if (modeValue < optionsValue) {\n        const value = particleValue - (optionsValue - modeValue) * ratio;\n        return (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.clamp)(value, modeValue, particleValue);\n    }\n    return undefined;\n}\n\n\n//# sourceURL=webpack://@tsparticles/interaction-external-bubble/./dist/browser/Utils.js?\n}");
 
 /***/ }