Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@tsparticles/interaction-external-bubble

Package Overview
Dependencies
Maintainers
0
Versions
24
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 3.6.0 to 3.7.0

5

browser/Bubbler.js

@@ -7,3 +7,3 @@ import { Circle, DivType, ExternalInteractorBase, Rectangle, colorMix, divMode, divModeExecute, getDistance, getRangeMax, isDivModeEnabled, isInArray, itemFromSingleOrMultiple, millisecondsToSeconds, mouseLeaveEvent, mouseMoveEvent, rangeColorToHsl, rgbToHsl, } from "@tsparticles/engine";

export class Bubbler extends ExternalInteractorBase {
constructor(container) {
constructor(container, engine) {
super(container);

@@ -104,3 +104,3 @@ this._clickBubble = () => {

const bubbleColor = itemFromSingleOrMultiple(modeColor);
particle.bubble.finalColor = rangeColorToHsl(bubbleColor);
particle.bubble.finalColor = rangeColorToHsl(this._engine, bubbleColor);
}

@@ -214,2 +214,3 @@ if (!particle.bubble.finalColor) {

};
this._engine = engine;
if (!container.bubble) {

@@ -216,0 +217,0 @@ container.bubble = {};

4

browser/index.js

@@ -0,5 +1,7 @@

import { assertValidVersion } from "@tsparticles/engine";
import { Bubbler } from "./Bubbler.js";
export async function loadExternalBubbleInteraction(engine, refresh = true) {
assertValidVersion(engine, "3.7.0");
await engine.addInteractor("externalBubble", container => {
return Promise.resolve(new Bubbler(container));
return Promise.resolve(new Bubbler(container, engine));
}, refresh);

@@ -6,0 +8,0 @@ }

@@ -10,3 +10,3 @@ "use strict";

class Bubbler extends engine_1.ExternalInteractorBase {
constructor(container) {
constructor(container, engine) {
super(container);

@@ -107,3 +107,3 @@ this._clickBubble = () => {

const bubbleColor = (0, engine_1.itemFromSingleOrMultiple)(modeColor);
particle.bubble.finalColor = (0, engine_1.rangeColorToHsl)(bubbleColor);
particle.bubble.finalColor = (0, engine_1.rangeColorToHsl)(this._engine, bubbleColor);
}

@@ -217,2 +217,3 @@ if (!particle.bubble.finalColor) {

};
this._engine = engine;
if (!container.bubble) {

@@ -219,0 +220,0 @@ container.bubble = {};

@@ -18,6 +18,8 @@ "use strict";

exports.loadExternalBubbleInteraction = loadExternalBubbleInteraction;
const engine_1 = require("@tsparticles/engine");
const Bubbler_js_1 = require("./Bubbler.js");
async function loadExternalBubbleInteraction(engine, refresh = true) {
(0, engine_1.assertValidVersion)(engine, "3.7.0");
await engine.addInteractor("externalBubble", container => {
return Promise.resolve(new Bubbler_js_1.Bubbler(container));
return Promise.resolve(new Bubbler_js_1.Bubbler(container, engine));
}, refresh);

@@ -24,0 +26,0 @@ }

@@ -7,3 +7,3 @@ import { Circle, DivType, ExternalInteractorBase, Rectangle, colorMix, divMode, divModeExecute, getDistance, getRangeMax, isDivModeEnabled, isInArray, itemFromSingleOrMultiple, millisecondsToSeconds, mouseLeaveEvent, mouseMoveEvent, rangeColorToHsl, rgbToHsl, } from "@tsparticles/engine";

export class Bubbler extends ExternalInteractorBase {
constructor(container) {
constructor(container, engine) {
super(container);

@@ -104,3 +104,3 @@ this._clickBubble = () => {

const bubbleColor = itemFromSingleOrMultiple(modeColor);
particle.bubble.finalColor = rangeColorToHsl(bubbleColor);
particle.bubble.finalColor = rangeColorToHsl(this._engine, bubbleColor);
}

@@ -214,2 +214,3 @@ if (!particle.bubble.finalColor) {

};
this._engine = engine;
if (!container.bubble) {

@@ -216,0 +217,0 @@ container.bubble = {};

@@ -0,5 +1,7 @@

import { assertValidVersion } from "@tsparticles/engine";
import { Bubbler } from "./Bubbler.js";
export async function loadExternalBubbleInteraction(engine, refresh = true) {
assertValidVersion(engine, "3.7.0");
await engine.addInteractor("externalBubble", container => {
return Promise.resolve(new Bubbler(container));
return Promise.resolve(new Bubbler(container, engine));
}, refresh);

@@ -6,0 +8,0 @@ }

{
"name": "@tsparticles/interaction-external-bubble",
"version": "3.6.0",
"version": "3.7.0",
"description": "tsParticles bubble external interaction",

@@ -90,3 +90,3 @@ "homepage": "https://particles.js.org",

"dependencies": {
"@tsparticles/engine": "^3.6.0"
"@tsparticles/engine": "3.7.0"
},

@@ -93,0 +93,0 @@ "publishConfig": {

@@ -7,3 +7,3 @@ /*!

* How to use? : Check the GitHub README
* v3.6.0
* v3.7.0
*/

@@ -38,3 +38,3 @@ /*

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ Bubbler: () => (/* binding */ Bubbler)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _Options_Classes_Bubble_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Options/Classes/Bubble.js */ \"./dist/browser/Options/Classes/Bubble.js\");\n/* harmony import */ var _Enums_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Enums.js */ \"./dist/browser/Enums.js\");\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Utils.js */ \"./dist/browser/Utils.js\");\n\n\n\n\nconst bubbleMode = \"bubble\",\n minDistance = 0,\n defaultClickTime = 0,\n double = 2,\n defaultOpacity = 1,\n ratioOffset = 1,\n defaultBubbleValue = 0,\n minRatio = 0,\n half = 0.5,\n defaultRatio = 1;\nclass Bubbler extends _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.ExternalInteractorBase {\n constructor(container) {\n super(container);\n this._clickBubble = () => {\n const container = this.container,\n options = container.actualOptions,\n mouseClickPos = container.interactivity.mouse.clickPosition,\n bubbleOptions = options.interactivity.modes.bubble;\n if (!bubbleOptions || !mouseClickPos) {\n return;\n }\n if (!container.bubble) {\n container.bubble = {};\n }\n const distance = container.retina.bubbleModeDistance;\n if (!distance || distance < minDistance) {\n return;\n }\n const query = container.particles.quadTree.queryCircle(mouseClickPos, distance, p => this.isEnabled(p)),\n {\n bubble\n } = container;\n for (const particle of query) {\n if (!bubble.clicking) {\n continue;\n }\n particle.bubble.inRange = !bubble.durationEnd;\n const pos = particle.getPosition(),\n distMouse = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistance)(pos, mouseClickPos),\n timeSpent = (new Date().getTime() - (container.interactivity.mouse.clickTime ?? defaultClickTime)) / _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.millisecondsToSeconds;\n if (timeSpent > bubbleOptions.duration) {\n bubble.durationEnd = true;\n }\n if (timeSpent > bubbleOptions.duration * double) {\n bubble.clicking = false;\n bubble.durationEnd = false;\n }\n const sizeData = {\n bubbleObj: {\n optValue: container.retina.bubbleModeSize,\n value: particle.bubble.radius\n },\n particlesObj: {\n optValue: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeMax)(particle.options.size.value) * container.retina.pixelRatio,\n value: particle.size.value\n },\n type: _Enums_js__WEBPACK_IMPORTED_MODULE_1__.ProcessBubbleType.size\n };\n this._process(particle, distMouse, timeSpent, sizeData);\n const opacityData = {\n bubbleObj: {\n optValue: bubbleOptions.opacity,\n value: particle.bubble.opacity\n },\n particlesObj: {\n optValue: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeMax)(particle.options.opacity.value),\n value: particle.opacity?.value ?? defaultOpacity\n },\n type: _Enums_js__WEBPACK_IMPORTED_MODULE_1__.ProcessBubbleType.opacity\n };\n this._process(particle, distMouse, timeSpent, opacityData);\n if (!bubble.durationEnd && distMouse <= distance) {\n this._hoverBubbleColor(particle, distMouse);\n } else {\n delete particle.bubble.color;\n }\n }\n };\n this._hoverBubble = () => {\n const container = this.container,\n mousePos = container.interactivity.mouse.position,\n distance = container.retina.bubbleModeDistance;\n if (!distance || distance < minDistance || !mousePos) {\n return;\n }\n const query = container.particles.quadTree.queryCircle(mousePos, distance, p => this.isEnabled(p));\n for (const particle of query) {\n particle.bubble.inRange = true;\n const pos = particle.getPosition(),\n pointDistance = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistance)(pos, mousePos),\n ratio = ratioOffset - pointDistance / distance;\n if (pointDistance <= distance) {\n if (ratio >= minRatio && container.interactivity.status === _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.mouseMoveEvent) {\n this._hoverBubbleSize(particle, ratio);\n this._hoverBubbleOpacity(particle, ratio);\n this._hoverBubbleColor(particle, ratio);\n }\n } else {\n this.reset(particle);\n }\n if (container.interactivity.status === _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.mouseLeaveEvent) {\n this.reset(particle);\n }\n }\n };\n this._hoverBubbleColor = (particle, ratio, divBubble) => {\n const options = this.container.actualOptions,\n bubbleOptions = divBubble ?? options.interactivity.modes.bubble;\n if (!bubbleOptions) {\n return;\n }\n if (!particle.bubble.finalColor) {\n const modeColor = bubbleOptions.color;\n if (!modeColor) {\n return;\n }\n const bubbleColor = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.itemFromSingleOrMultiple)(modeColor);\n particle.bubble.finalColor = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToHsl)(bubbleColor);\n }\n if (!particle.bubble.finalColor) {\n return;\n }\n if (bubbleOptions.mix) {\n particle.bubble.color = undefined;\n const pColor = particle.getFillColor();\n particle.bubble.color = pColor ? (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rgbToHsl)((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.colorMix)(pColor, particle.bubble.finalColor, ratioOffset - ratio, ratio)) : particle.bubble.finalColor;\n } else {\n particle.bubble.color = particle.bubble.finalColor;\n }\n };\n this._hoverBubbleOpacity = (particle, ratio, divBubble) => {\n const container = this.container,\n options = container.actualOptions,\n modeOpacity = divBubble?.opacity ?? options.interactivity.modes.bubble?.opacity;\n if (!modeOpacity) {\n return;\n }\n const optOpacity = particle.options.opacity.value,\n pOpacity = particle.opacity?.value ?? defaultOpacity,\n opacity = (0,_Utils_js__WEBPACK_IMPORTED_MODULE_2__.calculateBubbleValue)(pOpacity, modeOpacity, (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeMax)(optOpacity), ratio);\n if (opacity !== undefined) {\n particle.bubble.opacity = opacity;\n }\n };\n this._hoverBubbleSize = (particle, ratio, divBubble) => {\n const container = this.container,\n modeSize = divBubble?.size ? divBubble.size * container.retina.pixelRatio : container.retina.bubbleModeSize;\n if (modeSize === undefined) {\n return;\n }\n const optSize = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeMax)(particle.options.size.value) * container.retina.pixelRatio,\n pSize = particle.size.value,\n size = (0,_Utils_js__WEBPACK_IMPORTED_MODULE_2__.calculateBubbleValue)(pSize, modeSize, optSize, ratio);\n if (size !== undefined) {\n particle.bubble.radius = size;\n }\n };\n this._process = (particle, distMouse, timeSpent, data) => {\n const container = this.container,\n bubbleParam = data.bubbleObj.optValue,\n options = container.actualOptions,\n bubbleOptions = options.interactivity.modes.bubble;\n if (!bubbleOptions || bubbleParam === undefined) {\n return;\n }\n const bubbleDuration = bubbleOptions.duration,\n bubbleDistance = container.retina.bubbleModeDistance,\n particlesParam = data.particlesObj.optValue,\n pObjBubble = data.bubbleObj.value,\n pObj = data.particlesObj.value ?? defaultBubbleValue,\n type = data.type;\n if (!bubbleDistance || bubbleDistance < minDistance || bubbleParam === particlesParam) {\n return;\n }\n if (!container.bubble) {\n container.bubble = {};\n }\n if (container.bubble.durationEnd) {\n if (pObjBubble) {\n if (type === _Enums_js__WEBPACK_IMPORTED_MODULE_1__.ProcessBubbleType.size) {\n delete particle.bubble.radius;\n }\n if (type === _Enums_js__WEBPACK_IMPORTED_MODULE_1__.ProcessBubbleType.opacity) {\n delete particle.bubble.opacity;\n }\n }\n } else {\n if (distMouse <= bubbleDistance) {\n const obj = pObjBubble ?? pObj;\n if (obj !== bubbleParam) {\n const value = pObj - timeSpent * (pObj - bubbleParam) / bubbleDuration;\n if (type === _Enums_js__WEBPACK_IMPORTED_MODULE_1__.ProcessBubbleType.size) {\n particle.bubble.radius = value;\n }\n if (type === _Enums_js__WEBPACK_IMPORTED_MODULE_1__.ProcessBubbleType.opacity) {\n particle.bubble.opacity = value;\n }\n }\n } else {\n if (type === _Enums_js__WEBPACK_IMPORTED_MODULE_1__.ProcessBubbleType.size) {\n delete particle.bubble.radius;\n }\n if (type === _Enums_js__WEBPACK_IMPORTED_MODULE_1__.ProcessBubbleType.opacity) {\n delete particle.bubble.opacity;\n }\n }\n }\n };\n this._singleSelectorHover = (delta, selector, div) => {\n const container = this.container,\n selectors = document.querySelectorAll(selector),\n bubble = container.actualOptions.interactivity.modes.bubble;\n if (!bubble || !selectors.length) {\n return;\n }\n selectors.forEach(item => {\n const elem = item,\n pxRatio = container.retina.pixelRatio,\n pos = {\n x: (elem.offsetLeft + elem.offsetWidth * half) * pxRatio,\n y: (elem.offsetTop + elem.offsetHeight * half) * pxRatio\n },\n repulseRadius = elem.offsetWidth * half * pxRatio,\n area = div.type === _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.DivType.circle ? new _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Circle(pos.x, pos.y, repulseRadius) : new _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Rectangle(elem.offsetLeft * pxRatio, elem.offsetTop * pxRatio, elem.offsetWidth * pxRatio, elem.offsetHeight * pxRatio),\n query = container.particles.quadTree.query(area, p => this.isEnabled(p));\n for (const particle of query) {\n if (!area.contains(particle.getPosition())) {\n continue;\n }\n particle.bubble.inRange = true;\n const divs = bubble.divs,\n divBubble = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.divMode)(divs, elem);\n if (!particle.bubble.div || particle.bubble.div !== elem) {\n this.clear(particle, delta, true);\n particle.bubble.div = elem;\n }\n this._hoverBubbleSize(particle, defaultRatio, divBubble);\n this._hoverBubbleOpacity(particle, defaultRatio, divBubble);\n this._hoverBubbleColor(particle, defaultRatio, divBubble);\n }\n });\n };\n if (!container.bubble) {\n container.bubble = {};\n }\n this.handleClickMode = mode => {\n if (mode !== bubbleMode) {\n return;\n }\n if (!container.bubble) {\n container.bubble = {};\n }\n container.bubble.clicking = true;\n };\n }\n clear(particle, delta, force) {\n if (particle.bubble.inRange && !force) {\n return;\n }\n delete particle.bubble.div;\n delete particle.bubble.opacity;\n delete particle.bubble.radius;\n delete particle.bubble.color;\n }\n init() {\n const container = this.container,\n bubble = container.actualOptions.interactivity.modes.bubble;\n if (!bubble) {\n return;\n }\n container.retina.bubbleModeDistance = bubble.distance * container.retina.pixelRatio;\n if (bubble.size !== undefined) {\n container.retina.bubbleModeSize = bubble.size * container.retina.pixelRatio;\n }\n }\n interact(delta) {\n const options = this.container.actualOptions,\n events = options.interactivity.events,\n onHover = events.onHover,\n onClick = events.onClick,\n hoverEnabled = onHover.enable,\n hoverMode = onHover.mode,\n clickEnabled = onClick.enable,\n clickMode = onClick.mode,\n divs = events.onDiv;\n if (hoverEnabled && (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(bubbleMode, hoverMode)) {\n this._hoverBubble();\n } else if (clickEnabled && (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(bubbleMode, clickMode)) {\n this._clickBubble();\n } else {\n (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.divModeExecute)(bubbleMode, divs, (selector, div) => this._singleSelectorHover(delta, selector, div));\n }\n }\n isEnabled(particle) {\n const container = this.container,\n options = container.actualOptions,\n mouse = container.interactivity.mouse,\n events = (particle?.interactivity ?? options.interactivity).events,\n {\n onClick,\n onDiv,\n onHover\n } = events,\n divBubble = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isDivModeEnabled)(bubbleMode, onDiv);\n if (!(divBubble || onHover.enable && !!mouse.position || onClick.enable && mouse.clickPosition)) {\n return false;\n }\n return (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(bubbleMode, onHover.mode) || (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(bubbleMode, onClick.mode) || divBubble;\n }\n loadModeOptions(options, ...sources) {\n if (!options.bubble) {\n options.bubble = new _Options_Classes_Bubble_js__WEBPACK_IMPORTED_MODULE_3__.Bubble();\n }\n for (const source of sources) {\n options.bubble.load(source?.bubble);\n }\n }\n reset(particle) {\n particle.bubble.inRange = false;\n }\n}\n\n//# sourceURL=webpack://@tsparticles/interaction-external-bubble/./dist/browser/Bubbler.js?");
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ Bubbler: () => (/* binding */ Bubbler)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _Options_Classes_Bubble_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Options/Classes/Bubble.js */ \"./dist/browser/Options/Classes/Bubble.js\");\n/* harmony import */ var _Enums_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Enums.js */ \"./dist/browser/Enums.js\");\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Utils.js */ \"./dist/browser/Utils.js\");\n\n\n\n\nconst bubbleMode = \"bubble\",\n minDistance = 0,\n defaultClickTime = 0,\n double = 2,\n defaultOpacity = 1,\n ratioOffset = 1,\n defaultBubbleValue = 0,\n minRatio = 0,\n half = 0.5,\n defaultRatio = 1;\nclass Bubbler extends _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.ExternalInteractorBase {\n constructor(container, engine) {\n super(container);\n this._clickBubble = () => {\n const container = this.container,\n options = container.actualOptions,\n mouseClickPos = container.interactivity.mouse.clickPosition,\n bubbleOptions = options.interactivity.modes.bubble;\n if (!bubbleOptions || !mouseClickPos) {\n return;\n }\n if (!container.bubble) {\n container.bubble = {};\n }\n const distance = container.retina.bubbleModeDistance;\n if (!distance || distance < minDistance) {\n return;\n }\n const query = container.particles.quadTree.queryCircle(mouseClickPos, distance, p => this.isEnabled(p)),\n {\n bubble\n } = container;\n for (const particle of query) {\n if (!bubble.clicking) {\n continue;\n }\n particle.bubble.inRange = !bubble.durationEnd;\n const pos = particle.getPosition(),\n distMouse = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistance)(pos, mouseClickPos),\n timeSpent = (new Date().getTime() - (container.interactivity.mouse.clickTime ?? defaultClickTime)) / _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.millisecondsToSeconds;\n if (timeSpent > bubbleOptions.duration) {\n bubble.durationEnd = true;\n }\n if (timeSpent > bubbleOptions.duration * double) {\n bubble.clicking = false;\n bubble.durationEnd = false;\n }\n const sizeData = {\n bubbleObj: {\n optValue: container.retina.bubbleModeSize,\n value: particle.bubble.radius\n },\n particlesObj: {\n optValue: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeMax)(particle.options.size.value) * container.retina.pixelRatio,\n value: particle.size.value\n },\n type: _Enums_js__WEBPACK_IMPORTED_MODULE_1__.ProcessBubbleType.size\n };\n this._process(particle, distMouse, timeSpent, sizeData);\n const opacityData = {\n bubbleObj: {\n optValue: bubbleOptions.opacity,\n value: particle.bubble.opacity\n },\n particlesObj: {\n optValue: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeMax)(particle.options.opacity.value),\n value: particle.opacity?.value ?? defaultOpacity\n },\n type: _Enums_js__WEBPACK_IMPORTED_MODULE_1__.ProcessBubbleType.opacity\n };\n this._process(particle, distMouse, timeSpent, opacityData);\n if (!bubble.durationEnd && distMouse <= distance) {\n this._hoverBubbleColor(particle, distMouse);\n } else {\n delete particle.bubble.color;\n }\n }\n };\n this._hoverBubble = () => {\n const container = this.container,\n mousePos = container.interactivity.mouse.position,\n distance = container.retina.bubbleModeDistance;\n if (!distance || distance < minDistance || !mousePos) {\n return;\n }\n const query = container.particles.quadTree.queryCircle(mousePos, distance, p => this.isEnabled(p));\n for (const particle of query) {\n particle.bubble.inRange = true;\n const pos = particle.getPosition(),\n pointDistance = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistance)(pos, mousePos),\n ratio = ratioOffset - pointDistance / distance;\n if (pointDistance <= distance) {\n if (ratio >= minRatio && container.interactivity.status === _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.mouseMoveEvent) {\n this._hoverBubbleSize(particle, ratio);\n this._hoverBubbleOpacity(particle, ratio);\n this._hoverBubbleColor(particle, ratio);\n }\n } else {\n this.reset(particle);\n }\n if (container.interactivity.status === _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.mouseLeaveEvent) {\n this.reset(particle);\n }\n }\n };\n this._hoverBubbleColor = (particle, ratio, divBubble) => {\n const options = this.container.actualOptions,\n bubbleOptions = divBubble ?? options.interactivity.modes.bubble;\n if (!bubbleOptions) {\n return;\n }\n if (!particle.bubble.finalColor) {\n const modeColor = bubbleOptions.color;\n if (!modeColor) {\n return;\n }\n const bubbleColor = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.itemFromSingleOrMultiple)(modeColor);\n particle.bubble.finalColor = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToHsl)(this._engine, bubbleColor);\n }\n if (!particle.bubble.finalColor) {\n return;\n }\n if (bubbleOptions.mix) {\n particle.bubble.color = undefined;\n const pColor = particle.getFillColor();\n particle.bubble.color = pColor ? (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rgbToHsl)((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.colorMix)(pColor, particle.bubble.finalColor, ratioOffset - ratio, ratio)) : particle.bubble.finalColor;\n } else {\n particle.bubble.color = particle.bubble.finalColor;\n }\n };\n this._hoverBubbleOpacity = (particle, ratio, divBubble) => {\n const container = this.container,\n options = container.actualOptions,\n modeOpacity = divBubble?.opacity ?? options.interactivity.modes.bubble?.opacity;\n if (!modeOpacity) {\n return;\n }\n const optOpacity = particle.options.opacity.value,\n pOpacity = particle.opacity?.value ?? defaultOpacity,\n opacity = (0,_Utils_js__WEBPACK_IMPORTED_MODULE_2__.calculateBubbleValue)(pOpacity, modeOpacity, (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeMax)(optOpacity), ratio);\n if (opacity !== undefined) {\n particle.bubble.opacity = opacity;\n }\n };\n this._hoverBubbleSize = (particle, ratio, divBubble) => {\n const container = this.container,\n modeSize = divBubble?.size ? divBubble.size * container.retina.pixelRatio : container.retina.bubbleModeSize;\n if (modeSize === undefined) {\n return;\n }\n const optSize = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeMax)(particle.options.size.value) * container.retina.pixelRatio,\n pSize = particle.size.value,\n size = (0,_Utils_js__WEBPACK_IMPORTED_MODULE_2__.calculateBubbleValue)(pSize, modeSize, optSize, ratio);\n if (size !== undefined) {\n particle.bubble.radius = size;\n }\n };\n this._process = (particle, distMouse, timeSpent, data) => {\n const container = this.container,\n bubbleParam = data.bubbleObj.optValue,\n options = container.actualOptions,\n bubbleOptions = options.interactivity.modes.bubble;\n if (!bubbleOptions || bubbleParam === undefined) {\n return;\n }\n const bubbleDuration = bubbleOptions.duration,\n bubbleDistance = container.retina.bubbleModeDistance,\n particlesParam = data.particlesObj.optValue,\n pObjBubble = data.bubbleObj.value,\n pObj = data.particlesObj.value ?? defaultBubbleValue,\n type = data.type;\n if (!bubbleDistance || bubbleDistance < minDistance || bubbleParam === particlesParam) {\n return;\n }\n if (!container.bubble) {\n container.bubble = {};\n }\n if (container.bubble.durationEnd) {\n if (pObjBubble) {\n if (type === _Enums_js__WEBPACK_IMPORTED_MODULE_1__.ProcessBubbleType.size) {\n delete particle.bubble.radius;\n }\n if (type === _Enums_js__WEBPACK_IMPORTED_MODULE_1__.ProcessBubbleType.opacity) {\n delete particle.bubble.opacity;\n }\n }\n } else {\n if (distMouse <= bubbleDistance) {\n const obj = pObjBubble ?? pObj;\n if (obj !== bubbleParam) {\n const value = pObj - timeSpent * (pObj - bubbleParam) / bubbleDuration;\n if (type === _Enums_js__WEBPACK_IMPORTED_MODULE_1__.ProcessBubbleType.size) {\n particle.bubble.radius = value;\n }\n if (type === _Enums_js__WEBPACK_IMPORTED_MODULE_1__.ProcessBubbleType.opacity) {\n particle.bubble.opacity = value;\n }\n }\n } else {\n if (type === _Enums_js__WEBPACK_IMPORTED_MODULE_1__.ProcessBubbleType.size) {\n delete particle.bubble.radius;\n }\n if (type === _Enums_js__WEBPACK_IMPORTED_MODULE_1__.ProcessBubbleType.opacity) {\n delete particle.bubble.opacity;\n }\n }\n }\n };\n this._singleSelectorHover = (delta, selector, div) => {\n const container = this.container,\n selectors = document.querySelectorAll(selector),\n bubble = container.actualOptions.interactivity.modes.bubble;\n if (!bubble || !selectors.length) {\n return;\n }\n selectors.forEach(item => {\n const elem = item,\n pxRatio = container.retina.pixelRatio,\n pos = {\n x: (elem.offsetLeft + elem.offsetWidth * half) * pxRatio,\n y: (elem.offsetTop + elem.offsetHeight * half) * pxRatio\n },\n repulseRadius = elem.offsetWidth * half * pxRatio,\n area = div.type === _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.DivType.circle ? new _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Circle(pos.x, pos.y, repulseRadius) : new _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Rectangle(elem.offsetLeft * pxRatio, elem.offsetTop * pxRatio, elem.offsetWidth * pxRatio, elem.offsetHeight * pxRatio),\n query = container.particles.quadTree.query(area, p => this.isEnabled(p));\n for (const particle of query) {\n if (!area.contains(particle.getPosition())) {\n continue;\n }\n particle.bubble.inRange = true;\n const divs = bubble.divs,\n divBubble = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.divMode)(divs, elem);\n if (!particle.bubble.div || particle.bubble.div !== elem) {\n this.clear(particle, delta, true);\n particle.bubble.div = elem;\n }\n this._hoverBubbleSize(particle, defaultRatio, divBubble);\n this._hoverBubbleOpacity(particle, defaultRatio, divBubble);\n this._hoverBubbleColor(particle, defaultRatio, divBubble);\n }\n });\n };\n this._engine = engine;\n if (!container.bubble) {\n container.bubble = {};\n }\n this.handleClickMode = mode => {\n if (mode !== bubbleMode) {\n return;\n }\n if (!container.bubble) {\n container.bubble = {};\n }\n container.bubble.clicking = true;\n };\n }\n clear(particle, delta, force) {\n if (particle.bubble.inRange && !force) {\n return;\n }\n delete particle.bubble.div;\n delete particle.bubble.opacity;\n delete particle.bubble.radius;\n delete particle.bubble.color;\n }\n init() {\n const container = this.container,\n bubble = container.actualOptions.interactivity.modes.bubble;\n if (!bubble) {\n return;\n }\n container.retina.bubbleModeDistance = bubble.distance * container.retina.pixelRatio;\n if (bubble.size !== undefined) {\n container.retina.bubbleModeSize = bubble.size * container.retina.pixelRatio;\n }\n }\n interact(delta) {\n const options = this.container.actualOptions,\n events = options.interactivity.events,\n onHover = events.onHover,\n onClick = events.onClick,\n hoverEnabled = onHover.enable,\n hoverMode = onHover.mode,\n clickEnabled = onClick.enable,\n clickMode = onClick.mode,\n divs = events.onDiv;\n if (hoverEnabled && (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(bubbleMode, hoverMode)) {\n this._hoverBubble();\n } else if (clickEnabled && (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(bubbleMode, clickMode)) {\n this._clickBubble();\n } else {\n (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.divModeExecute)(bubbleMode, divs, (selector, div) => this._singleSelectorHover(delta, selector, div));\n }\n }\n isEnabled(particle) {\n const container = this.container,\n options = container.actualOptions,\n mouse = container.interactivity.mouse,\n events = (particle?.interactivity ?? options.interactivity).events,\n {\n onClick,\n onDiv,\n onHover\n } = events,\n divBubble = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isDivModeEnabled)(bubbleMode, onDiv);\n if (!(divBubble || onHover.enable && !!mouse.position || onClick.enable && mouse.clickPosition)) {\n return false;\n }\n return (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(bubbleMode, onHover.mode) || (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(bubbleMode, onClick.mode) || divBubble;\n }\n loadModeOptions(options, ...sources) {\n if (!options.bubble) {\n options.bubble = new _Options_Classes_Bubble_js__WEBPACK_IMPORTED_MODULE_3__.Bubble();\n }\n for (const source of sources) {\n options.bubble.load(source?.bubble);\n }\n }\n reset(particle) {\n particle.bubble.inRange = false;\n }\n}\n\n//# sourceURL=webpack://@tsparticles/interaction-external-bubble/./dist/browser/Bubbler.js?");

@@ -99,3 +99,3 @@ /***/ }),

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ Bubble: () => (/* reexport safe */ _Options_Classes_Bubble_js__WEBPACK_IMPORTED_MODULE_3__.Bubble),\n/* harmony export */ BubbleBase: () => (/* reexport safe */ _Options_Classes_BubbleBase_js__WEBPACK_IMPORTED_MODULE_1__.BubbleBase),\n/* harmony export */ BubbleDiv: () => (/* reexport safe */ _Options_Classes_BubbleDiv_js__WEBPACK_IMPORTED_MODULE_2__.BubbleDiv),\n/* harmony export */ loadExternalBubbleInteraction: () => (/* binding */ loadExternalBubbleInteraction)\n/* harmony export */ });\n/* harmony import */ var _Bubbler_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Bubbler.js */ \"./dist/browser/Bubbler.js\");\n/* harmony import */ var _Options_Classes_BubbleBase_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Options/Classes/BubbleBase.js */ \"./dist/browser/Options/Classes/BubbleBase.js\");\n/* harmony import */ var _Options_Classes_BubbleDiv_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Options/Classes/BubbleDiv.js */ \"./dist/browser/Options/Classes/BubbleDiv.js\");\n/* harmony import */ var _Options_Classes_Bubble_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Options/Classes/Bubble.js */ \"./dist/browser/Options/Classes/Bubble.js\");\n\nasync function loadExternalBubbleInteraction(engine, refresh = true) {\n await engine.addInteractor(\"externalBubble\", container => {\n return Promise.resolve(new _Bubbler_js__WEBPACK_IMPORTED_MODULE_0__.Bubbler(container));\n }, refresh);\n}\n\n\n\n\n\n\n\n//# sourceURL=webpack://@tsparticles/interaction-external-bubble/./dist/browser/index.js?");
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ Bubble: () => (/* reexport safe */ _Options_Classes_Bubble_js__WEBPACK_IMPORTED_MODULE_4__.Bubble),\n/* harmony export */ BubbleBase: () => (/* reexport safe */ _Options_Classes_BubbleBase_js__WEBPACK_IMPORTED_MODULE_2__.BubbleBase),\n/* harmony export */ BubbleDiv: () => (/* reexport safe */ _Options_Classes_BubbleDiv_js__WEBPACK_IMPORTED_MODULE_3__.BubbleDiv),\n/* harmony export */ loadExternalBubbleInteraction: () => (/* binding */ loadExternalBubbleInteraction)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _Bubbler_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Bubbler.js */ \"./dist/browser/Bubbler.js\");\n/* harmony import */ var _Options_Classes_BubbleBase_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Options/Classes/BubbleBase.js */ \"./dist/browser/Options/Classes/BubbleBase.js\");\n/* harmony import */ var _Options_Classes_BubbleDiv_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Options/Classes/BubbleDiv.js */ \"./dist/browser/Options/Classes/BubbleDiv.js\");\n/* harmony import */ var _Options_Classes_Bubble_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Options/Classes/Bubble.js */ \"./dist/browser/Options/Classes/Bubble.js\");\n\n\nasync function loadExternalBubbleInteraction(engine, refresh = true) {\n (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.assertValidVersion)(engine, \"3.7.0\");\n await engine.addInteractor(\"externalBubble\", container => {\n return Promise.resolve(new _Bubbler_js__WEBPACK_IMPORTED_MODULE_1__.Bubbler(container, engine));\n }, refresh);\n}\n\n\n\n\n\n\n\n//# sourceURL=webpack://@tsparticles/interaction-external-bubble/./dist/browser/index.js?");

@@ -102,0 +102,0 @@ /***/ }),

/*! 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=>(()=>{var t={303:t=>{t.exports=e}},i={};function o(e){var l=i[e];if(void 0!==l)return l.exports;var n=i[e]={exports:{}};return t[e](n,n.exports,o),n.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={};o.r(l),o.d(l,{Bubble:()=>a,BubbleBase:()=>s,BubbleDiv:()=>r,loadExternalBubbleInteraction:()=>p});var n,b=o(303);class s{constructor(){this.distance=200,this.duration=.4,this.mix=!1}load(e){if(!(0,b.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=(0,b.isArray)(this.color)?void 0:this.color;this.color=(0,b.executeOnSingleOrMultiple)(e.color,(e=>b.OptionsColor.create(t,e)))}void 0!==e.size&&(this.size=e.size)}}}class r extends s{constructor(){super(),this.selectors=[]}load(e){super.load(e),(0,b.isNull)(e)||void 0!==e.selectors&&(this.selectors=e.selectors)}}class a extends s{load(e){super.load(e),(0,b.isNull)(e)||(this.divs=(0,b.executeOnSingleOrMultiple)(e.divs,(e=>{const t=new r;return t.load(e),t})))}}function c(e,t,i,o){if(t>=i){const l=e+(t-i)*o;return(0,b.clamp)(l,e,t)}if(t<i){const l=e-(i-t)*o;return(0,b.clamp)(l,t,e)}}!function(e){e.color="color",e.opacity="opacity",e.size="size"}(n||(n={}));const u="bubble";class d extends b.ExternalInteractorBase{constructor(e){super(e),this._clickBubble=()=>{const e=this.container,t=e.actualOptions,i=e.interactivity.mouse.clickPosition,o=t.interactivity.modes.bubble;if(!o||!i)return;e.bubble||(e.bubble={});const l=e.retina.bubbleModeDistance;if(!l||l<0)return;const s=e.particles.quadTree.queryCircle(i,l,(e=>this.isEnabled(e))),{bubble:r}=e;for(const t of s){if(!r.clicking)continue;t.bubble.inRange=!r.durationEnd;const s=t.getPosition(),a=(0,b.getDistance)(s,i),c=((new Date).getTime()-(e.interactivity.mouse.clickTime??0))/b.millisecondsToSeconds;c>o.duration&&(r.durationEnd=!0),c>2*o.duration&&(r.clicking=!1,r.durationEnd=!1);const u={bubbleObj:{optValue:e.retina.bubbleModeSize,value:t.bubble.radius},particlesObj:{optValue:(0,b.getRangeMax)(t.options.size.value)*e.retina.pixelRatio,value:t.size.value},type:n.size};this._process(t,a,c,u);const d={bubbleObj:{optValue:o.opacity,value:t.bubble.opacity},particlesObj:{optValue:(0,b.getRangeMax)(t.options.opacity.value),value:t.opacity?.value??1},type:n.opacity};this._process(t,a,c,d),!r.durationEnd&&a<=l?this._hoverBubbleColor(t,a):delete t.bubble.color}},this._hoverBubble=()=>{const e=this.container,t=e.interactivity.mouse.position,i=e.retina.bubbleModeDistance;if(!i||i<0||!t)return;const o=e.particles.quadTree.queryCircle(t,i,(e=>this.isEnabled(e)));for(const l of o){l.bubble.inRange=!0;const o=l.getPosition(),n=(0,b.getDistance)(o,t),s=1-n/i;n<=i?s>=0&&e.interactivity.status===b.mouseMoveEvent&&(this._hoverBubbleSize(l,s),this._hoverBubbleOpacity(l,s),this._hoverBubbleColor(l,s)):this.reset(l),e.interactivity.status===b.mouseLeaveEvent&&this.reset(l)}},this._hoverBubbleColor=(e,t,i)=>{const o=this.container.actualOptions,l=i??o.interactivity.modes.bubble;if(l){if(!e.bubble.finalColor){const t=l.color;if(!t)return;const i=(0,b.itemFromSingleOrMultiple)(t);e.bubble.finalColor=(0,b.rangeColorToHsl)(i)}if(e.bubble.finalColor)if(l.mix){e.bubble.color=void 0;const i=e.getFillColor();e.bubble.color=i?(0,b.rgbToHsl)((0,b.colorMix)(i,e.bubble.finalColor,1-t,t)):e.bubble.finalColor}else e.bubble.color=e.bubble.finalColor}},this._hoverBubbleOpacity=(e,t,i)=>{const o=this.container.actualOptions,l=i?.opacity??o.interactivity.modes.bubble?.opacity;if(!l)return;const n=e.options.opacity.value,s=c(e.opacity?.value??1,l,(0,b.getRangeMax)(n),t);void 0!==s&&(e.bubble.opacity=s)},this._hoverBubbleSize=(e,t,i)=>{const o=this.container,l=i?.size?i.size*o.retina.pixelRatio:o.retina.bubbleModeSize;if(void 0===l)return;const n=(0,b.getRangeMax)(e.options.size.value)*o.retina.pixelRatio,s=c(e.size.value,l,n,t);void 0!==s&&(e.bubble.radius=s)},this._process=(e,t,i,o)=>{const l=this.container,b=o.bubbleObj.optValue,s=l.actualOptions.interactivity.modes.bubble;if(!s||void 0===b)return;const r=s.duration,a=l.retina.bubbleModeDistance,c=o.particlesObj.optValue,u=o.bubbleObj.value,d=o.particlesObj.value??0,p=o.type;if(a&&!(a<0)&&b!==c)if(l.bubble||(l.bubble={}),l.bubble.durationEnd)u&&(p===n.size&&delete e.bubble.radius,p===n.opacity&&delete e.bubble.opacity);else if(t<=a){if((u??d)!==b){const t=d-i*(d-b)/r;p===n.size&&(e.bubble.radius=t),p===n.opacity&&(e.bubble.opacity=t)}}else p===n.size&&delete e.bubble.radius,p===n.opacity&&delete e.bubble.opacity},this._singleSelectorHover=(e,t,i)=>{const o=this.container,l=document.querySelectorAll(t),n=o.actualOptions.interactivity.modes.bubble;n&&l.length&&l.forEach((t=>{const l=t,s=o.retina.pixelRatio,r={x:(l.offsetLeft+.5*l.offsetWidth)*s,y:(l.offsetTop+.5*l.offsetHeight)*s},a=.5*l.offsetWidth*s,c=i.type===b.DivType.circle?new b.Circle(r.x,r.y,a):new b.Rectangle(l.offsetLeft*s,l.offsetTop*s,l.offsetWidth*s,l.offsetHeight*s),u=o.particles.quadTree.query(c,(e=>this.isEnabled(e)));for(const t of u){if(!c.contains(t.getPosition()))continue;t.bubble.inRange=!0;const i=n.divs,o=(0,b.divMode)(i,l);t.bubble.div&&t.bubble.div===l||(this.clear(t,e,!0),t.bubble.div=l),this._hoverBubbleSize(t,1,o),this._hoverBubbleOpacity(t,1,o),this._hoverBubbleColor(t,1,o)}}))},e.bubble||(e.bubble={}),this.handleClickMode=t=>{t===u&&(e.bubble||(e.bubble={}),e.bubble.clicking=!0)}}clear(e,t,i){e.bubble.inRange&&!i||(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&&(e.retina.bubbleModeDistance=t.distance*e.retina.pixelRatio,void 0!==t.size&&(e.retina.bubbleModeSize=t.size*e.retina.pixelRatio))}interact(e){const t=this.container.actualOptions.interactivity.events,i=t.onHover,o=t.onClick,l=i.enable,n=i.mode,s=o.enable,r=o.mode,a=t.onDiv;l&&(0,b.isInArray)(u,n)?this._hoverBubble():s&&(0,b.isInArray)(u,r)?this._clickBubble():(0,b.divModeExecute)(u,a,((t,i)=>this._singleSelectorHover(e,t,i)))}isEnabled(e){const t=this.container,i=t.actualOptions,o=t.interactivity.mouse,l=(e?.interactivity??i.interactivity).events,{onClick:n,onDiv:s,onHover:r}=l,a=(0,b.isDivModeEnabled)(u,s);return!!(a||r.enable&&o.position||n.enable&&o.clickPosition)&&((0,b.isInArray)(u,r.mode)||(0,b.isInArray)(u,n.mode)||a)}loadModeOptions(e,...t){e.bubble||(e.bubble=new a);for(const i of t)e.bubble.load(i?.bubble)}reset(e){e.bubble.inRange=!1}}async function p(e,t=!0){await e.addInteractor("externalBubble",(e=>Promise.resolve(new d(e))),t)}return l})()));
!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=>(()=>{var t={303:t=>{t.exports=e}},i={};function o(e){var n=i[e];if(void 0!==n)return n.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 n={};o.r(n),o.d(n,{Bubble:()=>a,BubbleBase:()=>b,BubbleDiv:()=>r,loadExternalBubbleInteraction:()=>p});var l,s=o(303);class b{constructor(){this.distance=200,this.duration=.4,this.mix=!1}load(e){if(!(0,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=(0,s.isArray)(this.color)?void 0:this.color;this.color=(0,s.executeOnSingleOrMultiple)(e.color,(e=>s.OptionsColor.create(t,e)))}void 0!==e.size&&(this.size=e.size)}}}class r extends b{constructor(){super(),this.selectors=[]}load(e){super.load(e),(0,s.isNull)(e)||void 0!==e.selectors&&(this.selectors=e.selectors)}}class a extends b{load(e){super.load(e),(0,s.isNull)(e)||(this.divs=(0,s.executeOnSingleOrMultiple)(e.divs,(e=>{const t=new r;return t.load(e),t})))}}function c(e,t,i,o){if(t>=i){const n=e+(t-i)*o;return(0,s.clamp)(n,e,t)}if(t<i){const n=e-(i-t)*o;return(0,s.clamp)(n,t,e)}}!function(e){e.color="color",e.opacity="opacity",e.size="size"}(l||(l={}));const u="bubble";class d extends s.ExternalInteractorBase{constructor(e,t){super(e),this._clickBubble=()=>{const e=this.container,t=e.actualOptions,i=e.interactivity.mouse.clickPosition,o=t.interactivity.modes.bubble;if(!o||!i)return;e.bubble||(e.bubble={});const n=e.retina.bubbleModeDistance;if(!n||n<0)return;const b=e.particles.quadTree.queryCircle(i,n,(e=>this.isEnabled(e))),{bubble:r}=e;for(const t of b){if(!r.clicking)continue;t.bubble.inRange=!r.durationEnd;const b=t.getPosition(),a=(0,s.getDistance)(b,i),c=((new Date).getTime()-(e.interactivity.mouse.clickTime??0))/s.millisecondsToSeconds;c>o.duration&&(r.durationEnd=!0),c>2*o.duration&&(r.clicking=!1,r.durationEnd=!1);const u={bubbleObj:{optValue:e.retina.bubbleModeSize,value:t.bubble.radius},particlesObj:{optValue:(0,s.getRangeMax)(t.options.size.value)*e.retina.pixelRatio,value:t.size.value},type:l.size};this._process(t,a,c,u);const d={bubbleObj:{optValue:o.opacity,value:t.bubble.opacity},particlesObj:{optValue:(0,s.getRangeMax)(t.options.opacity.value),value:t.opacity?.value??1},type:l.opacity};this._process(t,a,c,d),!r.durationEnd&&a<=n?this._hoverBubbleColor(t,a):delete t.bubble.color}},this._hoverBubble=()=>{const e=this.container,t=e.interactivity.mouse.position,i=e.retina.bubbleModeDistance;if(!i||i<0||!t)return;const o=e.particles.quadTree.queryCircle(t,i,(e=>this.isEnabled(e)));for(const n of o){n.bubble.inRange=!0;const o=n.getPosition(),l=(0,s.getDistance)(o,t),b=1-l/i;l<=i?b>=0&&e.interactivity.status===s.mouseMoveEvent&&(this._hoverBubbleSize(n,b),this._hoverBubbleOpacity(n,b),this._hoverBubbleColor(n,b)):this.reset(n),e.interactivity.status===s.mouseLeaveEvent&&this.reset(n)}},this._hoverBubbleColor=(e,t,i)=>{const o=this.container.actualOptions,n=i??o.interactivity.modes.bubble;if(n){if(!e.bubble.finalColor){const t=n.color;if(!t)return;const i=(0,s.itemFromSingleOrMultiple)(t);e.bubble.finalColor=(0,s.rangeColorToHsl)(this._engine,i)}if(e.bubble.finalColor)if(n.mix){e.bubble.color=void 0;const i=e.getFillColor();e.bubble.color=i?(0,s.rgbToHsl)((0,s.colorMix)(i,e.bubble.finalColor,1-t,t)):e.bubble.finalColor}else e.bubble.color=e.bubble.finalColor}},this._hoverBubbleOpacity=(e,t,i)=>{const o=this.container.actualOptions,n=i?.opacity??o.interactivity.modes.bubble?.opacity;if(!n)return;const l=e.options.opacity.value,b=c(e.opacity?.value??1,n,(0,s.getRangeMax)(l),t);void 0!==b&&(e.bubble.opacity=b)},this._hoverBubbleSize=(e,t,i)=>{const o=this.container,n=i?.size?i.size*o.retina.pixelRatio:o.retina.bubbleModeSize;if(void 0===n)return;const l=(0,s.getRangeMax)(e.options.size.value)*o.retina.pixelRatio,b=c(e.size.value,n,l,t);void 0!==b&&(e.bubble.radius=b)},this._process=(e,t,i,o)=>{const n=this.container,s=o.bubbleObj.optValue,b=n.actualOptions.interactivity.modes.bubble;if(!b||void 0===s)return;const r=b.duration,a=n.retina.bubbleModeDistance,c=o.particlesObj.optValue,u=o.bubbleObj.value,d=o.particlesObj.value??0,p=o.type;if(a&&!(a<0)&&s!==c)if(n.bubble||(n.bubble={}),n.bubble.durationEnd)u&&(p===l.size&&delete e.bubble.radius,p===l.opacity&&delete e.bubble.opacity);else if(t<=a){if((u??d)!==s){const t=d-i*(d-s)/r;p===l.size&&(e.bubble.radius=t),p===l.opacity&&(e.bubble.opacity=t)}}else p===l.size&&delete e.bubble.radius,p===l.opacity&&delete e.bubble.opacity},this._singleSelectorHover=(e,t,i)=>{const o=this.container,n=document.querySelectorAll(t),l=o.actualOptions.interactivity.modes.bubble;l&&n.length&&n.forEach((t=>{const n=t,b=o.retina.pixelRatio,r={x:(n.offsetLeft+.5*n.offsetWidth)*b,y:(n.offsetTop+.5*n.offsetHeight)*b},a=.5*n.offsetWidth*b,c=i.type===s.DivType.circle?new s.Circle(r.x,r.y,a):new s.Rectangle(n.offsetLeft*b,n.offsetTop*b,n.offsetWidth*b,n.offsetHeight*b),u=o.particles.quadTree.query(c,(e=>this.isEnabled(e)));for(const t of u){if(!c.contains(t.getPosition()))continue;t.bubble.inRange=!0;const i=l.divs,o=(0,s.divMode)(i,n);t.bubble.div&&t.bubble.div===n||(this.clear(t,e,!0),t.bubble.div=n),this._hoverBubbleSize(t,1,o),this._hoverBubbleOpacity(t,1,o),this._hoverBubbleColor(t,1,o)}}))},this._engine=t,e.bubble||(e.bubble={}),this.handleClickMode=t=>{t===u&&(e.bubble||(e.bubble={}),e.bubble.clicking=!0)}}clear(e,t,i){e.bubble.inRange&&!i||(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&&(e.retina.bubbleModeDistance=t.distance*e.retina.pixelRatio,void 0!==t.size&&(e.retina.bubbleModeSize=t.size*e.retina.pixelRatio))}interact(e){const t=this.container.actualOptions.interactivity.events,i=t.onHover,o=t.onClick,n=i.enable,l=i.mode,b=o.enable,r=o.mode,a=t.onDiv;n&&(0,s.isInArray)(u,l)?this._hoverBubble():b&&(0,s.isInArray)(u,r)?this._clickBubble():(0,s.divModeExecute)(u,a,((t,i)=>this._singleSelectorHover(e,t,i)))}isEnabled(e){const t=this.container,i=t.actualOptions,o=t.interactivity.mouse,n=(e?.interactivity??i.interactivity).events,{onClick:l,onDiv:b,onHover:r}=n,a=(0,s.isDivModeEnabled)(u,b);return!!(a||r.enable&&o.position||l.enable&&o.clickPosition)&&((0,s.isInArray)(u,r.mode)||(0,s.isInArray)(u,l.mode)||a)}loadModeOptions(e,...t){e.bubble||(e.bubble=new a);for(const i of t)e.bubble.load(i?.bubble)}reset(e){e.bubble.inRange=!1}}async function p(e,t=!0){(0,s.assertValidVersion)(e,"3.7.0"),await e.addInteractor("externalBubble",(t=>Promise.resolve(new d(t,e))),t)}return n})()));

@@ -1,1 +0,1 @@

/*! tsParticles Bubble External Interaction v3.6.0 by Matteo Bruni */
/*! tsParticles Bubble External Interaction v3.7.0 by Matteo Bruni */
import type { BubbleContainer, BubbleMode, IBubbleMode } from "./Types.js";
import { ExternalInteractorBase, type IDelta, type IModes, type Modes, type Particle, type RecursivePartial } from "@tsparticles/engine";
import { type Engine, ExternalInteractorBase, type IDelta, type IModes, type Modes, type Particle, type RecursivePartial } from "@tsparticles/engine";
export declare class Bubbler extends ExternalInteractorBase<BubbleContainer> {
handleClickMode: (mode: string) => void;
constructor(container: BubbleContainer);
private readonly _engine;
constructor(container: BubbleContainer, engine: Engine);
clear(particle: Particle, delta: IDelta, force?: boolean): void;

@@ -7,0 +8,0 @@ init(): void;

@@ -1,2 +0,2 @@

import type { Engine } from "@tsparticles/engine";
import { type Engine } from "@tsparticles/engine";
export declare function loadExternalBubbleInteraction(engine: Engine, refresh?: boolean): Promise<void>;

@@ -3,0 +3,0 @@ export * from "./Options/Classes/BubbleBase.js";

@@ -19,3 +19,3 @@ (function (factory) {

class Bubbler extends engine_1.ExternalInteractorBase {
constructor(container) {
constructor(container, engine) {
super(container);

@@ -116,3 +116,3 @@ this._clickBubble = () => {

const bubbleColor = (0, engine_1.itemFromSingleOrMultiple)(modeColor);
particle.bubble.finalColor = (0, engine_1.rangeColorToHsl)(bubbleColor);
particle.bubble.finalColor = (0, engine_1.rangeColorToHsl)(this._engine, bubbleColor);
}

@@ -226,2 +226,3 @@ if (!particle.bubble.finalColor) {

};
this._engine = engine;
if (!container.bubble) {

@@ -228,0 +229,0 @@ container.bubble = {};

@@ -21,3 +21,3 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {

else if (typeof define === "function" && define.amd) {
define(["require", "exports", "./Bubbler.js", "./Options/Classes/BubbleBase.js", "./Options/Classes/BubbleDiv.js", "./Options/Classes/Bubble.js", "./Options/Interfaces/IBubbleBase.js", "./Options/Interfaces/IBubbleDiv.js", "./Options/Interfaces/IBubble.js"], factory);
define(["require", "exports", "@tsparticles/engine", "./Bubbler.js", "./Options/Classes/BubbleBase.js", "./Options/Classes/BubbleDiv.js", "./Options/Classes/Bubble.js", "./Options/Interfaces/IBubbleBase.js", "./Options/Interfaces/IBubbleDiv.js", "./Options/Interfaces/IBubble.js"], factory);
}

@@ -28,6 +28,8 @@ })(function (require, exports) {

exports.loadExternalBubbleInteraction = loadExternalBubbleInteraction;
const engine_1 = require("@tsparticles/engine");
const Bubbler_js_1 = require("./Bubbler.js");
async function loadExternalBubbleInteraction(engine, refresh = true) {
(0, engine_1.assertValidVersion)(engine, "3.7.0");
await engine.addInteractor("externalBubble", container => {
return Promise.resolve(new Bubbler_js_1.Bubbler(container));
return Promise.resolve(new Bubbler_js_1.Bubbler(container, engine));
}, refresh);

@@ -34,0 +36,0 @@ }

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc