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

package/types/Bubbler.d.ts

@@ -1,6 +1,5 @@
 import type { BubbleContainer, BubbleMode, IBubbleMode } from "./Types";
-import { ClickMode, ExternalInteractorBase } from "@tsparticles/engine";
-import type { IDelta, IModes, Modes, Particle, RecursivePartial } from "@tsparticles/engine";
+import { ClickMode, ExternalInteractorBase, type IDelta, type IModes, type Modes, type Particle, type RecursivePartial } from "@tsparticles/engine";
 export declare class Bubbler extends ExternalInteractorBase<BubbleContainer> {
     handleClickMode: (mode: ClickMode | string) => void;
     constructor(container: BubbleContainer);
@@ -10,11 +9,11 @@ export declare class Bubbler extends ExternalInteractorBase<BubbleContainer> {
     isEnabled(particle?: Particle): boolean;
     loadModeOptions(options: Modes & BubbleMode, ...sources: RecursivePartial<(IModes & IBubbleMode) | undefined>[]): void;
     reset(particle: Particle): void;
-    private clickBubble;
-    private hoverBubble;
-    private hoverBubbleColor;
-    private hoverBubbleOpacity;
-    private hoverBubbleSize;
-    private process;
-    private singleSelectorHover;
+    private readonly _clickBubble;
+    private readonly _hoverBubble;
+    private readonly _hoverBubbleColor;
+    private readonly _hoverBubbleOpacity;
+    private readonly _hoverBubbleSize;
+    private readonly _process;
+    private readonly _singleSelectorHover;
 }

package/types/{IBubblerProcessParam.d.ts → Interfaces.d.ts}

@@ -1,5 +1,5 @@
-import type { ProcessBubbleType } from "./ProcessBubbleType";
-export interface IBubblerProcessParam {
+import type { ProcessBubbleType } from "./Enums";
+export interface Interfaces {
     bubbleObj: IBubblerProcessParamObj;
     particlesObj: IBubblerProcessParamObj;
     type: ProcessBubbleType;

package/types/Options/Classes/Bubble.d.ts

@@ -1,4 +1,4 @@
-import type { IOptionLoader, RecursivePartial, SingleOrMultiple } from "@tsparticles/engine";
+import { type IOptionLoader, type RecursivePartial, type SingleOrMultiple } from "@tsparticles/engine";
 import { BubbleBase } from "./BubbleBase";
 import { BubbleDiv } from "./BubbleDiv";
 import type { IBubble } from "../Interfaces/IBubble";

package/types/Options/Classes/BubbleBase.d.ts

@@ -1,5 +1,4 @@
-import type { IOptionLoader, RecursivePartial, SingleOrMultiple } from "@tsparticles/engine";
-import { OptionsColor } from "@tsparticles/engine";
+import { type IOptionLoader, OptionsColor, type RecursivePartial, type SingleOrMultiple } from "@tsparticles/engine";
 import type { IBubbleBase } from "../Interfaces/IBubbleBase";
 export declare abstract class BubbleBase implements IBubbleBase, IOptionLoader<IBubbleBase> {
     color?: SingleOrMultiple<OptionsColor>;

package/types/Options/Classes/BubbleDiv.d.ts

@@ -1,10 +1,8 @@
-import type { IOptionLoader, RecursivePartial, SingleOrMultiple } from "@tsparticles/engine";
+import { type IOptionLoader, type RecursivePartial, type SingleOrMultiple } from "@tsparticles/engine";
 import { BubbleBase } from "./BubbleBase";
 import type { IBubbleDiv } from "../Interfaces/IBubbleDiv";
 export declare class BubbleDiv extends BubbleBase implements IBubbleDiv, IOptionLoader<IBubbleDiv> {
     selectors: SingleOrMultiple<string>;
     constructor();
-    get ids(): SingleOrMultiple<string>;
-    set ids(value: SingleOrMultiple<string>);
     load(data?: RecursivePartial<IBubbleDiv>): void;
 }

package/types/Utils.d.ts

@@ -0,0 +1 @@
+export declare function calculateBubbleValue(particleValue: number, modeValue: number, optionsValue: number, ratio: number): number | undefined;

package/types/index.d.ts

@@ -1,5 +1,5 @@
 import type { Engine } from "@tsparticles/engine";
-export declare function loadExternalBubbleInteraction(engine: Engine): Promise<void>;
+export declare function loadExternalBubbleInteraction(engine: Engine, refresh?: boolean): Promise<void>;
 export * from "./Options/Classes/BubbleBase";
 export * from "./Options/Classes/BubbleDiv";
 export * from "./Options/Classes/Bubble";

package/umd/Bubbler.js

@@ -4,7 +4,7 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "@tsparticles/engine", "./Options/Classes/Bubble"], factory);
+        define(["require", "exports", "@tsparticles/engine", "./Options/Classes/Bubble", "./Utils"], factory);
     }
 })(function (require, exports) {
     "use strict";
@@ -12,19 +12,212 @@
     exports.Bubbler = void 0;
     const engine_1 = require("@tsparticles/engine");
     const Bubble_1 = require("./Options/Classes/Bubble");
-    function calculateBubbleValue(particleValue, modeValue, optionsValue, ratio) {
-        if (modeValue >= optionsValue) {
-            const value = particleValue + (modeValue - optionsValue) * ratio;
-            return (0, engine_1.clamp)(value, particleValue, modeValue);
-        }
-        else if (modeValue < optionsValue) {
-            const value = particleValue - (optionsValue - modeValue) * ratio;
-            return (0, engine_1.clamp)(value, modeValue, particleValue);
-        }
-    }
+    const Utils_1 = require("./Utils");
     class Bubbler extends engine_1.ExternalInteractorBase {
         constructor(container) {
             super(container);
+            this._clickBubble = () => {
+                const container = this.container, options = container.actualOptions, mouseClickPos = container.interactivity.mouse.clickPosition, bubbleOptions = options.interactivity.modes.bubble;
+                if (!bubbleOptions || !mouseClickPos) {
+                    return;
+                }
+                if (!container.bubble) {
+                    container.bubble = {};
+                }
+                const distance = container.retina.bubbleModeDistance;
+                if (!distance || distance < 0) {
+                    return;
+                }
+                const query = container.particles.quadTree.queryCircle(mouseClickPos, distance, (p) => this.isEnabled(p)), { bubble } = container;
+                for (const particle of query) {
+                    if (!bubble.clicking) {
+                        continue;
+                    }
+                    particle.bubble.inRange = !bubble.durationEnd;
+                    const pos = particle.getPosition(), distMouse = (0, engine_1.getDistance)(pos, mouseClickPos), timeSpent = (new Date().getTime() - (container.interactivity.mouse.clickTime || 0)) / 1000;
+                    if (timeSpent > bubbleOptions.duration) {
+                        bubble.durationEnd = true;
+                    }
+                    if (timeSpent > bubbleOptions.duration * 2) {
+                        bubble.clicking = false;
+                        bubble.durationEnd = false;
+                    }
+                    const sizeData = {
+                        bubbleObj: {
+                            optValue: container.retina.bubbleModeSize,
+                            value: particle.bubble.radius,
+                        },
+                        particlesObj: {
+                            optValue: (0, engine_1.getRangeMax)(particle.options.size.value) * container.retina.pixelRatio,
+                            value: particle.size.value,
+                        },
+                        type: "size",
+                    };
+                    this._process(particle, distMouse, timeSpent, sizeData);
+                    const opacityData = {
+                        bubbleObj: {
+                            optValue: bubbleOptions.opacity,
+                            value: particle.bubble.opacity,
+                        },
+                        particlesObj: {
+                            optValue: (0, engine_1.getRangeMax)(particle.options.opacity.value),
+                            value: particle.opacity?.value ?? 1,
+                        },
+                        type: "opacity",
+                    };
+                    this._process(particle, distMouse, timeSpent, opacityData);
+                    if (!bubble.durationEnd && distMouse <= distance) {
+                        this._hoverBubbleColor(particle, distMouse);
+                    }
+                    else {
+                        delete particle.bubble.color;
+                    }
+                }
+            };
+            this._hoverBubble = () => {
+                const container = this.container, mousePos = container.interactivity.mouse.position, distance = container.retina.bubbleModeDistance;
+                if (!distance || distance < 0 || mousePos === undefined) {
+                    return;
+                }
+                const query = container.particles.quadTree.queryCircle(mousePos, distance, (p) => this.isEnabled(p));
+                for (const particle of query) {
+                    particle.bubble.inRange = true;
+                    const pos = particle.getPosition(), pointDistance = (0, engine_1.getDistance)(pos, mousePos), ratio = 1 - pointDistance / distance;
+                    if (pointDistance <= distance) {
+                        if (ratio >= 0 && container.interactivity.status === engine_1.mouseMoveEvent) {
+                            this._hoverBubbleSize(particle, ratio);
+                            this._hoverBubbleOpacity(particle, ratio);
+                            this._hoverBubbleColor(particle, ratio);
+                        }
+                    }
+                    else {
+                        this.reset(particle);
+                    }
+                    if (container.interactivity.status === engine_1.mouseLeaveEvent) {
+                        this.reset(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 = (0, engine_1.itemFromSingleOrMultiple)(modeColor);
+                    particle.bubble.finalColor = (0, engine_1.rangeColorToHsl)(bubbleColor);
+                }
+                if (!particle.bubble.finalColor) {
+                    return;
+                }
+                if (bubbleOptions.mix) {
+                    particle.bubble.color = undefined;
+                    const pColor = particle.getFillColor();
+                    particle.bubble.color = pColor
+                        ? (0, engine_1.rgbToHsl)((0, engine_1.colorMix)(pColor, particle.bubble.finalColor, 1 - ratio, ratio))
+                        : 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 ?? 1, opacity = (0, Utils_1.calculateBubbleValue)(pOpacity, modeOpacity, (0, engine_1.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 = (0, engine_1.getRangeMax)(particle.options.size.value) * container.retina.pixelRatio, pSize = particle.size.value, size = (0, Utils_1.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 || 0, type = data.type;
+                if (!bubbleDistance || bubbleDistance < 0 || bubbleParam === particlesParam) {
+                    return;
+                }
+                if (!container.bubble) {
+                    container.bubble = {};
+                }
+                if (container.bubble.durationEnd) {
+                    if (pObjBubble) {
+                        if (type === "size") {
+                            delete particle.bubble.radius;
+                        }
+                        if (type === "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 === "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;
+                        }
+                    }
+                }
+            };
+            this._singleSelectorHover = (delta, selector, div) => {
+                const container = this.container, selectors = document.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 / 2) * pxRatio,
+                        y: (elem.offsetTop + elem.offsetHeight / 2) * pxRatio,
+                    }, repulseRadius = (elem.offsetWidth / 2) * pxRatio, area = div.type === "circle"
+                        ? new engine_1.Circle(pos.x, pos.y, repulseRadius)
+                        : new engine_1.Rectangle(elem.offsetLeft * pxRatio, elem.offsetTop * pxRatio, elem.offsetWidth * pxRatio, elem.offsetHeight * pxRatio), query = container.particles.quadTree.query(area, (p) => this.isEnabled(p));
+                    for (const particle of query) {
+                        if (!area.contains(particle.getPosition())) {
+                            continue;
+                        }
+                        particle.bubble.inRange = true;
+                        const divs = bubble.divs, divBubble = (0, engine_1.divMode)(divs, elem);
+                        if (!particle.bubble.div || particle.bubble.div !== elem) {
+                            this.clear(particle, delta, true);
+                            particle.bubble.div = elem;
+                        }
+                        this._hoverBubbleSize(particle, 1, divBubble);
+                        this._hoverBubbleOpacity(particle, 1, divBubble);
+                        this._hoverBubbleColor(particle, 1, divBubble);
+                    }
+                });
+            };
             if (!container.bubble) {
                 container.bubble = {};
             }
@@ -60,249 +253,33 @@
         async interact(delta) {
             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;
             if (hoverEnabled && (0, engine_1.isInArray)("bubble", hoverMode)) {
-                this.hoverBubble(delta);
+                this._hoverBubble();
             }
             else if (clickEnabled && (0, engine_1.isInArray)("bubble", clickMode)) {
-                this.clickBubble(delta);
+                this._clickBubble();
             }
             else {
-                (0, engine_1.divModeExecute)("bubble", divs, (selector, div) => this.singleSelectorHover(delta, selector, div));
+                (0, engine_1.divModeExecute)("bubble", divs, (selector, div) => this._singleSelectorHover(delta, selector, div));
             }
         }
         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, engine_1.isDivModeEnabled)("bubble", divs);
-            if (!(divBubble || (events.onHover.enable && mouse.position) || (events.onClick.enable && mouse.clickPosition))) {
+            const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse, events = (particle?.interactivity ?? options.interactivity).events, { onClick, onDiv, onHover } = events, divBubble = (0, engine_1.isDivModeEnabled)("bubble", onDiv);
+            if (!(divBubble || (onHover.enable && mouse.position) || (onClick.enable && mouse.clickPosition))) {
                 return false;
             }
-            const hoverMode = events.onHover.mode;
-            const clickMode = events.onClick.mode;
-            return (0, engine_1.isInArray)("bubble", hoverMode) || (0, engine_1.isInArray)("bubble", clickMode) || divBubble;
+            return (0, engine_1.isInArray)("bubble", onHover.mode) || (0, engine_1.isInArray)("bubble", onClick.mode) || divBubble;
         }
         loadModeOptions(options, ...sources) {
             if (!options.bubble) {
                 options.bubble = new Bubble_1.Bubble();
             }
             for (const source of sources) {
-                options.bubble.load(source === null || source === void 0 ? void 0 : source.bubble);
+                options.bubble.load(source?.bubble);
             }
         }
         reset(particle) {
             particle.bubble.inRange = false;
         }
-        clickBubble(delta) {
-            var _a, _b;
-            const container = this.container, options = container.actualOptions, mouseClickPos = container.interactivity.mouse.clickPosition, bubble = options.interactivity.modes.bubble;
-            if (!bubble || !mouseClickPos) {
-                return;
-            }
-            if (!container.bubble) {
-                container.bubble = {};
-            }
-            const distance = container.retina.bubbleModeDistance;
-            if (!distance || distance < 0) {
-                return;
-            }
-            const query = container.particles.quadTree.queryCircle(mouseClickPos, distance, (p) => this.isEnabled(p));
-            for (const particle of query) {
-                if (!container.bubble.clicking) {
-                    continue;
-                }
-                particle.bubble.inRange = !container.bubble.durationEnd;
-                const pos = particle.getPosition(), distMouse = (0, engine_1.getDistance)(pos, mouseClickPos), timeSpent = (new Date().getTime() - (container.interactivity.mouse.clickTime || 0)) / 1000;
-                if (timeSpent > bubble.duration) {
-                    container.bubble.durationEnd = true;
-                }
-                if (timeSpent > bubble.duration * 2) {
-                    container.bubble.clicking = false;
-                    container.bubble.durationEnd = false;
-                }
-                const sizeData = {
-                    bubbleObj: {
-                        optValue: container.retina.bubbleModeSize,
-                        value: particle.bubble.radius,
-                    },
-                    particlesObj: {
-                        optValue: (0, engine_1.getRangeMax)(particle.options.size.value) * container.retina.pixelRatio,
-                        value: particle.size.value,
-                    },
-                    type: "size",
-                };
-                this.process(particle, distMouse, timeSpent, sizeData);
-                const opacityData = {
-                    bubbleObj: {
-                        optValue: bubble.opacity,
-                        value: particle.bubble.opacity,
-                    },
-                    particlesObj: {
-                        optValue: (0, engine_1.getRangeMax)(particle.options.opacity.value),
-                        value: (_b = (_a = particle.opacity) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 1,
-                    },
-                    type: "opacity",
-                };
-                this.process(particle, distMouse, timeSpent, opacityData);
-                if (!container.bubble.durationEnd) {
-                    if (distMouse <= distance) {
-                        this.hoverBubbleColor(particle, distMouse);
-                    }
-                    else {
-                        delete particle.bubble.color;
-                    }
-                }
-                else {
-                    delete particle.bubble.color;
-                }
-            }
-        }
-        hoverBubble(delta) {
-            const container = this.container, mousePos = container.interactivity.mouse.position, distance = container.retina.bubbleModeDistance;
-            if (!distance || distance < 0 || mousePos === undefined) {
-                return;
-            }
-            const query = container.particles.quadTree.queryCircle(mousePos, distance, (p) => this.isEnabled(p));
-            for (const particle of query) {
-                particle.bubble.inRange = true;
-                const pos = particle.getPosition(), pointDistance = (0, engine_1.getDistance)(pos, mousePos), ratio = 1 - pointDistance / distance;
-                if (pointDistance <= distance) {
-                    if (ratio >= 0 && container.interactivity.status === engine_1.mouseMoveEvent) {
-                        this.hoverBubbleSize(particle, ratio);
-                        this.hoverBubbleOpacity(particle, ratio);
-                        this.hoverBubbleColor(particle, ratio);
-                    }
-                }
-                else {
-                    this.reset(particle);
-                }
-                if (container.interactivity.status === engine_1.mouseLeaveEvent) {
-                    this.reset(particle);
-                }
-            }
-        }
-        hoverBubbleColor(particle, ratio, divBubble) {
-            const options = this.container.actualOptions;
-            const bubbleOptions = divBubble !== null && divBubble !== void 0 ? divBubble : options.interactivity.modes.bubble;
-            if (!bubbleOptions) {
-                return;
-            }
-            if (!particle.bubble.finalColor) {
-                const modeColor = bubbleOptions.color;
-                if (!modeColor) {
-                    return;
-                }
-                const bubbleColor = (0, engine_1.itemFromSingleOrMultiple)(modeColor);
-                particle.bubble.finalColor = (0, engine_1.rangeColorToHsl)(bubbleColor);
-            }
-            if (!particle.bubble.finalColor) {
-                return;
-            }
-            if (bubbleOptions.mix) {
-                particle.bubble.color = undefined;
-                const pColor = particle.getFillColor();
-                particle.bubble.color = pColor
-                    ? (0, engine_1.rgbToHsl)((0, engine_1.colorMix)(pColor, particle.bubble.finalColor, 1 - ratio, ratio))
-                    : particle.bubble.finalColor;
-            }
-            else {
-                particle.bubble.color = particle.bubble.finalColor;
-            }
-        }
-        hoverBubbleOpacity(particle, ratio, divBubble) {
-            var _a, _b, _c, _d;
-            const container = this.container, options = container.actualOptions, modeOpacity = (_a = divBubble === null || divBubble === void 0 ? void 0 : divBubble.opacity) !== null && _a !== void 0 ? _a : (_b = options.interactivity.modes.bubble) === null || _b === void 0 ? void 0 : _b.opacity;
-            if (!modeOpacity) {
-                return;
-            }
-            const optOpacity = particle.options.opacity.value;
-            const pOpacity = (_d = (_c = particle.opacity) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : 1;
-            const opacity = calculateBubbleValue(pOpacity, modeOpacity, (0, 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, 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, options = container.actualOptions, bubble = options.interactivity.modes.bubble;
-            if (!bubble || bubbleParam === undefined) {
-                return;
-            }
-            const bubbleDuration = bubble.duration, bubbleDistance = container.retina.bubbleModeDistance, particlesParam = data.particlesObj.optValue, pObjBubble = data.bubbleObj.value, pObj = data.particlesObj.value || 0, type = data.type;
-            if (!bubbleDistance || bubbleDistance < 0 || bubbleParam === particlesParam) {
-                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(delta, selector, div) {
-            const container = this.container, selectors = document.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 / 2) * pxRatio,
-                    y: (elem.offsetTop + elem.offsetHeight / 2) * pxRatio,
-                }, repulseRadius = (elem.offsetWidth / 2) * pxRatio, area = div.type === "circle"
-                    ? new engine_1.Circle(pos.x, pos.y, repulseRadius)
-                    : new engine_1.Rectangle(elem.offsetLeft * pxRatio, elem.offsetTop * pxRatio, elem.offsetWidth * pxRatio, elem.offsetHeight * pxRatio), query = container.particles.quadTree.query(area, (p) => this.isEnabled(p));
-                for (const particle of query) {
-                    if (!area.contains(particle.getPosition())) {
-                        continue;
-                    }
-                    particle.bubble.inRange = true;
-                    const divs = bubble.divs;
-                    const divBubble = (0, engine_1.divMode)(divs, elem);
-                    if (!particle.bubble.div || particle.bubble.div !== elem) {
-                        this.clear(particle, delta, true);
-                        particle.bubble.div = elem;
-                    }
-                    this.hoverBubbleSize(particle, 1, divBubble);
-                    this.hoverBubbleOpacity(particle, 1, divBubble);
-                    this.hoverBubbleColor(particle, 1, divBubble);
-                }
-            });
-        }
     }
     exports.Bubbler = Bubbler;
 });

package/umd/Options/Classes/Bubble.js

@@ -4,15 +4,15 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./BubbleBase", "./BubbleDiv", "@tsparticles/engine"], factory);
+        define(["require", "exports", "@tsparticles/engine", "./BubbleBase", "./BubbleDiv"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.Bubble = void 0;
+    const engine_1 = require("@tsparticles/engine");
     const BubbleBase_1 = require("./BubbleBase");
     const BubbleDiv_1 = require("./BubbleDiv");
-    const engine_1 = require("@tsparticles/engine");
     class Bubble extends BubbleBase_1.BubbleBase {
         load(data) {
             super.load(data);

package/umd/Options/Classes/BubbleBase.js

@@ -34,7 +34,7 @@
                 this.opacity = data.opacity;
             }
             if (data.color !== undefined) {
-                const sourceColor = this.color instanceof Array ? undefined : this.color;
+                const sourceColor = (0, engine_1.isArray)(this.color) ? undefined : this.color;
                 this.color = (0, engine_1.executeOnSingleOrMultiple)(data.color, (color) => {
                     return engine_1.OptionsColor.create(sourceColor, color);
                 });

package/umd/Options/Classes/BubbleDiv.js

@@ -4,33 +4,23 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./BubbleBase", "@tsparticles/engine"], factory);
+        define(["require", "exports", "./BubbleBase"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.BubbleDiv = void 0;
     const BubbleBase_1 = require("./BubbleBase");
-    const engine_1 = require("@tsparticles/engine");
     class BubbleDiv extends BubbleBase_1.BubbleBase {
         constructor() {
             super();
             this.selectors = [];
         }
-        get ids() {
-            return (0, engine_1.executeOnSingleOrMultiple)(this.selectors, (t) => t.replace("#", ""));
-        }
-        set ids(value) {
-            this.selectors = (0, engine_1.executeOnSingleOrMultiple)(value, (t) => `#${t}`);
-        }
         load(data) {
             super.load(data);
             if (!data) {
                 return;
             }
-            if (data.ids !== undefined) {
-                this.ids = data.ids;
-            }
             if (data.selectors !== undefined) {
                 this.selectors = data.selectors;
             }

package/umd/Utils.js

@@ -0,0 +1,25 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports", "@tsparticles/engine"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.calculateBubbleValue = void 0;
+    const engine_1 = require("@tsparticles/engine");
+    function calculateBubbleValue(particleValue, modeValue, optionsValue, ratio) {
+        if (modeValue >= optionsValue) {
+            const value = particleValue + (modeValue - optionsValue) * ratio;
+            return (0, engine_1.clamp)(value, particleValue, modeValue);
+        }
+        else if (modeValue < optionsValue) {
+            const value = particleValue - (optionsValue - modeValue) * ratio;
+            return (0, engine_1.clamp)(value, modeValue, particleValue);
+        }
+    }
+    exports.calculateBubbleValue = calculateBubbleValue;
+});