@tsparticles/all 4.0.0-alpha.8 → 4.0.0-beta.1

package/engine_dist_browser_Core_Container_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v4.0.0-alpha.8
+ * v4.0.0-beta.1
  */
 "use strict";
 /*
@@ -17,13 +17,13 @@
  */
 (this["webpackChunk_tsparticles_all"] = this["webpackChunk_tsparticles_all"] || []).push([["engine_dist_browser_Core_Container_js"],{
 
-/***/ "../../engine/dist/browser/Core/Canvas.js"
-/*!************************************************!*\
-  !*** ../../engine/dist/browser/Core/Canvas.js ***!
-  \************************************************/
+/***/ "../../engine/dist/browser/Core/CanvasManager.js"
+/*!*******************************************************!*\
+  !*** ../../engine/dist/browser/Core/CanvasManager.js ***!
+  \*******************************************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Canvas: () => (/* binding */ Canvas)\n/* harmony export */ });\n/* harmony import */ var _Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../Utils/CanvasUtils.js */ \"../../engine/dist/browser/Utils/CanvasUtils.js\");\n/* harmony import */ var _Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Utils/Utils.js */ \"../../engine/dist/browser/Utils/Utils.js\");\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Utils/Constants.js */ \"../../engine/dist/browser/Core/Utils/Constants.js\");\n/* harmony import */ var _Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Utils/ColorUtils.js */ \"../../engine/dist/browser/Utils/ColorUtils.js\");\n\n\n\n\nconst fColorIndex = 0,\n  sColorIndex = 1;\nfunction setTransformValue(factor, newFactor, key) {\n  const newValue = newFactor[key];\n  if (newValue !== undefined) {\n    factor[key] = (factor[key] ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultTransformValue) * newValue;\n  }\n}\nfunction setStyle(canvas, style, important = false) {\n  if (!style) {\n    return;\n  }\n  const element = canvas,\n    elementStyle = element.style,\n    keys = new Set();\n  for (let i = 0; i < elementStyle.length; i++) {\n    const key = elementStyle.item(i);\n    if (!key) {\n      continue;\n    }\n    keys.add(key);\n  }\n  for (let i = 0; i < style.length; i++) {\n    const key = style.item(i);\n    if (!key) {\n      continue;\n    }\n    keys.add(key);\n  }\n  for (const key of keys) {\n    const value = style.getPropertyValue(key);\n    if (value) {\n      elementStyle.setProperty(key, value, important ? \"important\" : \"\");\n    } else {\n      elementStyle.removeProperty(key);\n    }\n  }\n}\nclass Canvas {\n  constructor(container, engine) {\n    this.container = container;\n    this._reusableColorStyles = {};\n    this._reusablePluginColors = [undefined, undefined];\n    this._reusableTransform = {};\n    this._applyPostDrawUpdaters = particle => {\n      for (const updater of this._postDrawUpdaters) {\n        updater.afterDraw?.(particle);\n      }\n    };\n    this._applyPreDrawUpdaters = (ctx, particle, radius, zOpacity, colorStyles, transform) => {\n      for (const updater of this._preDrawUpdaters) {\n        if (updater.getColorStyles) {\n          const {\n            fill,\n            stroke\n          } = updater.getColorStyles(particle, ctx, radius, zOpacity);\n          if (fill) {\n            colorStyles.fill = fill;\n          }\n          if (stroke) {\n            colorStyles.stroke = stroke;\n          }\n        }\n        if (updater.getTransformValues) {\n          const updaterTransform = updater.getTransformValues(particle);\n          for (const key in updaterTransform) {\n            setTransformValue(transform, updaterTransform, key);\n          }\n        }\n        updater.beforeDraw?.(particle);\n      }\n    };\n    this._applyResizePlugins = () => {\n      for (const plugin of this._resizePlugins) {\n        plugin.resize?.();\n      }\n    };\n    this._getPluginParticleColors = particle => {\n      let fColor, sColor;\n      for (const plugin of this._colorPlugins) {\n        if (!fColor && plugin.particleFillColor) {\n          fColor = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.rangeColorToHsl)(this._engine, plugin.particleFillColor(particle));\n        }\n        if (!sColor && plugin.particleStrokeColor) {\n          sColor = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.rangeColorToHsl)(this._engine, plugin.particleStrokeColor(particle));\n        }\n        if (fColor && sColor) {\n          break;\n        }\n      }\n      this._reusablePluginColors[fColorIndex] = fColor;\n      this._reusablePluginColors[sColorIndex] = sColor;\n      return this._reusablePluginColors;\n    };\n    this._initStyle = () => {\n      const element = this.element,\n        options = this.container.actualOptions;\n      if (!element) {\n        return;\n      }\n      if (this._fullScreen) {\n        this._setFullScreenStyle();\n      } else {\n        this._resetOriginalStyle();\n      }\n      for (const key in options.style) {\n        if (!key || !Object.hasOwn(options.style, key)) {\n          continue;\n        }\n        const value = options.style[key];\n        if (!value) {\n          continue;\n        }\n        element.style.setProperty(key, value, \"important\");\n      }\n    };\n    this._repairStyle = () => {\n      const element = this.element;\n      if (!element) {\n        return;\n      }\n      this._safeMutationObserver(observer => {\n        observer.disconnect();\n      });\n      this._initStyle();\n      this.initBackground();\n      const pointerEvents = this._pointerEvents;\n      element.style.pointerEvents = pointerEvents;\n      element.setAttribute(\"pointer-events\", pointerEvents);\n      this._safeMutationObserver(observer => {\n        if (!(element instanceof Node)) {\n          return;\n        }\n        observer.observe(element, {\n          attributes: true\n        });\n      });\n    };\n    this._resetOriginalStyle = () => {\n      const element = this.element,\n        originalStyle = this._originalStyle;\n      if (!element || !originalStyle) {\n        return;\n      }\n      setStyle(element, originalStyle, true);\n    };\n    this._safeMutationObserver = callback => {\n      if (!this._mutationObserver) {\n        return;\n      }\n      callback(this._mutationObserver);\n    };\n    this._setFullScreenStyle = () => {\n      const element = this.element;\n      if (!element) {\n        return;\n      }\n      setStyle(element, (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.getFullScreenStyle)(this.container.actualOptions.fullScreen.zIndex), true);\n    };\n    this._engine = engine;\n    this._standardSize = {\n      height: 0,\n      width: 0\n    };\n    const pxRatio = container.retina.pixelRatio,\n      stdSize = this._standardSize;\n    this.size = {\n      height: stdSize.height * pxRatio,\n      width: stdSize.width * pxRatio\n    };\n    this._context = null;\n    this._generated = false;\n    this._preDrawUpdaters = [];\n    this._postDrawUpdaters = [];\n    this._resizePlugins = [];\n    this._colorPlugins = [];\n    this._pointerEvents = \"none\";\n  }\n  get _fullScreen() {\n    return this.container.actualOptions.fullScreen.enable;\n  }\n  canvasClear() {\n    if (!this.container.actualOptions.clear) {\n      return;\n    }\n    this.draw(ctx => {\n      (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.clear)(ctx, this.size);\n    });\n  }\n  clear() {\n    let pluginHandled = false;\n    for (const plugin of this.container.plugins) {\n      if (!pluginHandled && plugin.canvasClear) {\n        pluginHandled = plugin.canvasClear();\n      }\n    }\n    if (pluginHandled) {\n      return;\n    }\n    this.canvasClear();\n  }\n  destroy() {\n    this.stop();\n    if (this._generated) {\n      const element = this.element;\n      element?.remove();\n      this.element = undefined;\n    } else {\n      this._resetOriginalStyle();\n    }\n    this._preDrawUpdaters = [];\n    this._postDrawUpdaters = [];\n    this._resizePlugins = [];\n    this._colorPlugins = [];\n  }\n  draw(cb) {\n    const ctx = this._context;\n    if (!ctx) {\n      return;\n    }\n    return cb(ctx);\n  }\n  drawParticle(particle, delta) {\n    if (particle.spawning || particle.destroyed) {\n      return;\n    }\n    const radius = particle.getRadius();\n    if (radius <= _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.minimumSize) {\n      return;\n    }\n    const pfColor = particle.getFillColor(),\n      psColor = particle.getStrokeColor() ?? pfColor;\n    let [fColor, sColor] = this._getPluginParticleColors(particle);\n    fColor ??= pfColor;\n    sColor ??= psColor;\n    if (!fColor && !sColor) {\n      return;\n    }\n    const container = this.container,\n      zIndexOptions = particle.options.zIndex,\n      zIndexFactor = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.zIndexFactorOffset - particle.zIndexFactor,\n      {\n        opacity,\n        strokeOpacity\n      } = particle.getOpacity(),\n      transform = this._reusableTransform,\n      colorStyles = this._reusableColorStyles,\n      fill = fColor ? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.getStyleFromHsl)(fColor, container.hdr, opacity) : undefined,\n      stroke = sColor ? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.getStyleFromHsl)(sColor, container.hdr, strokeOpacity) : fill;\n    transform.a = transform.b = transform.c = transform.d = undefined;\n    colorStyles.fill = fill;\n    colorStyles.stroke = stroke;\n    this.draw(context => {\n      for (const plugin of container.plugins) {\n        if (plugin.drawParticleSetup) {\n          plugin.drawParticleSetup(context, particle, delta);\n        }\n      }\n      this._applyPreDrawUpdaters(context, particle, radius, opacity, colorStyles, transform);\n      (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.drawParticle)({\n        container,\n        context,\n        particle,\n        delta,\n        colorStyles,\n        radius: radius * zIndexFactor ** zIndexOptions.sizeRate,\n        opacity: opacity,\n        transform\n      });\n      this._applyPostDrawUpdaters(particle);\n      for (const plugin of container.plugins) {\n        if (plugin.drawParticleCleanup) {\n          plugin.drawParticleCleanup(context, particle, delta);\n        }\n      }\n    });\n  }\n  drawParticlePlugin(plugin, particle, delta) {\n    this.draw(ctx => {\n      (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.drawParticlePlugin)(ctx, plugin, particle, delta);\n    });\n  }\n  drawParticles(delta) {\n    const {\n      particles,\n      plugins\n    } = this.container;\n    this.clear();\n    particles.update(delta);\n    this.draw(ctx => {\n      for (const plugin of plugins) {\n        plugin.drawSettingsSetup?.(ctx, delta);\n      }\n      for (const plugin of plugins) {\n        plugin.draw?.(ctx, delta);\n      }\n      particles.drawParticles(delta);\n      for (const plugin of plugins) {\n        plugin.clearDraw?.(ctx, delta);\n      }\n      for (const plugin of plugins) {\n        plugin.drawSettingsCleanup?.(ctx, delta);\n      }\n    });\n  }\n  init() {\n    this._safeMutationObserver(obs => {\n      obs.disconnect();\n    });\n    this._mutationObserver = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.safeMutationObserver)(records => {\n      for (const record of records) {\n        if (record.type === \"attributes\" && record.attributeName === \"style\") {\n          this._repairStyle();\n        }\n      }\n    });\n    this.resize();\n    this._initStyle();\n    this.initBackground();\n    this._safeMutationObserver(obs => {\n      if (!this.element || !(this.element instanceof Node)) {\n        return;\n      }\n      obs.observe(this.element, {\n        attributes: true\n      });\n    });\n    this.initUpdaters();\n    this.initPlugins();\n    this.paint();\n  }\n  initBackground() {\n    const {\n        container\n      } = this,\n      options = container.actualOptions,\n      background = options.background,\n      element = this.element;\n    if (!element) {\n      return;\n    }\n    const elementStyle = element.style,\n      color = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.rangeColorToRgb)(this._engine, background.color);\n    if (color) {\n      elementStyle.backgroundColor = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.getStyleFromRgb)(color, container.hdr, background.opacity);\n    } else {\n      elementStyle.backgroundColor = \"\";\n    }\n    elementStyle.backgroundImage = background.image || \"\";\n    elementStyle.backgroundPosition = background.position || \"\";\n    elementStyle.backgroundRepeat = background.repeat || \"\";\n    elementStyle.backgroundSize = background.size || \"\";\n  }\n  initPlugins() {\n    this._resizePlugins = [];\n    for (const plugin of this.container.plugins) {\n      if (plugin.resize) {\n        this._resizePlugins.push(plugin);\n      }\n      if (plugin.particleFillColor ?? plugin.particleStrokeColor) {\n        this._colorPlugins.push(plugin);\n      }\n    }\n  }\n  initUpdaters() {\n    this._preDrawUpdaters = [];\n    this._postDrawUpdaters = [];\n    for (const updater of this.container.particles.updaters) {\n      if (updater.afterDraw) {\n        this._postDrawUpdaters.push(updater);\n      }\n      if (updater.getColorStyles ?? updater.getTransformValues ?? updater.beforeDraw) {\n        this._preDrawUpdaters.push(updater);\n      }\n    }\n  }\n  loadCanvas(canvas) {\n    if (this._generated && this.element) {\n      this.element.remove();\n    }\n    const container = this.container;\n    this._generated = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.generatedAttribute in canvas.dataset ? canvas.dataset[_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.generatedAttribute] === \"true\" : this._generated;\n    this.element = canvas;\n    this.element.ariaHidden = \"true\";\n    this._originalStyle = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.cloneStyle)(this.element.style);\n    const standardSize = this._standardSize;\n    standardSize.height = canvas.offsetHeight;\n    standardSize.width = canvas.offsetWidth;\n    const pxRatio = this.container.retina.pixelRatio,\n      retinaSize = this.size;\n    canvas.height = retinaSize.height = standardSize.height * pxRatio;\n    canvas.width = retinaSize.width = standardSize.width * pxRatio;\n    const canSupportHdrQuery = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.safeMatchMedia)(\"(color-gamut: p3)\");\n    this._context = this.element.getContext(\"2d\", {\n      alpha: true,\n      colorSpace: canSupportHdrQuery?.matches && container.hdr ? \"display-p3\" : \"srgb\",\n      desynchronized: true,\n      willReadFrequently: false\n    });\n    this._safeMutationObserver(obs => {\n      obs.disconnect();\n    });\n    container.retina.init();\n    this.initBackground();\n    this._safeMutationObserver(obs => {\n      if (!this.element || !(this.element instanceof Node)) {\n        return;\n      }\n      obs.observe(this.element, {\n        attributes: true\n      });\n    });\n  }\n  paint() {\n    let handled = false;\n    for (const plugin of this.container.plugins) {\n      if (handled) {\n        break;\n      }\n      handled = plugin.canvasPaint?.() ?? false;\n    }\n    if (handled) {\n      return;\n    }\n    this.paintBase();\n  }\n  paintBase(baseColor) {\n    this.draw(ctx => {\n      (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.paintBase)(ctx, this.size, baseColor);\n    });\n  }\n  paintImage(image, opacity) {\n    this.draw(ctx => {\n      (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.paintImage)(ctx, this.size, image, opacity);\n    });\n  }\n  resize() {\n    if (!this.element) {\n      return false;\n    }\n    const container = this.container,\n      currentSize = container.canvas._standardSize,\n      newSize = {\n        width: this.element.offsetWidth,\n        height: this.element.offsetHeight\n      },\n      pxRatio = container.retina.pixelRatio,\n      retinaSize = {\n        width: newSize.width * pxRatio,\n        height: newSize.height * pxRatio\n      };\n    if (newSize.height === currentSize.height && newSize.width === currentSize.width && retinaSize.height === this.element.height && retinaSize.width === this.element.width) {\n      return false;\n    }\n    const oldSize = {\n      ...currentSize\n    };\n    currentSize.height = newSize.height;\n    currentSize.width = newSize.width;\n    const canvasSize = this.size;\n    this.element.width = canvasSize.width = retinaSize.width;\n    this.element.height = canvasSize.height = retinaSize.height;\n    if (this.container.started) {\n      container.particles.setResizeFactor({\n        width: currentSize.width / oldSize.width,\n        height: currentSize.height / oldSize.height\n      });\n    }\n    return true;\n  }\n  setPointerEvents(type) {\n    const element = this.element;\n    if (!element) {\n      return;\n    }\n    this._pointerEvents = type;\n    this._repairStyle();\n  }\n  stop() {\n    this._safeMutationObserver(obs => {\n      obs.disconnect();\n    });\n    this._mutationObserver = undefined;\n    this.draw(ctx => {\n      (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.clear)(ctx, this.size);\n    });\n  }\n  async windowResize() {\n    if (!this.element || !this.resize()) {\n      return;\n    }\n    const container = this.container,\n      needsRefresh = container.updateActualOptions();\n    container.particles.setDensity();\n    this._applyResizePlugins();\n    if (needsRefresh) {\n      await container.refresh();\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/all/../../engine/dist/browser/Core/Canvas.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   CanvasManager: () => (/* binding */ CanvasManager)\n/* harmony export */ });\n/* harmony import */ var _Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../Utils/Utils.js */ \"../../engine/dist/browser/Utils/Utils.js\");\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Utils/Constants.js */ \"../../engine/dist/browser/Core/Utils/Constants.js\");\n/* harmony import */ var _Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Utils/ColorUtils.js */ \"../../engine/dist/browser/Utils/ColorUtils.js\");\n/* harmony import */ var _RenderManager_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./RenderManager.js */ \"../../engine/dist/browser/Core/RenderManager.js\");\n\n\n\n\nfunction setStyle(canvas, style, important = false) {\n    if (!style) {\n        return;\n    }\n    const element = canvas, elementStyle = element.style, keys = new Set();\n    for(let i = 0; i < elementStyle.length; i++){\n        const key = elementStyle.item(i);\n        if (!key) {\n            continue;\n        }\n        keys.add(key);\n    }\n    for(let i = 0; i < style.length; i++){\n        const key = style.item(i);\n        if (!key) {\n            continue;\n        }\n        keys.add(key);\n    }\n    for (const key of keys){\n        const value = style.getPropertyValue(key);\n        if (value) {\n            elementStyle.setProperty(key, value, important ? \"important\" : \"\");\n        } else {\n            elementStyle.removeProperty(key);\n        }\n    }\n}\nclass CanvasManager {\n    element;\n    render;\n    size;\n    zoom = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.defaultZoom;\n    _container;\n    _generated;\n    _mutationObserver;\n    _originalStyle;\n    _pluginManager;\n    _pointerEvents;\n    _resizePlugins;\n    _standardSize;\n    _zoomCenter;\n    constructor(pluginManager, container){\n        this._pluginManager = pluginManager;\n        this._container = container;\n        this.render = new _RenderManager_js__WEBPACK_IMPORTED_MODULE_3__.RenderManager(pluginManager, container, this);\n        this._standardSize = {\n            height: 0,\n            width: 0\n        };\n        const pxRatio = container.retina.pixelRatio, stdSize = this._standardSize;\n        this.size = {\n            height: stdSize.height * pxRatio,\n            width: stdSize.width * pxRatio\n        };\n        this._generated = false;\n        this._resizePlugins = [];\n        this._pointerEvents = \"none\";\n    }\n    get _fullScreen() {\n        return this._container.actualOptions.fullScreen.enable;\n    }\n    destroy() {\n        this.stop();\n        if (this._generated) {\n            const element = this.element;\n            element?.remove();\n            this.element = undefined;\n        } else {\n            this._resetOriginalStyle();\n        }\n        this.render.destroy();\n        this._resizePlugins = [];\n    }\n    getZoomCenter() {\n        const pxRatio = this._container.retina.pixelRatio, { width, height } = this.size;\n        if (this._zoomCenter) {\n            return this._zoomCenter;\n        }\n        return {\n            x: width * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.half / pxRatio,\n            y: height * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.half / pxRatio\n        };\n    }\n    init() {\n        this._safeMutationObserver((obs)=>{\n            obs.disconnect();\n        });\n        this._mutationObserver = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.safeMutationObserver)((records)=>{\n            for (const record of records){\n                if (record.type === \"attributes\" && record.attributeName === \"style\") {\n                    this._repairStyle();\n                }\n            }\n        });\n        this.resize();\n        this._initStyle();\n        this.initBackground();\n        this._safeMutationObserver((obs)=>{\n            if (!this.element || !(this.element instanceof Node)) {\n                return;\n            }\n            obs.observe(this.element, {\n                attributes: true\n            });\n        });\n        this.initPlugins();\n        this.render.init();\n    }\n    initBackground() {\n        const { _container } = this, options = _container.actualOptions, background = options.background, element = this.element;\n        if (!element) {\n            return;\n        }\n        const elementStyle = element.style, color = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_2__.rangeColorToRgb)(this._pluginManager, background.color);\n        if (color) {\n            elementStyle.backgroundColor = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_2__.getStyleFromRgb)(color, _container.hdr, background.opacity);\n        } else {\n            elementStyle.backgroundColor = \"\";\n        }\n        elementStyle.backgroundImage = background.image || \"\";\n        elementStyle.backgroundPosition = background.position || \"\";\n        elementStyle.backgroundRepeat = background.repeat || \"\";\n        elementStyle.backgroundSize = background.size || \"\";\n    }\n    initPlugins() {\n        this._resizePlugins = [];\n        for (const plugin of this._container.plugins){\n            if (plugin.resize) {\n                this._resizePlugins.push(plugin);\n            }\n        }\n    }\n    loadCanvas(canvas) {\n        if (this._generated && this.element) {\n            this.element.remove();\n        }\n        const container = this._container;\n        this._generated = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.generatedAttribute in canvas.dataset ? canvas.dataset[_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.generatedAttribute] === \"true\" : this._generated;\n        this.element = canvas;\n        this.element.ariaHidden = \"true\";\n        this._originalStyle = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.cloneStyle)(this.element.style);\n        const standardSize = this._standardSize;\n        standardSize.height = canvas.offsetHeight;\n        standardSize.width = canvas.offsetWidth;\n        const pxRatio = this._container.retina.pixelRatio, retinaSize = this.size;\n        canvas.height = retinaSize.height = standardSize.height * pxRatio;\n        canvas.width = retinaSize.width = standardSize.width * pxRatio;\n        const canSupportHdrQuery = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.safeMatchMedia)(\"(color-gamut: p3)\");\n        this.render.setContextSettings({\n            alpha: true,\n            colorSpace: canSupportHdrQuery?.matches && container.hdr ? \"display-p3\" : \"srgb\",\n            desynchronized: true,\n            willReadFrequently: false\n        });\n        this.render.setContext(this.element.getContext(\"2d\", this.render.settings));\n        this._safeMutationObserver((obs)=>{\n            obs.disconnect();\n        });\n        container.retina.init();\n        this.initBackground();\n        this._safeMutationObserver((obs)=>{\n            if (!this.element || !(this.element instanceof Node)) {\n                return;\n            }\n            obs.observe(this.element, {\n                attributes: true\n            });\n        });\n    }\n    resize() {\n        if (!this.element) {\n            return false;\n        }\n        const container = this._container, currentSize = container.canvas._standardSize, newSize = {\n            width: this.element.offsetWidth,\n            height: this.element.offsetHeight\n        }, pxRatio = container.retina.pixelRatio, retinaSize = {\n            width: newSize.width * pxRatio,\n            height: newSize.height * pxRatio\n        };\n        if (newSize.height === currentSize.height && newSize.width === currentSize.width && retinaSize.height === this.element.height && retinaSize.width === this.element.width) {\n            return false;\n        }\n        const oldSize = {\n            ...currentSize\n        };\n        currentSize.height = newSize.height;\n        currentSize.width = newSize.width;\n        const canvasSize = this.size;\n        this.element.width = canvasSize.width = retinaSize.width;\n        this.element.height = canvasSize.height = retinaSize.height;\n        if (this._container.started) {\n            container.particles.setResizeFactor({\n                width: currentSize.width / oldSize.width,\n                height: currentSize.height / oldSize.height\n            });\n        }\n        return true;\n    }\n    setPointerEvents(type) {\n        const element = this.element;\n        if (!element) {\n            return;\n        }\n        this._pointerEvents = type;\n        this._repairStyle();\n    }\n    setZoom(zoomLevel, center) {\n        this.zoom = zoomLevel;\n        this._zoomCenter = center;\n    }\n    stop() {\n        this._safeMutationObserver((obs)=>{\n            obs.disconnect();\n        });\n        this._mutationObserver = undefined;\n        this.render.stop();\n    }\n    async windowResize() {\n        if (!this.element || !this.resize()) {\n            return;\n        }\n        const container = this._container, needsRefresh = container.updateActualOptions();\n        container.particles.setDensity();\n        this._applyResizePlugins();\n        if (needsRefresh) {\n            await container.refresh();\n        }\n    }\n    _applyResizePlugins = ()=>{\n        for (const plugin of this._resizePlugins){\n            plugin.resize?.();\n        }\n    };\n    _initStyle = ()=>{\n        const element = this.element, options = this._container.actualOptions;\n        if (!element) {\n            return;\n        }\n        if (this._fullScreen) {\n            this._setFullScreenStyle();\n        } else {\n            this._resetOriginalStyle();\n        }\n        for(const key in options.style){\n            if (!key || !(key in options.style)) {\n                continue;\n            }\n            const value = options.style[key];\n            if (!value) {\n                continue;\n            }\n            element.style.setProperty(key, value, \"important\");\n        }\n    };\n    _repairStyle = ()=>{\n        const element = this.element;\n        if (!element) {\n            return;\n        }\n        this._safeMutationObserver((observer)=>{\n            observer.disconnect();\n        });\n        this._initStyle();\n        this.initBackground();\n        const pointerEvents = this._pointerEvents;\n        element.style.pointerEvents = pointerEvents;\n        element.setAttribute(\"pointer-events\", pointerEvents);\n        this._safeMutationObserver((observer)=>{\n            if (!(element instanceof Node)) {\n                return;\n            }\n            observer.observe(element, {\n                attributes: true\n            });\n        });\n    };\n    _resetOriginalStyle = ()=>{\n        const element = this.element, originalStyle = this._originalStyle;\n        if (!element || !originalStyle) {\n            return;\n        }\n        setStyle(element, originalStyle, true);\n    };\n    _safeMutationObserver = (callback)=>{\n        if (!this._mutationObserver) {\n            return;\n        }\n        callback(this._mutationObserver);\n    };\n    _setFullScreenStyle = ()=>{\n        const element = this.element;\n        if (!element) {\n            return;\n        }\n        setStyle(element, (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.getFullScreenStyle)(this._container.actualOptions.fullScreen.zIndex), true);\n    };\n}\n\n\n//# sourceURL=webpack://@tsparticles/all/../../engine/dist/browser/Core/CanvasManager.js?\n}");
 
 /***/ },
 
@@ -33,7 +33,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
   \***************************************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Container: () => (/* binding */ Container)\n/* harmony export */ });\n/* harmony import */ var _Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../Utils/MathUtils.js */ \"../../engine/dist/browser/Utils/MathUtils.js\");\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Utils/Constants.js */ \"../../engine/dist/browser/Core/Utils/Constants.js\");\n/* harmony import */ var _Canvas_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Canvas.js */ \"../../engine/dist/browser/Core/Canvas.js\");\n/* harmony import */ var _Utils_EventListeners_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Utils/EventListeners.js */ \"../../engine/dist/browser/Core/Utils/EventListeners.js\");\n/* harmony import */ var _Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Enums/Types/EventType.js */ \"../../engine/dist/browser/Enums/Types/EventType.js\");\n/* harmony import */ var _Options_Classes_Options_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Options/Classes/Options.js */ \"../../engine/dist/browser/Options/Classes/Options.js\");\n/* harmony import */ var _Particles_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./Particles.js */ \"../../engine/dist/browser/Core/Particles.js\");\n/* harmony import */ var _Retina_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./Retina.js */ \"../../engine/dist/browser/Core/Retina.js\");\n/* harmony import */ var _Utils_LogUtils_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../Utils/LogUtils.js */ \"../../engine/dist/browser/Utils/LogUtils.js\");\n/* harmony import */ var _Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../Utils/OptionsUtils.js */ \"../../engine/dist/browser/Utils/OptionsUtils.js\");\n\n\n\n\n\n\n\n\n\n\nfunction guardCheck(container) {\n  return !container.destroyed;\n}\nfunction updateDelta(delta, value, fpsLimit = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.defaultFps, smooth = false) {\n  delta.value = value;\n  delta.factor = smooth ? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.defaultFps / fpsLimit : _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.defaultFps * value / _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.millisecondsToSeconds;\n}\nfunction loadContainerOptions(engine, container, ...sourceOptionsArr) {\n  const options = new _Options_Classes_Options_js__WEBPACK_IMPORTED_MODULE_5__.Options(engine, container);\n  (0,_Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_9__.loadOptions)(options, ...sourceOptionsArr);\n  return options;\n}\nclass Container {\n  constructor(engine, id, sourceOptions) {\n    this._delta = {\n      value: 0,\n      factor: 0\n    };\n    this._nextFrame = timestamp => {\n      try {\n        if (!this._smooth && this._lastFrameTime !== undefined && timestamp < this._lastFrameTime + _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.millisecondsToSeconds / this.fpsLimit) {\n          this.draw(false);\n          return;\n        }\n        this._lastFrameTime ??= timestamp;\n        updateDelta(this._delta, timestamp - this._lastFrameTime, this.fpsLimit, this._smooth);\n        this.addLifeTime(this._delta.value);\n        this._lastFrameTime = timestamp;\n        if (this._delta.value > _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.millisecondsToSeconds) {\n          this.draw(false);\n          return;\n        }\n        this.canvas.drawParticles(this._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_LogUtils_js__WEBPACK_IMPORTED_MODULE_8__.getLogger)().error(\"error in animation loop\", e);\n      }\n    };\n    this._engine = engine;\n    this.id = Symbol(id);\n    this.fpsLimit = 120;\n    this.hdr = false;\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_7__.Retina(this);\n    this.canvas = new _Canvas_js__WEBPACK_IMPORTED_MODULE_2__.Canvas(this, this._engine);\n    this.particles = new _Particles_js__WEBPACK_IMPORTED_MODULE_6__.Particles(this._engine, this);\n    this.pathGenerators = new Map();\n    this.plugins = [];\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_3__.EventListeners(this);\n    this._engine.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__.EventType.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  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(remove = true) {\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.values()) {\n      effectDrawer.destroy?.(this);\n    }\n    this.effectDrawers.clear();\n    for (const shapeDrawer of this.shapeDrawers.values()) {\n      shapeDrawer.destroy?.(this);\n    }\n    this.shapeDrawers.clear();\n    for (const plugin of this.plugins) {\n      plugin.destroy?.();\n    }\n    this.plugins.length = 0;\n    this._engine.clearPlugins(this);\n    this.destroyed = true;\n    if (remove) {\n      const mainArr = this._engine.items,\n        idx = mainArr.indexOf(this);\n      if (idx >= _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.removeMinIndex) {\n        mainArr.splice(idx, _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.removeDeleteCount);\n      }\n    }\n    this._engine.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__.EventType.containerDestroyed, {\n      container: this\n    });\n  }\n  draw(force) {\n    if (!guardCheck(this)) {\n      return;\n    }\n    let refreshTime = force;\n    const frame = timestamp => {\n      if (refreshTime) {\n        this._lastFrameTime = undefined;\n        refreshTime = false;\n      }\n      this._nextFrame(timestamp);\n    };\n    this._drawAnimationFrame = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_0__.animate)(timestamp => {\n      frame(timestamp);\n    });\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_LogUtils_js__WEBPACK_IMPORTED_MODULE_8__.getLogger)().error(`Export plugin with type ${type} not found`);\n    return undefined;\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    const allContainerPlugins = new Map();\n    for (const plugin of this._engine.plugins) {\n      const containerPlugin = await plugin.getPlugin(this);\n      if (containerPlugin.preInit) {\n        await containerPlugin.preInit();\n      }\n      allContainerPlugins.set(plugin, containerPlugin);\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    for (const [plugin, containerPlugin] of allContainerPlugins) {\n      if (plugin.needsPlugin(this.actualOptions)) {\n        this.plugins.push(containerPlugin);\n      }\n    }\n    this.retina.init();\n    this.canvas.init();\n    this.updateActualOptions();\n    this.canvas.initBackground();\n    this.canvas.resize();\n    const {\n      delay,\n      duration,\n      fpsLimit,\n      hdr,\n      smooth,\n      zLayers\n    } = this.actualOptions;\n    this.hdr = hdr;\n    this.zLayers = zLayers;\n    this._duration = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(duration) * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.millisecondsToSeconds;\n    this._delay = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(delay) * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.millisecondsToSeconds;\n    this._lifeTime = 0;\n    this.fpsLimit = fpsLimit > _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.minFpsLimit ? fpsLimit : _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.defaultFpsLimit;\n    this._smooth = smooth;\n    for (const plugin of this.plugins) {\n      await plugin.init?.();\n    }\n    for (const drawer of this.effectDrawers.values()) {\n      await drawer.init?.(this);\n    }\n    for (const drawer of this.shapeDrawers.values()) {\n      await drawer.init?.(this);\n    }\n    this._engine.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__.EventType.containerInit, {\n      container: this\n    });\n    await this.particles.init();\n    this.particles.setDensity();\n    for (const plugin of this.plugins) {\n      plugin.particlesSetup?.();\n    }\n    this._engine.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__.EventType.particlesSetup, {\n      container: this\n    });\n  }\n  pause() {\n    if (!guardCheck(this)) {\n      return;\n    }\n    if (this._drawAnimationFrame !== undefined) {\n      (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_0__.cancelAnimation)(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(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__.EventType.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(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__.EventType.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(sourceOptions) {\n    if (!guardCheck(this)) {\n      return;\n    }\n    this._initialSourceOptions = sourceOptions;\n    this._sourceOptions = sourceOptions;\n    this._options = loadContainerOptions(this._engine, this, this._initialSourceOptions, this.sourceOptions);\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        for (const plugin of this.plugins) {\n          await plugin.start?.();\n        }\n        this._engine.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__.EventType.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    for (const plugin of this.plugins) {\n      plugin.stop?.();\n    }\n    this.plugins.length = 0;\n    this._sourceOptions = this._options;\n    this._engine.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__.EventType.containerStopped, {\n      container: this\n    });\n  }\n  updateActualOptions() {\n    let refresh = false;\n    for (const plugin of this.plugins) {\n      if (plugin.updateActualOptions) {\n        refresh = plugin.updateActualOptions() || refresh;\n      }\n    }\n    return refresh;\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/all/../../engine/dist/browser/Core/Container.js?\n}");
+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_MathUtils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../Utils/MathUtils.js */ \"../../engine/dist/browser/Utils/MathUtils.js\");\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Utils/Constants.js */ \"../../engine/dist/browser/Core/Utils/Constants.js\");\n/* harmony import */ var _CanvasManager_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./CanvasManager.js */ \"../../engine/dist/browser/Core/CanvasManager.js\");\n/* harmony import */ var _Utils_EventListeners_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Utils/EventListeners.js */ \"../../engine/dist/browser/Core/Utils/EventListeners.js\");\n/* harmony import */ var _Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Enums/Types/EventType.js */ \"../../engine/dist/browser/Enums/Types/EventType.js\");\n/* harmony import */ var _Options_Classes_Options_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Options/Classes/Options.js */ \"../../engine/dist/browser/Options/Classes/Options.js\");\n/* harmony import */ var _ParticlesManager_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./ParticlesManager.js */ \"../../engine/dist/browser/Core/ParticlesManager.js\");\n/* harmony import */ var _Retina_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./Retina.js */ \"../../engine/dist/browser/Core/Retina.js\");\n/* harmony import */ var _Utils_LogUtils_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../Utils/LogUtils.js */ \"../../engine/dist/browser/Utils/LogUtils.js\");\n/* harmony import */ var _Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../Utils/OptionsUtils.js */ \"../../engine/dist/browser/Utils/OptionsUtils.js\");\n\n\n\n\n\n\n\n\n\n\nfunction guardCheck(container) {\n    return !container.destroyed;\n}\nfunction updateDelta(delta, value, fpsLimit = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.defaultFps, smooth = false) {\n    delta.value = value;\n    delta.factor = smooth ? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.defaultFps / fpsLimit : _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.defaultFps * value / _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.millisecondsToSeconds;\n}\nfunction loadContainerOptions(pluginManager, container, ...sourceOptionsArr) {\n    const options = new _Options_Classes_Options_js__WEBPACK_IMPORTED_MODULE_5__.Options(pluginManager, container);\n    (0,_Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_9__.loadOptions)(options, ...sourceOptionsArr);\n    return options;\n}\nclass Container {\n    actualOptions;\n    canvas;\n    destroyed;\n    effectDrawers;\n    fpsLimit;\n    hdr;\n    id;\n    pageHidden;\n    particleCreatedPlugins;\n    particleDestroyedPlugins;\n    particlePositionPlugins;\n    particleUpdaters;\n    particles;\n    plugins;\n    retina;\n    shapeDrawers;\n    started;\n    zLayers;\n    _delay;\n    _delayTimeout;\n    _delta = {\n        value: 0,\n        factor: 0\n    };\n    _dispatchCallback;\n    _drawAnimationFrame;\n    _duration;\n    _eventListeners;\n    _firstStart;\n    _initialSourceOptions;\n    _lastFrameTime;\n    _lifeTime;\n    _onDestroy;\n    _options;\n    _paused;\n    _pluginManager;\n    _smooth;\n    _sourceOptions;\n    constructor(params){\n        const { dispatchCallback, pluginManager, id, onDestroy, sourceOptions } = params;\n        this._pluginManager = pluginManager;\n        this._dispatchCallback = dispatchCallback;\n        this._onDestroy = onDestroy;\n        this.id = Symbol(id);\n        this.fpsLimit = 120;\n        this.hdr = false;\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.effectDrawers = new Map();\n        this.shapeDrawers = new Map();\n        this.particleUpdaters = [];\n        this.retina = new _Retina_js__WEBPACK_IMPORTED_MODULE_7__.Retina(this);\n        this.canvas = new _CanvasManager_js__WEBPACK_IMPORTED_MODULE_2__.CanvasManager(this._pluginManager, this);\n        this.particles = new _ParticlesManager_js__WEBPACK_IMPORTED_MODULE_6__.ParticlesManager(this._pluginManager, this);\n        this.plugins = [];\n        this.particleDestroyedPlugins = [];\n        this.particleCreatedPlugins = [];\n        this.particlePositionPlugins = [];\n        this._options = loadContainerOptions(this._pluginManager, this);\n        this.actualOptions = loadContainerOptions(this._pluginManager, this);\n        this._eventListeners = new _Utils_EventListeners_js__WEBPACK_IMPORTED_MODULE_3__.EventListeners(this);\n        this.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__.EventType.containerBuilt);\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    addLifeTime(value) {\n        this._lifeTime += value;\n    }\n    alive() {\n        return !this._duration || this._lifeTime <= this._duration;\n    }\n    destroy(remove = true) {\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 plugin of this.plugins){\n            plugin.destroy?.();\n        }\n        this.effectDrawers = new Map();\n        this.shapeDrawers = new Map();\n        this.particleUpdaters = [];\n        this.plugins.length = 0;\n        this._pluginManager.clearPlugins(this);\n        this.destroyed = true;\n        this._onDestroy(remove);\n        this.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__.EventType.containerDestroyed);\n    }\n    dispatchEvent(type, data) {\n        this._dispatchCallback(type, {\n            container: this,\n            data\n        });\n    }\n    draw(force) {\n        if (!guardCheck(this)) {\n            return;\n        }\n        let refreshTime = force;\n        this._drawAnimationFrame = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_0__.animate)((timestamp)=>{\n            if (refreshTime) {\n                this._lastFrameTime = undefined;\n                refreshTime = false;\n            }\n            this._nextFrame(timestamp);\n        });\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_LogUtils_js__WEBPACK_IMPORTED_MODULE_8__.getLogger)().error(`Export plugin with type ${type} not found`);\n        return undefined;\n    }\n    async init() {\n        if (!guardCheck(this)) {\n            return;\n        }\n        const allContainerPlugins = new Map();\n        for (const plugin of this._pluginManager.plugins){\n            const containerPlugin = await plugin.getPlugin(this);\n            if (containerPlugin.preInit) {\n                await containerPlugin.preInit();\n            }\n            allContainerPlugins.set(plugin, containerPlugin);\n        }\n        await this.initDrawersAndUpdaters();\n        this._options = loadContainerOptions(this._pluginManager, this, this._initialSourceOptions, this.sourceOptions);\n        this.actualOptions = loadContainerOptions(this._pluginManager, this, this._options);\n        this.plugins.length = 0;\n        this.particleDestroyedPlugins.length = 0;\n        this.particleCreatedPlugins.length = 0;\n        this.particlePositionPlugins.length = 0;\n        for (const [plugin, containerPlugin] of allContainerPlugins){\n            if (plugin.needsPlugin(this.actualOptions)) {\n                this.plugins.push(containerPlugin);\n                if (containerPlugin.particleCreated) {\n                    this.particleCreatedPlugins.push(containerPlugin);\n                }\n                if (containerPlugin.particleDestroyed) {\n                    this.particleDestroyedPlugins.push(containerPlugin);\n                }\n                if (containerPlugin.particlePosition) {\n                    this.particlePositionPlugins.push(containerPlugin);\n                }\n            }\n        }\n        this.retina.init();\n        this.canvas.init();\n        this.updateActualOptions();\n        this.canvas.initBackground();\n        this.canvas.resize();\n        const { delay, duration, fpsLimit, hdr, smooth, zLayers } = this.actualOptions;\n        this.hdr = hdr;\n        this.zLayers = zLayers;\n        this._duration = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(duration) * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.millisecondsToSeconds;\n        this._delay = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(delay) * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.millisecondsToSeconds;\n        this._lifeTime = 0;\n        this.fpsLimit = fpsLimit > _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.minFpsLimit ? fpsLimit : _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.defaultFpsLimit;\n        this._smooth = smooth;\n        for (const plugin of this.plugins){\n            await plugin.init?.();\n        }\n        await this.particles.init();\n        this.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__.EventType.containerInit);\n        this.particles.setDensity();\n        for (const plugin of this.plugins){\n            plugin.particlesSetup?.();\n        }\n        this.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__.EventType.particlesSetup);\n    }\n    async initDrawersAndUpdaters() {\n        const pluginManager = this._pluginManager;\n        this.effectDrawers = await pluginManager.getEffectDrawers(this, true);\n        this.shapeDrawers = await pluginManager.getShapeDrawers(this, true);\n        this.particleUpdaters = await pluginManager.getUpdaters(this, true);\n    }\n    pause() {\n        if (!guardCheck(this)) {\n            return;\n        }\n        if (this._drawAnimationFrame !== undefined) {\n            (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_0__.cancelAnimation)(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.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__.EventType.containerPaused);\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.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__.EventType.containerPlay);\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(sourceOptions) {\n        if (!guardCheck(this)) {\n            return;\n        }\n        this._initialSourceOptions = sourceOptions;\n        this._sourceOptions = sourceOptions;\n        this._options = loadContainerOptions(this._pluginManager, this, this._initialSourceOptions, this.sourceOptions);\n        this.actualOptions = loadContainerOptions(this._pluginManager, 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                for (const plugin of this.plugins){\n                    await plugin.start?.();\n                }\n                this.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__.EventType.containerStarted);\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        for (const plugin of this.plugins){\n            plugin.stop?.();\n        }\n        this.particleCreatedPlugins.length = 0;\n        this.particleDestroyedPlugins.length = 0;\n        this.particlePositionPlugins.length = 0;\n        this._sourceOptions = this._options;\n        this.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__.EventType.containerStopped);\n    }\n    updateActualOptions() {\n        let refresh = false;\n        for (const plugin of this.plugins){\n            if (plugin.updateActualOptions) {\n                refresh = plugin.updateActualOptions() || refresh;\n            }\n        }\n        return refresh;\n    }\n    _nextFrame = (timestamp)=>{\n        try {\n            if (!this._smooth && this._lastFrameTime !== undefined && timestamp < this._lastFrameTime + _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.millisecondsToSeconds / this.fpsLimit) {\n                this.draw(false);\n                return;\n            }\n            this._lastFrameTime ??= timestamp;\n            updateDelta(this._delta, timestamp - this._lastFrameTime, this.fpsLimit, this._smooth);\n            this.addLifeTime(this._delta.value);\n            this._lastFrameTime = timestamp;\n            if (this._delta.value > _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.millisecondsToSeconds) {\n                this.draw(false);\n                return;\n            }\n            this.canvas.render.drawParticles(this._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_LogUtils_js__WEBPACK_IMPORTED_MODULE_8__.getLogger)().error(\"error in animation loop\", e);\n        }\n    };\n}\n\n\n//# sourceURL=webpack://@tsparticles/all/../../engine/dist/browser/Core/Container.js?\n}");
 
 /***/ },
 
@@ -43,17 +43,27 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
   \**************************************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Particle: () => (/* binding */ Particle)\n/* harmony export */ });\n/* harmony import */ var _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Utils/Vectors.js */ \"../../engine/dist/browser/Core/Utils/Vectors.js\");\n/* harmony import */ var _Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Utils/MathUtils.js */ \"../../engine/dist/browser/Utils/MathUtils.js\");\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Utils/Constants.js */ \"../../engine/dist/browser/Core/Utils/Constants.js\");\n/* harmony import */ var _Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Utils/Utils.js */ \"../../engine/dist/browser/Utils/Utils.js\");\n/* harmony import */ var _Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Enums/Types/EventType.js */ \"../../engine/dist/browser/Enums/Types/EventType.js\");\n/* harmony import */ var _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Enums/Directions/MoveDirection.js */ \"../../engine/dist/browser/Enums/Directions/MoveDirection.js\");\n/* harmony import */ var _Enums_Modes_OutMode_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Enums/Modes/OutMode.js */ \"../../engine/dist/browser/Enums/Modes/OutMode.js\");\n/* harmony import */ var _Enums_Types_ParticleOutType_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Enums/Types/ParticleOutType.js */ \"../../engine/dist/browser/Enums/Types/ParticleOutType.js\");\n/* harmony import */ var _Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../Utils/CanvasUtils.js */ \"../../engine/dist/browser/Utils/CanvasUtils.js\");\n/* harmony import */ var _Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../Utils/ColorUtils.js */ \"../../engine/dist/browser/Utils/ColorUtils.js\");\n/* harmony import */ var _Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../Utils/OptionsUtils.js */ \"../../engine/dist/browser/Utils/OptionsUtils.js\");\n\n\n\n\n\n\n\n\n\n\n\nfunction loadEffectData(effect, effectOptions, id, reduceDuplicates) {\n  const effectData = effectOptions.options[effect];\n  return (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.deepExtend)({\n    close: effectOptions.close,\n    fill: effectOptions.fill\n  }, (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.itemFromSingleOrMultiple)(effectData, id, reduceDuplicates));\n}\nfunction loadShapeData(shape, shapeOptions, id, reduceDuplicates) {\n  const shapeData = shapeOptions.options[shape];\n  return (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.deepExtend)({\n    close: shapeOptions.close,\n    fill: shapeOptions.fill\n  }, (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.itemFromSingleOrMultiple)(shapeData, id, reduceDuplicates));\n}\nfunction fixOutMode(data) {\n  if (!(0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.isInArray)(data.outMode, data.checkModes)) {\n    return;\n  }\n  const diameter = data.radius * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.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._cachedOpacityData = {\n      opacity: _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultOpacity,\n      strokeOpacity: _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultOpacity\n    };\n    this._cachedPosition = _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector3d.origin;\n    this._cachedRotateData = {\n      sin: 0,\n      cos: 0\n    };\n    this._cachedTransform = {\n      a: 1,\n      b: 0,\n      c: 0,\n      d: 1\n    };\n    this._calcPosition = (position, zIndex) => {\n      let tryCount = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultRetryCount,\n        posVec = position ? _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector3d.create(position.x, position.y, zIndex) : undefined;\n      const container = this.container,\n        plugins = Array.from(container.plugins),\n        outModes = this.options.move.outModes,\n        radius = this.getRadius(),\n        canvasSize = container.canvas.size,\n        abortController = new AbortController(),\n        {\n          signal\n        } = abortController;\n      while (!signal.aborted) {\n        for (const plugin of plugins) {\n          const pluginPos = plugin.particlePosition?.(posVec, this);\n          if (pluginPos) {\n            return _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector3d.create(pluginPos.x, pluginPos.y, zIndex);\n          }\n        }\n        const exactPosition = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.calcExactPositionOrRandomFromSize)({\n            size: canvasSize,\n            position: posVec\n          }),\n          pos = _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector3d.create(exactPosition.x, exactPosition.y, zIndex);\n        this._fixHorizontal(pos, radius, outModes.left ?? outModes.default);\n        this._fixHorizontal(pos, radius, outModes.right ?? outModes.default);\n        this._fixVertical(pos, radius, outModes.top ?? outModes.default);\n        this._fixVertical(pos, radius, outModes.bottom ?? outModes.default);\n        let isValidPosition = true;\n        for (const plugin of plugins) {\n          isValidPosition = plugin.checkParticlePosition?.(this, pos, tryCount) ?? true;\n          if (!isValidPosition) {\n            break;\n          }\n        }\n        if (isValidPosition) {\n          return pos;\n        }\n        tryCount += _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.tryCountIncrement;\n        posVec = undefined;\n      }\n      return posVec;\n    };\n    this._calculateVelocity = () => {\n      const baseVelocity = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getParticleBaseVelocity)(this.direction),\n        res = baseVelocity.copy(),\n        moveOptions = this.options.move;\n      if (moveOptions.direction === _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_5__.MoveDirection.inside || moveOptions.direction === _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_5__.MoveDirection.outside) {\n        return res;\n      }\n      const rad = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.degToRad)((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(moveOptions.angle.value)),\n        radOffset = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.degToRad)((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(moveOptions.angle.offset)),\n        range = {\n          left: radOffset - rad * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.half,\n          right: radOffset + rad * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.half\n        };\n      if (!moveOptions.straight) {\n        res.angle += (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.randomInRangeValue)((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.setRangeValue)(range.left, range.right));\n      }\n      if (moveOptions.random && typeof moveOptions.speed === \"number\") {\n        res.length *= (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRandom)();\n      }\n      return res;\n    };\n    this._fixHorizontal = (pos, radius, outMode) => {\n      fixOutMode({\n        outMode,\n        checkModes: [_Enums_Modes_OutMode_js__WEBPACK_IMPORTED_MODULE_6__.OutMode.bounce],\n        coord: pos.x,\n        maxCoord: this.container.canvas.size.width,\n        setCb: value => pos.x += value,\n        radius\n      });\n    };\n    this._fixVertical = (pos, radius, outMode) => {\n      fixOutMode({\n        outMode,\n        checkModes: [_Enums_Modes_OutMode_js__WEBPACK_IMPORTED_MODULE_6__.OutMode.bounce],\n        coord: pos.y,\n        maxCoord: this.container.canvas.size.height,\n        setCb: value => pos.y += value,\n        radius\n      });\n    };\n    this._getRollColor = color => {\n      if (!color || !this.roll || !this.backColor && !this.roll.alter) {\n        return color;\n      }\n      if (!this.isShowingBack()) {\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_8__.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_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(this.options.zIndex.value);\n      const initialPosition = this._calcPosition(position, (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.clamp)(zIndexValue, _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.minZ, container.zLayers));\n      if (!initialPosition) {\n        throw new Error(\"a valid position cannot be found for particle\");\n      }\n      this.position = initialPosition;\n      this.initialPosition = this.position.copy();\n      const canvasSize = container.canvas.size;\n      this.moveCenter = {\n        ...(0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.getPosition)(this.options.move.center, canvasSize),\n        radius: this.options.move.center.radius,\n        mode: this.options.move.center.mode\n      };\n      this.direction = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getParticleDirectionAngle)(this.options.move.direction, this.position, this.moveCenter);\n      switch (this.options.move.direction) {\n        case _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_5__.MoveDirection.inside:\n          this.outType = _Enums_Types_ParticleOutType_js__WEBPACK_IMPORTED_MODULE_7__.ParticleOutType.inside;\n          break;\n        case _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_5__.MoveDirection.outside:\n          this.outType = _Enums_Types_ParticleOutType_js__WEBPACK_IMPORTED_MODULE_7__.ParticleOutType.outside;\n          break;\n      }\n      this.offset = _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.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 = this.shape ? container.shapeDrawers.get(this.shape) : undefined;\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(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__.EventType.particleDestroyed, {\n      container: this.container,\n      data: {\n        particle: this\n      }\n    });\n  }\n  draw(delta) {\n    const container = this.container,\n      canvas = container.canvas;\n    for (const plugin of container.plugins) {\n      canvas.drawParticlePlugin(plugin, this, delta);\n    }\n    canvas.drawParticle(this, delta);\n  }\n  getAngle() {\n    return this.rotation + (this.pathRotation ? this.velocity.angle : _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultAngle);\n  }\n  getFillColor() {\n    return this._getRollColor(this.bubble.color ?? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_9__.getHslFromAnimation)(this.color));\n  }\n  getMass() {\n    return this.getRadius() ** _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.squareExp * Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.half;\n  }\n  getOpacity() {\n    const zIndexOptions = this.options.zIndex,\n      zIndexFactor = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.zIndexFactorOffset - this.zIndexFactor,\n      zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate,\n      opacity = this.bubble.opacity ?? (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(this.opacity?.value ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultOpacity),\n      strokeOpacity = this.strokeOpacity ?? opacity;\n    this._cachedOpacityData.opacity = opacity * zOpacityFactor;\n    this._cachedOpacityData.strokeOpacity = strokeOpacity * zOpacityFactor;\n    return this._cachedOpacityData;\n  }\n  getPosition() {\n    this._cachedPosition.x = this.position.x + this.offset.x;\n    this._cachedPosition.y = this.position.y + this.offset.y;\n    this._cachedPosition.z = this.position.z;\n    return this._cachedPosition;\n  }\n  getRadius() {\n    return this.bubble.radius ?? this.size.value;\n  }\n  getRotateData() {\n    const angle = this.getAngle();\n    this._cachedRotateData.sin = Math.sin(angle);\n    this._cachedRotateData.cos = Math.cos(angle);\n    return this._cachedRotateData;\n  }\n  getStrokeColor() {\n    return this._getRollColor(this.bubble.color ?? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_9__.getHslFromAnimation)(this.strokeColor));\n  }\n  getTransformData(externalTransform) {\n    const rotateData = this.getRotateData(),\n      rotating = this.isRotating;\n    this._cachedTransform.a = rotateData.cos * (externalTransform.a ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultTransform.a);\n    this._cachedTransform.b = rotating ? rotateData.sin * (externalTransform.b ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.identity) : externalTransform.b ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultTransform.b;\n    this._cachedTransform.c = rotating ? -rotateData.sin * (externalTransform.c ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.identity) : externalTransform.c ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultTransform.c;\n    this._cachedTransform.d = rotateData.cos * (externalTransform.d ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultTransform.d);\n    return this._cachedTransform;\n  }\n  init(id, position, overrideOptions, group) {\n    const container = this.container;\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.isRotating = false;\n    this.rotation = 0;\n    this.misplaced = false;\n    this.retina = {\n      maxDistance: {}\n    };\n    this.outType = _Enums_Types_ParticleOutType_js__WEBPACK_IMPORTED_MODULE_7__.ParticleOutType.normal;\n    this.ignoresResizeRatio = true;\n    const pxRatio = container.retina.pixelRatio,\n      mainOptions = container.actualOptions,\n      particlesOptions = (0,_Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_10__.loadParticlesOptions)(this._engine, container, mainOptions.particles),\n      reduceDuplicates = particlesOptions.reduceDuplicates,\n      effectType = particlesOptions.effect.type,\n      shapeType = particlesOptions.shape.type;\n    this.effect = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.itemFromSingleOrMultiple)(effectType, this.id, reduceDuplicates);\n    this.shape = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.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_3__.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_3__.itemFromSingleOrMultiple)(overrideShapeType, this.id, reduceDuplicates);\n        if (shape) {\n          this.shape = shape;\n          shapeOptions.load(overrideOptions.shape);\n        }\n      }\n    }\n    if (this.effect === _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.randomColorValue) {\n      const availableEffects = [...this.container.effectDrawers.keys()];\n      this.effect = availableEffects[Math.floor((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRandom)() * availableEffects.length)];\n    }\n    if (this.shape === _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.randomColorValue) {\n      const availableShapes = [...this.container.shapeDrawers.keys()];\n      this.shape = availableShapes[Math.floor((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRandom)() * availableShapes.length)];\n    }\n    this.effectData = this.effect ? loadEffectData(this.effect, effectOptions, this.id, reduceDuplicates) : undefined;\n    this.shapeData = this.shape ? loadShapeData(this.shape, shapeOptions, this.id, reduceDuplicates) : undefined;\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    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_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(pathOptions.delay.value) * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.millisecondsToSeconds;\n    if (pathOptions.generator) {\n      this.pathGenerator = this._engine.getPathGenerator(pathOptions.generator);\n      if (this.pathGenerator && container.addPath(pathOptions.generator, this.pathGenerator)) {\n        this.pathGenerator.init(container);\n      }\n    }\n    container.retina.initParticle(this);\n    this.size = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.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    this.moveDecay = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.decayOffset - (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.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, shapeDrawer;\n    if (this.effect) {\n      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    }\n    if (effectDrawer?.loadEffect) {\n      effectDrawer.loadEffect(this);\n    }\n    if (this.shape) {\n      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    }\n    if (shapeDrawer?.loadShape) {\n      shapeDrawer.loadShape(this);\n    }\n    const sideCountFunc = shapeDrawer?.getSidesCount;\n    if (sideCountFunc) {\n      this.sides = sideCountFunc(this);\n    }\n    this.spawning = false;\n    for (const updater of particles.updaters) {\n      updater.init(this);\n    }\n    for (const mover of particles.movers) {\n      mover.init(this);\n    }\n    effectDrawer?.particleInit?.(container, this);\n    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  isShowingBack() {\n    if (!this.roll) {\n      return false;\n    }\n    const angle = this.roll.angle;\n    if (this.roll.horizontal && this.roll.vertical) {\n      const normalizedAngle = angle % _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.doublePI,\n        adjustedAngle = normalizedAngle < _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultAngle ? normalizedAngle + _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.doublePI : normalizedAngle;\n      return adjustedAngle >= Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.half && adjustedAngle < Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.triple * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.half;\n    }\n    if (this.roll.horizontal) {\n      const normalizedAngle = (angle + Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.half) % (Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.double),\n        adjustedAngle = normalizedAngle < _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultAngle ? normalizedAngle + Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.double : normalizedAngle;\n      return adjustedAngle >= Math.PI && adjustedAngle < Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.double;\n    }\n    if (this.roll.vertical) {\n      const normalizedAngle = angle % (Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.double),\n        adjustedAngle = normalizedAngle < _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultAngle ? normalizedAngle + Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.double : normalizedAngle;\n      return adjustedAngle >= Math.PI && adjustedAngle < Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.double;\n    }\n    return false;\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/all/../../engine/dist/browser/Core/Particle.js?\n}");
+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_0__ = __webpack_require__(/*! ./Utils/Vectors.js */ \"../../engine/dist/browser/Core/Utils/Vectors.js\");\n/* harmony import */ var _Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Utils/ColorUtils.js */ \"../../engine/dist/browser/Utils/ColorUtils.js\");\n/* harmony import */ var _Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Utils/MathUtils.js */ \"../../engine/dist/browser/Utils/MathUtils.js\");\n/* harmony import */ var _Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Utils/Utils.js */ \"../../engine/dist/browser/Utils/Utils.js\");\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Utils/Constants.js */ \"../../engine/dist/browser/Core/Utils/Constants.js\");\n/* harmony import */ var _Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Enums/Types/EventType.js */ \"../../engine/dist/browser/Enums/Types/EventType.js\");\n/* harmony import */ var _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Enums/Directions/MoveDirection.js */ \"../../engine/dist/browser/Enums/Directions/MoveDirection.js\");\n/* harmony import */ var _Enums_Modes_OutMode_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Enums/Modes/OutMode.js */ \"../../engine/dist/browser/Enums/Modes/OutMode.js\");\n/* harmony import */ var _Enums_Types_ParticleOutType_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../Enums/Types/ParticleOutType.js */ \"../../engine/dist/browser/Enums/Types/ParticleOutType.js\");\n/* harmony import */ var _Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../Utils/OptionsUtils.js */ \"../../engine/dist/browser/Utils/OptionsUtils.js\");\n\n\n\n\n\n\n\n\n\n\nfunction loadEffectData(effect, effectOptions, id, reduceDuplicates) {\n    const effectData = effectOptions.options[effect];\n    return (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.deepExtend)({\n        close: effectOptions.close\n    }, (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.itemFromSingleOrMultiple)(effectData, id, reduceDuplicates));\n}\nfunction loadShapeData(shape, shapeOptions, id, reduceDuplicates) {\n    const shapeData = shapeOptions.options[shape];\n    return (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.deepExtend)({\n        close: shapeOptions.close\n    }, (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.itemFromSingleOrMultiple)(shapeData, id, reduceDuplicates));\n}\nfunction fixOutMode(data) {\n    if (!(0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.isInArray)(data.outMode, data.checkModes)) {\n        return;\n    }\n    const diameter = data.radius * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.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    backColor;\n    bubble;\n    destroyed;\n    direction;\n    effect;\n    effectClose;\n    effectData;\n    fillColor;\n    fillEnabled;\n    fillOpacity;\n    group;\n    id;\n    ignoresResizeRatio;\n    initialPosition;\n    initialVelocity;\n    isRotating;\n    lastPathTime;\n    misplaced;\n    moveCenter;\n    offset;\n    opacity;\n    options;\n    outType;\n    pathRotation;\n    position;\n    randomIndexData;\n    retina;\n    roll;\n    rotation;\n    shape;\n    shapeClose;\n    shapeData;\n    sides;\n    size;\n    slow;\n    spawning;\n    strokeColor;\n    strokeOpacity;\n    strokeWidth;\n    unbreakable;\n    velocity;\n    zIndexFactor;\n    _cachedOpacityData = {\n        fillOpacity: _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultOpacity,\n        opacity: _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultOpacity,\n        strokeOpacity: _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultOpacity\n    };\n    _cachedPosition = _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector3d.origin;\n    _cachedRotateData = {\n        sin: 0,\n        cos: 0\n    };\n    _cachedTransform = {\n        a: 1,\n        b: 0,\n        c: 0,\n        d: 1\n    };\n    _container;\n    _pluginManager;\n    constructor(pluginManager, container){\n        this._pluginManager = pluginManager;\n        this._container = container;\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, shapeDrawer = this.shape ? container.shapeDrawers.get(this.shape) : undefined;\n        shapeDrawer?.particleDestroy?.(this);\n        for (const plugin of container.particleDestroyedPlugins){\n            plugin.particleDestroyed?.(this, override);\n        }\n        for (const updater of container.particleUpdaters){\n            updater.particleDestroyed?.(this, override);\n        }\n        this._container.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_5__.EventType.particleDestroyed, {\n            particle: this\n        });\n    }\n    draw(delta) {\n        const container = this._container, render = container.canvas.render;\n        render.drawParticlePlugins(this, delta);\n        render.drawParticle(this, delta);\n    }\n    getAngle() {\n        return this.rotation + (this.pathRotation ? this.velocity.angle : _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultAngle);\n    }\n    getFillColor() {\n        return this._getRollColor(this.bubble.color ?? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_1__.getHslFromAnimation)(this.fillColor));\n    }\n    getMass() {\n        return this.getRadius() ** _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.squareExp * Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.half;\n    }\n    getOpacity() {\n        const zIndexOptions = this.options.zIndex, zIndexFactor = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.zIndexFactorOffset - this.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, opacity = this.bubble.opacity ?? (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRangeValue)(this.opacity?.value ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultOpacity), fillOpacity = this.fillOpacity ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultOpacity, strokeOpacity = this.strokeOpacity ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultOpacity;\n        this._cachedOpacityData.fillOpacity = opacity * fillOpacity * zOpacityFactor;\n        this._cachedOpacityData.opacity = opacity * zOpacityFactor;\n        this._cachedOpacityData.strokeOpacity = opacity * strokeOpacity * zOpacityFactor;\n        return this._cachedOpacityData;\n    }\n    getPosition() {\n        this._cachedPosition.x = this.position.x + this.offset.x;\n        this._cachedPosition.y = this.position.y + this.offset.y;\n        this._cachedPosition.z = this.position.z;\n        return this._cachedPosition;\n    }\n    getRadius() {\n        return this.bubble.radius ?? this.size.value;\n    }\n    getRotateData() {\n        const angle = this.getAngle();\n        this._cachedRotateData.sin = Math.sin(angle);\n        this._cachedRotateData.cos = Math.cos(angle);\n        return this._cachedRotateData;\n    }\n    getStrokeColor() {\n        return this._getRollColor(this.bubble.color ?? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_1__.getHslFromAnimation)(this.strokeColor));\n    }\n    getTransformData(externalTransform) {\n        const rotateData = this.getRotateData(), rotating = this.isRotating;\n        this._cachedTransform.a = rotateData.cos * (externalTransform.a ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultTransform.a);\n        this._cachedTransform.b = rotating ? rotateData.sin * (externalTransform.b ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.identity) : externalTransform.b ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultTransform.b;\n        this._cachedTransform.c = rotating ? -rotateData.sin * (externalTransform.c ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.identity) : externalTransform.c ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultTransform.c;\n        this._cachedTransform.d = rotateData.cos * (externalTransform.d ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultTransform.d);\n        return this._cachedTransform;\n    }\n    init(id, position, overrideOptions, group) {\n        const container = this._container;\n        this.id = id;\n        this.group = group;\n        this.effectClose = true;\n        this.shapeClose = true;\n        this.pathRotation = false;\n        this.lastPathTime = 0;\n        this.destroyed = false;\n        this.unbreakable = false;\n        this.isRotating = false;\n        this.rotation = 0;\n        this.misplaced = false;\n        this.retina = {\n            maxDistance: {},\n            maxSpeed: 0,\n            moveDrift: 0,\n            moveSpeed: 0,\n            sizeAnimationSpeed: 0\n        };\n        this.outType = _Enums_Types_ParticleOutType_js__WEBPACK_IMPORTED_MODULE_8__.ParticleOutType.normal;\n        this.ignoresResizeRatio = true;\n        const pxRatio = container.retina.pixelRatio, mainOptions = container.actualOptions, particlesOptions = (0,_Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_9__.loadParticlesOptions)(this._pluginManager, container, mainOptions.particles), reduceDuplicates = particlesOptions.reduceDuplicates, effectType = particlesOptions.effect.type, shapeType = particlesOptions.shape.type;\n        this.effect = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.itemFromSingleOrMultiple)(effectType, this.id, reduceDuplicates);\n        this.shape = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.itemFromSingleOrMultiple)(shapeType, this.id, reduceDuplicates);\n        const effectOptions = particlesOptions.effect, shapeOptions = particlesOptions.shape;\n        if (overrideOptions) {\n            if (overrideOptions.effect?.type) {\n                const overrideEffectType = overrideOptions.effect.type, effect = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.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, shape = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.itemFromSingleOrMultiple)(overrideShapeType, this.id, reduceDuplicates);\n                if (shape) {\n                    this.shape = shape;\n                    shapeOptions.load(overrideOptions.shape);\n                }\n            }\n        }\n        if (this.effect === _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.randomColorValue) {\n            const availableEffects = [\n                ...this._container.effectDrawers.keys()\n            ];\n            this.effect = availableEffects[Math.floor((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRandom)() * availableEffects.length)];\n        }\n        if (this.shape === _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.randomColorValue) {\n            const availableShapes = [\n                ...this._container.shapeDrawers.keys()\n            ];\n            this.shape = availableShapes[Math.floor((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRandom)() * availableShapes.length)];\n        }\n        this.effectData = this.effect ? loadEffectData(this.effect, effectOptions, this.id, reduceDuplicates) : undefined;\n        this.shapeData = this.shape ? loadShapeData(this.shape, shapeOptions, this.id, reduceDuplicates) : undefined;\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        this.effectClose = effectData?.close ?? particlesOptions.effect.close;\n        this.shapeClose = shapeData?.close ?? particlesOptions.shape.close;\n        this.options = particlesOptions;\n        container.retina.initParticle(this);\n        this.size = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.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 particles = container.particles;\n        particles.setLastZIndex(this.position.z);\n        this.zIndexFactor = this.position.z / container.zLayers;\n        this.sides = 24;\n        let effectDrawer, shapeDrawer;\n        if (this.effect) {\n            effectDrawer = container.effectDrawers.get(this.effect);\n        }\n        if (effectDrawer?.loadEffect) {\n            effectDrawer.loadEffect(this);\n        }\n        if (this.shape) {\n            shapeDrawer = container.shapeDrawers.get(this.shape);\n        }\n        if (shapeDrawer?.loadShape) {\n            shapeDrawer.loadShape(this);\n        }\n        const sideCountFunc = shapeDrawer?.getSidesCount;\n        if (sideCountFunc) {\n            this.sides = sideCountFunc(this);\n        }\n        this.spawning = false;\n        for (const updater of container.particleUpdaters){\n            updater.init(this);\n        }\n        effectDrawer?.particleInit?.(container, this);\n        shapeDrawer?.particleInit?.(container, this);\n        for (const plugin of container.particleCreatedPlugins){\n            plugin.particleCreated?.(this);\n        }\n    }\n    isInsideCanvas() {\n        const radius = this.getRadius(), canvasSize = this._container.canvas.size, position = this.position;\n        return position.x >= -radius && position.y >= -radius && position.y <= canvasSize.height + radius && position.x <= canvasSize.width + radius;\n    }\n    isShowingBack() {\n        if (!this.roll) {\n            return false;\n        }\n        const angle = this.roll.angle;\n        if (this.roll.horizontal && this.roll.vertical) {\n            const normalizedAngle = angle % _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.doublePI, adjustedAngle = normalizedAngle < _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultAngle ? normalizedAngle + _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.doublePI : normalizedAngle;\n            return adjustedAngle >= Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.half && adjustedAngle < Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.triple * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.half;\n        }\n        if (this.roll.horizontal) {\n            const normalizedAngle = (angle + Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.half) % (Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.double), adjustedAngle = normalizedAngle < _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultAngle ? normalizedAngle + Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.double : normalizedAngle;\n            return adjustedAngle >= Math.PI && adjustedAngle < Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.double;\n        }\n        if (this.roll.vertical) {\n            const normalizedAngle = angle % (Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.double), adjustedAngle = normalizedAngle < _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultAngle ? normalizedAngle + Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.double : normalizedAngle;\n            return adjustedAngle >= Math.PI && adjustedAngle < Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.double;\n        }\n        return false;\n    }\n    isVisible() {\n        return !this.destroyed && !this.spawning && this.isInsideCanvas();\n    }\n    reset() {\n        for (const updater of this._container.particleUpdaters){\n            updater.reset?.(this);\n        }\n    }\n    _calcPosition = (position, zIndex)=>{\n        let tryCount = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultRetryCount, posVec = position ? _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector3d.create(position.x, position.y, zIndex) : undefined;\n        const container = this._container, plugins = container.particlePositionPlugins, outModes = this.options.move.outModes, radius = this.getRadius(), canvasSize = container.canvas.size, abortController = new AbortController(), { signal } = abortController;\n        while(!signal.aborted){\n            for (const plugin of plugins){\n                const pluginPos = plugin.particlePosition?.(posVec, this);\n                if (pluginPos) {\n                    return _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector3d.create(pluginPos.x, pluginPos.y, zIndex);\n                }\n            }\n            const exactPosition = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.calcExactPositionOrRandomFromSize)({\n                size: canvasSize,\n                position: posVec\n            }), pos = _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector3d.create(exactPosition.x, exactPosition.y, zIndex);\n            this._fixHorizontal(pos, radius, outModes.left ?? outModes.default);\n            this._fixHorizontal(pos, radius, outModes.right ?? outModes.default);\n            this._fixVertical(pos, radius, outModes.top ?? outModes.default);\n            this._fixVertical(pos, radius, outModes.bottom ?? outModes.default);\n            let isValidPosition = true;\n            for (const plugin of container.particles.checkParticlePositionPlugins){\n                isValidPosition = plugin.checkParticlePosition?.(this, pos, tryCount) ?? true;\n                if (!isValidPosition) {\n                    break;\n                }\n            }\n            if (isValidPosition) {\n                return pos;\n            }\n            tryCount += _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.tryCountIncrement;\n            posVec = undefined;\n        }\n        return posVec;\n    };\n    _calculateVelocity = ()=>{\n        const baseVelocity = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getParticleBaseVelocity)(this.direction), res = baseVelocity.copy(), moveOptions = this.options.move;\n        if (moveOptions.direction === _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_6__.MoveDirection.inside || moveOptions.direction === _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_6__.MoveDirection.outside) {\n            return res;\n        }\n        const rad = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.degToRad)((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRangeValue)(moveOptions.angle.value)), radOffset = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.degToRad)((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRangeValue)(moveOptions.angle.offset)), range = {\n            left: radOffset - rad * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.half,\n            right: radOffset + rad * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.half\n        };\n        if (!moveOptions.straight) {\n            res.angle += (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.randomInRangeValue)((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.setRangeValue)(range.left, range.right));\n        }\n        if (moveOptions.random && typeof moveOptions.speed === \"number\") {\n            res.length *= (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRandom)();\n        }\n        return res;\n    };\n    _fixHorizontal = (pos, radius, outMode)=>{\n        fixOutMode({\n            outMode,\n            checkModes: [\n                _Enums_Modes_OutMode_js__WEBPACK_IMPORTED_MODULE_7__.OutMode.bounce\n            ],\n            coord: pos.x,\n            maxCoord: this._container.canvas.size.width,\n            setCb: (value)=>pos.x += value,\n            radius\n        });\n    };\n    _fixVertical = (pos, radius, outMode)=>{\n        fixOutMode({\n            outMode,\n            checkModes: [\n                _Enums_Modes_OutMode_js__WEBPACK_IMPORTED_MODULE_7__.OutMode.bounce\n            ],\n            coord: pos.y,\n            maxCoord: this._container.canvas.size.height,\n            setCb: (value)=>pos.y += value,\n            radius\n        });\n    };\n    _getRollColor = (color)=>{\n        if (!color || !this.roll || !this.backColor && !this.roll.alter) {\n            return color;\n        }\n        if (!this.isShowingBack()) {\n            return color;\n        }\n        if (this.backColor) {\n            return this.backColor;\n        }\n        if (this.roll.alter) {\n            return (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_1__.alterHsl)(color, this.roll.alter.type, this.roll.alter.value);\n        }\n        return color;\n    };\n    _initPosition = (position)=>{\n        const container = this._container, zIndexValue = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRangeValue)(this.options.zIndex.value), initialPosition = this._calcPosition(position, (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.clamp)(zIndexValue, _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.minZ, container.zLayers));\n        if (!initialPosition) {\n            throw new Error(\"a valid position cannot be found for particle\");\n        }\n        this.position = initialPosition;\n        this.initialPosition = this.position.copy();\n        const canvasSize = container.canvas.size;\n        this.moveCenter = {\n            ...(0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.getPosition)(this.options.move.center, canvasSize),\n            radius: this.options.move.center.radius,\n            mode: this.options.move.center.mode\n        };\n        this.direction = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getParticleDirectionAngle)(this.options.move.direction, this.position, this.moveCenter);\n        switch(this.options.move.direction){\n            case _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_6__.MoveDirection.inside:\n                this.outType = _Enums_Types_ParticleOutType_js__WEBPACK_IMPORTED_MODULE_8__.ParticleOutType.inside;\n                break;\n            case _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_6__.MoveDirection.outside:\n                this.outType = _Enums_Types_ParticleOutType_js__WEBPACK_IMPORTED_MODULE_8__.ParticleOutType.outside;\n                break;\n            default:\n                break;\n        }\n        this.offset = _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector.origin;\n    };\n}\n\n\n//# sourceURL=webpack://@tsparticles/all/../../engine/dist/browser/Core/Particle.js?\n}");
 
 /***/ },
 
-/***/ "../../engine/dist/browser/Core/Particles.js"
-/*!***************************************************!*\
-  !*** ../../engine/dist/browser/Core/Particles.js ***!
-  \***************************************************/
+/***/ "../../engine/dist/browser/Core/ParticlesManager.js"
+/*!**********************************************************!*\
+  !*** ../../engine/dist/browser/Core/ParticlesManager.js ***!
+  \**********************************************************/
+(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   ParticlesManager: () => (/* binding */ ParticlesManager)\n/* harmony export */ });\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Utils/Constants.js */ \"../../engine/dist/browser/Core/Utils/Constants.js\");\n/* harmony import */ var _Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Enums/Types/EventType.js */ \"../../engine/dist/browser/Enums/Types/EventType.js\");\n/* harmony import */ var _Enums_Modes_LimitMode_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Enums/Modes/LimitMode.js */ \"../../engine/dist/browser/Enums/Modes/LimitMode.js\");\n/* harmony import */ var _Particle_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Particle.js */ \"../../engine/dist/browser/Core/Particle.js\");\n/* harmony import */ var _Utils_SpatialHashGrid_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Utils/SpatialHashGrid.js */ \"../../engine/dist/browser/Core/Utils/SpatialHashGrid.js\");\n/* harmony import */ var _Utils_LogUtils_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Utils/LogUtils.js */ \"../../engine/dist/browser/Utils/LogUtils.js\");\n/* harmony import */ var _Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Utils/OptionsUtils.js */ \"../../engine/dist/browser/Utils/OptionsUtils.js\");\n\n\n\n\n\n\n\nclass ParticlesManager {\n    checkParticlePositionPlugins;\n    grid;\n    _array;\n    _container;\n    _groupLimits;\n    _limit;\n    _maxZIndex;\n    _minZIndex;\n    _needsSort;\n    _nextId;\n    _particleResetPlugins;\n    _particleUpdatePlugins;\n    _pluginManager;\n    _pool;\n    _postParticleUpdatePlugins;\n    _postUpdatePlugins;\n    _resizeFactor;\n    _updatePlugins;\n    _zArray;\n    constructor(pluginManager, container){\n        this._pluginManager = pluginManager;\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._minZIndex = 0;\n        this._maxZIndex = 0;\n        this.grid = new _Utils_SpatialHashGrid_js__WEBPACK_IMPORTED_MODULE_4__.SpatialHashGrid(_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.spatialHashGridCellSize);\n        this.checkParticlePositionPlugins = [];\n        this._particleResetPlugins = [];\n        this._particleUpdatePlugins = [];\n        this._postUpdatePlugins = [];\n        this._postParticleUpdatePlugins = [];\n        this._updatePlugins = [];\n    }\n    get count() {\n        return this._array.length;\n    }\n    addParticle(position, overrideOptions, group, initializer) {\n        const limitMode = this._container.actualOptions.particles.number.limit.mode, limit = group === undefined ? this._limit : this._groupLimits.get(group) ?? this._limit, currentCount = this.count;\n        if (limit > _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.minLimit) {\n            switch(limitMode){\n                case _Enums_Modes_LimitMode_js__WEBPACK_IMPORTED_MODULE_2__.LimitMode.delete:\n                    {\n                        const countToRemove = currentCount + _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.countOffset - limit;\n                        if (countToRemove > _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.minCount) {\n                            this.removeQuantity(countToRemove);\n                        }\n                        break;\n                    }\n                case _Enums_Modes_LimitMode_js__WEBPACK_IMPORTED_MODULE_2__.LimitMode.wait:\n                    if (currentCount >= limit) {\n                        return;\n                    }\n                    break;\n                default:\n                    break;\n            }\n        }\n        try {\n            const particle = this._pool.pop() ?? new _Particle_js__WEBPACK_IMPORTED_MODULE_3__.Particle(this._pluginManager, this._container);\n            particle.init(this._nextId, position, overrideOptions, group);\n            let canAdd = true;\n            if (initializer) {\n                canAdd = initializer(particle);\n            }\n            if (!canAdd) {\n                this._pool.push(particle);\n                return;\n            }\n            this._array.push(particle);\n            this._zArray.push(particle);\n            this._nextId++;\n            this._container.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_1__.EventType.particleAdded, {\n                particle\n            });\n            return particle;\n        } catch (e) {\n            (0,_Utils_LogUtils_js__WEBPACK_IMPORTED_MODULE_5__.getLogger)().warning(`error adding particle: ${e}`);\n        }\n        return undefined;\n    }\n    clear() {\n        this._array = [];\n        this._zArray = [];\n    }\n    destroy() {\n        this._array = [];\n        this._pool.length = 0;\n        this._zArray = [];\n        this.checkParticlePositionPlugins = [];\n        this._particleResetPlugins = [];\n        this._particleUpdatePlugins = [];\n        this._postUpdatePlugins = [];\n        this._postParticleUpdatePlugins = [];\n        this._updatePlugins = [];\n    }\n    drawParticles(delta) {\n        for (const particle of this._zArray){\n            particle.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    async init() {\n        const container = this._container, options = container.actualOptions;\n        this._minZIndex = 0;\n        this._maxZIndex = 0;\n        this._needsSort = false;\n        this.checkParticlePositionPlugins = [];\n        this._updatePlugins = [];\n        this._particleUpdatePlugins = [];\n        this._postUpdatePlugins = [];\n        this._particleResetPlugins = [];\n        this._postParticleUpdatePlugins = [];\n        this.grid = new _Utils_SpatialHashGrid_js__WEBPACK_IMPORTED_MODULE_4__.SpatialHashGrid(_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.spatialHashGridCellSize * container.retina.pixelRatio);\n        for (const plugin of container.plugins){\n            if (plugin.redrawInit) {\n                await plugin.redrawInit();\n            }\n            if (plugin.checkParticlePosition) {\n                this.checkParticlePositionPlugins.push(plugin);\n            }\n            if (plugin.update) {\n                this._updatePlugins.push(plugin);\n            }\n            if (plugin.particleUpdate) {\n                this._particleUpdatePlugins.push(plugin);\n            }\n            if (plugin.postUpdate) {\n                this._postUpdatePlugins.push(plugin);\n            }\n            if (plugin.particleReset) {\n                this._particleResetPlugins.push(plugin);\n            }\n            if (plugin.postParticleUpdate) {\n                this._postParticleUpdatePlugins.push(plugin);\n            }\n        }\n        await this._container.initDrawersAndUpdaters();\n        for (const drawer of this._container.effectDrawers.values()){\n            await drawer.init?.(container);\n        }\n        for (const drawer of this._container.shapeDrawers.values()){\n            await drawer.init?.(container);\n        }\n        let handled = false;\n        for (const plugin of container.plugins){\n            handled = plugin.particlesInitialization?.() ?? handled;\n            if (handled) {\n                break;\n            }\n        }\n        if (!handled) {\n            const particlesOptions = options.particles, groups = particlesOptions.groups;\n            for(const group in groups){\n                const groupOptions = groups[group];\n                if (!groupOptions) {\n                    continue;\n                }\n                for(let i = this.count, j = 0; j < groupOptions.number.value && i < particlesOptions.number.value; i++, j++){\n                    this.addParticle(undefined, groupOptions, group);\n                }\n            }\n            for(let i = this.count; i < particlesOptions.number.value; i++){\n                this.addParticle();\n            }\n        }\n    }\n    push(nb, position, overrideOptions, group) {\n        for(let i = 0; i < nb; i++){\n            this.addParticle(position, overrideOptions, group);\n        }\n    }\n    async redraw() {\n        this.clear();\n        await this.init();\n        this._container.canvas.render.drawParticles({\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 = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.defaultRemoveQuantity, group, override) {\n        if (index < _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.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                i--;\n                deleted++;\n            }\n        }\n    }\n    removeQuantity(quantity, group) {\n        this.removeAt(_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.minIndex, quantity, group);\n    }\n    setDensity() {\n        const options = this._container.actualOptions, groups = options.particles.groups;\n        let pluginsCount = 0;\n        for (const plugin of this._container.plugins){\n            if (plugin.particlesDensityCount) {\n                pluginsCount += plugin.particlesDensityCount();\n            }\n        }\n        for(const group in groups){\n            const groupData = groups[group];\n            if (!groupData) {\n                continue;\n            }\n            const groupDataOptions = (0,_Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_6__.loadParticlesOptions)(this._pluginManager, this._container, groupData);\n            this._applyDensity(groupDataOptions, pluginsCount, group);\n        }\n        this._applyDensity(options.particles, pluginsCount);\n    }\n    setLastZIndex(zIndex) {\n        this._needsSort ||= zIndex >= this._maxZIndex || zIndex > this._minZIndex && zIndex < this._maxZIndex;\n    }\n    setResizeFactor(factor) {\n        this._resizeFactor = factor;\n    }\n    update(delta) {\n        const particlesToDelete = new Set();\n        this.grid.clear();\n        for (const plugin of this._updatePlugins){\n            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            for (const plugin of this._particleResetPlugins){\n                plugin.particleReset?.(particle);\n            }\n            for (const plugin of this._particleUpdatePlugins){\n                if (particle.destroyed) {\n                    break;\n                }\n                plugin.particleUpdate?.(particle, delta);\n            }\n            if (particle.destroyed) {\n                particlesToDelete.add(particle);\n                continue;\n            }\n            this.grid.insert(particle);\n        }\n        for (const plugin of this._postUpdatePlugins){\n            plugin.postUpdate?.(delta);\n        }\n        for (const particle of this._array){\n            if (particle.destroyed) {\n                particlesToDelete.add(particle);\n                continue;\n            }\n            for (const updater of this._container.particleUpdaters){\n                updater.update(particle, delta);\n            }\n            if (!particle.destroyed && !particle.spawning) {\n                for (const plugin of this._postParticleUpdatePlugins){\n                    plugin.postParticleUpdate?.(particle, delta);\n                }\n            } else if (particle.destroyed) {\n                particlesToDelete.add(particle);\n            }\n        }\n        if (particlesToDelete.size) {\n            for (const particle of particlesToDelete){\n                this.remove(particle);\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 firstItem = zArray[_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.minIndex], lastItem = zArray[zArray.length - _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.lengthOffset];\n            if (!firstItem || !lastItem) {\n                return;\n            }\n            this._maxZIndex = firstItem.position.z;\n            this._minZIndex = lastItem.position.z;\n            this._needsSort = false;\n        }\n    }\n    _addToPool = (...particles)=>{\n        this._pool.push(...particles);\n    };\n    _applyDensity = (options, pluginsCount, group, groupOptions)=>{\n        const numberOptions = options.number;\n        if (!numberOptions.density.enable) {\n            if (group === undefined) {\n                this._limit = numberOptions.limit.value;\n            } else if (groupOptions?.number.limit.value ?? numberOptions.limit.value) {\n                this._groupLimits.set(group, groupOptions?.number.limit.value ?? numberOptions.limit.value);\n            }\n            return;\n        }\n        const densityFactor = this._initDensityFactor(numberOptions.density), optParticlesNumber = numberOptions.value, optParticlesLimit = numberOptions.limit.value > _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.minLimit ? numberOptions.limit.value : optParticlesNumber, particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + pluginsCount, 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            this.push(Math.abs(particlesNumber - particlesCount), undefined, options, group);\n        } else if (particlesCount > particlesNumber) {\n            this.removeQuantity(particlesCount - particlesNumber, group);\n        }\n    };\n    _initDensityFactor = (densityOptions)=>{\n        const container = this._container;\n        if (!container.canvas.element || !densityOptions.enable) {\n            return _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.defaultDensityFactor;\n        }\n        const canvas = container.canvas.element, pxRatio = container.retina.pixelRatio;\n        return canvas.width * canvas.height / (densityOptions.height * densityOptions.width * pxRatio ** _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.squareExp);\n    };\n    _removeParticle = (index, group, override)=>{\n        const particle = this._array[index];\n        if (!particle) {\n            return false;\n        }\n        if (particle.group !== group) {\n            return false;\n        }\n        const zIdx = this._zArray.indexOf(particle);\n        this._array.splice(index, _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.deleteCount);\n        this._zArray.splice(zIdx, _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.deleteCount);\n        particle.destroy(override);\n        this._container.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_1__.EventType.particleRemoved, {\n            particle\n        });\n        this._addToPool(particle);\n        return true;\n    };\n}\n\n\n//# sourceURL=webpack://@tsparticles/all/../../engine/dist/browser/Core/ParticlesManager.js?\n}");
+
+/***/ },
+
+/***/ "../../engine/dist/browser/Core/RenderManager.js"
+/*!*******************************************************!*\
+  !*** ../../engine/dist/browser/Core/RenderManager.js ***!
+  \*******************************************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Particles: () => (/* binding */ Particles)\n/* harmony export */ });\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Utils/Constants.js */ \"../../engine/dist/browser/Core/Utils/Constants.js\");\n/* harmony import */ var _Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Enums/Types/EventType.js */ \"../../engine/dist/browser/Enums/Types/EventType.js\");\n/* harmony import */ var _Enums_Modes_LimitMode_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Enums/Modes/LimitMode.js */ \"../../engine/dist/browser/Enums/Modes/LimitMode.js\");\n/* harmony import */ var _Particle_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Particle.js */ \"../../engine/dist/browser/Core/Particle.js\");\n/* harmony import */ var _Utils_Point_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Utils/Point.js */ \"../../engine/dist/browser/Core/Utils/Point.js\");\n/* harmony import */ var _Utils_QuadTree_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./Utils/QuadTree.js */ \"../../engine/dist/browser/Core/Utils/QuadTree.js\");\n/* harmony import */ var _Utils_Ranges_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./Utils/Ranges.js */ \"../../engine/dist/browser/Core/Utils/Ranges.js\");\n/* harmony import */ var _Utils_LogUtils_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Utils/LogUtils.js */ \"../../engine/dist/browser/Utils/LogUtils.js\");\n/* harmony import */ var _Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../Utils/OptionsUtils.js */ \"../../engine/dist/browser/Utils/OptionsUtils.js\");\n\n\n\n\n\n\n\n\n\nconst qTreeRectangle = canvasSize => {\n  const {\n    height,\n    width\n  } = canvasSize;\n  return new _Utils_Ranges_js__WEBPACK_IMPORTED_MODULE_6__.Rectangle(_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.posOffset * width, _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.posOffset * height, _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.sizeFactor * width, _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.sizeFactor * height);\n};\nclass Particles {\n  constructor(engine, container) {\n    this._addToPool = (...particles) => {\n      this._pool.push(...particles);\n    };\n    this._applyDensity = (options, pluginsCount, group, groupOptions) => {\n      const numberOptions = options.number;\n      if (!numberOptions.density.enable) {\n        if (group === undefined) {\n          this._limit = numberOptions.limit.value;\n        } else if (groupOptions?.number.limit.value ?? numberOptions.limit.value) {\n          this._groupLimits.set(group, groupOptions?.number.limit.value ?? numberOptions.limit.value);\n        }\n        return;\n      }\n      const densityFactor = this._initDensityFactor(numberOptions.density),\n        optParticlesNumber = numberOptions.value,\n        optParticlesLimit = numberOptions.limit.value > _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.minLimit ? numberOptions.limit.value : optParticlesNumber,\n        particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + pluginsCount,\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        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      if (!container.canvas.element || !densityOptions.enable) {\n        return _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.defaultDensityFactor;\n      }\n      const canvas = container.canvas.element,\n        pxRatio = container.retina.pixelRatio;\n      return canvas.width * canvas.height / (densityOptions.height * densityOptions.width * pxRatio ** _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.squareExp);\n    };\n    this._pushParticle = (position, overrideOptions, group, initializer) => {\n      try {\n        const particle = this._pool.pop() ?? new _Particle_js__WEBPACK_IMPORTED_MODULE_3__.Particle(this._engine, this._container);\n        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(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_1__.EventType.particleAdded, {\n          container: this._container,\n          data: {\n            particle\n          }\n        });\n        return particle;\n      } catch (e) {\n        (0,_Utils_LogUtils_js__WEBPACK_IMPORTED_MODULE_7__.getLogger)().warning(`error adding particle: ${e}`);\n      }\n      return undefined;\n    };\n    this._removeParticle = (index, group, override) => {\n      const particle = this._array[index];\n      if (!particle) {\n        return false;\n      }\n      if (particle.group !== group) {\n        return false;\n      }\n      const zIdx = this._zArray.indexOf(particle);\n      this._array.splice(index, _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.deleteCount);\n      this._zArray.splice(zIdx, _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.deleteCount);\n      particle.destroy(override);\n      this._engine.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_1__.EventType.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._pluginsInitialized = false;\n    const canvasSize = container.canvas.size;\n    this.quadTree = new _Utils_QuadTree_js__WEBPACK_IMPORTED_MODULE_5__.QuadTree(qTreeRectangle(canvasSize), _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.qTreeCapacity);\n    this.movers = [];\n    this.updaters = [];\n  }\n  get count() {\n    return this._array.length;\n  }\n  addParticle(position, overrideOptions, group, initializer) {\n    const limitMode = this._container.actualOptions.particles.number.limit.mode,\n      limit = group === undefined ? this._limit : this._groupLimits.get(group) ?? this._limit,\n      currentCount = this.count;\n    if (limit > _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.minLimit) {\n      switch (limitMode) {\n        case _Enums_Modes_LimitMode_js__WEBPACK_IMPORTED_MODULE_2__.LimitMode.delete:\n          {\n            const countToRemove = currentCount + _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.countOffset - limit;\n            if (countToRemove > _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.minCount) {\n              this.removeQuantity(countToRemove);\n            }\n            break;\n          }\n        case _Enums_Modes_LimitMode_js__WEBPACK_IMPORTED_MODULE_2__.LimitMode.wait:\n          if (currentCount >= limit) {\n            return;\n          }\n          break;\n      }\n    }\n    return 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  drawParticles(delta) {\n    for (const particle of this._zArray) {\n      particle.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  async init() {\n    const container = this._container,\n      options = container.actualOptions;\n    this._lastZIndex = 0;\n    this._needsSort = false;\n    for (const plugin of container.plugins) {\n      if (plugin.redrawInit) {\n        await plugin.redrawInit();\n      }\n    }\n    await this.initPlugins();\n    let handled = false;\n    for (const plugin of container.plugins) {\n      handled = plugin.particlesInitialization?.() ?? handled;\n      if (handled) {\n        break;\n      }\n    }\n    if (!handled) {\n      const particlesOptions = options.particles,\n        groups = particlesOptions.groups;\n      for (const group in groups) {\n        const groupOptions = groups[group];\n        if (!groupOptions) {\n          continue;\n        }\n        for (let i = this.count, j = 0; j < groupOptions.number.value && i < particlesOptions.number.value; i++, j++) {\n          this.addParticle(undefined, groupOptions, group);\n        }\n      }\n      for (let i = this.count; i < particlesOptions.number.value; i++) {\n        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    for (const pathGenerator of container.pathGenerators.values()) {\n      pathGenerator.init(container);\n    }\n  }\n  push(nb, position, overrideOptions, group) {\n    for (let i = 0; i < nb; i++) {\n      this.addParticle(position, overrideOptions, group);\n    }\n  }\n  async redraw() {\n    this.clear();\n    await this.init();\n    this._container.canvas.drawParticles({\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 = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.defaultRemoveQuantity, group, override) {\n    if (index < _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.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        i--;\n        deleted++;\n      }\n    }\n  }\n  removeQuantity(quantity, group) {\n    this.removeAt(_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.minIndex, quantity, group);\n  }\n  setDensity() {\n    const options = this._container.actualOptions,\n      groups = options.particles.groups;\n    let pluginsCount = 0;\n    for (const plugin of this._container.plugins) {\n      if (plugin.particlesDensityCount) {\n        pluginsCount += plugin.particlesDensityCount();\n      }\n    }\n    for (const group in groups) {\n      const groupData = groups[group];\n      if (!groupData) {\n        continue;\n      }\n      const groupDataOptions = (0,_Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_8__.loadParticlesOptions)(this._engine, this._container, groupData);\n      this._applyDensity(groupDataOptions, pluginsCount, group);\n    }\n    this._applyDensity(options.particles, pluginsCount);\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  update(delta) {\n    const container = this._container,\n      particlesToDelete = new Set();\n    this.quadTree = new _Utils_QuadTree_js__WEBPACK_IMPORTED_MODULE_5__.QuadTree(qTreeRectangle(container.canvas.size), _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.qTreeCapacity);\n    for (const pathGenerator of container.pathGenerators.values()) {\n      pathGenerator.update();\n    }\n    for (const plugin of container.plugins) {\n      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      for (const plugin of this._container.plugins) {\n        if (plugin.particleReset) {\n          plugin.particleReset(particle);\n        }\n      }\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          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_4__.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(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_1__.EventType.particleRemoved, {\n          container: this._container,\n          data: {\n            particle\n          }\n        });\n      }\n      this._addToPool(...particlesToDelete);\n    }\n    for (const plugin of container.plugins) {\n      if (plugin.postUpdate) {\n        plugin.postUpdate(delta);\n      }\n    }\n    for (const particle of this._array) {\n      for (const updater of this.updaters) {\n        updater.update(particle, delta);\n      }\n      if (!particle.destroyed && !particle.spawning) {\n        for (const plugin of container.plugins) {\n          if (plugin.postParticleUpdate) {\n            plugin.postParticleUpdate(particle, delta);\n          }\n        }\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 lastItem = zArray[zArray.length - _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.lengthOffset];\n      if (!lastItem) {\n        return;\n      }\n      this._lastZIndex = lastItem.position.z;\n      this._needsSort = false;\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/all/../../engine/dist/browser/Core/Particles.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   RenderManager: () => (/* binding */ RenderManager)\n/* harmony export */ });\n/* harmony import */ var _Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../Utils/CanvasUtils.js */ \"../../engine/dist/browser/Utils/CanvasUtils.js\");\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Utils/Constants.js */ \"../../engine/dist/browser/Core/Utils/Constants.js\");\n/* harmony import */ var _Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Utils/ColorUtils.js */ \"../../engine/dist/browser/Utils/ColorUtils.js\");\n\n\n\nconst fColorIndex = 0, sColorIndex = 1;\nfunction setTransformValue(factor, newFactor, key) {\n    const newValue = newFactor[key];\n    if (newValue !== undefined) {\n        factor[key] = (factor[key] ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.defaultTransformValue) * newValue;\n    }\n}\nclass RenderManager {\n    _canvasClearPlugins;\n    _canvasManager;\n    _canvasPaintPlugins;\n    _clearDrawPlugins;\n    _colorPlugins;\n    _container;\n    _context;\n    _contextSettings;\n    _drawParticlePlugins;\n    _drawParticlesCleanupPlugins;\n    _drawParticlesSetupPlugins;\n    _drawPlugins;\n    _drawSettingsCleanupPlugins;\n    _drawSettingsSetupPlugins;\n    _pluginManager;\n    _postDrawUpdaters;\n    _preDrawUpdaters;\n    _reusableColorStyles = {};\n    _reusablePluginColors = [\n        undefined,\n        undefined\n    ];\n    _reusableTransform = {};\n    constructor(pluginManager, container, canvasManager){\n        this._pluginManager = pluginManager;\n        this._container = container;\n        this._canvasManager = canvasManager;\n        this._context = null;\n        this._preDrawUpdaters = [];\n        this._postDrawUpdaters = [];\n        this._colorPlugins = [];\n        this._canvasClearPlugins = [];\n        this._canvasPaintPlugins = [];\n        this._clearDrawPlugins = [];\n        this._drawParticlePlugins = [];\n        this._drawParticlesCleanupPlugins = [];\n        this._drawParticlesSetupPlugins = [];\n        this._drawPlugins = [];\n        this._drawSettingsSetupPlugins = [];\n        this._drawSettingsCleanupPlugins = [];\n    }\n    get settings() {\n        return this._contextSettings;\n    }\n    canvasClear() {\n        if (!this._container.actualOptions.clear) {\n            return;\n        }\n        this.draw((ctx)=>{\n            (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.clear)(ctx, this._canvasManager.size);\n        });\n    }\n    clear() {\n        let pluginHandled = false;\n        for (const plugin of this._canvasClearPlugins){\n            pluginHandled = plugin.canvasClear?.() ?? false;\n            if (pluginHandled) {\n                break;\n            }\n        }\n        if (pluginHandled) {\n            return;\n        }\n        this.canvasClear();\n    }\n    destroy() {\n        this.stop();\n        this._preDrawUpdaters = [];\n        this._postDrawUpdaters = [];\n        this._colorPlugins = [];\n        this._canvasClearPlugins = [];\n        this._canvasPaintPlugins = [];\n        this._clearDrawPlugins = [];\n        this._drawParticlePlugins = [];\n        this._drawParticlesCleanupPlugins = [];\n        this._drawParticlesSetupPlugins = [];\n        this._drawPlugins = [];\n        this._drawSettingsSetupPlugins = [];\n        this._drawSettingsCleanupPlugins = [];\n    }\n    draw(cb) {\n        const ctx = this._context;\n        if (!ctx) {\n            return;\n        }\n        return cb(ctx);\n    }\n    drawParticle(particle, delta) {\n        if (particle.spawning || particle.destroyed) {\n            return;\n        }\n        const radius = particle.getRadius();\n        if (radius <= _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.minimumSize) {\n            return;\n        }\n        const pfColor = particle.getFillColor(), psColor = particle.getStrokeColor();\n        let [fColor, sColor] = this._getPluginParticleColors(particle);\n        fColor ??= pfColor;\n        sColor ??= psColor;\n        if (!fColor && !sColor) {\n            return;\n        }\n        const container = this._container, zIndexOptions = particle.options.zIndex, zIndexFactor = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.zIndexFactorOffset - particle.zIndexFactor, { fillOpacity, opacity, strokeOpacity } = particle.getOpacity(), transform = this._reusableTransform, colorStyles = this._reusableColorStyles, fill = fColor ? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_2__.getStyleFromHsl)(fColor, container.hdr, fillOpacity * opacity) : undefined, stroke = sColor ? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_2__.getStyleFromHsl)(sColor, container.hdr, strokeOpacity * opacity) : fill;\n        transform.a = transform.b = transform.c = transform.d = undefined;\n        colorStyles.fill = fill;\n        colorStyles.stroke = stroke;\n        this.draw((context)=>{\n            for (const plugin of this._drawParticlesSetupPlugins){\n                plugin.drawParticleSetup?.(context, particle, delta);\n            }\n            this._applyPreDrawUpdaters(context, particle, radius, opacity, colorStyles, transform);\n            (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.drawParticle)({\n                container,\n                context,\n                particle,\n                delta,\n                colorStyles,\n                radius: radius * zIndexFactor ** zIndexOptions.sizeRate,\n                opacity: opacity,\n                transform\n            });\n            this._applyPostDrawUpdaters(particle);\n            for (const plugin of this._drawParticlesCleanupPlugins){\n                plugin.drawParticleCleanup?.(context, particle, delta);\n            }\n        });\n    }\n    drawParticlePlugins(particle, delta) {\n        this.draw((ctx)=>{\n            for (const plugin of this._drawParticlePlugins){\n                (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.drawParticlePlugin)(ctx, plugin, particle, delta);\n            }\n        });\n    }\n    drawParticles(delta) {\n        const { particles } = this._container;\n        this.clear();\n        particles.update(delta);\n        this.draw((ctx)=>{\n            for (const plugin of this._drawSettingsSetupPlugins){\n                plugin.drawSettingsSetup?.(ctx, delta);\n            }\n            for (const plugin of this._drawPlugins){\n                plugin.draw?.(ctx, delta);\n            }\n            particles.drawParticles(delta);\n            for (const plugin of this._clearDrawPlugins){\n                plugin.clearDraw?.(ctx, delta);\n            }\n            for (const plugin of this._drawSettingsCleanupPlugins){\n                plugin.drawSettingsCleanup?.(ctx, delta);\n            }\n        });\n    }\n    init() {\n        this.initUpdaters();\n        this.initPlugins();\n        this.paint();\n    }\n    initPlugins() {\n        this._colorPlugins = [];\n        this._canvasClearPlugins = [];\n        this._canvasPaintPlugins = [];\n        this._clearDrawPlugins = [];\n        this._drawParticlePlugins = [];\n        this._drawParticlesSetupPlugins = [];\n        this._drawParticlesCleanupPlugins = [];\n        this._drawPlugins = [];\n        this._drawSettingsSetupPlugins = [];\n        this._drawSettingsCleanupPlugins = [];\n        for (const plugin of this._container.plugins){\n            if (plugin.particleFillColor ?? plugin.particleStrokeColor) {\n                this._colorPlugins.push(plugin);\n            }\n            if (plugin.canvasClear) {\n                this._canvasClearPlugins.push(plugin);\n            }\n            if (plugin.canvasPaint) {\n                this._canvasPaintPlugins.push(plugin);\n            }\n            if (plugin.drawParticle) {\n                this._drawParticlePlugins.push(plugin);\n            }\n            if (plugin.drawParticleSetup) {\n                this._drawParticlesSetupPlugins.push(plugin);\n            }\n            if (plugin.drawParticleCleanup) {\n                this._drawParticlesCleanupPlugins.push(plugin);\n            }\n            if (plugin.draw) {\n                this._drawPlugins.push(plugin);\n            }\n            if (plugin.drawSettingsSetup) {\n                this._drawSettingsSetupPlugins.push(plugin);\n            }\n            if (plugin.drawSettingsCleanup) {\n                this._drawSettingsCleanupPlugins.push(plugin);\n            }\n            if (plugin.clearDraw) {\n                this._clearDrawPlugins.push(plugin);\n            }\n        }\n    }\n    initUpdaters() {\n        this._preDrawUpdaters = [];\n        this._postDrawUpdaters = [];\n        for (const updater of this._container.particleUpdaters){\n            if (updater.afterDraw) {\n                this._postDrawUpdaters.push(updater);\n            }\n            if (updater.getColorStyles ?? updater.getTransformValues ?? updater.beforeDraw) {\n                this._preDrawUpdaters.push(updater);\n            }\n        }\n    }\n    paint() {\n        let handled = false;\n        for (const plugin of this._canvasPaintPlugins){\n            handled = plugin.canvasPaint?.() ?? false;\n            if (handled) {\n                break;\n            }\n        }\n        if (handled) {\n            return;\n        }\n        this.paintBase();\n    }\n    paintBase(baseColor) {\n        this.draw((ctx)=>{\n            (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.paintBase)(ctx, this._canvasManager.size, baseColor);\n        });\n    }\n    paintImage(image, opacity) {\n        this.draw((ctx)=>{\n            (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.paintImage)(ctx, this._canvasManager.size, image, opacity);\n        });\n    }\n    setContext(context) {\n        this._context = context;\n        if (this._context) {\n            this._context.globalCompositeOperation = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.defaultCompositeValue;\n        }\n    }\n    setContextSettings(settings) {\n        this._contextSettings = settings;\n    }\n    stop() {\n        this.draw((ctx)=>{\n            (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.clear)(ctx, this._canvasManager.size);\n        });\n    }\n    _applyPostDrawUpdaters = (particle)=>{\n        for (const updater of this._postDrawUpdaters){\n            updater.afterDraw?.(particle);\n        }\n    };\n    _applyPreDrawUpdaters = (ctx, particle, radius, zOpacity, colorStyles, transform)=>{\n        for (const updater of this._preDrawUpdaters){\n            if (updater.getColorStyles) {\n                const { fill, stroke } = updater.getColorStyles(particle, ctx, radius, zOpacity);\n                if (fill) {\n                    colorStyles.fill = fill;\n                }\n                if (stroke) {\n                    colorStyles.stroke = stroke;\n                }\n            }\n            if (updater.getTransformValues) {\n                const updaterTransform = updater.getTransformValues(particle);\n                for(const key in updaterTransform){\n                    setTransformValue(transform, updaterTransform, key);\n                }\n            }\n            updater.beforeDraw?.(particle);\n        }\n    };\n    _getPluginParticleColors = (particle)=>{\n        let fColor, sColor;\n        for (const plugin of this._colorPlugins){\n            if (!fColor && plugin.particleFillColor) {\n                fColor = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_2__.rangeColorToHsl)(this._pluginManager, plugin.particleFillColor(particle));\n            }\n            if (!sColor && plugin.particleStrokeColor) {\n                sColor = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_2__.rangeColorToHsl)(this._pluginManager, plugin.particleStrokeColor(particle));\n            }\n            if (fColor && sColor) {\n                break;\n            }\n        }\n        this._reusablePluginColors[fColorIndex] = fColor;\n        this._reusablePluginColors[sColorIndex] = sColor;\n        return this._reusablePluginColors;\n    };\n}\n\n\n//# sourceURL=webpack://@tsparticles/all/../../engine/dist/browser/Core/RenderManager.js?\n}");
 
 /***/ },
 
@@ -63,7 +73,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
   \************************************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Retina: () => (/* binding */ Retina)\n/* harmony export */ });\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Utils/Constants.js */ \"../../engine/dist/browser/Core/Utils/Constants.js\");\n/* harmony import */ var _Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Utils/MathUtils.js */ \"../../engine/dist/browser/Utils/MathUtils.js\");\n\n\nclass Retina {\n  constructor(container) {\n    this.container = container;\n    this.pixelRatio = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.defaultRatio;\n    this.reduceFactor = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.defaultReduceFactor;\n  }\n  init() {\n    const container = this.container,\n      options = container.actualOptions;\n    this.pixelRatio = options.detectRetina ? devicePixelRatio : _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.defaultRatio;\n    this.reduceFactor = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.defaultReduceFactor;\n    const ratio = this.pixelRatio,\n      canvas = container.canvas;\n    if (canvas.element) {\n      const element = canvas.element;\n      canvas.size.width = element.offsetWidth * ratio;\n      canvas.size.height = element.offsetHeight * ratio;\n    }\n    const particles = options.particles,\n      moveOptions = particles.move;\n    this.maxSpeed = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(moveOptions.gravity.maxSpeed) * ratio;\n    this.sizeAnimationSpeed = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(particles.size.animation.speed) * ratio;\n  }\n  initParticle(particle) {\n    const options = particle.options,\n      ratio = this.pixelRatio,\n      moveOptions = options.move,\n      moveDistance = moveOptions.distance,\n      props = particle.retina;\n    props.moveDrift = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(moveOptions.drift) * ratio;\n    props.moveSpeed = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(moveOptions.speed) * ratio;\n    props.sizeAnimationSpeed = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(options.size.animation.speed) * ratio;\n    const maxDistance = props.maxDistance;\n    maxDistance.horizontal = moveDistance.horizontal !== undefined ? moveDistance.horizontal * ratio : undefined;\n    maxDistance.vertical = moveDistance.vertical !== undefined ? moveDistance.vertical * ratio : undefined;\n    props.maxSpeed = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(moveOptions.gravity.maxSpeed) * ratio;\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/all/../../engine/dist/browser/Core/Retina.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Retina: () => (/* binding */ Retina)\n/* harmony export */ });\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Utils/Constants.js */ \"../../engine/dist/browser/Core/Utils/Constants.js\");\n/* harmony import */ var _Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Utils/MathUtils.js */ \"../../engine/dist/browser/Utils/MathUtils.js\");\n\n\nclass Retina {\n    container;\n    pixelRatio;\n    reduceFactor;\n    constructor(container){\n        this.container = container;\n        this.pixelRatio = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.defaultRatio;\n        this.reduceFactor = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.defaultReduceFactor;\n    }\n    init() {\n        const container = this.container, options = container.actualOptions;\n        this.pixelRatio = options.detectRetina ? devicePixelRatio : _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.defaultRatio;\n        this.reduceFactor = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.defaultReduceFactor;\n        const ratio = this.pixelRatio, canvas = container.canvas;\n        if (canvas.element) {\n            const element = canvas.element;\n            canvas.size.width = element.offsetWidth * ratio;\n            canvas.size.height = element.offsetHeight * ratio;\n        }\n    }\n    initParticle(particle) {\n        const options = particle.options, ratio = this.pixelRatio, moveOptions = options.move, moveDistance = moveOptions.distance, props = particle.retina;\n        props.maxSpeed = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(moveOptions.gravity.maxSpeed) * ratio;\n        props.moveDrift = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(moveOptions.drift) * ratio;\n        props.moveSpeed = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(moveOptions.speed) * ratio;\n        props.sizeAnimationSpeed = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(options.size.animation.speed) * ratio;\n        const maxDistance = props.maxDistance;\n        maxDistance.horizontal = moveDistance.horizontal === undefined ? undefined : moveDistance.horizontal * ratio;\n        maxDistance.vertical = moveDistance.vertical === undefined ? undefined : moveDistance.vertical * ratio;\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/all/../../engine/dist/browser/Core/Retina.js?\n}");
 
 /***/ },
 
@@ -73,17 +83,17 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
   \**************************************************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   EventListeners: () => (/* binding */ EventListeners)\n/* harmony export */ });\n/* harmony import */ var _Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../Utils/Utils.js */ \"../../engine/dist/browser/Utils/Utils.js\");\n/* harmony import */ var _Constants_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Constants.js */ \"../../engine/dist/browser/Core/Utils/Constants.js\");\n\n\nclass EventListeners {\n  constructor(container) {\n    this.container = container;\n    this._handleVisibilityChange = () => {\n      const container = this.container,\n        options = container.actualOptions;\n      if (!options.pauseOnBlur) {\n        return;\n      }\n      if ((0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.safeDocument)().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.resize.delay * _Constants_js__WEBPACK_IMPORTED_MODULE_1__.millisecondsToSeconds);\n    };\n    this._manageListeners = add => {\n      const handlers = this._handlers;\n      this._manageResize(add);\n      (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.manageListener)(document, _Constants_js__WEBPACK_IMPORTED_MODULE_1__.visibilityChangeEvent, handlers.visibilityChange, add, false);\n    };\n    this._manageResize = add => {\n      const handlers = this._handlers,\n        container = this.container,\n        options = container.actualOptions;\n      if (!options.resize.enable) {\n        return;\n      }\n      if (typeof ResizeObserver === \"undefined\") {\n        (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.manageListener)(globalThis, _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._handlers = {\n      visibilityChange: () => {\n        this._handleVisibilityChange();\n      },\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/all/../../engine/dist/browser/Core/Utils/EventListeners.js?\n}");
+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 */ \"../../engine/dist/browser/Utils/Utils.js\");\n/* harmony import */ var _Constants_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Constants.js */ \"../../engine/dist/browser/Core/Utils/Constants.js\");\n\n\nclass EventListeners {\n    container;\n    _handlers;\n    _resizeObserver;\n    _resizeTimeout;\n    constructor(container){\n        this.container = container;\n        this._handlers = {\n            visibilityChange: ()=>{\n                this._handleVisibilityChange();\n            },\n            resize: ()=>{\n                this._handleWindowResize();\n            }\n        };\n    }\n    addListeners() {\n        this._manageListeners(true);\n    }\n    removeListeners() {\n        this._manageListeners(false);\n    }\n    _handleVisibilityChange = ()=>{\n        const container = this.container, options = container.actualOptions;\n        if (!options.pauseOnBlur) {\n            return;\n        }\n        if ((0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.safeDocument)().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    _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.resize.delay * _Constants_js__WEBPACK_IMPORTED_MODULE_1__.millisecondsToSeconds);\n    };\n    _manageListeners = (add)=>{\n        const handlers = this._handlers;\n        this._manageResize(add);\n        (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.manageListener)(document, _Constants_js__WEBPACK_IMPORTED_MODULE_1__.visibilityChangeEvent, handlers.visibilityChange, add, false);\n    };\n    _manageResize = (add)=>{\n        const handlers = this._handlers, container = this.container, options = container.actualOptions;\n        if (!options.resize.enable) {\n            return;\n        }\n        if (typeof ResizeObserver === \"undefined\") {\n            (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.manageListener)(globalThis, _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}\n\n\n//# sourceURL=webpack://@tsparticles/all/../../engine/dist/browser/Core/Utils/EventListeners.js?\n}");
 
 /***/ },
 
-/***/ "../../engine/dist/browser/Core/Utils/QuadTree.js"
-/*!********************************************************!*\
-  !*** ../../engine/dist/browser/Core/Utils/QuadTree.js ***!
-  \********************************************************/
+/***/ "../../engine/dist/browser/Core/Utils/SpatialHashGrid.js"
+/*!***************************************************************!*\
+  !*** ../../engine/dist/browser/Core/Utils/SpatialHashGrid.js ***!
+  \***************************************************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   QuadTree: () => (/* binding */ QuadTree)\n/* harmony export */ });\n/* harmony import */ var _Ranges_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Ranges.js */ \"../../engine/dist/browser/Core/Utils/Ranges.js\");\n/* harmony import */ var _Constants_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Constants.js */ \"../../engine/dist/browser/Core/Utils/Constants.js\");\n/* harmony import */ var _Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../Utils/MathUtils.js */ \"../../engine/dist/browser/Utils/MathUtils.js\");\n\n\n\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 < _Constants_js__WEBPACK_IMPORTED_MODULE_1__.subdivideCount; i++) {\n        const fixedIndex = i % _Constants_js__WEBPACK_IMPORTED_MODULE_1__.double;\n        this._subs.push(new QuadTree(new _Ranges_js__WEBPACK_IMPORTED_MODULE_0__.Rectangle(x + width * _Constants_js__WEBPACK_IMPORTED_MODULE_1__.half * fixedIndex, y + height * _Constants_js__WEBPACK_IMPORTED_MODULE_1__.half * (Math.round(i * _Constants_js__WEBPACK_IMPORTED_MODULE_1__.half) - fixedIndex), width * _Constants_js__WEBPACK_IMPORTED_MODULE_1__.half, height * _Constants_js__WEBPACK_IMPORTED_MODULE_1__.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_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.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/all/../../engine/dist/browser/Core/Utils/QuadTree.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   SpatialHashGrid: () => (/* binding */ SpatialHashGrid)\n/* harmony export */ });\n/* harmony import */ var _Ranges_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Ranges.js */ \"../../engine/dist/browser/Core/Utils/Ranges.js\");\n\nclass SpatialHashGrid {\n    _cellSize;\n    _cells = new Map();\n    _circlePool = [];\n    _circlePoolIdx;\n    _pendingCellSize;\n    _rectanglePool = [];\n    _rectanglePoolIdx;\n    constructor(cellSize){\n        this._cellSize = cellSize;\n        this._circlePoolIdx = 0;\n        this._rectanglePoolIdx = 0;\n    }\n    clear() {\n        this._cells.clear();\n        const pendingCellSize = this._pendingCellSize;\n        if (pendingCellSize) {\n            this._cellSize = pendingCellSize;\n        }\n        this._pendingCellSize = undefined;\n    }\n    insert(particle) {\n        const { x, y } = particle.getPosition(), key = this._cellKeyFromCoords(x, y);\n        if (!this._cells.has(key)) {\n            this._cells.set(key, []);\n        }\n        this._cells.get(key)?.push(particle);\n    }\n    query(range, check, out = []) {\n        const bounds = this._getRangeBounds(range);\n        if (!bounds) {\n            return out;\n        }\n        const minCellX = Math.floor(bounds.minX / this._cellSize), maxCellX = Math.floor(bounds.maxX / this._cellSize), minCellY = Math.floor(bounds.minY / this._cellSize), maxCellY = Math.floor(bounds.maxY / this._cellSize);\n        for(let cx = minCellX; cx <= maxCellX; cx++){\n            for(let cy = minCellY; cy <= maxCellY; cy++){\n                const key = `${cx}_${cy}`, cellParticles = this._cells.get(key);\n                if (!cellParticles) {\n                    continue;\n                }\n                for (const p of cellParticles){\n                    if (check && !check(p)) {\n                        continue;\n                    }\n                    if (range.contains(p.getPosition())) {\n                        out.push(p);\n                    }\n                }\n            }\n        }\n        return out;\n    }\n    queryCircle(position, radius, check, out = []) {\n        const circle = this._acquireCircle(position.x, position.y, radius), result = this.query(circle, check, out);\n        this._releaseShapes();\n        return result;\n    }\n    queryRectangle(position, size, check, out = []) {\n        const rect = this._acquireRectangle(position.x, position.y, size.width, size.height), result = this.query(rect, check, out);\n        this._releaseShapes();\n        return result;\n    }\n    setCellSize(cellSize) {\n        this._pendingCellSize = cellSize;\n    }\n    _acquireCircle(x, y, r) {\n        return (this._circlePool[this._circlePoolIdx++] ??= new _Ranges_js__WEBPACK_IMPORTED_MODULE_0__.Circle(x, y, r)).reset(x, y, r);\n    }\n    _acquireRectangle(x, y, w, h) {\n        return (this._rectanglePool[this._rectanglePoolIdx++] ??= new _Ranges_js__WEBPACK_IMPORTED_MODULE_0__.Rectangle(x, y, w, h)).reset(x, y, w, h);\n    }\n    _cellKeyFromCoords(x, y) {\n        const cellX = Math.floor(x / this._cellSize), cellY = Math.floor(y / this._cellSize);\n        return `${cellX}_${cellY}`;\n    }\n    _getRangeBounds(range) {\n        if (range instanceof _Ranges_js__WEBPACK_IMPORTED_MODULE_0__.Circle) {\n            const r = range.radius, { x, y } = range.position;\n            return {\n                minX: x - r,\n                maxX: x + r,\n                minY: y - r,\n                maxY: y + r\n            };\n        }\n        if (range instanceof _Ranges_js__WEBPACK_IMPORTED_MODULE_0__.Rectangle) {\n            const { x, y } = range.position, { width, height } = range.size;\n            return {\n                minX: x,\n                maxX: x + width,\n                minY: y,\n                maxY: y + height\n            };\n        }\n        return null;\n    }\n    _releaseShapes() {\n        this._circlePoolIdx = 0;\n        this._rectanglePoolIdx = 0;\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/all/../../engine/dist/browser/Core/Utils/SpatialHashGrid.js?\n}");
 
 /***/ }
 

package/esm/bundle.js

@@ -1,3 +1,2 @@
-import { loadAll } from "./index.js";
-export { loadAll };
 export * from "@tsparticles/engine";
+export { loadAll } from "./index.js";