@tsparticles/basic 4.0.0-alpha.8 → 4.0.0-beta.0

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.0
  */
 "use strict";
 /*
@@ -23,7 +23,7 @@
   \************************************************/
 (__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/basic/../../engine/dist/browser/Core/Canvas.js?\n}");
+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, 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, 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 Canvas {\n    container;\n    element;\n    size;\n    zoom = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultZoom;\n    _canvasClearPlugins;\n    _canvasPaintPlugins;\n    _canvasSettings;\n    _clearDrawPlugins;\n    _colorPlugins;\n    _context;\n    _drawParticlePlugins;\n    _drawParticlesCleanupPlugins;\n    _drawParticlesSetupPlugins;\n    _drawPlugins;\n    _drawSettingsCleanupPlugins;\n    _drawSettingsSetupPlugins;\n    _engine;\n    _generated;\n    _mutationObserver;\n    _originalStyle;\n    _pointerEvents;\n    _postDrawUpdaters;\n    _preDrawUpdaters;\n    _resizePlugins;\n    _reusableColorStyles = {};\n    _reusablePluginColors = [\n        undefined,\n        undefined\n    ];\n    _reusableTransform = {};\n    _standardSize;\n    _zoomCenter;\n    constructor(container, engine){\n        this.container = container;\n        this._engine = engine;\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._context = null;\n        this._generated = false;\n        this._preDrawUpdaters = [];\n        this._postDrawUpdaters = [];\n        this._resizePlugins = [];\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        this._pointerEvents = \"none\";\n    }\n    get settings() {\n        return this._canvasSettings;\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._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        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        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_2__.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_2__.zIndexFactorOffset - particle.zIndexFactor, { fillOpacity, opacity, strokeOpacity } = particle.getOpacity(), transform = this._reusableTransform, colorStyles = this._reusableColorStyles, fill = fColor ? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.getStyleFromHsl)(fColor, container.hdr, fillOpacity * opacity) : undefined, stroke = sColor ? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.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    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_2__.half / pxRatio,\n            y: height * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.half / pxRatio\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 { 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_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        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.resize) {\n                this._resizePlugins.push(plugin);\n            }\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.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, 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._canvasSettings = {\n            alpha: true,\n            colorSpace: canSupportHdrQuery?.matches && container.hdr ? \"display-p3\" : \"srgb\",\n            desynchronized: true,\n            willReadFrequently: false\n        };\n        this._context = this.element.getContext(\"2d\", this._canvasSettings);\n        if (this._context) {\n            this._context.globalCompositeOperation = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultCompositeValue;\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._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.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, 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.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, needsRefresh = container.updateActualOptions();\n        container.particles.setDensity();\n        this._applyResizePlugins();\n        if (needsRefresh) {\n            await container.refresh();\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    _applyResizePlugins = ()=>{\n        for (const plugin of this._resizePlugins){\n            plugin.resize?.();\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_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    _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_1__.getFullScreenStyle)(this.container.actualOptions.fullScreen.zIndex), true);\n    };\n}\n\n\n//# sourceURL=webpack://@tsparticles/basic/../../engine/dist/browser/Core/Canvas.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/basic/../../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 _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    actualOptions;\n    canvas;\n    destroyed;\n    fpsLimit;\n    hdr;\n    id;\n    pageHidden;\n    particleCreatedPlugins;\n    particleDestroyedPlugins;\n    particlePositionPlugins;\n    particles;\n    plugins;\n    retina;\n    started;\n    zLayers;\n    _delay;\n    _delayTimeout;\n    _delta = {\n        value: 0,\n        factor: 0\n    };\n    _drawAnimationFrame;\n    _duration;\n    _engine;\n    _eventListeners;\n    _firstStart;\n    _initialSourceOptions;\n    _lastFrameTime;\n    _lifeTime;\n    _options;\n    _paused;\n    _smooth;\n    _sourceOptions;\n    constructor(engine, id, sourceOptions){\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.plugins = [];\n        this.particleDestroyedPlugins = [];\n        this.particleCreatedPlugins = [];\n        this.particlePositionPlugins = [];\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    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 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, 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        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._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        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._engine.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__.EventType.containerInit, {\n            container: this\n        });\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.particleCreatedPlugins.length = 0;\n        this.particleDestroyedPlugins.length = 0;\n        this.particlePositionPlugins.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    _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}\n\n\n//# sourceURL=webpack://@tsparticles/basic/../../engine/dist/browser/Core/Container.js?\n}");
 
 /***/ },
 
@@ -43,7 +43,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 */   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/basic/../../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    container;\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    _engine;\n    constructor(engine, container){\n        this.container = container;\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, shapeDrawer = this.shape ? container.particles.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.particles.updaters){\n            updater.particleDestroyed?.(this, override);\n        }\n        this._engine.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_5__.EventType.particleDestroyed, {\n            container: this.container,\n            data: {\n                particle: this\n            }\n        });\n    }\n    draw(delta) {\n        const container = this.container, canvas = container.canvas;\n        canvas.drawParticlePlugins(this, delta);\n        canvas.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        };\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._engine, 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.particles.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.particles.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.particles.effectDrawers.get(this.effect);\n        }\n        if (effectDrawer?.loadEffect) {\n            effectDrawer.loadEffect(this);\n        }\n        if (this.shape) {\n            shapeDrawer = container.particles.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 particles.updaters){\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.particles.updaters){\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/basic/../../engine/dist/browser/Core/Particle.js?\n}");
 
 /***/ },
 
@@ -53,7 +53,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 */   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/basic/../../engine/dist/browser/Core/Particles.js?\n}");
+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_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 Particles {\n    checkParticlePositionPlugins;\n    effectDrawers;\n    grid;\n    shapeDrawers;\n    updaters;\n    _array;\n    _container;\n    _engine;\n    _groupLimits;\n    _limit;\n    _maxZIndex;\n    _minZIndex;\n    _needsSort;\n    _nextId;\n    _particleResetPlugins;\n    _particleUpdatePlugins;\n    _pool;\n    _postParticleUpdatePlugins;\n    _postUpdatePlugins;\n    _resizeFactor;\n    _updatePlugins;\n    _zArray;\n    constructor(engine, container){\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._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.effectDrawers = new Map();\n        this.shapeDrawers = new Map();\n        this.updaters = [];\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._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                this._pool.push(particle);\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_5__.getLogger)().warning(`error adding particle: ${e}`);\n        }\n        return undefined;\n    }\n    clear() {\n        this._array = [];\n        this._zArray = [];\n    }\n    destroy() {\n        const container = this._container;\n        for (const [, effectDrawer] of this.effectDrawers){\n            effectDrawer.destroy?.(container);\n        }\n        for (const [, shapeDrawer] of this.shapeDrawers){\n            shapeDrawer.destroy?.(container);\n        }\n        this._array = [];\n        this._pool.length = 0;\n        this._zArray = [];\n        this.effectDrawers = new Map();\n        this.shapeDrawers = new Map();\n        this.updaters = [];\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.initPlugins();\n        for (const drawer of this.effectDrawers.values()){\n            await drawer.init?.(container);\n        }\n        for (const drawer of this.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    async initPlugins() {\n        const container = this._container;\n        this.effectDrawers = await this._engine.getEffectDrawers(container, true);\n        this.shapeDrawers = await this._engine.getShapeDrawers(container, true);\n        this.updaters = await this._engine.getUpdaters(container, true);\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, 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._engine, 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        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 this._postUpdatePlugins){\n            plugin.postUpdate?.(delta);\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 this._postParticleUpdatePlugins){\n                    plugin.postParticleUpdate?.(particle, delta);\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 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._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}\n\n\n//# sourceURL=webpack://@tsparticles/basic/../../engine/dist/browser/Core/Particles.js?\n}");
 
 /***/ },
 
@@ -63,7 +63,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/basic/../../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    maxSpeed;\n    pixelRatio;\n    reduceFactor;\n    sizeAnimationSpeed;\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        const particles = options.particles, 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, ratio = this.pixelRatio, moveOptions = options.move, moveDistance = moveOptions.distance, 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\n//# sourceURL=webpack://@tsparticles/basic/../../engine/dist/browser/Core/Retina.js?\n}");
 
 /***/ },
 
@@ -73,17 +73,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/basic/../../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/basic/../../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/basic/../../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/basic/../../engine/dist/browser/Core/Utils/SpatialHashGrid.js?\n}");
 
 /***/ }
 

package/esm/bundle.js

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

package/esm/index.js

@@ -1,15 +1,27 @@
 export async function loadBasic(engine) {
-    engine.checkVersion("4.0.0-alpha.8");
+    engine.checkVersion("4.0.0-beta.0");
     await engine.register(async (e) => {
-        const { loadHexColorPlugin } = await import("@tsparticles/plugin-hex-color"), { loadHslColorPlugin } = await import("@tsparticles/plugin-hsl-color"), { loadRgbColorPlugin } = await import("@tsparticles/plugin-rgb-color"), { loadBaseMover } = await import("@tsparticles/move-base"), { loadCircleShape } = await import("@tsparticles/shape-circle"), { loadColorUpdater } = await import("@tsparticles/updater-color"), { loadOpacityUpdater } = await import("@tsparticles/updater-opacity"), { loadOutModesUpdater } = await import("@tsparticles/updater-out-modes"), { loadSizeUpdater } = await import("@tsparticles/updater-size");
-        await loadHexColorPlugin(e);
-        await loadHslColorPlugin(e);
-        await loadRgbColorPlugin(e);
-        await loadBaseMover(e);
-        await loadCircleShape(e);
-        await loadColorUpdater(e);
-        await loadOpacityUpdater(e);
-        await loadOutModesUpdater(e);
-        await loadSizeUpdater(e);
+        const [{ loadHexColorPlugin }, { loadHslColorPlugin }, { loadRgbColorPlugin }, { loadMovePlugin }, { loadCircleShape }, { loadFillColorUpdater }, { loadOpacityUpdater }, { loadOutModesUpdater }, { loadSizeUpdater },] = await Promise.all([
+            import("@tsparticles/plugin-hex-color"),
+            import("@tsparticles/plugin-hsl-color"),
+            import("@tsparticles/plugin-rgb-color"),
+            import("@tsparticles/plugin-move"),
+            import("@tsparticles/shape-circle"),
+            import("@tsparticles/updater-fill-color"),
+            import("@tsparticles/updater-opacity"),
+            import("@tsparticles/updater-out-modes"),
+            import("@tsparticles/updater-size"),
+        ]);
+        await Promise.all([
+            loadHexColorPlugin(e),
+            loadHslColorPlugin(e),
+            loadRgbColorPlugin(e),
+            loadMovePlugin(e),
+            loadCircleShape(e),
+            loadFillColorUpdater(e),
+            loadOpacityUpdater(e),
+            loadOutModesUpdater(e),
+            loadSizeUpdater(e),
+        ]);
     });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/basic",
-  "version": "4.0.0-alpha.8",
+  "version": "4.0.0-beta.0",
   "description": "Easily create highly customizable particle animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -99,16 +99,16 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@tsparticles/engine": "4.0.0-alpha.8",
-    "@tsparticles/move-base": "4.0.0-alpha.8",
-    "@tsparticles/plugin-hex-color": "4.0.0-alpha.8",
-    "@tsparticles/plugin-hsl-color": "4.0.0-alpha.8",
-    "@tsparticles/plugin-rgb-color": "4.0.0-alpha.8",
-    "@tsparticles/shape-circle": "4.0.0-alpha.8",
-    "@tsparticles/updater-color": "4.0.0-alpha.8",
-    "@tsparticles/updater-opacity": "4.0.0-alpha.8",
-    "@tsparticles/updater-out-modes": "4.0.0-alpha.8",
-    "@tsparticles/updater-size": "4.0.0-alpha.8"
+    "@tsparticles/engine": "4.0.0-beta.0",
+    "@tsparticles/plugin-hex-color": "4.0.0-beta.0",
+    "@tsparticles/plugin-hsl-color": "4.0.0-beta.0",
+    "@tsparticles/plugin-move": "4.0.0-beta.0",
+    "@tsparticles/plugin-rgb-color": "4.0.0-beta.0",
+    "@tsparticles/shape-circle": "4.0.0-beta.0",
+    "@tsparticles/updater-fill-color": "4.0.0-beta.0",
+    "@tsparticles/updater-opacity": "4.0.0-beta.0",
+    "@tsparticles/updater-out-modes": "4.0.0-beta.0",
+    "@tsparticles/updater-size": "4.0.0-beta.0"
   },
   "publishConfig": {
     "access": "public"

package/plugins_colors_hex_dist_browser_HexColorManager_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.0
  */
 "use strict";
 /*
@@ -23,7 +23,7 @@
   \****************************************************************/
 (__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 */   HexColorManager: () => (/* binding */ HexColorManager)\n/* harmony export */ });\nvar RgbIndexes;\n(function (RgbIndexes) {\n  RgbIndexes[RgbIndexes[\"r\"] = 1] = \"r\";\n  RgbIndexes[RgbIndexes[\"g\"] = 2] = \"g\";\n  RgbIndexes[RgbIndexes[\"b\"] = 3] = \"b\";\n  RgbIndexes[RgbIndexes[\"a\"] = 4] = \"a\";\n})(RgbIndexes || (RgbIndexes = {}));\nconst shorthandHexRegex = /^#?([a-f\\d])([a-f\\d])([a-f\\d])([a-f\\d])?$/i,\n  hexRegex = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})?$/i,\n  hexRadix = 16,\n  defaultAlpha = 1,\n  alphaFactor = 0xff;\nclass HexColorManager {\n  constructor() {\n    this.key = \"hex\";\n  }\n  accepts(input) {\n    return input.startsWith(\"#\");\n  }\n  handleColor(color) {\n    return this._parseString(color.value);\n  }\n  handleRangeColor(color) {\n    return this._parseString(color.value);\n  }\n  parseString(input) {\n    return this._parseString(input);\n  }\n  _parseString(hexColor) {\n    if (typeof hexColor !== \"string\" || !this.accepts(hexColor)) {\n      return;\n    }\n    const hexFixed = hexColor.replace(shorthandHexRegex, (_, r, g, b, a) => {\n        return r + r + g + g + b + b + (a !== undefined ? a + a : \"\");\n      }),\n      result = hexRegex.exec(hexFixed);\n    return result ? {\n      a: result[RgbIndexes.a] ? parseInt(result[RgbIndexes.a], hexRadix) / alphaFactor : defaultAlpha,\n      b: parseInt(result[RgbIndexes.b] ?? \"0\", hexRadix),\n      g: parseInt(result[RgbIndexes.g] ?? \"0\", hexRadix),\n      r: parseInt(result[RgbIndexes.r] ?? \"0\", hexRadix)\n    } : undefined;\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/basic/../../plugins/colors/hex/dist/browser/HexColorManager.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   HexColorManager: () => (/* binding */ HexColorManager)\n/* harmony export */ });\nvar RgbIndexes;\n(function(RgbIndexes) {\n    RgbIndexes[RgbIndexes[\"r\"] = 1] = \"r\";\n    RgbIndexes[RgbIndexes[\"g\"] = 2] = \"g\";\n    RgbIndexes[RgbIndexes[\"b\"] = 3] = \"b\";\n    RgbIndexes[RgbIndexes[\"a\"] = 4] = \"a\";\n})(RgbIndexes || (RgbIndexes = {}));\nconst shorthandHexRegex = /^#?([a-f\\d])([a-f\\d])([a-f\\d])([a-f\\d])?$/i, hexRegex = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})?$/i, hexRadix = 16, defaultAlpha = 1, alphaFactor = 0xff;\nclass HexColorManager {\n    accepts(input) {\n        return input.startsWith(\"#\");\n    }\n    handleColor(color) {\n        return this._parseString(color.value);\n    }\n    handleRangeColor(color) {\n        return this._parseString(color.value);\n    }\n    parseString(input) {\n        return this._parseString(input);\n    }\n    _parseString(hexColor) {\n        if (typeof hexColor !== \"string\" || !this.accepts(hexColor)) {\n            return;\n        }\n        const hexFixed = hexColor.replace(shorthandHexRegex, (_, r, g, b, a)=>{\n            return r + r + g + g + b + b + (a === undefined ? \"\" : a + a);\n        }), result = hexRegex.exec(hexFixed);\n        return result ? {\n            a: result[RgbIndexes.a] ? Number.parseInt(result[RgbIndexes.a], hexRadix) / alphaFactor : defaultAlpha,\n            b: Number.parseInt(result[RgbIndexes.b] ?? \"0\", hexRadix),\n            g: Number.parseInt(result[RgbIndexes.g] ?? \"0\", hexRadix),\n            r: Number.parseInt(result[RgbIndexes.r] ?? \"0\", hexRadix)\n        } : undefined;\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/basic/../../plugins/colors/hex/dist/browser/HexColorManager.js?\n}");
 
 /***/ }