@tsparticles/plugin-interactivity 4.0.0-alpha.4

package/dist_browser_InteractivityPluginInstance_js.js

@@ -0,0 +1,50 @@
+/*!
+ * 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
+ * v4.0.0-alpha.4
+ */
+"use strict";
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+(this["webpackChunk_tsparticles_plugin_interactivity"] = this["webpackChunk_tsparticles_plugin_interactivity"] || []).push([["dist_browser_InteractivityPluginInstance_js"],{
+
+/***/ "./dist/browser/InteractionManager.js"
+/*!********************************************!*\
+  !*** ./dist/browser/InteractionManager.js ***!
+  \********************************************/
+(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   InteractionManager: () => (/* binding */ InteractionManager)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _InteractivityConstants_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./InteractivityConstants.js */ \"./dist/browser/InteractivityConstants.js\");\n/* harmony import */ var _InteractivityEventListeners_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./InteractivityEventListeners.js */ \"./dist/browser/InteractivityEventListeners.js\");\n/* harmony import */ var _InteractorType_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./InteractorType.js */ \"./dist/browser/InteractorType.js\");\n\n\n\n\nclass InteractionManager {\n  constructor(engine, container) {\n    this.container = container;\n    this._intersectionManager = entries => {\n      const {\n        container\n      } = this;\n      if (container.destroyed || !container.actualOptions.pauseOnOutsideViewport) {\n        return;\n      }\n      for (const entry of entries) {\n        if (entry.target !== this.interactivityData.element) {\n          continue;\n        }\n        if (entry.isIntersecting) {\n          container.play();\n        } else {\n          container.pause();\n        }\n      }\n    };\n    this._engine = engine;\n    this._interactors = [];\n    this._externalInteractors = [];\n    this._particleInteractors = [];\n    this._clickHandlers = new Map();\n    this._eventListeners = new _InteractivityEventListeners_js__WEBPACK_IMPORTED_MODULE_2__.InteractivityEventListeners(container, this);\n    this.interactivityData = {\n      mouse: {\n        clicking: false,\n        inside: false\n      }\n    };\n    this._intersectionObserver = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.safeIntersectionObserver)(entries => {\n      this._intersectionManager(entries);\n    });\n  }\n  addClickHandler(callback) {\n    const {\n      container,\n      interactivityData\n    } = this;\n    if (container.destroyed) {\n      return;\n    }\n    const el = interactivityData.element;\n    if (!el) {\n      return;\n    }\n    const clickOrTouchHandler = (e, pos, radius) => {\n        if (container.destroyed) {\n          return;\n        }\n        const pxRatio = container.retina.pixelRatio,\n          posRetina = {\n            x: pos.x * pxRatio,\n            y: pos.y * pxRatio\n          },\n          particles = container.particles.quadTree.queryCircle(posRetina, radius * pxRatio);\n        callback(e, particles);\n      },\n      clickHandler = e => {\n        if (container.destroyed) {\n          return;\n        }\n        const mouseEvent = e,\n          pos = {\n            x: mouseEvent.offsetX,\n            y: mouseEvent.offsetY\n          };\n        clickOrTouchHandler(e, pos, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.clickRadius);\n      },\n      touchStartHandler = () => {\n        if (container.destroyed) {\n          return;\n        }\n        touched = true;\n        touchMoved = false;\n      },\n      touchMoveHandler = () => {\n        if (container.destroyed) {\n          return;\n        }\n        touchMoved = true;\n      },\n      touchEndHandler = e => {\n        if (container.destroyed) {\n          return;\n        }\n        if (touched && !touchMoved) {\n          const touchEvent = e,\n            lastTouch = touchEvent.touches[touchEvent.touches.length - _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.touchEndLengthOffset];\n          if (!lastTouch) {\n            return;\n          }\n          const element = container.canvas.element,\n            canvasRect = element ? element.getBoundingClientRect() : undefined,\n            pos = {\n              x: lastTouch.clientX - (canvasRect ? canvasRect.left : _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.minCoordinate),\n              y: lastTouch.clientY - (canvasRect ? canvasRect.top : _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.minCoordinate)\n            };\n          clickOrTouchHandler(e, pos, Math.max(lastTouch.radiusX, lastTouch.radiusY));\n        }\n        touched = false;\n        touchMoved = false;\n      },\n      touchCancelHandler = () => {\n        if (container.destroyed) {\n          return;\n        }\n        touched = false;\n        touchMoved = false;\n      };\n    let touched = false,\n      touchMoved = false;\n    this._clickHandlers.set(_InteractivityConstants_js__WEBPACK_IMPORTED_MODULE_1__.clickEvent, clickHandler);\n    this._clickHandlers.set(_InteractivityConstants_js__WEBPACK_IMPORTED_MODULE_1__.touchStartEvent, touchStartHandler);\n    this._clickHandlers.set(_InteractivityConstants_js__WEBPACK_IMPORTED_MODULE_1__.touchMoveEvent, touchMoveHandler);\n    this._clickHandlers.set(_InteractivityConstants_js__WEBPACK_IMPORTED_MODULE_1__.touchEndEvent, touchEndHandler);\n    this._clickHandlers.set(_InteractivityConstants_js__WEBPACK_IMPORTED_MODULE_1__.touchCancelEvent, touchCancelHandler);\n    for (const [key, handler] of this._clickHandlers) {\n      el.addEventListener(key, handler);\n    }\n  }\n  addListeners() {\n    this._eventListeners.addListeners();\n  }\n  clearClickHandlers() {\n    const {\n      container,\n      interactivityData\n    } = this;\n    if (container.destroyed) {\n      return;\n    }\n    for (const [key, handler] of this._clickHandlers) {\n      interactivityData.element?.removeEventListener(key, handler);\n    }\n    this._clickHandlers.clear();\n  }\n  externalInteract(delta) {\n    for (const interactor of this._externalInteractors) {\n      const {\n        interactivityData\n      } = this;\n      if (interactor.isEnabled(interactivityData)) {\n        interactor.interact(interactivityData, delta);\n      }\n    }\n  }\n  handleClickMode(mode) {\n    if (this.container.destroyed) {\n      return;\n    }\n    const {\n      interactivityData\n    } = this;\n    for (const interactor of this._externalInteractors) {\n      interactor.handleClickMode?.(mode, interactivityData);\n    }\n  }\n  async init() {\n    const interactors = await this._engine.getInteractors?.(this.container, true);\n    if (!interactors) {\n      return;\n    }\n    this._interactors = interactors;\n    this._externalInteractors = [];\n    this._particleInteractors = [];\n    for (const interactor of this._interactors) {\n      switch (interactor.type) {\n        case _InteractorType_js__WEBPACK_IMPORTED_MODULE_3__.InteractorType.external:\n          this._externalInteractors.push(interactor);\n          break;\n        case _InteractorType_js__WEBPACK_IMPORTED_MODULE_3__.InteractorType.particles:\n          this._particleInteractors.push(interactor);\n          break;\n      }\n      interactor.init();\n    }\n  }\n  particlesInteract(particle, delta) {\n    const {\n      interactivityData\n    } = this;\n    for (const interactor of this._externalInteractors) {\n      interactor.clear(particle, delta);\n    }\n    for (const interactor of this._particleInteractors) {\n      if (interactor.isEnabled(particle, interactivityData)) {\n        interactor.interact(particle, interactivityData, delta);\n      }\n    }\n  }\n  removeListeners() {\n    this._eventListeners.removeListeners();\n  }\n  reset(particle) {\n    const {\n      interactivityData\n    } = this;\n    for (const interactor of this._externalInteractors) {\n      if (interactor.isEnabled(interactivityData)) {\n        interactor.reset(interactivityData, particle);\n      }\n    }\n    for (const interactor of this._particleInteractors) {\n      if (interactor.isEnabled(particle, interactivityData)) {\n        interactor.reset(interactivityData, particle);\n      }\n    }\n  }\n  startObserving() {\n    const {\n      interactivityData\n    } = this;\n    if (interactivityData.element instanceof HTMLElement && this._intersectionObserver) {\n      this._intersectionObserver.observe(interactivityData.element);\n    }\n  }\n  stopObserving() {\n    const {\n      interactivityData\n    } = this;\n    if (interactivityData.element instanceof HTMLElement && this._intersectionObserver) {\n      this._intersectionObserver.unobserve(interactivityData.element);\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-interactivity/./dist/browser/InteractionManager.js?\n}");
+
+/***/ },
+
+/***/ "./dist/browser/InteractivityEventListeners.js"
+/*!*****************************************************!*\
+  !*** ./dist/browser/InteractivityEventListeners.js ***!
+  \*****************************************************/
+(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   InteractivityEventListeners: () => (/* binding */ InteractivityEventListeners)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _InteractivityConstants_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./InteractivityConstants.js */ \"./dist/browser/InteractivityConstants.js\");\n/* harmony import */ var _InteractivityDetect_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./InteractivityDetect.js */ \"./dist/browser/InteractivityDetect.js\");\n\n\n\nclass InteractivityEventListeners {\n  constructor(container, interactionManager) {\n    this._canPush = true;\n    this._doMouseTouchClick = e => {\n      const container = this._container,\n        interactionManager = this._interactionManager,\n        options = container.actualOptions;\n      if (this._canPush) {\n        const mouseInteractivity = interactionManager.interactivityData.mouse,\n          mousePos = mouseInteractivity.position;\n        if (!mousePos) {\n          return;\n        }\n        mouseInteractivity.clickPosition = {\n          ...mousePos\n        };\n        mouseInteractivity.clickTime = Date.now();\n        const onClick = options.interactivity?.events.onClick;\n        if (!onClick?.mode) {\n          return;\n        }\n        (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.executeOnSingleOrMultiple)(onClick.mode, mode => {\n          interactionManager.handleClickMode(mode);\n        });\n      }\n      if (e.type === \"touchend\") {\n        setTimeout(() => {\n          this._mouseTouchFinish();\n        }, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.touchDelay);\n      }\n    };\n    this._handleVisibilityChange = () => {\n      this._mouseTouchFinish();\n    };\n    this._manageInteractivityListeners = (mouseLeaveTmpEvent, add) => {\n      const handlers = this._handlers,\n        container = this._container,\n        interactionManager = this._interactionManager,\n        options = container.actualOptions,\n        interactivityEl = interactionManager.interactivityData.element;\n      if (!interactivityEl) {\n        return;\n      }\n      const html = interactivityEl,\n        canvas = container.canvas;\n      canvas.setPointerEvents(html === canvas.element ? \"initial\" : \"none\");\n      if (!(options.interactivity?.events.onHover.enable || options.interactivity?.events.onClick.enable)) {\n        return;\n      }\n      (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.manageListener)(interactivityEl, _InteractivityConstants_js__WEBPACK_IMPORTED_MODULE_1__.mouseMoveEvent, handlers.mouseMove, add);\n      (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.manageListener)(interactivityEl, _InteractivityConstants_js__WEBPACK_IMPORTED_MODULE_1__.touchStartEvent, handlers.touchStart, add);\n      (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.manageListener)(interactivityEl, _InteractivityConstants_js__WEBPACK_IMPORTED_MODULE_1__.touchMoveEvent, handlers.touchMove, add);\n      if (options.interactivity.events.onClick.enable) {\n        (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.manageListener)(interactivityEl, _InteractivityConstants_js__WEBPACK_IMPORTED_MODULE_1__.touchEndEvent, handlers.touchEndClick, add);\n        (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.manageListener)(interactivityEl, _InteractivityConstants_js__WEBPACK_IMPORTED_MODULE_1__.mouseUpEvent, handlers.mouseUp, add);\n        (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.manageListener)(interactivityEl, _InteractivityConstants_js__WEBPACK_IMPORTED_MODULE_1__.mouseDownEvent, handlers.mouseDown, add);\n      } else {\n        (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.manageListener)(interactivityEl, _InteractivityConstants_js__WEBPACK_IMPORTED_MODULE_1__.touchEndEvent, handlers.touchEnd, add);\n      }\n      (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.manageListener)(interactivityEl, mouseLeaveTmpEvent, handlers.mouseLeave, add);\n      (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.manageListener)(interactivityEl, _InteractivityConstants_js__WEBPACK_IMPORTED_MODULE_1__.touchCancelEvent, handlers.touchCancel, add);\n    };\n    this._manageListeners = add => {\n      const handlers = this._handlers,\n        container = this._container,\n        interactionManager = this._interactionManager,\n        options = container.actualOptions,\n        detectType = options.interactivity?.detectsOn,\n        canvasEl = container.canvas.element;\n      let mouseLeaveTmpEvent = _InteractivityConstants_js__WEBPACK_IMPORTED_MODULE_1__.mouseLeaveEvent;\n      if (detectType === _InteractivityDetect_js__WEBPACK_IMPORTED_MODULE_2__.InteractivityDetect.window) {\n        interactionManager.interactivityData.element = globalThis;\n        mouseLeaveTmpEvent = _InteractivityConstants_js__WEBPACK_IMPORTED_MODULE_1__.mouseOutEvent;\n      } else if (detectType === _InteractivityDetect_js__WEBPACK_IMPORTED_MODULE_2__.InteractivityDetect.parent && canvasEl) {\n        interactionManager.interactivityData.element = canvasEl.parentElement ?? canvasEl.parentNode;\n      } else {\n        interactionManager.interactivityData.element = canvasEl;\n      }\n      this._manageInteractivityListeners(mouseLeaveTmpEvent, add);\n      (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.manageListener)(document, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.visibilityChangeEvent, handlers.visibilityChange, add, false);\n    };\n    this._mouseDown = () => {\n      const {\n          interactivityData\n        } = this._interactionManager,\n        {\n          mouse\n        } = interactivityData;\n      mouse.clicking = true;\n      mouse.downPosition = mouse.position;\n    };\n    this._mouseTouchClick = e => {\n      const container = this._container,\n        interactionManager = this._interactionManager,\n        options = container.actualOptions,\n        {\n          mouse\n        } = interactionManager.interactivityData;\n      mouse.inside = true;\n      let handled = false;\n      const mousePosition = mouse.position;\n      if (!mousePosition || !options.interactivity?.events.onClick.enable) {\n        return;\n      }\n      for (const plugin of container.plugins) {\n        if (!plugin.clickPositionValid) {\n          continue;\n        }\n        handled = plugin.clickPositionValid(mousePosition);\n        if (handled) {\n          break;\n        }\n      }\n      if (!handled) {\n        this._doMouseTouchClick(e);\n      }\n      mouse.clicking = false;\n    };\n    this._mouseTouchFinish = () => {\n      const {\n          interactivityData\n        } = this._interactionManager,\n        {\n          mouse\n        } = interactivityData;\n      delete mouse.position;\n      delete mouse.clickPosition;\n      delete mouse.downPosition;\n      interactivityData.status = _InteractivityConstants_js__WEBPACK_IMPORTED_MODULE_1__.mouseLeaveEvent;\n      mouse.inside = false;\n      mouse.clicking = false;\n    };\n    this._mouseTouchMove = e => {\n      const container = this._container,\n        interactionManager = this._interactionManager,\n        options = container.actualOptions,\n        interactivity = interactionManager.interactivityData,\n        canvasEl = container.canvas.element;\n      if (!interactivity.element) {\n        return;\n      }\n      interactivity.mouse.inside = true;\n      let pos;\n      if (e.type.startsWith(\"pointer\")) {\n        this._canPush = true;\n        const mouseEvent = e;\n        if (interactivity.element === globalThis) {\n          if (canvasEl) {\n            const clientRect = canvasEl.getBoundingClientRect();\n            pos = {\n              x: mouseEvent.clientX - clientRect.left,\n              y: mouseEvent.clientY - clientRect.top\n            };\n          }\n        } else if (options.interactivity?.detectsOn === _InteractivityDetect_js__WEBPACK_IMPORTED_MODULE_2__.InteractivityDetect.parent) {\n          const source = mouseEvent.target,\n            target = mouseEvent.currentTarget;\n          if (canvasEl) {\n            const sourceRect = source.getBoundingClientRect(),\n              targetRect = target.getBoundingClientRect(),\n              canvasRect = canvasEl.getBoundingClientRect();\n            pos = {\n              x: mouseEvent.offsetX + _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.double * sourceRect.left - (targetRect.left + canvasRect.left),\n              y: mouseEvent.offsetY + _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.double * sourceRect.top - (targetRect.top + canvasRect.top)\n            };\n          } else {\n            pos = {\n              x: mouseEvent.offsetX,\n              y: mouseEvent.offsetY\n            };\n          }\n        } else if (mouseEvent.target === canvasEl) {\n          pos = {\n            x: mouseEvent.offsetX,\n            y: mouseEvent.offsetY\n          };\n        }\n      } else {\n        this._canPush = e.type !== \"touchmove\";\n        if (canvasEl) {\n          const touchEvent = e,\n            lastTouch = touchEvent.touches[touchEvent.touches.length - _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.lengthOffset],\n            canvasRect = canvasEl.getBoundingClientRect();\n          if (!lastTouch) {\n            return;\n          }\n          pos = {\n            x: lastTouch.clientX - canvasRect.left,\n            y: lastTouch.clientY - canvasRect.top\n          };\n        }\n      }\n      const pxRatio = container.retina.pixelRatio;\n      if (pos) {\n        pos.x *= pxRatio;\n        pos.y *= pxRatio;\n      }\n      interactivity.mouse.position = pos;\n      interactivity.status = _InteractivityConstants_js__WEBPACK_IMPORTED_MODULE_1__.mouseMoveEvent;\n    };\n    this._touchEnd = e => {\n      const evt = e,\n        touches = Array.from(evt.changedTouches);\n      for (const touch of touches) {\n        this._touches.delete(touch.identifier);\n      }\n      this._mouseTouchFinish();\n    };\n    this._touchEndClick = e => {\n      const evt = e,\n        touches = Array.from(evt.changedTouches);\n      for (const touch of touches) {\n        this._touches.delete(touch.identifier);\n      }\n      this._mouseTouchClick(e);\n    };\n    this._touchStart = e => {\n      const evt = e,\n        touches = Array.from(evt.changedTouches);\n      for (const touch of touches) {\n        this._touches.set(touch.identifier, performance.now());\n      }\n      this._mouseTouchMove(e);\n    };\n    this._container = container;\n    this._interactionManager = interactionManager;\n    this._touches = new Map();\n    this._handlers = {\n      mouseDown: () => {\n        this._mouseDown();\n      },\n      mouseLeave: () => {\n        this._mouseTouchFinish();\n      },\n      mouseMove: e => {\n        this._mouseTouchMove(e);\n      },\n      mouseUp: e => {\n        this._mouseTouchClick(e);\n      },\n      touchStart: e => {\n        this._touchStart(e);\n      },\n      touchMove: e => {\n        this._mouseTouchMove(e);\n      },\n      touchEnd: e => {\n        this._touchEnd(e);\n      },\n      touchCancel: e => {\n        this._touchEnd(e);\n      },\n      touchEndClick: e => {\n        this._touchEndClick(e);\n      },\n      visibilityChange: () => {\n        this._handleVisibilityChange();\n      }\n    };\n  }\n  addListeners() {\n    this._manageListeners(true);\n  }\n  removeListeners() {\n    this._manageListeners(false);\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-interactivity/./dist/browser/InteractivityEventListeners.js?\n}");
+
+/***/ },
+
+/***/ "./dist/browser/InteractivityPluginInstance.js"
+/*!*****************************************************!*\
+  !*** ./dist/browser/InteractivityPluginInstance.js ***!
+  \*****************************************************/
+(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   InteractivityPluginInstance: () => (/* binding */ InteractivityPluginInstance)\n/* harmony export */ });\n/* harmony import */ var _InteractionManager_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./InteractionManager.js */ \"./dist/browser/InteractionManager.js\");\n/* harmony import */ var _Options_Classes_Interactivity_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Options/Classes/Interactivity.js */ \"./dist/browser/Options/Classes/Interactivity.js\");\n\n\nclass InteractivityPluginInstance {\n  constructor(engine, container) {\n    this._container = container;\n    this._engine = engine;\n    this.interactionManager = new _InteractionManager_js__WEBPACK_IMPORTED_MODULE_0__.InteractionManager(engine, container);\n    this._container.addClickHandler = callback => {\n      this.interactionManager.addClickHandler(callback);\n    };\n  }\n  addClickHandler(callback) {\n    this.interactionManager.addClickHandler(callback);\n  }\n  clearClickHandlers() {\n    this.interactionManager.clearClickHandlers();\n  }\n  destroy() {\n    this.clearClickHandlers();\n    this._engine.interactors?.delete(this._container);\n  }\n  particleCreated(particle) {\n    const interactivityParticle = particle,\n      interactivity = new _Options_Classes_Interactivity_js__WEBPACK_IMPORTED_MODULE_1__.Interactivity(this._engine, this._container);\n    interactivity.load(this._container.actualOptions.interactivity);\n    interactivity.load(interactivityParticle.options.interactivity);\n    interactivityParticle.interactivity = interactivity;\n  }\n  particleReset(particle) {\n    this.interactionManager.reset(particle);\n  }\n  postParticleUpdate(particle, delta) {\n    this.interactionManager.particlesInteract(particle, delta);\n  }\n  postUpdate(delta) {\n    this.interactionManager.externalInteract(delta);\n  }\n  async preInit() {\n    await this.interactionManager.init();\n  }\n  async redrawInit() {\n    await this.interactionManager.init();\n  }\n  start() {\n    this.interactionManager.addListeners();\n    this.interactionManager.startObserving();\n    return Promise.resolve();\n  }\n  stop() {\n    this.interactionManager.removeListeners();\n    this.interactionManager.stopObserving();\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-interactivity/./dist/browser/InteractivityPluginInstance.js?\n}");
+
+/***/ }
+
+}]);

package/dist_browser_InteractivityPlugin_js.js

@@ -0,0 +1,70 @@
+/*!
+ * 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
+ * v4.0.0-alpha.4
+ */
+"use strict";
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+(this["webpackChunk_tsparticles_plugin_interactivity"] = this["webpackChunk_tsparticles_plugin_interactivity"] || []).push([["dist_browser_InteractivityPlugin_js"],{
+
+/***/ "./dist/browser/InteractivityPlugin.js"
+/*!*********************************************!*\
+  !*** ./dist/browser/InteractivityPlugin.js ***!
+  \*********************************************/
+(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   InteractivityPlugin: () => (/* binding */ InteractivityPlugin)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _Options_Classes_Interactivity_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Options/Classes/Interactivity.js */ \"./dist/browser/Options/Classes/Interactivity.js\");\n\n\nclass InteractivityPlugin {\n  constructor(engine) {\n    this._engine = engine;\n    this.id = \"interactivity\";\n  }\n  async getPlugin(container) {\n    const {\n      InteractivityPluginInstance\n    } = await __webpack_require__.e(/*! import() */ \"dist_browser_InteractivityPluginInstance_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./InteractivityPluginInstance.js */ \"./dist/browser/InteractivityPluginInstance.js\"));\n    return new InteractivityPluginInstance(this._engine, container);\n  }\n  loadOptions(container, options, source) {\n    if (!this.needsPlugin()) {\n      return;\n    }\n    let interactivityOptions = options.interactivity;\n    if (!interactivityOptions?.load) {\n      options.interactivity = interactivityOptions = new _Options_Classes_Interactivity_js__WEBPACK_IMPORTED_MODULE_1__.Interactivity(this._engine, container);\n    }\n    interactivityOptions.load(source?.interactivity);\n    const interactors = this._engine.interactors?.get(container);\n    if (!interactors) {\n      return;\n    }\n    for (const interactor of interactors) {\n      if (interactor.loadOptions) {\n        interactor.loadOptions(options, source);\n      }\n    }\n  }\n  loadParticlesOptions(container, options, source) {\n    if (source?.interactivity) {\n      options.interactivity = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.deepExtend)({}, source.interactivity);\n    }\n    const interactors = this._engine.interactors?.get(container);\n    if (!interactors) {\n      return;\n    }\n    for (const interactor of interactors) {\n      if (interactor.loadParticlesOptions) {\n        interactor.loadParticlesOptions(options, source);\n      }\n    }\n  }\n  needsPlugin() {\n    return true;\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-interactivity/./dist/browser/InteractivityPlugin.js?\n}");
+
+/***/ },
+
+/***/ "./dist/browser/Options/Classes/Events/ClickEvent.js"
+/*!***********************************************************!*\
+  !*** ./dist/browser/Options/Classes/Events/ClickEvent.js ***!
+  \***********************************************************/
+(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   ClickEvent: () => (/* binding */ ClickEvent)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nclass ClickEvent {\n  constructor() {\n    this.enable = false;\n    this.mode = [];\n  }\n  load(data) {\n    if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n      return;\n    }\n    if (data.enable !== undefined) {\n      this.enable = data.enable;\n    }\n    if (data.mode !== undefined) {\n      this.mode = data.mode;\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-interactivity/./dist/browser/Options/Classes/Events/ClickEvent.js?\n}");
+
+/***/ },
+
+/***/ "./dist/browser/Options/Classes/Events/Events.js"
+/*!*******************************************************!*\
+  !*** ./dist/browser/Options/Classes/Events/Events.js ***!
+  \*******************************************************/
+(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Events: () => (/* binding */ Events)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _ClickEvent_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./ClickEvent.js */ \"./dist/browser/Options/Classes/Events/ClickEvent.js\");\n/* harmony import */ var _DivEvent_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./DivEvent.js */ \"./dist/browser/Options/Classes/Events/DivEvent.js\");\n/* harmony import */ var _HoverEvent_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./HoverEvent.js */ \"./dist/browser/Options/Classes/Events/HoverEvent.js\");\n\n\n\n\nclass Events {\n  constructor() {\n    this.onClick = new _ClickEvent_js__WEBPACK_IMPORTED_MODULE_1__.ClickEvent();\n    this.onDiv = new _DivEvent_js__WEBPACK_IMPORTED_MODULE_2__.DivEvent();\n    this.onHover = new _HoverEvent_js__WEBPACK_IMPORTED_MODULE_3__.HoverEvent();\n  }\n  load(data) {\n    if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n      return;\n    }\n    this.onClick.load(data.onClick);\n    const onDiv = data.onDiv;\n    if (onDiv !== undefined) {\n      this.onDiv = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.executeOnSingleOrMultiple)(onDiv, t => {\n        const tmp = new _DivEvent_js__WEBPACK_IMPORTED_MODULE_2__.DivEvent();\n        tmp.load(t);\n        return tmp;\n      });\n    }\n    this.onHover.load(data.onHover);\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-interactivity/./dist/browser/Options/Classes/Events/Events.js?\n}");
+
+/***/ },
+
+/***/ "./dist/browser/Options/Classes/Events/HoverEvent.js"
+/*!***********************************************************!*\
+  !*** ./dist/browser/Options/Classes/Events/HoverEvent.js ***!
+  \***********************************************************/
+(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   HoverEvent: () => (/* binding */ HoverEvent)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nclass HoverEvent {\n  constructor() {\n    this.enable = false;\n    this.mode = [];\n  }\n  load(data) {\n    if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n      return;\n    }\n    if (data.enable !== undefined) {\n      this.enable = data.enable;\n    }\n    if (data.mode !== undefined) {\n      this.mode = data.mode;\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-interactivity/./dist/browser/Options/Classes/Events/HoverEvent.js?\n}");
+
+/***/ },
+
+/***/ "./dist/browser/Options/Classes/Interactivity.js"
+/*!*******************************************************!*\
+  !*** ./dist/browser/Options/Classes/Interactivity.js ***!
+  \*******************************************************/
+(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Interactivity: () => (/* binding */ Interactivity)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _Events_Events_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Events/Events.js */ \"./dist/browser/Options/Classes/Events/Events.js\");\n/* harmony import */ var _InteractivityDetect_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../InteractivityDetect.js */ \"./dist/browser/InteractivityDetect.js\");\n/* harmony import */ var _Modes_Modes_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Modes/Modes.js */ \"./dist/browser/Options/Classes/Modes/Modes.js\");\n\n\n\n\nclass Interactivity {\n  constructor(engine, container) {\n    this.detectsOn = _InteractivityDetect_js__WEBPACK_IMPORTED_MODULE_2__.InteractivityDetect.window;\n    this.events = new _Events_Events_js__WEBPACK_IMPORTED_MODULE_1__.Events();\n    this.modes = new _Modes_Modes_js__WEBPACK_IMPORTED_MODULE_3__.Modes(engine, container);\n  }\n  load(data) {\n    if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n      return;\n    }\n    const detectsOn = data.detectsOn;\n    if (detectsOn !== undefined) {\n      this.detectsOn = detectsOn;\n    }\n    this.events.load(data.events);\n    this.modes.load(data.modes);\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-interactivity/./dist/browser/Options/Classes/Interactivity.js?\n}");
+
+/***/ }
+
+}]);

package/esm/DivType.js

@@ -0,0 +1,5 @@
+export var DivType;
+(function (DivType) {
+    DivType["circle"] = "circle";
+    DivType["rectangle"] = "rectangle";
+})(DivType || (DivType = {}));

package/esm/ExternalInteractorBase.js

@@ -0,0 +1,7 @@
+import { InteractorType } from "./InteractorType.js";
+export class ExternalInteractorBase {
+    constructor(container) {
+        this.type = InteractorType.external;
+        this.container = container;
+    }
+}

package/esm/IExternalInteractor.js

@@ -0,0 +1 @@
+export {};

package/esm/IInteractivityData.js

@@ -0,0 +1 @@
+export {};

package/esm/IInteractor.js

@@ -0,0 +1 @@
+export {};

package/esm/IMouseData.js

@@ -0,0 +1 @@
+export {};

package/esm/IParticlesInteractor.js

@@ -0,0 +1 @@
+export {};

package/esm/InteractionManager.js

@@ -0,0 +1,202 @@
+import { clickRadius, minCoordinate, safeIntersectionObserver, touchEndLengthOffset, } from "@tsparticles/engine";
+import { clickEvent, touchCancelEvent, touchEndEvent, touchMoveEvent, touchStartEvent, } from "./InteractivityConstants.js";
+import { InteractivityEventListeners } from "./InteractivityEventListeners.js";
+import { InteractorType } from "./InteractorType.js";
+export class InteractionManager {
+    constructor(engine, container) {
+        this.container = container;
+        this._intersectionManager = entries => {
+            const { container } = this;
+            if (container.destroyed || !container.actualOptions.pauseOnOutsideViewport) {
+                return;
+            }
+            for (const entry of entries) {
+                if (entry.target !== this.interactivityData.element) {
+                    continue;
+                }
+                if (entry.isIntersecting) {
+                    container.play();
+                }
+                else {
+                    container.pause();
+                }
+            }
+        };
+        this._engine = engine;
+        this._interactors = [];
+        this._externalInteractors = [];
+        this._particleInteractors = [];
+        this._clickHandlers = new Map();
+        this._eventListeners = new InteractivityEventListeners(container, this);
+        this.interactivityData = {
+            mouse: {
+                clicking: false,
+                inside: false,
+            },
+        };
+        this._intersectionObserver = safeIntersectionObserver(entries => {
+            this._intersectionManager(entries);
+        });
+    }
+    addClickHandler(callback) {
+        const { container, interactivityData } = this;
+        if (container.destroyed) {
+            return;
+        }
+        const el = interactivityData.element;
+        if (!el) {
+            return;
+        }
+        const clickOrTouchHandler = (e, pos, radius) => {
+            if (container.destroyed) {
+                return;
+            }
+            const pxRatio = container.retina.pixelRatio, posRetina = {
+                x: pos.x * pxRatio,
+                y: pos.y * pxRatio,
+            }, particles = container.particles.quadTree.queryCircle(posRetina, radius * pxRatio);
+            callback(e, particles);
+        }, clickHandler = (e) => {
+            if (container.destroyed) {
+                return;
+            }
+            const mouseEvent = e, pos = {
+                x: mouseEvent.offsetX,
+                y: mouseEvent.offsetY,
+            };
+            clickOrTouchHandler(e, pos, clickRadius);
+        }, touchStartHandler = () => {
+            if (container.destroyed) {
+                return;
+            }
+            touched = true;
+            touchMoved = false;
+        }, touchMoveHandler = () => {
+            if (container.destroyed) {
+                return;
+            }
+            touchMoved = true;
+        }, touchEndHandler = (e) => {
+            if (container.destroyed) {
+                return;
+            }
+            if (touched && !touchMoved) {
+                const touchEvent = e, lastTouch = touchEvent.touches[touchEvent.touches.length - touchEndLengthOffset];
+                if (!lastTouch) {
+                    return;
+                }
+                const element = container.canvas.element, canvasRect = element ? element.getBoundingClientRect() : undefined, pos = {
+                    x: lastTouch.clientX - (canvasRect ? canvasRect.left : minCoordinate),
+                    y: lastTouch.clientY - (canvasRect ? canvasRect.top : minCoordinate),
+                };
+                clickOrTouchHandler(e, pos, Math.max(lastTouch.radiusX, lastTouch.radiusY));
+            }
+            touched = false;
+            touchMoved = false;
+        }, touchCancelHandler = () => {
+            if (container.destroyed) {
+                return;
+            }
+            touched = false;
+            touchMoved = false;
+        };
+        let touched = false, touchMoved = false;
+        this._clickHandlers.set(clickEvent, clickHandler);
+        this._clickHandlers.set(touchStartEvent, touchStartHandler);
+        this._clickHandlers.set(touchMoveEvent, touchMoveHandler);
+        this._clickHandlers.set(touchEndEvent, touchEndHandler);
+        this._clickHandlers.set(touchCancelEvent, touchCancelHandler);
+        for (const [key, handler] of this._clickHandlers) {
+            el.addEventListener(key, handler);
+        }
+    }
+    addListeners() {
+        this._eventListeners.addListeners();
+    }
+    clearClickHandlers() {
+        const { container, interactivityData } = this;
+        if (container.destroyed) {
+            return;
+        }
+        for (const [key, handler] of this._clickHandlers) {
+            interactivityData.element?.removeEventListener(key, handler);
+        }
+        this._clickHandlers.clear();
+    }
+    externalInteract(delta) {
+        for (const interactor of this._externalInteractors) {
+            const { interactivityData } = this;
+            if (interactor.isEnabled(interactivityData)) {
+                interactor.interact(interactivityData, delta);
+            }
+        }
+    }
+    handleClickMode(mode) {
+        if (this.container.destroyed) {
+            return;
+        }
+        const { interactivityData } = this;
+        for (const interactor of this._externalInteractors) {
+            interactor.handleClickMode?.(mode, interactivityData);
+        }
+    }
+    async init() {
+        const interactors = await this._engine.getInteractors?.(this.container, true);
+        if (!interactors) {
+            return;
+        }
+        this._interactors = interactors;
+        this._externalInteractors = [];
+        this._particleInteractors = [];
+        for (const interactor of this._interactors) {
+            switch (interactor.type) {
+                case InteractorType.external:
+                    this._externalInteractors.push(interactor);
+                    break;
+                case InteractorType.particles:
+                    this._particleInteractors.push(interactor);
+                    break;
+            }
+            interactor.init();
+        }
+    }
+    particlesInteract(particle, delta) {
+        const { interactivityData } = this;
+        for (const interactor of this._externalInteractors) {
+            interactor.clear(particle, delta);
+        }
+        for (const interactor of this._particleInteractors) {
+            if (interactor.isEnabled(particle, interactivityData)) {
+                interactor.interact(particle, interactivityData, delta);
+            }
+        }
+    }
+    removeListeners() {
+        this._eventListeners.removeListeners();
+    }
+    reset(particle) {
+        const { interactivityData } = this;
+        for (const interactor of this._externalInteractors) {
+            if (interactor.isEnabled(interactivityData)) {
+                interactor.reset(interactivityData, particle);
+            }
+        }
+        for (const interactor of this._particleInteractors) {
+            if (interactor.isEnabled(particle, interactivityData)) {
+                interactor.reset(interactivityData, particle);
+            }
+        }
+    }
+    startObserving() {
+        const { interactivityData } = this;
+        if (interactivityData.element instanceof HTMLElement && this._intersectionObserver) {
+            this._intersectionObserver.observe(interactivityData.element);
+        }
+    }
+    stopObserving() {
+        const { interactivityData } = this;
+        if (interactivityData.element instanceof HTMLElement && this._intersectionObserver) {
+            this._intersectionObserver.unobserve(interactivityData.element);
+        }
+    }
+}

package/esm/InteractivityConstants.js

@@ -0,0 +1 @@
+export const clickEvent = "click", mouseDownEvent = "pointerdown", mouseUpEvent = "pointerup", mouseLeaveEvent = "pointerleave", mouseOutEvent = "pointerout", mouseMoveEvent = "pointermove", touchStartEvent = "touchstart", touchEndEvent = "touchend", touchMoveEvent = "touchmove", touchCancelEvent = "touchcancel";

package/esm/InteractivityDetect.js

@@ -0,0 +1,6 @@
+export var InteractivityDetect;
+(function (InteractivityDetect) {
+    InteractivityDetect["canvas"] = "canvas";
+    InteractivityDetect["parent"] = "parent";
+    InteractivityDetect["window"] = "window";
+})(InteractivityDetect || (InteractivityDetect = {}));