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

Comparing version 2.1.4 to 2.2.0

browser/Bubbler.js

@@ -0,2 +1,15 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _Bubbler_container;
 import { Circle, ExternalInteractorBase, Rectangle, clamp, colorMix, divMode, divModeExecute, getDistance, getRangeMax, isDivModeEnabled, isInArray, itemFromArray, mouseLeaveEvent, mouseMoveEvent, rangeColorToHsl, rgbToHsl, } from "tsparticles-engine";
+import { Bubble } from "./Options/Classes/Bubble";
 function calculateBubbleValue(particleValue, modeValue, optionsValue, ratio) {
@@ -19,2 +32,4 @@ if (modeValue >= optionsValue) {
         super(container);
+        _Bubbler_container.set(this, void 0);
+        __classPrivateFieldSet(this, _Bubbler_container, container, "f");
         if (!container.bubble) {
@@ -43,6 +58,13 @@ container.bubble = {};
     init() {
-        // do nothing
+        const container = __classPrivateFieldGet(this, _Bubbler_container, "f"), bubble = container.actualOptions.interactivity.modes.bubble;
+        if (!bubble) {
+            return;
+        }
+        container.retina.bubbleModeDistance = bubble.distance * container.retina.pixelRatio;
+        if (bubble.size !== undefined) {
+            container.retina.bubbleModeSize = bubble.size * container.retina.pixelRatio;
+        }
     }
     async interact() {
-        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;
+        const options = __classPrivateFieldGet(this, _Bubbler_container, "f").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;
         /* on hover event */
@@ -61,3 +83,3 @@ if (hoverEnabled && isInArray("bubble" /* HoverMode.bubble */, hoverMode)) {
         var _a;
-        const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse, events = ((_a = particle === null || particle === void 0 ? void 0 : particle.interactivity) !== null && _a !== void 0 ? _a : options.interactivity).events, divs = events.onDiv, divBubble = isDivModeEnabled("bubble" /* DivMode.bubble */, divs);
+        const container = __classPrivateFieldGet(this, _Bubbler_container, "f"), options = container.actualOptions, mouse = container.interactivity.mouse, events = ((_a = particle === null || particle === void 0 ? void 0 : particle.interactivity) !== null && _a !== void 0 ? _a : options.interactivity).events, divs = events.onDiv, divBubble = isDivModeEnabled("bubble" /* DivMode.bubble */, divs);
         if (!(divBubble || (events.onHover.enable && mouse.position) || (events.onClick.enable && mouse.clickPosition))) {
@@ -70,2 +92,10 @@ return false;
     }
+    loadModeOptions(options, ...sources) {
+        if (!options.bubble) {
+            options.bubble = new Bubble();
+        }
+        for (const source of sources) {
+            options.bubble.load(source === null || source === void 0 ? void 0 : source.bubble);
+        }
+    }
     reset(particle) {
@@ -76,4 +106,4 @@ particle.bubble.inRange = false;
         var _a, _b;
-        const container = this.container, options = container.actualOptions, mouseClickPos = container.interactivity.mouse.clickPosition;
-        if (!mouseClickPos) {
+        const container = __classPrivateFieldGet(this, _Bubbler_container, "f"), options = container.actualOptions, mouseClickPos = container.interactivity.mouse.clickPosition, bubble = options.interactivity.modes.bubble;
+        if (!bubble || !mouseClickPos) {
             return;
@@ -84,3 +114,7 @@ }
         }
-        const distance = container.retina.bubbleModeDistance, query = container.particles.quadTree.queryCircle(mouseClickPos, distance, (p) => this.isEnabled(p));
+        const distance = container.retina.bubbleModeDistance;
+        if (!distance || distance < 0) {
+            return;
+        }
+        const query = container.particles.quadTree.queryCircle(mouseClickPos, distance, (p) => this.isEnabled(p));
         for (const particle of query) {
@@ -92,6 +126,6 @@ if (!container.bubble.clicking) {
             const pos = particle.getPosition(), distMouse = getDistance(pos, mouseClickPos), timeSpent = (new Date().getTime() - (container.interactivity.mouse.clickTime || 0)) / 1000;
-            if (timeSpent > options.interactivity.modes.bubble.duration) {
+            if (timeSpent > bubble.duration) {
                 container.bubble.durationEnd = true;
             }
-            if (timeSpent > options.interactivity.modes.bubble.duration * 2) {
+            if (timeSpent > bubble.duration * 2) {
                 container.bubble.clicking = false;
@@ -114,3 +148,3 @@ container.bubble.durationEnd = false;
                 bubbleObj: {
-                    optValue: options.interactivity.modes.bubble.opacity,
+                    optValue: bubble.opacity,
                     value: particle.bubble.opacity,
@@ -126,3 +160,3 @@ },
             if (!container.bubble.durationEnd) {
-                if (distMouse <= container.retina.bubbleModeDistance) {
+                if (distMouse <= distance) {
                     this.hoverBubbleColor(particle, distMouse);
@@ -140,7 +174,7 @@ }
     hoverBubble() {
-        const container = this.container, mousePos = container.interactivity.mouse.position;
-        if (mousePos === undefined) {
+        const container = __classPrivateFieldGet(this, _Bubbler_container, "f"), mousePos = container.interactivity.mouse.position, distance = container.retina.bubbleModeDistance;
+        if (!distance || distance < 0 || mousePos === undefined) {
             return;
         }
-        const distance = container.retina.bubbleModeDistance, query = container.particles.quadTree.queryCircle(mousePos, distance, (p) => this.isEnabled(p));
+        const query = container.particles.quadTree.queryCircle(mousePos, distance, (p) => this.isEnabled(p));
         //for (const { distance, particle } of query) {
@@ -171,4 +205,7 @@ for (const particle of query) {
     hoverBubbleColor(particle, ratio, divBubble) {
-        const options = this.container.actualOptions;
+        const options = __classPrivateFieldGet(this, _Bubbler_container, "f").actualOptions;
         const bubbleOptions = divBubble !== null && divBubble !== void 0 ? divBubble : options.interactivity.modes.bubble;
+        if (!bubbleOptions) {
+            return;
+        }
         if (!particle.bubble.finalColor) {
@@ -197,4 +234,4 @@ const modeColor = bubbleOptions.color;
     hoverBubbleOpacity(particle, ratio, divBubble) {
-        var _a, _b, _c;
-        const container = this.container, options = container.actualOptions, modeOpacity = (_a = divBubble === null || divBubble === void 0 ? void 0 : divBubble.opacity) !== null && _a !== void 0 ? _a : options.interactivity.modes.bubble.opacity;
+        var _a, _b, _c, _d;
+        const container = __classPrivateFieldGet(this, _Bubbler_container, "f"), options = container.actualOptions, modeOpacity = (_a = divBubble === null || divBubble === void 0 ? void 0 : divBubble.opacity) !== null && _a !== void 0 ? _a : (_b = options.interactivity.modes.bubble) === null || _b === void 0 ? void 0 : _b.opacity;
         if (!modeOpacity) {
@@ -204,3 +241,3 @@ return;
         const optOpacity = particle.options.opacity.value;
-        const pOpacity = (_c = (_b = particle.opacity) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : 1;
+        const pOpacity = (_d = (_c = particle.opacity) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : 1;
         const opacity = calculateBubbleValue(pOpacity, modeOpacity, getRangeMax(optOpacity), ratio);
@@ -212,3 +249,3 @@ if (opacity !== undefined) {
     hoverBubbleSize(particle, ratio, divBubble) {
-        const container = this.container, modeSize = (divBubble === null || divBubble === void 0 ? void 0 : divBubble.size) ? divBubble.size * container.retina.pixelRatio : container.retina.bubbleModeSize;
+        const container = __classPrivateFieldGet(this, _Bubbler_container, "f"), modeSize = (divBubble === null || divBubble === void 0 ? void 0 : divBubble.size) ? divBubble.size * container.retina.pixelRatio : container.retina.bubbleModeSize;
         if (modeSize === undefined) {
@@ -225,8 +262,8 @@ return;
     process(particle, distMouse, timeSpent, data) {
-        const container = this.container, bubbleParam = data.bubbleObj.optValue;
-        if (bubbleParam === undefined) {
+        const container = __classPrivateFieldGet(this, _Bubbler_container, "f"), bubbleParam = data.bubbleObj.optValue, options = container.actualOptions, bubble = options.interactivity.modes.bubble;
+        if (!bubble || bubbleParam === undefined) {
             return;
         }
-        const options = container.actualOptions, bubbleDuration = options.interactivity.modes.bubble.duration, bubbleDistance = container.retina.bubbleModeDistance, particlesParam = data.particlesObj.optValue, pObjBubble = data.bubbleObj.value, pObj = data.particlesObj.value || 0, type = data.type;
-        if (bubbleParam === particlesParam) {
+        const bubbleDuration = bubble.duration, bubbleDistance = container.retina.bubbleModeDistance, particlesParam = data.particlesObj.optValue, pObjBubble = data.bubbleObj.value, pObj = data.particlesObj.value || 0, type = data.type;
+        if (!bubbleDistance || bubbleDistance < 0 || bubbleParam === particlesParam) {
             return;
@@ -269,4 +306,4 @@ }
     singleSelectorHover(selector, div) {
-        const container = this.container, selectors = document.querySelectorAll(selector);
-        if (!selectors.length) {
+        const container = __classPrivateFieldGet(this, _Bubbler_container, "f"), selectors = document.querySelectorAll(selector), bubble = container.actualOptions.interactivity.modes.bubble;
+        if (!bubble || !selectors.length) {
             return;
@@ -286,3 +323,3 @@ }
                 particle.bubble.inRange = true;
-                const divs = container.actualOptions.interactivity.modes.bubble.divs;
+                const divs = bubble.divs;
                 const divBubble = divMode(divs, elem);
@@ -303,1 +340,2 @@ if (!particle.bubble.div || particle.bubble.div !== elem) {
 }
+_Bubbler_container = new WeakMap();

cjs/Bubbler.js

 "use strict";
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _Bubbler_container;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Bubbler = void 0;
 const tsparticles_engine_1 = require("tsparticles-engine");
+const Bubble_1 = require("./Options/Classes/Bubble");
 function calculateBubbleValue(particleValue, modeValue, optionsValue, ratio) {
@@ -18,2 +31,4 @@ if (modeValue >= optionsValue) {
         super(container);
+        _Bubbler_container.set(this, void 0);
+        __classPrivateFieldSet(this, _Bubbler_container, container, "f");
         if (!container.bubble) {
@@ -42,5 +57,13 @@ container.bubble = {};
     init() {
+        const container = __classPrivateFieldGet(this, _Bubbler_container, "f"), bubble = container.actualOptions.interactivity.modes.bubble;
+        if (!bubble) {
+            return;
+        }
+        container.retina.bubbleModeDistance = bubble.distance * container.retina.pixelRatio;
+        if (bubble.size !== undefined) {
+            container.retina.bubbleModeSize = bubble.size * container.retina.pixelRatio;
+        }
     }
     async interact() {
-        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;
+        const options = __classPrivateFieldGet(this, _Bubbler_container, "f").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, tsparticles_engine_1.isInArray)("bubble", hoverMode)) {
@@ -58,3 +81,3 @@ this.hoverBubble();
         var _a;
-        const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse, events = ((_a = particle === null || particle === void 0 ? void 0 : particle.interactivity) !== null && _a !== void 0 ? _a : options.interactivity).events, divs = events.onDiv, divBubble = (0, tsparticles_engine_1.isDivModeEnabled)("bubble", divs);
+        const container = __classPrivateFieldGet(this, _Bubbler_container, "f"), options = container.actualOptions, mouse = container.interactivity.mouse, events = ((_a = particle === null || particle === void 0 ? void 0 : particle.interactivity) !== null && _a !== void 0 ? _a : options.interactivity).events, divs = events.onDiv, divBubble = (0, tsparticles_engine_1.isDivModeEnabled)("bubble", divs);
         if (!(divBubble || (events.onHover.enable && mouse.position) || (events.onClick.enable && mouse.clickPosition))) {
@@ -67,2 +90,10 @@ return false;
     }
+    loadModeOptions(options, ...sources) {
+        if (!options.bubble) {
+            options.bubble = new Bubble_1.Bubble();
+        }
+        for (const source of sources) {
+            options.bubble.load(source === null || source === void 0 ? void 0 : source.bubble);
+        }
+    }
     reset(particle) {
@@ -73,4 +104,4 @@ particle.bubble.inRange = false;
         var _a, _b;
-        const container = this.container, options = container.actualOptions, mouseClickPos = container.interactivity.mouse.clickPosition;
-        if (!mouseClickPos) {
+        const container = __classPrivateFieldGet(this, _Bubbler_container, "f"), options = container.actualOptions, mouseClickPos = container.interactivity.mouse.clickPosition, bubble = options.interactivity.modes.bubble;
+        if (!bubble || !mouseClickPos) {
             return;
@@ -81,3 +112,7 @@ }
         }
-        const distance = container.retina.bubbleModeDistance, query = container.particles.quadTree.queryCircle(mouseClickPos, distance, (p) => this.isEnabled(p));
+        const distance = container.retina.bubbleModeDistance;
+        if (!distance || distance < 0) {
+            return;
+        }
+        const query = container.particles.quadTree.queryCircle(mouseClickPos, distance, (p) => this.isEnabled(p));
         for (const particle of query) {
@@ -89,6 +124,6 @@ if (!container.bubble.clicking) {
             const pos = particle.getPosition(), distMouse = (0, tsparticles_engine_1.getDistance)(pos, mouseClickPos), timeSpent = (new Date().getTime() - (container.interactivity.mouse.clickTime || 0)) / 1000;
-            if (timeSpent > options.interactivity.modes.bubble.duration) {
+            if (timeSpent > bubble.duration) {
                 container.bubble.durationEnd = true;
             }
-            if (timeSpent > options.interactivity.modes.bubble.duration * 2) {
+            if (timeSpent > bubble.duration * 2) {
                 container.bubble.clicking = false;
@@ -111,3 +146,3 @@ container.bubble.durationEnd = false;
                 bubbleObj: {
-                    optValue: options.interactivity.modes.bubble.opacity,
+                    optValue: bubble.opacity,
                     value: particle.bubble.opacity,
@@ -123,3 +158,3 @@ },
             if (!container.bubble.durationEnd) {
-                if (distMouse <= container.retina.bubbleModeDistance) {
+                if (distMouse <= distance) {
                     this.hoverBubbleColor(particle, distMouse);
@@ -137,7 +172,7 @@ }
     hoverBubble() {
-        const container = this.container, mousePos = container.interactivity.mouse.position;
-        if (mousePos === undefined) {
+        const container = __classPrivateFieldGet(this, _Bubbler_container, "f"), mousePos = container.interactivity.mouse.position, distance = container.retina.bubbleModeDistance;
+        if (!distance || distance < 0 || mousePos === undefined) {
             return;
         }
-        const distance = container.retina.bubbleModeDistance, query = container.particles.quadTree.queryCircle(mousePos, distance, (p) => this.isEnabled(p));
+        const query = container.particles.quadTree.queryCircle(mousePos, distance, (p) => this.isEnabled(p));
         for (const particle of query) {
@@ -162,4 +197,7 @@ particle.bubble.inRange = true;
     hoverBubbleColor(particle, ratio, divBubble) {
-        const options = this.container.actualOptions;
+        const options = __classPrivateFieldGet(this, _Bubbler_container, "f").actualOptions;
         const bubbleOptions = divBubble !== null && divBubble !== void 0 ? divBubble : options.interactivity.modes.bubble;
+        if (!bubbleOptions) {
+            return;
+        }
         if (!particle.bubble.finalColor) {
@@ -188,4 +226,4 @@ const modeColor = bubbleOptions.color;
     hoverBubbleOpacity(particle, ratio, divBubble) {
-        var _a, _b, _c;
-        const container = this.container, options = container.actualOptions, modeOpacity = (_a = divBubble === null || divBubble === void 0 ? void 0 : divBubble.opacity) !== null && _a !== void 0 ? _a : options.interactivity.modes.bubble.opacity;
+        var _a, _b, _c, _d;
+        const container = __classPrivateFieldGet(this, _Bubbler_container, "f"), options = container.actualOptions, modeOpacity = (_a = divBubble === null || divBubble === void 0 ? void 0 : divBubble.opacity) !== null && _a !== void 0 ? _a : (_b = options.interactivity.modes.bubble) === null || _b === void 0 ? void 0 : _b.opacity;
         if (!modeOpacity) {
@@ -195,3 +233,3 @@ return;
         const optOpacity = particle.options.opacity.value;
-        const pOpacity = (_c = (_b = particle.opacity) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : 1;
+        const pOpacity = (_d = (_c = particle.opacity) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : 1;
         const opacity = calculateBubbleValue(pOpacity, modeOpacity, (0, tsparticles_engine_1.getRangeMax)(optOpacity), ratio);
@@ -203,3 +241,3 @@ if (opacity !== undefined) {
     hoverBubbleSize(particle, ratio, divBubble) {
-        const container = this.container, modeSize = (divBubble === null || divBubble === void 0 ? void 0 : divBubble.size) ? divBubble.size * container.retina.pixelRatio : container.retina.bubbleModeSize;
+        const container = __classPrivateFieldGet(this, _Bubbler_container, "f"), modeSize = (divBubble === null || divBubble === void 0 ? void 0 : divBubble.size) ? divBubble.size * container.retina.pixelRatio : container.retina.bubbleModeSize;
         if (modeSize === undefined) {
@@ -216,8 +254,8 @@ return;
     process(particle, distMouse, timeSpent, data) {
-        const container = this.container, bubbleParam = data.bubbleObj.optValue;
-        if (bubbleParam === undefined) {
+        const container = __classPrivateFieldGet(this, _Bubbler_container, "f"), bubbleParam = data.bubbleObj.optValue, options = container.actualOptions, bubble = options.interactivity.modes.bubble;
+        if (!bubble || bubbleParam === undefined) {
             return;
         }
-        const options = container.actualOptions, bubbleDuration = options.interactivity.modes.bubble.duration, bubbleDistance = container.retina.bubbleModeDistance, particlesParam = data.particlesObj.optValue, pObjBubble = data.bubbleObj.value, pObj = data.particlesObj.value || 0, type = data.type;
-        if (bubbleParam === particlesParam) {
+        const bubbleDuration = bubble.duration, bubbleDistance = container.retina.bubbleModeDistance, particlesParam = data.particlesObj.optValue, pObjBubble = data.bubbleObj.value, pObj = data.particlesObj.value || 0, type = data.type;
+        if (!bubbleDistance || bubbleDistance < 0 || bubbleParam === particlesParam) {
             return;
@@ -260,4 +298,4 @@ }
     singleSelectorHover(selector, div) {
-        const container = this.container, selectors = document.querySelectorAll(selector);
-        if (!selectors.length) {
+        const container = __classPrivateFieldGet(this, _Bubbler_container, "f"), selectors = document.querySelectorAll(selector), bubble = container.actualOptions.interactivity.modes.bubble;
+        if (!bubble || !selectors.length) {
             return;
@@ -277,3 +315,3 @@ }
                 particle.bubble.inRange = true;
-                const divs = container.actualOptions.interactivity.modes.bubble.divs;
+                const divs = bubble.divs;
                 const divBubble = (0, tsparticles_engine_1.divMode)(divs, elem);
@@ -292,1 +330,2 @@ if (!particle.bubble.div || particle.bubble.div !== elem) {
 exports.Bubbler = Bubbler;
+_Bubbler_container = new WeakMap();

esm/Bubbler.js

@@ -0,2 +1,15 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _Bubbler_container;
 import { Circle, ExternalInteractorBase, Rectangle, clamp, colorMix, divMode, divModeExecute, getDistance, getRangeMax, isDivModeEnabled, isInArray, itemFromArray, mouseLeaveEvent, mouseMoveEvent, rangeColorToHsl, rgbToHsl, } from "tsparticles-engine";
+import { Bubble } from "./Options/Classes/Bubble";
 function calculateBubbleValue(particleValue, modeValue, optionsValue, ratio) {
@@ -15,2 +28,4 @@ if (modeValue >= optionsValue) {
         super(container);
+        _Bubbler_container.set(this, void 0);
+        __classPrivateFieldSet(this, _Bubbler_container, container, "f");
         if (!container.bubble) {
@@ -39,5 +54,13 @@ container.bubble = {};
     init() {
+        const container = __classPrivateFieldGet(this, _Bubbler_container, "f"), bubble = container.actualOptions.interactivity.modes.bubble;
+        if (!bubble) {
+            return;
+        }
+        container.retina.bubbleModeDistance = bubble.distance * container.retina.pixelRatio;
+        if (bubble.size !== undefined) {
+            container.retina.bubbleModeSize = bubble.size * container.retina.pixelRatio;
+        }
     }
     async interact() {
-        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;
+        const options = __classPrivateFieldGet(this, _Bubbler_container, "f").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 && isInArray("bubble", hoverMode)) {
@@ -55,3 +78,3 @@ this.hoverBubble();
         var _a;
-        const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse, events = ((_a = particle === null || particle === void 0 ? void 0 : particle.interactivity) !== null && _a !== void 0 ? _a : options.interactivity).events, divs = events.onDiv, divBubble = isDivModeEnabled("bubble", divs);
+        const container = __classPrivateFieldGet(this, _Bubbler_container, "f"), options = container.actualOptions, mouse = container.interactivity.mouse, events = ((_a = particle === null || particle === void 0 ? void 0 : particle.interactivity) !== null && _a !== void 0 ? _a : options.interactivity).events, divs = events.onDiv, divBubble = isDivModeEnabled("bubble", divs);
         if (!(divBubble || (events.onHover.enable && mouse.position) || (events.onClick.enable && mouse.clickPosition))) {
@@ -64,2 +87,10 @@ return false;
     }
+    loadModeOptions(options, ...sources) {
+        if (!options.bubble) {
+            options.bubble = new Bubble();
+        }
+        for (const source of sources) {
+            options.bubble.load(source === null || source === void 0 ? void 0 : source.bubble);
+        }
+    }
     reset(particle) {
@@ -70,4 +101,4 @@ particle.bubble.inRange = false;
         var _a, _b;
-        const container = this.container, options = container.actualOptions, mouseClickPos = container.interactivity.mouse.clickPosition;
-        if (!mouseClickPos) {
+        const container = __classPrivateFieldGet(this, _Bubbler_container, "f"), options = container.actualOptions, mouseClickPos = container.interactivity.mouse.clickPosition, bubble = options.interactivity.modes.bubble;
+        if (!bubble || !mouseClickPos) {
             return;
@@ -78,3 +109,7 @@ }
         }
-        const distance = container.retina.bubbleModeDistance, query = container.particles.quadTree.queryCircle(mouseClickPos, distance, (p) => this.isEnabled(p));
+        const distance = container.retina.bubbleModeDistance;
+        if (!distance || distance < 0) {
+            return;
+        }
+        const query = container.particles.quadTree.queryCircle(mouseClickPos, distance, (p) => this.isEnabled(p));
         for (const particle of query) {
@@ -86,6 +121,6 @@ if (!container.bubble.clicking) {
             const pos = particle.getPosition(), distMouse = getDistance(pos, mouseClickPos), timeSpent = (new Date().getTime() - (container.interactivity.mouse.clickTime || 0)) / 1000;
-            if (timeSpent > options.interactivity.modes.bubble.duration) {
+            if (timeSpent > bubble.duration) {
                 container.bubble.durationEnd = true;
             }
-            if (timeSpent > options.interactivity.modes.bubble.duration * 2) {
+            if (timeSpent > bubble.duration * 2) {
                 container.bubble.clicking = false;
@@ -108,3 +143,3 @@ container.bubble.durationEnd = false;
                 bubbleObj: {
-                    optValue: options.interactivity.modes.bubble.opacity,
+                    optValue: bubble.opacity,
                     value: particle.bubble.opacity,
@@ -120,3 +155,3 @@ },
             if (!container.bubble.durationEnd) {
-                if (distMouse <= container.retina.bubbleModeDistance) {
+                if (distMouse <= distance) {
                     this.hoverBubbleColor(particle, distMouse);
@@ -134,7 +169,7 @@ }
     hoverBubble() {
-        const container = this.container, mousePos = container.interactivity.mouse.position;
-        if (mousePos === undefined) {
+        const container = __classPrivateFieldGet(this, _Bubbler_container, "f"), mousePos = container.interactivity.mouse.position, distance = container.retina.bubbleModeDistance;
+        if (!distance || distance < 0 || mousePos === undefined) {
             return;
         }
-        const distance = container.retina.bubbleModeDistance, query = container.particles.quadTree.queryCircle(mousePos, distance, (p) => this.isEnabled(p));
+        const query = container.particles.quadTree.queryCircle(mousePos, distance, (p) => this.isEnabled(p));
         for (const particle of query) {
@@ -159,4 +194,7 @@ particle.bubble.inRange = true;
     hoverBubbleColor(particle, ratio, divBubble) {
-        const options = this.container.actualOptions;
+        const options = __classPrivateFieldGet(this, _Bubbler_container, "f").actualOptions;
         const bubbleOptions = divBubble !== null && divBubble !== void 0 ? divBubble : options.interactivity.modes.bubble;
+        if (!bubbleOptions) {
+            return;
+        }
         if (!particle.bubble.finalColor) {
@@ -185,4 +223,4 @@ const modeColor = bubbleOptions.color;
     hoverBubbleOpacity(particle, ratio, divBubble) {
-        var _a, _b, _c;
-        const container = this.container, options = container.actualOptions, modeOpacity = (_a = divBubble === null || divBubble === void 0 ? void 0 : divBubble.opacity) !== null && _a !== void 0 ? _a : options.interactivity.modes.bubble.opacity;
+        var _a, _b, _c, _d;
+        const container = __classPrivateFieldGet(this, _Bubbler_container, "f"), options = container.actualOptions, modeOpacity = (_a = divBubble === null || divBubble === void 0 ? void 0 : divBubble.opacity) !== null && _a !== void 0 ? _a : (_b = options.interactivity.modes.bubble) === null || _b === void 0 ? void 0 : _b.opacity;
         if (!modeOpacity) {
@@ -192,3 +230,3 @@ return;
         const optOpacity = particle.options.opacity.value;
-        const pOpacity = (_c = (_b = particle.opacity) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : 1;
+        const pOpacity = (_d = (_c = particle.opacity) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : 1;
         const opacity = calculateBubbleValue(pOpacity, modeOpacity, getRangeMax(optOpacity), ratio);
@@ -200,3 +238,3 @@ if (opacity !== undefined) {
     hoverBubbleSize(particle, ratio, divBubble) {
-        const container = this.container, modeSize = (divBubble === null || divBubble === void 0 ? void 0 : divBubble.size) ? divBubble.size * container.retina.pixelRatio : container.retina.bubbleModeSize;
+        const container = __classPrivateFieldGet(this, _Bubbler_container, "f"), modeSize = (divBubble === null || divBubble === void 0 ? void 0 : divBubble.size) ? divBubble.size * container.retina.pixelRatio : container.retina.bubbleModeSize;
         if (modeSize === undefined) {
@@ -213,8 +251,8 @@ return;
     process(particle, distMouse, timeSpent, data) {
-        const container = this.container, bubbleParam = data.bubbleObj.optValue;
-        if (bubbleParam === undefined) {
+        const container = __classPrivateFieldGet(this, _Bubbler_container, "f"), bubbleParam = data.bubbleObj.optValue, options = container.actualOptions, bubble = options.interactivity.modes.bubble;
+        if (!bubble || bubbleParam === undefined) {
             return;
         }
-        const options = container.actualOptions, bubbleDuration = options.interactivity.modes.bubble.duration, bubbleDistance = container.retina.bubbleModeDistance, particlesParam = data.particlesObj.optValue, pObjBubble = data.bubbleObj.value, pObj = data.particlesObj.value || 0, type = data.type;
-        if (bubbleParam === particlesParam) {
+        const bubbleDuration = bubble.duration, bubbleDistance = container.retina.bubbleModeDistance, particlesParam = data.particlesObj.optValue, pObjBubble = data.bubbleObj.value, pObj = data.particlesObj.value || 0, type = data.type;
+        if (!bubbleDistance || bubbleDistance < 0 || bubbleParam === particlesParam) {
             return;
@@ -257,4 +295,4 @@ }
     singleSelectorHover(selector, div) {
-        const container = this.container, selectors = document.querySelectorAll(selector);
-        if (!selectors.length) {
+        const container = __classPrivateFieldGet(this, _Bubbler_container, "f"), selectors = document.querySelectorAll(selector), bubble = container.actualOptions.interactivity.modes.bubble;
+        if (!bubble || !selectors.length) {
             return;
@@ -274,3 +312,3 @@ }
                 particle.bubble.inRange = true;
-                const divs = container.actualOptions.interactivity.modes.bubble.divs;
+                const divs = bubble.divs;
                 const divBubble = divMode(divs, elem);
@@ -288,1 +326,2 @@ if (!particle.bubble.div || particle.bubble.div !== elem) {
 }
+_Bubbler_container = new WeakMap();

package.json

 {
   "name": "tsparticles-interaction-external-bubble",
-  "version": "2.1.4",
+  "version": "2.2.0",
   "description": "tsParticles bubble external interaction",
-  "homepage": "https://particles.js.org/",
+  "homepage": "https://particles.js.org",
   "repository": {
@@ -64,3 +64,3 @@ "type": "git",
   ],
-  "author": "Matteo Bruni",
+  "author": "Matteo Bruni <[e-mail]>",
   "license": "MIT",
@@ -76,4 +76,4 @@ "bugs": {
   "dependencies": {
-    "tsparticles-engine": "^2.1.4"
+    "tsparticles-engine": "^2.2.0"
   }
 }

README.md

@@ -7,3 +7,3 @@ [![banner](https://particles.js.org/images/banner2.png)](https://particles.js.org)
 [![npmjs](https://badge.fury.io/js/tsparticles-interaction-external-bubble.svg)](https://www.npmjs.com/package/tsparticles-interaction-external-bubble)
-[![npmjs](https://img.shields.io/npm/dt/tsparticles-interaction-external-bubble)](https://www.npmjs.com/package/tsparticles-interaction-external-bubble)
+[![npmjs](https://img.shields.io/npm/dt/tsparticles-interaction-external-bubble)](https://www.npmjs.com/package/tsparticles-interaction-external-bubble) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
 
@@ -10,0 +10,0 @@ [tsParticles](https://github.com/matteobruni/tsparticles) interaction plugin for bubble effect around mouse or HTML

tsparticles.interaction.external.bubble.js

@@ -7,3 +7,3 @@ /*!
  * How to use? : Check the GitHub README
- * v2.1.4
+ * v2.2.0
  */
@@ -100,5 +100,149 @@ (function webpackUniversalModuleDefinition(root, factory) {
 var external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_ = __webpack_require__(818);
+;// CONCATENATED MODULE: ./dist/browser/Options/Classes/BubbleBase.js
+
+/**
+ * @category Options
+ */
+
+class BubbleBase {
+  constructor() {
+    this.distance = 200;
+    this.duration = 0.4;
+    this.mix = false;
+  }
+
+  load(data) {
+    if (!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;
+    }
+
+    if (data.color !== undefined) {
+      if (data.color instanceof Array) {
+        this.color = data.color.map(s => external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.OptionsColor.create(undefined, s));
+      } else {
+        if (this.color instanceof Array) {
+          this.color = new external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.OptionsColor();
+        }
+
+        this.color = external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.OptionsColor.create(this.color, data.color);
+      }
+    }
+
+    if (data.size !== undefined) {
+      this.size = data.size;
+    }
+  }
+
+}
+;// CONCATENATED MODULE: ./dist/browser/Options/Classes/BubbleDiv.js
+
+/**
+ * @category Options
+ */
+
+class BubbleDiv extends BubbleBase {
+  constructor() {
+    super();
+    this.selectors = [];
+  }
+  /**
+   * @deprecated This property is deprecated, please use the new selectors property
+   */
+
+
+  get ids() {
+    return this.selectors instanceof Array ? this.selectors.map(t => t.replace("#", "")) : this.selectors.replace("#", "");
+  }
+  /**
+   * @deprecated This property is deprecated, please use the new selectors property
+   */
+
+
+  set ids(value) {
+    this.selectors = value instanceof Array ? value.map(t => `#${t}`) : `#${value}`;
+  }
+
+  load(data) {
+    super.load(data);
+
+    if (!data) {
+      return;
+    }
+
+    if (data.ids !== undefined) {
+      this.ids = data.ids;
+    }
+
+    if (data.selectors !== undefined) {
+      this.selectors = data.selectors;
+    }
+  }
+
+}
+;// CONCATENATED MODULE: ./dist/browser/Options/Classes/Bubble.js
+
+
+/**
+ * @category Options
+ */
+
+class Bubble extends BubbleBase {
+  load(data) {
+    super.load(data);
+
+    if (!data) {
+      return;
+    }
+
+    if (data.divs instanceof Array) {
+      this.divs = data.divs.map(s => {
+        const tmp = new BubbleDiv();
+        tmp.load(s);
+        return tmp;
+      });
+    } else {
+      if (this.divs instanceof Array || !this.divs) {
+        this.divs = new BubbleDiv();
+      }
+
+      this.divs.load(data.divs);
+    }
+  }
+
+}
 ;// CONCATENATED MODULE: ./dist/browser/Bubbler.js
+var __classPrivateFieldSet = undefined && undefined.__classPrivateFieldSet || function (receiver, state, value, kind, f) {
+  if (kind === "m") throw new TypeError("Private method is not writable");
+  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), value;
+};
 
+var __classPrivateFieldGet = undefined && undefined.__classPrivateFieldGet || function (receiver, state, kind, f) {
+  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
 
+var _Bubbler_container;
+
+
+
+
 function calculateBubbleValue(particleValue, modeValue, optionsValue, ratio) {
@@ -123,2 +267,6 @@ if (modeValue >= optionsValue) {
 
+    _Bubbler_container.set(this, void 0);
+
+    __classPrivateFieldSet(this, _Bubbler_container, container, "f");
+
     if (!container.bubble) {
@@ -154,7 +302,19 @@ container.bubble = {};
 
-  init() {// do nothing
+  init() {
+    const container = __classPrivateFieldGet(this, _Bubbler_container, "f"),
+          bubble = container.actualOptions.interactivity.modes.bubble;
+
+    if (!bubble) {
+      return;
+    }
+
+    container.retina.bubbleModeDistance = bubble.distance * container.retina.pixelRatio;
+
+    if (bubble.size !== undefined) {
+      container.retina.bubbleModeSize = bubble.size * container.retina.pixelRatio;
+    }
   }
 
   async interact() {
-    const options = this.container.actualOptions,
+    const options = __classPrivateFieldGet(this, _Bubbler_container, "f").actualOptions,
           events = options.interactivity.events,
@@ -170,2 +330,3 @@ onHover = events.onHover,
 
+
     if (hoverEnabled && (0,external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.isInArray)("bubble"
@@ -189,3 +350,3 @@ /* HoverMode.bubble */
 
-    const container = this.container,
+    const container = __classPrivateFieldGet(this, _Bubbler_container, "f"),
           options = container.actualOptions,
@@ -212,2 +373,12 @@ mouse = container.interactivity.mouse,
 
+  loadModeOptions(options, ...sources) {
+    if (!options.bubble) {
+      options.bubble = new Bubble();
+    }
+
+    for (const source of sources) {
+      options.bubble.load(source === null || source === void 0 ? void 0 : source.bubble);
+    }
+  }
+
   reset(particle) {
@@ -220,7 +391,8 @@ particle.bubble.inRange = false;
 
-    const container = this.container,
+    const container = __classPrivateFieldGet(this, _Bubbler_container, "f"),
           options = container.actualOptions,
-          mouseClickPos = container.interactivity.mouse.clickPosition;
+          mouseClickPos = container.interactivity.mouse.clickPosition,
+          bubble = options.interactivity.modes.bubble;
 
-    if (!mouseClickPos) {
+    if (!bubble || !mouseClickPos) {
       return;
@@ -233,5 +405,10 @@ }
 
-    const distance = container.retina.bubbleModeDistance,
-          query = container.particles.quadTree.queryCircle(mouseClickPos, distance, p => this.isEnabled(p));
+    const distance = container.retina.bubbleModeDistance;
 
+    if (!distance || distance < 0) {
+      return;
+    }
+
+    const query = container.particles.quadTree.queryCircle(mouseClickPos, distance, p => this.isEnabled(p));
+
     for (const particle of query) {
@@ -247,7 +424,7 @@ if (!container.bubble.clicking) {
 
-      if (timeSpent > options.interactivity.modes.bubble.duration) {
+      if (timeSpent > bubble.duration) {
         container.bubble.durationEnd = true;
       }
 
-      if (timeSpent > options.interactivity.modes.bubble.duration * 2) {
+      if (timeSpent > bubble.duration * 2) {
         container.bubble.clicking = false;
@@ -273,3 +450,3 @@ container.bubble.durationEnd = false;
         bubbleObj: {
-          optValue: options.interactivity.modes.bubble.opacity,
+          optValue: bubble.opacity,
           value: particle.bubble.opacity
@@ -288,3 +465,3 @@ },
       if (!container.bubble.durationEnd) {
-        if (distMouse <= container.retina.bubbleModeDistance) {
+        if (distMouse <= distance) {
           this.hoverBubbleColor(particle, distMouse);
@@ -301,11 +478,11 @@ } else {
   hoverBubble() {
-    const container = this.container,
-          mousePos = container.interactivity.mouse.position;
+    const container = __classPrivateFieldGet(this, _Bubbler_container, "f"),
+          mousePos = container.interactivity.mouse.position,
+          distance = container.retina.bubbleModeDistance;
 
-    if (mousePos === undefined) {
+    if (!distance || distance < 0 || mousePos === undefined) {
       return;
     }
 
-    const distance = container.retina.bubbleModeDistance,
-          query = container.particles.quadTree.queryCircle(mousePos, distance, p => this.isEnabled(p)); //for (const { distance, particle } of query) {
+    const query = container.particles.quadTree.queryCircle(mousePos, distance, p => this.isEnabled(p)); //for (const { distance, particle } of query) {
 
@@ -343,5 +520,10 @@ for (const particle of query) {
   hoverBubbleColor(particle, ratio, divBubble) {
-    const options = this.container.actualOptions;
+    const options = __classPrivateFieldGet(this, _Bubbler_container, "f").actualOptions;
+
     const bubbleOptions = divBubble !== null && divBubble !== void 0 ? divBubble : options.interactivity.modes.bubble;
 
+    if (!bubbleOptions) {
+      return;
+    }
+
     if (!particle.bubble.finalColor) {
@@ -372,7 +554,7 @@ const modeColor = bubbleOptions.color;
   hoverBubbleOpacity(particle, ratio, divBubble) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
 
-    const container = this.container,
+    const container = __classPrivateFieldGet(this, _Bubbler_container, "f"),
           options = container.actualOptions,
-          modeOpacity = (_a = divBubble === null || divBubble === void 0 ? void 0 : divBubble.opacity) !== null && _a !== void 0 ? _a : options.interactivity.modes.bubble.opacity;
+          modeOpacity = (_a = divBubble === null || divBubble === void 0 ? void 0 : divBubble.opacity) !== null && _a !== void 0 ? _a : (_b = options.interactivity.modes.bubble) === null || _b === void 0 ? void 0 : _b.opacity;
 
@@ -384,3 +566,3 @@ if (!modeOpacity) {
     const optOpacity = particle.options.opacity.value;
-    const pOpacity = (_c = (_b = particle.opacity) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : 1;
+    const pOpacity = (_d = (_c = particle.opacity) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : 1;
     const opacity = calculateBubbleValue(pOpacity, modeOpacity, (0,external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.getRangeMax)(optOpacity), ratio);
@@ -394,3 +576,3 @@
   hoverBubbleSize(particle, ratio, divBubble) {
-    const container = this.container,
+    const container = __classPrivateFieldGet(this, _Bubbler_container, "f"),
           modeSize = (divBubble === null || divBubble === void 0 ? void 0 : divBubble.size) ? divBubble.size * container.retina.pixelRatio : container.retina.bubbleModeSize;
@@ -412,11 +594,12 @@
   process(particle, distMouse, timeSpent, data) {
-    const container = this.container,
-          bubbleParam = data.bubbleObj.optValue;
+    const container = __classPrivateFieldGet(this, _Bubbler_container, "f"),
+          bubbleParam = data.bubbleObj.optValue,
+          options = container.actualOptions,
+          bubble = options.interactivity.modes.bubble;
 
-    if (bubbleParam === undefined) {
+    if (!bubble || bubbleParam === undefined) {
       return;
     }
 
-    const options = container.actualOptions,
-          bubbleDuration = options.interactivity.modes.bubble.duration,
+    const bubbleDuration = bubble.duration,
           bubbleDistance = container.retina.bubbleModeDistance,
@@ -428,3 +611,3 @@ particlesParam = data.particlesObj.optValue,
 
-    if (bubbleParam === particlesParam) {
+    if (!bubbleDistance || bubbleDistance < 0 || bubbleParam === particlesParam) {
       return;
@@ -485,6 +668,7 @@ }
   singleSelectorHover(selector, div) {
-    const container = this.container,
-          selectors = document.querySelectorAll(selector);
+    const container = __classPrivateFieldGet(this, _Bubbler_container, "f"),
+          selectors = document.querySelectorAll(selector),
+          bubble = container.actualOptions.interactivity.modes.bubble;
 
-    if (!selectors.length) {
+    if (!bubble || !selectors.length) {
       return;
@@ -512,3 +696,3 @@ }
         particle.bubble.inRange = true;
-        const divs = container.actualOptions.interactivity.modes.bubble.divs;
+        const divs = bubble.divs;
         const divBubble = (0,external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.divMode)(divs, elem);
@@ -535,2 +719,3 @@
 }
+_Bubbler_container = new WeakMap();
 ;// CONCATENATED MODULE: ./dist/browser/index.js
@@ -537,0 +722,0 @@

tsparticles.interaction.external.bubble.min.js

@@ -1,2 +0,2 @@
-/*! tsParticles Bubble External Interaction v2.1.4 by Matteo Bruni */
-!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("tsparticles-engine"));else if("function"==typeof define&&define.amd)define(["tsparticles-engine"],t);else{var i="object"==typeof exports?t(require("tsparticles-engine")):t(e.window);for(var o in i)("object"==typeof exports?exports:e)[o]=i[o]}}(this,(e=>(()=>{"use strict";var t={818:t=>{t.exports=e}},i={};function o(e){var b=i[e];if(void 0!==b)return b.exports;var l=i[e]={exports:{}};return t[e](l,l.exports,o),l.exports}o.d=(e,t)=>{for(var i in t)o.o(t,i)&&!o.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var b={};return(()=>{o.r(b),o.d(b,{loadExternalBubbleInteraction:()=>l});var e=o(818);function t(t,i,o,b){if(i>=o){const l=t+(i-o)*b;return(0,e.clamp)(l,t,i)}if(i<o){const l=t-(o-i)*b;return(0,e.clamp)(l,i,t)}}class i extends e.ExternalInteractorBase{constructor(e){super(e),e.bubble||(e.bubble={}),this.handleClickMode=t=>{"bubble"===t&&(e.bubble||(e.bubble={}),e.bubble.clicking=!0)}}clear(e,t){e.bubble.inRange&&!t||(delete e.bubble.div,delete e.bubble.opacity,delete e.bubble.radius,delete e.bubble.color)}init(){}async interact(){const t=this.container.actualOptions.interactivity.events,i=t.onHover,o=t.onClick,b=i.enable,l=i.mode,n=o.enable,r=o.mode,a=t.onDiv;b&&(0,e.isInArray)("bubble",l)?this.hoverBubble():n&&(0,e.isInArray)("bubble",r)?this.clickBubble():(0,e.divModeExecute)("bubble",a,((e,t)=>this.singleSelectorHover(e,t)))}isEnabled(t){var i;const o=this.container,b=o.actualOptions,l=o.interactivity.mouse,n=(null!==(i=null==t?void 0:t.interactivity)&&void 0!==i?i:b.interactivity).events,r=n.onDiv,a=(0,e.isDivModeEnabled)("bubble",r);if(!(a||n.onHover.enable&&l.position||n.onClick.enable&&l.clickPosition))return!1;const s=n.onHover.mode,u=n.onClick.mode;return(0,e.isInArray)("bubble",s)||(0,e.isInArray)("bubble",u)||a}reset(e){e.bubble.inRange=!1}clickBubble(){var t,i;const o=this.container,b=o.actualOptions,l=o.interactivity.mouse.clickPosition;if(!l)return;o.bubble||(o.bubble={});const n=o.retina.bubbleModeDistance,r=o.particles.quadTree.queryCircle(l,n,(e=>this.isEnabled(e)));for(const n of r){if(!o.bubble.clicking)continue;n.bubble.inRange=!o.bubble.durationEnd;const r=n.getPosition(),a=(0,e.getDistance)(r,l),s=((new Date).getTime()-(o.interactivity.mouse.clickTime||0))/1e3;s>b.interactivity.modes.bubble.duration&&(o.bubble.durationEnd=!0),s>2*b.interactivity.modes.bubble.duration&&(o.bubble.clicking=!1,o.bubble.durationEnd=!1);const u={bubbleObj:{optValue:o.retina.bubbleModeSize,value:n.bubble.radius},particlesObj:{optValue:(0,e.getRangeMax)(n.options.size.value)*o.retina.pixelRatio,value:n.size.value},type:"size"};this.process(n,a,s,u);const c={bubbleObj:{optValue:b.interactivity.modes.bubble.opacity,value:n.bubble.opacity},particlesObj:{optValue:(0,e.getRangeMax)(n.options.opacity.value),value:null!==(i=null===(t=n.opacity)||void 0===t?void 0:t.value)&&void 0!==i?i:1},type:"opacity"};this.process(n,a,s,c),o.bubble.durationEnd?delete n.bubble.color:a<=o.retina.bubbleModeDistance?this.hoverBubbleColor(n,a):delete n.bubble.color}}hoverBubble(){const t=this.container,i=t.interactivity.mouse.position;if(void 0===i)return;const o=t.retina.bubbleModeDistance,b=t.particles.quadTree.queryCircle(i,o,(e=>this.isEnabled(e)));for(const l of b){l.bubble.inRange=!0;const b=l.getPosition(),n=(0,e.getDistance)(b,i),r=1-n/o;n<=o?r>=0&&t.interactivity.status===e.mouseMoveEvent&&(this.hoverBubbleSize(l,r),this.hoverBubbleOpacity(l,r),this.hoverBubbleColor(l,r)):this.reset(l),t.interactivity.status===e.mouseLeaveEvent&&this.reset(l)}}hoverBubbleColor(t,i,o){const b=this.container.actualOptions,l=null!=o?o:b.interactivity.modes.bubble;if(!t.bubble.finalColor){const i=l.color;if(!i)return;const o=i instanceof Array?(0,e.itemFromArray)(i):i;t.bubble.finalColor=(0,e.rangeColorToHsl)(o)}if(t.bubble.finalColor)if(l.mix){t.bubble.color=void 0;const o=t.getFillColor();t.bubble.color=o?(0,e.rgbToHsl)((0,e.colorMix)(o,t.bubble.finalColor,1-i,i)):t.bubble.finalColor}else t.bubble.color=t.bubble.finalColor}hoverBubbleOpacity(i,o,b){var l,n,r;const a=this.container.actualOptions,s=null!==(l=null==b?void 0:b.opacity)&&void 0!==l?l:a.interactivity.modes.bubble.opacity;if(!s)return;const u=i.options.opacity.value,c=t(null!==(r=null===(n=i.opacity)||void 0===n?void 0:n.value)&&void 0!==r?r:1,s,(0,e.getRangeMax)(u),o);void 0!==c&&(i.bubble.opacity=c)}hoverBubbleSize(i,o,b){const l=this.container,n=(null==b?void 0:b.size)?b.size*l.retina.pixelRatio:l.retina.bubbleModeSize;if(void 0===n)return;const r=(0,e.getRangeMax)(i.options.size.value)*l.retina.pixelRatio,a=t(i.size.value,n,r,o);void 0!==a&&(i.bubble.radius=a)}process(e,t,i,o){const b=this.container,l=o.bubbleObj.optValue;if(void 0===l)return;const n=b.actualOptions.interactivity.modes.bubble.duration,r=b.retina.bubbleModeDistance,a=o.particlesObj.optValue,s=o.bubbleObj.value,u=o.particlesObj.value||0,c=o.type;if(l!==a)if(b.bubble||(b.bubble={}),b.bubble.durationEnd)s&&("size"===c&&delete e.bubble.radius,"opacity"===c&&delete e.bubble.opacity);else if(t<=r){if((null!=s?s:u)!==l){const t=u-i*(u-l)/n;"size"===c&&(e.bubble.radius=t),"opacity"===c&&(e.bubble.opacity=t)}}else"size"===c&&delete e.bubble.radius,"opacity"===c&&delete e.bubble.opacity}singleSelectorHover(t,i){const o=this.container,b=document.querySelectorAll(t);b.length&&b.forEach((t=>{const b=t,l=o.retina.pixelRatio,n={x:(b.offsetLeft+b.offsetWidth/2)*l,y:(b.offsetTop+b.offsetHeight/2)*l},r=b.offsetWidth/2*l,a="circle"===i.type?new e.Circle(n.x,n.y,r):new e.Rectangle(b.offsetLeft*l,b.offsetTop*l,b.offsetWidth*l,b.offsetHeight*l),s=o.particles.quadTree.query(a,(e=>this.isEnabled(e)));for(const t of s){if(!a.contains(t.getPosition()))continue;t.bubble.inRange=!0;const i=o.actualOptions.interactivity.modes.bubble.divs,l=(0,e.divMode)(i,b);t.bubble.div&&t.bubble.div===b||(this.clear(t,!0),t.bubble.div=b),this.hoverBubbleSize(t,1,l),this.hoverBubbleOpacity(t,1,l),this.hoverBubbleColor(t,1,l)}}))}}async function l(e){await e.addInteractor("externalBubble",(e=>new i(e)))}})(),b})()));
+/*! For license information please see tsparticles.interaction.external.bubble.min.js.LICENSE.txt */
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("tsparticles-engine"));else if("function"==typeof define&&define.amd)define(["tsparticles-engine"],t);else{var i="object"==typeof exports?t(require("tsparticles-engine")):t(e.window);for(var o in i)("object"==typeof exports?exports:e)[o]=i[o]}}(this,(e=>(()=>{"use strict";var t={818:t=>{t.exports=e}},i={};function o(e){var l=i[e];if(void 0!==l)return l.exports;var r=i[e]={exports:{}};return t[e](r,r.exports,o),r.exports}o.d=(e,t)=>{for(var i in t)o.o(t,i)&&!o.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var l={};return(()=>{o.r(l),o.d(l,{loadExternalBubbleInteraction:()=>u});var e=o(818);class t{constructor(){this.distance=200,this.duration=.4,this.mix=!1}load(t){t&&(void 0!==t.distance&&(this.distance=t.distance),void 0!==t.duration&&(this.duration=t.duration),void 0!==t.mix&&(this.mix=t.mix),void 0!==t.opacity&&(this.opacity=t.opacity),void 0!==t.color&&(t.color instanceof Array?this.color=t.color.map((t=>e.OptionsColor.create(void 0,t))):(this.color instanceof Array&&(this.color=new e.OptionsColor),this.color=e.OptionsColor.create(this.color,t.color))),void 0!==t.size&&(this.size=t.size))}}class i extends t{constructor(){super(),this.selectors=[]}get ids(){return this.selectors instanceof Array?this.selectors.map((e=>e.replace("#",""))):this.selectors.replace("#","")}set ids(e){this.selectors=e instanceof Array?e.map((e=>`#${e}`)):`#${e}`}load(e){super.load(e),e&&(void 0!==e.ids&&(this.ids=e.ids),void 0!==e.selectors&&(this.selectors=e.selectors))}}class r extends t{load(e){super.load(e),e&&(e.divs instanceof Array?this.divs=e.divs.map((e=>{const t=new i;return t.load(e),t})):((this.divs instanceof Array||!this.divs)&&(this.divs=new i),this.divs.load(e.divs)))}}var s,n=function(e,t,i,o,l){if("m"===o)throw new TypeError("Private method is not writable");if("a"===o&&!l)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!l:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===o?l.call(e,i):l?l.value=i:t.set(e,i),i},b=function(e,t,i,o){if("a"===i&&!o)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!o:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===i?o:"a"===i?o.call(e):o?o.value:t.get(e)};function a(t,i,o,l){if(i>=o){const r=t+(i-o)*l;return(0,e.clamp)(r,t,i)}if(i<o){const r=t-(o-i)*l;return(0,e.clamp)(r,i,t)}}class c extends e.ExternalInteractorBase{constructor(e){super(e),s.set(this,void 0),n(this,s,e,"f"),e.bubble||(e.bubble={}),this.handleClickMode=t=>{"bubble"===t&&(e.bubble||(e.bubble={}),e.bubble.clicking=!0)}}clear(e,t){e.bubble.inRange&&!t||(delete e.bubble.div,delete e.bubble.opacity,delete e.bubble.radius,delete e.bubble.color)}init(){const e=b(this,s,"f"),t=e.actualOptions.interactivity.modes.bubble;t&&(e.retina.bubbleModeDistance=t.distance*e.retina.pixelRatio,void 0!==t.size&&(e.retina.bubbleModeSize=t.size*e.retina.pixelRatio))}async interact(){const t=b(this,s,"f").actualOptions.interactivity.events,i=t.onHover,o=t.onClick,l=i.enable,r=i.mode,n=o.enable,a=o.mode,c=t.onDiv;l&&(0,e.isInArray)("bubble",r)?this.hoverBubble():n&&(0,e.isInArray)("bubble",a)?this.clickBubble():(0,e.divModeExecute)("bubble",c,((e,t)=>this.singleSelectorHover(e,t)))}isEnabled(t){var i;const o=b(this,s,"f"),l=o.actualOptions,r=o.interactivity.mouse,n=(null!==(i=null==t?void 0:t.interactivity)&&void 0!==i?i:l.interactivity).events,a=n.onDiv,c=(0,e.isDivModeEnabled)("bubble",a);if(!(c||n.onHover.enable&&r.position||n.onClick.enable&&r.clickPosition))return!1;const u=n.onHover.mode,d=n.onClick.mode;return(0,e.isInArray)("bubble",u)||(0,e.isInArray)("bubble",d)||c}loadModeOptions(e,...t){e.bubble||(e.bubble=new r);for(const i of t)e.bubble.load(null==i?void 0:i.bubble)}reset(e){e.bubble.inRange=!1}clickBubble(){var t,i;const o=b(this,s,"f"),l=o.actualOptions,r=o.interactivity.mouse.clickPosition,n=l.interactivity.modes.bubble;if(!n||!r)return;o.bubble||(o.bubble={});const a=o.retina.bubbleModeDistance;if(!a||a<0)return;const c=o.particles.quadTree.queryCircle(r,a,(e=>this.isEnabled(e)));for(const l of c){if(!o.bubble.clicking)continue;l.bubble.inRange=!o.bubble.durationEnd;const s=l.getPosition(),b=(0,e.getDistance)(s,r),c=((new Date).getTime()-(o.interactivity.mouse.clickTime||0))/1e3;c>n.duration&&(o.bubble.durationEnd=!0),c>2*n.duration&&(o.bubble.clicking=!1,o.bubble.durationEnd=!1);const u={bubbleObj:{optValue:o.retina.bubbleModeSize,value:l.bubble.radius},particlesObj:{optValue:(0,e.getRangeMax)(l.options.size.value)*o.retina.pixelRatio,value:l.size.value},type:"size"};this.process(l,b,c,u);const d={bubbleObj:{optValue:n.opacity,value:l.bubble.opacity},particlesObj:{optValue:(0,e.getRangeMax)(l.options.opacity.value),value:null!==(i=null===(t=l.opacity)||void 0===t?void 0:t.value)&&void 0!==i?i:1},type:"opacity"};this.process(l,b,c,d),o.bubble.durationEnd?delete l.bubble.color:b<=a?this.hoverBubbleColor(l,b):delete l.bubble.color}}hoverBubble(){const t=b(this,s,"f"),i=t.interactivity.mouse.position,o=t.retina.bubbleModeDistance;if(!o||o<0||void 0===i)return;const l=t.particles.quadTree.queryCircle(i,o,(e=>this.isEnabled(e)));for(const r of l){r.bubble.inRange=!0;const l=r.getPosition(),s=(0,e.getDistance)(l,i),n=1-s/o;s<=o?n>=0&&t.interactivity.status===e.mouseMoveEvent&&(this.hoverBubbleSize(r,n),this.hoverBubbleOpacity(r,n),this.hoverBubbleColor(r,n)):this.reset(r),t.interactivity.status===e.mouseLeaveEvent&&this.reset(r)}}hoverBubbleColor(t,i,o){const l=b(this,s,"f").actualOptions,r=null!=o?o:l.interactivity.modes.bubble;if(r){if(!t.bubble.finalColor){const i=r.color;if(!i)return;const o=i instanceof Array?(0,e.itemFromArray)(i):i;t.bubble.finalColor=(0,e.rangeColorToHsl)(o)}if(t.bubble.finalColor)if(r.mix){t.bubble.color=void 0;const o=t.getFillColor();t.bubble.color=o?(0,e.rgbToHsl)((0,e.colorMix)(o,t.bubble.finalColor,1-i,i)):t.bubble.finalColor}else t.bubble.color=t.bubble.finalColor}}hoverBubbleOpacity(t,i,o){var l,r,n,c;const u=b(this,s,"f").actualOptions,d=null!==(l=null==o?void 0:o.opacity)&&void 0!==l?l:null===(r=u.interactivity.modes.bubble)||void 0===r?void 0:r.opacity;if(!d)return;const v=t.options.opacity.value,p=a(null!==(c=null===(n=t.opacity)||void 0===n?void 0:n.value)&&void 0!==c?c:1,d,(0,e.getRangeMax)(v),i);void 0!==p&&(t.bubble.opacity=p)}hoverBubbleSize(t,i,o){const l=b(this,s,"f"),r=(null==o?void 0:o.size)?o.size*l.retina.pixelRatio:l.retina.bubbleModeSize;if(void 0===r)return;const n=(0,e.getRangeMax)(t.options.size.value)*l.retina.pixelRatio,c=a(t.size.value,r,n,i);void 0!==c&&(t.bubble.radius=c)}process(e,t,i,o){const l=b(this,s,"f"),r=o.bubbleObj.optValue,n=l.actualOptions.interactivity.modes.bubble;if(!n||void 0===r)return;const a=n.duration,c=l.retina.bubbleModeDistance,u=o.particlesObj.optValue,d=o.bubbleObj.value,v=o.particlesObj.value||0,p=o.type;if(c&&!(c<0)&&r!==u)if(l.bubble||(l.bubble={}),l.bubble.durationEnd)d&&("size"===p&&delete e.bubble.radius,"opacity"===p&&delete e.bubble.opacity);else if(t<=c){if((null!=d?d:v)!==r){const t=v-i*(v-r)/a;"size"===p&&(e.bubble.radius=t),"opacity"===p&&(e.bubble.opacity=t)}}else"size"===p&&delete e.bubble.radius,"opacity"===p&&delete e.bubble.opacity}singleSelectorHover(t,i){const o=b(this,s,"f"),l=document.querySelectorAll(t),r=o.actualOptions.interactivity.modes.bubble;r&&l.length&&l.forEach((t=>{const l=t,s=o.retina.pixelRatio,n={x:(l.offsetLeft+l.offsetWidth/2)*s,y:(l.offsetTop+l.offsetHeight/2)*s},b=l.offsetWidth/2*s,a="circle"===i.type?new e.Circle(n.x,n.y,b):new e.Rectangle(l.offsetLeft*s,l.offsetTop*s,l.offsetWidth*s,l.offsetHeight*s),c=o.particles.quadTree.query(a,(e=>this.isEnabled(e)));for(const t of c){if(!a.contains(t.getPosition()))continue;t.bubble.inRange=!0;const i=r.divs,o=(0,e.divMode)(i,l);t.bubble.div&&t.bubble.div===l||(this.clear(t,!0),t.bubble.div=l),this.hoverBubbleSize(t,1,o),this.hoverBubbleOpacity(t,1,o),this.hoverBubbleColor(t,1,o)}}))}}async function u(e){await e.addInteractor("externalBubble",(e=>new c(e)))}s=new WeakMap})(),l})()));

types/Bubbler.d.ts

@@ -1,13 +0,8 @@
-import type { Container, Particle } from "tsparticles-engine";
+import type { BubbleContainer, BubbleMode, IBubbleMode } from "./Types";
 import { ClickMode, ExternalInteractorBase } from "tsparticles-engine";
-interface IContainerBubble {
-    clicking?: boolean;
-    durationEnd?: boolean;
-}
-declare type ContainerBubbler = Container & {
-    bubble?: IContainerBubble;
-};
+import type { IModes, Modes, Particle, RecursivePartial } from "tsparticles-engine";
 export declare class Bubbler extends ExternalInteractorBase {
+    #private;
     handleClickMode: (mode: ClickMode | string) => void;
-    constructor(container: ContainerBubbler);
+    constructor(container: BubbleContainer);
     clear(particle: Particle, force?: boolean): void;
@@ -17,2 +12,3 @@ init(): void;
     isEnabled(particle?: Particle): boolean;
+    loadModeOptions(options: Modes & BubbleMode, ...sources: RecursivePartial<(IModes & IBubbleMode) | undefined>[]): void;
     reset(particle: Particle): void;
@@ -27,2 +23,1 @@ private clickBubble;
 }
-export {};

umd/Bubbler.js

@@ -0,1 +1,12 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
 (function (factory) {
@@ -7,9 +18,11 @@ if (typeof module === "object" && typeof module.exports === "object") {
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "tsparticles-engine"], factory);
+        define(["require", "exports", "tsparticles-engine", "./Options/Classes/Bubble"], factory);
     }
 })(function (require, exports) {
     "use strict";
+    var _Bubbler_container;
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.Bubbler = void 0;
     const tsparticles_engine_1 = require("tsparticles-engine");
+    const Bubble_1 = require("./Options/Classes/Bubble");
     function calculateBubbleValue(particleValue, modeValue, optionsValue, ratio) {
@@ -28,2 +41,4 @@ if (modeValue >= optionsValue) {
             super(container);
+            _Bubbler_container.set(this, void 0);
+            __classPrivateFieldSet(this, _Bubbler_container, container, "f");
             if (!container.bubble) {
@@ -52,5 +67,13 @@ container.bubble = {};
         init() {
+            const container = __classPrivateFieldGet(this, _Bubbler_container, "f"), bubble = container.actualOptions.interactivity.modes.bubble;
+            if (!bubble) {
+                return;
+            }
+            container.retina.bubbleModeDistance = bubble.distance * container.retina.pixelRatio;
+            if (bubble.size !== undefined) {
+                container.retina.bubbleModeSize = bubble.size * container.retina.pixelRatio;
+            }
         }
         async interact() {
-            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;
+            const options = __classPrivateFieldGet(this, _Bubbler_container, "f").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, tsparticles_engine_1.isInArray)("bubble", hoverMode)) {
@@ -68,3 +91,3 @@ this.hoverBubble();
             var _a;
-            const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse, events = ((_a = particle === null || particle === void 0 ? void 0 : particle.interactivity) !== null && _a !== void 0 ? _a : options.interactivity).events, divs = events.onDiv, divBubble = (0, tsparticles_engine_1.isDivModeEnabled)("bubble", divs);
+            const container = __classPrivateFieldGet(this, _Bubbler_container, "f"), options = container.actualOptions, mouse = container.interactivity.mouse, events = ((_a = particle === null || particle === void 0 ? void 0 : particle.interactivity) !== null && _a !== void 0 ? _a : options.interactivity).events, divs = events.onDiv, divBubble = (0, tsparticles_engine_1.isDivModeEnabled)("bubble", divs);
             if (!(divBubble || (events.onHover.enable && mouse.position) || (events.onClick.enable && mouse.clickPosition))) {
@@ -77,2 +100,10 @@ return false;
         }
+        loadModeOptions(options, ...sources) {
+            if (!options.bubble) {
+                options.bubble = new Bubble_1.Bubble();
+            }
+            for (const source of sources) {
+                options.bubble.load(source === null || source === void 0 ? void 0 : source.bubble);
+            }
+        }
         reset(particle) {
@@ -83,4 +114,4 @@ particle.bubble.inRange = false;
             var _a, _b;
-            const container = this.container, options = container.actualOptions, mouseClickPos = container.interactivity.mouse.clickPosition;
-            if (!mouseClickPos) {
+            const container = __classPrivateFieldGet(this, _Bubbler_container, "f"), options = container.actualOptions, mouseClickPos = container.interactivity.mouse.clickPosition, bubble = options.interactivity.modes.bubble;
+            if (!bubble || !mouseClickPos) {
                 return;
@@ -91,3 +122,7 @@ }
             }
-            const distance = container.retina.bubbleModeDistance, query = container.particles.quadTree.queryCircle(mouseClickPos, distance, (p) => this.isEnabled(p));
+            const distance = container.retina.bubbleModeDistance;
+            if (!distance || distance < 0) {
+                return;
+            }
+            const query = container.particles.quadTree.queryCircle(mouseClickPos, distance, (p) => this.isEnabled(p));
             for (const particle of query) {
@@ -99,6 +134,6 @@ if (!container.bubble.clicking) {
                 const pos = particle.getPosition(), distMouse = (0, tsparticles_engine_1.getDistance)(pos, mouseClickPos), timeSpent = (new Date().getTime() - (container.interactivity.mouse.clickTime || 0)) / 1000;
-                if (timeSpent > options.interactivity.modes.bubble.duration) {
+                if (timeSpent > bubble.duration) {
                     container.bubble.durationEnd = true;
                 }
-                if (timeSpent > options.interactivity.modes.bubble.duration * 2) {
+                if (timeSpent > bubble.duration * 2) {
                     container.bubble.clicking = false;
@@ -121,3 +156,3 @@ container.bubble.durationEnd = false;
                     bubbleObj: {
-                        optValue: options.interactivity.modes.bubble.opacity,
+                        optValue: bubble.opacity,
                         value: particle.bubble.opacity,
@@ -133,3 +168,3 @@ },
                 if (!container.bubble.durationEnd) {
-                    if (distMouse <= container.retina.bubbleModeDistance) {
+                    if (distMouse <= distance) {
                         this.hoverBubbleColor(particle, distMouse);
@@ -147,7 +182,7 @@ }
         hoverBubble() {
-            const container = this.container, mousePos = container.interactivity.mouse.position;
-            if (mousePos === undefined) {
+            const container = __classPrivateFieldGet(this, _Bubbler_container, "f"), mousePos = container.interactivity.mouse.position, distance = container.retina.bubbleModeDistance;
+            if (!distance || distance < 0 || mousePos === undefined) {
                 return;
             }
-            const distance = container.retina.bubbleModeDistance, query = container.particles.quadTree.queryCircle(mousePos, distance, (p) => this.isEnabled(p));
+            const query = container.particles.quadTree.queryCircle(mousePos, distance, (p) => this.isEnabled(p));
             for (const particle of query) {
@@ -172,4 +207,7 @@ particle.bubble.inRange = true;
         hoverBubbleColor(particle, ratio, divBubble) {
-            const options = this.container.actualOptions;
+            const options = __classPrivateFieldGet(this, _Bubbler_container, "f").actualOptions;
             const bubbleOptions = divBubble !== null && divBubble !== void 0 ? divBubble : options.interactivity.modes.bubble;
+            if (!bubbleOptions) {
+                return;
+            }
             if (!particle.bubble.finalColor) {
@@ -198,4 +236,4 @@ const modeColor = bubbleOptions.color;
         hoverBubbleOpacity(particle, ratio, divBubble) {
-            var _a, _b, _c;
-            const container = this.container, options = container.actualOptions, modeOpacity = (_a = divBubble === null || divBubble === void 0 ? void 0 : divBubble.opacity) !== null && _a !== void 0 ? _a : options.interactivity.modes.bubble.opacity;
+            var _a, _b, _c, _d;
+            const container = __classPrivateFieldGet(this, _Bubbler_container, "f"), options = container.actualOptions, modeOpacity = (_a = divBubble === null || divBubble === void 0 ? void 0 : divBubble.opacity) !== null && _a !== void 0 ? _a : (_b = options.interactivity.modes.bubble) === null || _b === void 0 ? void 0 : _b.opacity;
             if (!modeOpacity) {
@@ -205,3 +243,3 @@ return;
             const optOpacity = particle.options.opacity.value;
-            const pOpacity = (_c = (_b = particle.opacity) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : 1;
+            const pOpacity = (_d = (_c = particle.opacity) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : 1;
             const opacity = calculateBubbleValue(pOpacity, modeOpacity, (0, tsparticles_engine_1.getRangeMax)(optOpacity), ratio);
@@ -213,3 +251,3 @@ if (opacity !== undefined) {
         hoverBubbleSize(particle, ratio, divBubble) {
-            const container = this.container, modeSize = (divBubble === null || divBubble === void 0 ? void 0 : divBubble.size) ? divBubble.size * container.retina.pixelRatio : container.retina.bubbleModeSize;
+            const container = __classPrivateFieldGet(this, _Bubbler_container, "f"), modeSize = (divBubble === null || divBubble === void 0 ? void 0 : divBubble.size) ? divBubble.size * container.retina.pixelRatio : container.retina.bubbleModeSize;
             if (modeSize === undefined) {
@@ -226,8 +264,8 @@ return;
         process(particle, distMouse, timeSpent, data) {
-            const container = this.container, bubbleParam = data.bubbleObj.optValue;
-            if (bubbleParam === undefined) {
+            const container = __classPrivateFieldGet(this, _Bubbler_container, "f"), bubbleParam = data.bubbleObj.optValue, options = container.actualOptions, bubble = options.interactivity.modes.bubble;
+            if (!bubble || bubbleParam === undefined) {
                 return;
             }
-            const options = container.actualOptions, bubbleDuration = options.interactivity.modes.bubble.duration, bubbleDistance = container.retina.bubbleModeDistance, particlesParam = data.particlesObj.optValue, pObjBubble = data.bubbleObj.value, pObj = data.particlesObj.value || 0, type = data.type;
-            if (bubbleParam === particlesParam) {
+            const bubbleDuration = bubble.duration, bubbleDistance = container.retina.bubbleModeDistance, particlesParam = data.particlesObj.optValue, pObjBubble = data.bubbleObj.value, pObj = data.particlesObj.value || 0, type = data.type;
+            if (!bubbleDistance || bubbleDistance < 0 || bubbleParam === particlesParam) {
                 return;
@@ -270,4 +308,4 @@ }
         singleSelectorHover(selector, div) {
-            const container = this.container, selectors = document.querySelectorAll(selector);
-            if (!selectors.length) {
+            const container = __classPrivateFieldGet(this, _Bubbler_container, "f"), selectors = document.querySelectorAll(selector), bubble = container.actualOptions.interactivity.modes.bubble;
+            if (!bubble || !selectors.length) {
                 return;
@@ -287,3 +325,3 @@ }
                     particle.bubble.inRange = true;
-                    const divs = container.actualOptions.interactivity.modes.bubble.divs;
+                    const divs = bubble.divs;
                     const divBubble = (0, tsparticles_engine_1.divMode)(divs, elem);
@@ -302,2 +340,3 @@ if (!particle.bubble.div || particle.bubble.div !== elem) {
     exports.Bubbler = Bubbler;
+    _Bubbler_container = new WeakMap();
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

402977

increased by10.93%

Number of package files

67

increased by168%

Lines of code

2550

increased by52.6%

Worsened metrics

Number of low license alerts

1

increased byInfinity%

License quality

80

decreased by-20%

Dependency changes

• Updatedtsparticles-engine@^2.2.0