@tsparticles/engine 3.2.0 → 3.2.2

package/dist_browser_Core_Container_js.js

@@ -1,5 +1,5 @@
 /*!
- * tsParticles Engine v3.2.0
+ * tsParticles Engine v3.2.2
  * Author: Matteo Bruni
  * MIT license: https://opensource.org/licenses/MIT
  * Website: https://particles.js.org/
@@ -35,7 +35,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \****************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Container: () => (/* binding */ Container)\n/* harmony export */ });\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Utils/Constants.js */ \"./dist/browser/Core/Utils/Constants.js\");\n/* harmony import */ var _Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Utils/Utils.js */ \"./dist/browser/Utils/Utils.js\");\n/* harmony import */ var _Canvas_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./Canvas.js */ \"./dist/browser/Core/Canvas.js\");\n/* harmony import */ var _Utils_EventListeners_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./Utils/EventListeners.js */ \"./dist/browser/Core/Utils/EventListeners.js\");\n/* harmony import */ var _Options_Classes_Options_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Options/Classes/Options.js */ \"./dist/browser/Options/Classes/Options.js\");\n/* harmony import */ var _Particles_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./Particles.js */ \"./dist/browser/Core/Particles.js\");\n/* harmony import */ var _Retina_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Retina.js */ \"./dist/browser/Core/Retina.js\");\n/* harmony import */ var _Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../Utils/NumberUtils.js */ \"./dist/browser/Utils/NumberUtils.js\");\n/* harmony import */ var _Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Utils/OptionsUtils.js */ \"./dist/browser/Utils/OptionsUtils.js\");\n\n\n\n\n\n\n\n\n\nfunction guardCheck(container) {\n  return container && !container.destroyed;\n}\nconst defaultFps = 60;\nfunction initDelta(value, fpsLimit = defaultFps, smooth = false) {\n  return {\n    value,\n    factor: smooth ? defaultFps / fpsLimit : defaultFps * value / _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.millisecondsToSeconds\n  };\n}\nfunction loadContainerOptions(engine, container, ...sourceOptionsArr) {\n  const options = new _Options_Classes_Options_js__WEBPACK_IMPORTED_MODULE_1__.Options(engine, container);\n  (0,_Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_2__.loadOptions)(options, ...sourceOptionsArr);\n  return options;\n}\nclass Container {\n  constructor(engine, id, sourceOptions) {\n    this._intersectionManager = entries => {\n      if (!guardCheck(this) || !this.actualOptions.pauseOnOutsideViewport) {\n        return;\n      }\n      for (const entry of entries) {\n        if (entry.target !== this.interactivity.element) {\n          continue;\n        }\n        if (entry.isIntersecting) {\n          this.play();\n        } else {\n          this.pause();\n        }\n      }\n    };\n    this._nextFrame = async timestamp => {\n      try {\n        if (!this._smooth && this._lastFrameTime !== undefined && timestamp < this._lastFrameTime + _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.millisecondsToSeconds / this.fpsLimit) {\n          this.draw(false);\n          return;\n        }\n        this._lastFrameTime ??= timestamp;\n        const delta = initDelta(timestamp - this._lastFrameTime, this.fpsLimit, this._smooth);\n        this.addLifeTime(delta.value);\n        this._lastFrameTime = timestamp;\n        if (delta.value > _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.millisecondsToSeconds) {\n          this.draw(false);\n          return;\n        }\n        await this.particles.draw(delta);\n        if (!this.alive()) {\n          this.destroy();\n          return;\n        }\n        if (this.animationStatus) {\n          this.draw(false);\n        }\n      } catch (e) {\n        (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.getLogger)().error(`${_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.errorPrefix} in animation loop`, e);\n      }\n    };\n    this._engine = engine;\n    this.id = Symbol(id);\n    this.fpsLimit = 120;\n    this._smooth = false;\n    this._delay = 0;\n    this._duration = 0;\n    this._lifeTime = 0;\n    this._firstStart = true;\n    this.started = false;\n    this.destroyed = false;\n    this._paused = true;\n    this._lastFrameTime = 0;\n    this.zLayers = 100;\n    this.pageHidden = false;\n    this._sourceOptions = sourceOptions;\n    this._initialSourceOptions = sourceOptions;\n    this.retina = new _Retina_js__WEBPACK_IMPORTED_MODULE_4__.Retina(this);\n    this.canvas = new _Canvas_js__WEBPACK_IMPORTED_MODULE_5__.Canvas(this);\n    this.particles = new _Particles_js__WEBPACK_IMPORTED_MODULE_6__.Particles(this._engine, this);\n    this.pathGenerators = new Map();\n    this.interactivity = {\n      mouse: {\n        clicking: false,\n        inside: false\n      }\n    };\n    this.plugins = new Map();\n    this.effectDrawers = new Map();\n    this.shapeDrawers = new Map();\n    this._options = loadContainerOptions(this._engine, this);\n    this.actualOptions = loadContainerOptions(this._engine, this);\n    this._eventListeners = new _Utils_EventListeners_js__WEBPACK_IMPORTED_MODULE_7__.EventListeners(this);\n    this._intersectionObserver = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.safeIntersectionObserver)(entries => this._intersectionManager(entries));\n    this._engine.dispatchEvent(\"containerBuilt\", {\n      container: this\n    });\n  }\n  get animationStatus() {\n    return !this._paused && !this.pageHidden && guardCheck(this);\n  }\n  get options() {\n    return this._options;\n  }\n  get sourceOptions() {\n    return this._sourceOptions;\n  }\n  addClickHandler(callback) {\n    if (!guardCheck(this)) {\n      return;\n    }\n    const el = this.interactivity.element;\n    if (!el) {\n      return;\n    }\n    const clickOrTouchHandler = (e, pos, radius) => {\n      if (!guardCheck(this)) {\n        return;\n      }\n      const pxRatio = this.retina.pixelRatio,\n        posRetina = {\n          x: pos.x * pxRatio,\n          y: pos.y * pxRatio\n        },\n        particles = this.particles.quadTree.queryCircle(posRetina, radius * pxRatio);\n      callback(e, particles);\n    };\n    const clickHandler = e => {\n      if (!guardCheck(this)) {\n        return;\n      }\n      const mouseEvent = e,\n        pos = {\n          x: mouseEvent.offsetX || mouseEvent.clientX,\n          y: mouseEvent.offsetY || mouseEvent.clientY\n        },\n        radius = 1;\n      clickOrTouchHandler(e, pos, radius);\n    };\n    const touchStartHandler = () => {\n      if (!guardCheck(this)) {\n        return;\n      }\n      touched = true;\n      touchMoved = false;\n    };\n    const touchMoveHandler = () => {\n      if (!guardCheck(this)) {\n        return;\n      }\n      touchMoved = true;\n    };\n    const touchEndHandler = e => {\n      if (!guardCheck(this)) {\n        return;\n      }\n      if (touched && !touchMoved) {\n        const touchEvent = e;\n        const lengthOffset = 1;\n        let lastTouch = touchEvent.touches[touchEvent.touches.length - lengthOffset];\n        if (!lastTouch) {\n          lastTouch = touchEvent.changedTouches[touchEvent.changedTouches.length - lengthOffset];\n          if (!lastTouch) {\n            return;\n          }\n        }\n        const element = this.canvas.element,\n          canvasRect = element ? element.getBoundingClientRect() : undefined,\n          minCoordinate = 0,\n          pos = {\n            x: lastTouch.clientX - (canvasRect ? canvasRect.left : minCoordinate),\n            y: lastTouch.clientY - (canvasRect ? canvasRect.top : minCoordinate)\n          };\n        clickOrTouchHandler(e, pos, Math.max(lastTouch.radiusX, lastTouch.radiusY));\n      }\n      touched = false;\n      touchMoved = false;\n    };\n    const touchCancelHandler = () => {\n      if (!guardCheck(this)) {\n        return;\n      }\n      touched = false;\n      touchMoved = false;\n    };\n    let touched = false,\n      touchMoved = false;\n    el.addEventListener(\"click\", clickHandler);\n    el.addEventListener(\"touchstart\", touchStartHandler);\n    el.addEventListener(\"touchmove\", touchMoveHandler);\n    el.addEventListener(\"touchend\", touchEndHandler);\n    el.addEventListener(\"touchcancel\", touchCancelHandler);\n  }\n  addLifeTime(value) {\n    this._lifeTime += value;\n  }\n  addPath(key, generator, override = false) {\n    if (!guardCheck(this) || !override && this.pathGenerators.has(key)) {\n      return false;\n    }\n    this.pathGenerators.set(key, generator);\n    return true;\n  }\n  alive() {\n    return !this._duration || this._lifeTime <= this._duration;\n  }\n  destroy() {\n    if (!guardCheck(this)) {\n      return;\n    }\n    this.stop();\n    this.particles.destroy();\n    this.canvas.destroy();\n    for (const [, effectDrawer] of this.effectDrawers) {\n      effectDrawer.destroy?.(this);\n    }\n    for (const [, shapeDrawer] of this.shapeDrawers) {\n      shapeDrawer.destroy?.(this);\n    }\n    for (const key of this.effectDrawers.keys()) {\n      this.effectDrawers.delete(key);\n    }\n    for (const key of this.shapeDrawers.keys()) {\n      this.shapeDrawers.delete(key);\n    }\n    this._engine.clearPlugins(this);\n    this.destroyed = true;\n    const mainArr = this._engine.dom(),\n      idx = mainArr.findIndex(t => t === this),\n      minIndex = 0;\n    if (idx >= minIndex) {\n      const deleteCount = 1;\n      mainArr.splice(idx, deleteCount);\n    }\n    this._engine.dispatchEvent(\"containerDestroyed\", {\n      container: this\n    });\n  }\n  draw(force) {\n    if (!guardCheck(this)) {\n      return;\n    }\n    let refreshTime = force;\n    const frame = async timestamp => {\n      if (refreshTime) {\n        this._lastFrameTime = undefined;\n        refreshTime = false;\n      }\n      await this._nextFrame(timestamp);\n    };\n    this._drawAnimationFrame = requestAnimationFrame(timestamp => void frame(timestamp));\n  }\n  async export(type, options = {}) {\n    for (const [, plugin] of this.plugins) {\n      if (!plugin.export) {\n        continue;\n      }\n      const res = await plugin.export(type, options);\n      if (!res.supported) {\n        continue;\n      }\n      return res.blob;\n    }\n    (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.getLogger)().error(`${_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.errorPrefix} - Export plugin with type ${type} not found`);\n  }\n  handleClickMode(mode) {\n    if (!guardCheck(this)) {\n      return;\n    }\n    this.particles.handleClickMode(mode);\n    for (const [, plugin] of this.plugins) {\n      plugin.handleClickMode?.(mode);\n    }\n  }\n  async init() {\n    if (!guardCheck(this)) {\n      return;\n    }\n    const effects = this._engine.getSupportedEffects();\n    for (const type of effects) {\n      const drawer = this._engine.getEffectDrawer(type);\n      if (drawer) {\n        this.effectDrawers.set(type, drawer);\n      }\n    }\n    const shapes = this._engine.getSupportedShapes();\n    for (const type of shapes) {\n      const drawer = this._engine.getShapeDrawer(type);\n      if (drawer) {\n        this.shapeDrawers.set(type, drawer);\n      }\n    }\n    await this.particles.initPlugins();\n    this._options = loadContainerOptions(this._engine, this, this._initialSourceOptions, this.sourceOptions);\n    this.actualOptions = loadContainerOptions(this._engine, this, this._options);\n    const availablePlugins = await this._engine.getAvailablePlugins(this);\n    for (const [id, plugin] of availablePlugins) {\n      this.plugins.set(id, plugin);\n    }\n    this.retina.init();\n    await this.canvas.init();\n    this.updateActualOptions();\n    this.canvas.initBackground();\n    this.canvas.resize();\n    this.zLayers = this.actualOptions.zLayers;\n    this._duration = (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_8__.getRangeValue)(this.actualOptions.duration) * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.millisecondsToSeconds;\n    this._delay = (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_8__.getRangeValue)(this.actualOptions.delay) * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.millisecondsToSeconds;\n    this._lifeTime = 0;\n    const defaultFpsLimit = 120,\n      minFpsLimit = 0;\n    this.fpsLimit = this.actualOptions.fpsLimit > minFpsLimit ? this.actualOptions.fpsLimit : defaultFpsLimit;\n    this._smooth = this.actualOptions.smooth;\n    for (const [, drawer] of this.effectDrawers) {\n      await drawer.init?.(this);\n    }\n    for (const [, drawer] of this.shapeDrawers) {\n      await drawer.init?.(this);\n    }\n    for (const [, plugin] of this.plugins) {\n      await plugin.init?.();\n    }\n    this._engine.dispatchEvent(\"containerInit\", {\n      container: this\n    });\n    await this.particles.init();\n    await this.particles.setDensity();\n    for (const [, plugin] of this.plugins) {\n      plugin.particlesSetup?.();\n    }\n    this._engine.dispatchEvent(\"particlesSetup\", {\n      container: this\n    });\n  }\n  async loadTheme(name) {\n    if (!guardCheck(this)) {\n      return;\n    }\n    this._currentTheme = name;\n    await this.refresh();\n  }\n  pause() {\n    if (!guardCheck(this)) {\n      return;\n    }\n    if (this._drawAnimationFrame !== undefined) {\n      cancelAnimationFrame(this._drawAnimationFrame);\n      delete this._drawAnimationFrame;\n    }\n    if (this._paused) {\n      return;\n    }\n    for (const [, plugin] of this.plugins) {\n      plugin.pause?.();\n    }\n    if (!this.pageHidden) {\n      this._paused = true;\n    }\n    this._engine.dispatchEvent(\"containerPaused\", {\n      container: this\n    });\n  }\n  play(force) {\n    if (!guardCheck(this)) {\n      return;\n    }\n    const needsUpdate = this._paused || force;\n    if (this._firstStart && !this.actualOptions.autoPlay) {\n      this._firstStart = false;\n      return;\n    }\n    if (this._paused) {\n      this._paused = false;\n    }\n    if (needsUpdate) {\n      for (const [, plugin] of this.plugins) {\n        if (plugin.play) {\n          plugin.play();\n        }\n      }\n    }\n    this._engine.dispatchEvent(\"containerPlay\", {\n      container: this\n    });\n    this.draw(needsUpdate ?? false);\n  }\n  async refresh() {\n    if (!guardCheck(this)) {\n      return;\n    }\n    this.stop();\n    return this.start();\n  }\n  async reset() {\n    if (!guardCheck(this)) {\n      return;\n    }\n    this._initialSourceOptions = undefined;\n    this._options = loadContainerOptions(this._engine, this);\n    this.actualOptions = loadContainerOptions(this._engine, this, this._options);\n    return this.refresh();\n  }\n  async start() {\n    if (!guardCheck(this) || this.started) {\n      return;\n    }\n    await this.init();\n    this.started = true;\n    await new Promise(resolve => {\n      const start = async () => {\n        this._eventListeners.addListeners();\n        if (this.interactivity.element instanceof HTMLElement && this._intersectionObserver) {\n          this._intersectionObserver.observe(this.interactivity.element);\n        }\n        for (const [, plugin] of this.plugins) {\n          await plugin.start?.();\n        }\n        this._engine.dispatchEvent(\"containerStarted\", {\n          container: this\n        });\n        this.play();\n        resolve();\n      };\n      this._delayTimeout = setTimeout(() => void start(), this._delay);\n    });\n  }\n  stop() {\n    if (!guardCheck(this) || !this.started) {\n      return;\n    }\n    if (this._delayTimeout) {\n      clearTimeout(this._delayTimeout);\n      delete this._delayTimeout;\n    }\n    this._firstStart = true;\n    this.started = false;\n    this._eventListeners.removeListeners();\n    this.pause();\n    this.particles.clear();\n    this.canvas.stop();\n    if (this.interactivity.element instanceof HTMLElement && this._intersectionObserver) {\n      this._intersectionObserver.unobserve(this.interactivity.element);\n    }\n    for (const [, plugin] of this.plugins) {\n      plugin.stop?.();\n    }\n    for (const key of this.plugins.keys()) {\n      this.plugins.delete(key);\n    }\n    this._sourceOptions = this._options;\n    this._engine.dispatchEvent(\"containerStopped\", {\n      container: this\n    });\n  }\n  updateActualOptions() {\n    this.actualOptions.responsive = [];\n    const newMaxWidth = this.actualOptions.setResponsive(this.canvas.size.width, this.retina.pixelRatio, this._options);\n    this.actualOptions.setTheme(this._currentTheme);\n    if (this._responsiveMaxWidth === newMaxWidth) {\n      return false;\n    }\n    this._responsiveMaxWidth = newMaxWidth;\n    return true;\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/engine/./dist/browser/Core/Container.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Container: () => (/* binding */ Container)\n/* harmony export */ });\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Utils/Constants.js */ \"./dist/browser/Core/Utils/Constants.js\");\n/* harmony import */ var _Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Utils/Utils.js */ \"./dist/browser/Utils/Utils.js\");\n/* harmony import */ var _Canvas_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./Canvas.js */ \"./dist/browser/Core/Canvas.js\");\n/* harmony import */ var _Utils_EventListeners_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./Utils/EventListeners.js */ \"./dist/browser/Core/Utils/EventListeners.js\");\n/* harmony import */ var _Options_Classes_Options_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Options/Classes/Options.js */ \"./dist/browser/Options/Classes/Options.js\");\n/* harmony import */ var _Particles_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./Particles.js */ \"./dist/browser/Core/Particles.js\");\n/* harmony import */ var _Retina_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Retina.js */ \"./dist/browser/Core/Retina.js\");\n/* harmony import */ var _Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../Utils/NumberUtils.js */ \"./dist/browser/Utils/NumberUtils.js\");\n/* harmony import */ var _Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Utils/OptionsUtils.js */ \"./dist/browser/Utils/OptionsUtils.js\");\n\n\n\n\n\n\n\n\n\nfunction guardCheck(container) {\n  return container && !container.destroyed;\n}\nconst defaultFps = 60;\nfunction initDelta(value, fpsLimit = defaultFps, smooth = false) {\n  return {\n    value,\n    factor: smooth ? defaultFps / fpsLimit : defaultFps * value / _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.millisecondsToSeconds\n  };\n}\nfunction loadContainerOptions(engine, container, ...sourceOptionsArr) {\n  const options = new _Options_Classes_Options_js__WEBPACK_IMPORTED_MODULE_1__.Options(engine, container);\n  (0,_Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_2__.loadOptions)(options, ...sourceOptionsArr);\n  return options;\n}\nclass Container {\n  constructor(engine, id, sourceOptions) {\n    this._intersectionManager = entries => {\n      if (!guardCheck(this) || !this.actualOptions.pauseOnOutsideViewport) {\n        return;\n      }\n      for (const entry of entries) {\n        if (entry.target !== this.interactivity.element) {\n          continue;\n        }\n        if (entry.isIntersecting) {\n          void this.play();\n        } else {\n          this.pause();\n        }\n      }\n    };\n    this._nextFrame = async timestamp => {\n      try {\n        if (!this._smooth && this._lastFrameTime !== undefined && timestamp < this._lastFrameTime + _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.millisecondsToSeconds / this.fpsLimit) {\n          this.draw(false);\n          return;\n        }\n        this._lastFrameTime ??= timestamp;\n        const delta = initDelta(timestamp - this._lastFrameTime, this.fpsLimit, this._smooth);\n        this.addLifeTime(delta.value);\n        this._lastFrameTime = timestamp;\n        if (delta.value > _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.millisecondsToSeconds) {\n          this.draw(false);\n          return;\n        }\n        await this.particles.draw(delta);\n        if (!this.alive()) {\n          this.destroy();\n          return;\n        }\n        if (this.animationStatus) {\n          this.draw(false);\n        }\n      } catch (e) {\n        (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.getLogger)().error(`${_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.errorPrefix} in animation loop`, e);\n      }\n    };\n    this._engine = engine;\n    this.id = Symbol(id);\n    this.fpsLimit = 120;\n    this._smooth = false;\n    this._delay = 0;\n    this._duration = 0;\n    this._lifeTime = 0;\n    this._firstStart = true;\n    this.started = false;\n    this.destroyed = false;\n    this._paused = true;\n    this._lastFrameTime = 0;\n    this.zLayers = 100;\n    this.pageHidden = false;\n    this._sourceOptions = sourceOptions;\n    this._initialSourceOptions = sourceOptions;\n    this.retina = new _Retina_js__WEBPACK_IMPORTED_MODULE_4__.Retina(this);\n    this.canvas = new _Canvas_js__WEBPACK_IMPORTED_MODULE_5__.Canvas(this);\n    this.particles = new _Particles_js__WEBPACK_IMPORTED_MODULE_6__.Particles(this._engine, this);\n    this.pathGenerators = new Map();\n    this.interactivity = {\n      mouse: {\n        clicking: false,\n        inside: false\n      }\n    };\n    this.plugins = new Map();\n    this.effectDrawers = new Map();\n    this.shapeDrawers = new Map();\n    this._options = loadContainerOptions(this._engine, this);\n    this.actualOptions = loadContainerOptions(this._engine, this);\n    this._eventListeners = new _Utils_EventListeners_js__WEBPACK_IMPORTED_MODULE_7__.EventListeners(this);\n    this._intersectionObserver = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.safeIntersectionObserver)(entries => this._intersectionManager(entries));\n    this._engine.dispatchEvent(\"containerBuilt\", {\n      container: this\n    });\n  }\n  get animationStatus() {\n    return !this._paused && !this.pageHidden && guardCheck(this);\n  }\n  get options() {\n    return this._options;\n  }\n  get sourceOptions() {\n    return this._sourceOptions;\n  }\n  addClickHandler(callback) {\n    if (!guardCheck(this)) {\n      return;\n    }\n    const el = this.interactivity.element;\n    if (!el) {\n      return;\n    }\n    const clickOrTouchHandler = (e, pos, radius) => {\n      if (!guardCheck(this)) {\n        return;\n      }\n      const pxRatio = this.retina.pixelRatio,\n        posRetina = {\n          x: pos.x * pxRatio,\n          y: pos.y * pxRatio\n        },\n        particles = this.particles.quadTree.queryCircle(posRetina, radius * pxRatio);\n      callback(e, particles);\n    };\n    const clickHandler = e => {\n      if (!guardCheck(this)) {\n        return;\n      }\n      const mouseEvent = e,\n        pos = {\n          x: mouseEvent.offsetX || mouseEvent.clientX,\n          y: mouseEvent.offsetY || mouseEvent.clientY\n        },\n        radius = 1;\n      clickOrTouchHandler(e, pos, radius);\n    };\n    const touchStartHandler = () => {\n      if (!guardCheck(this)) {\n        return;\n      }\n      touched = true;\n      touchMoved = false;\n    };\n    const touchMoveHandler = () => {\n      if (!guardCheck(this)) {\n        return;\n      }\n      touchMoved = true;\n    };\n    const touchEndHandler = e => {\n      if (!guardCheck(this)) {\n        return;\n      }\n      if (touched && !touchMoved) {\n        const touchEvent = e;\n        const lengthOffset = 1;\n        let lastTouch = touchEvent.touches[touchEvent.touches.length - lengthOffset];\n        if (!lastTouch) {\n          lastTouch = touchEvent.changedTouches[touchEvent.changedTouches.length - lengthOffset];\n          if (!lastTouch) {\n            return;\n          }\n        }\n        const element = this.canvas.element,\n          canvasRect = element ? element.getBoundingClientRect() : undefined,\n          minCoordinate = 0,\n          pos = {\n            x: lastTouch.clientX - (canvasRect ? canvasRect.left : minCoordinate),\n            y: lastTouch.clientY - (canvasRect ? canvasRect.top : minCoordinate)\n          };\n        clickOrTouchHandler(e, pos, Math.max(lastTouch.radiusX, lastTouch.radiusY));\n      }\n      touched = false;\n      touchMoved = false;\n    };\n    const touchCancelHandler = () => {\n      if (!guardCheck(this)) {\n        return;\n      }\n      touched = false;\n      touchMoved = false;\n    };\n    let touched = false,\n      touchMoved = false;\n    el.addEventListener(\"click\", clickHandler);\n    el.addEventListener(\"touchstart\", touchStartHandler);\n    el.addEventListener(\"touchmove\", touchMoveHandler);\n    el.addEventListener(\"touchend\", touchEndHandler);\n    el.addEventListener(\"touchcancel\", touchCancelHandler);\n  }\n  addLifeTime(value) {\n    this._lifeTime += value;\n  }\n  addPath(key, generator, override = false) {\n    if (!guardCheck(this) || !override && this.pathGenerators.has(key)) {\n      return false;\n    }\n    this.pathGenerators.set(key, generator);\n    return true;\n  }\n  alive() {\n    return !this._duration || this._lifeTime <= this._duration;\n  }\n  destroy() {\n    if (!guardCheck(this)) {\n      return;\n    }\n    this.stop();\n    this.particles.destroy();\n    this.canvas.destroy();\n    for (const [, effectDrawer] of this.effectDrawers) {\n      effectDrawer.destroy?.(this);\n    }\n    for (const [, shapeDrawer] of this.shapeDrawers) {\n      shapeDrawer.destroy?.(this);\n    }\n    for (const key of this.effectDrawers.keys()) {\n      this.effectDrawers.delete(key);\n    }\n    for (const key of this.shapeDrawers.keys()) {\n      this.shapeDrawers.delete(key);\n    }\n    this._engine.clearPlugins(this);\n    this.destroyed = true;\n    const mainArr = this._engine.dom(),\n      idx = mainArr.findIndex(t => t === this),\n      minIndex = 0;\n    if (idx >= minIndex) {\n      const deleteCount = 1;\n      mainArr.splice(idx, deleteCount);\n    }\n    this._engine.dispatchEvent(\"containerDestroyed\", {\n      container: this\n    });\n  }\n  draw(force) {\n    if (!guardCheck(this)) {\n      return;\n    }\n    let refreshTime = force;\n    const frame = async timestamp => {\n      if (refreshTime) {\n        this._lastFrameTime = undefined;\n        refreshTime = false;\n      }\n      await this._nextFrame(timestamp);\n    };\n    this._drawAnimationFrame = requestAnimationFrame(timestamp => void frame(timestamp));\n  }\n  async export(type, options = {}) {\n    for (const [, plugin] of this.plugins) {\n      if (!plugin.export) {\n        continue;\n      }\n      const res = await plugin.export(type, options);\n      if (!res.supported) {\n        continue;\n      }\n      return res.blob;\n    }\n    (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.getLogger)().error(`${_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.errorPrefix} - Export plugin with type ${type} not found`);\n  }\n  handleClickMode(mode) {\n    if (!guardCheck(this)) {\n      return;\n    }\n    this.particles.handleClickMode(mode);\n    for (const [, plugin] of this.plugins) {\n      plugin.handleClickMode?.(mode);\n    }\n  }\n  async init() {\n    if (!guardCheck(this)) {\n      return;\n    }\n    const effects = this._engine.getSupportedEffects();\n    for (const type of effects) {\n      const drawer = this._engine.getEffectDrawer(type);\n      if (drawer) {\n        this.effectDrawers.set(type, drawer);\n      }\n    }\n    const shapes = this._engine.getSupportedShapes();\n    for (const type of shapes) {\n      const drawer = this._engine.getShapeDrawer(type);\n      if (drawer) {\n        this.shapeDrawers.set(type, drawer);\n      }\n    }\n    await this.particles.initPlugins();\n    this._options = loadContainerOptions(this._engine, this, this._initialSourceOptions, this.sourceOptions);\n    this.actualOptions = loadContainerOptions(this._engine, this, this._options);\n    const availablePlugins = await this._engine.getAvailablePlugins(this);\n    for (const [id, plugin] of availablePlugins) {\n      this.plugins.set(id, plugin);\n    }\n    this.retina.init();\n    await this.canvas.init();\n    this.updateActualOptions();\n    this.canvas.initBackground();\n    this.canvas.resize();\n    this.zLayers = this.actualOptions.zLayers;\n    this._duration = (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_8__.getRangeValue)(this.actualOptions.duration) * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.millisecondsToSeconds;\n    this._delay = (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_8__.getRangeValue)(this.actualOptions.delay) * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.millisecondsToSeconds;\n    this._lifeTime = 0;\n    const defaultFpsLimit = 120,\n      minFpsLimit = 0;\n    this.fpsLimit = this.actualOptions.fpsLimit > minFpsLimit ? this.actualOptions.fpsLimit : defaultFpsLimit;\n    this._smooth = this.actualOptions.smooth;\n    for (const [, drawer] of this.effectDrawers) {\n      await drawer.init?.(this);\n    }\n    for (const [, drawer] of this.shapeDrawers) {\n      await drawer.init?.(this);\n    }\n    for (const [, plugin] of this.plugins) {\n      await plugin.init?.();\n    }\n    this._engine.dispatchEvent(\"containerInit\", {\n      container: this\n    });\n    await this.particles.init();\n    await this.particles.setDensity();\n    for (const [, plugin] of this.plugins) {\n      plugin.particlesSetup?.();\n    }\n    this._engine.dispatchEvent(\"particlesSetup\", {\n      container: this\n    });\n  }\n  async loadTheme(name) {\n    if (!guardCheck(this)) {\n      return;\n    }\n    this._currentTheme = name;\n    await this.refresh();\n  }\n  pause() {\n    if (!guardCheck(this)) {\n      return;\n    }\n    if (this._drawAnimationFrame !== undefined) {\n      cancelAnimationFrame(this._drawAnimationFrame);\n      delete this._drawAnimationFrame;\n    }\n    if (this._paused) {\n      return;\n    }\n    for (const [, plugin] of this.plugins) {\n      plugin.pause?.();\n    }\n    if (!this.pageHidden) {\n      this._paused = true;\n    }\n    this._engine.dispatchEvent(\"containerPaused\", {\n      container: this\n    });\n  }\n  play(force) {\n    if (!guardCheck(this)) {\n      return;\n    }\n    const needsUpdate = this._paused || force;\n    if (this._firstStart && !this.actualOptions.autoPlay) {\n      this._firstStart = false;\n      return;\n    }\n    if (this._paused) {\n      this._paused = false;\n    }\n    if (needsUpdate) {\n      for (const [, plugin] of this.plugins) {\n        if (plugin.play) {\n          plugin.play();\n        }\n      }\n    }\n    this._engine.dispatchEvent(\"containerPlay\", {\n      container: this\n    });\n    this.draw(needsUpdate ?? false);\n  }\n  async refresh() {\n    if (!guardCheck(this)) {\n      return;\n    }\n    this.stop();\n    return this.start();\n  }\n  async reset() {\n    if (!guardCheck(this)) {\n      return;\n    }\n    this._initialSourceOptions = undefined;\n    this._options = loadContainerOptions(this._engine, this);\n    this.actualOptions = loadContainerOptions(this._engine, this, this._options);\n    return this.refresh();\n  }\n  async start() {\n    if (!guardCheck(this) || this.started) {\n      return;\n    }\n    await this.init();\n    this.started = true;\n    await new Promise(resolve => {\n      const start = async () => {\n        this._eventListeners.addListeners();\n        if (this.interactivity.element instanceof HTMLElement && this._intersectionObserver) {\n          this._intersectionObserver.observe(this.interactivity.element);\n        }\n        for (const [, plugin] of this.plugins) {\n          await plugin.start?.();\n        }\n        this._engine.dispatchEvent(\"containerStarted\", {\n          container: this\n        });\n        this.play();\n        resolve();\n      };\n      this._delayTimeout = setTimeout(() => void start(), this._delay);\n    });\n  }\n  stop() {\n    if (!guardCheck(this) || !this.started) {\n      return;\n    }\n    if (this._delayTimeout) {\n      clearTimeout(this._delayTimeout);\n      delete this._delayTimeout;\n    }\n    this._firstStart = true;\n    this.started = false;\n    this._eventListeners.removeListeners();\n    this.pause();\n    this.particles.clear();\n    this.canvas.stop();\n    if (this.interactivity.element instanceof HTMLElement && this._intersectionObserver) {\n      this._intersectionObserver.unobserve(this.interactivity.element);\n    }\n    for (const [, plugin] of this.plugins) {\n      plugin.stop?.();\n    }\n    for (const key of this.plugins.keys()) {\n      this.plugins.delete(key);\n    }\n    this._sourceOptions = this._options;\n    this._engine.dispatchEvent(\"containerStopped\", {\n      container: this\n    });\n  }\n  updateActualOptions() {\n    this.actualOptions.responsive = [];\n    const newMaxWidth = this.actualOptions.setResponsive(this.canvas.size.width, this.retina.pixelRatio, this._options);\n    this.actualOptions.setTheme(this._currentTheme);\n    if (this._responsiveMaxWidth === newMaxWidth) {\n      return false;\n    }\n    this._responsiveMaxWidth = newMaxWidth;\n    return true;\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/engine/./dist/browser/Core/Container.js?");
 
 /***/ }),
 
@@ -45,7 +45,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \****************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Particles: () => (/* binding */ Particles)\n/* harmony export */ });\n/* harmony import */ var _Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Utils/Utils.js */ \"./dist/browser/Utils/Utils.js\");\n/* harmony import */ var _Utils_InteractionManager_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Utils/InteractionManager.js */ \"./dist/browser/Core/Utils/InteractionManager.js\");\n/* harmony import */ var _Utils_Point_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./Utils/Point.js */ \"./dist/browser/Core/Utils/Point.js\");\n/* harmony import */ var _Utils_QuadTree_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Utils/QuadTree.js */ \"./dist/browser/Core/Utils/QuadTree.js\");\n/* harmony import */ var _Utils_Rectangle_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Utils/Rectangle.js */ \"./dist/browser/Core/Utils/Rectangle.js\");\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Utils/Constants.js */ \"./dist/browser/Core/Utils/Constants.js\");\n\n\n\n\n\n\nconst qTreeCapacity = 4,\n  squareExp = 2,\n  defaultRemoveQuantity = 1;\nconst qTreeRectangle = canvasSize => {\n  const {\n      height,\n      width\n    } = canvasSize,\n    posOffset = -0.25,\n    sizeFactor = 1.5;\n  return new _Utils_Rectangle_js__WEBPACK_IMPORTED_MODULE_0__.Rectangle(posOffset * width, posOffset * height, sizeFactor * width, sizeFactor * height);\n};\nclass Particles {\n  constructor(engine, container) {\n    this._addToPool = (...particles) => {\n      for (const particle of particles) {\n        this._pool.push(particle);\n      }\n    };\n    this._applyDensity = async (options, manualCount, group) => {\n      const numberOptions = options.number;\n      if (!options.number.density?.enable) {\n        if (group === undefined) {\n          this._limit = numberOptions.limit.value;\n        } else if (numberOptions.limit) {\n          this._groupLimits.set(group, numberOptions.limit.value);\n        }\n        return;\n      }\n      const densityFactor = this._initDensityFactor(numberOptions.density),\n        optParticlesNumber = numberOptions.value,\n        minLimit = 0,\n        optParticlesLimit = numberOptions.limit.value > minLimit ? numberOptions.limit.value : optParticlesNumber,\n        particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + manualCount,\n        particlesCount = Math.min(this.count, this.filter(t => t.group === group).length);\n      if (group === undefined) {\n        this._limit = numberOptions.limit.value * densityFactor;\n      } else {\n        this._groupLimits.set(group, numberOptions.limit.value * densityFactor);\n      }\n      if (particlesCount < particlesNumber) {\n        await this.push(Math.abs(particlesNumber - particlesCount), undefined, options, group);\n      } else if (particlesCount > particlesNumber) {\n        this.removeQuantity(particlesCount - particlesNumber, group);\n      }\n    };\n    this._initDensityFactor = densityOptions => {\n      const container = this._container,\n        defaultFactor = 1;\n      if (!container.canvas.element || !densityOptions.enable) {\n        return defaultFactor;\n      }\n      const canvas = container.canvas.element,\n        pxRatio = container.retina.pixelRatio;\n      return canvas.width * canvas.height / (densityOptions.height * densityOptions.width * pxRatio ** squareExp);\n    };\n    this._pushParticle = async (position, overrideOptions, group, initializer) => {\n      try {\n        let particle = this._pool.pop();\n        if (!particle) {\n          const {\n            Particle\n          } = await __webpack_require__.e(/*! import() */ \"dist_browser_Core_Particle_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./Particle.js */ \"./dist/browser/Core/Particle.js\"));\n          particle = new Particle(this._engine, this._container);\n        }\n        await particle.init(this._nextId, position, overrideOptions, group);\n        let canAdd = true;\n        if (initializer) {\n          canAdd = initializer(particle);\n        }\n        if (!canAdd) {\n          return;\n        }\n        this._array.push(particle);\n        this._zArray.push(particle);\n        this._nextId++;\n        this._engine.dispatchEvent(\"particleAdded\", {\n          container: this._container,\n          data: {\n            particle\n          }\n        });\n        return particle;\n      } catch (e) {\n        (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.getLogger)().warning(`${_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.errorPrefix} adding particle: ${e}`);\n      }\n    };\n    this._removeParticle = (index, group, override) => {\n      const particle = this._array[index];\n      if (!particle || particle.group !== group) {\n        return false;\n      }\n      const zIdx = this._zArray.indexOf(particle),\n        deleteCount = 1;\n      this._array.splice(index, deleteCount);\n      this._zArray.splice(zIdx, deleteCount);\n      particle.destroy(override);\n      this._engine.dispatchEvent(\"particleRemoved\", {\n        container: this._container,\n        data: {\n          particle\n        }\n      });\n      this._addToPool(particle);\n      return true;\n    };\n    this._engine = engine;\n    this._container = container;\n    this._nextId = 0;\n    this._array = [];\n    this._zArray = [];\n    this._pool = [];\n    this._limit = 0;\n    this._groupLimits = new Map();\n    this._needsSort = false;\n    this._lastZIndex = 0;\n    this._interactionManager = new _Utils_InteractionManager_js__WEBPACK_IMPORTED_MODULE_3__.InteractionManager(engine, container);\n    this._pluginsInitialized = false;\n    const canvasSize = container.canvas.size;\n    this.quadTree = new _Utils_QuadTree_js__WEBPACK_IMPORTED_MODULE_4__.QuadTree(qTreeRectangle(canvasSize), qTreeCapacity);\n    this.movers = [];\n    this.updaters = [];\n  }\n  get count() {\n    return this._array.length;\n  }\n  async addManualParticles() {\n    const container = this._container,\n      options = container.actualOptions;\n    for (const particle of options.manualParticles) {\n      await this.addParticle(particle.position ? (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.getPosition)(particle.position, container.canvas.size) : undefined, particle.options);\n    }\n  }\n  async addParticle(position, overrideOptions, group, initializer) {\n    const limitOptions = this._container.actualOptions.particles.number.limit,\n      limit = group === undefined ? this._limit : this._groupLimits.get(group) ?? this._limit,\n      currentCount = this.count,\n      minLimit = 0;\n    if (limit > minLimit) {\n      if (limitOptions.mode === \"delete\") {\n        const countOffset = 1,\n          minCount = 0,\n          countToRemove = currentCount + countOffset - limit;\n        if (countToRemove > minCount) {\n          this.removeQuantity(countToRemove);\n        }\n      } else if (limitOptions.mode === \"wait\") {\n        if (currentCount >= limit) {\n          return;\n        }\n      }\n    }\n    return await this._pushParticle(position, overrideOptions, group, initializer);\n  }\n  clear() {\n    this._array = [];\n    this._zArray = [];\n    this._pluginsInitialized = false;\n  }\n  destroy() {\n    this._array = [];\n    this._zArray = [];\n    this.movers = [];\n    this.updaters = [];\n  }\n  async draw(delta) {\n    const container = this._container,\n      canvas = container.canvas;\n    canvas.clear();\n    await this.update(delta);\n    for (const [, plugin] of container.plugins) {\n      await canvas.drawPlugin(plugin, delta);\n    }\n    for (const p of this._zArray) {\n      await p.draw(delta);\n    }\n  }\n  filter(condition) {\n    return this._array.filter(condition);\n  }\n  find(condition) {\n    return this._array.find(condition);\n  }\n  get(index) {\n    return this._array[index];\n  }\n  handleClickMode(mode) {\n    this._interactionManager.handleClickMode(mode);\n  }\n  async init() {\n    const container = this._container,\n      options = container.actualOptions;\n    this._lastZIndex = 0;\n    this._needsSort = false;\n    await this.initPlugins();\n    let handled = false;\n    for (const [, plugin] of container.plugins) {\n      if (plugin.particlesInitialization !== undefined) {\n        handled = plugin.particlesInitialization();\n      }\n      if (handled) {\n        break;\n      }\n    }\n    await this.addManualParticles();\n    if (!handled) {\n      const particlesOptions = options.particles,\n        groups = particlesOptions.groups;\n      for (const group in groups) {\n        const groupOptions = groups[group];\n        for (let i = this.count, j = 0; j < groupOptions.number?.value && i < particlesOptions.number.value; i++, j++) {\n          await this.addParticle(undefined, groupOptions, group);\n        }\n      }\n      for (let i = this.count; i < particlesOptions.number.value; i++) {\n        await this.addParticle();\n      }\n    }\n  }\n  async initPlugins() {\n    if (this._pluginsInitialized) {\n      return;\n    }\n    const container = this._container;\n    this.movers = await this._engine.getMovers(container, true);\n    this.updaters = await this._engine.getUpdaters(container, true);\n    await this._interactionManager.init();\n    for (const [, pathGenerator] of container.pathGenerators) {\n      await pathGenerator.init(container);\n    }\n  }\n  async push(nb, mouse, overrideOptions, group) {\n    for (let i = 0; i < nb; i++) {\n      await this.addParticle(mouse?.position, overrideOptions, group);\n    }\n  }\n  async redraw() {\n    this.clear();\n    await this.init();\n    await this.draw({\n      value: 0,\n      factor: 0\n    });\n  }\n  remove(particle, group, override) {\n    this.removeAt(this._array.indexOf(particle), undefined, group, override);\n  }\n  removeAt(index, quantity = defaultRemoveQuantity, group, override) {\n    const minIndex = 0;\n    if (index < minIndex || index > this.count) {\n      return;\n    }\n    let deleted = 0;\n    for (let i = index; deleted < quantity && i < this.count; i++) {\n      if (this._removeParticle(i--, group, override)) {\n        deleted++;\n      }\n    }\n  }\n  removeQuantity(quantity, group) {\n    const defaultIndex = 0;\n    this.removeAt(defaultIndex, quantity, group);\n  }\n  async setDensity() {\n    const options = this._container.actualOptions,\n      groups = options.particles.groups,\n      manualCount = 0;\n    for (const group in groups) {\n      await this._applyDensity(groups[group], manualCount, group);\n    }\n    await this._applyDensity(options.particles, options.manualParticles.length);\n  }\n  setLastZIndex(zIndex) {\n    this._lastZIndex = zIndex;\n    this._needsSort = this._needsSort || this._lastZIndex < zIndex;\n  }\n  setResizeFactor(factor) {\n    this._resizeFactor = factor;\n  }\n  async update(delta) {\n    const container = this._container,\n      particlesToDelete = new Set();\n    this.quadTree = new _Utils_QuadTree_js__WEBPACK_IMPORTED_MODULE_4__.QuadTree(qTreeRectangle(container.canvas.size), qTreeCapacity);\n    for (const [, pathGenerator] of container.pathGenerators) {\n      pathGenerator.update();\n    }\n    for (const [, plugin] of container.plugins) {\n      await plugin.update?.(delta);\n    }\n    const resizeFactor = this._resizeFactor;\n    for (const particle of this._array) {\n      if (resizeFactor && !particle.ignoresResizeRatio) {\n        particle.position.x *= resizeFactor.width;\n        particle.position.y *= resizeFactor.height;\n        particle.initialPosition.x *= resizeFactor.width;\n        particle.initialPosition.y *= resizeFactor.height;\n      }\n      particle.ignoresResizeRatio = false;\n      this._interactionManager.reset(particle);\n      for (const [, plugin] of this._container.plugins) {\n        if (particle.destroyed) {\n          break;\n        }\n        plugin.particleUpdate?.(particle, delta);\n      }\n      for (const mover of this.movers) {\n        if (mover.isEnabled(particle)) {\n          await mover.move(particle, delta);\n        }\n      }\n      if (particle.destroyed) {\n        particlesToDelete.add(particle);\n        continue;\n      }\n      this.quadTree.insert(new _Utils_Point_js__WEBPACK_IMPORTED_MODULE_5__.Point(particle.getPosition(), particle));\n    }\n    if (particlesToDelete.size) {\n      const checkDelete = p => !particlesToDelete.has(p);\n      this._array = this.filter(checkDelete);\n      this._zArray = this._zArray.filter(checkDelete);\n      for (const particle of particlesToDelete) {\n        this._engine.dispatchEvent(\"particleRemoved\", {\n          container: this._container,\n          data: {\n            particle\n          }\n        });\n      }\n      this._addToPool(...particlesToDelete);\n    }\n    await this._interactionManager.externalInteract(delta);\n    for (const particle of this._array) {\n      for (const updater of this.updaters) {\n        await updater.update(particle, delta);\n      }\n      if (!particle.destroyed && !particle.spawning) {\n        await this._interactionManager.particlesInteract(particle, delta);\n      }\n    }\n    delete this._resizeFactor;\n    if (this._needsSort) {\n      const zArray = this._zArray;\n      zArray.sort((a, b) => b.position.z - a.position.z || a.id - b.id);\n      const lengthOffset = 1;\n      this._lastZIndex = zArray[zArray.length - lengthOffset].position.z;\n      this._needsSort = false;\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/engine/./dist/browser/Core/Particles.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Particles: () => (/* binding */ Particles)\n/* harmony export */ });\n/* harmony import */ var _Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Utils/Utils.js */ \"./dist/browser/Utils/Utils.js\");\n/* harmony import */ var _Utils_InteractionManager_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Utils/InteractionManager.js */ \"./dist/browser/Core/Utils/InteractionManager.js\");\n/* harmony import */ var _Utils_Point_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./Utils/Point.js */ \"./dist/browser/Core/Utils/Point.js\");\n/* harmony import */ var _Utils_QuadTree_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Utils/QuadTree.js */ \"./dist/browser/Core/Utils/QuadTree.js\");\n/* harmony import */ var _Utils_Ranges_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Utils/Ranges.js */ \"./dist/browser/Core/Utils/Ranges.js\");\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Utils/Constants.js */ \"./dist/browser/Core/Utils/Constants.js\");\n\n\n\n\n\n\nconst qTreeCapacity = 4,\n  squareExp = 2,\n  defaultRemoveQuantity = 1;\nconst qTreeRectangle = canvasSize => {\n  const {\n      height,\n      width\n    } = canvasSize,\n    posOffset = -0.25,\n    sizeFactor = 1.5;\n  return new _Utils_Ranges_js__WEBPACK_IMPORTED_MODULE_0__.Rectangle(posOffset * width, posOffset * height, sizeFactor * width, sizeFactor * height);\n};\nclass Particles {\n  constructor(engine, container) {\n    this._addToPool = (...particles) => {\n      for (const particle of particles) {\n        this._pool.push(particle);\n      }\n    };\n    this._applyDensity = async (options, manualCount, group) => {\n      const numberOptions = options.number;\n      if (!options.number.density?.enable) {\n        if (group === undefined) {\n          this._limit = numberOptions.limit.value;\n        } else if (numberOptions.limit) {\n          this._groupLimits.set(group, numberOptions.limit.value);\n        }\n        return;\n      }\n      const densityFactor = this._initDensityFactor(numberOptions.density),\n        optParticlesNumber = numberOptions.value,\n        minLimit = 0,\n        optParticlesLimit = numberOptions.limit.value > minLimit ? numberOptions.limit.value : optParticlesNumber,\n        particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + manualCount,\n        particlesCount = Math.min(this.count, this.filter(t => t.group === group).length);\n      if (group === undefined) {\n        this._limit = numberOptions.limit.value * densityFactor;\n      } else {\n        this._groupLimits.set(group, numberOptions.limit.value * densityFactor);\n      }\n      if (particlesCount < particlesNumber) {\n        await this.push(Math.abs(particlesNumber - particlesCount), undefined, options, group);\n      } else if (particlesCount > particlesNumber) {\n        this.removeQuantity(particlesCount - particlesNumber, group);\n      }\n    };\n    this._initDensityFactor = densityOptions => {\n      const container = this._container,\n        defaultFactor = 1;\n      if (!container.canvas.element || !densityOptions.enable) {\n        return defaultFactor;\n      }\n      const canvas = container.canvas.element,\n        pxRatio = container.retina.pixelRatio;\n      return canvas.width * canvas.height / (densityOptions.height * densityOptions.width * pxRatio ** squareExp);\n    };\n    this._pushParticle = async (position, overrideOptions, group, initializer) => {\n      try {\n        let particle = this._pool.pop();\n        if (!particle) {\n          const {\n            Particle\n          } = await __webpack_require__.e(/*! import() */ \"dist_browser_Core_Particle_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./Particle.js */ \"./dist/browser/Core/Particle.js\"));\n          particle = new Particle(this._engine, this._container);\n        }\n        await particle.init(this._nextId, position, overrideOptions, group);\n        let canAdd = true;\n        if (initializer) {\n          canAdd = initializer(particle);\n        }\n        if (!canAdd) {\n          return;\n        }\n        this._array.push(particle);\n        this._zArray.push(particle);\n        this._nextId++;\n        this._engine.dispatchEvent(\"particleAdded\", {\n          container: this._container,\n          data: {\n            particle\n          }\n        });\n        return particle;\n      } catch (e) {\n        (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.getLogger)().warning(`${_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.errorPrefix} adding particle: ${e}`);\n      }\n    };\n    this._removeParticle = (index, group, override) => {\n      const particle = this._array[index];\n      if (!particle || particle.group !== group) {\n        return false;\n      }\n      const zIdx = this._zArray.indexOf(particle),\n        deleteCount = 1;\n      this._array.splice(index, deleteCount);\n      this._zArray.splice(zIdx, deleteCount);\n      particle.destroy(override);\n      this._engine.dispatchEvent(\"particleRemoved\", {\n        container: this._container,\n        data: {\n          particle\n        }\n      });\n      this._addToPool(particle);\n      return true;\n    };\n    this._engine = engine;\n    this._container = container;\n    this._nextId = 0;\n    this._array = [];\n    this._zArray = [];\n    this._pool = [];\n    this._limit = 0;\n    this._groupLimits = new Map();\n    this._needsSort = false;\n    this._lastZIndex = 0;\n    this._interactionManager = new _Utils_InteractionManager_js__WEBPACK_IMPORTED_MODULE_3__.InteractionManager(engine, container);\n    this._pluginsInitialized = false;\n    const canvasSize = container.canvas.size;\n    this.quadTree = new _Utils_QuadTree_js__WEBPACK_IMPORTED_MODULE_4__.QuadTree(qTreeRectangle(canvasSize), qTreeCapacity);\n    this.movers = [];\n    this.updaters = [];\n  }\n  get count() {\n    return this._array.length;\n  }\n  async addManualParticles() {\n    const container = this._container,\n      options = container.actualOptions;\n    for (const particle of options.manualParticles) {\n      await this.addParticle(particle.position ? (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.getPosition)(particle.position, container.canvas.size) : undefined, particle.options);\n    }\n  }\n  async addParticle(position, overrideOptions, group, initializer) {\n    const limitOptions = this._container.actualOptions.particles.number.limit,\n      limit = group === undefined ? this._limit : this._groupLimits.get(group) ?? this._limit,\n      currentCount = this.count,\n      minLimit = 0;\n    if (limit > minLimit) {\n      if (limitOptions.mode === \"delete\") {\n        const countOffset = 1,\n          minCount = 0,\n          countToRemove = currentCount + countOffset - limit;\n        if (countToRemove > minCount) {\n          this.removeQuantity(countToRemove);\n        }\n      } else if (limitOptions.mode === \"wait\") {\n        if (currentCount >= limit) {\n          return;\n        }\n      }\n    }\n    return await this._pushParticle(position, overrideOptions, group, initializer);\n  }\n  clear() {\n    this._array = [];\n    this._zArray = [];\n    this._pluginsInitialized = false;\n  }\n  destroy() {\n    this._array = [];\n    this._zArray = [];\n    this.movers = [];\n    this.updaters = [];\n  }\n  async draw(delta) {\n    const container = this._container,\n      canvas = container.canvas;\n    canvas.clear();\n    await this.update(delta);\n    for (const [, plugin] of container.plugins) {\n      await canvas.drawPlugin(plugin, delta);\n    }\n    for (const p of this._zArray) {\n      await p.draw(delta);\n    }\n  }\n  filter(condition) {\n    return this._array.filter(condition);\n  }\n  find(condition) {\n    return this._array.find(condition);\n  }\n  get(index) {\n    return this._array[index];\n  }\n  handleClickMode(mode) {\n    this._interactionManager.handleClickMode(mode);\n  }\n  async init() {\n    const container = this._container,\n      options = container.actualOptions;\n    this._lastZIndex = 0;\n    this._needsSort = false;\n    await this.initPlugins();\n    let handled = false;\n    for (const [, plugin] of container.plugins) {\n      if (plugin.particlesInitialization !== undefined) {\n        handled = plugin.particlesInitialization();\n      }\n      if (handled) {\n        break;\n      }\n    }\n    await this.addManualParticles();\n    if (!handled) {\n      const particlesOptions = options.particles,\n        groups = particlesOptions.groups;\n      for (const group in groups) {\n        const groupOptions = groups[group];\n        for (let i = this.count, j = 0; j < groupOptions.number?.value && i < particlesOptions.number.value; i++, j++) {\n          await this.addParticle(undefined, groupOptions, group);\n        }\n      }\n      for (let i = this.count; i < particlesOptions.number.value; i++) {\n        await this.addParticle();\n      }\n    }\n  }\n  async initPlugins() {\n    if (this._pluginsInitialized) {\n      return;\n    }\n    const container = this._container;\n    this.movers = await this._engine.getMovers(container, true);\n    this.updaters = await this._engine.getUpdaters(container, true);\n    await this._interactionManager.init();\n    for (const [, pathGenerator] of container.pathGenerators) {\n      await pathGenerator.init(container);\n    }\n  }\n  async push(nb, mouse, overrideOptions, group) {\n    for (let i = 0; i < nb; i++) {\n      await this.addParticle(mouse?.position, overrideOptions, group);\n    }\n  }\n  async redraw() {\n    this.clear();\n    await this.init();\n    await this.draw({\n      value: 0,\n      factor: 0\n    });\n  }\n  remove(particle, group, override) {\n    this.removeAt(this._array.indexOf(particle), undefined, group, override);\n  }\n  removeAt(index, quantity = defaultRemoveQuantity, group, override) {\n    const minIndex = 0;\n    if (index < minIndex || index > this.count) {\n      return;\n    }\n    let deleted = 0;\n    for (let i = index; deleted < quantity && i < this.count; i++) {\n      if (this._removeParticle(i--, group, override)) {\n        deleted++;\n      }\n    }\n  }\n  removeQuantity(quantity, group) {\n    const defaultIndex = 0;\n    this.removeAt(defaultIndex, quantity, group);\n  }\n  async setDensity() {\n    const options = this._container.actualOptions,\n      groups = options.particles.groups,\n      manualCount = 0;\n    for (const group in groups) {\n      await this._applyDensity(groups[group], manualCount, group);\n    }\n    await this._applyDensity(options.particles, options.manualParticles.length);\n  }\n  setLastZIndex(zIndex) {\n    this._lastZIndex = zIndex;\n    this._needsSort = this._needsSort || this._lastZIndex < zIndex;\n  }\n  setResizeFactor(factor) {\n    this._resizeFactor = factor;\n  }\n  async update(delta) {\n    const container = this._container,\n      particlesToDelete = new Set();\n    this.quadTree = new _Utils_QuadTree_js__WEBPACK_IMPORTED_MODULE_4__.QuadTree(qTreeRectangle(container.canvas.size), qTreeCapacity);\n    for (const [, pathGenerator] of container.pathGenerators) {\n      pathGenerator.update();\n    }\n    for (const [, plugin] of container.plugins) {\n      await plugin.update?.(delta);\n    }\n    const resizeFactor = this._resizeFactor;\n    for (const particle of this._array) {\n      if (resizeFactor && !particle.ignoresResizeRatio) {\n        particle.position.x *= resizeFactor.width;\n        particle.position.y *= resizeFactor.height;\n        particle.initialPosition.x *= resizeFactor.width;\n        particle.initialPosition.y *= resizeFactor.height;\n      }\n      particle.ignoresResizeRatio = false;\n      this._interactionManager.reset(particle);\n      for (const [, plugin] of this._container.plugins) {\n        if (particle.destroyed) {\n          break;\n        }\n        plugin.particleUpdate?.(particle, delta);\n      }\n      for (const mover of this.movers) {\n        if (mover.isEnabled(particle)) {\n          await mover.move(particle, delta);\n        }\n      }\n      if (particle.destroyed) {\n        particlesToDelete.add(particle);\n        continue;\n      }\n      this.quadTree.insert(new _Utils_Point_js__WEBPACK_IMPORTED_MODULE_5__.Point(particle.getPosition(), particle));\n    }\n    if (particlesToDelete.size) {\n      const checkDelete = p => !particlesToDelete.has(p);\n      this._array = this.filter(checkDelete);\n      this._zArray = this._zArray.filter(checkDelete);\n      for (const particle of particlesToDelete) {\n        this._engine.dispatchEvent(\"particleRemoved\", {\n          container: this._container,\n          data: {\n            particle\n          }\n        });\n      }\n      this._addToPool(...particlesToDelete);\n    }\n    await this._interactionManager.externalInteract(delta);\n    for (const particle of this._array) {\n      for (const updater of this.updaters) {\n        await updater.update(particle, delta);\n      }\n      if (!particle.destroyed && !particle.spawning) {\n        await this._interactionManager.particlesInteract(particle, delta);\n      }\n    }\n    delete this._resizeFactor;\n    if (this._needsSort) {\n      const zArray = this._zArray;\n      zArray.sort((a, b) => b.position.z - a.position.z || a.id - b.id);\n      const lengthOffset = 1;\n      this._lastZIndex = zArray[zArray.length - lengthOffset].position.z;\n      this._needsSort = false;\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/engine/./dist/browser/Core/Particles.js?");
 
 /***/ }),
 
@@ -65,7 +65,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \***************************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   EventListeners: () => (/* binding */ EventListeners)\n/* harmony export */ });\n/* harmony import */ var _Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../Utils/Utils.js */ \"./dist/browser/Utils/Utils.js\");\n/* harmony import */ var _Constants_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Constants.js */ \"./dist/browser/Core/Utils/Constants.js\");\n\n\nconst double = 2;\nfunction manageListener(element, event, handler, add, options) {\n  if (add) {\n    let addOptions = {\n      passive: true\n    };\n    if ((0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.isBoolean)(options)) {\n      addOptions.capture = options;\n    } else if (options !== undefined) {\n      addOptions = options;\n    }\n    element.addEventListener(event, handler, addOptions);\n  } else {\n    const removeOptions = options;\n    element.removeEventListener(event, handler, removeOptions);\n  }\n}\nclass EventListeners {\n  constructor(container) {\n    this.container = container;\n    this._doMouseTouchClick = e => {\n      const container = this.container,\n        options = container.actualOptions;\n      if (this._canPush) {\n        const mouseInteractivity = container.interactivity.mouse,\n          mousePos = mouseInteractivity.position;\n        if (!mousePos) {\n          return;\n        }\n        mouseInteractivity.clickPosition = {\n          ...mousePos\n        };\n        mouseInteractivity.clickTime = new Date().getTime();\n        const onClick = options.interactivity.events.onClick;\n        (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.executeOnSingleOrMultiple)(onClick.mode, mode => this.container.handleClickMode(mode));\n      }\n      if (e.type === \"touchend\") {\n        const touchDelay = 500;\n        setTimeout(() => this._mouseTouchFinish(), touchDelay);\n      }\n    };\n    this._handleThemeChange = e => {\n      const mediaEvent = e,\n        container = this.container,\n        options = container.options,\n        defaultThemes = options.defaultThemes,\n        themeName = mediaEvent.matches ? defaultThemes.dark : defaultThemes.light,\n        theme = options.themes.find(theme => theme.name === themeName);\n      if (theme && theme.default.auto) {\n        void container.loadTheme(themeName);\n      }\n    };\n    this._handleVisibilityChange = () => {\n      const container = this.container,\n        options = container.actualOptions;\n      this._mouseTouchFinish();\n      if (!options.pauseOnBlur) {\n        return;\n      }\n      if (document && document.hidden) {\n        container.pageHidden = true;\n        container.pause();\n      } else {\n        container.pageHidden = false;\n        if (container.animationStatus) {\n          container.play(true);\n        } else {\n          container.draw(true);\n        }\n      }\n    };\n    this._handleWindowResize = () => {\n      if (this._resizeTimeout) {\n        clearTimeout(this._resizeTimeout);\n        delete this._resizeTimeout;\n      }\n      const handleResize = async () => {\n        const canvas = this.container.canvas;\n        await canvas?.windowResize();\n      };\n      this._resizeTimeout = setTimeout(() => void handleResize(), this.container.actualOptions.interactivity.events.resize.delay * _Constants_js__WEBPACK_IMPORTED_MODULE_1__.millisecondsToSeconds);\n    };\n    this._manageInteractivityListeners = (mouseLeaveTmpEvent, add) => {\n      const handlers = this._handlers,\n        container = this.container,\n        options = container.actualOptions;\n      const interactivityEl = container.interactivity.element;\n      if (!interactivityEl) {\n        return;\n      }\n      const html = interactivityEl,\n        canvasEl = container.canvas.element;\n      if (canvasEl) {\n        canvasEl.style.pointerEvents = html === canvasEl ? \"initial\" : \"none\";\n      }\n      if (!(options.interactivity.events.onHover.enable || options.interactivity.events.onClick.enable)) {\n        return;\n      }\n      manageListener(interactivityEl, _Constants_js__WEBPACK_IMPORTED_MODULE_1__.mouseMoveEvent, handlers.mouseMove, add);\n      manageListener(interactivityEl, _Constants_js__WEBPACK_IMPORTED_MODULE_1__.touchStartEvent, handlers.touchStart, add);\n      manageListener(interactivityEl, _Constants_js__WEBPACK_IMPORTED_MODULE_1__.touchMoveEvent, handlers.touchMove, add);\n      if (!options.interactivity.events.onClick.enable) {\n        manageListener(interactivityEl, _Constants_js__WEBPACK_IMPORTED_MODULE_1__.touchEndEvent, handlers.touchEnd, add);\n      } else {\n        manageListener(interactivityEl, _Constants_js__WEBPACK_IMPORTED_MODULE_1__.touchEndEvent, handlers.touchEndClick, add);\n        manageListener(interactivityEl, _Constants_js__WEBPACK_IMPORTED_MODULE_1__.mouseUpEvent, handlers.mouseUp, add);\n        manageListener(interactivityEl, _Constants_js__WEBPACK_IMPORTED_MODULE_1__.mouseDownEvent, handlers.mouseDown, add);\n      }\n      manageListener(interactivityEl, mouseLeaveTmpEvent, handlers.mouseLeave, add);\n      manageListener(interactivityEl, _Constants_js__WEBPACK_IMPORTED_MODULE_1__.touchCancelEvent, handlers.touchCancel, add);\n    };\n    this._manageListeners = add => {\n      const handlers = this._handlers,\n        container = this.container,\n        options = container.actualOptions,\n        detectType = options.interactivity.detectsOn,\n        canvasEl = container.canvas.element;\n      let mouseLeaveTmpEvent = _Constants_js__WEBPACK_IMPORTED_MODULE_1__.mouseLeaveEvent;\n      if (detectType === \"window\") {\n        container.interactivity.element = window;\n        mouseLeaveTmpEvent = _Constants_js__WEBPACK_IMPORTED_MODULE_1__.mouseOutEvent;\n      } else if (detectType === \"parent\" && canvasEl) {\n        container.interactivity.element = canvasEl.parentElement ?? canvasEl.parentNode;\n      } else {\n        container.interactivity.element = canvasEl;\n      }\n      this._manageMediaMatch(add);\n      this._manageResize(add);\n      this._manageInteractivityListeners(mouseLeaveTmpEvent, add);\n      if (document) {\n        manageListener(document, _Constants_js__WEBPACK_IMPORTED_MODULE_1__.visibilityChangeEvent, handlers.visibilityChange, add, false);\n      }\n    };\n    this._manageMediaMatch = add => {\n      const handlers = this._handlers,\n        mediaMatch = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.safeMatchMedia)(\"(prefers-color-scheme: dark)\");\n      if (!mediaMatch) {\n        return;\n      }\n      if (mediaMatch.addEventListener !== undefined) {\n        manageListener(mediaMatch, \"change\", handlers.themeChange, add);\n        return;\n      }\n      if (mediaMatch.addListener === undefined) {\n        return;\n      }\n      if (add) {\n        mediaMatch.addListener(handlers.oldThemeChange);\n      } else {\n        mediaMatch.removeListener(handlers.oldThemeChange);\n      }\n    };\n    this._manageResize = add => {\n      const handlers = this._handlers,\n        container = this.container,\n        options = container.actualOptions;\n      if (!options.interactivity.events.resize) {\n        return;\n      }\n      if (typeof ResizeObserver === \"undefined\") {\n        manageListener(window, _Constants_js__WEBPACK_IMPORTED_MODULE_1__.resizeEvent, handlers.resize, add);\n        return;\n      }\n      const canvasEl = container.canvas.element;\n      if (this._resizeObserver && !add) {\n        if (canvasEl) {\n          this._resizeObserver.unobserve(canvasEl);\n        }\n        this._resizeObserver.disconnect();\n        delete this._resizeObserver;\n      } else if (!this._resizeObserver && add && canvasEl) {\n        this._resizeObserver = new ResizeObserver(entries => {\n          const entry = entries.find(e => e.target === canvasEl);\n          if (!entry) {\n            return;\n          }\n          this._handleWindowResize();\n        });\n        this._resizeObserver.observe(canvasEl);\n      }\n    };\n    this._mouseDown = () => {\n      const {\n        interactivity\n      } = this.container;\n      if (!interactivity) {\n        return;\n      }\n      const {\n        mouse\n      } = interactivity;\n      mouse.clicking = true;\n      mouse.downPosition = mouse.position;\n    };\n    this._mouseTouchClick = e => {\n      const container = this.container,\n        options = container.actualOptions,\n        {\n          mouse\n        } = container.interactivity;\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 interactivity = this.container.interactivity;\n      if (!interactivity) {\n        return;\n      }\n      const mouse = interactivity.mouse;\n      delete mouse.position;\n      delete mouse.clickPosition;\n      delete mouse.downPosition;\n      interactivity.status = _Constants_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        options = container.actualOptions,\n        interactivity = container.interactivity,\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 === window) {\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 === \"parent\") {\n          const source = mouseEvent.target,\n            target = mouseEvent.currentTarget;\n          if (source && target && canvasEl) {\n            const sourceRect = source.getBoundingClientRect(),\n              targetRect = target.getBoundingClientRect(),\n              canvasRect = canvasEl.getBoundingClientRect();\n            pos = {\n              x: mouseEvent.offsetX + double * sourceRect.left - (targetRect.left + canvasRect.left),\n              y: mouseEvent.offsetY + double * sourceRect.top - (targetRect.top + canvasRect.top)\n            };\n          } else {\n            pos = {\n              x: mouseEvent.offsetX ?? mouseEvent.clientX,\n              y: mouseEvent.offsetY ?? mouseEvent.clientY\n            };\n          }\n        } else if (mouseEvent.target === canvasEl) {\n          pos = {\n            x: mouseEvent.offsetX ?? mouseEvent.clientX,\n            y: mouseEvent.offsetY ?? mouseEvent.clientY\n          };\n        }\n      } else {\n        this._canPush = e.type !== \"touchmove\";\n        if (canvasEl) {\n          const touchEvent = e,\n            lengthOffset = 1,\n            lastTouch = touchEvent.touches[touchEvent.touches.length - lengthOffset],\n            canvasRect = canvasEl.getBoundingClientRect(),\n            defaultCoordinate = 0;\n          pos = {\n            x: lastTouch.clientX - (canvasRect.left ?? defaultCoordinate),\n            y: lastTouch.clientY - (canvasRect.top ?? defaultCoordinate)\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 = _Constants_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._canPush = true;\n    this._touches = new Map();\n    this._handlers = {\n      mouseDown: () => this._mouseDown(),\n      mouseLeave: () => this._mouseTouchFinish(),\n      mouseMove: e => this._mouseTouchMove(e),\n      mouseUp: e => this._mouseTouchClick(e),\n      touchStart: e => this._touchStart(e),\n      touchMove: e => this._mouseTouchMove(e),\n      touchEnd: e => this._touchEnd(e),\n      touchCancel: e => this._touchEnd(e),\n      touchEndClick: e => this._touchEndClick(e),\n      visibilityChange: () => this._handleVisibilityChange(),\n      themeChange: e => this._handleThemeChange(e),\n      oldThemeChange: e => this._handleThemeChange(e),\n      resize: () => {\n        this._handleWindowResize();\n      }\n    };\n  }\n  addListeners() {\n    this._manageListeners(true);\n  }\n  removeListeners() {\n    this._manageListeners(false);\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/engine/./dist/browser/Core/Utils/EventListeners.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   EventListeners: () => (/* binding */ EventListeners)\n/* harmony export */ });\n/* harmony import */ var _Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../Utils/Utils.js */ \"./dist/browser/Utils/Utils.js\");\n/* harmony import */ var _Constants_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Constants.js */ \"./dist/browser/Core/Utils/Constants.js\");\n/* harmony import */ var _Utils_TypeUtils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../Utils/TypeUtils.js */ \"./dist/browser/Utils/TypeUtils.js\");\n\n\n\nconst double = 2;\nfunction manageListener(element, event, handler, add, options) {\n  if (add) {\n    let addOptions = {\n      passive: true\n    };\n    if ((0,_Utils_TypeUtils_js__WEBPACK_IMPORTED_MODULE_0__.isBoolean)(options)) {\n      addOptions.capture = options;\n    } else if (options !== undefined) {\n      addOptions = options;\n    }\n    element.addEventListener(event, handler, addOptions);\n  } else {\n    const removeOptions = options;\n    element.removeEventListener(event, handler, removeOptions);\n  }\n}\nclass EventListeners {\n  constructor(container) {\n    this.container = container;\n    this._doMouseTouchClick = e => {\n      const container = this.container,\n        options = container.actualOptions;\n      if (this._canPush) {\n        const mouseInteractivity = container.interactivity.mouse,\n          mousePos = mouseInteractivity.position;\n        if (!mousePos) {\n          return;\n        }\n        mouseInteractivity.clickPosition = {\n          ...mousePos\n        };\n        mouseInteractivity.clickTime = new Date().getTime();\n        const onClick = options.interactivity.events.onClick;\n        (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.executeOnSingleOrMultiple)(onClick.mode, mode => this.container.handleClickMode(mode));\n      }\n      if (e.type === \"touchend\") {\n        const touchDelay = 500;\n        setTimeout(() => this._mouseTouchFinish(), touchDelay);\n      }\n    };\n    this._handleThemeChange = e => {\n      const mediaEvent = e,\n        container = this.container,\n        options = container.options,\n        defaultThemes = options.defaultThemes,\n        themeName = mediaEvent.matches ? defaultThemes.dark : defaultThemes.light,\n        theme = options.themes.find(theme => theme.name === themeName);\n      if (theme && theme.default.auto) {\n        void container.loadTheme(themeName);\n      }\n    };\n    this._handleVisibilityChange = () => {\n      const container = this.container,\n        options = container.actualOptions;\n      this._mouseTouchFinish();\n      if (!options.pauseOnBlur) {\n        return;\n      }\n      if (document && document.hidden) {\n        container.pageHidden = true;\n        container.pause();\n      } else {\n        container.pageHidden = false;\n        if (container.animationStatus) {\n          void container.play(true);\n        } else {\n          void container.draw(true);\n        }\n      }\n    };\n    this._handleWindowResize = () => {\n      if (this._resizeTimeout) {\n        clearTimeout(this._resizeTimeout);\n        delete this._resizeTimeout;\n      }\n      const handleResize = async () => {\n        const canvas = this.container.canvas;\n        await canvas?.windowResize();\n      };\n      this._resizeTimeout = setTimeout(() => void handleResize(), this.container.actualOptions.interactivity.events.resize.delay * _Constants_js__WEBPACK_IMPORTED_MODULE_2__.millisecondsToSeconds);\n    };\n    this._manageInteractivityListeners = (mouseLeaveTmpEvent, add) => {\n      const handlers = this._handlers,\n        container = this.container,\n        options = container.actualOptions;\n      const interactivityEl = container.interactivity.element;\n      if (!interactivityEl) {\n        return;\n      }\n      const html = interactivityEl,\n        canvasEl = container.canvas.element;\n      if (canvasEl) {\n        canvasEl.style.pointerEvents = html === canvasEl ? \"initial\" : \"none\";\n      }\n      if (!(options.interactivity.events.onHover.enable || options.interactivity.events.onClick.enable)) {\n        return;\n      }\n      manageListener(interactivityEl, _Constants_js__WEBPACK_IMPORTED_MODULE_2__.mouseMoveEvent, handlers.mouseMove, add);\n      manageListener(interactivityEl, _Constants_js__WEBPACK_IMPORTED_MODULE_2__.touchStartEvent, handlers.touchStart, add);\n      manageListener(interactivityEl, _Constants_js__WEBPACK_IMPORTED_MODULE_2__.touchMoveEvent, handlers.touchMove, add);\n      if (!options.interactivity.events.onClick.enable) {\n        manageListener(interactivityEl, _Constants_js__WEBPACK_IMPORTED_MODULE_2__.touchEndEvent, handlers.touchEnd, add);\n      } else {\n        manageListener(interactivityEl, _Constants_js__WEBPACK_IMPORTED_MODULE_2__.touchEndEvent, handlers.touchEndClick, add);\n        manageListener(interactivityEl, _Constants_js__WEBPACK_IMPORTED_MODULE_2__.mouseUpEvent, handlers.mouseUp, add);\n        manageListener(interactivityEl, _Constants_js__WEBPACK_IMPORTED_MODULE_2__.mouseDownEvent, handlers.mouseDown, add);\n      }\n      manageListener(interactivityEl, mouseLeaveTmpEvent, handlers.mouseLeave, add);\n      manageListener(interactivityEl, _Constants_js__WEBPACK_IMPORTED_MODULE_2__.touchCancelEvent, handlers.touchCancel, add);\n    };\n    this._manageListeners = add => {\n      const handlers = this._handlers,\n        container = this.container,\n        options = container.actualOptions,\n        detectType = options.interactivity.detectsOn,\n        canvasEl = container.canvas.element;\n      let mouseLeaveTmpEvent = _Constants_js__WEBPACK_IMPORTED_MODULE_2__.mouseLeaveEvent;\n      if (detectType === \"window\") {\n        container.interactivity.element = window;\n        mouseLeaveTmpEvent = _Constants_js__WEBPACK_IMPORTED_MODULE_2__.mouseOutEvent;\n      } else if (detectType === \"parent\" && canvasEl) {\n        container.interactivity.element = canvasEl.parentElement ?? canvasEl.parentNode;\n      } else {\n        container.interactivity.element = canvasEl;\n      }\n      this._manageMediaMatch(add);\n      this._manageResize(add);\n      this._manageInteractivityListeners(mouseLeaveTmpEvent, add);\n      if (document) {\n        manageListener(document, _Constants_js__WEBPACK_IMPORTED_MODULE_2__.visibilityChangeEvent, handlers.visibilityChange, add, false);\n      }\n    };\n    this._manageMediaMatch = add => {\n      const handlers = this._handlers,\n        mediaMatch = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.safeMatchMedia)(\"(prefers-color-scheme: dark)\");\n      if (!mediaMatch) {\n        return;\n      }\n      if (mediaMatch.addEventListener !== undefined) {\n        manageListener(mediaMatch, \"change\", handlers.themeChange, add);\n        return;\n      }\n      if (mediaMatch.addListener === undefined) {\n        return;\n      }\n      if (add) {\n        mediaMatch.addListener(handlers.oldThemeChange);\n      } else {\n        mediaMatch.removeListener(handlers.oldThemeChange);\n      }\n    };\n    this._manageResize = add => {\n      const handlers = this._handlers,\n        container = this.container,\n        options = container.actualOptions;\n      if (!options.interactivity.events.resize) {\n        return;\n      }\n      if (typeof ResizeObserver === \"undefined\") {\n        manageListener(window, _Constants_js__WEBPACK_IMPORTED_MODULE_2__.resizeEvent, handlers.resize, add);\n        return;\n      }\n      const canvasEl = container.canvas.element;\n      if (this._resizeObserver && !add) {\n        if (canvasEl) {\n          this._resizeObserver.unobserve(canvasEl);\n        }\n        this._resizeObserver.disconnect();\n        delete this._resizeObserver;\n      } else if (!this._resizeObserver && add && canvasEl) {\n        this._resizeObserver = new ResizeObserver(entries => {\n          const entry = entries.find(e => e.target === canvasEl);\n          if (!entry) {\n            return;\n          }\n          this._handleWindowResize();\n        });\n        this._resizeObserver.observe(canvasEl);\n      }\n    };\n    this._mouseDown = () => {\n      const {\n        interactivity\n      } = this.container;\n      if (!interactivity) {\n        return;\n      }\n      const {\n        mouse\n      } = interactivity;\n      mouse.clicking = true;\n      mouse.downPosition = mouse.position;\n    };\n    this._mouseTouchClick = e => {\n      const container = this.container,\n        options = container.actualOptions,\n        {\n          mouse\n        } = container.interactivity;\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 interactivity = this.container.interactivity;\n      if (!interactivity) {\n        return;\n      }\n      const mouse = interactivity.mouse;\n      delete mouse.position;\n      delete mouse.clickPosition;\n      delete mouse.downPosition;\n      interactivity.status = _Constants_js__WEBPACK_IMPORTED_MODULE_2__.mouseLeaveEvent;\n      mouse.inside = false;\n      mouse.clicking = false;\n    };\n    this._mouseTouchMove = e => {\n      const container = this.container,\n        options = container.actualOptions,\n        interactivity = container.interactivity,\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 === window) {\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 === \"parent\") {\n          const source = mouseEvent.target,\n            target = mouseEvent.currentTarget;\n          if (source && target && canvasEl) {\n            const sourceRect = source.getBoundingClientRect(),\n              targetRect = target.getBoundingClientRect(),\n              canvasRect = canvasEl.getBoundingClientRect();\n            pos = {\n              x: mouseEvent.offsetX + double * sourceRect.left - (targetRect.left + canvasRect.left),\n              y: mouseEvent.offsetY + double * sourceRect.top - (targetRect.top + canvasRect.top)\n            };\n          } else {\n            pos = {\n              x: mouseEvent.offsetX ?? mouseEvent.clientX,\n              y: mouseEvent.offsetY ?? mouseEvent.clientY\n            };\n          }\n        } else if (mouseEvent.target === canvasEl) {\n          pos = {\n            x: mouseEvent.offsetX ?? mouseEvent.clientX,\n            y: mouseEvent.offsetY ?? mouseEvent.clientY\n          };\n        }\n      } else {\n        this._canPush = e.type !== \"touchmove\";\n        if (canvasEl) {\n          const touchEvent = e,\n            lengthOffset = 1,\n            lastTouch = touchEvent.touches[touchEvent.touches.length - lengthOffset],\n            canvasRect = canvasEl.getBoundingClientRect(),\n            defaultCoordinate = 0;\n          pos = {\n            x: lastTouch.clientX - (canvasRect.left ?? defaultCoordinate),\n            y: lastTouch.clientY - (canvasRect.top ?? defaultCoordinate)\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 = _Constants_js__WEBPACK_IMPORTED_MODULE_2__.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._canPush = true;\n    this._touches = new Map();\n    this._handlers = {\n      mouseDown: () => this._mouseDown(),\n      mouseLeave: () => this._mouseTouchFinish(),\n      mouseMove: e => this._mouseTouchMove(e),\n      mouseUp: e => this._mouseTouchClick(e),\n      touchStart: e => this._touchStart(e),\n      touchMove: e => this._mouseTouchMove(e),\n      touchEnd: e => this._touchEnd(e),\n      touchCancel: e => this._touchEnd(e),\n      touchEndClick: e => this._touchEndClick(e),\n      visibilityChange: () => this._handleVisibilityChange(),\n      themeChange: e => this._handleThemeChange(e),\n      oldThemeChange: e => this._handleThemeChange(e),\n      resize: () => {\n        this._handleWindowResize();\n      }\n    };\n  }\n  addListeners() {\n    this._manageListeners(true);\n  }\n  removeListeners() {\n    this._manageListeners(false);\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/engine/./dist/browser/Core/Utils/EventListeners.js?");
 
 /***/ }),
 
@@ -85,7 +85,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \*********************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   QuadTree: () => (/* binding */ QuadTree)\n/* harmony export */ });\n/* harmony import */ var _Circle_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Circle.js */ \"./dist/browser/Core/Utils/Circle.js\");\n/* harmony import */ var _Rectangle_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Rectangle.js */ \"./dist/browser/Core/Utils/Rectangle.js\");\n/* harmony import */ var _Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../Utils/NumberUtils.js */ \"./dist/browser/Utils/NumberUtils.js\");\n\n\n\nconst half = 0.5,\n  double = 2,\n  subdivideCount = 4;\nclass QuadTree {\n  constructor(rectangle, capacity) {\n    this.rectangle = rectangle;\n    this.capacity = capacity;\n    this._subdivide = () => {\n      const {\n          x,\n          y\n        } = this.rectangle.position,\n        {\n          width,\n          height\n        } = this.rectangle.size,\n        {\n          capacity\n        } = this;\n      for (let i = 0; i < subdivideCount; i++) {\n        const fixedIndex = i % double;\n        this._subs.push(new QuadTree(new _Rectangle_js__WEBPACK_IMPORTED_MODULE_0__.Rectangle(x + width * half * fixedIndex, y + height * half * (Math.round(i * half) - fixedIndex), width * half, height * half), capacity));\n      }\n      this._divided = true;\n    };\n    this._points = [];\n    this._divided = false;\n    this._subs = [];\n  }\n  insert(point) {\n    if (!this.rectangle.contains(point.position)) {\n      return false;\n    }\n    if (this._points.length < this.capacity) {\n      this._points.push(point);\n      return true;\n    }\n    if (!this._divided) {\n      this._subdivide();\n    }\n    return this._subs.some(sub => sub.insert(point));\n  }\n  query(range, check, found) {\n    const res = found ?? [];\n    if (!range.intersects(this.rectangle)) {\n      return [];\n    }\n    for (const p of this._points) {\n      if (!range.contains(p.position) && (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_1__.getDistance)(range.position, p.position) > p.particle.getRadius() && (!check || check(p.particle))) {\n        continue;\n      }\n      res.push(p.particle);\n    }\n    if (this._divided) {\n      for (const sub of this._subs) {\n        sub.query(range, check, res);\n      }\n    }\n    return res;\n  }\n  queryCircle(position, radius, check) {\n    return this.query(new _Circle_js__WEBPACK_IMPORTED_MODULE_2__.Circle(position.x, position.y, radius), check);\n  }\n  queryRectangle(position, size, check) {\n    return this.query(new _Rectangle_js__WEBPACK_IMPORTED_MODULE_0__.Rectangle(position.x, position.y, size.width, size.height), check);\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/engine/./dist/browser/Core/Utils/QuadTree.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   QuadTree: () => (/* binding */ QuadTree)\n/* harmony export */ });\n/* harmony import */ var _Ranges_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Ranges.js */ \"./dist/browser/Core/Utils/Ranges.js\");\n/* harmony import */ var _Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../Utils/NumberUtils.js */ \"./dist/browser/Utils/NumberUtils.js\");\n\n\nconst half = 0.5,\n  double = 2,\n  subdivideCount = 4;\nclass QuadTree {\n  constructor(rectangle, capacity) {\n    this.rectangle = rectangle;\n    this.capacity = capacity;\n    this._subdivide = () => {\n      const {\n          x,\n          y\n        } = this.rectangle.position,\n        {\n          width,\n          height\n        } = this.rectangle.size,\n        {\n          capacity\n        } = this;\n      for (let i = 0; i < subdivideCount; i++) {\n        const fixedIndex = i % double;\n        this._subs.push(new QuadTree(new _Ranges_js__WEBPACK_IMPORTED_MODULE_0__.Rectangle(x + width * half * fixedIndex, y + height * half * (Math.round(i * half) - fixedIndex), width * half, height * half), capacity));\n      }\n      this._divided = true;\n    };\n    this._points = [];\n    this._divided = false;\n    this._subs = [];\n  }\n  insert(point) {\n    if (!this.rectangle.contains(point.position)) {\n      return false;\n    }\n    if (this._points.length < this.capacity) {\n      this._points.push(point);\n      return true;\n    }\n    if (!this._divided) {\n      this._subdivide();\n    }\n    return this._subs.some(sub => sub.insert(point));\n  }\n  query(range, check) {\n    const res = [];\n    if (!range.intersects(this.rectangle)) {\n      return [];\n    }\n    for (const p of this._points) {\n      if (!range.contains(p.position) && (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_1__.getDistance)(range.position, p.position) > p.particle.getRadius() && (!check || check(p.particle))) {\n        continue;\n      }\n      res.push(p.particle);\n    }\n    if (this._divided) {\n      for (const sub of this._subs) {\n        res.push(...sub.query(range, check));\n      }\n    }\n    return res;\n  }\n  queryCircle(position, radius, check) {\n    return this.query(new _Ranges_js__WEBPACK_IMPORTED_MODULE_0__.Circle(position.x, position.y, radius), check);\n  }\n  queryRectangle(position, size, check) {\n    return this.query(new _Ranges_js__WEBPACK_IMPORTED_MODULE_0__.Rectangle(position.x, position.y, size.width, size.height), check);\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/engine/./dist/browser/Core/Utils/QuadTree.js?");
 
 /***/ })
 

package/dist_browser_Core_Particle_js.js

@@ -1,5 +1,5 @@
 /*!
- * tsParticles Engine v3.2.0
+ * tsParticles Engine v3.2.2
  * Author: Matteo Bruni
  * MIT license: https://opensource.org/licenses/MIT
  * Website: https://particles.js.org/
@@ -25,7 +25,7 @@
   \***************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Particle: () => (/* binding */ Particle)\n/* harmony export */ });\n/* harmony import */ var _Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Utils/NumberUtils.js */ \"./dist/browser/Utils/NumberUtils.js\");\n/* harmony import */ var _Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../Utils/Utils.js */ \"./dist/browser/Utils/Utils.js\");\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Utils/Constants.js */ \"./dist/browser/Core/Utils/Constants.js\");\n/* harmony import */ var _Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Utils/ColorUtils.js */ \"./dist/browser/Utils/ColorUtils.js\");\n/* harmony import */ var _Options_Classes_Interactivity_Interactivity_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../Options/Classes/Interactivity/Interactivity.js */ \"./dist/browser/Options/Classes/Interactivity/Interactivity.js\");\n/* harmony import */ var _Utils_Vector_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./Utils/Vector.js */ \"./dist/browser/Core/Utils/Vector.js\");\n/* harmony import */ var _Utils_Vector3d_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Utils/Vector3d.js */ \"./dist/browser/Core/Utils/Vector3d.js\");\n/* harmony import */ var _Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Utils/CanvasUtils.js */ \"./dist/browser/Utils/CanvasUtils.js\");\n/* harmony import */ var _Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Utils/OptionsUtils.js */ \"./dist/browser/Utils/OptionsUtils.js\");\n\n\n\n\n\n\n\n\n\nconst defaultRetryCount = 0,\n  double = 2,\n  half = 0.5,\n  squareExp = 2;\nfunction loadEffectData(effect, effectOptions, id, reduceDuplicates) {\n  const effectData = effectOptions.options[effect];\n  if (!effectData) {\n    return;\n  }\n  return (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.deepExtend)({\n    close: effectOptions.close,\n    fill: effectOptions.fill\n  }, (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.itemFromSingleOrMultiple)(effectData, id, reduceDuplicates));\n}\nfunction loadShapeData(shape, shapeOptions, id, reduceDuplicates) {\n  const shapeData = shapeOptions.options[shape];\n  if (!shapeData) {\n    return;\n  }\n  return (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.deepExtend)({\n    close: shapeOptions.close,\n    fill: shapeOptions.fill\n  }, (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.itemFromSingleOrMultiple)(shapeData, id, reduceDuplicates));\n}\nfunction fixOutMode(data) {\n  if (!(0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.isInArray)(data.outMode, data.checkModes)) {\n    return;\n  }\n  const diameter = data.radius * double;\n  if (data.coord > data.maxCoord - diameter) {\n    data.setCb(-data.radius);\n  } else if (data.coord < diameter) {\n    data.setCb(data.radius);\n  }\n}\nclass Particle {\n  constructor(engine, container) {\n    this.container = container;\n    this._calcPosition = (container, position, zIndex, tryCount = defaultRetryCount) => {\n      for (const [, plugin] of container.plugins) {\n        const pluginPos = plugin.particlePosition !== undefined ? plugin.particlePosition(position, this) : undefined;\n        if (pluginPos) {\n          return _Utils_Vector3d_js__WEBPACK_IMPORTED_MODULE_1__.Vector3d.create(pluginPos.x, pluginPos.y, zIndex);\n        }\n      }\n      const canvasSize = container.canvas.size,\n        exactPosition = (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_2__.calcExactPositionOrRandomFromSize)({\n          size: canvasSize,\n          position: position\n        }),\n        pos = _Utils_Vector3d_js__WEBPACK_IMPORTED_MODULE_1__.Vector3d.create(exactPosition.x, exactPosition.y, zIndex),\n        radius = this.getRadius(),\n        outModes = this.options.move.outModes,\n        fixHorizontal = outMode => {\n          fixOutMode({\n            outMode,\n            checkModes: [\"bounce\"],\n            coord: pos.x,\n            maxCoord: container.canvas.size.width,\n            setCb: value => pos.x += value,\n            radius\n          });\n        },\n        fixVertical = outMode => {\n          fixOutMode({\n            outMode,\n            checkModes: [\"bounce\"],\n            coord: pos.y,\n            maxCoord: container.canvas.size.height,\n            setCb: value => pos.y += value,\n            radius\n          });\n        };\n      fixHorizontal(outModes.left ?? outModes.default);\n      fixHorizontal(outModes.right ?? outModes.default);\n      fixVertical(outModes.top ?? outModes.default);\n      fixVertical(outModes.bottom ?? outModes.default);\n      if (this._checkOverlap(pos, tryCount)) {\n        const increment = 1;\n        return this._calcPosition(container, undefined, zIndex, tryCount + increment);\n      }\n      return pos;\n    };\n    this._calculateVelocity = () => {\n      const baseVelocity = (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_2__.getParticleBaseVelocity)(this.direction),\n        res = baseVelocity.copy(),\n        moveOptions = this.options.move;\n      if (moveOptions.direction === \"inside\" || moveOptions.direction === \"outside\") {\n        return res;\n      }\n      const rad = (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_2__.degToRad)((0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRangeValue)(moveOptions.angle.value)),\n        radOffset = (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_2__.degToRad)((0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRangeValue)(moveOptions.angle.offset)),\n        range = {\n          left: radOffset - rad * half,\n          right: radOffset + rad * half\n        };\n      if (!moveOptions.straight) {\n        res.angle += (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_2__.randomInRange)((0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_2__.setRangeValue)(range.left, range.right));\n      }\n      if (moveOptions.random && typeof moveOptions.speed === \"number\") {\n        res.length *= (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRandom)();\n      }\n      return res;\n    };\n    this._checkOverlap = (pos, tryCount = defaultRetryCount) => {\n      const collisionsOptions = this.options.collisions,\n        radius = this.getRadius();\n      if (!collisionsOptions.enable) {\n        return false;\n      }\n      const overlapOptions = collisionsOptions.overlap;\n      if (overlapOptions.enable) {\n        return false;\n      }\n      const retries = overlapOptions.retries,\n        minRetries = 0;\n      if (retries >= minRetries && tryCount > retries) {\n        throw new Error(`${_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.errorPrefix} particle is overlapping and can't be placed`);\n      }\n      return !!this.container.particles.find(particle => (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_2__.getDistance)(pos, particle.position) < radius + particle.getRadius());\n    };\n    this._getRollColor = color => {\n      if (!color || !this.roll || !this.backColor && !this.roll.alter) {\n        return color;\n      }\n      const rollFactor = 1,\n        none = 0,\n        backFactor = this.roll.horizontal && this.roll.vertical ? double * rollFactor : rollFactor,\n        backSum = this.roll.horizontal ? Math.PI * half : none,\n        rolled = Math.floor(((this.roll.angle ?? none) + backSum) / (Math.PI / backFactor)) % double;\n      if (!rolled) {\n        return color;\n      }\n      if (this.backColor) {\n        return this.backColor;\n      }\n      if (this.roll.alter) {\n        return (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_4__.alterHsl)(color, this.roll.alter.type, this.roll.alter.value);\n      }\n      return color;\n    };\n    this._initPosition = position => {\n      const container = this.container,\n        zIndexValue = (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRangeValue)(this.options.zIndex.value),\n        minZ = 0;\n      this.position = this._calcPosition(container, position, (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_2__.clamp)(zIndexValue, minZ, container.zLayers));\n      this.initialPosition = this.position.copy();\n      const canvasSize = container.canvas.size,\n        defaultRadius = 0;\n      this.moveCenter = {\n        ...(0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.getPosition)(this.options.move.center, canvasSize),\n        radius: this.options.move.center.radius ?? defaultRadius,\n        mode: this.options.move.center.mode ?? \"percent\"\n      };\n      this.direction = (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_2__.getParticleDirectionAngle)(this.options.move.direction, this.position, this.moveCenter);\n      switch (this.options.move.direction) {\n        case \"inside\":\n          this.outType = \"inside\";\n          break;\n        case \"outside\":\n          this.outType = \"outside\";\n          break;\n      }\n      this.offset = _Utils_Vector_js__WEBPACK_IMPORTED_MODULE_5__.Vector.origin;\n    };\n    this._engine = engine;\n  }\n  destroy(override) {\n    if (this.unbreakable || this.destroyed) {\n      return;\n    }\n    this.destroyed = true;\n    this.bubble.inRange = false;\n    this.slow.inRange = false;\n    const container = this.container,\n      pathGenerator = this.pathGenerator,\n      shapeDrawer = container.shapeDrawers.get(this.shape);\n    shapeDrawer?.particleDestroy?.(this);\n    for (const [, plugin] of container.plugins) {\n      plugin.particleDestroyed?.(this, override);\n    }\n    for (const updater of container.particles.updaters) {\n      updater.particleDestroyed?.(this, override);\n    }\n    pathGenerator?.reset(this);\n    this._engine.dispatchEvent(\"particleDestroyed\", {\n      container: this.container,\n      data: {\n        particle: this\n      }\n    });\n  }\n  async draw(delta) {\n    const container = this.container,\n      canvas = container.canvas;\n    for (const [, plugin] of container.plugins) {\n      await canvas.drawParticlePlugin(plugin, this, delta);\n    }\n    await canvas.drawParticle(this, delta);\n  }\n  getFillColor() {\n    return this._getRollColor(this.bubble.color ?? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_6__.getHslFromAnimation)(this.color));\n  }\n  getMass() {\n    return this.getRadius() ** squareExp * Math.PI * half;\n  }\n  getPosition() {\n    return {\n      x: this.position.x + this.offset.x,\n      y: this.position.y + this.offset.y,\n      z: this.position.z\n    };\n  }\n  getRadius() {\n    return this.bubble.radius ?? this.size.value;\n  }\n  getStrokeColor() {\n    return this._getRollColor(this.bubble.color ?? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_6__.getHslFromAnimation)(this.strokeColor));\n  }\n  async init(id, position, overrideOptions, group) {\n    const container = this.container,\n      engine = this._engine;\n    this.id = id;\n    this.group = group;\n    this.effectClose = true;\n    this.effectFill = true;\n    this.shapeClose = true;\n    this.shapeFill = true;\n    this.pathRotation = false;\n    this.lastPathTime = 0;\n    this.destroyed = false;\n    this.unbreakable = false;\n    this.rotation = 0;\n    this.misplaced = false;\n    this.retina = {\n      maxDistance: {}\n    };\n    this.outType = \"normal\";\n    this.ignoresResizeRatio = true;\n    const pxRatio = container.retina.pixelRatio,\n      mainOptions = container.actualOptions,\n      particlesOptions = (0,_Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_7__.loadParticlesOptions)(this._engine, container, mainOptions.particles),\n      effectType = particlesOptions.effect.type,\n      shapeType = particlesOptions.shape.type,\n      {\n        reduceDuplicates\n      } = particlesOptions;\n    this.effect = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.itemFromSingleOrMultiple)(effectType, this.id, reduceDuplicates);\n    this.shape = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.itemFromSingleOrMultiple)(shapeType, this.id, reduceDuplicates);\n    const effectOptions = particlesOptions.effect,\n      shapeOptions = particlesOptions.shape;\n    if (overrideOptions) {\n      if (overrideOptions.effect?.type) {\n        const overrideEffectType = overrideOptions.effect.type,\n          effect = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.itemFromSingleOrMultiple)(overrideEffectType, this.id, reduceDuplicates);\n        if (effect) {\n          this.effect = effect;\n          effectOptions.load(overrideOptions.effect);\n        }\n      }\n      if (overrideOptions.shape?.type) {\n        const overrideShapeType = overrideOptions.shape.type,\n          shape = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.itemFromSingleOrMultiple)(overrideShapeType, this.id, reduceDuplicates);\n        if (shape) {\n          this.shape = shape;\n          shapeOptions.load(overrideOptions.shape);\n        }\n      }\n    }\n    this.effectData = loadEffectData(this.effect, effectOptions, this.id, reduceDuplicates);\n    this.shapeData = loadShapeData(this.shape, shapeOptions, this.id, reduceDuplicates);\n    particlesOptions.load(overrideOptions);\n    const effectData = this.effectData;\n    if (effectData) {\n      particlesOptions.load(effectData.particles);\n    }\n    const shapeData = this.shapeData;\n    if (shapeData) {\n      particlesOptions.load(shapeData.particles);\n    }\n    const interactivity = new _Options_Classes_Interactivity_Interactivity_js__WEBPACK_IMPORTED_MODULE_8__.Interactivity(engine, container);\n    interactivity.load(container.actualOptions.interactivity);\n    interactivity.load(particlesOptions.interactivity);\n    this.interactivity = interactivity;\n    this.effectFill = effectData?.fill ?? particlesOptions.effect.fill;\n    this.effectClose = effectData?.close ?? particlesOptions.effect.close;\n    this.shapeFill = shapeData?.fill ?? particlesOptions.shape.fill;\n    this.shapeClose = shapeData?.close ?? particlesOptions.shape.close;\n    this.options = particlesOptions;\n    const pathOptions = this.options.move.path;\n    this.pathDelay = (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRangeValue)(pathOptions.delay.value) * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.millisecondsToSeconds;\n    if (pathOptions.generator) {\n      this.pathGenerator = this._engine.getPathGenerator(pathOptions.generator);\n      if (this.pathGenerator && container.addPath(pathOptions.generator, this.pathGenerator)) {\n        await this.pathGenerator.init(container);\n      }\n    }\n    container.retina.initParticle(this);\n    this.size = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.initParticleNumericAnimationValue)(this.options.size, pxRatio);\n    this.bubble = {\n      inRange: false\n    };\n    this.slow = {\n      inRange: false,\n      factor: 1\n    };\n    this._initPosition(position);\n    this.initialVelocity = this._calculateVelocity();\n    this.velocity = this.initialVelocity.copy();\n    const decayOffset = 1;\n    this.moveDecay = decayOffset - (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRangeValue)(this.options.move.decay);\n    const particles = container.particles;\n    particles.setLastZIndex(this.position.z);\n    this.zIndexFactor = this.position.z / container.zLayers;\n    this.sides = 24;\n    let effectDrawer = container.effectDrawers.get(this.effect);\n    if (!effectDrawer) {\n      effectDrawer = this._engine.getEffectDrawer(this.effect);\n      if (effectDrawer) {\n        container.effectDrawers.set(this.effect, effectDrawer);\n      }\n    }\n    if (effectDrawer?.loadEffect) {\n      await effectDrawer.loadEffect(this);\n    }\n    let shapeDrawer = container.shapeDrawers.get(this.shape);\n    if (!shapeDrawer) {\n      shapeDrawer = this._engine.getShapeDrawer(this.shape);\n      if (shapeDrawer) {\n        container.shapeDrawers.set(this.shape, shapeDrawer);\n      }\n    }\n    if (shapeDrawer?.loadShape) {\n      await shapeDrawer.loadShape(this);\n    }\n    const sideCountFunc = shapeDrawer?.getSidesCount;\n    if (sideCountFunc) {\n      this.sides = sideCountFunc(this);\n    }\n    this.spawning = false;\n    this.shadowColor = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_6__.rangeColorToRgb)(this.options.shadow.color);\n    for (const updater of particles.updaters) {\n      await updater.init(this);\n    }\n    for (const mover of particles.movers) {\n      await mover.init?.(this);\n    }\n    await effectDrawer?.particleInit?.(container, this);\n    await shapeDrawer?.particleInit?.(container, this);\n    for (const [, plugin] of container.plugins) {\n      plugin.particleCreated?.(this);\n    }\n  }\n  isInsideCanvas() {\n    const radius = this.getRadius(),\n      canvasSize = this.container.canvas.size,\n      position = this.position;\n    return position.x >= -radius && position.y >= -radius && position.y <= canvasSize.height + radius && position.x <= canvasSize.width + radius;\n  }\n  isVisible() {\n    return !this.destroyed && !this.spawning && this.isInsideCanvas();\n  }\n  reset() {\n    for (const updater of this.container.particles.updaters) {\n      updater.reset?.(this);\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/engine/./dist/browser/Core/Particle.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Particle: () => (/* binding */ Particle)\n/* harmony export */ });\n/* harmony import */ var _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Utils/Vectors.js */ \"./dist/browser/Core/Utils/Vectors.js\");\n/* harmony import */ var _Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Utils/NumberUtils.js */ \"./dist/browser/Utils/NumberUtils.js\");\n/* harmony import */ var _Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../Utils/Utils.js */ \"./dist/browser/Utils/Utils.js\");\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Utils/Constants.js */ \"./dist/browser/Core/Utils/Constants.js\");\n/* harmony import */ var _Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Utils/ColorUtils.js */ \"./dist/browser/Utils/ColorUtils.js\");\n/* harmony import */ var _Options_Classes_Interactivity_Interactivity_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Options/Classes/Interactivity/Interactivity.js */ \"./dist/browser/Options/Classes/Interactivity/Interactivity.js\");\n/* harmony import */ var _Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Utils/CanvasUtils.js */ \"./dist/browser/Utils/CanvasUtils.js\");\n/* harmony import */ var _Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Utils/OptionsUtils.js */ \"./dist/browser/Utils/OptionsUtils.js\");\n\n\n\n\n\n\n\n\nconst defaultRetryCount = 0,\n  double = 2,\n  half = 0.5,\n  squareExp = 2;\nfunction loadEffectData(effect, effectOptions, id, reduceDuplicates) {\n  const effectData = effectOptions.options[effect];\n  if (!effectData) {\n    return;\n  }\n  return (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.deepExtend)({\n    close: effectOptions.close,\n    fill: effectOptions.fill\n  }, (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.itemFromSingleOrMultiple)(effectData, id, reduceDuplicates));\n}\nfunction loadShapeData(shape, shapeOptions, id, reduceDuplicates) {\n  const shapeData = shapeOptions.options[shape];\n  if (!shapeData) {\n    return;\n  }\n  return (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.deepExtend)({\n    close: shapeOptions.close,\n    fill: shapeOptions.fill\n  }, (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.itemFromSingleOrMultiple)(shapeData, id, reduceDuplicates));\n}\nfunction fixOutMode(data) {\n  if (!(0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.isInArray)(data.outMode, data.checkModes)) {\n    return;\n  }\n  const diameter = data.radius * double;\n  if (data.coord > data.maxCoord - diameter) {\n    data.setCb(-data.radius);\n  } else if (data.coord < diameter) {\n    data.setCb(data.radius);\n  }\n}\nclass Particle {\n  constructor(engine, container) {\n    this.container = container;\n    this._calcPosition = (container, position, zIndex, tryCount = defaultRetryCount) => {\n      for (const [, plugin] of container.plugins) {\n        const pluginPos = plugin.particlePosition !== undefined ? plugin.particlePosition(position, this) : undefined;\n        if (pluginPos) {\n          return _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_1__.Vector3d.create(pluginPos.x, pluginPos.y, zIndex);\n        }\n      }\n      const canvasSize = container.canvas.size,\n        exactPosition = (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_2__.calcExactPositionOrRandomFromSize)({\n          size: canvasSize,\n          position: position\n        }),\n        pos = _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_1__.Vector3d.create(exactPosition.x, exactPosition.y, zIndex),\n        radius = this.getRadius(),\n        outModes = this.options.move.outModes,\n        fixHorizontal = outMode => {\n          fixOutMode({\n            outMode,\n            checkModes: [\"bounce\"],\n            coord: pos.x,\n            maxCoord: container.canvas.size.width,\n            setCb: value => pos.x += value,\n            radius\n          });\n        },\n        fixVertical = outMode => {\n          fixOutMode({\n            outMode,\n            checkModes: [\"bounce\"],\n            coord: pos.y,\n            maxCoord: container.canvas.size.height,\n            setCb: value => pos.y += value,\n            radius\n          });\n        };\n      fixHorizontal(outModes.left ?? outModes.default);\n      fixHorizontal(outModes.right ?? outModes.default);\n      fixVertical(outModes.top ?? outModes.default);\n      fixVertical(outModes.bottom ?? outModes.default);\n      if (this._checkOverlap(pos, tryCount)) {\n        const increment = 1;\n        return this._calcPosition(container, undefined, zIndex, tryCount + increment);\n      }\n      return pos;\n    };\n    this._calculateVelocity = () => {\n      const baseVelocity = (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_2__.getParticleBaseVelocity)(this.direction),\n        res = baseVelocity.copy(),\n        moveOptions = this.options.move;\n      if (moveOptions.direction === \"inside\" || moveOptions.direction === \"outside\") {\n        return res;\n      }\n      const rad = (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_2__.degToRad)((0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRangeValue)(moveOptions.angle.value)),\n        radOffset = (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_2__.degToRad)((0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRangeValue)(moveOptions.angle.offset)),\n        range = {\n          left: radOffset - rad * half,\n          right: radOffset + rad * half\n        };\n      if (!moveOptions.straight) {\n        res.angle += (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_2__.randomInRange)((0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_2__.setRangeValue)(range.left, range.right));\n      }\n      if (moveOptions.random && typeof moveOptions.speed === \"number\") {\n        res.length *= (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRandom)();\n      }\n      return res;\n    };\n    this._checkOverlap = (pos, tryCount = defaultRetryCount) => {\n      const collisionsOptions = this.options.collisions,\n        radius = this.getRadius();\n      if (!collisionsOptions.enable) {\n        return false;\n      }\n      const overlapOptions = collisionsOptions.overlap;\n      if (overlapOptions.enable) {\n        return false;\n      }\n      const retries = overlapOptions.retries,\n        minRetries = 0;\n      if (retries >= minRetries && tryCount > retries) {\n        throw new Error(`${_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.errorPrefix} particle is overlapping and can't be placed`);\n      }\n      return !!this.container.particles.find(particle => (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_2__.getDistance)(pos, particle.position) < radius + particle.getRadius());\n    };\n    this._getRollColor = color => {\n      if (!color || !this.roll || !this.backColor && !this.roll.alter) {\n        return color;\n      }\n      const rollFactor = 1,\n        none = 0,\n        backFactor = this.roll.horizontal && this.roll.vertical ? double * rollFactor : rollFactor,\n        backSum = this.roll.horizontal ? Math.PI * half : none,\n        rolled = Math.floor(((this.roll.angle ?? none) + backSum) / (Math.PI / backFactor)) % double;\n      if (!rolled) {\n        return color;\n      }\n      if (this.backColor) {\n        return this.backColor;\n      }\n      if (this.roll.alter) {\n        return (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_4__.alterHsl)(color, this.roll.alter.type, this.roll.alter.value);\n      }\n      return color;\n    };\n    this._initPosition = position => {\n      const container = this.container,\n        zIndexValue = (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRangeValue)(this.options.zIndex.value),\n        minZ = 0;\n      this.position = this._calcPosition(container, position, (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_2__.clamp)(zIndexValue, minZ, container.zLayers));\n      this.initialPosition = this.position.copy();\n      const canvasSize = container.canvas.size,\n        defaultRadius = 0;\n      this.moveCenter = {\n        ...(0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.getPosition)(this.options.move.center, canvasSize),\n        radius: this.options.move.center.radius ?? defaultRadius,\n        mode: this.options.move.center.mode ?? \"percent\"\n      };\n      this.direction = (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_2__.getParticleDirectionAngle)(this.options.move.direction, this.position, this.moveCenter);\n      switch (this.options.move.direction) {\n        case \"inside\":\n          this.outType = \"inside\";\n          break;\n        case \"outside\":\n          this.outType = \"outside\";\n          break;\n      }\n      this.offset = _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_1__.Vector.origin;\n    };\n    this._engine = engine;\n  }\n  destroy(override) {\n    if (this.unbreakable || this.destroyed) {\n      return;\n    }\n    this.destroyed = true;\n    this.bubble.inRange = false;\n    this.slow.inRange = false;\n    const container = this.container,\n      pathGenerator = this.pathGenerator,\n      shapeDrawer = container.shapeDrawers.get(this.shape);\n    shapeDrawer?.particleDestroy?.(this);\n    for (const [, plugin] of container.plugins) {\n      plugin.particleDestroyed?.(this, override);\n    }\n    for (const updater of container.particles.updaters) {\n      updater.particleDestroyed?.(this, override);\n    }\n    pathGenerator?.reset(this);\n    this._engine.dispatchEvent(\"particleDestroyed\", {\n      container: this.container,\n      data: {\n        particle: this\n      }\n    });\n  }\n  async draw(delta) {\n    const container = this.container,\n      canvas = container.canvas;\n    for (const [, plugin] of container.plugins) {\n      await canvas.drawParticlePlugin(plugin, this, delta);\n    }\n    await canvas.drawParticle(this, delta);\n  }\n  getFillColor() {\n    return this._getRollColor(this.bubble.color ?? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_5__.getHslFromAnimation)(this.color));\n  }\n  getMass() {\n    return this.getRadius() ** squareExp * Math.PI * half;\n  }\n  getPosition() {\n    return {\n      x: this.position.x + this.offset.x,\n      y: this.position.y + this.offset.y,\n      z: this.position.z\n    };\n  }\n  getRadius() {\n    return this.bubble.radius ?? this.size.value;\n  }\n  getStrokeColor() {\n    return this._getRollColor(this.bubble.color ?? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_5__.getHslFromAnimation)(this.strokeColor));\n  }\n  async init(id, position, overrideOptions, group) {\n    const container = this.container,\n      engine = this._engine;\n    this.id = id;\n    this.group = group;\n    this.effectClose = true;\n    this.effectFill = true;\n    this.shapeClose = true;\n    this.shapeFill = true;\n    this.pathRotation = false;\n    this.lastPathTime = 0;\n    this.destroyed = false;\n    this.unbreakable = false;\n    this.rotation = 0;\n    this.misplaced = false;\n    this.retina = {\n      maxDistance: {}\n    };\n    this.outType = \"normal\";\n    this.ignoresResizeRatio = true;\n    const pxRatio = container.retina.pixelRatio,\n      mainOptions = container.actualOptions,\n      particlesOptions = (0,_Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_6__.loadParticlesOptions)(this._engine, container, mainOptions.particles),\n      effectType = particlesOptions.effect.type,\n      shapeType = particlesOptions.shape.type,\n      {\n        reduceDuplicates\n      } = particlesOptions;\n    this.effect = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.itemFromSingleOrMultiple)(effectType, this.id, reduceDuplicates);\n    this.shape = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.itemFromSingleOrMultiple)(shapeType, this.id, reduceDuplicates);\n    const effectOptions = particlesOptions.effect,\n      shapeOptions = particlesOptions.shape;\n    if (overrideOptions) {\n      if (overrideOptions.effect?.type) {\n        const overrideEffectType = overrideOptions.effect.type,\n          effect = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.itemFromSingleOrMultiple)(overrideEffectType, this.id, reduceDuplicates);\n        if (effect) {\n          this.effect = effect;\n          effectOptions.load(overrideOptions.effect);\n        }\n      }\n      if (overrideOptions.shape?.type) {\n        const overrideShapeType = overrideOptions.shape.type,\n          shape = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.itemFromSingleOrMultiple)(overrideShapeType, this.id, reduceDuplicates);\n        if (shape) {\n          this.shape = shape;\n          shapeOptions.load(overrideOptions.shape);\n        }\n      }\n    }\n    this.effectData = loadEffectData(this.effect, effectOptions, this.id, reduceDuplicates);\n    this.shapeData = loadShapeData(this.shape, shapeOptions, this.id, reduceDuplicates);\n    particlesOptions.load(overrideOptions);\n    const effectData = this.effectData;\n    if (effectData) {\n      particlesOptions.load(effectData.particles);\n    }\n    const shapeData = this.shapeData;\n    if (shapeData) {\n      particlesOptions.load(shapeData.particles);\n    }\n    const interactivity = new _Options_Classes_Interactivity_Interactivity_js__WEBPACK_IMPORTED_MODULE_7__.Interactivity(engine, container);\n    interactivity.load(container.actualOptions.interactivity);\n    interactivity.load(particlesOptions.interactivity);\n    this.interactivity = interactivity;\n    this.effectFill = effectData?.fill ?? particlesOptions.effect.fill;\n    this.effectClose = effectData?.close ?? particlesOptions.effect.close;\n    this.shapeFill = shapeData?.fill ?? particlesOptions.shape.fill;\n    this.shapeClose = shapeData?.close ?? particlesOptions.shape.close;\n    this.options = particlesOptions;\n    const pathOptions = this.options.move.path;\n    this.pathDelay = (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRangeValue)(pathOptions.delay.value) * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.millisecondsToSeconds;\n    if (pathOptions.generator) {\n      this.pathGenerator = this._engine.getPathGenerator(pathOptions.generator);\n      if (this.pathGenerator && container.addPath(pathOptions.generator, this.pathGenerator)) {\n        await this.pathGenerator.init(container);\n      }\n    }\n    container.retina.initParticle(this);\n    this.size = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.initParticleNumericAnimationValue)(this.options.size, pxRatio);\n    this.bubble = {\n      inRange: false\n    };\n    this.slow = {\n      inRange: false,\n      factor: 1\n    };\n    this._initPosition(position);\n    this.initialVelocity = this._calculateVelocity();\n    this.velocity = this.initialVelocity.copy();\n    const decayOffset = 1;\n    this.moveDecay = decayOffset - (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRangeValue)(this.options.move.decay);\n    const particles = container.particles;\n    particles.setLastZIndex(this.position.z);\n    this.zIndexFactor = this.position.z / container.zLayers;\n    this.sides = 24;\n    let effectDrawer = container.effectDrawers.get(this.effect);\n    if (!effectDrawer) {\n      effectDrawer = this._engine.getEffectDrawer(this.effect);\n      if (effectDrawer) {\n        container.effectDrawers.set(this.effect, effectDrawer);\n      }\n    }\n    if (effectDrawer?.loadEffect) {\n      await effectDrawer.loadEffect(this);\n    }\n    let shapeDrawer = container.shapeDrawers.get(this.shape);\n    if (!shapeDrawer) {\n      shapeDrawer = this._engine.getShapeDrawer(this.shape);\n      if (shapeDrawer) {\n        container.shapeDrawers.set(this.shape, shapeDrawer);\n      }\n    }\n    if (shapeDrawer?.loadShape) {\n      await shapeDrawer.loadShape(this);\n    }\n    const sideCountFunc = shapeDrawer?.getSidesCount;\n    if (sideCountFunc) {\n      this.sides = sideCountFunc(this);\n    }\n    this.spawning = false;\n    this.shadowColor = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_5__.rangeColorToRgb)(this.options.shadow.color);\n    for (const updater of particles.updaters) {\n      await updater.init(this);\n    }\n    for (const mover of particles.movers) {\n      await mover.init?.(this);\n    }\n    await effectDrawer?.particleInit?.(container, this);\n    await shapeDrawer?.particleInit?.(container, this);\n    for (const [, plugin] of container.plugins) {\n      plugin.particleCreated?.(this);\n    }\n  }\n  isInsideCanvas() {\n    const radius = this.getRadius(),\n      canvasSize = this.container.canvas.size,\n      position = this.position;\n    return position.x >= -radius && position.y >= -radius && position.y <= canvasSize.height + radius && position.x <= canvasSize.width + radius;\n  }\n  isVisible() {\n    return !this.destroyed && !this.spawning && this.isInsideCanvas();\n  }\n  reset() {\n    for (const updater of this.container.particles.updaters) {\n      updater.reset?.(this);\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/engine/./dist/browser/Core/Particle.js?");
 
 /***/ })
 

package/esm/Core/Container.js

@@ -33,7 +33,7 @@ export class Container {
                     continue;
                 }
                 if (entry.isIntersecting) {
-                    this.play();
+                    void this.play();
                 }
                 else {
                     this.pause();

package/esm/Core/Engine.js

@@ -50,7 +50,7 @@ export class Engine {
         return res;
     }
     get version() {
-        return "3.2.0";
+        return "3.2.2";
     }
     addConfig(config) {
         const key = config.key ?? config.name ?? "default";

package/esm/Core/Particle.js

@@ -1,10 +1,9 @@
+import { Vector, Vector3d } from "./Utils/Vectors.js";
 import { calcExactPositionOrRandomFromSize, clamp, degToRad, getDistance, getParticleBaseVelocity, getParticleDirectionAngle, getRandom, getRangeValue, randomInRange, setRangeValue, } from "../Utils/NumberUtils.js";
 import { deepExtend, getPosition, initParticleNumericAnimationValue, isInArray, itemFromSingleOrMultiple, } from "../Utils/Utils.js";
 import { errorPrefix, millisecondsToSeconds } from "./Utils/Constants.js";
 import { getHslFromAnimation, rangeColorToRgb } from "../Utils/ColorUtils.js";
 import { Interactivity } from "../Options/Classes/Interactivity/Interactivity.js";
-import { Vector } from "./Utils/Vector.js";
-import { Vector3d } from "./Utils/Vector3d.js";
 import { alterHsl } from "../Utils/CanvasUtils.js";
 import { loadParticlesOptions } from "../Utils/OptionsUtils.js";
 const defaultRetryCount = 0, double = 2, half = 0.5, squareExp = 2;

package/esm/Core/Particles.js

@@ -2,7 +2,7 @@ import { getLogger, getPosition } from "../Utils/Utils.js";
 import { InteractionManager } from "./Utils/InteractionManager.js";
 import { Point } from "./Utils/Point.js";
 import { QuadTree } from "./Utils/QuadTree.js";
-import { Rectangle } from "./Utils/Rectangle.js";
+import { Rectangle } from "./Utils/Ranges.js";
 import { errorPrefix } from "./Utils/Constants.js";
 const qTreeCapacity = 4, squareExp = 2, defaultRemoveQuantity = 1;
 const qTreeRectangle = (canvasSize) => {

package/esm/Core/Utils/EventListeners.js

@@ -1,5 +1,6 @@
-import { executeOnSingleOrMultiple, isBoolean, safeMatchMedia } from "../../Utils/Utils.js";
+import { executeOnSingleOrMultiple, safeMatchMedia } from "../../Utils/Utils.js";
 import { millisecondsToSeconds, mouseDownEvent, mouseLeaveEvent, mouseMoveEvent, mouseOutEvent, mouseUpEvent, resizeEvent, touchCancelEvent, touchEndEvent, touchMoveEvent, touchStartEvent, visibilityChangeEvent, } from "./Constants.js";
+import { isBoolean } from "../../Utils/TypeUtils.js";
 const double = 2;
 function manageListener(element, event, handler, add, options) {
     if (add) {
@@ -56,10 +57,10 @@ export class EventListeners {
             else {
                 container.pageHidden = false;
                 if (container.animationStatus) {
-                    container.play(true);
+                    void container.play(true);
                 }
                 else {
-                    container.draw(true);
+                    void container.draw(true);
                 }
             }
         };

package/esm/Core/Utils/QuadTree.js

@@ -1,5 +1,4 @@
-import { Circle } from "./Circle.js";
-import { Rectangle } from "./Rectangle.js";
+import { Circle, Rectangle } from "./Ranges.js";
 import { getDistance } from "../../Utils/NumberUtils.js";
 const half = 0.5, double = 2, subdivideCount = 4;
 export class QuadTree {
@@ -31,8 +30,8 @@ export class QuadTree {
         }
         return this._subs.some((sub) => sub.insert(point));
     }
-    query(range, check, found) {
-        const res = found ?? [];
+    query(range, check) {
+        const res = [];
         if (!range.intersects(this.rectangle)) {
             return [];
         }
@@ -46,7 +45,7 @@ export class QuadTree {
         }
         if (this._divided) {
             for (const sub of this._subs) {
-                sub.query(range, check, res);
+                res.push(...sub.query(range, check));
             }
         }
         return res;

package/esm/Core/Utils/Ranges.js

@@ -0,0 +1,55 @@
+import { getDistance } from "../../Utils/NumberUtils.js";
+const squareExp = 2;
+export class BaseRange {
+    constructor(x, y, type) {
+        this.position = {
+            x: x,
+            y: y,
+        };
+        this.type = type;
+    }
+}
+export class Circle extends BaseRange {
+    constructor(x, y, radius) {
+        super(x, y, "circle");
+        this.radius = radius;
+    }
+    contains(point) {
+        return getDistance(point, this.position) <= this.radius;
+    }
+    intersects(range) {
+        const pos1 = this.position, pos2 = range.position, distPos = { x: Math.abs(pos2.x - pos1.x), y: Math.abs(pos2.y - pos1.y) }, r = this.radius;
+        if (range instanceof Circle || range.type === "circle") {
+            const circleRange = range, rSum = r + circleRange.radius, dist = Math.sqrt(distPos.x ** squareExp + distPos.y ** squareExp);
+            return rSum > dist;
+        }
+        else if (range instanceof Rectangle || range.type === "rectangle") {
+            const rectRange = range, { width, height } = rectRange.size, edges = Math.pow(distPos.x - width, squareExp) + Math.pow(distPos.y - height, squareExp);
+            return (edges <= r ** squareExp ||
+                (distPos.x <= r + width && distPos.y <= r + height) ||
+                distPos.x <= width ||
+                distPos.y <= height);
+        }
+        return false;
+    }
+}
+export class Rectangle extends BaseRange {
+    constructor(x, y, width, height) {
+        super(x, y, "rectangle");
+        this.size = {
+            height: height,
+            width: width,
+        };
+    }
+    contains(point) {
+        const w = this.size.width, h = this.size.height, pos = this.position;
+        return point.x >= pos.x && point.x <= pos.x + w && point.y >= pos.y && point.y <= pos.y + h;
+    }
+    intersects(range) {
+        if (range instanceof Circle) {
+            return range.intersects(this);
+        }
+        const w = this.size.width, h = this.size.height, pos1 = this.position, pos2 = range.position, size2 = range instanceof Rectangle ? range.size : { width: 0, height: 0 }, w2 = size2.width, h2 = size2.height;
+        return pos2.x < pos1.x + w && pos2.x + w2 > pos1.x && pos2.y < pos1.y + h && pos2.y + h2 > pos1.y;
+    }
+}

package/esm/Core/Utils/{Vector3d.js → Vectors.js}

@@ -1,5 +1,5 @@
 import { errorPrefix } from "./Constants.js";
-import { isNumber } from "../../Utils/Utils.js";
+import { isNumber } from "../../Utils/TypeUtils.js";
 const origin = {
     x: 0,
     y: 0,
@@ -107,3 +107,17 @@ export class Vector3d {
         this.z -= v.z;
     }
 }
+export class Vector extends Vector3d {
+    constructor(xOrCoords, y) {
+        super(xOrCoords, y, origin.z);
+    }
+    static get origin() {
+        return Vector.create(origin.x, origin.y);
+    }
+    static clone(source) {
+        return Vector.create(source.x, source.y);
+    }
+    static create(x, y) {
+        return new Vector(x, y);
+    }
+}

package/esm/Options/Classes/AnimatableColor.js

@@ -1,4 +1,4 @@
-import { isArray, isString } from "../../Utils/Utils.js";
+import { isArray, isString } from "../../Utils/TypeUtils.js";
 import { HslAnimation } from "./HslAnimation.js";
 import { OptionsColor } from "./OptionsColor.js";
 export class AnimatableColor extends OptionsColor {

package/esm/Options/Classes/BackgroundMask/BackgroundMask.js

@@ -1,5 +1,5 @@
 import { BackgroundMaskCover } from "./BackgroundMaskCover.js";
-import { isString } from "../../../Utils/Utils.js";
+import { isString } from "../../../Utils/TypeUtils.js";
 export class BackgroundMask {
     constructor() {
         this.composite = "destination-out";

package/esm/Options/Classes/Options.js

@@ -1,4 +1,4 @@
-import { deepExtend, executeOnSingleOrMultiple, isBoolean, safeMatchMedia } from "../../Utils/Utils.js";
+import { deepExtend, executeOnSingleOrMultiple, safeMatchMedia } from "../../Utils/Utils.js";
 import { Background } from "./Background/Background.js";
 import { BackgroundMask } from "./BackgroundMask/BackgroundMask.js";
 import { FullScreen } from "./FullScreen/FullScreen.js";
@@ -6,6 +6,7 @@ import { Interactivity } from "./Interactivity/Interactivity.js";
 import { ManualParticle } from "./ManualParticle.js";
 import { Responsive } from "./Responsive.js";
 import { Theme } from "./Theme/Theme.js";
+import { isBoolean } from "../../Utils/TypeUtils.js";
 import { loadParticlesOptions } from "../../Utils/OptionsUtils.js";
 import { setRangeValue } from "../../Utils/NumberUtils.js";
 export class Options {

package/esm/Options/Classes/OptionsColor.js

@@ -1,4 +1,4 @@
-import { isArray, isString } from "../../Utils/Utils.js";
+import { isArray, isString } from "../../Utils/TypeUtils.js";
 export class OptionsColor {
     constructor() {
         this.value = "";

package/esm/Options/Classes/Particles/Move/Move.js

@@ -1,4 +1,4 @@
-import { isNumber, isObject } from "../../../../Utils/Utils.js";
+import { isNumber, isObject } from "../../../../Utils/TypeUtils.js";
 import { MoveAngle } from "./MoveAngle.js";
 import { MoveAttract } from "./MoveAttract.js";
 import { MoveCenter } from "./MoveCenter.js";

package/esm/Types/RangeType.js

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

package/esm/Utils/ColorUtils.js

@@ -1,6 +1,7 @@
 import { clamp, getRandom, getRangeMax, getRangeMin, getRangeValue, mix, randomInRange, setRangeValue, } from "./NumberUtils.js";
-import { isArray, isString, itemFromArray } from "./Utils.js";
+import { isArray, isString } from "./TypeUtils.js";
 import { millisecondsToSeconds, percentDenominator } from "../Core/Utils/Constants.js";
+import { itemFromArray } from "./Utils.js";
 const randomColorValue = "random", midColorValue = "mid", colorManagers = new Map();
 export function addColorManager(manager) {
     colorManagers.set(manager.key, manager);

package/esm/Utils/NumberUtils.js

@@ -1,5 +1,5 @@
-import { Vector } from "../Core/Utils/Vector.js";
-import { isNumber } from "./Utils.js";
+import { Vector } from "../Core/Utils/Vectors.js";
+import { isNumber } from "./TypeUtils.js";
 import { percentDenominator } from "../Core/Utils/Constants.js";
 let _random = Math.random;
 const easings = new Map(), double = 2, doublePI = Math.PI * double;