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

package/477.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_interaction_external_bubble=this.webpackChunk_tsparticles_interaction_external_bubble||[]).push([[477],{477(e,i,t){t.d(i,{Bubbler:()=>u});var l,b,o=t(303),a=t(702),n=t(552);function r(e,i,t,l){return i>=t?(0,o.clamp)(e+(i-t)*l,e,i):i<t?(0,o.clamp)(e-(t-i)*l,i,e):void 0}(l=b||(b={})).color="color",l.opacity="opacity",l.size="size";let s="bubble";class u extends a.ExternalInteractorBase{handleClickMode;_engine;constructor(e,i){super(i),this._engine=e,i.bubble??={},this.handleClickMode=e=>{e===s&&(i.bubble??={},i.bubble.clicking=!0)}}clear(e,i,t){(!e.bubble.inRange||t)&&(delete e.bubble.div,delete e.bubble.opacity,delete e.bubble.radius,delete e.bubble.color)}init(){let e=this.container,i=e.actualOptions.interactivity?.modes.bubble;i&&(e.retina.bubbleModeDistance=i.distance*e.retina.pixelRatio,void 0!==i.size&&(e.retina.bubbleModeSize=i.size*e.retina.pixelRatio))}interact(e,i){let t=this.container.actualOptions,l=t.interactivity?.events;if(!l)return;let b=l.onHover,n=l.onClick,r=b.enable,u=b.mode,c=n.enable,d=n.mode,p=l.onDiv;r&&(0,o.isInArray)(s,u)?this._hoverBubble(e):c&&(0,o.isInArray)(s,d)?this._clickBubble(e):(0,a.divModeExecute)(s,p,(t,l)=>{this._singleSelectorHover(e,i,t,l)})}isEnabled(e,i){let t=this.container.actualOptions,l=e.mouse,b=(i?.interactivity??t.interactivity)?.events;if(!b)return!1;let{onClick:n,onDiv:r,onHover:u}=b,c=(0,a.isDivModeEnabled)(s,r);return!!(c||u.enable&&l.position||n.enable&&l.clickPosition)&&((0,o.isInArray)(s,u.mode)||(0,o.isInArray)(s,n.mode)||c)}loadModeOptions(e,...i){for(let t of(e.bubble??=new n.Z,i))e.bubble.load(t?.bubble)}reset(e,i){i.bubble.inRange=!1}_clickBubble=e=>{let i=this.container,t=i.actualOptions,l=e.mouse.clickPosition,a=t.interactivity?.modes.bubble;if(!a||!l)return;i.bubble??={};let n=i.retina.bubbleModeDistance;if(!n||n<0)return;let r=i.particles.quadTree.queryCircle(l,n,i=>this.isEnabled(e,i)),{bubble:s}=i;for(let t of r){if(!s.clicking)continue;t.bubble.inRange=!s.durationEnd;let r=t.getPosition(),u=(0,o.getDistance)(r,l),c=(performance.now()-(e.mouse.clickTime??0))/o.millisecondsToSeconds;c>a.duration&&(s.durationEnd=!0),c>a.duration*o.double&&(s.clicking=!1,s.durationEnd=!1);let d={bubbleObj:{optValue:i.retina.bubbleModeSize,value:t.bubble.radius},particlesObj:{optValue:(0,o.getRangeMax)(t.options.size.value)*i.retina.pixelRatio,value:t.size.value},type:b.size};this._process(t,u,c,d);let p={bubbleObj:{optValue:a.opacity,value:t.bubble.opacity},particlesObj:{optValue:(0,o.getRangeMax)(t.options.opacity.value),value:t.opacity?.value??1},type:b.opacity};this._process(t,u,c,p),!s.durationEnd&&u<=n?this._hoverBubbleColor(t,u):delete t.bubble.color}};_hoverBubble=e=>{let i=this.container,t=e.mouse.position,l=i.retina.bubbleModeDistance;if(l&&!(l<0)&&t)for(let b of i.particles.quadTree.queryCircle(t,l,i=>this.isEnabled(e,i))){b.bubble.inRange=!0;let i=b.getPosition(),n=(0,o.getDistance)(i,t),r=1-n/l;n<=l?r>=0&&e.status===a.mouseMoveEvent&&(this._hoverBubbleSize(b,r),this._hoverBubbleOpacity(b,r),this._hoverBubbleColor(b,r)):this.reset(e,b),e.status===a.mouseLeaveEvent&&this.reset(e,b)}};_hoverBubbleColor=(e,i,t)=>{let l=this.container.actualOptions,b=t??l.interactivity?.modes.bubble;if(b){if(!e.bubble.finalColor){let i=b.color;if(!i)return;let t=(0,o.itemFromSingleOrMultiple)(i);e.bubble.finalColor=(0,o.rangeColorToHsl)(this._engine,t)}if(e.bubble.finalColor)if(b.mix){e.bubble.color=void 0;let t=e.getFillColor();e.bubble.color=t?(0,o.rgbToHsl)((0,o.colorMix)(t,e.bubble.finalColor,1-i,i)):e.bubble.finalColor}else e.bubble.color=e.bubble.finalColor}};_hoverBubbleOpacity=(e,i,t)=>{let l=this.container.actualOptions,b=t?.opacity??l.interactivity?.modes.bubble?.opacity;if(!b)return;let a=e.options.opacity.value,n=r(e.opacity?.value??1,b,(0,o.getRangeMax)(a),i);void 0!==n&&(e.bubble.opacity=n)};_hoverBubbleSize=(e,i,t)=>{let l=this.container,b=t?.size?t.size*l.retina.pixelRatio:l.retina.bubbleModeSize;if(void 0===b)return;let a=(0,o.getRangeMax)(e.options.size.value)*l.retina.pixelRatio,n=r(e.size.value,b,a,i);void 0!==n&&(e.bubble.radius=n)};_process=(e,i,t,l)=>{let o=this.container,a=l.bubbleObj.optValue,n=o.actualOptions,r=n.interactivity?.modes.bubble;if(!r||void 0===a)return;let s=r.duration,u=o.retina.bubbleModeDistance,c=l.particlesObj.optValue,d=l.bubbleObj.value,p=l.particlesObj.value??0,v=l.type;if(u&&!(u<0)&&a!==c)if(o.bubble??={},o.bubble.durationEnd)d&&(v===b.size&&delete e.bubble.radius,v===b.opacity&&delete e.bubble.opacity);else if(i<=u){if((d??p)!==a){let i=p-t*(p-a)/s;v===b.size&&(e.bubble.radius=i),v===b.opacity&&(e.bubble.opacity=i)}}else v===b.size&&delete e.bubble.radius,v===b.opacity&&delete e.bubble.opacity};_singleSelectorHover=(e,i,t,l)=>{let b=this.container,n=(0,o.safeDocument)().querySelectorAll(t),r=b.actualOptions.interactivity?.modes.bubble;r&&n.length&&n.forEach(t=>{let n=b.retina.pixelRatio,s={x:(t.offsetLeft+t.offsetWidth*o.half)*n,y:(t.offsetTop+t.offsetHeight*o.half)*n},u=t.offsetWidth*o.half*n,c=l.type===a.DivType.circle?new o.Circle(s.x,s.y,u):new o.Rectangle(t.offsetLeft*n,t.offsetTop*n,t.offsetWidth*n,t.offsetHeight*n);for(let l of b.particles.quadTree.query(c,i=>this.isEnabled(e,i))){if(!c.contains(l.getPosition()))continue;l.bubble.inRange=!0;let e=r.divs,b=(0,a.divMode)(e,t);l.bubble.div&&l.bubble.div===t||(this.clear(l,i,!0),l.bubble.div=t),this._hoverBubbleSize(l,1,b),this._hoverBubbleOpacity(l,1,b),this._hoverBubbleColor(l,1,b)}})}}}}]);

package/browser/Bubbler.js

@@ -1,210 +1,14 @@
-import { Circle, DivType, ExternalInteractorBase, Rectangle, colorMix, divMode, divModeExecute, getDistance, getRangeMax, isDivModeEnabled, isInArray, itemFromSingleOrMultiple, millisecondsToSeconds, mouseLeaveEvent, mouseMoveEvent, rangeColorToHsl, rgbToHsl, safeDocument, } from "@tsparticles/engine";
+import { Circle, Rectangle, colorMix, double, getDistance, getRangeMax, half, isInArray, itemFromSingleOrMultiple, millisecondsToSeconds, rangeColorToHsl, rgbToHsl, safeDocument, } from "@tsparticles/engine";
+import { DivType, ExternalInteractorBase, divMode, divModeExecute, isDivModeEnabled, mouseLeaveEvent, mouseMoveEvent, } from "@tsparticles/plugin-interactivity";
 import { Bubble } from "./Options/Classes/Bubble.js";
 import { ProcessBubbleType } from "./Enums.js";
 import { calculateBubbleValue } from "./Utils.js";
-const bubbleMode = "bubble", minDistance = 0, defaultClickTime = 0, double = 2, defaultOpacity = 1, ratioOffset = 1, defaultBubbleValue = 0, minRatio = 0, half = 0.5, defaultRatio = 1;
+const bubbleMode = "bubble", minDistance = 0, defaultClickTime = 0, defaultOpacity = 1, ratioOffset = 1, defaultBubbleValue = 0, minRatio = 0, defaultRatio = 1;
 export class Bubbler extends ExternalInteractorBase {
+    handleClickMode;
+    _engine;
     constructor(engine, 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;
-            }
-            container.bubble ??= {};
-            const distance = container.retina.bubbleModeDistance;
-            if (!distance || distance < minDistance) {
-                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 = getDistance(pos, mouseClickPos), timeSpent = (new Date().getTime() - (container.interactivity.mouse.clickTime ?? defaultClickTime)) /
-                    millisecondsToSeconds;
-                if (timeSpent > bubbleOptions.duration) {
-                    bubble.durationEnd = true;
-                }
-                if (timeSpent > bubbleOptions.duration * double) {
-                    bubble.clicking = false;
-                    bubble.durationEnd = false;
-                }
-                const sizeData = {
-                    bubbleObj: {
-                        optValue: container.retina.bubbleModeSize,
-                        value: particle.bubble.radius,
-                    },
-                    particlesObj: {
-                        optValue: getRangeMax(particle.options.size.value) * container.retina.pixelRatio,
-                        value: particle.size.value,
-                    },
-                    type: ProcessBubbleType.size,
-                };
-                this._process(particle, distMouse, timeSpent, sizeData);
-                const opacityData = {
-                    bubbleObj: {
-                        optValue: bubbleOptions.opacity,
-                        value: particle.bubble.opacity,
-                    },
-                    particlesObj: {
-                        optValue: getRangeMax(particle.options.opacity.value),
-                        value: particle.opacity?.value ?? defaultOpacity,
-                    },
-                    type: ProcessBubbleType.opacity,
-                };
-                this._process(particle, distMouse, timeSpent, opacityData);
-                if (!bubble.durationEnd && distMouse <= distance) {
-                    this._hoverBubbleColor(particle, distMouse);
-                }
-                else {
-                    delete particle.bubble.color;
-                }
-            }
-        };
-        this._hoverBubble = () => {
-            const container = this.container, mousePos = container.interactivity.mouse.position, distance = container.retina.bubbleModeDistance;
-            if (!distance || distance < minDistance || !mousePos) {
-                return;
-            }
-            const query = container.particles.quadTree.queryCircle(mousePos, distance, p => this.isEnabled(p));
-            for (const particle of query) {
-                particle.bubble.inRange = true;
-                const pos = particle.getPosition(), pointDistance = getDistance(pos, mousePos), ratio = ratioOffset - pointDistance / distance;
-                if (pointDistance <= distance) {
-                    if (ratio >= minRatio && container.interactivity.status === mouseMoveEvent) {
-                        this._hoverBubbleSize(particle, ratio);
-                        this._hoverBubbleOpacity(particle, ratio);
-                        this._hoverBubbleColor(particle, ratio);
-                    }
-                }
-                else {
-                    this.reset(particle);
-                }
-                if (container.interactivity.status === 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 = itemFromSingleOrMultiple(modeColor);
-                particle.bubble.finalColor = rangeColorToHsl(this._engine, bubbleColor);
-            }
-            if (!particle.bubble.finalColor) {
-                return;
-            }
-            if (bubbleOptions.mix) {
-                particle.bubble.color = undefined;
-                const pColor = particle.getFillColor();
-                particle.bubble.color = pColor
-                    ? rgbToHsl(colorMix(pColor, particle.bubble.finalColor, ratioOffset - ratio, ratio))
-                    : particle.bubble.finalColor;
-            }
-            else {
-                particle.bubble.color = particle.bubble.finalColor;
-            }
-        };
-        this._hoverBubbleOpacity = (particle, ratio, divBubble) => {
-            const container = this.container, options = container.actualOptions, modeOpacity = divBubble?.opacity ?? options.interactivity.modes.bubble?.opacity;
-            if (!modeOpacity) {
-                return;
-            }
-            const optOpacity = particle.options.opacity.value, pOpacity = particle.opacity?.value ?? defaultOpacity, opacity = calculateBubbleValue(pOpacity, modeOpacity, getRangeMax(optOpacity), ratio);
-            if (opacity !== undefined) {
-                particle.bubble.opacity = opacity;
-            }
-        };
-        this._hoverBubbleSize = (particle, ratio, divBubble) => {
-            const container = this.container, modeSize = divBubble?.size ? divBubble.size * container.retina.pixelRatio : container.retina.bubbleModeSize;
-            if (modeSize === undefined) {
-                return;
-            }
-            const optSize = getRangeMax(particle.options.size.value) * container.retina.pixelRatio, pSize = particle.size.value, size = calculateBubbleValue(pSize, modeSize, optSize, ratio);
-            if (size !== undefined) {
-                particle.bubble.radius = size;
-            }
-        };
-        this._process = (particle, distMouse, timeSpent, data) => {
-            const container = this.container, bubbleParam = data.bubbleObj.optValue, options = container.actualOptions, bubbleOptions = options.interactivity.modes.bubble;
-            if (!bubbleOptions || bubbleParam === undefined) {
-                return;
-            }
-            const bubbleDuration = bubbleOptions.duration, bubbleDistance = container.retina.bubbleModeDistance, particlesParam = data.particlesObj.optValue, pObjBubble = data.bubbleObj.value, pObj = data.particlesObj.value ?? defaultBubbleValue, type = data.type;
-            if (!bubbleDistance || bubbleDistance < minDistance || bubbleParam === particlesParam) {
-                return;
-            }
-            container.bubble ??= {};
-            if (container.bubble.durationEnd) {
-                if (pObjBubble) {
-                    if (type === ProcessBubbleType.size) {
-                        delete particle.bubble.radius;
-                    }
-                    if (type === ProcessBubbleType.opacity) {
-                        delete particle.bubble.opacity;
-                    }
-                }
-            }
-            else {
-                if (distMouse <= bubbleDistance) {
-                    const obj = pObjBubble ?? pObj;
-                    if (obj !== bubbleParam) {
-                        const value = pObj - (timeSpent * (pObj - bubbleParam)) / bubbleDuration;
-                        if (type === ProcessBubbleType.size) {
-                            particle.bubble.radius = value;
-                        }
-                        if (type === ProcessBubbleType.opacity) {
-                            particle.bubble.opacity = value;
-                        }
-                    }
-                }
-                else {
-                    if (type === ProcessBubbleType.size) {
-                        delete particle.bubble.radius;
-                    }
-                    if (type === ProcessBubbleType.opacity) {
-                        delete particle.bubble.opacity;
-                    }
-                }
-            }
-        };
-        this._singleSelectorHover = (delta, selector, div) => {
-            const container = this.container, selectors = safeDocument().querySelectorAll(selector), bubble = container.actualOptions.interactivity.modes.bubble;
-            if (!bubble || !selectors.length) {
-                return;
-            }
-            selectors.forEach(item => {
-                const elem = item, pxRatio = container.retina.pixelRatio, pos = {
-                    x: (elem.offsetLeft + elem.offsetWidth * half) * pxRatio,
-                    y: (elem.offsetTop + elem.offsetHeight * half) * pxRatio,
-                }, repulseRadius = elem.offsetWidth * half * pxRatio, area = div.type === DivType.circle
-                    ? new Circle(pos.x, pos.y, repulseRadius)
-                    : new Rectangle(elem.offsetLeft * pxRatio, elem.offsetTop * pxRatio, elem.offsetWidth * pxRatio, elem.offsetHeight * pxRatio), query = container.particles.quadTree.query(area, p => this.isEnabled(p));
-                for (const particle of query) {
-                    if (!area.contains(particle.getPosition())) {
-                        continue;
-                    }
-                    particle.bubble.inRange = true;
-                    const divs = bubble.divs, divBubble = divMode(divs, elem);
-                    if (!particle.bubble.div || particle.bubble.div !== elem) {
-                        this.clear(particle, delta, true);
-                        particle.bubble.div = elem;
-                    }
-                    this._hoverBubbleSize(particle, defaultRatio, divBubble);
-                    this._hoverBubbleOpacity(particle, defaultRatio, divBubble);
-                    this._hoverBubbleColor(particle, defaultRatio, divBubble);
-                }
-            });
-        };
         this._engine = engine;
         container.bubble ??= {};
         this.handleClickMode = (mode) => {
@@ -225,7 +29,7 @@ export class Bubbler extends ExternalInteractorBase {
         delete particle.bubble.color;
     }
     init() {
-        const container = this.container, bubble = container.actualOptions.interactivity.modes.bubble;
+        const container = this.container, bubble = container.actualOptions.interactivity?.modes.bubble;
         if (!bubble) {
             return;
         }
@@ -234,22 +38,30 @@ export class Bubbler extends ExternalInteractorBase {
             container.retina.bubbleModeSize = bubble.size * container.retina.pixelRatio;
         }
     }
-    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;
+    interact(interactivityData, delta) {
+        const options = this.container.actualOptions, events = options.interactivity?.events;
+        if (!events) {
+            return;
+        }
+        const onHover = events.onHover, onClick = events.onClick, hoverEnabled = onHover.enable, hoverMode = onHover.mode, clickEnabled = onClick.enable, clickMode = onClick.mode, divs = events.onDiv;
         if (hoverEnabled && isInArray(bubbleMode, hoverMode)) {
-            this._hoverBubble();
+            this._hoverBubble(interactivityData);
         }
         else if (clickEnabled && isInArray(bubbleMode, clickMode)) {
-            this._clickBubble();
+            this._clickBubble(interactivityData);
         }
         else {
             divModeExecute(bubbleMode, divs, (selector, div) => {
-                this._singleSelectorHover(delta, selector, div);
+                this._singleSelectorHover(interactivityData, delta, selector, div);
             });
         }
     }
-    isEnabled(particle) {
-        const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse, events = (particle?.interactivity ?? options.interactivity).events, { onClick, onDiv, onHover } = events, divBubble = isDivModeEnabled(bubbleMode, onDiv);
+    isEnabled(interactivityData, particle) {
+        const container = this.container, options = container.actualOptions, mouse = interactivityData.mouse, events = (particle?.interactivity ?? options.interactivity)?.events;
+        if (!events) {
+            return false;
+        }
+        const { onClick, onDiv, onHover } = events, divBubble = isDivModeEnabled(bubbleMode, onDiv);
         if (!(divBubble || (onHover.enable && !!mouse.position) || (onClick.enable && mouse.clickPosition))) {
             return false;
         }
@@ -261,7 +73,205 @@ export class Bubbler extends ExternalInteractorBase {
             options.bubble.load(source?.bubble);
         }
     }
-    reset(particle) {
+    reset(_interactivityData, particle) {
         particle.bubble.inRange = false;
     }
+    _clickBubble = interactivityData => {
+        const container = this.container, options = container.actualOptions, mouseClickPos = interactivityData.mouse.clickPosition, bubbleOptions = options.interactivity?.modes.bubble;
+        if (!bubbleOptions || !mouseClickPos) {
+            return;
+        }
+        container.bubble ??= {};
+        const distance = container.retina.bubbleModeDistance;
+        if (!distance || distance < minDistance) {
+            return;
+        }
+        const query = container.particles.quadTree.queryCircle(mouseClickPos, distance, p => this.isEnabled(interactivityData, p)), { bubble } = container;
+        for (const particle of query) {
+            if (!bubble.clicking) {
+                continue;
+            }
+            particle.bubble.inRange = !bubble.durationEnd;
+            const pos = particle.getPosition(), distMouse = getDistance(pos, mouseClickPos), timeSpent = (performance.now() - (interactivityData.mouse.clickTime ?? defaultClickTime)) / millisecondsToSeconds;
+            if (timeSpent > bubbleOptions.duration) {
+                bubble.durationEnd = true;
+            }
+            if (timeSpent > bubbleOptions.duration * double) {
+                bubble.clicking = false;
+                bubble.durationEnd = false;
+            }
+            const sizeData = {
+                bubbleObj: {
+                    optValue: container.retina.bubbleModeSize,
+                    value: particle.bubble.radius,
+                },
+                particlesObj: {
+                    optValue: getRangeMax(particle.options.size.value) * container.retina.pixelRatio,
+                    value: particle.size.value,
+                },
+                type: ProcessBubbleType.size,
+            };
+            this._process(particle, distMouse, timeSpent, sizeData);
+            const opacityData = {
+                bubbleObj: {
+                    optValue: bubbleOptions.opacity,
+                    value: particle.bubble.opacity,
+                },
+                particlesObj: {
+                    optValue: getRangeMax(particle.options.opacity.value),
+                    value: particle.opacity?.value ?? defaultOpacity,
+                },
+                type: ProcessBubbleType.opacity,
+            };
+            this._process(particle, distMouse, timeSpent, opacityData);
+            if (!bubble.durationEnd && distMouse <= distance) {
+                this._hoverBubbleColor(particle, distMouse);
+            }
+            else {
+                delete particle.bubble.color;
+            }
+        }
+    };
+    _hoverBubble = interactivityData => {
+        const container = this.container, mousePos = interactivityData.mouse.position, distance = container.retina.bubbleModeDistance;
+        if (!distance || distance < minDistance || !mousePos) {
+            return;
+        }
+        const query = container.particles.quadTree.queryCircle(mousePos, distance, p => this.isEnabled(interactivityData, p));
+        for (const particle of query) {
+            particle.bubble.inRange = true;
+            const pos = particle.getPosition(), pointDistance = getDistance(pos, mousePos), ratio = ratioOffset - pointDistance / distance;
+            if (pointDistance <= distance) {
+                if (ratio >= minRatio && interactivityData.status === mouseMoveEvent) {
+                    this._hoverBubbleSize(particle, ratio);
+                    this._hoverBubbleOpacity(particle, ratio);
+                    this._hoverBubbleColor(particle, ratio);
+                }
+            }
+            else {
+                this.reset(interactivityData, particle);
+            }
+            if (interactivityData.status === mouseLeaveEvent) {
+                this.reset(interactivityData, particle);
+            }
+        }
+    };
+    _hoverBubbleColor = (particle, ratio, divBubble) => {
+        const options = this.container.actualOptions, bubbleOptions = divBubble ?? options.interactivity?.modes.bubble;
+        if (!bubbleOptions) {
+            return;
+        }
+        if (!particle.bubble.finalColor) {
+            const modeColor = bubbleOptions.color;
+            if (!modeColor) {
+                return;
+            }
+            const bubbleColor = itemFromSingleOrMultiple(modeColor);
+            particle.bubble.finalColor = rangeColorToHsl(this._engine, bubbleColor);
+        }
+        if (!particle.bubble.finalColor) {
+            return;
+        }
+        if (bubbleOptions.mix) {
+            particle.bubble.color = undefined;
+            const pColor = particle.getFillColor();
+            particle.bubble.color = pColor
+                ? rgbToHsl(colorMix(pColor, particle.bubble.finalColor, ratioOffset - ratio, ratio))
+                : particle.bubble.finalColor;
+        }
+        else {
+            particle.bubble.color = particle.bubble.finalColor;
+        }
+    };
+    _hoverBubbleOpacity = (particle, ratio, divBubble) => {
+        const container = this.container, options = container.actualOptions, modeOpacity = divBubble?.opacity ?? options.interactivity?.modes.bubble?.opacity;
+        if (!modeOpacity) {
+            return;
+        }
+        const optOpacity = particle.options.opacity.value, pOpacity = particle.opacity?.value ?? defaultOpacity, opacity = calculateBubbleValue(pOpacity, modeOpacity, getRangeMax(optOpacity), ratio);
+        if (opacity !== undefined) {
+            particle.bubble.opacity = opacity;
+        }
+    };
+    _hoverBubbleSize = (particle, ratio, divBubble) => {
+        const container = this.container, modeSize = divBubble?.size ? divBubble.size * container.retina.pixelRatio : container.retina.bubbleModeSize;
+        if (modeSize === undefined) {
+            return;
+        }
+        const optSize = getRangeMax(particle.options.size.value) * container.retina.pixelRatio, pSize = particle.size.value, size = calculateBubbleValue(pSize, modeSize, optSize, ratio);
+        if (size !== undefined) {
+            particle.bubble.radius = size;
+        }
+    };
+    _process = (particle, distMouse, timeSpent, data) => {
+        const container = this.container, bubbleParam = data.bubbleObj.optValue, options = container.actualOptions, bubbleOptions = options.interactivity?.modes.bubble;
+        if (!bubbleOptions || bubbleParam === undefined) {
+            return;
+        }
+        const bubbleDuration = bubbleOptions.duration, bubbleDistance = container.retina.bubbleModeDistance, particlesParam = data.particlesObj.optValue, pObjBubble = data.bubbleObj.value, pObj = data.particlesObj.value ?? defaultBubbleValue, type = data.type;
+        if (!bubbleDistance || bubbleDistance < minDistance || bubbleParam === particlesParam) {
+            return;
+        }
+        container.bubble ??= {};
+        if (container.bubble.durationEnd) {
+            if (pObjBubble) {
+                if (type === ProcessBubbleType.size) {
+                    delete particle.bubble.radius;
+                }
+                if (type === ProcessBubbleType.opacity) {
+                    delete particle.bubble.opacity;
+                }
+            }
+        }
+        else {
+            if (distMouse <= bubbleDistance) {
+                const obj = pObjBubble ?? pObj;
+                if (obj !== bubbleParam) {
+                    const value = pObj - (timeSpent * (pObj - bubbleParam)) / bubbleDuration;
+                    if (type === ProcessBubbleType.size) {
+                        particle.bubble.radius = value;
+                    }
+                    if (type === ProcessBubbleType.opacity) {
+                        particle.bubble.opacity = value;
+                    }
+                }
+            }
+            else {
+                if (type === ProcessBubbleType.size) {
+                    delete particle.bubble.radius;
+                }
+                if (type === ProcessBubbleType.opacity) {
+                    delete particle.bubble.opacity;
+                }
+            }
+        }
+    };
+    _singleSelectorHover = (interactivityData, delta, selector, div) => {
+        const container = this.container, selectors = safeDocument().querySelectorAll(selector), bubble = container.actualOptions.interactivity?.modes.bubble;
+        if (!bubble || !selectors.length) {
+            return;
+        }
+        selectors.forEach(item => {
+            const elem = item, pxRatio = container.retina.pixelRatio, pos = {
+                x: (elem.offsetLeft + elem.offsetWidth * half) * pxRatio,
+                y: (elem.offsetTop + elem.offsetHeight * half) * pxRatio,
+            }, repulseRadius = elem.offsetWidth * half * pxRatio, area = div.type === DivType.circle
+                ? new Circle(pos.x, pos.y, repulseRadius)
+                : new Rectangle(elem.offsetLeft * pxRatio, elem.offsetTop * pxRatio, elem.offsetWidth * pxRatio, elem.offsetHeight * pxRatio), query = container.particles.quadTree.query(area, p => this.isEnabled(interactivityData, p));
+            for (const particle of query) {
+                if (!area.contains(particle.getPosition())) {
+                    continue;
+                }
+                particle.bubble.inRange = true;
+                const divs = bubble.divs, divBubble = divMode(divs, elem);
+                if (!particle.bubble.div || particle.bubble.div !== elem) {
+                    this.clear(particle, delta, true);
+                    particle.bubble.div = elem;
+                }
+                this._hoverBubbleSize(particle, defaultRatio, divBubble);
+                this._hoverBubbleOpacity(particle, defaultRatio, divBubble);
+                this._hoverBubbleColor(particle, defaultRatio, divBubble);
+            }
+        });
+    };
 }

package/browser/Options/Classes/Bubble.js

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

package/browser/Options/Classes/BubbleBase.js

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

package/browser/Options/Classes/BubbleDiv.js

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

package/browser/index.js

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