@tsparticles/interaction-external-bubble 4.1.3 → 4.2.0

package/browser/Bubbler.js

@@ -1,4 +1,4 @@
-import { Circle, Rectangle, colorMix, double, getDistance, half, isInArray, itemFromSingleOrMultiple, millisecondsToSeconds, rangeColorToHsl, rgbToHsl, safeDocument, } from "@tsparticles/engine";
+import { Circle, Rectangle, colorMix, double, getDistance, half, isInArray, itemFromSingleOrMultiple, loadOptionProperty, 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";
@@ -74,15 +74,12 @@ export class Bubbler extends ExternalInteractorBase {
         return isInArray(bubbleMode, onHover.mode) || isInArray(bubbleMode, onClick.mode) || divBubble;
     }
     loadModeOptions(options, ...sources) {
-        options.bubble ??= new Bubble();
-        for (const source of sources) {
-            options.bubble.load(source?.bubble);
-        }
+        loadOptionProperty(options, "bubble", Bubble, ...sources);
     }
     reset(_interactivityData, particle) {
         particle.bubble.inRange = false;
     }
-    #clickBubble = interactivityData => {
+    #clickBubble(interactivityData) {
         const container = this.container, options = container.actualOptions, mouseClickPos = interactivityData.mouse.clickPosition, bubbleOptions = options.interactivity?.modes.bubble;
         if (!bubbleOptions || !mouseClickPos) {
             return;
@@ -137,8 +134,8 @@ export class Bubbler extends ExternalInteractorBase {
                 delete particle.bubble.color;
             }
         }
-    };
-    #hoverBubble = interactivityData => {
+    }
+    #hoverBubble(interactivityData) {
         const container = this.container, mousePos = interactivityData.mouse.position, distance = container.retina.bubbleModeDistance;
         if (!distance || distance < minDistance || !mousePos) {
             return;
@@ -161,8 +158,8 @@ export class Bubbler extends ExternalInteractorBase {
                 this.reset(interactivityData, particle);
             }
         }
-    };
-    #hoverBubbleColor = (particle, ratio, divBubble) => {
+    }
+    #hoverBubbleColor(particle, ratio, divBubble) {
         const options = this.container.actualOptions, bubbleOptions = divBubble ?? options.interactivity?.modes.bubble;
         if (!bubbleOptions) {
             return;
@@ -188,8 +185,8 @@ export class Bubbler extends ExternalInteractorBase {
         else {
             particle.bubble.color = particle.bubble.finalColor;
         }
-    };
-    #hoverBubbleOpacity = (particle, ratio, divBubble) => {
+    }
+    #hoverBubbleOpacity(particle, ratio, divBubble) {
         const container = this.container, options = container.actualOptions, modeOpacity = divBubble?.opacity ?? options.interactivity?.modes.bubble?.opacity;
         if (!modeOpacity) {
             return;
@@ -198,8 +195,8 @@ export class Bubbler extends ExternalInteractorBase {
         if (opacity !== undefined) {
             particle.bubble.opacity = opacity;
         }
-    };
-    #hoverBubbleSize = (particle, ratio, divBubble) => {
+    }
+    #hoverBubbleSize(particle, ratio, divBubble) {
         const container = this.container, modeSize = divBubble?.size ? divBubble.size * container.retina.pixelRatio : container.retina.bubbleModeSize;
         if (modeSize === undefined) {
             return;
@@ -208,8 +205,8 @@ export class Bubbler extends ExternalInteractorBase {
         if (size !== undefined) {
             particle.bubble.radius = size;
         }
-    };
-    #process = (particle, distMouse, timeSpent, data) => {
+    }
+    #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;
@@ -251,8 +248,8 @@ export class Bubbler extends ExternalInteractorBase {
                 }
             }
         }
-    };
-    #singleSelectorHover = (interactivityData, delta, selector, div) => {
+    }
+    #singleSelectorHover(interactivityData, delta, selector, div) {
         const container = this.container, selectors = safeDocument().querySelectorAll(selector), bubble = container.actualOptions.interactivity?.modes.bubble;
         if (!bubble || !selectors.length) {
             return;
@@ -279,5 +276,5 @@ export class Bubbler extends ExternalInteractorBase {
                 this.#hoverBubbleColor(particle, defaultRatio, divBubble);
             }
         });
-    };
+    }
 }

package/browser/Options/Classes/BubbleBase.js

@@ -1,40 +1,25 @@
-import { OptionsColor, executeOnSingleOrMultiple, isArray, isNull, } from "@tsparticles/engine";
+import { OptionsColor, executeOnSingleOrMultiple, isArray, isNull, loadProperty, loadRangeProperty, } from "@tsparticles/engine";
 export class BubbleBase {
     color;
-    distance;
-    duration;
-    mix;
+    distance = 200;
+    duration = 0.4;
+    mix = false;
     opacity;
     size;
-    constructor() {
-        this.distance = 200;
-        this.duration = 0.4;
-        this.mix = false;
-    }
     load(data) {
         if (isNull(data)) {
             return;
         }
-        if (data.distance !== undefined) {
-            this.distance = data.distance;
-        }
-        if (data.duration !== undefined) {
-            this.duration = data.duration;
-        }
-        if (data.mix !== undefined) {
-            this.mix = data.mix;
-        }
-        if (data.opacity !== undefined) {
-            this.opacity = data.opacity;
-        }
+        loadProperty(this, "distance", data.distance);
+        loadProperty(this, "duration", data.duration);
+        loadProperty(this, "mix", data.mix);
+        loadRangeProperty(this, "opacity", data.opacity);
         if (data.color !== undefined) {
             const sourceColor = isArray(this.color) ? undefined : this.color;
             this.color = executeOnSingleOrMultiple(data.color, color => {
                 return OptionsColor.create(sourceColor, color);
             });
         }
-        if (data.size !== undefined) {
-            this.size = data.size;
-        }
+        loadProperty(this, "size", data.size);
     }
 }

package/browser/Options/Classes/BubbleDiv.js

@@ -1,18 +1,12 @@
-import { isNull } from "@tsparticles/engine";
+import { isNull, loadProperty, } from "@tsparticles/engine";
 import { BubbleBase } from "./BubbleBase.js";
 export class BubbleDiv extends BubbleBase {
-    selectors;
-    constructor() {
-        super();
-        this.selectors = [];
-    }
+    selectors = [];
     load(data) {
         super.load(data);
         if (isNull(data)) {
             return;
         }
-        if (data.selectors !== undefined) {
-            this.selectors = data.selectors;
-        }
+        loadProperty(this, "selectors", data.selectors);
     }
 }

package/browser/index.js

@@ -1,7 +1,7 @@
 import { ensureInteractivityPluginLoaded } from "@tsparticles/plugin-interactivity";
 import { Bubbler } from "./Bubbler.js";
 export async function loadExternalBubbleInteraction(engine) {
-    engine.checkVersion("4.1.3");
+    engine.checkVersion("4.2.0");
     await engine.pluginManager.register((e) => {
         ensureInteractivityPluginLoaded(e);
         e.pluginManager.addInteractor?.("externalBubble", container => {

package/browser/index.lazy.js

@@ -1,5 +1,5 @@
 export async function loadExternalBubbleInteraction(engine) {
-    engine.checkVersion("4.1.3");
+    engine.checkVersion("4.2.0");
     await engine.pluginManager.register(async (e) => {
         const { ensureInteractivityPluginLoaded } = await import("@tsparticles/plugin-interactivity/lazy");
         ensureInteractivityPluginLoaded(e);

package/cjs/Bubbler.js

@@ -1,4 +1,4 @@
-import { Circle, Rectangle, colorMix, double, getDistance, half, isInArray, itemFromSingleOrMultiple, millisecondsToSeconds, rangeColorToHsl, rgbToHsl, safeDocument, } from "@tsparticles/engine";
+import { Circle, Rectangle, colorMix, double, getDistance, half, isInArray, itemFromSingleOrMultiple, loadOptionProperty, 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";
@@ -74,15 +74,12 @@ export class Bubbler extends ExternalInteractorBase {
         return isInArray(bubbleMode, onHover.mode) || isInArray(bubbleMode, onClick.mode) || divBubble;
     }
     loadModeOptions(options, ...sources) {
-        options.bubble ??= new Bubble();
-        for (const source of sources) {
-            options.bubble.load(source?.bubble);
-        }
+        loadOptionProperty(options, "bubble", Bubble, ...sources);
     }
     reset(_interactivityData, particle) {
         particle.bubble.inRange = false;
     }
-    #clickBubble = interactivityData => {
+    #clickBubble(interactivityData) {
         const container = this.container, options = container.actualOptions, mouseClickPos = interactivityData.mouse.clickPosition, bubbleOptions = options.interactivity?.modes.bubble;
         if (!bubbleOptions || !mouseClickPos) {
             return;
@@ -137,8 +134,8 @@ export class Bubbler extends ExternalInteractorBase {
                 delete particle.bubble.color;
             }
         }
-    };
-    #hoverBubble = interactivityData => {
+    }
+    #hoverBubble(interactivityData) {
         const container = this.container, mousePos = interactivityData.mouse.position, distance = container.retina.bubbleModeDistance;
         if (!distance || distance < minDistance || !mousePos) {
             return;
@@ -161,8 +158,8 @@ export class Bubbler extends ExternalInteractorBase {
                 this.reset(interactivityData, particle);
             }
         }
-    };
-    #hoverBubbleColor = (particle, ratio, divBubble) => {
+    }
+    #hoverBubbleColor(particle, ratio, divBubble) {
         const options = this.container.actualOptions, bubbleOptions = divBubble ?? options.interactivity?.modes.bubble;
         if (!bubbleOptions) {
             return;
@@ -188,8 +185,8 @@ export class Bubbler extends ExternalInteractorBase {
         else {
             particle.bubble.color = particle.bubble.finalColor;
         }
-    };
-    #hoverBubbleOpacity = (particle, ratio, divBubble) => {
+    }
+    #hoverBubbleOpacity(particle, ratio, divBubble) {
         const container = this.container, options = container.actualOptions, modeOpacity = divBubble?.opacity ?? options.interactivity?.modes.bubble?.opacity;
         if (!modeOpacity) {
             return;
@@ -198,8 +195,8 @@ export class Bubbler extends ExternalInteractorBase {
         if (opacity !== undefined) {
             particle.bubble.opacity = opacity;
         }
-    };
-    #hoverBubbleSize = (particle, ratio, divBubble) => {
+    }
+    #hoverBubbleSize(particle, ratio, divBubble) {
         const container = this.container, modeSize = divBubble?.size ? divBubble.size * container.retina.pixelRatio : container.retina.bubbleModeSize;
         if (modeSize === undefined) {
             return;
@@ -208,8 +205,8 @@ export class Bubbler extends ExternalInteractorBase {
         if (size !== undefined) {
             particle.bubble.radius = size;
         }
-    };
-    #process = (particle, distMouse, timeSpent, data) => {
+    }
+    #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;
@@ -251,8 +248,8 @@ export class Bubbler extends ExternalInteractorBase {
                 }
             }
         }
-    };
-    #singleSelectorHover = (interactivityData, delta, selector, div) => {
+    }
+    #singleSelectorHover(interactivityData, delta, selector, div) {
         const container = this.container, selectors = safeDocument().querySelectorAll(selector), bubble = container.actualOptions.interactivity?.modes.bubble;
         if (!bubble || !selectors.length) {
             return;
@@ -279,5 +276,5 @@ export class Bubbler extends ExternalInteractorBase {
                 this.#hoverBubbleColor(particle, defaultRatio, divBubble);
             }
         });
-    };
+    }
 }

package/cjs/Options/Classes/BubbleBase.js

@@ -1,40 +1,25 @@
-import { OptionsColor, executeOnSingleOrMultiple, isArray, isNull, } from "@tsparticles/engine";
+import { OptionsColor, executeOnSingleOrMultiple, isArray, isNull, loadProperty, loadRangeProperty, } from "@tsparticles/engine";
 export class BubbleBase {
     color;
-    distance;
-    duration;
-    mix;
+    distance = 200;
+    duration = 0.4;
+    mix = false;
     opacity;
     size;
-    constructor() {
-        this.distance = 200;
-        this.duration = 0.4;
-        this.mix = false;
-    }
     load(data) {
         if (isNull(data)) {
             return;
         }
-        if (data.distance !== undefined) {
-            this.distance = data.distance;
-        }
-        if (data.duration !== undefined) {
-            this.duration = data.duration;
-        }
-        if (data.mix !== undefined) {
-            this.mix = data.mix;
-        }
-        if (data.opacity !== undefined) {
-            this.opacity = data.opacity;
-        }
+        loadProperty(this, "distance", data.distance);
+        loadProperty(this, "duration", data.duration);
+        loadProperty(this, "mix", data.mix);
+        loadRangeProperty(this, "opacity", data.opacity);
         if (data.color !== undefined) {
             const sourceColor = isArray(this.color) ? undefined : this.color;
             this.color = executeOnSingleOrMultiple(data.color, color => {
                 return OptionsColor.create(sourceColor, color);
             });
         }
-        if (data.size !== undefined) {
-            this.size = data.size;
-        }
+        loadProperty(this, "size", data.size);
     }
 }

package/cjs/Options/Classes/BubbleDiv.js

@@ -1,18 +1,12 @@
-import { isNull } from "@tsparticles/engine";
+import { isNull, loadProperty, } from "@tsparticles/engine";
 import { BubbleBase } from "./BubbleBase.js";
 export class BubbleDiv extends BubbleBase {
-    selectors;
-    constructor() {
-        super();
-        this.selectors = [];
-    }
+    selectors = [];
     load(data) {
         super.load(data);
         if (isNull(data)) {
             return;
         }
-        if (data.selectors !== undefined) {
-            this.selectors = data.selectors;
-        }
+        loadProperty(this, "selectors", data.selectors);
     }
 }

package/cjs/index.js

@@ -1,7 +1,7 @@
 import { ensureInteractivityPluginLoaded } from "@tsparticles/plugin-interactivity";
 import { Bubbler } from "./Bubbler.js";
 export async function loadExternalBubbleInteraction(engine) {
-    engine.checkVersion("4.1.3");
+    engine.checkVersion("4.2.0");
     await engine.pluginManager.register((e) => {
         ensureInteractivityPluginLoaded(e);
         e.pluginManager.addInteractor?.("externalBubble", container => {

package/cjs/index.lazy.js

@@ -1,5 +1,5 @@
 export async function loadExternalBubbleInteraction(engine) {
-    engine.checkVersion("4.1.3");
+    engine.checkVersion("4.2.0");
     await engine.pluginManager.register(async (e) => {
         const { ensureInteractivityPluginLoaded } = await import("@tsparticles/plugin-interactivity/lazy");
         ensureInteractivityPluginLoaded(e);

package/esm/Bubbler.js

@@ -1,4 +1,4 @@
-import { Circle, Rectangle, colorMix, double, getDistance, half, isInArray, itemFromSingleOrMultiple, millisecondsToSeconds, rangeColorToHsl, rgbToHsl, safeDocument, } from "@tsparticles/engine";
+import { Circle, Rectangle, colorMix, double, getDistance, half, isInArray, itemFromSingleOrMultiple, loadOptionProperty, 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";
@@ -74,15 +74,12 @@ export class Bubbler extends ExternalInteractorBase {
         return isInArray(bubbleMode, onHover.mode) || isInArray(bubbleMode, onClick.mode) || divBubble;
     }
     loadModeOptions(options, ...sources) {
-        options.bubble ??= new Bubble();
-        for (const source of sources) {
-            options.bubble.load(source?.bubble);
-        }
+        loadOptionProperty(options, "bubble", Bubble, ...sources);
     }
     reset(_interactivityData, particle) {
         particle.bubble.inRange = false;
     }
-    #clickBubble = interactivityData => {
+    #clickBubble(interactivityData) {
         const container = this.container, options = container.actualOptions, mouseClickPos = interactivityData.mouse.clickPosition, bubbleOptions = options.interactivity?.modes.bubble;
         if (!bubbleOptions || !mouseClickPos) {
             return;
@@ -137,8 +134,8 @@ export class Bubbler extends ExternalInteractorBase {
                 delete particle.bubble.color;
             }
         }
-    };
-    #hoverBubble = interactivityData => {
+    }
+    #hoverBubble(interactivityData) {
         const container = this.container, mousePos = interactivityData.mouse.position, distance = container.retina.bubbleModeDistance;
         if (!distance || distance < minDistance || !mousePos) {
             return;
@@ -161,8 +158,8 @@ export class Bubbler extends ExternalInteractorBase {
                 this.reset(interactivityData, particle);
             }
         }
-    };
-    #hoverBubbleColor = (particle, ratio, divBubble) => {
+    }
+    #hoverBubbleColor(particle, ratio, divBubble) {
         const options = this.container.actualOptions, bubbleOptions = divBubble ?? options.interactivity?.modes.bubble;
         if (!bubbleOptions) {
             return;
@@ -188,8 +185,8 @@ export class Bubbler extends ExternalInteractorBase {
         else {
             particle.bubble.color = particle.bubble.finalColor;
         }
-    };
-    #hoverBubbleOpacity = (particle, ratio, divBubble) => {
+    }
+    #hoverBubbleOpacity(particle, ratio, divBubble) {
         const container = this.container, options = container.actualOptions, modeOpacity = divBubble?.opacity ?? options.interactivity?.modes.bubble?.opacity;
         if (!modeOpacity) {
             return;
@@ -198,8 +195,8 @@ export class Bubbler extends ExternalInteractorBase {
         if (opacity !== undefined) {
             particle.bubble.opacity = opacity;
         }
-    };
-    #hoverBubbleSize = (particle, ratio, divBubble) => {
+    }
+    #hoverBubbleSize(particle, ratio, divBubble) {
         const container = this.container, modeSize = divBubble?.size ? divBubble.size * container.retina.pixelRatio : container.retina.bubbleModeSize;
         if (modeSize === undefined) {
             return;
@@ -208,8 +205,8 @@ export class Bubbler extends ExternalInteractorBase {
         if (size !== undefined) {
             particle.bubble.radius = size;
         }
-    };
-    #process = (particle, distMouse, timeSpent, data) => {
+    }
+    #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;
@@ -251,8 +248,8 @@ export class Bubbler extends ExternalInteractorBase {
                 }
             }
         }
-    };
-    #singleSelectorHover = (interactivityData, delta, selector, div) => {
+    }
+    #singleSelectorHover(interactivityData, delta, selector, div) {
         const container = this.container, selectors = safeDocument().querySelectorAll(selector), bubble = container.actualOptions.interactivity?.modes.bubble;
         if (!bubble || !selectors.length) {
             return;
@@ -279,5 +276,5 @@ export class Bubbler extends ExternalInteractorBase {
                 this.#hoverBubbleColor(particle, defaultRatio, divBubble);
             }
         });
-    };
+    }
 }

package/esm/Options/Classes/BubbleBase.js

@@ -1,40 +1,25 @@
-import { OptionsColor, executeOnSingleOrMultiple, isArray, isNull, } from "@tsparticles/engine";
+import { OptionsColor, executeOnSingleOrMultiple, isArray, isNull, loadProperty, loadRangeProperty, } from "@tsparticles/engine";
 export class BubbleBase {
     color;
-    distance;
-    duration;
-    mix;
+    distance = 200;
+    duration = 0.4;
+    mix = false;
     opacity;
     size;
-    constructor() {
-        this.distance = 200;
-        this.duration = 0.4;
-        this.mix = false;
-    }
     load(data) {
         if (isNull(data)) {
             return;
         }
-        if (data.distance !== undefined) {
-            this.distance = data.distance;
-        }
-        if (data.duration !== undefined) {
-            this.duration = data.duration;
-        }
-        if (data.mix !== undefined) {
-            this.mix = data.mix;
-        }
-        if (data.opacity !== undefined) {
-            this.opacity = data.opacity;
-        }
+        loadProperty(this, "distance", data.distance);
+        loadProperty(this, "duration", data.duration);
+        loadProperty(this, "mix", data.mix);
+        loadRangeProperty(this, "opacity", data.opacity);
         if (data.color !== undefined) {
             const sourceColor = isArray(this.color) ? undefined : this.color;
             this.color = executeOnSingleOrMultiple(data.color, color => {
                 return OptionsColor.create(sourceColor, color);
             });
         }
-        if (data.size !== undefined) {
-            this.size = data.size;
-        }
+        loadProperty(this, "size", data.size);
     }
 }

package/esm/Options/Classes/BubbleDiv.js

@@ -1,18 +1,12 @@
-import { isNull } from "@tsparticles/engine";
+import { isNull, loadProperty, } from "@tsparticles/engine";
 import { BubbleBase } from "./BubbleBase.js";
 export class BubbleDiv extends BubbleBase {
-    selectors;
-    constructor() {
-        super();
-        this.selectors = [];
-    }
+    selectors = [];
     load(data) {
         super.load(data);
         if (isNull(data)) {
             return;
         }
-        if (data.selectors !== undefined) {
-            this.selectors = data.selectors;
-        }
+        loadProperty(this, "selectors", data.selectors);
     }
 }

package/esm/index.js

@@ -1,7 +1,7 @@
 import { ensureInteractivityPluginLoaded } from "@tsparticles/plugin-interactivity";
 import { Bubbler } from "./Bubbler.js";
 export async function loadExternalBubbleInteraction(engine) {
-    engine.checkVersion("4.1.3");
+    engine.checkVersion("4.2.0");
     await engine.pluginManager.register((e) => {
         ensureInteractivityPluginLoaded(e);
         e.pluginManager.addInteractor?.("externalBubble", container => {

package/esm/index.lazy.js

@@ -1,5 +1,5 @@
 export async function loadExternalBubbleInteraction(engine) {
-    engine.checkVersion("4.1.3");
+    engine.checkVersion("4.2.0");
     await engine.pluginManager.register(async (e) => {
         const { ensureInteractivityPluginLoaded } = await import("@tsparticles/plugin-interactivity/lazy");
         ensureInteractivityPluginLoaded(e);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/interaction-external-bubble",
-  "version": "4.1.3",
+  "version": "4.2.0",
   "description": "tsParticles bubble external interaction",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -97,7 +97,7 @@
   },
   "type": "module",
   "peerDependencies": {
-    "@tsparticles/engine": "4.1.3",
-    "@tsparticles/plugin-interactivity": "4.1.3"
+    "@tsparticles/engine": "4.2.0",
+    "@tsparticles/plugin-interactivity": "4.2.0"
   }
 }

package/report.html

@@ -4930,7 +4930,7 @@ var drawChart = (function (exports) {
   </script>
   <script>
     /*<!--*/
-    const data = {"version":2,"tree":{"name":"root","children":[{"name":"tsparticles.interaction.external.bubble.js","children":[{"name":"dist/browser","children":[{"name":"Options/Classes","children":[{"uid":"8046929f-1","name":"BubbleBase.js"},{"uid":"8046929f-3","name":"BubbleDiv.js"},{"uid":"8046929f-5","name":"Bubble.js"}]},{"uid":"8046929f-7","name":"Enums.js"},{"uid":"8046929f-9","name":"Utils.js"},{"uid":"8046929f-11","name":"Bubbler.js"},{"uid":"8046929f-13","name":"index.js"},{"uid":"8046929f-15","name":"browser.js"}]}]}],"isRoot":true},"nodeParts":{"8046929f-1":{"renderedLength":1198,"gzipLength":0,"brotliLength":0,"metaUid":"8046929f-0"},"8046929f-3":{"renderedLength":402,"gzipLength":0,"brotliLength":0,"metaUid":"8046929f-2"},"8046929f-5":{"renderedLength":392,"gzipLength":0,"brotliLength":0,"metaUid":"8046929f-4"},"8046929f-7":{"renderedLength":257,"gzipLength":0,"brotliLength":0,"metaUid":"8046929f-6"},"8046929f-9":{"renderedLength":508,"gzipLength":0,"brotliLength":0,"metaUid":"8046929f-8"},"8046929f-11":{"renderedLength":14061,"gzipLength":0,"brotliLength":0,"metaUid":"8046929f-10"},"8046929f-13":{"renderedLength":409,"gzipLength":0,"brotliLength":0,"metaUid":"8046929f-12"},"8046929f-15":{"renderedLength":201,"gzipLength":0,"brotliLength":0,"metaUid":"8046929f-14"}},"nodeMetas":{"8046929f-0":{"id":"/dist/browser/Options/Classes/BubbleBase.js","moduleParts":{"tsparticles.interaction.external.bubble.js":"8046929f-1"},"imported":[{"uid":"8046929f-17"}],"importedBy":[{"uid":"8046929f-12"},{"uid":"8046929f-2"},{"uid":"8046929f-4"}]},"8046929f-2":{"id":"/dist/browser/Options/Classes/BubbleDiv.js","moduleParts":{"tsparticles.interaction.external.bubble.js":"8046929f-3"},"imported":[{"uid":"8046929f-17"},{"uid":"8046929f-0"}],"importedBy":[{"uid":"8046929f-12"},{"uid":"8046929f-4"}]},"8046929f-4":{"id":"/dist/browser/Options/Classes/Bubble.js","moduleParts":{"tsparticles.interaction.external.bubble.js":"8046929f-5"},"imported":[{"uid":"8046929f-17"},{"uid":"8046929f-0"},{"uid":"8046929f-2"}],"importedBy":[{"uid":"8046929f-12"},{"uid":"8046929f-10"}]},"8046929f-6":{"id":"/dist/browser/Enums.js","moduleParts":{"tsparticles.interaction.external.bubble.js":"8046929f-7"},"imported":[],"importedBy":[{"uid":"8046929f-10"}]},"8046929f-8":{"id":"/dist/browser/Utils.js","moduleParts":{"tsparticles.interaction.external.bubble.js":"8046929f-9"},"imported":[{"uid":"8046929f-17"}],"importedBy":[{"uid":"8046929f-10"}]},"8046929f-10":{"id":"/dist/browser/Bubbler.js","moduleParts":{"tsparticles.interaction.external.bubble.js":"8046929f-11"},"imported":[{"uid":"8046929f-17"},{"uid":"8046929f-16"},{"uid":"8046929f-4"},{"uid":"8046929f-6"},{"uid":"8046929f-8"}],"importedBy":[{"uid":"8046929f-12"}]},"8046929f-12":{"id":"/dist/browser/index.js","moduleParts":{"tsparticles.interaction.external.bubble.js":"8046929f-13"},"imported":[{"uid":"8046929f-16"},{"uid":"8046929f-10"},{"uid":"8046929f-0"},{"uid":"8046929f-2"},{"uid":"8046929f-4"}],"importedBy":[{"uid":"8046929f-14"}]},"8046929f-14":{"id":"/dist/browser/browser.js","moduleParts":{"tsparticles.interaction.external.bubble.js":"8046929f-15"},"imported":[{"uid":"8046929f-12"}],"importedBy":[],"isEntry":true},"8046929f-16":{"id":"@tsparticles/plugin-interactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"8046929f-12"},{"uid":"8046929f-10"}],"isExternal":true},"8046929f-17":{"id":"@tsparticles/engine","moduleParts":{},"imported":[],"importedBy":[{"uid":"8046929f-10"},{"uid":"8046929f-0"},{"uid":"8046929f-2"},{"uid":"8046929f-4"},{"uid":"8046929f-8"}],"isExternal":true}},"env":{"rollup":"4.60.4"},"options":{"gzip":false,"brotli":false,"sourcemap":false}};
+    const data = {"version":2,"tree":{"name":"root","children":[{"name":"tsparticles.interaction.external.bubble.js","children":[{"name":"dist/browser","children":[{"name":"Options/Classes","children":[{"uid":"cf70f7e3-1","name":"BubbleBase.js"},{"uid":"cf70f7e3-3","name":"BubbleDiv.js"},{"uid":"cf70f7e3-5","name":"Bubble.js"}]},{"uid":"cf70f7e3-7","name":"Enums.js"},{"uid":"cf70f7e3-9","name":"Utils.js"},{"uid":"cf70f7e3-11","name":"Bubbler.js"},{"uid":"cf70f7e3-13","name":"index.js"},{"uid":"cf70f7e3-15","name":"browser.js"}]}]}],"isRoot":true},"nodeParts":{"cf70f7e3-1":{"renderedLength":893,"gzipLength":0,"brotliLength":0,"metaUid":"cf70f7e3-0"},"cf70f7e3-3":{"renderedLength":276,"gzipLength":0,"brotliLength":0,"metaUid":"cf70f7e3-2"},"cf70f7e3-5":{"renderedLength":392,"gzipLength":0,"brotliLength":0,"metaUid":"cf70f7e3-4"},"cf70f7e3-7":{"renderedLength":257,"gzipLength":0,"brotliLength":0,"metaUid":"cf70f7e3-6"},"cf70f7e3-9":{"renderedLength":508,"gzipLength":0,"brotliLength":0,"metaUid":"cf70f7e3-8"},"cf70f7e3-11":{"renderedLength":13938,"gzipLength":0,"brotliLength":0,"metaUid":"cf70f7e3-10"},"cf70f7e3-13":{"renderedLength":409,"gzipLength":0,"brotliLength":0,"metaUid":"cf70f7e3-12"},"cf70f7e3-15":{"renderedLength":201,"gzipLength":0,"brotliLength":0,"metaUid":"cf70f7e3-14"}},"nodeMetas":{"cf70f7e3-0":{"id":"/dist/browser/Options/Classes/BubbleBase.js","moduleParts":{"tsparticles.interaction.external.bubble.js":"cf70f7e3-1"},"imported":[{"uid":"cf70f7e3-17"}],"importedBy":[{"uid":"cf70f7e3-12"},{"uid":"cf70f7e3-2"},{"uid":"cf70f7e3-4"}]},"cf70f7e3-2":{"id":"/dist/browser/Options/Classes/BubbleDiv.js","moduleParts":{"tsparticles.interaction.external.bubble.js":"cf70f7e3-3"},"imported":[{"uid":"cf70f7e3-17"},{"uid":"cf70f7e3-0"}],"importedBy":[{"uid":"cf70f7e3-12"},{"uid":"cf70f7e3-4"}]},"cf70f7e3-4":{"id":"/dist/browser/Options/Classes/Bubble.js","moduleParts":{"tsparticles.interaction.external.bubble.js":"cf70f7e3-5"},"imported":[{"uid":"cf70f7e3-17"},{"uid":"cf70f7e3-0"},{"uid":"cf70f7e3-2"}],"importedBy":[{"uid":"cf70f7e3-12"},{"uid":"cf70f7e3-10"}]},"cf70f7e3-6":{"id":"/dist/browser/Enums.js","moduleParts":{"tsparticles.interaction.external.bubble.js":"cf70f7e3-7"},"imported":[],"importedBy":[{"uid":"cf70f7e3-10"}]},"cf70f7e3-8":{"id":"/dist/browser/Utils.js","moduleParts":{"tsparticles.interaction.external.bubble.js":"cf70f7e3-9"},"imported":[{"uid":"cf70f7e3-17"}],"importedBy":[{"uid":"cf70f7e3-10"}]},"cf70f7e3-10":{"id":"/dist/browser/Bubbler.js","moduleParts":{"tsparticles.interaction.external.bubble.js":"cf70f7e3-11"},"imported":[{"uid":"cf70f7e3-17"},{"uid":"cf70f7e3-16"},{"uid":"cf70f7e3-4"},{"uid":"cf70f7e3-6"},{"uid":"cf70f7e3-8"}],"importedBy":[{"uid":"cf70f7e3-12"}]},"cf70f7e3-12":{"id":"/dist/browser/index.js","moduleParts":{"tsparticles.interaction.external.bubble.js":"cf70f7e3-13"},"imported":[{"uid":"cf70f7e3-16"},{"uid":"cf70f7e3-10"},{"uid":"cf70f7e3-0"},{"uid":"cf70f7e3-2"},{"uid":"cf70f7e3-4"}],"importedBy":[{"uid":"cf70f7e3-14"}]},"cf70f7e3-14":{"id":"/dist/browser/browser.js","moduleParts":{"tsparticles.interaction.external.bubble.js":"cf70f7e3-15"},"imported":[{"uid":"cf70f7e3-12"}],"importedBy":[],"isEntry":true},"cf70f7e3-16":{"id":"@tsparticles/plugin-interactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"cf70f7e3-12"},{"uid":"cf70f7e3-10"}],"isExternal":true},"cf70f7e3-17":{"id":"@tsparticles/engine","moduleParts":{},"imported":[],"importedBy":[{"uid":"cf70f7e3-10"},{"uid":"cf70f7e3-0"},{"uid":"cf70f7e3-2"},{"uid":"cf70f7e3-4"},{"uid":"cf70f7e3-8"}],"isExternal":true}},"env":{"rollup":"4.62.0"},"options":{"gzip":false,"brotli":false,"sourcemap":false}};
 
     const run = () => {
       const width = window.innerWidth;

package/tsparticles.interaction.external.bubble.js

@@ -1,5 +1,5 @@
 (function(g){g.__tsParticlesInternals=g.__tsParticlesInternals||{};g.__tsParticlesInternals.bundles=g.__tsParticlesInternals.bundles||{};g.__tsParticlesInternals.effects=g.__tsParticlesInternals.effects||{};g.__tsParticlesInternals.engine=g.__tsParticlesInternals.engine||{};g.__tsParticlesInternals.interactions=g.__tsParticlesInternals.interactions||{};g.__tsParticlesInternals.palettes=g.__tsParticlesInternals.palettes||{};g.__tsParticlesInternals.paths=g.__tsParticlesInternals.paths||{};g.__tsParticlesInternals.plugins=g.__tsParticlesInternals.plugins||{};g.__tsParticlesInternals.plugins=g.__tsParticlesInternals.plugins||{};g.__tsParticlesInternals.plugins.emittersShapes=g.__tsParticlesInternals.plugins.emittersShapes||{};g.__tsParticlesInternals.presets=g.__tsParticlesInternals.presets||{};g.__tsParticlesInternals.shapes=g.__tsParticlesInternals.shapes||{};g.__tsParticlesInternals.updaters=g.__tsParticlesInternals.updaters||{};g.__tsParticlesInternals.utils=g.__tsParticlesInternals.utils||{};g.__tsParticlesInternals.canvas=g.__tsParticlesInternals.canvas||{};g.__tsParticlesInternals.canvas=g.__tsParticlesInternals.canvas||{};g.__tsParticlesInternals.canvas.utils=g.__tsParticlesInternals.canvas.utils||{};g.__tsParticlesInternals.path=g.__tsParticlesInternals.path||{};g.__tsParticlesInternals.path=g.__tsParticlesInternals.path||{};g.__tsParticlesInternals.path.utils=g.__tsParticlesInternals.path.utils||{};var __tsProxyFactory=typeof Proxy!=="undefined"?function(obj){return new Proxy(obj,{get:function(target,key){if(!(key in target)){target[key]={};}return target[key];}});}:function(obj){return obj;};g.__tsParticlesInternals.bundles=__tsProxyFactory(g.__tsParticlesInternals.bundles);g.__tsParticlesInternals.effects=__tsProxyFactory(g.__tsParticlesInternals.effects);g.__tsParticlesInternals.interactions=__tsProxyFactory(g.__tsParticlesInternals.interactions);g.__tsParticlesInternals.palettes=__tsProxyFactory(g.__tsParticlesInternals.palettes);g.__tsParticlesInternals.paths=__tsProxyFactory(g.__tsParticlesInternals.paths);g.__tsParticlesInternals.plugins=__tsProxyFactory(g.__tsParticlesInternals.plugins);g.__tsParticlesInternals.plugins.emittersShapes=__tsProxyFactory(g.__tsParticlesInternals.plugins.emittersShapes);g.__tsParticlesInternals.presets=__tsProxyFactory(g.__tsParticlesInternals.presets);g.__tsParticlesInternals.shapes=__tsProxyFactory(g.__tsParticlesInternals.shapes);g.__tsParticlesInternals.updaters=__tsProxyFactory(g.__tsParticlesInternals.updaters);g.__tsParticlesInternals.utils=__tsProxyFactory(g.__tsParticlesInternals.utils);g.__tsParticlesInternals.canvas=__tsProxyFactory(g.__tsParticlesInternals.canvas);g.__tsParticlesInternals.path=__tsProxyFactory(g.__tsParticlesInternals.path);g.tsparticlesInternalExports=g.tsparticlesInternalExports||{};})(typeof globalThis!=="undefined"?globalThis:typeof window!=="undefined"?window:this);
-/* External Interaction v4.1.3 */
+/* External Interaction v4.2.0 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@tsparticles/plugin-interactivity'), require('@tsparticles/engine')) :
     typeof define === 'function' && define.amd ? define(['exports', '@tsparticles/plugin-interactivity', '@tsparticles/engine'], factory) :
@@ -8,58 +8,37 @@
 
     class BubbleBase {
         color;
-        distance;
-        duration;
-        mix;
+        distance = 200;
+        duration = 0.4;
+        mix = false;
         opacity;
         size;
-        constructor() {
-            this.distance = 200;
-            this.duration = 0.4;
-            this.mix = false;
-        }
         load(data) {
             if (engine.isNull(data)) {
                 return;
             }
-            if (data.distance !== undefined) {
-                this.distance = data.distance;
-            }
-            if (data.duration !== undefined) {
-                this.duration = data.duration;
-            }
-            if (data.mix !== undefined) {
-                this.mix = data.mix;
-            }
-            if (data.opacity !== undefined) {
-                this.opacity = data.opacity;
-            }
+            engine.loadProperty(this, "distance", data.distance);
+            engine.loadProperty(this, "duration", data.duration);
+            engine.loadProperty(this, "mix", data.mix);
+            engine.loadRangeProperty(this, "opacity", data.opacity);
             if (data.color !== undefined) {
                 const sourceColor = engine.isArray(this.color) ? undefined : this.color;
                 this.color = engine.executeOnSingleOrMultiple(data.color, color => {
                     return engine.OptionsColor.create(sourceColor, color);
                 });
             }
-            if (data.size !== undefined) {
-                this.size = data.size;
-            }
+            engine.loadProperty(this, "size", data.size);
         }
     }
 
     class BubbleDiv extends BubbleBase {
-        selectors;
-        constructor() {
-            super();
-            this.selectors = [];
-        }
+        selectors = [];
         load(data) {
             super.load(data);
             if (engine.isNull(data)) {
                 return;
             }
-            if (data.selectors !== undefined) {
-                this.selectors = data.selectors;
-            }
+            engine.loadProperty(this, "selectors", data.selectors);
         }
     }
 
@@ -168,15 +147,12 @@
             return engine.isInArray(bubbleMode, onHover.mode) || engine.isInArray(bubbleMode, onClick.mode) || divBubble;
         }
         loadModeOptions(options, ...sources) {
-            options.bubble ??= new Bubble();
-            for (const source of sources) {
-                options.bubble.load(source?.bubble);
-            }
+            engine.loadOptionProperty(options, "bubble", Bubble, ...sources);
         }
         reset(_interactivityData, particle) {
             particle.bubble.inRange = false;
         }
-        #clickBubble = interactivityData => {
+        #clickBubble(interactivityData) {
             const container = this.container, options = container.actualOptions, mouseClickPos = interactivityData.mouse.clickPosition, bubbleOptions = options.interactivity?.modes.bubble;
             if (!bubbleOptions || !mouseClickPos) {
                 return;
@@ -231,8 +207,8 @@
                     delete particle.bubble.color;
                 }
             }
-        };
-        #hoverBubble = interactivityData => {
+        }
+        #hoverBubble(interactivityData) {
             const container = this.container, mousePos = interactivityData.mouse.position, distance = container.retina.bubbleModeDistance;
             if (!distance || distance < minDistance || !mousePos) {
                 return;
@@ -255,8 +231,8 @@
                     this.reset(interactivityData, particle);
                 }
             }
-        };
-        #hoverBubbleColor = (particle, ratio, divBubble) => {
+        }
+        #hoverBubbleColor(particle, ratio, divBubble) {
             const options = this.container.actualOptions, bubbleOptions = divBubble ?? options.interactivity?.modes.bubble;
             if (!bubbleOptions) {
                 return;
@@ -282,8 +258,8 @@
             else {
                 particle.bubble.color = particle.bubble.finalColor;
             }
-        };
-        #hoverBubbleOpacity = (particle, ratio, divBubble) => {
+        }
+        #hoverBubbleOpacity(particle, ratio, divBubble) {
             const container = this.container, options = container.actualOptions, modeOpacity = divBubble?.opacity ?? options.interactivity?.modes.bubble?.opacity;
             if (!modeOpacity) {
                 return;
@@ -292,8 +268,8 @@
             if (opacity !== undefined) {
                 particle.bubble.opacity = opacity;
             }
-        };
-        #hoverBubbleSize = (particle, ratio, divBubble) => {
+        }
+        #hoverBubbleSize(particle, ratio, divBubble) {
             const container = this.container, modeSize = divBubble?.size ? divBubble.size * container.retina.pixelRatio : container.retina.bubbleModeSize;
             if (modeSize === undefined) {
                 return;
@@ -302,8 +278,8 @@
             if (size !== undefined) {
                 particle.bubble.radius = size;
             }
-        };
-        #process = (particle, distMouse, timeSpent, data) => {
+        }
+        #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;
@@ -345,8 +321,8 @@
                     }
                 }
             }
-        };
-        #singleSelectorHover = (interactivityData, delta, selector, div) => {
+        }
+        #singleSelectorHover(interactivityData, delta, selector, div) {
             const container = this.container, selectors = engine.safeDocument().querySelectorAll(selector), bubble = container.actualOptions.interactivity?.modes.bubble;
             if (!bubble || !selectors.length) {
                 return;
@@ -373,11 +349,11 @@
                     this.#hoverBubbleColor(particle, defaultRatio, divBubble);
                 }
             });
-        };
+        }
     }
 
     async function loadExternalBubbleInteraction(engine) {
-        engine.checkVersion("4.1.3");
+        engine.checkVersion("4.2.0");
         await engine.pluginManager.register((e) => {
             pluginInteractivity.ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalBubble", container => {

package/tsparticles.interaction.external.bubble.min.js

@@ -1 +1 @@
-!function(e){e.__tsParticlesInternals=e.__tsParticlesInternals||{},e.__tsParticlesInternals.bundles=e.__tsParticlesInternals.bundles||{},e.__tsParticlesInternals.effects=e.__tsParticlesInternals.effects||{},e.__tsParticlesInternals.engine=e.__tsParticlesInternals.engine||{},e.__tsParticlesInternals.interactions=e.__tsParticlesInternals.interactions||{},e.__tsParticlesInternals.palettes=e.__tsParticlesInternals.palettes||{},e.__tsParticlesInternals.paths=e.__tsParticlesInternals.paths||{},e.__tsParticlesInternals.plugins=e.__tsParticlesInternals.plugins||{},e.__tsParticlesInternals.plugins=e.__tsParticlesInternals.plugins||{},e.__tsParticlesInternals.plugins.emittersShapes=e.__tsParticlesInternals.plugins.emittersShapes||{},e.__tsParticlesInternals.presets=e.__tsParticlesInternals.presets||{},e.__tsParticlesInternals.shapes=e.__tsParticlesInternals.shapes||{},e.__tsParticlesInternals.updaters=e.__tsParticlesInternals.updaters||{},e.__tsParticlesInternals.utils=e.__tsParticlesInternals.utils||{},e.__tsParticlesInternals.canvas=e.__tsParticlesInternals.canvas||{},e.__tsParticlesInternals.canvas=e.__tsParticlesInternals.canvas||{},e.__tsParticlesInternals.canvas.utils=e.__tsParticlesInternals.canvas.utils||{},e.__tsParticlesInternals.path=e.__tsParticlesInternals.path||{},e.__tsParticlesInternals.path=e.__tsParticlesInternals.path||{},e.__tsParticlesInternals.path.utils=e.__tsParticlesInternals.path.utils||{};var t="undefined"!=typeof Proxy?function(e){return new Proxy(e,{get:function(e,t){return t in e||(e[t]={}),e[t]}})}:function(e){return e};e.__tsParticlesInternals.bundles=t(e.__tsParticlesInternals.bundles),e.__tsParticlesInternals.effects=t(e.__tsParticlesInternals.effects),e.__tsParticlesInternals.interactions=t(e.__tsParticlesInternals.interactions),e.__tsParticlesInternals.palettes=t(e.__tsParticlesInternals.palettes),e.__tsParticlesInternals.paths=t(e.__tsParticlesInternals.paths),e.__tsParticlesInternals.plugins=t(e.__tsParticlesInternals.plugins),e.__tsParticlesInternals.plugins.emittersShapes=t(e.__tsParticlesInternals.plugins.emittersShapes),e.__tsParticlesInternals.presets=t(e.__tsParticlesInternals.presets),e.__tsParticlesInternals.shapes=t(e.__tsParticlesInternals.shapes),e.__tsParticlesInternals.updaters=t(e.__tsParticlesInternals.updaters),e.__tsParticlesInternals.utils=t(e.__tsParticlesInternals.utils),e.__tsParticlesInternals.canvas=t(e.__tsParticlesInternals.canvas),e.__tsParticlesInternals.path=t(e.__tsParticlesInternals.path),e.tsparticlesInternalExports=e.tsparticlesInternalExports||{}}("undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:this),function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@tsparticles/plugin-interactivity"),require("@tsparticles/engine")):"function"==typeof define&&define.amd?define(["exports","@tsparticles/plugin-interactivity","@tsparticles/engine"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self).__tsParticlesInternals=e.__tsParticlesInternals||{},e.__tsParticlesInternals.interactions=e.__tsParticlesInternals.interactions||{},e.__tsParticlesInternals.interactions.externalBubble=e.__tsParticlesInternals.interactions.externalBubble||{}),e.__tsParticlesInternals.plugins.interactivity,e.__tsParticlesInternals.engine)}(this,function(e,t,s){"use strict";class i{color;distance;duration;mix;opacity;size;constructor(){this.distance=200,this.duration=.4,this.mix=!1}load(e){if(!s.isNull(e)){if(void 0!==e.distance&&(this.distance=e.distance),void 0!==e.duration&&(this.duration=e.duration),void 0!==e.mix&&(this.mix=e.mix),void 0!==e.opacity&&(this.opacity=e.opacity),void 0!==e.color){const t=s.isArray(this.color)?void 0:this.color;this.color=s.executeOnSingleOrMultiple(e.color,e=>s.OptionsColor.create(t,e))}void 0!==e.size&&(this.size=e.size)}}}class n extends i{selectors;constructor(){super(),this.selectors=[]}load(e){super.load(e),s.isNull(e)||void 0!==e.selectors&&(this.selectors=e.selectors)}}class l extends i{divs;load(e){super.load(e),s.isNull(e)||(this.divs=s.executeOnSingleOrMultiple(e.divs,e=>{const t=new n;return t.load(e),t}))}}var a;function r(e,t,i,n){if(t>=i){const l=e+(t-i)*n;return s.clamp(l,e,t)}if(t<i){const l=e-(i-t)*n;return s.clamp(l,t,e)}}!function(e){e.color="color",e.opacity="opacity",e.size="size"}(a||(a={}));const o="bubble";class c extends t.ExternalInteractorBase{handleClickMode;#e;#t;constructor(e,t){super(t),this.#t=e,this.#e=0,t.bubble??={},this.handleClickMode=e=>{e===o&&(t.bubble??={},t.bubble.clicking=!0)}}get maxDistance(){return this.#e}clear(e,t,s){e.bubble.inRange&&!s||(delete e.bubble.div,delete e.bubble.opacity,delete e.bubble.radius,delete e.bubble.color)}init(){const e=this.container,t=e.actualOptions.interactivity?.modes.bubble;t&&(this.#e=t.distance,e.retina.bubbleModeDistance=t.distance*e.retina.pixelRatio,void 0!==t.size&&(e.retina.bubbleModeSize=t.size*e.retina.pixelRatio))}interact(e,i){const n=this.container.actualOptions,l=n.interactivity?.events;if(!l)return;const a=l.onHover,r=l.onClick,c=a.enable,b=a.mode,u=r.enable,_=r.mode,d=l.onDiv;c&&s.isInArray(o,b)?this.#s(e):u&&s.isInArray(o,_)?this.#i(e):t.divModeExecute(o,d,(t,s)=>{this.#n(e,i,t,s)})}isEnabled(e,i){const n=this.container.actualOptions,l=e.mouse,a=(i?.interactivity??n.interactivity)?.events;if(!a)return!1;const{onClick:r,onDiv:c,onHover:b}=a,u=t.isDivModeEnabled(o,c);return!!(u||b.enable&&l.position||r.enable&&l.clickPosition)&&(s.isInArray(o,b.mode)||s.isInArray(o,r.mode)||u)}loadModeOptions(e,...t){e.bubble??=new l;for(const s of t)e.bubble.load(s?.bubble)}reset(e,t){t.bubble.inRange=!1}#i=e=>{const t=this.container,i=t.actualOptions,n=e.mouse.clickPosition,l=i.interactivity?.modes.bubble;if(!l||!n)return;t.bubble??={};const r=t.retina.bubbleModeDistance;if(!r||r<0)return;const o=t.particles.grid.queryCircle(n,r,t=>this.isEnabled(e,t)),{bubble:c}=t;for(const i of o){if(!c.clicking)continue;i.bubble.inRange=!c.durationEnd;const o=i.getPosition(),b=s.getDistance(o,n),u=(performance.now()-(e.mouse.clickTime??0))/s.millisecondsToSeconds;u>l.duration&&(c.durationEnd=!0),u>l.duration*s.double&&(c.clicking=!1,c.durationEnd=!1);const _={bubbleObj:{optValue:t.retina.bubbleModeSize,value:i.bubble.radius},particlesObj:{optValue:i.size.max,value:i.size.value},type:a.size};this.#l(i,b,u,_);const d={bubbleObj:{optValue:l.opacity,value:i.bubble.opacity},particlesObj:{optValue:i.opacity?.max??1,value:i.opacity?.value??1},type:a.opacity};this.#l(i,b,u,d),!c.durationEnd&&b<=r?this.#a(i,b):delete i.bubble.color}};#s=e=>{const i=this.container,n=e.mouse.position,l=i.retina.bubbleModeDistance;if(!l||l<0||!n)return;const a=i.particles.grid.queryCircle(n,l,t=>this.isEnabled(e,t));for(const i of a){i.bubble.inRange=!0;const a=i.getPosition(),r=s.getDistance(a,n),o=1-r/l;r<=l?o>=0&&e.status===t.mouseMoveEvent&&(this.#r(i,o),this.#o(i,o),this.#a(i,o)):this.reset(e,i),e.status===t.mouseLeaveEvent&&this.reset(e,i)}};#a=(e,t,i)=>{const n=this.container.actualOptions,l=i??n.interactivity?.modes.bubble;if(l){if(!e.bubble.finalColor){const t=l.color;if(!t)return;const i=s.itemFromSingleOrMultiple(t);e.bubble.finalColor=s.rangeColorToHsl(this.#t,i)}if(e.bubble.finalColor)if(l.mix){e.bubble.color=void 0;const i=e.getFillColor();e.bubble.color=i?s.rgbToHsl(s.colorMix(i,e.bubble.finalColor,1-t,t)):e.bubble.finalColor}else e.bubble.color=e.bubble.finalColor}};#o=(e,t,s)=>{const i=this.container.actualOptions,n=s?.opacity??i.interactivity?.modes.bubble?.opacity;if(!n)return;const l=r(e.opacity?.value??1,n,e.opacity?.max??1,t);void 0!==l&&(e.bubble.opacity=l)};#r=(e,t,s)=>{const i=this.container,n=s?.size?s.size*i.retina.pixelRatio:i.retina.bubbleModeSize;if(void 0===n)return;const l=r(e.size.value,n,e.size.max,t);void 0!==l&&(e.bubble.radius=l)};#l=(e,t,s,i)=>{const n=this.container,l=i.bubbleObj.optValue,r=n.actualOptions,o=r.interactivity?.modes.bubble;if(!o||void 0===l)return;const c=o.duration,b=n.retina.bubbleModeDistance,u=i.particlesObj.optValue,_=i.bubbleObj.value,d=i.particlesObj.value??0,p=i.type;if(b&&!(b<0)&&l!==u)if(n.bubble??={},n.bubble.durationEnd)_&&(p===a.size&&delete e.bubble.radius,p===a.opacity&&delete e.bubble.opacity);else if(t<=b){if((_??d)!==l){const t=d-s*(d-l)/c;p===a.size&&(e.bubble.radius=t),p===a.opacity&&(e.bubble.opacity=t)}}else p===a.size&&delete e.bubble.radius,p===a.opacity&&delete e.bubble.opacity};#n=(e,i,n,l)=>{const a=this.container,r=s.safeDocument().querySelectorAll(n),o=a.actualOptions.interactivity?.modes.bubble;o&&r.length&&r.forEach(n=>{const r=n,c=a.retina.pixelRatio,b={x:(r.offsetLeft+r.offsetWidth*s.half)*c,y:(r.offsetTop+r.offsetHeight*s.half)*c},u=r.offsetWidth*s.half*c,_=l.type===t.DivType.circle?new s.Circle(b.x,b.y,u):new s.Rectangle(r.offsetLeft*c,r.offsetTop*c,r.offsetWidth*c,r.offsetHeight*c),d=a.particles.grid.query(_,t=>this.isEnabled(e,t));for(const e of d){if(!_.contains(e.getPosition()))continue;e.bubble.inRange=!0;const s=o.divs,n=t.divMode(s,r);e.bubble.div&&e.bubble.div===r||(this.clear(e,i,!0),e.bubble.div=r),this.#r(e,1,n),this.#o(e,1,n),this.#a(e,1,n)}})}}async function b(e){e.checkVersion("4.1.3"),await e.pluginManager.register(e=>{t.ensureInteractivityPluginLoaded(e),e.pluginManager.addInteractor?.("externalBubble",t=>Promise.resolve(new c(e.pluginManager,t)))})}const u=globalThis;u.__tsParticlesInternals=u.__tsParticlesInternals??{},u.loadExternalBubbleInteraction=b,e.Bubble=l,e.BubbleBase=i,e.BubbleDiv=n,e.loadExternalBubbleInteraction=b}),Object.assign(globalThis.window||globalThis,{loadExternalBubbleInteraction:(globalThis.__tsParticlesInternals.interactions.externalBubble||{}).loadExternalBubbleInteraction}),delete(globalThis.window||globalThis).tsparticlesInternalExports;
+!function(e){e.__tsParticlesInternals=e.__tsParticlesInternals||{},e.__tsParticlesInternals.bundles=e.__tsParticlesInternals.bundles||{},e.__tsParticlesInternals.effects=e.__tsParticlesInternals.effects||{},e.__tsParticlesInternals.engine=e.__tsParticlesInternals.engine||{},e.__tsParticlesInternals.interactions=e.__tsParticlesInternals.interactions||{},e.__tsParticlesInternals.palettes=e.__tsParticlesInternals.palettes||{},e.__tsParticlesInternals.paths=e.__tsParticlesInternals.paths||{},e.__tsParticlesInternals.plugins=e.__tsParticlesInternals.plugins||{},e.__tsParticlesInternals.plugins=e.__tsParticlesInternals.plugins||{},e.__tsParticlesInternals.plugins.emittersShapes=e.__tsParticlesInternals.plugins.emittersShapes||{},e.__tsParticlesInternals.presets=e.__tsParticlesInternals.presets||{},e.__tsParticlesInternals.shapes=e.__tsParticlesInternals.shapes||{},e.__tsParticlesInternals.updaters=e.__tsParticlesInternals.updaters||{},e.__tsParticlesInternals.utils=e.__tsParticlesInternals.utils||{},e.__tsParticlesInternals.canvas=e.__tsParticlesInternals.canvas||{},e.__tsParticlesInternals.canvas=e.__tsParticlesInternals.canvas||{},e.__tsParticlesInternals.canvas.utils=e.__tsParticlesInternals.canvas.utils||{},e.__tsParticlesInternals.path=e.__tsParticlesInternals.path||{},e.__tsParticlesInternals.path=e.__tsParticlesInternals.path||{},e.__tsParticlesInternals.path.utils=e.__tsParticlesInternals.path.utils||{};var t="undefined"!=typeof Proxy?function(e){return new Proxy(e,{get:function(e,t){return t in e||(e[t]={}),e[t]}})}:function(e){return e};e.__tsParticlesInternals.bundles=t(e.__tsParticlesInternals.bundles),e.__tsParticlesInternals.effects=t(e.__tsParticlesInternals.effects),e.__tsParticlesInternals.interactions=t(e.__tsParticlesInternals.interactions),e.__tsParticlesInternals.palettes=t(e.__tsParticlesInternals.palettes),e.__tsParticlesInternals.paths=t(e.__tsParticlesInternals.paths),e.__tsParticlesInternals.plugins=t(e.__tsParticlesInternals.plugins),e.__tsParticlesInternals.plugins.emittersShapes=t(e.__tsParticlesInternals.plugins.emittersShapes),e.__tsParticlesInternals.presets=t(e.__tsParticlesInternals.presets),e.__tsParticlesInternals.shapes=t(e.__tsParticlesInternals.shapes),e.__tsParticlesInternals.updaters=t(e.__tsParticlesInternals.updaters),e.__tsParticlesInternals.utils=t(e.__tsParticlesInternals.utils),e.__tsParticlesInternals.canvas=t(e.__tsParticlesInternals.canvas),e.__tsParticlesInternals.path=t(e.__tsParticlesInternals.path),e.tsparticlesInternalExports=e.tsparticlesInternalExports||{}}("undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:this),function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@tsparticles/plugin-interactivity"),require("@tsparticles/engine")):"function"==typeof define&&define.amd?define(["exports","@tsparticles/plugin-interactivity","@tsparticles/engine"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self).__tsParticlesInternals=e.__tsParticlesInternals||{},e.__tsParticlesInternals.interactions=e.__tsParticlesInternals.interactions||{},e.__tsParticlesInternals.interactions.externalBubble=e.__tsParticlesInternals.interactions.externalBubble||{}),e.__tsParticlesInternals.plugins.interactivity,e.__tsParticlesInternals.engine)}(this,function(e,t,s){"use strict";class i{color;distance=200;duration=.4;mix=!1;opacity;size;load(e){if(!s.isNull(e)){if(s.loadProperty(this,"distance",e.distance),s.loadProperty(this,"duration",e.duration),s.loadProperty(this,"mix",e.mix),s.loadRangeProperty(this,"opacity",e.opacity),void 0!==e.color){const t=s.isArray(this.color)?void 0:this.color;this.color=s.executeOnSingleOrMultiple(e.color,e=>s.OptionsColor.create(t,e))}s.loadProperty(this,"size",e.size)}}}class n extends i{selectors=[];load(e){super.load(e),s.isNull(e)||s.loadProperty(this,"selectors",e.selectors)}}class l extends i{divs;load(e){super.load(e),s.isNull(e)||(this.divs=s.executeOnSingleOrMultiple(e.divs,e=>{const t=new n;return t.load(e),t}))}}var a;function r(e,t,i,n){if(t>=i){const l=e+(t-i)*n;return s.clamp(l,e,t)}if(t<i){const l=e-(i-t)*n;return s.clamp(l,t,e)}}!function(e){e.color="color",e.opacity="opacity",e.size="size"}(a||(a={}));const o="bubble";class c extends t.ExternalInteractorBase{handleClickMode;#e;#t;constructor(e,t){super(t),this.#t=e,this.#e=0,t.bubble??={},this.handleClickMode=e=>{e===o&&(t.bubble??={},t.bubble.clicking=!0)}}get maxDistance(){return this.#e}clear(e,t,s){e.bubble.inRange&&!s||(delete e.bubble.div,delete e.bubble.opacity,delete e.bubble.radius,delete e.bubble.color)}init(){const e=this.container,t=e.actualOptions.interactivity?.modes.bubble;t&&(this.#e=t.distance,e.retina.bubbleModeDistance=t.distance*e.retina.pixelRatio,void 0!==t.size&&(e.retina.bubbleModeSize=t.size*e.retina.pixelRatio))}interact(e,i){const n=this.container.actualOptions,l=n.interactivity?.events;if(!l)return;const a=l.onHover,r=l.onClick,c=a.enable,b=a.mode,u=r.enable,_=r.mode,p=l.onDiv;c&&s.isInArray(o,b)?this.#s(e):u&&s.isInArray(o,_)?this.#i(e):t.divModeExecute(o,p,(t,s)=>{this.#n(e,i,t,s)})}isEnabled(e,i){const n=this.container.actualOptions,l=e.mouse,a=(i?.interactivity??n.interactivity)?.events;if(!a)return!1;const{onClick:r,onDiv:c,onHover:b}=a,u=t.isDivModeEnabled(o,c);return!!(u||b.enable&&l.position||r.enable&&l.clickPosition)&&(s.isInArray(o,b.mode)||s.isInArray(o,r.mode)||u)}loadModeOptions(e,...t){s.loadOptionProperty(e,"bubble",l,...t)}reset(e,t){t.bubble.inRange=!1}#i(e){const t=this.container,i=t.actualOptions,n=e.mouse.clickPosition,l=i.interactivity?.modes.bubble;if(!l||!n)return;t.bubble??={};const r=t.retina.bubbleModeDistance;if(!r||r<0)return;const o=t.particles.grid.queryCircle(n,r,t=>this.isEnabled(e,t)),{bubble:c}=t;for(const i of o){if(!c.clicking)continue;i.bubble.inRange=!c.durationEnd;const o=i.getPosition(),b=s.getDistance(o,n),u=(performance.now()-(e.mouse.clickTime??0))/s.millisecondsToSeconds;u>l.duration&&(c.durationEnd=!0),u>l.duration*s.double&&(c.clicking=!1,c.durationEnd=!1);const _={bubbleObj:{optValue:t.retina.bubbleModeSize,value:i.bubble.radius},particlesObj:{optValue:i.size.max,value:i.size.value},type:a.size};this.#l(i,b,u,_);const p={bubbleObj:{optValue:l.opacity,value:i.bubble.opacity},particlesObj:{optValue:i.opacity?.max??1,value:i.opacity?.value??1},type:a.opacity};this.#l(i,b,u,p),!c.durationEnd&&b<=r?this.#a(i,b):delete i.bubble.color}}#s(e){const i=this.container,n=e.mouse.position,l=i.retina.bubbleModeDistance;if(!l||l<0||!n)return;const a=i.particles.grid.queryCircle(n,l,t=>this.isEnabled(e,t));for(const i of a){i.bubble.inRange=!0;const a=i.getPosition(),r=s.getDistance(a,n),o=1-r/l;r<=l?o>=0&&e.status===t.mouseMoveEvent&&(this.#r(i,o),this.#o(i,o),this.#a(i,o)):this.reset(e,i),e.status===t.mouseLeaveEvent&&this.reset(e,i)}}#a(e,t,i){const n=this.container.actualOptions,l=i??n.interactivity?.modes.bubble;if(l){if(!e.bubble.finalColor){const t=l.color;if(!t)return;const i=s.itemFromSingleOrMultiple(t);e.bubble.finalColor=s.rangeColorToHsl(this.#t,i)}if(e.bubble.finalColor)if(l.mix){e.bubble.color=void 0;const i=e.getFillColor();e.bubble.color=i?s.rgbToHsl(s.colorMix(i,e.bubble.finalColor,1-t,t)):e.bubble.finalColor}else e.bubble.color=e.bubble.finalColor}}#o(e,t,s){const i=this.container.actualOptions,n=s?.opacity??i.interactivity?.modes.bubble?.opacity;if(!n)return;const l=r(e.opacity?.value??1,n,e.opacity?.max??1,t);void 0!==l&&(e.bubble.opacity=l)}#r(e,t,s){const i=this.container,n=s?.size?s.size*i.retina.pixelRatio:i.retina.bubbleModeSize;if(void 0===n)return;const l=r(e.size.value,n,e.size.max,t);void 0!==l&&(e.bubble.radius=l)}#l(e,t,s,i){const n=this.container,l=i.bubbleObj.optValue,r=n.actualOptions,o=r.interactivity?.modes.bubble;if(!o||void 0===l)return;const c=o.duration,b=n.retina.bubbleModeDistance,u=i.particlesObj.optValue,_=i.bubbleObj.value,p=i.particlesObj.value??0,d=i.type;if(b&&!(b<0)&&l!==u)if(n.bubble??={},n.bubble.durationEnd)_&&(d===a.size&&delete e.bubble.radius,d===a.opacity&&delete e.bubble.opacity);else if(t<=b){if((_??p)!==l){const t=p-s*(p-l)/c;d===a.size&&(e.bubble.radius=t),d===a.opacity&&(e.bubble.opacity=t)}}else d===a.size&&delete e.bubble.radius,d===a.opacity&&delete e.bubble.opacity}#n(e,i,n,l){const a=this.container,r=s.safeDocument().querySelectorAll(n),o=a.actualOptions.interactivity?.modes.bubble;o&&r.length&&r.forEach(n=>{const r=n,c=a.retina.pixelRatio,b={x:(r.offsetLeft+r.offsetWidth*s.half)*c,y:(r.offsetTop+r.offsetHeight*s.half)*c},u=r.offsetWidth*s.half*c,_=l.type===t.DivType.circle?new s.Circle(b.x,b.y,u):new s.Rectangle(r.offsetLeft*c,r.offsetTop*c,r.offsetWidth*c,r.offsetHeight*c),p=a.particles.grid.query(_,t=>this.isEnabled(e,t));for(const e of p){if(!_.contains(e.getPosition()))continue;e.bubble.inRange=!0;const s=o.divs,n=t.divMode(s,r);e.bubble.div&&e.bubble.div===r||(this.clear(e,i,!0),e.bubble.div=r),this.#r(e,1,n),this.#o(e,1,n),this.#a(e,1,n)}})}}async function b(e){e.checkVersion("4.2.0"),await e.pluginManager.register(e=>{t.ensureInteractivityPluginLoaded(e),e.pluginManager.addInteractor?.("externalBubble",t=>Promise.resolve(new c(e.pluginManager,t)))})}const u=globalThis;u.__tsParticlesInternals=u.__tsParticlesInternals??{},u.loadExternalBubbleInteraction=b,e.Bubble=l,e.BubbleBase=i,e.BubbleDiv=n,e.loadExternalBubbleInteraction=b}),Object.assign(globalThis.window||globalThis,{loadExternalBubbleInteraction:(globalThis.__tsParticlesInternals.interactions.externalBubble||{}).loadExternalBubbleInteraction}),delete(globalThis.window||globalThis).tsparticlesInternalExports;

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

@@ -7,6 +7,5 @@ export declare abstract class BubbleBase implements IBubbleBase, IOptionLoader<I
     mix: boolean;
     opacity?: number;
     size?: number;
-    constructor();
     load(data?: RecursivePartial<IBubbleBase>): void;
 }

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

@@ -3,6 +3,5 @@ import { BubbleBase } from "./BubbleBase.js";
 import type { IBubbleDiv } from "../Interfaces/IBubbleDiv.js";
 export declare class BubbleDiv extends BubbleBase implements IBubbleDiv, IOptionLoader<IBubbleDiv> {
     selectors: SingleOrMultiple<string>;
-    constructor();
     load(data?: RecursivePartial<IBubbleDiv>): void;
 }

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

@@ -1,7 +1,9 @@
-import type { BubbleMode } from "../../Types.js";
+import type { Bubble } from "./Bubble.js";
 import type { InteractivityOptions } from "@tsparticles/plugin-interactivity";
 export type BubbleOptions = InteractivityOptions & {
     interactivity?: {
-        modes: BubbleMode;
+        modes: {
+            bubble?: Bubble;
+        };
     };
 };