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

Comparing version 2.1.0 to 2.1.1

browser/Bubbler.js

@@ -32,15 +32,2 @@ import { Circle, ExternalInteractorBase, Rectangle, clamp, colorMix, divMode, divModeExecute, getDistance, getRangeMax, isDivModeEnabled, isInArray, itemFromArray, mouseLeaveEvent, mouseMoveEvent, rangeColorToHsl, rgbToHsl, } from "tsparticles-engine";
     }
-    isEnabled(particle) {
-        var _a;
-        const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse, events = ((_a = particle === null || particle === void 0 ? void 0 : particle.interactivity) !== null && _a !== void 0 ? _a : options.interactivity).events, divs = events.onDiv, divBubble = isDivModeEnabled("bubble" /* DivMode.bubble */, divs);
-        if (!(divBubble || (events.onHover.enable && mouse.position) || (events.onClick.enable && mouse.clickPosition))) {
-            return false;
-        }
-        const hoverMode = events.onHover.mode;
-        const clickMode = events.onClick.mode;
-        return isInArray("bubble" /* HoverMode.bubble */, hoverMode) || isInArray("bubble" /* ClickMode.bubble */, clickMode) || divBubble;
-    }
-    reset(particle) {
-        particle.bubble.inRange = false;
-    }
     clear(particle, force) {
@@ -55,2 +42,5 @@ if (particle.bubble.inRange && !force) {
     }
+    init() {
+        // do nothing
+    }
     async interact() {
@@ -69,76 +59,14 @@ const options = this.container.actualOptions, events = options.interactivity.events, onHover = events.onHover, onClick = events.onClick, hoverEnabled = onHover.enable, hoverMode = onHover.mode, clickEnabled = onClick.enable, clickMode = onClick.mode, divs = events.onDiv;
     }
-    singleSelectorHover(selector, div) {
-        const container = this.container, selectors = document.querySelectorAll(selector);
-        if (!selectors.length) {
-            return;
+    isEnabled(particle) {
+        var _a;
+        const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse, events = ((_a = particle === null || particle === void 0 ? void 0 : particle.interactivity) !== null && _a !== void 0 ? _a : options.interactivity).events, divs = events.onDiv, divBubble = isDivModeEnabled("bubble" /* DivMode.bubble */, divs);
+        if (!(divBubble || (events.onHover.enable && mouse.position) || (events.onClick.enable && mouse.clickPosition))) {
+            return false;
         }
-        selectors.forEach((item) => {
-            const elem = item, pxRatio = container.retina.pixelRatio, pos = {
-                x: (elem.offsetLeft + elem.offsetWidth / 2) * pxRatio,
-                y: (elem.offsetTop + elem.offsetHeight / 2) * pxRatio,
-            }, repulseRadius = (elem.offsetWidth / 2) * pxRatio, area = div.type === "circle" /* 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(p));
-            for (const particle of query) {
-                if (!area.contains(particle.getPosition())) {
-                    continue;
-                }
-                particle.bubble.inRange = true;
-                const divs = container.actualOptions.interactivity.modes.bubble.divs;
-                const divBubble = divMode(divs, elem);
-                if (!particle.bubble.div || particle.bubble.div !== elem) {
-                    this.clear(particle, true);
-                    particle.bubble.div = elem;
-                }
-                /* size */
-                this.hoverBubbleSize(particle, 1, divBubble);
-                /* opacity */
-                this.hoverBubbleOpacity(particle, 1, divBubble);
-                /* color */
-                this.hoverBubbleColor(particle, 1, divBubble);
-            }
-        });
+        const hoverMode = events.onHover.mode;
+        const clickMode = events.onClick.mode;
+        return isInArray("bubble" /* HoverMode.bubble */, hoverMode) || isInArray("bubble" /* ClickMode.bubble */, clickMode) || divBubble;
     }
-    process(particle, distMouse, timeSpent, data) {
-        const container = this.container, bubbleParam = data.bubbleObj.optValue;
-        if (bubbleParam === undefined) {
-            return;
-        }
-        const options = container.actualOptions, bubbleDuration = options.interactivity.modes.bubble.duration, bubbleDistance = container.retina.bubbleModeDistance, particlesParam = data.particlesObj.optValue, pObjBubble = data.bubbleObj.value, pObj = data.particlesObj.value || 0, type = data.type;
-        if (bubbleParam === particlesParam) {
-            return;
-        }
-        if (!container.bubble) {
-            container.bubble = {};
-        }
-        if (!container.bubble.durationEnd) {
-            if (distMouse <= bubbleDistance) {
-                const obj = pObjBubble !== null && pObjBubble !== void 0 ? pObjBubble : pObj;
-                if (obj !== bubbleParam) {
-                    const value = pObj - (timeSpent * (pObj - bubbleParam)) / bubbleDuration;
-                    if (type === "size" /* ProcessBubbleType.size */) {
-                        particle.bubble.radius = value;
-                    }
-                    if (type === "opacity" /* ProcessBubbleType.opacity */) {
-                        particle.bubble.opacity = value;
-                    }
-                }
-            }
-            else {
-                if (type === "size" /* ProcessBubbleType.size */) {
-                    delete particle.bubble.radius;
-                }
-                if (type === "opacity" /* ProcessBubbleType.opacity */) {
-                    delete particle.bubble.opacity;
-                }
-            }
-        }
-        else if (pObjBubble) {
-            if (type === "size" /* ProcessBubbleType.size */) {
-                delete particle.bubble.radius;
-            }
-            if (type === "opacity" /* ProcessBubbleType.opacity */) {
-                delete particle.bubble.opacity;
-            }
-        }
+    reset(particle) {
+        particle.bubble.inRange = false;
     }
@@ -235,27 +163,2 @@ clickBubble() {
     }
-    hoverBubbleSize(particle, ratio, divBubble) {
-        const container = this.container, modeSize = (divBubble === null || divBubble === void 0 ? void 0 : divBubble.size) ? divBubble.size * container.retina.pixelRatio : container.retina.bubbleModeSize;
-        if (modeSize === undefined) {
-            return;
-        }
-        const optSize = getRangeMax(particle.options.size.value) * container.retina.pixelRatio;
-        const pSize = particle.size.value;
-        const size = calculateBubbleValue(pSize, modeSize, optSize, ratio);
-        if (size !== undefined) {
-            particle.bubble.radius = size;
-        }
-    }
-    hoverBubbleOpacity(particle, ratio, divBubble) {
-        var _a, _b, _c;
-        const container = this.container, options = container.actualOptions, modeOpacity = (_a = divBubble === null || divBubble === void 0 ? void 0 : divBubble.opacity) !== null && _a !== void 0 ? _a : options.interactivity.modes.bubble.opacity;
-        if (!modeOpacity) {
-            return;
-        }
-        const optOpacity = particle.options.opacity.value;
-        const pOpacity = (_c = (_b = particle.opacity) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : 1;
-        const opacity = calculateBubbleValue(pOpacity, modeOpacity, getRangeMax(optOpacity), ratio);
-        if (opacity !== undefined) {
-            particle.bubble.opacity = opacity;
-        }
-    }
     hoverBubbleColor(particle, ratio, divBubble) {
@@ -286,2 +189,102 @@ const options = this.container.actualOptions;
     }
+    hoverBubbleOpacity(particle, ratio, divBubble) {
+        var _a, _b, _c;
+        const container = this.container, options = container.actualOptions, modeOpacity = (_a = divBubble === null || divBubble === void 0 ? void 0 : divBubble.opacity) !== null && _a !== void 0 ? _a : options.interactivity.modes.bubble.opacity;
+        if (!modeOpacity) {
+            return;
+        }
+        const optOpacity = particle.options.opacity.value;
+        const pOpacity = (_c = (_b = particle.opacity) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : 1;
+        const opacity = calculateBubbleValue(pOpacity, modeOpacity, getRangeMax(optOpacity), ratio);
+        if (opacity !== undefined) {
+            particle.bubble.opacity = opacity;
+        }
+    }
+    hoverBubbleSize(particle, ratio, divBubble) {
+        const container = this.container, modeSize = (divBubble === null || divBubble === void 0 ? void 0 : divBubble.size) ? divBubble.size * container.retina.pixelRatio : container.retina.bubbleModeSize;
+        if (modeSize === undefined) {
+            return;
+        }
+        const optSize = getRangeMax(particle.options.size.value) * container.retina.pixelRatio;
+        const pSize = particle.size.value;
+        const 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;
+        if (bubbleParam === undefined) {
+            return;
+        }
+        const options = container.actualOptions, bubbleDuration = options.interactivity.modes.bubble.duration, bubbleDistance = container.retina.bubbleModeDistance, particlesParam = data.particlesObj.optValue, pObjBubble = data.bubbleObj.value, pObj = data.particlesObj.value || 0, type = data.type;
+        if (bubbleParam === particlesParam) {
+            return;
+        }
+        if (!container.bubble) {
+            container.bubble = {};
+        }
+        if (!container.bubble.durationEnd) {
+            if (distMouse <= bubbleDistance) {
+                const obj = pObjBubble !== null && pObjBubble !== void 0 ? pObjBubble : pObj;
+                if (obj !== bubbleParam) {
+                    const value = pObj - (timeSpent * (pObj - bubbleParam)) / bubbleDuration;
+                    if (type === "size" /* ProcessBubbleType.size */) {
+                        particle.bubble.radius = value;
+                    }
+                    if (type === "opacity" /* ProcessBubbleType.opacity */) {
+                        particle.bubble.opacity = value;
+                    }
+                }
+            }
+            else {
+                if (type === "size" /* ProcessBubbleType.size */) {
+                    delete particle.bubble.radius;
+                }
+                if (type === "opacity" /* ProcessBubbleType.opacity */) {
+                    delete particle.bubble.opacity;
+                }
+            }
+        }
+        else if (pObjBubble) {
+            if (type === "size" /* ProcessBubbleType.size */) {
+                delete particle.bubble.radius;
+            }
+            if (type === "opacity" /* ProcessBubbleType.opacity */) {
+                delete particle.bubble.opacity;
+            }
+        }
+    }
+    singleSelectorHover(selector, div) {
+        const container = this.container, selectors = document.querySelectorAll(selector);
+        if (!selectors.length) {
+            return;
+        }
+        selectors.forEach((item) => {
+            const elem = item, pxRatio = container.retina.pixelRatio, pos = {
+                x: (elem.offsetLeft + elem.offsetWidth / 2) * pxRatio,
+                y: (elem.offsetTop + elem.offsetHeight / 2) * pxRatio,
+            }, repulseRadius = (elem.offsetWidth / 2) * pxRatio, area = div.type === "circle" /* 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(p));
+            for (const particle of query) {
+                if (!area.contains(particle.getPosition())) {
+                    continue;
+                }
+                particle.bubble.inRange = true;
+                const divs = container.actualOptions.interactivity.modes.bubble.divs;
+                const divBubble = divMode(divs, elem);
+                if (!particle.bubble.div || particle.bubble.div !== elem) {
+                    this.clear(particle, true);
+                    particle.bubble.div = elem;
+                }
+                /* size */
+                this.hoverBubbleSize(particle, 1, divBubble);
+                /* opacity */
+                this.hoverBubbleOpacity(particle, 1, divBubble);
+                /* color */
+                this.hoverBubbleColor(particle, 1, divBubble);
+            }
+        });
+    }
 }

cjs/Bubbler.js

@@ -31,15 +31,2 @@ "use strict";
     }
-    isEnabled(particle) {
-        var _a;
-        const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse, events = ((_a = particle === null || particle === void 0 ? void 0 : particle.interactivity) !== null && _a !== void 0 ? _a : options.interactivity).events, divs = events.onDiv, divBubble = (0, tsparticles_engine_1.isDivModeEnabled)("bubble", divs);
-        if (!(divBubble || (events.onHover.enable && mouse.position) || (events.onClick.enable && mouse.clickPosition))) {
-            return false;
-        }
-        const hoverMode = events.onHover.mode;
-        const clickMode = events.onClick.mode;
-        return (0, tsparticles_engine_1.isInArray)("bubble", hoverMode) || (0, tsparticles_engine_1.isInArray)("bubble", clickMode) || divBubble;
-    }
-    reset(particle) {
-        particle.bubble.inRange = false;
-    }
     clear(particle, force) {
@@ -54,2 +41,4 @@ if (particle.bubble.inRange && !force) {
     }
+    init() {
+    }
     async interact() {
@@ -67,73 +56,14 @@ const options = this.container.actualOptions, events = options.interactivity.events, onHover = events.onHover, onClick = events.onClick, hoverEnabled = onHover.enable, hoverMode = onHover.mode, clickEnabled = onClick.enable, clickMode = onClick.mode, divs = events.onDiv;
     }
-    singleSelectorHover(selector, div) {
-        const container = this.container, selectors = document.querySelectorAll(selector);
-        if (!selectors.length) {
-            return;
+    isEnabled(particle) {
+        var _a;
+        const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse, events = ((_a = particle === null || particle === void 0 ? void 0 : particle.interactivity) !== null && _a !== void 0 ? _a : options.interactivity).events, divs = events.onDiv, divBubble = (0, tsparticles_engine_1.isDivModeEnabled)("bubble", divs);
+        if (!(divBubble || (events.onHover.enable && mouse.position) || (events.onClick.enable && mouse.clickPosition))) {
+            return false;
         }
-        selectors.forEach((item) => {
-            const elem = item, pxRatio = container.retina.pixelRatio, pos = {
-                x: (elem.offsetLeft + elem.offsetWidth / 2) * pxRatio,
-                y: (elem.offsetTop + elem.offsetHeight / 2) * pxRatio,
-            }, repulseRadius = (elem.offsetWidth / 2) * pxRatio, area = div.type === "circle"
-                ? new tsparticles_engine_1.Circle(pos.x, pos.y, repulseRadius)
-                : new tsparticles_engine_1.Rectangle(elem.offsetLeft * pxRatio, elem.offsetTop * pxRatio, elem.offsetWidth * pxRatio, elem.offsetHeight * pxRatio), query = container.particles.quadTree.query(area, (p) => this.isEnabled(p));
-            for (const particle of query) {
-                if (!area.contains(particle.getPosition())) {
-                    continue;
-                }
-                particle.bubble.inRange = true;
-                const divs = container.actualOptions.interactivity.modes.bubble.divs;
-                const divBubble = (0, tsparticles_engine_1.divMode)(divs, elem);
-                if (!particle.bubble.div || particle.bubble.div !== elem) {
-                    this.clear(particle, true);
-                    particle.bubble.div = elem;
-                }
-                this.hoverBubbleSize(particle, 1, divBubble);
-                this.hoverBubbleOpacity(particle, 1, divBubble);
-                this.hoverBubbleColor(particle, 1, divBubble);
-            }
-        });
+        const hoverMode = events.onHover.mode;
+        const clickMode = events.onClick.mode;
+        return (0, tsparticles_engine_1.isInArray)("bubble", hoverMode) || (0, tsparticles_engine_1.isInArray)("bubble", clickMode) || divBubble;
     }
-    process(particle, distMouse, timeSpent, data) {
-        const container = this.container, bubbleParam = data.bubbleObj.optValue;
-        if (bubbleParam === undefined) {
-            return;
-        }
-        const options = container.actualOptions, bubbleDuration = options.interactivity.modes.bubble.duration, bubbleDistance = container.retina.bubbleModeDistance, particlesParam = data.particlesObj.optValue, pObjBubble = data.bubbleObj.value, pObj = data.particlesObj.value || 0, type = data.type;
-        if (bubbleParam === particlesParam) {
-            return;
-        }
-        if (!container.bubble) {
-            container.bubble = {};
-        }
-        if (!container.bubble.durationEnd) {
-            if (distMouse <= bubbleDistance) {
-                const obj = pObjBubble !== null && pObjBubble !== void 0 ? pObjBubble : pObj;
-                if (obj !== bubbleParam) {
-                    const value = pObj - (timeSpent * (pObj - bubbleParam)) / bubbleDuration;
-                    if (type === "size") {
-                        particle.bubble.radius = value;
-                    }
-                    if (type === "opacity") {
-                        particle.bubble.opacity = value;
-                    }
-                }
-            }
-            else {
-                if (type === "size") {
-                    delete particle.bubble.radius;
-                }
-                if (type === "opacity") {
-                    delete particle.bubble.opacity;
-                }
-            }
-        }
-        else if (pObjBubble) {
-            if (type === "size") {
-                delete particle.bubble.radius;
-            }
-            if (type === "opacity") {
-                delete particle.bubble.opacity;
-            }
-        }
+    reset(particle) {
+        particle.bubble.inRange = false;
     }
@@ -224,27 +154,2 @@ clickBubble() {
     }
-    hoverBubbleSize(particle, ratio, divBubble) {
-        const container = this.container, modeSize = (divBubble === null || divBubble === void 0 ? void 0 : divBubble.size) ? divBubble.size * container.retina.pixelRatio : container.retina.bubbleModeSize;
-        if (modeSize === undefined) {
-            return;
-        }
-        const optSize = (0, tsparticles_engine_1.getRangeMax)(particle.options.size.value) * container.retina.pixelRatio;
-        const pSize = particle.size.value;
-        const size = calculateBubbleValue(pSize, modeSize, optSize, ratio);
-        if (size !== undefined) {
-            particle.bubble.radius = size;
-        }
-    }
-    hoverBubbleOpacity(particle, ratio, divBubble) {
-        var _a, _b, _c;
-        const container = this.container, options = container.actualOptions, modeOpacity = (_a = divBubble === null || divBubble === void 0 ? void 0 : divBubble.opacity) !== null && _a !== void 0 ? _a : options.interactivity.modes.bubble.opacity;
-        if (!modeOpacity) {
-            return;
-        }
-        const optOpacity = particle.options.opacity.value;
-        const pOpacity = (_c = (_b = particle.opacity) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : 1;
-        const opacity = calculateBubbleValue(pOpacity, modeOpacity, (0, tsparticles_engine_1.getRangeMax)(optOpacity), ratio);
-        if (opacity !== undefined) {
-            particle.bubble.opacity = opacity;
-        }
-    }
     hoverBubbleColor(particle, ratio, divBubble) {
@@ -275,3 +180,100 @@ const options = this.container.actualOptions;
     }
+    hoverBubbleOpacity(particle, ratio, divBubble) {
+        var _a, _b, _c;
+        const container = this.container, options = container.actualOptions, modeOpacity = (_a = divBubble === null || divBubble === void 0 ? void 0 : divBubble.opacity) !== null && _a !== void 0 ? _a : options.interactivity.modes.bubble.opacity;
+        if (!modeOpacity) {
+            return;
+        }
+        const optOpacity = particle.options.opacity.value;
+        const pOpacity = (_c = (_b = particle.opacity) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : 1;
+        const opacity = calculateBubbleValue(pOpacity, modeOpacity, (0, tsparticles_engine_1.getRangeMax)(optOpacity), ratio);
+        if (opacity !== undefined) {
+            particle.bubble.opacity = opacity;
+        }
+    }
+    hoverBubbleSize(particle, ratio, divBubble) {
+        const container = this.container, modeSize = (divBubble === null || divBubble === void 0 ? void 0 : divBubble.size) ? divBubble.size * container.retina.pixelRatio : container.retina.bubbleModeSize;
+        if (modeSize === undefined) {
+            return;
+        }
+        const optSize = (0, tsparticles_engine_1.getRangeMax)(particle.options.size.value) * container.retina.pixelRatio;
+        const pSize = particle.size.value;
+        const 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;
+        if (bubbleParam === undefined) {
+            return;
+        }
+        const options = container.actualOptions, bubbleDuration = options.interactivity.modes.bubble.duration, bubbleDistance = container.retina.bubbleModeDistance, particlesParam = data.particlesObj.optValue, pObjBubble = data.bubbleObj.value, pObj = data.particlesObj.value || 0, type = data.type;
+        if (bubbleParam === particlesParam) {
+            return;
+        }
+        if (!container.bubble) {
+            container.bubble = {};
+        }
+        if (!container.bubble.durationEnd) {
+            if (distMouse <= bubbleDistance) {
+                const obj = pObjBubble !== null && pObjBubble !== void 0 ? pObjBubble : pObj;
+                if (obj !== bubbleParam) {
+                    const value = pObj - (timeSpent * (pObj - bubbleParam)) / bubbleDuration;
+                    if (type === "size") {
+                        particle.bubble.radius = value;
+                    }
+                    if (type === "opacity") {
+                        particle.bubble.opacity = value;
+                    }
+                }
+            }
+            else {
+                if (type === "size") {
+                    delete particle.bubble.radius;
+                }
+                if (type === "opacity") {
+                    delete particle.bubble.opacity;
+                }
+            }
+        }
+        else if (pObjBubble) {
+            if (type === "size") {
+                delete particle.bubble.radius;
+            }
+            if (type === "opacity") {
+                delete particle.bubble.opacity;
+            }
+        }
+    }
+    singleSelectorHover(selector, div) {
+        const container = this.container, selectors = document.querySelectorAll(selector);
+        if (!selectors.length) {
+            return;
+        }
+        selectors.forEach((item) => {
+            const elem = item, pxRatio = container.retina.pixelRatio, pos = {
+                x: (elem.offsetLeft + elem.offsetWidth / 2) * pxRatio,
+                y: (elem.offsetTop + elem.offsetHeight / 2) * pxRatio,
+            }, repulseRadius = (elem.offsetWidth / 2) * pxRatio, area = div.type === "circle"
+                ? new tsparticles_engine_1.Circle(pos.x, pos.y, repulseRadius)
+                : new tsparticles_engine_1.Rectangle(elem.offsetLeft * pxRatio, elem.offsetTop * pxRatio, elem.offsetWidth * pxRatio, elem.offsetHeight * pxRatio), query = container.particles.quadTree.query(area, (p) => this.isEnabled(p));
+            for (const particle of query) {
+                if (!area.contains(particle.getPosition())) {
+                    continue;
+                }
+                particle.bubble.inRange = true;
+                const divs = container.actualOptions.interactivity.modes.bubble.divs;
+                const divBubble = (0, tsparticles_engine_1.divMode)(divs, elem);
+                if (!particle.bubble.div || particle.bubble.div !== elem) {
+                    this.clear(particle, true);
+                    particle.bubble.div = elem;
+                }
+                this.hoverBubbleSize(particle, 1, divBubble);
+                this.hoverBubbleOpacity(particle, 1, divBubble);
+                this.hoverBubbleColor(particle, 1, divBubble);
+            }
+        });
+    }
 }
 exports.Bubbler = Bubbler;

esm/Bubbler.js

@@ -28,15 +28,2 @@ import { Circle, ExternalInteractorBase, Rectangle, clamp, colorMix, divMode, divModeExecute, getDistance, getRangeMax, isDivModeEnabled, isInArray, itemFromArray, mouseLeaveEvent, mouseMoveEvent, rangeColorToHsl, rgbToHsl, } from "tsparticles-engine";
     }
-    isEnabled(particle) {
-        var _a;
-        const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse, events = ((_a = particle === null || particle === void 0 ? void 0 : particle.interactivity) !== null && _a !== void 0 ? _a : options.interactivity).events, divs = events.onDiv, divBubble = isDivModeEnabled("bubble", divs);
-        if (!(divBubble || (events.onHover.enable && mouse.position) || (events.onClick.enable && mouse.clickPosition))) {
-            return false;
-        }
-        const hoverMode = events.onHover.mode;
-        const clickMode = events.onClick.mode;
-        return isInArray("bubble", hoverMode) || isInArray("bubble", clickMode) || divBubble;
-    }
-    reset(particle) {
-        particle.bubble.inRange = false;
-    }
     clear(particle, force) {
@@ -51,2 +38,4 @@ if (particle.bubble.inRange && !force) {
     }
+    init() {
+    }
     async interact() {
@@ -64,73 +53,14 @@ const options = this.container.actualOptions, events = options.interactivity.events, onHover = events.onHover, onClick = events.onClick, hoverEnabled = onHover.enable, hoverMode = onHover.mode, clickEnabled = onClick.enable, clickMode = onClick.mode, divs = events.onDiv;
     }
-    singleSelectorHover(selector, div) {
-        const container = this.container, selectors = document.querySelectorAll(selector);
-        if (!selectors.length) {
-            return;
+    isEnabled(particle) {
+        var _a;
+        const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse, events = ((_a = particle === null || particle === void 0 ? void 0 : particle.interactivity) !== null && _a !== void 0 ? _a : options.interactivity).events, divs = events.onDiv, divBubble = isDivModeEnabled("bubble", divs);
+        if (!(divBubble || (events.onHover.enable && mouse.position) || (events.onClick.enable && mouse.clickPosition))) {
+            return false;
         }
-        selectors.forEach((item) => {
-            const elem = item, pxRatio = container.retina.pixelRatio, pos = {
-                x: (elem.offsetLeft + elem.offsetWidth / 2) * pxRatio,
-                y: (elem.offsetTop + elem.offsetHeight / 2) * pxRatio,
-            }, repulseRadius = (elem.offsetWidth / 2) * pxRatio, area = div.type === "circle"
-                ? new Circle(pos.x, pos.y, repulseRadius)
-                : new Rectangle(elem.offsetLeft * pxRatio, elem.offsetTop * pxRatio, elem.offsetWidth * pxRatio, elem.offsetHeight * pxRatio), query = container.particles.quadTree.query(area, (p) => this.isEnabled(p));
-            for (const particle of query) {
-                if (!area.contains(particle.getPosition())) {
-                    continue;
-                }
-                particle.bubble.inRange = true;
-                const divs = container.actualOptions.interactivity.modes.bubble.divs;
-                const divBubble = divMode(divs, elem);
-                if (!particle.bubble.div || particle.bubble.div !== elem) {
-                    this.clear(particle, true);
-                    particle.bubble.div = elem;
-                }
-                this.hoverBubbleSize(particle, 1, divBubble);
-                this.hoverBubbleOpacity(particle, 1, divBubble);
-                this.hoverBubbleColor(particle, 1, divBubble);
-            }
-        });
+        const hoverMode = events.onHover.mode;
+        const clickMode = events.onClick.mode;
+        return isInArray("bubble", hoverMode) || isInArray("bubble", clickMode) || divBubble;
     }
-    process(particle, distMouse, timeSpent, data) {
-        const container = this.container, bubbleParam = data.bubbleObj.optValue;
-        if (bubbleParam === undefined) {
-            return;
-        }
-        const options = container.actualOptions, bubbleDuration = options.interactivity.modes.bubble.duration, bubbleDistance = container.retina.bubbleModeDistance, particlesParam = data.particlesObj.optValue, pObjBubble = data.bubbleObj.value, pObj = data.particlesObj.value || 0, type = data.type;
-        if (bubbleParam === particlesParam) {
-            return;
-        }
-        if (!container.bubble) {
-            container.bubble = {};
-        }
-        if (!container.bubble.durationEnd) {
-            if (distMouse <= bubbleDistance) {
-                const obj = pObjBubble !== null && pObjBubble !== void 0 ? pObjBubble : pObj;
-                if (obj !== bubbleParam) {
-                    const value = pObj - (timeSpent * (pObj - bubbleParam)) / bubbleDuration;
-                    if (type === "size") {
-                        particle.bubble.radius = value;
-                    }
-                    if (type === "opacity") {
-                        particle.bubble.opacity = value;
-                    }
-                }
-            }
-            else {
-                if (type === "size") {
-                    delete particle.bubble.radius;
-                }
-                if (type === "opacity") {
-                    delete particle.bubble.opacity;
-                }
-            }
-        }
-        else if (pObjBubble) {
-            if (type === "size") {
-                delete particle.bubble.radius;
-            }
-            if (type === "opacity") {
-                delete particle.bubble.opacity;
-            }
-        }
+    reset(particle) {
+        particle.bubble.inRange = false;
     }
@@ -221,27 +151,2 @@ clickBubble() {
     }
-    hoverBubbleSize(particle, ratio, divBubble) {
-        const container = this.container, modeSize = (divBubble === null || divBubble === void 0 ? void 0 : divBubble.size) ? divBubble.size * container.retina.pixelRatio : container.retina.bubbleModeSize;
-        if (modeSize === undefined) {
-            return;
-        }
-        const optSize = getRangeMax(particle.options.size.value) * container.retina.pixelRatio;
-        const pSize = particle.size.value;
-        const size = calculateBubbleValue(pSize, modeSize, optSize, ratio);
-        if (size !== undefined) {
-            particle.bubble.radius = size;
-        }
-    }
-    hoverBubbleOpacity(particle, ratio, divBubble) {
-        var _a, _b, _c;
-        const container = this.container, options = container.actualOptions, modeOpacity = (_a = divBubble === null || divBubble === void 0 ? void 0 : divBubble.opacity) !== null && _a !== void 0 ? _a : options.interactivity.modes.bubble.opacity;
-        if (!modeOpacity) {
-            return;
-        }
-        const optOpacity = particle.options.opacity.value;
-        const pOpacity = (_c = (_b = particle.opacity) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : 1;
-        const opacity = calculateBubbleValue(pOpacity, modeOpacity, getRangeMax(optOpacity), ratio);
-        if (opacity !== undefined) {
-            particle.bubble.opacity = opacity;
-        }
-    }
     hoverBubbleColor(particle, ratio, divBubble) {
@@ -272,2 +177,99 @@ const options = this.container.actualOptions;
     }
+    hoverBubbleOpacity(particle, ratio, divBubble) {
+        var _a, _b, _c;
+        const container = this.container, options = container.actualOptions, modeOpacity = (_a = divBubble === null || divBubble === void 0 ? void 0 : divBubble.opacity) !== null && _a !== void 0 ? _a : options.interactivity.modes.bubble.opacity;
+        if (!modeOpacity) {
+            return;
+        }
+        const optOpacity = particle.options.opacity.value;
+        const pOpacity = (_c = (_b = particle.opacity) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : 1;
+        const opacity = calculateBubbleValue(pOpacity, modeOpacity, getRangeMax(optOpacity), ratio);
+        if (opacity !== undefined) {
+            particle.bubble.opacity = opacity;
+        }
+    }
+    hoverBubbleSize(particle, ratio, divBubble) {
+        const container = this.container, modeSize = (divBubble === null || divBubble === void 0 ? void 0 : divBubble.size) ? divBubble.size * container.retina.pixelRatio : container.retina.bubbleModeSize;
+        if (modeSize === undefined) {
+            return;
+        }
+        const optSize = getRangeMax(particle.options.size.value) * container.retina.pixelRatio;
+        const pSize = particle.size.value;
+        const 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;
+        if (bubbleParam === undefined) {
+            return;
+        }
+        const options = container.actualOptions, bubbleDuration = options.interactivity.modes.bubble.duration, bubbleDistance = container.retina.bubbleModeDistance, particlesParam = data.particlesObj.optValue, pObjBubble = data.bubbleObj.value, pObj = data.particlesObj.value || 0, type = data.type;
+        if (bubbleParam === particlesParam) {
+            return;
+        }
+        if (!container.bubble) {
+            container.bubble = {};
+        }
+        if (!container.bubble.durationEnd) {
+            if (distMouse <= bubbleDistance) {
+                const obj = pObjBubble !== null && pObjBubble !== void 0 ? pObjBubble : pObj;
+                if (obj !== bubbleParam) {
+                    const value = pObj - (timeSpent * (pObj - bubbleParam)) / bubbleDuration;
+                    if (type === "size") {
+                        particle.bubble.radius = value;
+                    }
+                    if (type === "opacity") {
+                        particle.bubble.opacity = value;
+                    }
+                }
+            }
+            else {
+                if (type === "size") {
+                    delete particle.bubble.radius;
+                }
+                if (type === "opacity") {
+                    delete particle.bubble.opacity;
+                }
+            }
+        }
+        else if (pObjBubble) {
+            if (type === "size") {
+                delete particle.bubble.radius;
+            }
+            if (type === "opacity") {
+                delete particle.bubble.opacity;
+            }
+        }
+    }
+    singleSelectorHover(selector, div) {
+        const container = this.container, selectors = document.querySelectorAll(selector);
+        if (!selectors.length) {
+            return;
+        }
+        selectors.forEach((item) => {
+            const elem = item, pxRatio = container.retina.pixelRatio, pos = {
+                x: (elem.offsetLeft + elem.offsetWidth / 2) * pxRatio,
+                y: (elem.offsetTop + elem.offsetHeight / 2) * pxRatio,
+            }, repulseRadius = (elem.offsetWidth / 2) * pxRatio, area = div.type === "circle"
+                ? new Circle(pos.x, pos.y, repulseRadius)
+                : new Rectangle(elem.offsetLeft * pxRatio, elem.offsetTop * pxRatio, elem.offsetWidth * pxRatio, elem.offsetHeight * pxRatio), query = container.particles.quadTree.query(area, (p) => this.isEnabled(p));
+            for (const particle of query) {
+                if (!area.contains(particle.getPosition())) {
+                    continue;
+                }
+                particle.bubble.inRange = true;
+                const divs = container.actualOptions.interactivity.modes.bubble.divs;
+                const divBubble = divMode(divs, elem);
+                if (!particle.bubble.div || particle.bubble.div !== elem) {
+                    this.clear(particle, true);
+                    particle.bubble.div = elem;
+                }
+                this.hoverBubbleSize(particle, 1, divBubble);
+                this.hoverBubbleOpacity(particle, 1, divBubble);
+                this.hoverBubbleColor(particle, 1, divBubble);
+            }
+        });
+    }
 }

package.json

 {
   "name": "tsparticles-interaction-external-bubble",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "tsParticles bubble external interaction",
@@ -75,4 +75,4 @@ "homepage": "https://particles.js.org/",
   "dependencies": {
-    "tsparticles-engine": "^2.1.0"
+    "tsparticles-engine": "^2.1.1"
   }
 }

tsparticles.interaction.external.bubble.js

@@ -7,3 +7,3 @@ /*!
  * How to use? : Check the GitHub README
- * v2.1.0
+ * v2.1.1
  */
@@ -141,31 +141,2 @@ (function webpackUniversalModuleDefinition(root, factory) {
 
-  isEnabled(particle) {
-    var _a;
-
-    const container = this.container,
-          options = container.actualOptions,
-          mouse = container.interactivity.mouse,
-          events = ((_a = particle === null || particle === void 0 ? void 0 : particle.interactivity) !== null && _a !== void 0 ? _a : options.interactivity).events,
-          divs = events.onDiv,
-          divBubble = (0,external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.isDivModeEnabled)("bubble"
-    /* DivMode.bubble */
-    , divs);
-
-    if (!(divBubble || events.onHover.enable && mouse.position || events.onClick.enable && mouse.clickPosition)) {
-      return false;
-    }
-
-    const hoverMode = events.onHover.mode;
-    const clickMode = events.onClick.mode;
-    return (0,external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.isInArray)("bubble"
-    /* HoverMode.bubble */
-    , hoverMode) || (0,external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.isInArray)("bubble"
-    /* ClickMode.bubble */
-    , clickMode) || divBubble;
-  }
-
-  reset(particle) {
-    particle.bubble.inRange = false;
-  }
-
   clear(particle, force) {
@@ -182,2 +153,5 @@ if (particle.bubble.inRange && !force) {
 
+  init() {// do nothing
+  }
+
   async interact() {
@@ -210,119 +184,29 @@ const options = this.container.actualOptions,
 
-  singleSelectorHover(selector, div) {
+  isEnabled(particle) {
+    var _a;
+
     const container = this.container,
-          selectors = document.querySelectorAll(selector);
+          options = container.actualOptions,
+          mouse = container.interactivity.mouse,
+          events = ((_a = particle === null || particle === void 0 ? void 0 : particle.interactivity) !== null && _a !== void 0 ? _a : options.interactivity).events,
+          divs = events.onDiv,
+          divBubble = (0,external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.isDivModeEnabled)("bubble"
+    /* DivMode.bubble */
+    , divs);
 
-    if (!selectors.length) {
-      return;
+    if (!(divBubble || events.onHover.enable && mouse.position || events.onClick.enable && mouse.clickPosition)) {
+      return false;
     }
 
-    selectors.forEach(item => {
-      const elem = item,
-            pxRatio = container.retina.pixelRatio,
-            pos = {
-        x: (elem.offsetLeft + elem.offsetWidth / 2) * pxRatio,
-        y: (elem.offsetTop + elem.offsetHeight / 2) * pxRatio
-      },
-            repulseRadius = elem.offsetWidth / 2 * pxRatio,
-            area = div.type === "circle"
-      /* DivType.circle */
-      ? new external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.Circle(pos.x, pos.y, repulseRadius) : new external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.Rectangle(elem.offsetLeft * pxRatio, elem.offsetTop * pxRatio, elem.offsetWidth * pxRatio, elem.offsetHeight * pxRatio),
-            query = container.particles.quadTree.query(area, p => this.isEnabled(p));
-
-      for (const particle of query) {
-        if (!area.contains(particle.getPosition())) {
-          continue;
-        }
-
-        particle.bubble.inRange = true;
-        const divs = container.actualOptions.interactivity.modes.bubble.divs;
-        const divBubble = (0,external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.divMode)(divs, elem);
-
-        if (!particle.bubble.div || particle.bubble.div !== elem) {
-          this.clear(particle, true);
-          particle.bubble.div = elem;
-        }
-        /* size */
-
-
-        this.hoverBubbleSize(particle, 1, divBubble);
-        /* opacity */
-
-        this.hoverBubbleOpacity(particle, 1, divBubble);
-        /* color */
-
-        this.hoverBubbleColor(particle, 1, divBubble);
-      }
-    });
+    const hoverMode = events.onHover.mode;
+    const clickMode = events.onClick.mode;
+    return (0,external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.isInArray)("bubble"
+    /* HoverMode.bubble */
+    , hoverMode) || (0,external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.isInArray)("bubble"
+    /* ClickMode.bubble */
+    , clickMode) || divBubble;
   }
 
-  process(particle, distMouse, timeSpent, data) {
-    const container = this.container,
-          bubbleParam = data.bubbleObj.optValue;
-
-    if (bubbleParam === undefined) {
-      return;
-    }
-
-    const options = container.actualOptions,
-          bubbleDuration = options.interactivity.modes.bubble.duration,
-          bubbleDistance = container.retina.bubbleModeDistance,
-          particlesParam = data.particlesObj.optValue,
-          pObjBubble = data.bubbleObj.value,
-          pObj = data.particlesObj.value || 0,
-          type = data.type;
-
-    if (bubbleParam === particlesParam) {
-      return;
-    }
-
-    if (!container.bubble) {
-      container.bubble = {};
-    }
-
-    if (!container.bubble.durationEnd) {
-      if (distMouse <= bubbleDistance) {
-        const obj = pObjBubble !== null && pObjBubble !== void 0 ? pObjBubble : pObj;
-
-        if (obj !== bubbleParam) {
-          const value = pObj - timeSpent * (pObj - bubbleParam) / bubbleDuration;
-
-          if (type === "size"
-          /* ProcessBubbleType.size */
-          ) {
-            particle.bubble.radius = value;
-          }
-
-          if (type === "opacity"
-          /* ProcessBubbleType.opacity */
-          ) {
-            particle.bubble.opacity = value;
-          }
-        }
-      } else {
-        if (type === "size"
-        /* ProcessBubbleType.size */
-        ) {
-          delete particle.bubble.radius;
-        }
-
-        if (type === "opacity"
-        /* ProcessBubbleType.opacity */
-        ) {
-          delete particle.bubble.opacity;
-        }
-      }
-    } else if (pObjBubble) {
-      if (type === "size"
-      /* ProcessBubbleType.size */
-      ) {
-        delete particle.bubble.radius;
-      }
-
-      if (type === "opacity"
-      /* ProcessBubbleType.opacity */
-      ) {
-        delete particle.bubble.opacity;
-      }
-    }
+  reset(particle) {
+    particle.bubble.inRange = false;
   }
@@ -449,16 +333,27 @@
 
-  hoverBubbleSize(particle, ratio, divBubble) {
-    const container = this.container,
-          modeSize = (divBubble === null || divBubble === void 0 ? void 0 : divBubble.size) ? divBubble.size * container.retina.pixelRatio : container.retina.bubbleModeSize;
+  hoverBubbleColor(particle, ratio, divBubble) {
+    const options = this.container.actualOptions;
+    const bubbleOptions = divBubble !== null && divBubble !== void 0 ? divBubble : options.interactivity.modes.bubble;
 
-    if (modeSize === undefined) {
+    if (!particle.bubble.finalColor) {
+      const modeColor = bubbleOptions.color;
+
+      if (!modeColor) {
+        return;
+      }
+
+      const bubbleColor = modeColor instanceof Array ? (0,external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.itemFromArray)(modeColor) : modeColor;
+      particle.bubble.finalColor = (0,external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.rangeColorToHsl)(bubbleColor);
+    }
+
+    if (!particle.bubble.finalColor) {
       return;
     }
 
-    const optSize = (0,external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.getRangeMax)(particle.options.size.value) * container.retina.pixelRatio;
-    const pSize = particle.size.value;
-    const size = calculateBubbleValue(pSize, modeSize, optSize, ratio);
-
-    if (size !== undefined) {
-      particle.bubble.radius = size;
+    if (bubbleOptions.mix) {
+      particle.bubble.color = undefined;
+      const pColor = particle.getFillColor();
+      particle.bubble.color = pColor ? (0,external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.rgbToHsl)((0,external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.colorMix)(pColor, particle.bubble.finalColor, 1 - ratio, ratio)) : particle.bubble.finalColor;
+    } else {
+      particle.bubble.color = particle.bubble.finalColor;
     }
@@ -487,30 +382,138 @@ }
 
-  hoverBubbleColor(particle, ratio, divBubble) {
-    const options = this.container.actualOptions;
-    const bubbleOptions = divBubble !== null && divBubble !== void 0 ? divBubble : options.interactivity.modes.bubble;
+  hoverBubbleSize(particle, ratio, divBubble) {
+    const container = this.container,
+          modeSize = (divBubble === null || divBubble === void 0 ? void 0 : divBubble.size) ? divBubble.size * container.retina.pixelRatio : container.retina.bubbleModeSize;
 
-    if (!particle.bubble.finalColor) {
-      const modeColor = bubbleOptions.color;
+    if (modeSize === undefined) {
+      return;
+    }
 
-      if (!modeColor) {
-        return;
-      }
+    const optSize = (0,external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.getRangeMax)(particle.options.size.value) * container.retina.pixelRatio;
+    const pSize = particle.size.value;
+    const size = calculateBubbleValue(pSize, modeSize, optSize, ratio);
 
-      const bubbleColor = modeColor instanceof Array ? (0,external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.itemFromArray)(modeColor) : modeColor;
-      particle.bubble.finalColor = (0,external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.rangeColorToHsl)(bubbleColor);
+    if (size !== undefined) {
+      particle.bubble.radius = size;
     }
+  }
 
-    if (!particle.bubble.finalColor) {
+  process(particle, distMouse, timeSpent, data) {
+    const container = this.container,
+          bubbleParam = data.bubbleObj.optValue;
+
+    if (bubbleParam === undefined) {
       return;
     }
 
-    if (bubbleOptions.mix) {
-      particle.bubble.color = undefined;
-      const pColor = particle.getFillColor();
-      particle.bubble.color = pColor ? (0,external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.rgbToHsl)((0,external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.colorMix)(pColor, particle.bubble.finalColor, 1 - ratio, ratio)) : particle.bubble.finalColor;
-    } else {
-      particle.bubble.color = particle.bubble.finalColor;
+    const options = container.actualOptions,
+          bubbleDuration = options.interactivity.modes.bubble.duration,
+          bubbleDistance = container.retina.bubbleModeDistance,
+          particlesParam = data.particlesObj.optValue,
+          pObjBubble = data.bubbleObj.value,
+          pObj = data.particlesObj.value || 0,
+          type = data.type;
+
+    if (bubbleParam === particlesParam) {
+      return;
     }
+
+    if (!container.bubble) {
+      container.bubble = {};
+    }
+
+    if (!container.bubble.durationEnd) {
+      if (distMouse <= bubbleDistance) {
+        const obj = pObjBubble !== null && pObjBubble !== void 0 ? pObjBubble : pObj;
+
+        if (obj !== bubbleParam) {
+          const value = pObj - timeSpent * (pObj - bubbleParam) / bubbleDuration;
+
+          if (type === "size"
+          /* ProcessBubbleType.size */
+          ) {
+            particle.bubble.radius = value;
+          }
+
+          if (type === "opacity"
+          /* ProcessBubbleType.opacity */
+          ) {
+            particle.bubble.opacity = value;
+          }
+        }
+      } else {
+        if (type === "size"
+        /* ProcessBubbleType.size */
+        ) {
+          delete particle.bubble.radius;
+        }
+
+        if (type === "opacity"
+        /* ProcessBubbleType.opacity */
+        ) {
+          delete particle.bubble.opacity;
+        }
+      }
+    } else if (pObjBubble) {
+      if (type === "size"
+      /* ProcessBubbleType.size */
+      ) {
+        delete particle.bubble.radius;
+      }
+
+      if (type === "opacity"
+      /* ProcessBubbleType.opacity */
+      ) {
+        delete particle.bubble.opacity;
+      }
+    }
   }
 
+  singleSelectorHover(selector, div) {
+    const container = this.container,
+          selectors = document.querySelectorAll(selector);
+
+    if (!selectors.length) {
+      return;
+    }
+
+    selectors.forEach(item => {
+      const elem = item,
+            pxRatio = container.retina.pixelRatio,
+            pos = {
+        x: (elem.offsetLeft + elem.offsetWidth / 2) * pxRatio,
+        y: (elem.offsetTop + elem.offsetHeight / 2) * pxRatio
+      },
+            repulseRadius = elem.offsetWidth / 2 * pxRatio,
+            area = div.type === "circle"
+      /* DivType.circle */
+      ? new external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.Circle(pos.x, pos.y, repulseRadius) : new external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.Rectangle(elem.offsetLeft * pxRatio, elem.offsetTop * pxRatio, elem.offsetWidth * pxRatio, elem.offsetHeight * pxRatio),
+            query = container.particles.quadTree.query(area, p => this.isEnabled(p));
+
+      for (const particle of query) {
+        if (!area.contains(particle.getPosition())) {
+          continue;
+        }
+
+        particle.bubble.inRange = true;
+        const divs = container.actualOptions.interactivity.modes.bubble.divs;
+        const divBubble = (0,external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.divMode)(divs, elem);
+
+        if (!particle.bubble.div || particle.bubble.div !== elem) {
+          this.clear(particle, true);
+          particle.bubble.div = elem;
+        }
+        /* size */
+
+
+        this.hoverBubbleSize(particle, 1, divBubble);
+        /* opacity */
+
+        this.hoverBubbleOpacity(particle, 1, divBubble);
+        /* color */
+
+        this.hoverBubbleColor(particle, 1, divBubble);
+      }
+    });
+  }
+
 }
@@ -517,0 +520,0 @@ ;// CONCATENATED MODULE: ./dist/browser/index.js

tsparticles.interaction.external.bubble.min.js

@@ -1,2 +0,2 @@
-/*! tsParticles Bubble External Interaction v2.1.0 by Matteo Bruni */
-!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={818:t=>{t.exports=e}},i={};function o(e){var b=i[e];if(void 0!==b)return b.exports;var l=i[e]={exports:{}};return t[e](l,l.exports,o),l.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 b={};return(()=>{o.r(b),o.d(b,{loadExternalBubbleInteraction:()=>l});var e=o(818);function t(t,i,o,b){if(i>=o){const l=t+(i-o)*b;return(0,e.clamp)(l,t,i)}if(i<o){const l=t-(o-i)*b;return(0,e.clamp)(l,i,t)}}class i extends e.ExternalInteractorBase{constructor(e){super(e),e.bubble||(e.bubble={}),this.handleClickMode=t=>{"bubble"===t&&(e.bubble||(e.bubble={}),e.bubble.clicking=!0)}}isEnabled(t){var i;const o=this.container,b=o.actualOptions,l=o.interactivity.mouse,n=(null!==(i=null==t?void 0:t.interactivity)&&void 0!==i?i:b.interactivity).events,r=n.onDiv,a=(0,e.isDivModeEnabled)("bubble",r);if(!(a||n.onHover.enable&&l.position||n.onClick.enable&&l.clickPosition))return!1;const s=n.onHover.mode,u=n.onClick.mode;return(0,e.isInArray)("bubble",s)||(0,e.isInArray)("bubble",u)||a}reset(e){e.bubble.inRange=!1}clear(e,t){e.bubble.inRange&&!t||(delete e.bubble.div,delete e.bubble.opacity,delete e.bubble.radius,delete e.bubble.color)}async interact(){const t=this.container.actualOptions.interactivity.events,i=t.onHover,o=t.onClick,b=i.enable,l=i.mode,n=o.enable,r=o.mode,a=t.onDiv;b&&(0,e.isInArray)("bubble",l)?this.hoverBubble():n&&(0,e.isInArray)("bubble",r)?this.clickBubble():(0,e.divModeExecute)("bubble",a,((e,t)=>this.singleSelectorHover(e,t)))}singleSelectorHover(t,i){const o=this.container,b=document.querySelectorAll(t);b.length&&b.forEach((t=>{const b=t,l=o.retina.pixelRatio,n={x:(b.offsetLeft+b.offsetWidth/2)*l,y:(b.offsetTop+b.offsetHeight/2)*l},r=b.offsetWidth/2*l,a="circle"===i.type?new e.Circle(n.x,n.y,r):new e.Rectangle(b.offsetLeft*l,b.offsetTop*l,b.offsetWidth*l,b.offsetHeight*l),s=o.particles.quadTree.query(a,(e=>this.isEnabled(e)));for(const t of s){if(!a.contains(t.getPosition()))continue;t.bubble.inRange=!0;const i=o.actualOptions.interactivity.modes.bubble.divs,l=(0,e.divMode)(i,b);t.bubble.div&&t.bubble.div===b||(this.clear(t,!0),t.bubble.div=b),this.hoverBubbleSize(t,1,l),this.hoverBubbleOpacity(t,1,l),this.hoverBubbleColor(t,1,l)}}))}process(e,t,i,o){const b=this.container,l=o.bubbleObj.optValue;if(void 0===l)return;const n=b.actualOptions.interactivity.modes.bubble.duration,r=b.retina.bubbleModeDistance,a=o.particlesObj.optValue,s=o.bubbleObj.value,u=o.particlesObj.value||0,c=o.type;if(l!==a)if(b.bubble||(b.bubble={}),b.bubble.durationEnd)s&&("size"===c&&delete e.bubble.radius,"opacity"===c&&delete e.bubble.opacity);else if(t<=r){if((null!=s?s:u)!==l){const t=u-i*(u-l)/n;"size"===c&&(e.bubble.radius=t),"opacity"===c&&(e.bubble.opacity=t)}}else"size"===c&&delete e.bubble.radius,"opacity"===c&&delete e.bubble.opacity}clickBubble(){var t,i;const o=this.container,b=o.actualOptions,l=o.interactivity.mouse.clickPosition;if(!l)return;o.bubble||(o.bubble={});const n=o.retina.bubbleModeDistance,r=o.particles.quadTree.queryCircle(l,n,(e=>this.isEnabled(e)));for(const n of r){if(!o.bubble.clicking)continue;n.bubble.inRange=!o.bubble.durationEnd;const r=n.getPosition(),a=(0,e.getDistance)(r,l),s=((new Date).getTime()-(o.interactivity.mouse.clickTime||0))/1e3;s>b.interactivity.modes.bubble.duration&&(o.bubble.durationEnd=!0),s>2*b.interactivity.modes.bubble.duration&&(o.bubble.clicking=!1,o.bubble.durationEnd=!1);const u={bubbleObj:{optValue:o.retina.bubbleModeSize,value:n.bubble.radius},particlesObj:{optValue:(0,e.getRangeMax)(n.options.size.value)*o.retina.pixelRatio,value:n.size.value},type:"size"};this.process(n,a,s,u);const c={bubbleObj:{optValue:b.interactivity.modes.bubble.opacity,value:n.bubble.opacity},particlesObj:{optValue:(0,e.getRangeMax)(n.options.opacity.value),value:null!==(i=null===(t=n.opacity)||void 0===t?void 0:t.value)&&void 0!==i?i:1},type:"opacity"};this.process(n,a,s,c),o.bubble.durationEnd?delete n.bubble.color:a<=o.retina.bubbleModeDistance?this.hoverBubbleColor(n,a):delete n.bubble.color}}hoverBubble(){const t=this.container,i=t.interactivity.mouse.position;if(void 0===i)return;const o=t.retina.bubbleModeDistance,b=t.particles.quadTree.queryCircle(i,o,(e=>this.isEnabled(e)));for(const l of b){l.bubble.inRange=!0;const b=l.getPosition(),n=(0,e.getDistance)(b,i),r=1-n/o;n<=o?r>=0&&t.interactivity.status===e.mouseMoveEvent&&(this.hoverBubbleSize(l,r),this.hoverBubbleOpacity(l,r),this.hoverBubbleColor(l,r)):this.reset(l),t.interactivity.status===e.mouseLeaveEvent&&this.reset(l)}}hoverBubbleSize(i,o,b){const l=this.container,n=(null==b?void 0:b.size)?b.size*l.retina.pixelRatio:l.retina.bubbleModeSize;if(void 0===n)return;const r=(0,e.getRangeMax)(i.options.size.value)*l.retina.pixelRatio,a=t(i.size.value,n,r,o);void 0!==a&&(i.bubble.radius=a)}hoverBubbleOpacity(i,o,b){var l,n,r;const a=this.container.actualOptions,s=null!==(l=null==b?void 0:b.opacity)&&void 0!==l?l:a.interactivity.modes.bubble.opacity;if(!s)return;const u=i.options.opacity.value,c=t(null!==(r=null===(n=i.opacity)||void 0===n?void 0:n.value)&&void 0!==r?r:1,s,(0,e.getRangeMax)(u),o);void 0!==c&&(i.bubble.opacity=c)}hoverBubbleColor(t,i,o){const b=this.container.actualOptions,l=null!=o?o:b.interactivity.modes.bubble;if(!t.bubble.finalColor){const i=l.color;if(!i)return;const o=i instanceof Array?(0,e.itemFromArray)(i):i;t.bubble.finalColor=(0,e.rangeColorToHsl)(o)}if(t.bubble.finalColor)if(l.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}}async function l(e){await e.addInteractor("externalBubble",(e=>new i(e)))}})(),b})()));
+/*! tsParticles Bubble External Interaction v2.1.1 by Matteo Bruni */
+!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={818:t=>{t.exports=e}},i={};function o(e){var b=i[e];if(void 0!==b)return b.exports;var l=i[e]={exports:{}};return t[e](l,l.exports,o),l.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 b={};return(()=>{o.r(b),o.d(b,{loadExternalBubbleInteraction:()=>l});var e=o(818);function t(t,i,o,b){if(i>=o){const l=t+(i-o)*b;return(0,e.clamp)(l,t,i)}if(i<o){const l=t-(o-i)*b;return(0,e.clamp)(l,i,t)}}class i extends e.ExternalInteractorBase{constructor(e){super(e),e.bubble||(e.bubble={}),this.handleClickMode=t=>{"bubble"===t&&(e.bubble||(e.bubble={}),e.bubble.clicking=!0)}}clear(e,t){e.bubble.inRange&&!t||(delete e.bubble.div,delete e.bubble.opacity,delete e.bubble.radius,delete e.bubble.color)}init(){}async interact(){const t=this.container.actualOptions.interactivity.events,i=t.onHover,o=t.onClick,b=i.enable,l=i.mode,n=o.enable,r=o.mode,a=t.onDiv;b&&(0,e.isInArray)("bubble",l)?this.hoverBubble():n&&(0,e.isInArray)("bubble",r)?this.clickBubble():(0,e.divModeExecute)("bubble",a,((e,t)=>this.singleSelectorHover(e,t)))}isEnabled(t){var i;const o=this.container,b=o.actualOptions,l=o.interactivity.mouse,n=(null!==(i=null==t?void 0:t.interactivity)&&void 0!==i?i:b.interactivity).events,r=n.onDiv,a=(0,e.isDivModeEnabled)("bubble",r);if(!(a||n.onHover.enable&&l.position||n.onClick.enable&&l.clickPosition))return!1;const s=n.onHover.mode,u=n.onClick.mode;return(0,e.isInArray)("bubble",s)||(0,e.isInArray)("bubble",u)||a}reset(e){e.bubble.inRange=!1}clickBubble(){var t,i;const o=this.container,b=o.actualOptions,l=o.interactivity.mouse.clickPosition;if(!l)return;o.bubble||(o.bubble={});const n=o.retina.bubbleModeDistance,r=o.particles.quadTree.queryCircle(l,n,(e=>this.isEnabled(e)));for(const n of r){if(!o.bubble.clicking)continue;n.bubble.inRange=!o.bubble.durationEnd;const r=n.getPosition(),a=(0,e.getDistance)(r,l),s=((new Date).getTime()-(o.interactivity.mouse.clickTime||0))/1e3;s>b.interactivity.modes.bubble.duration&&(o.bubble.durationEnd=!0),s>2*b.interactivity.modes.bubble.duration&&(o.bubble.clicking=!1,o.bubble.durationEnd=!1);const u={bubbleObj:{optValue:o.retina.bubbleModeSize,value:n.bubble.radius},particlesObj:{optValue:(0,e.getRangeMax)(n.options.size.value)*o.retina.pixelRatio,value:n.size.value},type:"size"};this.process(n,a,s,u);const c={bubbleObj:{optValue:b.interactivity.modes.bubble.opacity,value:n.bubble.opacity},particlesObj:{optValue:(0,e.getRangeMax)(n.options.opacity.value),value:null!==(i=null===(t=n.opacity)||void 0===t?void 0:t.value)&&void 0!==i?i:1},type:"opacity"};this.process(n,a,s,c),o.bubble.durationEnd?delete n.bubble.color:a<=o.retina.bubbleModeDistance?this.hoverBubbleColor(n,a):delete n.bubble.color}}hoverBubble(){const t=this.container,i=t.interactivity.mouse.position;if(void 0===i)return;const o=t.retina.bubbleModeDistance,b=t.particles.quadTree.queryCircle(i,o,(e=>this.isEnabled(e)));for(const l of b){l.bubble.inRange=!0;const b=l.getPosition(),n=(0,e.getDistance)(b,i),r=1-n/o;n<=o?r>=0&&t.interactivity.status===e.mouseMoveEvent&&(this.hoverBubbleSize(l,r),this.hoverBubbleOpacity(l,r),this.hoverBubbleColor(l,r)):this.reset(l),t.interactivity.status===e.mouseLeaveEvent&&this.reset(l)}}hoverBubbleColor(t,i,o){const b=this.container.actualOptions,l=null!=o?o:b.interactivity.modes.bubble;if(!t.bubble.finalColor){const i=l.color;if(!i)return;const o=i instanceof Array?(0,e.itemFromArray)(i):i;t.bubble.finalColor=(0,e.rangeColorToHsl)(o)}if(t.bubble.finalColor)if(l.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}hoverBubbleOpacity(i,o,b){var l,n,r;const a=this.container.actualOptions,s=null!==(l=null==b?void 0:b.opacity)&&void 0!==l?l:a.interactivity.modes.bubble.opacity;if(!s)return;const u=i.options.opacity.value,c=t(null!==(r=null===(n=i.opacity)||void 0===n?void 0:n.value)&&void 0!==r?r:1,s,(0,e.getRangeMax)(u),o);void 0!==c&&(i.bubble.opacity=c)}hoverBubbleSize(i,o,b){const l=this.container,n=(null==b?void 0:b.size)?b.size*l.retina.pixelRatio:l.retina.bubbleModeSize;if(void 0===n)return;const r=(0,e.getRangeMax)(i.options.size.value)*l.retina.pixelRatio,a=t(i.size.value,n,r,o);void 0!==a&&(i.bubble.radius=a)}process(e,t,i,o){const b=this.container,l=o.bubbleObj.optValue;if(void 0===l)return;const n=b.actualOptions.interactivity.modes.bubble.duration,r=b.retina.bubbleModeDistance,a=o.particlesObj.optValue,s=o.bubbleObj.value,u=o.particlesObj.value||0,c=o.type;if(l!==a)if(b.bubble||(b.bubble={}),b.bubble.durationEnd)s&&("size"===c&&delete e.bubble.radius,"opacity"===c&&delete e.bubble.opacity);else if(t<=r){if((null!=s?s:u)!==l){const t=u-i*(u-l)/n;"size"===c&&(e.bubble.radius=t),"opacity"===c&&(e.bubble.opacity=t)}}else"size"===c&&delete e.bubble.radius,"opacity"===c&&delete e.bubble.opacity}singleSelectorHover(t,i){const o=this.container,b=document.querySelectorAll(t);b.length&&b.forEach((t=>{const b=t,l=o.retina.pixelRatio,n={x:(b.offsetLeft+b.offsetWidth/2)*l,y:(b.offsetTop+b.offsetHeight/2)*l},r=b.offsetWidth/2*l,a="circle"===i.type?new e.Circle(n.x,n.y,r):new e.Rectangle(b.offsetLeft*l,b.offsetTop*l,b.offsetWidth*l,b.offsetHeight*l),s=o.particles.quadTree.query(a,(e=>this.isEnabled(e)));for(const t of s){if(!a.contains(t.getPosition()))continue;t.bubble.inRange=!0;const i=o.actualOptions.interactivity.modes.bubble.divs,l=(0,e.divMode)(i,b);t.bubble.div&&t.bubble.div===b||(this.clear(t,!0),t.bubble.div=b),this.hoverBubbleSize(t,1,l),this.hoverBubbleOpacity(t,1,l),this.hoverBubbleColor(t,1,l)}}))}}async function l(e){await e.addInteractor("externalBubble",(e=>new i(e)))}})(),b})()));

types/Bubbler.d.ts

@@ -13,14 +13,15 @@ import type { Container, Particle } from "tsparticles-engine";
     constructor(container: ContainerBubbler);
+    clear(particle: Particle, force?: boolean): void;
+    init(): void;
+    interact(): Promise<void>;
     isEnabled(particle?: Particle): boolean;
     reset(particle: Particle): void;
-    clear(particle: Particle, force?: boolean): void;
-    interact(): Promise<void>;
-    private singleSelectorHover;
-    private process;
     private clickBubble;
     private hoverBubble;
+    private hoverBubbleColor;
+    private hoverBubbleOpacity;
     private hoverBubbleSize;
-    private hoverBubbleOpacity;
-    private hoverBubbleColor;
+    private process;
+    private singleSelectorHover;
 }
 export {};

umd/Bubbler.js

@@ -40,15 +40,2 @@ (function (factory) {
         }
-        isEnabled(particle) {
-            var _a;
-            const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse, events = ((_a = particle === null || particle === void 0 ? void 0 : particle.interactivity) !== null && _a !== void 0 ? _a : options.interactivity).events, divs = events.onDiv, divBubble = (0, tsparticles_engine_1.isDivModeEnabled)("bubble", divs);
-            if (!(divBubble || (events.onHover.enable && mouse.position) || (events.onClick.enable && mouse.clickPosition))) {
-                return false;
-            }
-            const hoverMode = events.onHover.mode;
-            const clickMode = events.onClick.mode;
-            return (0, tsparticles_engine_1.isInArray)("bubble", hoverMode) || (0, tsparticles_engine_1.isInArray)("bubble", clickMode) || divBubble;
-        }
-        reset(particle) {
-            particle.bubble.inRange = false;
-        }
         clear(particle, force) {
@@ -63,2 +50,4 @@ if (particle.bubble.inRange && !force) {
         }
+        init() {
+        }
         async interact() {
@@ -76,73 +65,14 @@ const options = this.container.actualOptions, events = options.interactivity.events, onHover = events.onHover, onClick = events.onClick, hoverEnabled = onHover.enable, hoverMode = onHover.mode, clickEnabled = onClick.enable, clickMode = onClick.mode, divs = events.onDiv;
         }
-        singleSelectorHover(selector, div) {
-            const container = this.container, selectors = document.querySelectorAll(selector);
-            if (!selectors.length) {
-                return;
+        isEnabled(particle) {
+            var _a;
+            const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse, events = ((_a = particle === null || particle === void 0 ? void 0 : particle.interactivity) !== null && _a !== void 0 ? _a : options.interactivity).events, divs = events.onDiv, divBubble = (0, tsparticles_engine_1.isDivModeEnabled)("bubble", divs);
+            if (!(divBubble || (events.onHover.enable && mouse.position) || (events.onClick.enable && mouse.clickPosition))) {
+                return false;
             }
-            selectors.forEach((item) => {
-                const elem = item, pxRatio = container.retina.pixelRatio, pos = {
-                    x: (elem.offsetLeft + elem.offsetWidth / 2) * pxRatio,
-                    y: (elem.offsetTop + elem.offsetHeight / 2) * pxRatio,
-                }, repulseRadius = (elem.offsetWidth / 2) * pxRatio, area = div.type === "circle"
-                    ? new tsparticles_engine_1.Circle(pos.x, pos.y, repulseRadius)
-                    : new tsparticles_engine_1.Rectangle(elem.offsetLeft * pxRatio, elem.offsetTop * pxRatio, elem.offsetWidth * pxRatio, elem.offsetHeight * pxRatio), query = container.particles.quadTree.query(area, (p) => this.isEnabled(p));
-                for (const particle of query) {
-                    if (!area.contains(particle.getPosition())) {
-                        continue;
-                    }
-                    particle.bubble.inRange = true;
-                    const divs = container.actualOptions.interactivity.modes.bubble.divs;
-                    const divBubble = (0, tsparticles_engine_1.divMode)(divs, elem);
-                    if (!particle.bubble.div || particle.bubble.div !== elem) {
-                        this.clear(particle, true);
-                        particle.bubble.div = elem;
-                    }
-                    this.hoverBubbleSize(particle, 1, divBubble);
-                    this.hoverBubbleOpacity(particle, 1, divBubble);
-                    this.hoverBubbleColor(particle, 1, divBubble);
-                }
-            });
+            const hoverMode = events.onHover.mode;
+            const clickMode = events.onClick.mode;
+            return (0, tsparticles_engine_1.isInArray)("bubble", hoverMode) || (0, tsparticles_engine_1.isInArray)("bubble", clickMode) || divBubble;
         }
-        process(particle, distMouse, timeSpent, data) {
-            const container = this.container, bubbleParam = data.bubbleObj.optValue;
-            if (bubbleParam === undefined) {
-                return;
-            }
-            const options = container.actualOptions, bubbleDuration = options.interactivity.modes.bubble.duration, bubbleDistance = container.retina.bubbleModeDistance, particlesParam = data.particlesObj.optValue, pObjBubble = data.bubbleObj.value, pObj = data.particlesObj.value || 0, type = data.type;
-            if (bubbleParam === particlesParam) {
-                return;
-            }
-            if (!container.bubble) {
-                container.bubble = {};
-            }
-            if (!container.bubble.durationEnd) {
-                if (distMouse <= bubbleDistance) {
-                    const obj = pObjBubble !== null && pObjBubble !== void 0 ? pObjBubble : pObj;
-                    if (obj !== bubbleParam) {
-                        const value = pObj - (timeSpent * (pObj - bubbleParam)) / bubbleDuration;
-                        if (type === "size") {
-                            particle.bubble.radius = value;
-                        }
-                        if (type === "opacity") {
-                            particle.bubble.opacity = value;
-                        }
-                    }
-                }
-                else {
-                    if (type === "size") {
-                        delete particle.bubble.radius;
-                    }
-                    if (type === "opacity") {
-                        delete particle.bubble.opacity;
-                    }
-                }
-            }
-            else if (pObjBubble) {
-                if (type === "size") {
-                    delete particle.bubble.radius;
-                }
-                if (type === "opacity") {
-                    delete particle.bubble.opacity;
-                }
-            }
+        reset(particle) {
+            particle.bubble.inRange = false;
         }
@@ -233,27 +163,2 @@ clickBubble() {
         }
-        hoverBubbleSize(particle, ratio, divBubble) {
-            const container = this.container, modeSize = (divBubble === null || divBubble === void 0 ? void 0 : divBubble.size) ? divBubble.size * container.retina.pixelRatio : container.retina.bubbleModeSize;
-            if (modeSize === undefined) {
-                return;
-            }
-            const optSize = (0, tsparticles_engine_1.getRangeMax)(particle.options.size.value) * container.retina.pixelRatio;
-            const pSize = particle.size.value;
-            const size = calculateBubbleValue(pSize, modeSize, optSize, ratio);
-            if (size !== undefined) {
-                particle.bubble.radius = size;
-            }
-        }
-        hoverBubbleOpacity(particle, ratio, divBubble) {
-            var _a, _b, _c;
-            const container = this.container, options = container.actualOptions, modeOpacity = (_a = divBubble === null || divBubble === void 0 ? void 0 : divBubble.opacity) !== null && _a !== void 0 ? _a : options.interactivity.modes.bubble.opacity;
-            if (!modeOpacity) {
-                return;
-            }
-            const optOpacity = particle.options.opacity.value;
-            const pOpacity = (_c = (_b = particle.opacity) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : 1;
-            const opacity = calculateBubbleValue(pOpacity, modeOpacity, (0, tsparticles_engine_1.getRangeMax)(optOpacity), ratio);
-            if (opacity !== undefined) {
-                particle.bubble.opacity = opacity;
-            }
-        }
         hoverBubbleColor(particle, ratio, divBubble) {
@@ -284,4 +189,101 @@ const options = this.container.actualOptions;
         }
+        hoverBubbleOpacity(particle, ratio, divBubble) {
+            var _a, _b, _c;
+            const container = this.container, options = container.actualOptions, modeOpacity = (_a = divBubble === null || divBubble === void 0 ? void 0 : divBubble.opacity) !== null && _a !== void 0 ? _a : options.interactivity.modes.bubble.opacity;
+            if (!modeOpacity) {
+                return;
+            }
+            const optOpacity = particle.options.opacity.value;
+            const pOpacity = (_c = (_b = particle.opacity) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : 1;
+            const opacity = calculateBubbleValue(pOpacity, modeOpacity, (0, tsparticles_engine_1.getRangeMax)(optOpacity), ratio);
+            if (opacity !== undefined) {
+                particle.bubble.opacity = opacity;
+            }
+        }
+        hoverBubbleSize(particle, ratio, divBubble) {
+            const container = this.container, modeSize = (divBubble === null || divBubble === void 0 ? void 0 : divBubble.size) ? divBubble.size * container.retina.pixelRatio : container.retina.bubbleModeSize;
+            if (modeSize === undefined) {
+                return;
+            }
+            const optSize = (0, tsparticles_engine_1.getRangeMax)(particle.options.size.value) * container.retina.pixelRatio;
+            const pSize = particle.size.value;
+            const 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;
+            if (bubbleParam === undefined) {
+                return;
+            }
+            const options = container.actualOptions, bubbleDuration = options.interactivity.modes.bubble.duration, bubbleDistance = container.retina.bubbleModeDistance, particlesParam = data.particlesObj.optValue, pObjBubble = data.bubbleObj.value, pObj = data.particlesObj.value || 0, type = data.type;
+            if (bubbleParam === particlesParam) {
+                return;
+            }
+            if (!container.bubble) {
+                container.bubble = {};
+            }
+            if (!container.bubble.durationEnd) {
+                if (distMouse <= bubbleDistance) {
+                    const obj = pObjBubble !== null && pObjBubble !== void 0 ? pObjBubble : pObj;
+                    if (obj !== bubbleParam) {
+                        const value = pObj - (timeSpent * (pObj - bubbleParam)) / bubbleDuration;
+                        if (type === "size") {
+                            particle.bubble.radius = value;
+                        }
+                        if (type === "opacity") {
+                            particle.bubble.opacity = value;
+                        }
+                    }
+                }
+                else {
+                    if (type === "size") {
+                        delete particle.bubble.radius;
+                    }
+                    if (type === "opacity") {
+                        delete particle.bubble.opacity;
+                    }
+                }
+            }
+            else if (pObjBubble) {
+                if (type === "size") {
+                    delete particle.bubble.radius;
+                }
+                if (type === "opacity") {
+                    delete particle.bubble.opacity;
+                }
+            }
+        }
+        singleSelectorHover(selector, div) {
+            const container = this.container, selectors = document.querySelectorAll(selector);
+            if (!selectors.length) {
+                return;
+            }
+            selectors.forEach((item) => {
+                const elem = item, pxRatio = container.retina.pixelRatio, pos = {
+                    x: (elem.offsetLeft + elem.offsetWidth / 2) * pxRatio,
+                    y: (elem.offsetTop + elem.offsetHeight / 2) * pxRatio,
+                }, repulseRadius = (elem.offsetWidth / 2) * pxRatio, area = div.type === "circle"
+                    ? new tsparticles_engine_1.Circle(pos.x, pos.y, repulseRadius)
+                    : new tsparticles_engine_1.Rectangle(elem.offsetLeft * pxRatio, elem.offsetTop * pxRatio, elem.offsetWidth * pxRatio, elem.offsetHeight * pxRatio), query = container.particles.quadTree.query(area, (p) => this.isEnabled(p));
+                for (const particle of query) {
+                    if (!area.contains(particle.getPosition())) {
+                        continue;
+                    }
+                    particle.bubble.inRange = true;
+                    const divs = container.actualOptions.interactivity.modes.bubble.divs;
+                    const divBubble = (0, tsparticles_engine_1.divMode)(divs, elem);
+                    if (!particle.bubble.div || particle.bubble.div !== elem) {
+                        this.clear(particle, true);
+                        particle.bubble.div = elem;
+                    }
+                    this.hoverBubbleSize(particle, 1, divBubble);
+                    this.hoverBubbleOpacity(particle, 1, divBubble);
+                    this.hoverBubbleColor(particle, 1, divBubble);
+                }
+            });
+        }
     }
     exports.Bubbler = Bubbler;
 });

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

363282

increased by0.04%

Lines of code

1671

increased by0.72%

Dependency changes

• Updatedtsparticles-engine@^2.1.1