@tsparticles/interaction-external-bubble 3.0.0-alpha.0

package/tsparticles.interaction.external.bubble.js

@@ -0,0 +1,520 @@
+/*!
+ * Author : Matteo Bruni
+ * MIT license: https://opensource.org/licenses/MIT
+ * Demo / Generator : https://particles.js.org/
+ * GitHub : https://www.github.com/matteobruni/tsparticles
+ * How to use? : Check the GitHub README
+ * v3.0.0-alpha.0
+ */
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory(require("@tsparticles/engine"));
+	else if(typeof define === 'function' && define.amd)
+		define(["@tsparticles/engine"], factory);
+	else {
+		var a = typeof exports === 'object' ? factory(require("@tsparticles/engine")) : factory(root["window"]);
+		for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
+	}
+})(this, (__WEBPACK_EXTERNAL_MODULE__533__) => {
+return /******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	var __webpack_modules__ = ({
+
+/***/ 533:
+/***/ ((module) => {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE__533__;
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/define property getters */
+/******/ 	(() => {
+/******/ 		// define getter functions for harmony exports
+/******/ 		__webpack_require__.d = (exports, definition) => {
+/******/ 			for(var key in definition) {
+/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 				}
+/******/ 			}
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
+/******/ 	(() => {
+/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	(() => {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = (exports) => {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+var __webpack_exports__ = {};
+// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
+(() => {
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "Bubble": () => (/* reexport */ Bubble),
+  "BubbleBase": () => (/* reexport */ BubbleBase),
+  "BubbleDiv": () => (/* reexport */ BubbleDiv),
+  "loadExternalBubbleInteraction": () => (/* binding */ loadExternalBubbleInteraction)
+});
+
+// EXTERNAL MODULE: external {"commonjs":"@tsparticles/engine","commonjs2":"@tsparticles/engine","amd":"@tsparticles/engine","root":"window"}
+var engine_root_window_ = __webpack_require__(533);
+;// CONCATENATED MODULE: ./dist/browser/Options/Classes/BubbleBase.js
+
+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) {
+      const sourceColor = this.color instanceof Array ? undefined : this.color;
+      this.color = (0,engine_root_window_.executeOnSingleOrMultiple)(data.color, color => {
+        return engine_root_window_.OptionsColor.create(sourceColor, color);
+      });
+    }
+    if (data.size !== undefined) {
+      this.size = data.size;
+    }
+  }
+}
+;// CONCATENATED MODULE: ./dist/browser/Options/Classes/BubbleDiv.js
+
+
+class BubbleDiv extends BubbleBase {
+  constructor() {
+    super();
+    this.selectors = [];
+  }
+  get ids() {
+    return (0,engine_root_window_.executeOnSingleOrMultiple)(this.selectors, t => t.replace("#", ""));
+  }
+  set ids(value) {
+    this.selectors = (0,engine_root_window_.executeOnSingleOrMultiple)(value, t => `#${t}`);
+  }
+  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
+
+
+
+class Bubble extends BubbleBase {
+  load(data) {
+    super.load(data);
+    if (!data) {
+      return;
+    }
+    this.divs = (0,engine_root_window_.executeOnSingleOrMultiple)(data.divs, div => {
+      const tmp = new BubbleDiv();
+      tmp.load(div);
+      return tmp;
+    });
+  }
+}
+;// CONCATENATED MODULE: ./dist/browser/Bubbler.js
+
+
+function calculateBubbleValue(particleValue, modeValue, optionsValue, ratio) {
+  if (modeValue >= optionsValue) {
+    const value = particleValue + (modeValue - optionsValue) * ratio;
+    return (0,engine_root_window_.clamp)(value, particleValue, modeValue);
+  } else if (modeValue < optionsValue) {
+    const value = particleValue - (optionsValue - modeValue) * ratio;
+    return (0,engine_root_window_.clamp)(value, modeValue, particleValue);
+  }
+}
+class Bubbler extends engine_root_window_.ExternalInteractorBase {
+  constructor(container) {
+    super(container);
+    if (!container.bubble) {
+      container.bubble = {};
+    }
+    this.handleClickMode = mode => {
+      if (mode !== "bubble") {
+        return;
+      }
+      if (!container.bubble) {
+        container.bubble = {};
+      }
+      container.bubble.clicking = true;
+    };
+  }
+  clear(particle, delta, force) {
+    if (particle.bubble.inRange && !force) {
+      return;
+    }
+    delete particle.bubble.div;
+    delete particle.bubble.opacity;
+    delete particle.bubble.radius;
+    delete particle.bubble.color;
+  }
+  init() {
+    const container = this.container,
+      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(delta) {
+    const options = this.container.actualOptions,
+      events = options.interactivity.events,
+      onHover = events.onHover,
+      onClick = events.onClick,
+      hoverEnabled = onHover.enable,
+      hoverMode = onHover.mode,
+      clickEnabled = onClick.enable,
+      clickMode = onClick.mode,
+      divs = events.onDiv;
+    if (hoverEnabled && (0,engine_root_window_.isInArray)("bubble", hoverMode)) {
+      this.hoverBubble(delta);
+    } else if (clickEnabled && (0,engine_root_window_.isInArray)("bubble", clickMode)) {
+      this.clickBubble(delta);
+    } else {
+      (0,engine_root_window_.divModeExecute)("bubble", divs, (selector, div) => this.singleSelectorHover(delta, selector, div));
+    }
+  }
+  isEnabled(particle) {
+    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,engine_root_window_.isDivModeEnabled)("bubble", divs);
+    if (!(divBubble || events.onHover.enable && mouse.position || events.onClick.enable && mouse.clickPosition)) {
+      return false;
+    }
+    const hoverMode = events.onHover.mode;
+    const clickMode = events.onClick.mode;
+    return (0,engine_root_window_.isInArray)("bubble", hoverMode) || (0,engine_root_window_.isInArray)("bubble", clickMode) || divBubble;
+  }
+  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) {
+    particle.bubble.inRange = false;
+  }
+  clickBubble(delta) {
+    var _a, _b;
+    const container = this.container,
+      options = container.actualOptions,
+      mouseClickPos = container.interactivity.mouse.clickPosition,
+      bubble = options.interactivity.modes.bubble;
+    if (!bubble || !mouseClickPos) {
+      return;
+    }
+    if (!container.bubble) {
+      container.bubble = {};
+    }
+    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) {
+      if (!container.bubble.clicking) {
+        continue;
+      }
+      particle.bubble.inRange = !container.bubble.durationEnd;
+      const pos = particle.getPosition(),
+        distMouse = (0,engine_root_window_.getDistance)(pos, mouseClickPos),
+        timeSpent = (new Date().getTime() - (container.interactivity.mouse.clickTime || 0)) / 1000;
+      if (timeSpent > bubble.duration) {
+        container.bubble.durationEnd = true;
+      }
+      if (timeSpent > bubble.duration * 2) {
+        container.bubble.clicking = false;
+        container.bubble.durationEnd = false;
+      }
+      const sizeData = {
+        bubbleObj: {
+          optValue: container.retina.bubbleModeSize,
+          value: particle.bubble.radius
+        },
+        particlesObj: {
+          optValue: (0,engine_root_window_.getRangeMax)(particle.options.size.value) * container.retina.pixelRatio,
+          value: particle.size.value
+        },
+        type: "size"
+      };
+      this.process(particle, distMouse, timeSpent, sizeData);
+      const opacityData = {
+        bubbleObj: {
+          optValue: bubble.opacity,
+          value: particle.bubble.opacity
+        },
+        particlesObj: {
+          optValue: (0,engine_root_window_.getRangeMax)(particle.options.opacity.value),
+          value: (_b = (_a = particle.opacity) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 1
+        },
+        type: "opacity"
+      };
+      this.process(particle, distMouse, timeSpent, opacityData);
+      if (!container.bubble.durationEnd) {
+        if (distMouse <= distance) {
+          this.hoverBubbleColor(particle, distMouse);
+        } else {
+          delete particle.bubble.color;
+        }
+      } else {
+        delete particle.bubble.color;
+      }
+    }
+  }
+  hoverBubble(delta) {
+    const container = this.container,
+      mousePos = container.interactivity.mouse.position,
+      distance = container.retina.bubbleModeDistance;
+    if (!distance || distance < 0 || mousePos === undefined) {
+      return;
+    }
+    const query = container.particles.quadTree.queryCircle(mousePos, distance, p => this.isEnabled(p));
+    for (const particle of query) {
+      particle.bubble.inRange = true;
+      const pos = particle.getPosition(),
+        pointDistance = (0,engine_root_window_.getDistance)(pos, mousePos),
+        ratio = 1 - pointDistance / distance;
+      if (pointDistance <= distance) {
+        if (ratio >= 0 && container.interactivity.status === engine_root_window_.mouseMoveEvent) {
+          this.hoverBubbleSize(particle, ratio);
+          this.hoverBubbleOpacity(particle, ratio);
+          this.hoverBubbleColor(particle, ratio);
+        }
+      } else {
+        this.reset(particle);
+      }
+      if (container.interactivity.status === engine_root_window_.mouseLeaveEvent) {
+        this.reset(particle);
+      }
+    }
+  }
+  hoverBubbleColor(particle, ratio, divBubble) {
+    const options = this.container.actualOptions;
+    const bubbleOptions = divBubble !== null && divBubble !== void 0 ? divBubble : options.interactivity.modes.bubble;
+    if (!bubbleOptions) {
+      return;
+    }
+    if (!particle.bubble.finalColor) {
+      const modeColor = bubbleOptions.color;
+      if (!modeColor) {
+        return;
+      }
+      const bubbleColor = (0,engine_root_window_.itemFromSingleOrMultiple)(modeColor);
+      particle.bubble.finalColor = (0,engine_root_window_.rangeColorToHsl)(bubbleColor);
+    }
+    if (!particle.bubble.finalColor) {
+      return;
+    }
+    if (bubbleOptions.mix) {
+      particle.bubble.color = undefined;
+      const pColor = particle.getFillColor();
+      particle.bubble.color = pColor ? (0,engine_root_window_.rgbToHsl)((0,engine_root_window_.colorMix)(pColor, particle.bubble.finalColor, 1 - ratio, ratio)) : particle.bubble.finalColor;
+    } else {
+      particle.bubble.color = particle.bubble.finalColor;
+    }
+  }
+  hoverBubbleOpacity(particle, ratio, divBubble) {
+    var _a, _b, _c, _d;
+    const container = this.container,
+      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) {
+      return;
+    }
+    const optOpacity = particle.options.opacity.value;
+    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,engine_root_window_.getRangeMax)(optOpacity), ratio);
+    if (opacity !== undefined) {
+      particle.bubble.opacity = opacity;
+    }
+  }
+  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;
+    if (modeSize === undefined) {
+      return;
+    }
+    const optSize = (0,engine_root_window_.getRangeMax)(particle.options.size.value) * container.retina.pixelRatio;
+    const pSize = particle.size.value;
+    const size = calculateBubbleValue(pSize, modeSize, optSize, ratio);
+    if (size !== undefined) {
+      particle.bubble.radius = size;
+    }
+  }
+  process(particle, distMouse, timeSpent, data) {
+    const container = this.container,
+      bubbleParam = data.bubbleObj.optValue,
+      options = container.actualOptions,
+      bubble = options.interactivity.modes.bubble;
+    if (!bubble || bubbleParam === undefined) {
+      return;
+    }
+    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;
+    }
+    if (!container.bubble) {
+      container.bubble = {};
+    }
+    if (!container.bubble.durationEnd) {
+      if (distMouse <= bubbleDistance) {
+        const obj = pObjBubble !== null && pObjBubble !== void 0 ? pObjBubble : pObj;
+        if (obj !== bubbleParam) {
+          const value = pObj - timeSpent * (pObj - bubbleParam) / bubbleDuration;
+          if (type === "size") {
+            particle.bubble.radius = value;
+          }
+          if (type === "opacity") {
+            particle.bubble.opacity = value;
+          }
+        }
+      } else {
+        if (type === "size") {
+          delete particle.bubble.radius;
+        }
+        if (type === "opacity") {
+          delete particle.bubble.opacity;
+        }
+      }
+    } else if (pObjBubble) {
+      if (type === "size") {
+        delete particle.bubble.radius;
+      }
+      if (type === "opacity") {
+        delete particle.bubble.opacity;
+      }
+    }
+  }
+  singleSelectorHover(delta, selector, div) {
+    const container = this.container,
+      selectors = document.querySelectorAll(selector),
+      bubble = container.actualOptions.interactivity.modes.bubble;
+    if (!bubble || !selectors.length) {
+      return;
+    }
+    selectors.forEach(item => {
+      const elem = item,
+        pxRatio = container.retina.pixelRatio,
+        pos = {
+          x: (elem.offsetLeft + elem.offsetWidth / 2) * pxRatio,
+          y: (elem.offsetTop + elem.offsetHeight / 2) * pxRatio
+        },
+        repulseRadius = elem.offsetWidth / 2 * pxRatio,
+        area = div.type === "circle" ? new engine_root_window_.Circle(pos.x, pos.y, repulseRadius) : new engine_root_window_.Rectangle(elem.offsetLeft * pxRatio, elem.offsetTop * pxRatio, elem.offsetWidth * pxRatio, elem.offsetHeight * pxRatio),
+        query = container.particles.quadTree.query(area, p => this.isEnabled(p));
+      for (const particle of query) {
+        if (!area.contains(particle.getPosition())) {
+          continue;
+        }
+        particle.bubble.inRange = true;
+        const divs = bubble.divs;
+        const divBubble = (0,engine_root_window_.divMode)(divs, elem);
+        if (!particle.bubble.div || particle.bubble.div !== elem) {
+          this.clear(particle, delta, true);
+          particle.bubble.div = elem;
+        }
+        this.hoverBubbleSize(particle, 1, divBubble);
+        this.hoverBubbleOpacity(particle, 1, divBubble);
+        this.hoverBubbleColor(particle, 1, divBubble);
+      }
+    });
+  }
+}
+;// CONCATENATED MODULE: ./dist/browser/index.js
+
+async function loadExternalBubbleInteraction(engine) {
+  await engine.addInteractor("externalBubble", container => new Bubbler(container));
+}
+
+
+
+
+
+
+})();
+
+/******/ 	return __webpack_exports__;
+/******/ })()
+;
+});

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

@@ -0,0 +1,2 @@
+/*! 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={533:t=>{t.exports=e}},i={};function o(e){var l=i[e];if(void 0!==l)return l.exports;var b=i[e]={exports:{}};return t[e](b,b.exports,o),b.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,{Bubble:()=>b,BubbleBase:()=>t,BubbleDiv:()=>i,loadExternalBubbleInteraction:()=>r});var e=o(533);class t{constructor(){this.distance=200,this.duration=.4,this.mix=!1}load(t){if(t){if(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){const i=this.color instanceof Array?void 0:this.color;this.color=(0,e.executeOnSingleOrMultiple)(t.color,(t=>e.OptionsColor.create(i,t)))}void 0!==t.size&&(this.size=t.size)}}}class i extends t{constructor(){super(),this.selectors=[]}get ids(){return(0,e.executeOnSingleOrMultiple)(this.selectors,(e=>e.replace("#","")))}set ids(t){this.selectors=(0,e.executeOnSingleOrMultiple)(t,(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 b extends t{load(t){super.load(t),t&&(this.divs=(0,e.executeOnSingleOrMultiple)(t.divs,(e=>{const t=new i;return t.load(e),t})))}}function n(t,i,o,l){if(i>=o){const b=t+(i-o)*l;return(0,e.clamp)(b,t,i)}if(i<o){const b=t-(o-i)*l;return(0,e.clamp)(b,i,t)}}class s 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,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))}async interact(t){const i=this.container.actualOptions.interactivity.events,o=i.onHover,l=i.onClick,b=o.enable,n=o.mode,s=l.enable,r=l.mode,a=i.onDiv;b&&(0,e.isInArray)("bubble",n)?this.hoverBubble(t):s&&(0,e.isInArray)("bubble",r)?this.clickBubble(t):(0,e.divModeExecute)("bubble",a,((e,i)=>this.singleSelectorHover(t,e,i)))}isEnabled(t){var i;const o=this.container,l=o.actualOptions,b=o.interactivity.mouse,n=(null!==(i=null==t?void 0:t.interactivity)&&void 0!==i?i:l.interactivity).events,s=n.onDiv,r=(0,e.isDivModeEnabled)("bubble",s);if(!(r||n.onHover.enable&&b.position||n.onClick.enable&&b.clickPosition))return!1;const a=n.onHover.mode,u=n.onClick.mode;return(0,e.isInArray)("bubble",a)||(0,e.isInArray)("bubble",u)||r}loadModeOptions(e,...t){e.bubble||(e.bubble=new b);for(const i of t)e.bubble.load(null==i?void 0:i.bubble)}reset(e){e.bubble.inRange=!1}clickBubble(t){var i,o;const l=this.container,b=l.actualOptions,n=l.interactivity.mouse.clickPosition,s=b.interactivity.modes.bubble;if(!s||!n)return;l.bubble||(l.bubble={});const r=l.retina.bubbleModeDistance;if(!r||r<0)return;const a=l.particles.quadTree.queryCircle(n,r,(e=>this.isEnabled(e)));for(const t of a){if(!l.bubble.clicking)continue;t.bubble.inRange=!l.bubble.durationEnd;const b=t.getPosition(),a=(0,e.getDistance)(b,n),u=((new Date).getTime()-(l.interactivity.mouse.clickTime||0))/1e3;u>s.duration&&(l.bubble.durationEnd=!0),u>2*s.duration&&(l.bubble.clicking=!1,l.bubble.durationEnd=!1);const c={bubbleObj:{optValue:l.retina.bubbleModeSize,value:t.bubble.radius},particlesObj:{optValue:(0,e.getRangeMax)(t.options.size.value)*l.retina.pixelRatio,value:t.size.value},type:"size"};this.process(t,a,u,c);const d={bubbleObj:{optValue:s.opacity,value:t.bubble.opacity},particlesObj:{optValue:(0,e.getRangeMax)(t.options.opacity.value),value:null!==(o=null===(i=t.opacity)||void 0===i?void 0:i.value)&&void 0!==o?o:1},type:"opacity"};this.process(t,a,u,d),l.bubble.durationEnd?delete t.bubble.color:a<=r?this.hoverBubbleColor(t,a):delete t.bubble.color}}hoverBubble(t){const i=this.container,o=i.interactivity.mouse.position,l=i.retina.bubbleModeDistance;if(!l||l<0||void 0===o)return;const b=i.particles.quadTree.queryCircle(o,l,(e=>this.isEnabled(e)));for(const t of b){t.bubble.inRange=!0;const b=t.getPosition(),n=(0,e.getDistance)(b,o),s=1-n/l;n<=l?s>=0&&i.interactivity.status===e.mouseMoveEvent&&(this.hoverBubbleSize(t,s),this.hoverBubbleOpacity(t,s),this.hoverBubbleColor(t,s)):this.reset(t),i.interactivity.status===e.mouseLeaveEvent&&this.reset(t)}}hoverBubbleColor(t,i,o){const l=this.container.actualOptions,b=null!=o?o:l.interactivity.modes.bubble;if(b){if(!t.bubble.finalColor){const i=b.color;if(!i)return;const o=(0,e.itemFromSingleOrMultiple)(i);t.bubble.finalColor=(0,e.rangeColorToHsl)(o)}if(t.bubble.finalColor)if(b.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,b,s,r;const a=this.container.actualOptions,u=null!==(l=null==o?void 0:o.opacity)&&void 0!==l?l:null===(b=a.interactivity.modes.bubble)||void 0===b?void 0:b.opacity;if(!u)return;const c=t.options.opacity.value,d=n(null!==(r=null===(s=t.opacity)||void 0===s?void 0:s.value)&&void 0!==r?r:1,u,(0,e.getRangeMax)(c),i);void 0!==d&&(t.bubble.opacity=d)}hoverBubbleSize(t,i,o){const l=this.container,b=(null==o?void 0:o.size)?o.size*l.retina.pixelRatio:l.retina.bubbleModeSize;if(void 0===b)return;const s=(0,e.getRangeMax)(t.options.size.value)*l.retina.pixelRatio,r=n(t.size.value,b,s,i);void 0!==r&&(t.bubble.radius=r)}process(e,t,i,o){const l=this.container,b=o.bubbleObj.optValue,n=l.actualOptions.interactivity.modes.bubble;if(!n||void 0===b)return;const s=n.duration,r=l.retina.bubbleModeDistance,a=o.particlesObj.optValue,u=o.bubbleObj.value,c=o.particlesObj.value||0,d=o.type;if(r&&!(r<0)&&b!==a)if(l.bubble||(l.bubble={}),l.bubble.durationEnd)u&&("size"===d&&delete e.bubble.radius,"opacity"===d&&delete e.bubble.opacity);else if(t<=r){if((null!=u?u:c)!==b){const t=c-i*(c-b)/s;"size"===d&&(e.bubble.radius=t),"opacity"===d&&(e.bubble.opacity=t)}}else"size"===d&&delete e.bubble.radius,"opacity"===d&&delete e.bubble.opacity}singleSelectorHover(t,i,o){const l=this.container,b=document.querySelectorAll(i),n=l.actualOptions.interactivity.modes.bubble;n&&b.length&&b.forEach((i=>{const b=i,s=l.retina.pixelRatio,r={x:(b.offsetLeft+b.offsetWidth/2)*s,y:(b.offsetTop+b.offsetHeight/2)*s},a=b.offsetWidth/2*s,u="circle"===o.type?new e.Circle(r.x,r.y,a):new e.Rectangle(b.offsetLeft*s,b.offsetTop*s,b.offsetWidth*s,b.offsetHeight*s),c=l.particles.quadTree.query(u,(e=>this.isEnabled(e)));for(const i of c){if(!u.contains(i.getPosition()))continue;i.bubble.inRange=!0;const o=n.divs,l=(0,e.divMode)(o,b);i.bubble.div&&i.bubble.div===b||(this.clear(i,t,!0),i.bubble.div=b),this.hoverBubbleSize(i,1,l),this.hoverBubbleOpacity(i,1,l),this.hoverBubbleColor(i,1,l)}}))}}async function r(e){await e.addInteractor("externalBubble",(e=>new s(e)))}})(),l})()));

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

@@ -0,0 +1,8 @@
+/*!
+ * Author : Matteo Bruni
+ * MIT license: https://opensource.org/licenses/MIT
+ * Demo / Generator : https://particles.js.org/
+ * GitHub : https://www.github.com/matteobruni/tsparticles
+ * How to use? : Check the GitHub README
+ * v3.0.0-alpha.0
+ */

package/types/Bubbler.d.ts

@@ -0,0 +1,20 @@
+import type { BubbleContainer, BubbleMode, IBubbleMode } from "./Types";
+import { ClickMode, ExternalInteractorBase } from "@tsparticles/engine";
+import type { IDelta, IModes, Modes, Particle, RecursivePartial } from "@tsparticles/engine";
+export declare class Bubbler extends ExternalInteractorBase<BubbleContainer> {
+    handleClickMode: (mode: ClickMode | string) => void;
+    constructor(container: BubbleContainer);
+    clear(particle: Particle, delta: IDelta, force?: boolean): void;
+    init(): void;
+    interact(delta: IDelta): Promise<void>;
+    isEnabled(particle?: Particle): boolean;
+    loadModeOptions(options: Modes & BubbleMode, ...sources: RecursivePartial<(IModes & IBubbleMode) | undefined>[]): void;
+    reset(particle: Particle): void;
+    private clickBubble;
+    private hoverBubble;
+    private hoverBubbleColor;
+    private hoverBubbleOpacity;
+    private hoverBubbleSize;
+    private process;
+    private singleSelectorHover;
+}

package/types/IBubblerProcessParam.d.ts

@@ -0,0 +1,10 @@
+import type { ProcessBubbleType } from "./ProcessBubbleType";
+export interface IBubblerProcessParam {
+    bubbleObj: IBubblerProcessParamObj;
+    particlesObj: IBubblerProcessParamObj;
+    type: ProcessBubbleType;
+}
+export interface IBubblerProcessParamObj {
+    optValue?: number;
+    value?: number;
+}

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

@@ -0,0 +1,8 @@
+import type { IOptionLoader, RecursivePartial, SingleOrMultiple } from "@tsparticles/engine";
+import { BubbleBase } from "./BubbleBase";
+import { BubbleDiv } from "./BubbleDiv";
+import type { IBubble } from "../Interfaces/IBubble";
+export declare class Bubble extends BubbleBase implements IBubble, IOptionLoader<IBubble> {
+    divs?: SingleOrMultiple<BubbleDiv>;
+    load(data?: RecursivePartial<IBubble>): void;
+}

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

@@ -0,0 +1,13 @@
+import type { IOptionLoader, RecursivePartial, SingleOrMultiple } from "@tsparticles/engine";
+import { OptionsColor } from "@tsparticles/engine";
+import type { IBubbleBase } from "../Interfaces/IBubbleBase";
+export declare abstract class BubbleBase implements IBubbleBase, IOptionLoader<IBubbleBase> {
+    color?: SingleOrMultiple<OptionsColor>;
+    distance: number;
+    duration: number;
+    mix: boolean;
+    opacity?: number;
+    size?: number;
+    constructor();
+    load(data?: RecursivePartial<IBubbleBase>): void;
+}

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

@@ -0,0 +1,10 @@
+import type { IOptionLoader, RecursivePartial, SingleOrMultiple } from "@tsparticles/engine";
+import { BubbleBase } from "./BubbleBase";
+import type { IBubbleDiv } from "../Interfaces/IBubbleDiv";
+export declare class BubbleDiv extends BubbleBase implements IBubbleDiv, IOptionLoader<IBubbleDiv> {
+    selectors: SingleOrMultiple<string>;
+    constructor();
+    get ids(): SingleOrMultiple<string>;
+    set ids(value: SingleOrMultiple<string>);
+    load(data?: RecursivePartial<IBubbleDiv>): void;
+}

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

@@ -0,0 +1,7 @@
+import type { BubbleMode } from "../../Types";
+import type { Options } from "@tsparticles/engine";
+export type BubbleOptions = Options & {
+    interactivity: {
+        modes: BubbleMode;
+    };
+};

package/types/Options/Interfaces/IBubble.d.ts

@@ -0,0 +1,6 @@
+import type { IBubbleBase } from "./IBubbleBase";
+import type { IBubbleDiv } from "./IBubbleDiv";
+import type { SingleOrMultiple } from "@tsparticles/engine";
+export interface IBubble extends IBubbleBase {
+    divs?: SingleOrMultiple<IBubbleDiv>;
+}

package/types/Options/Interfaces/IBubbleBase.d.ts

@@ -0,0 +1,9 @@
+import type { IOptionsColor, SingleOrMultiple } from "@tsparticles/engine";
+export interface IBubbleBase {
+    color?: SingleOrMultiple<string | IOptionsColor>;
+    distance: number;
+    duration: number;
+    mix: boolean;
+    opacity?: number;
+    size?: number;
+}

package/types/Options/Interfaces/IBubbleDiv.d.ts

@@ -0,0 +1,4 @@
+import type { IBubbleBase } from "./IBubbleBase";
+import type { IModeDiv } from "@tsparticles/engine";
+export interface IBubbleDiv extends IBubbleBase, IModeDiv {
+}

package/types/ProcessBubbleType.d.ts

@@ -0,0 +1,5 @@
+export declare const enum ProcessBubbleType {
+    color = "color",
+    opacity = "opacity",
+    size = "size"
+}

package/types/Types.d.ts

@@ -0,0 +1,23 @@
+import type { Bubble } from "./Options/Classes/Bubble";
+import type { BubbleOptions } from "./Options/Classes/BubbleOptions";
+import type { Container } from "@tsparticles/engine";
+import type { IBubble } from "./Options/Interfaces/IBubble";
+export type IBubbleMode = {
+    bubble: IBubble;
+};
+export type BubbleMode = {
+    bubble?: Bubble;
+};
+interface IContainerBubble {
+    clicking?: boolean;
+    durationEnd?: boolean;
+}
+export type BubbleContainer = Container & {
+    actualOptions: BubbleOptions;
+    bubble?: IContainerBubble;
+    retina: {
+        bubbleModeDistance?: number;
+        bubbleModeSize?: number;
+    };
+};
+export {};