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

package/809.min.js

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

package/809.min.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! tsParticles Bubble External Interaction v4.0.0-alpha.0 by Matteo Bruni */

package/browser/Bubbler.js

@@ -1,19 +1,17 @@
-import { Circle, DivType, ExternalInteractorBase, Rectangle, colorMix, divMode, divModeExecute, getDistance, getRangeMax, isDivModeEnabled, isInArray, itemFromSingleOrMultiple, millisecondsToSeconds, mouseLeaveEvent, mouseMoveEvent, rangeColorToHsl, rgbToHsl, } from "@tsparticles/engine";
+import { Circle, DivType, ExternalInteractorBase, Rectangle, colorMix, divMode, divModeExecute, getDistance, getRangeMax, isDivModeEnabled, isInArray, itemFromSingleOrMultiple, millisecondsToSeconds, mouseLeaveEvent, mouseMoveEvent, rangeColorToHsl, rgbToHsl, safeDocument, } from "@tsparticles/engine";
 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;
 export class Bubbler extends ExternalInteractorBase {
-    constructor(container, 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;
             }
-            if (!container.bubble) {
-                container.bubble = {};
-            }
+            container.bubble ??= {};
             const distance = container.retina.bubbleModeDistance;
             if (!distance || distance < minDistance) {
                 return;
@@ -145,9 +143,7 @@ export class Bubbler extends ExternalInteractorBase {
             if (!bubbleDistance || bubbleDistance < minDistance || bubbleParam === particlesParam) {
                 return;
             }
-            if (!container.bubble) {
-                container.bubble = {};
-            }
+            container.bubble ??= {};
             if (container.bubble.durationEnd) {
                 if (pObjBubble) {
                     if (type === ProcessBubbleType.size) {
@@ -182,7 +178,7 @@ export class Bubbler extends ExternalInteractorBase {
             }
         };
         this._singleSelectorHover = (delta, selector, div) => {
-            const container = this.container, selectors = document.querySelectorAll(selector), bubble = container.actualOptions.interactivity.modes.bubble;
+            const container = this.container, selectors = safeDocument().querySelectorAll(selector), bubble = container.actualOptions.interactivity.modes.bubble;
             if (!bubble || !selectors.length) {
                 return;
             }
@@ -210,20 +206,16 @@ export class Bubbler extends ExternalInteractorBase {
             });
         };
         this._engine = engine;
-        if (!container.bubble) {
-            container.bubble = {};
-        }
+        container.bubble ??= {};
         this.handleClickMode = (mode) => {
             if (mode !== bubbleMode) {
                 return;
             }
-            if (!container.bubble) {
-                container.bubble = {};
-            }
+            container.bubble ??= {};
             container.bubble.clicking = true;
         };
     }
-    clear(particle, delta, force) {
+    clear(particle, _delta, force) {
         if (particle.bubble.inRange && !force) {
             return;
         }
@@ -251,7 +243,9 @@ export class Bubbler extends ExternalInteractorBase {
             this._clickBubble();
         }
         else {
-            divModeExecute(bubbleMode, divs, (selector, div) => this._singleSelectorHover(delta, selector, div));
+            divModeExecute(bubbleMode, divs, (selector, div) => {
+                this._singleSelectorHover(delta, selector, div);
+            });
         }
     }
     isEnabled(particle) {
@@ -262,9 +256,7 @@ export class Bubbler extends ExternalInteractorBase {
         return isInArray(bubbleMode, onHover.mode) || isInArray(bubbleMode, onClick.mode) || divBubble;
     }
     loadModeOptions(options, ...sources) {
-        if (!options.bubble) {
-            options.bubble = new Bubble();
-        }
+        options.bubble ??= new Bubble();
         for (const source of sources) {
             options.bubble.load(source?.bubble);
         }

package/browser/Utils.js

@@ -8,4 +8,5 @@ export function calculateBubbleValue(particleValue, modeValue, optionsValue, rat
         const value = particleValue - (optionsValue - modeValue) * ratio;
         return clamp(value, modeValue, particleValue);
     }
+    return undefined;
 }

package/browser/index.js

@@ -1,13 +1,12 @@
-import { Bubbler } from "./Bubbler.js";
-export async function loadExternalBubbleInteraction(engine, refresh = true) {
-    engine.checkVersion("3.9.0");
-    await engine.addInteractor("externalBubble", container => {
-        return Promise.resolve(new Bubbler(container, engine));
-    }, refresh);
+export function loadExternalBubbleInteraction(engine) {
+    engine.checkVersion("4.0.0-alpha.0");
+    engine.register(e => {
+        e.addInteractor("externalBubble", async (container) => {
+            const { Bubbler } = await import("./Bubbler.js");
+            return new Bubbler(e, container);
+        });
+    });
 }
 export * from "./Options/Classes/BubbleBase.js";
 export * from "./Options/Classes/BubbleDiv.js";
 export * from "./Options/Classes/Bubble.js";
-export * from "./Options/Interfaces/IBubbleBase.js";
-export * from "./Options/Interfaces/IBubbleDiv.js";
-export * from "./Options/Interfaces/IBubble.js";

package/cjs/Bubbler.js

@@ -1,22 +1,17 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Bubbler = void 0;
-const engine_1 = require("@tsparticles/engine");
-const Bubble_js_1 = require("./Options/Classes/Bubble.js");
-const Enums_js_1 = require("./Enums.js");
-const Utils_js_1 = require("./Utils.js");
+import { Circle, DivType, ExternalInteractorBase, Rectangle, colorMix, divMode, divModeExecute, getDistance, getRangeMax, isDivModeEnabled, isInArray, itemFromSingleOrMultiple, millisecondsToSeconds, mouseLeaveEvent, mouseMoveEvent, rangeColorToHsl, rgbToHsl, safeDocument, } from "@tsparticles/engine";
+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;
-class Bubbler extends engine_1.ExternalInteractorBase {
-    constructor(container, engine) {
+export class Bubbler extends ExternalInteractorBase {
+    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;
             }
-            if (!container.bubble) {
-                container.bubble = {};
-            }
+            container.bubble ??= {};
             const distance = container.retina.bubbleModeDistance;
             if (!distance || distance < minDistance) {
                 return;
@@ -27,8 +22,8 @@ class Bubbler extends engine_1.ExternalInteractorBase {
                     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 ?? defaultClickTime)) /
-                    engine_1.millisecondsToSeconds;
+                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;
                 }
@@ -42,10 +37,10 @@ class Bubbler extends engine_1.ExternalInteractorBase {
                         value: particle.bubble.radius,
                     },
                     particlesObj: {
-                        optValue: (0, engine_1.getRangeMax)(particle.options.size.value) * container.retina.pixelRatio,
+                        optValue: getRangeMax(particle.options.size.value) * container.retina.pixelRatio,
                         value: particle.size.value,
                     },
-                    type: Enums_js_1.ProcessBubbleType.size,
+                    type: ProcessBubbleType.size,
                 };
                 this._process(particle, distMouse, timeSpent, sizeData);
                 const opacityData = {
@@ -54,10 +49,10 @@ class Bubbler extends engine_1.ExternalInteractorBase {
                         value: particle.bubble.opacity,
                     },
                     particlesObj: {
-                        optValue: (0, engine_1.getRangeMax)(particle.options.opacity.value),
+                        optValue: getRangeMax(particle.options.opacity.value),
                         value: particle.opacity?.value ?? defaultOpacity,
                     },
-                    type: Enums_js_1.ProcessBubbleType.opacity,
+                    type: ProcessBubbleType.opacity,
                 };
                 this._process(particle, distMouse, timeSpent, opacityData);
                 if (!bubble.durationEnd && distMouse <= distance) {
@@ -76,9 +71,9 @@ class Bubbler extends engine_1.ExternalInteractorBase {
             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 = ratioOffset - pointDistance / distance;
+                const pos = particle.getPosition(), pointDistance = getDistance(pos, mousePos), ratio = ratioOffset - pointDistance / distance;
                 if (pointDistance <= distance) {
-                    if (ratio >= minRatio && container.interactivity.status === engine_1.mouseMoveEvent) {
+                    if (ratio >= minRatio && container.interactivity.status === mouseMoveEvent) {
                         this._hoverBubbleSize(particle, ratio);
                         this._hoverBubbleOpacity(particle, ratio);
                         this._hoverBubbleColor(particle, ratio);
@@ -87,7 +82,7 @@ class Bubbler extends engine_1.ExternalInteractorBase {
                 else {
                     this.reset(particle);
                 }
-                if (container.interactivity.status === engine_1.mouseLeaveEvent) {
+                if (container.interactivity.status === mouseLeaveEvent) {
                     this.reset(particle);
                 }
             }
@@ -102,8 +97,8 @@ class Bubbler extends engine_1.ExternalInteractorBase {
                 if (!modeColor) {
                     return;
                 }
-                const bubbleColor = (0, engine_1.itemFromSingleOrMultiple)(modeColor);
-                particle.bubble.finalColor = (0, engine_1.rangeColorToHsl)(this._engine, bubbleColor);
+                const bubbleColor = itemFromSingleOrMultiple(modeColor);
+                particle.bubble.finalColor = rangeColorToHsl(this._engine, bubbleColor);
             }
             if (!particle.bubble.finalColor) {
                 return;
@@ -112,7 +107,7 @@ class Bubbler extends engine_1.ExternalInteractorBase {
                 particle.bubble.color = undefined;
                 const pColor = particle.getFillColor();
                 particle.bubble.color = pColor
-                    ? (0, engine_1.rgbToHsl)((0, engine_1.colorMix)(pColor, particle.bubble.finalColor, ratioOffset - ratio, ratio))
+                    ? rgbToHsl(colorMix(pColor, particle.bubble.finalColor, ratioOffset - ratio, ratio))
                     : particle.bubble.finalColor;
             }
             else {
@@ -124,7 +119,7 @@ class Bubbler extends engine_1.ExternalInteractorBase {
             if (!modeOpacity) {
                 return;
             }
-            const optOpacity = particle.options.opacity.value, pOpacity = particle.opacity?.value ?? defaultOpacity, opacity = (0, Utils_js_1.calculateBubbleValue)(pOpacity, modeOpacity, (0, engine_1.getRangeMax)(optOpacity), ratio);
+            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;
             }
@@ -134,7 +129,7 @@ class Bubbler extends engine_1.ExternalInteractorBase {
             if (modeSize === undefined) {
                 return;
             }
-            const optSize = (0, engine_1.getRangeMax)(particle.options.size.value) * container.retina.pixelRatio, pSize = particle.size.value, size = (0, Utils_js_1.calculateBubbleValue)(pSize, modeSize, optSize, ratio);
+            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;
             }
@@ -148,15 +143,13 @@ class Bubbler extends engine_1.ExternalInteractorBase {
             if (!bubbleDistance || bubbleDistance < minDistance || bubbleParam === particlesParam) {
                 return;
             }
-            if (!container.bubble) {
-                container.bubble = {};
-            }
+            container.bubble ??= {};
             if (container.bubble.durationEnd) {
                 if (pObjBubble) {
-                    if (type === Enums_js_1.ProcessBubbleType.size) {
+                    if (type === ProcessBubbleType.size) {
                         delete particle.bubble.radius;
                     }
-                    if (type === Enums_js_1.ProcessBubbleType.opacity) {
+                    if (type === ProcessBubbleType.opacity) {
                         delete particle.bubble.opacity;
                     }
                 }
@@ -166,26 +159,26 @@ class Bubbler extends engine_1.ExternalInteractorBase {
                     const obj = pObjBubble ?? pObj;
                     if (obj !== bubbleParam) {
                         const value = pObj - (timeSpent * (pObj - bubbleParam)) / bubbleDuration;
-                        if (type === Enums_js_1.ProcessBubbleType.size) {
+                        if (type === ProcessBubbleType.size) {
                             particle.bubble.radius = value;
                         }
-                        if (type === Enums_js_1.ProcessBubbleType.opacity) {
+                        if (type === ProcessBubbleType.opacity) {
                             particle.bubble.opacity = value;
                         }
                     }
                 }
                 else {
-                    if (type === Enums_js_1.ProcessBubbleType.size) {
+                    if (type === ProcessBubbleType.size) {
                         delete particle.bubble.radius;
                     }
-                    if (type === Enums_js_1.ProcessBubbleType.opacity) {
+                    if (type === ProcessBubbleType.opacity) {
                         delete particle.bubble.opacity;
                     }
                 }
             }
         };
         this._singleSelectorHover = (delta, selector, div) => {
-            const container = this.container, selectors = document.querySelectorAll(selector), bubble = container.actualOptions.interactivity.modes.bubble;
+            const container = this.container, selectors = safeDocument().querySelectorAll(selector), bubble = container.actualOptions.interactivity.modes.bubble;
             if (!bubble || !selectors.length) {
                 return;
             }
@@ -193,15 +186,15 @@ class Bubbler extends engine_1.ExternalInteractorBase {
                 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 === engine_1.DivType.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));
+                }, 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 = (0, engine_1.divMode)(divs, elem);
+                    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;
@@ -213,20 +206,16 @@ class Bubbler extends engine_1.ExternalInteractorBase {
             });
         };
         this._engine = engine;
-        if (!container.bubble) {
-            container.bubble = {};
-        }
+        container.bubble ??= {};
         this.handleClickMode = (mode) => {
             if (mode !== bubbleMode) {
                 return;
             }
-            if (!container.bubble) {
-                container.bubble = {};
-            }
+            container.bubble ??= {};
             container.bubble.clicking = true;
         };
     }
-    clear(particle, delta, force) {
+    clear(particle, _delta, force) {
         if (particle.bubble.inRange && !force) {
             return;
         }
@@ -247,27 +236,27 @@ class Bubbler extends engine_1.ExternalInteractorBase {
     }
     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)(bubbleMode, hoverMode)) {
+        if (hoverEnabled && isInArray(bubbleMode, hoverMode)) {
             this._hoverBubble();
         }
-        else if (clickEnabled && (0, engine_1.isInArray)(bubbleMode, clickMode)) {
+        else if (clickEnabled && isInArray(bubbleMode, clickMode)) {
             this._clickBubble();
         }
         else {
-            (0, engine_1.divModeExecute)(bubbleMode, divs, (selector, div) => this._singleSelectorHover(delta, selector, div));
+            divModeExecute(bubbleMode, divs, (selector, div) => {
+                this._singleSelectorHover(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 = (0, engine_1.isDivModeEnabled)(bubbleMode, onDiv);
+        const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse, events = (particle?.interactivity ?? options.interactivity).events, { onClick, onDiv, onHover } = events, divBubble = isDivModeEnabled(bubbleMode, onDiv);
         if (!(divBubble || (onHover.enable && !!mouse.position) || (onClick.enable && mouse.clickPosition))) {
             return false;
         }
-        return (0, engine_1.isInArray)(bubbleMode, onHover.mode) || (0, engine_1.isInArray)(bubbleMode, onClick.mode) || divBubble;
+        return isInArray(bubbleMode, onHover.mode) || isInArray(bubbleMode, onClick.mode) || divBubble;
     }
     loadModeOptions(options, ...sources) {
-        if (!options.bubble) {
-            options.bubble = new Bubble_js_1.Bubble();
-        }
+        options.bubble ??= new Bubble();
         for (const source of sources) {
             options.bubble.load(source?.bubble);
         }
@@ -276,4 +265,3 @@ class Bubbler extends engine_1.ExternalInteractorBase {
         particle.bubble.inRange = false;
     }
 }
-exports.Bubbler = Bubbler;

package/cjs/Enums.js

@@ -1,9 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProcessBubbleType = void 0;
-var ProcessBubbleType;
+export var ProcessBubbleType;
 (function (ProcessBubbleType) {
     ProcessBubbleType["color"] = "color";
     ProcessBubbleType["opacity"] = "opacity";
     ProcessBubbleType["size"] = "size";
-})(ProcessBubbleType || (exports.ProcessBubbleType = ProcessBubbleType = {}));
+})(ProcessBubbleType || (ProcessBubbleType = {}));

package/cjs/Interfaces.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Classes/Bubble.js

@@ -1,20 +1,16 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Bubble = void 0;
-const engine_1 = require("@tsparticles/engine");
-const BubbleBase_js_1 = require("./BubbleBase.js");
-const BubbleDiv_js_1 = require("./BubbleDiv.js");
-class Bubble extends BubbleBase_js_1.BubbleBase {
+import { executeOnSingleOrMultiple, isNull, } from "@tsparticles/engine";
+import { BubbleBase } from "./BubbleBase.js";
+import { BubbleDiv } from "./BubbleDiv.js";
+export class Bubble extends BubbleBase {
     load(data) {
         super.load(data);
-        if ((0, engine_1.isNull)(data)) {
+        if (isNull(data)) {
             return;
         }
-        this.divs = (0, engine_1.executeOnSingleOrMultiple)(data.divs, div => {
-            const tmp = new BubbleDiv_js_1.BubbleDiv();
+        this.divs = executeOnSingleOrMultiple(data.divs, div => {
+            const tmp = new BubbleDiv();
             tmp.load(div);
             return tmp;
         });
     }
 }
-exports.Bubble = Bubble;

package/cjs/Options/Classes/BubbleBase.js

@@ -1,15 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BubbleBase = void 0;
-const engine_1 = require("@tsparticles/engine");
-class BubbleBase {
+import { OptionsColor, executeOnSingleOrMultiple, isArray, isNull, } from "@tsparticles/engine";
+export class BubbleBase {
     constructor() {
         this.distance = 200;
         this.duration = 0.4;
         this.mix = false;
     }
     load(data) {
-        if ((0, engine_1.isNull)(data)) {
+        if (isNull(data)) {
             return;
         }
         if (data.distance !== undefined) {
@@ -25,9 +22,9 @@ class BubbleBase {
             this.opacity = data.opacity;
         }
         if (data.color !== undefined) {
-            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);
+            const sourceColor = isArray(this.color) ? undefined : this.color;
+            this.color = executeOnSingleOrMultiple(data.color, color => {
+                return OptionsColor.create(sourceColor, color);
             });
         }
         if (data.size !== undefined) {
@@ -35,4 +32,3 @@ class BubbleBase {
         }
     }
 }
-exports.BubbleBase = BubbleBase;

package/cjs/Options/Classes/BubbleDiv.js

@@ -1,16 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BubbleDiv = void 0;
-const engine_1 = require("@tsparticles/engine");
-const BubbleBase_js_1 = require("./BubbleBase.js");
-class BubbleDiv extends BubbleBase_js_1.BubbleBase {
+import { isNull } from "@tsparticles/engine";
+import { BubbleBase } from "./BubbleBase.js";
+export class BubbleDiv extends BubbleBase {
     constructor() {
         super();
         this.selectors = [];
     }
     load(data) {
         super.load(data);
-        if ((0, engine_1.isNull)(data)) {
+        if (isNull(data)) {
             return;
         }
         if (data.selectors !== undefined) {
@@ -18,4 +15,3 @@ class BubbleDiv extends BubbleBase_js_1.BubbleBase {
         }
     }
 }
-exports.BubbleDiv = BubbleDiv;

package/cjs/Options/Classes/BubbleOptions.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/IBubble.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/IBubbleBase.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/IBubbleDiv.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Types.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Utils.js

@@ -1,14 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.calculateBubbleValue = calculateBubbleValue;
-const engine_1 = require("@tsparticles/engine");
-function calculateBubbleValue(particleValue, modeValue, optionsValue, ratio) {
+import { clamp } from "@tsparticles/engine";
+export function calculateBubbleValue(particleValue, modeValue, optionsValue, ratio) {
     if (modeValue >= optionsValue) {
         const value = particleValue + (modeValue - optionsValue) * ratio;
-        return (0, engine_1.clamp)(value, particleValue, modeValue);
+        return clamp(value, particleValue, modeValue);
     }
     else if (modeValue < optionsValue) {
         const value = particleValue - (optionsValue - modeValue) * ratio;
-        return (0, engine_1.clamp)(value, modeValue, particleValue);
+        return clamp(value, modeValue, particleValue);
     }
+    return undefined;
 }

package/cjs/index.js

@@ -1,30 +1,12 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.loadExternalBubbleInteraction = loadExternalBubbleInteraction;
-const Bubbler_js_1 = require("./Bubbler.js");
-async function loadExternalBubbleInteraction(engine, refresh = true) {
-    engine.checkVersion("3.9.0");
-    await engine.addInteractor("externalBubble", container => {
-        return Promise.resolve(new Bubbler_js_1.Bubbler(container, engine));
-    }, refresh);
+export function loadExternalBubbleInteraction(engine) {
+    engine.checkVersion("4.0.0-alpha.0");
+    engine.register(e => {
+        e.addInteractor("externalBubble", async (container) => {
+            const { Bubbler } = await import("./Bubbler.js");
+            return new Bubbler(e, container);
+        });
+    });
 }
-__exportStar(require("./Options/Classes/BubbleBase.js"), exports);
-__exportStar(require("./Options/Classes/BubbleDiv.js"), exports);
-__exportStar(require("./Options/Classes/Bubble.js"), exports);
-__exportStar(require("./Options/Interfaces/IBubbleBase.js"), exports);
-__exportStar(require("./Options/Interfaces/IBubbleDiv.js"), exports);
-__exportStar(require("./Options/Interfaces/IBubble.js"), exports);
+export * from "./Options/Classes/BubbleBase.js";
+export * from "./Options/Classes/BubbleDiv.js";
+export * from "./Options/Classes/Bubble.js";