@tsparticles/basic/tsparticles.basic.bundle.js

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.

/*!
 * Author : Matteo Bruni
 * MIT license: https://opensource.org/licenses/MIT
 * Demo / Generator : https://particles.js.org/
 * GitHub : https://www.github.com/matteobruni/tsparticles
 * How to use? : Check the GitHub README
 * v3.9.0
 */
/*
 * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
 * This devtool is neither made for production nor for readable output files.
 * It uses "eval()" calls to create a separate source file in the browser devtools.
 * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
 * or disable the default devtool with "devtool: false".
 * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
 */
(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory();
	else if(typeof define === 'function' && define.amd)
		define([], factory);
	else {
		var a = factory();
		for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
	}
})(this, () => {
return /******/ (() => { // webpackBootstrap
/******/ 	"use strict";
/******/ 	var __webpack_modules__ = ({

/***/ "../../engine/dist/browser/Core/Canvas.js":
/*!************************************************!*\
  !*** ../../engine/dist/browser/Core/Canvas.js ***!
  \************************************************/
/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {

eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Canvas: () => (/* binding */ Canvas)\n/* harmony export */ });\n/* harmony import */ var _Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../Utils/CanvasUtils.js */ \"../../engine/dist/browser/Utils/CanvasUtils.js\");\n/* harmony import */ var _Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Utils/Utils.js */ \"../../engine/dist/browser/Utils/Utils.js\");\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Utils/Constants.js */ \"../../engine/dist/browser/Core/Utils/Constants.js\");\n/* harmony import */ var _Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Utils/ColorUtils.js */ \"../../engine/dist/browser/Utils/ColorUtils.js\");\n\n\n\n\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  if (!element) {\n    return;\n  }\n  const elementStyle = element.style;\n  if (!elementStyle) {\n    return;\n  }\n  const keys = new Set();\n  for (const key in elementStyle) {\n    if (!Object.prototype.hasOwnProperty.call(elementStyle, key)) {\n      continue;\n    }\n    keys.add(elementStyle[key]);\n  }\n  for (const key in style) {\n    if (!Object.prototype.hasOwnProperty.call(style, key)) {\n      continue;\n    }\n    keys.add(style[key]);\n  }\n  for (const key of keys) {\n    const value = style.getPropertyValue(key);\n    if (!value) {\n      elementStyle.removeProperty(key);\n    } else {\n      elementStyle.setProperty(key, value, important ? \"important\" : \"\");\n    }\n  }\n}\nclass Canvas {\n  constructor(container, engine) {\n    this.container = container;\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      return [fColor, sColor];\n    };\n    this._initCover = async () => {\n      const options = this.container.actualOptions,\n        cover = options.backgroundMask.cover,\n        color = cover.color;\n      if (color) {\n        const coverRgb = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.rangeColorToRgb)(this._engine, color);\n        if (coverRgb) {\n          const coverColor = {\n            ...coverRgb,\n            a: cover.opacity\n          };\n          this._coverColorStyle = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.getStyleFromRgb)(coverColor, coverColor.a);\n        }\n      } else {\n        await new Promise((resolve, reject) => {\n          if (!cover.image) {\n            return;\n          }\n          const img = document.createElement(\"img\");\n          img.addEventListener(\"load\", () => {\n            this._coverImage = {\n              image: img,\n              opacity: cover.opacity\n            };\n            resolve();\n          });\n          img.addEventListener(\"error\", evt => {\n            reject(evt.error);\n          });\n          img.src = cover.image;\n        });\n      }\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 || !options.style || !Object.prototype.hasOwnProperty.call(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._initTrail = async () => {\n      const options = this.container.actualOptions,\n        trail = options.particles.move.trail,\n        trailFill = trail.fill;\n      if (!trail.enable) {\n        return;\n      }\n      const opacity = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.inverseFactorNumerator / trail.length;\n      if (trailFill.color) {\n        const fillColor = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.rangeColorToRgb)(this._engine, trailFill.color);\n        if (!fillColor) {\n          return;\n        }\n        this._trailFill = {\n          color: {\n            ...fillColor\n          },\n          opacity\n        };\n      } else {\n        await new Promise((resolve, reject) => {\n          if (!trailFill.image) {\n            return;\n          }\n          const img = document.createElement(\"img\");\n          img.addEventListener(\"load\", () => {\n            this._trailFill = {\n              image: img,\n              opacity\n            };\n            resolve();\n          });\n          img.addEventListener(\"error\", evt => {\n            reject(evt.error);\n          });\n          img.src = trailFill.image;\n        });\n      }\n    };\n    this._paintBase = baseColor => {\n      this.draw(ctx => (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.paintBase)(ctx, this.size, baseColor));\n    };\n    this._paintImage = (image, opacity) => {\n      this.draw(ctx => (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.paintImage)(ctx, this.size, image, opacity));\n    };\n    this._repairStyle = () => {\n      const element = this.element;\n      if (!element) {\n        return;\n      }\n      this._safeMutationObserver(observer => observer.disconnect());\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 || !(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  clear() {\n    const options = this.container.actualOptions,\n      trail = options.particles.move.trail,\n      trailFill = this._trailFill;\n    if (options.backgroundMask.enable) {\n      this.paint();\n    } else if (trail.enable && trail.length > _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.minimumLength && trailFill) {\n      if (trailFill.color) {\n        this._paintBase((0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.getStyleFromRgb)(trailFill.color, trailFill.opacity));\n      } else if (trailFill.image) {\n        this._paintImage(trailFill.image, trailFill.opacity);\n      }\n    } else if (options.clear) {\n      this.draw(ctx => {\n        (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.clear)(ctx, this.size);\n      });\n    }\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  drawAsync(cb) {\n    const ctx = this._context;\n    if (!ctx) {\n      return undefined;\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    if (!fColor) {\n      fColor = pfColor;\n    }\n    if (!sColor) {\n      sColor = psColor;\n    }\n    if (!fColor && !sColor) {\n      return;\n    }\n    this.draw(ctx => {\n      const container = this.container,\n        options = container.actualOptions,\n        zIndexOptions = particle.options.zIndex,\n        zIndexFactor = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.zIndexFactorOffset - particle.zIndexFactor,\n        zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate,\n        opacity = particle.bubble.opacity ?? particle.opacity?.value ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultOpacity,\n        strokeOpacity = particle.strokeOpacity ?? opacity,\n        zOpacity = opacity * zOpacityFactor,\n        zStrokeOpacity = strokeOpacity * zOpacityFactor,\n        transform = {},\n        colorStyles = {\n          fill: fColor ? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.getStyleFromHsl)(fColor, zOpacity) : undefined\n        };\n      colorStyles.stroke = sColor ? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.getStyleFromHsl)(sColor, zStrokeOpacity) : colorStyles.fill;\n      this._applyPreDrawUpdaters(ctx, particle, radius, zOpacity, colorStyles, transform);\n      (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.drawParticle)({\n        container,\n        context: ctx,\n        particle,\n        delta,\n        colorStyles,\n        backgroundMask: options.backgroundMask.enable,\n        composite: options.backgroundMask.composite,\n        radius: radius * zIndexFactor ** zIndexOptions.sizeRate,\n        opacity: zOpacity,\n        shadow: particle.options.shadow,\n        transform\n      });\n      this._applyPostDrawUpdaters(particle);\n    });\n  }\n  drawParticlePlugin(plugin, particle, delta) {\n    this.draw(ctx => (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.drawParticlePlugin)(ctx, plugin, particle, delta));\n  }\n  drawPlugin(plugin, delta) {\n    this.draw(ctx => (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.drawPlugin)(ctx, plugin, delta));\n  }\n  async init() {\n    this._safeMutationObserver(obs => obs.disconnect());\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    await this._initCover();\n    try {\n      await this._initTrail();\n    } catch (e) {\n      (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.getLogger)().error(e);\n    }\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 options = this.container.actualOptions,\n      background = options.background,\n      element = this.element;\n    if (!element) {\n      return;\n    }\n    const elementStyle = element.style;\n    if (!elementStyle) {\n      return;\n    }\n    if (background.color) {\n      const color = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.rangeColorToRgb)(this._engine, background.color);\n      elementStyle.backgroundColor = color ? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.getStyleFromRgb)(color, 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.values()) {\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    this._generated = canvas.dataset && _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    this._context = this.element.getContext(\"2d\");\n    this._safeMutationObserver(obs => obs.disconnect());\n    this.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    const options = this.container.actualOptions;\n    this.draw(ctx => {\n      if (options.backgroundMask.enable && options.backgroundMask.cover) {\n        (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.clear)(ctx, this.size);\n        if (this._coverImage) {\n          this._paintImage(this._coverImage.image, this._coverImage.opacity);\n        } else if (this._coverColorStyle) {\n          this._paintBase(this._coverColorStyle);\n        } else {\n          this._paintBase();\n        }\n      } else {\n        this._paintBase();\n      }\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 => obs.disconnect());\n    this._mutationObserver = undefined;\n    this.draw(ctx => (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.clear)(ctx, this.size));\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}");

/***/ }),

/***/ "../../engine/dist/browser/Core/Container.js":
/*!***************************************************!*\
  !*** ../../engine/dist/browser/Core/Container.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 */   Container: () => (/* binding */ Container)\n/* harmony export */ });\n/* harmony import */ var _Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../Utils/NumberUtils.js */ \"../../engine/dist/browser/Utils/NumberUtils.js\");\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Utils/Constants.js */ \"../../engine/dist/browser/Core/Utils/Constants.js\");\n/* harmony import */ var _Utils_Utils_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Utils/Utils.js */ \"../../engine/dist/browser/Utils/Utils.js\");\n/* harmony import */ var _Canvas_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Canvas.js */ \"../../engine/dist/browser/Core/Canvas.js\");\n/* harmony import */ var _Utils_EventListeners_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Utils/EventListeners.js */ \"../../engine/dist/browser/Core/Utils/EventListeners.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 _Options_Classes_Options_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Options/Classes/Options.js */ \"../../engine/dist/browser/Options/Classes/Options.js\");\n/* harmony import */ var _Particles_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./Particles.js */ \"../../engine/dist/browser/Core/Particles.js\");\n/* harmony import */ var _Retina_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./Retina.js */ \"../../engine/dist/browser/Core/Retina.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 && !container.destroyed;\n}\nfunction initDelta(value, fpsLimit = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.defaultFps, smooth = false) {\n  return {\n    value,\n    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  };\n}\nfunction loadContainerOptions(engine, container, ...sourceOptionsArr) {\n  const options = new _Options_Classes_Options_js__WEBPACK_IMPORTED_MODULE_6__.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._intersectionManager = entries => {\n      if (!guardCheck(this) || !this.actualOptions.pauseOnOutsideViewport) {\n        return;\n      }\n      for (const entry of entries) {\n        if (entry.target !== this.interactivity.element) {\n          continue;\n        }\n        if (entry.isIntersecting) {\n          void this.play();\n        } else {\n          this.pause();\n        }\n      }\n    };\n    this._nextFrame = 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        const delta = initDelta(timestamp - this._lastFrameTime, this.fpsLimit, this._smooth);\n        this.addLifeTime(delta.value);\n        this._lastFrameTime = timestamp;\n        if (delta.value > _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.millisecondsToSeconds) {\n          this.draw(false);\n          return;\n        }\n        this.particles.draw(delta);\n        if (!this.alive()) {\n          this.destroy();\n          return;\n        }\n        if (this.animationStatus) {\n          this.draw(false);\n        }\n      } catch (e) {\n        (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_2__.getLogger)().error(`${_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.errorPrefix} in animation loop`, e);\n      }\n    };\n    this._engine = engine;\n    this.id = Symbol(id);\n    this.fpsLimit = 120;\n    this._smooth = false;\n    this._delay = 0;\n    this._duration = 0;\n    this._lifeTime = 0;\n    this._firstStart = true;\n    this.started = false;\n    this.destroyed = false;\n    this._paused = true;\n    this._lastFrameTime = 0;\n    this.zLayers = 100;\n    this.pageHidden = false;\n    this._clickHandlers = new Map();\n    this._sourceOptions = sourceOptions;\n    this._initialSourceOptions = sourceOptions;\n    this.retina = new _Retina_js__WEBPACK_IMPORTED_MODULE_8__.Retina(this);\n    this.canvas = new _Canvas_js__WEBPACK_IMPORTED_MODULE_3__.Canvas(this, this._engine);\n    this.particles = new _Particles_js__WEBPACK_IMPORTED_MODULE_7__.Particles(this._engine, this);\n    this.pathGenerators = new Map();\n    this.interactivity = {\n      mouse: {\n        clicking: false,\n        inside: false\n      }\n    };\n    this.plugins = new Map();\n    this.effectDrawers = new Map();\n    this.shapeDrawers = new Map();\n    this._options = loadContainerOptions(this._engine, this);\n    this.actualOptions = loadContainerOptions(this._engine, this);\n    this._eventListeners = new _Utils_EventListeners_js__WEBPACK_IMPORTED_MODULE_4__.EventListeners(this);\n    this._intersectionObserver = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_2__.safeIntersectionObserver)(entries => this._intersectionManager(entries));\n    this._engine.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_5__.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  addClickHandler(callback) {\n    if (!guardCheck(this)) {\n      return;\n    }\n    const el = this.interactivity.element;\n    if (!el) {\n      return;\n    }\n    const clickOrTouchHandler = (e, pos, radius) => {\n        if (!guardCheck(this)) {\n          return;\n        }\n        const pxRatio = this.retina.pixelRatio,\n          posRetina = {\n            x: pos.x * pxRatio,\n            y: pos.y * pxRatio\n          },\n          particles = this.particles.quadTree.queryCircle(posRetina, radius * pxRatio);\n        callback(e, particles);\n      },\n      clickHandler = e => {\n        if (!guardCheck(this)) {\n          return;\n        }\n        const mouseEvent = e,\n          pos = {\n            x: mouseEvent.offsetX || mouseEvent.clientX,\n            y: mouseEvent.offsetY || mouseEvent.clientY\n          };\n        clickOrTouchHandler(e, pos, _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.clickRadius);\n      },\n      touchStartHandler = () => {\n        if (!guardCheck(this)) {\n          return;\n        }\n        touched = true;\n        touchMoved = false;\n      },\n      touchMoveHandler = () => {\n        if (!guardCheck(this)) {\n          return;\n        }\n        touchMoved = true;\n      },\n      touchEndHandler = e => {\n        if (!guardCheck(this)) {\n          return;\n        }\n        if (touched && !touchMoved) {\n          const touchEvent = e;\n          let lastTouch = touchEvent.touches[touchEvent.touches.length - _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.touchEndLengthOffset];\n          if (!lastTouch) {\n            lastTouch = touchEvent.changedTouches[touchEvent.changedTouches.length - _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.touchEndLengthOffset];\n            if (!lastTouch) {\n              return;\n            }\n          }\n          const element = this.canvas.element,\n            canvasRect = element ? element.getBoundingClientRect() : undefined,\n            pos = {\n              x: lastTouch.clientX - (canvasRect ? canvasRect.left : _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.minCoordinate),\n              y: lastTouch.clientY - (canvasRect ? canvasRect.top : _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.minCoordinate)\n            };\n          clickOrTouchHandler(e, pos, Math.max(lastTouch.radiusX, lastTouch.radiusY));\n        }\n        touched = false;\n        touchMoved = false;\n      },\n      touchCancelHandler = () => {\n        if (!guardCheck(this)) {\n          return;\n        }\n        touched = false;\n        touchMoved = false;\n      };\n    let touched = false,\n      touchMoved = false;\n    this._clickHandlers.set(\"click\", clickHandler);\n    this._clickHandlers.set(\"touchstart\", touchStartHandler);\n    this._clickHandlers.set(\"touchmove\", touchMoveHandler);\n    this._clickHandlers.set(\"touchend\", touchEndHandler);\n    this._clickHandlers.set(\"touchcancel\", touchCancelHandler);\n    for (const [key, handler] of this._clickHandlers) {\n      el.addEventListener(key, handler);\n    }\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  clearClickHandlers() {\n    if (!guardCheck(this)) {\n      return;\n    }\n    for (const [key, handler] of this._clickHandlers) {\n      this.interactivity.element?.removeEventListener(key, handler);\n    }\n    this._clickHandlers.clear();\n  }\n  destroy(remove = true) {\n    if (!guardCheck(this)) {\n      return;\n    }\n    this.stop();\n    this.clearClickHandlers();\n    this.particles.destroy();\n    this.canvas.destroy();\n    for (const effectDrawer of this.effectDrawers.values()) {\n      effectDrawer.destroy?.(this);\n    }\n    for (const shapeDrawer of this.shapeDrawers.values()) {\n      shapeDrawer.destroy?.(this);\n    }\n    for (const key of this.effectDrawers.keys()) {\n      this.effectDrawers.delete(key);\n    }\n    for (const key of this.shapeDrawers.keys()) {\n      this.shapeDrawers.delete(key);\n    }\n    this._engine.clearPlugins(this);\n    this.destroyed = true;\n    if (remove) {\n      const mainArr = this._engine.items,\n        idx = mainArr.findIndex(t => t === 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_5__.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_NumberUtils_js__WEBPACK_IMPORTED_MODULE_0__.animate)(timestamp => frame(timestamp));\n  }\n  async export(type, options = {}) {\n    for (const plugin of this.plugins.values()) {\n      if (!plugin.export) {\n        continue;\n      }\n      const res = await plugin.export(type, options);\n      if (!res.supported) {\n        continue;\n      }\n      return res.blob;\n    }\n    (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_2__.getLogger)().error(`${_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.errorPrefix} - Export plugin with type ${type} not found`);\n  }\n  handleClickMode(mode) {\n    if (!guardCheck(this)) {\n      return;\n    }\n    this.particles.handleClickMode(mode);\n    for (const plugin of this.plugins.values()) {\n      plugin.handleClickMode?.(mode);\n    }\n  }\n  async init() {\n    if (!guardCheck(this)) {\n      return;\n    }\n    const effects = this._engine.getSupportedEffects();\n    for (const type of effects) {\n      const drawer = this._engine.getEffectDrawer(type);\n      if (drawer) {\n        this.effectDrawers.set(type, drawer);\n      }\n    }\n    const shapes = this._engine.getSupportedShapes();\n    for (const type of shapes) {\n      const drawer = this._engine.getShapeDrawer(type);\n      if (drawer) {\n        this.shapeDrawers.set(type, drawer);\n      }\n    }\n    await this.particles.initPlugins();\n    this._options = loadContainerOptions(this._engine, this, this._initialSourceOptions, this.sourceOptions);\n    this.actualOptions = loadContainerOptions(this._engine, this, this._options);\n    const availablePlugins = await this._engine.getAvailablePlugins(this);\n    for (const [id, plugin] of availablePlugins) {\n      this.plugins.set(id, plugin);\n    }\n    this.retina.init();\n    await this.canvas.init();\n    this.updateActualOptions();\n    this.canvas.initBackground();\n    this.canvas.resize();\n    const {\n      zLayers,\n      duration,\n      delay,\n      fpsLimit,\n      smooth\n    } = this.actualOptions;\n    this.zLayers = zLayers;\n    this._duration = (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(duration) * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.millisecondsToSeconds;\n    this._delay = (0,_Utils_NumberUtils_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 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    for (const plugin of this.plugins.values()) {\n      await plugin.init?.();\n    }\n    this._engine.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_5__.EventType.containerInit, {\n      container: this\n    });\n    await this.particles.init();\n    this.particles.setDensity();\n    for (const plugin of this.plugins.values()) {\n      plugin.particlesSetup?.();\n    }\n    this._engine.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_5__.EventType.particlesSetup, {\n      container: this\n    });\n  }\n  async loadTheme(name) {\n    if (!guardCheck(this)) {\n      return;\n    }\n    this._currentTheme = name;\n    await this.refresh();\n  }\n  pause() {\n    if (!guardCheck(this)) {\n      return;\n    }\n    if (this._drawAnimationFrame !== undefined) {\n      (0,_Utils_NumberUtils_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.values()) {\n      plugin.pause?.();\n    }\n    if (!this.pageHidden) {\n      this._paused = true;\n    }\n    this._engine.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_5__.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.values()) {\n        if (plugin.play) {\n          plugin.play();\n        }\n      }\n    }\n    this._engine.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_5__.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        if (this.interactivity.element instanceof HTMLElement && this._intersectionObserver) {\n          this._intersectionObserver.observe(this.interactivity.element);\n        }\n        for (const plugin of this.plugins.values()) {\n          await plugin.start?.();\n        }\n        this._engine.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_5__.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    if (this.interactivity.element instanceof HTMLElement && this._intersectionObserver) {\n      this._intersectionObserver.unobserve(this.interactivity.element);\n    }\n    for (const plugin of this.plugins.values()) {\n      plugin.stop?.();\n    }\n    for (const key of this.plugins.keys()) {\n      this.plugins.delete(key);\n    }\n    this._sourceOptions = this._options;\n    this._engine.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_5__.EventType.containerStopped, {\n      container: this\n    });\n  }\n  updateActualOptions() {\n    this.actualOptions.responsive = [];\n    const newMaxWidth = this.actualOptions.setResponsive(this.canvas.size.width, this.retina.pixelRatio, this._options);\n    this.actualOptions.setTheme(this._currentTheme);\n    if (this._responsiveMaxWidth === newMaxWidth) {\n      return false;\n    }\n    this._responsiveMaxWidth = newMaxWidth;\n    return true;\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/basic/../../engine/dist/browser/Core/Container.js?\n}");

/***/ }),

/***/ "../../engine/dist/browser/Core/Engine.js":
/*!************************************************!*\
  !*** ../../engine/dist/browser/Core/Engine.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 */   Engine: () => (/* binding */ Engine)\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_Utils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Utils/Utils.js */ \"../../engine/dist/browser/Utils/Utils.js\");\n/* harmony import */ var _Container_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Container.js */ \"../../engine/dist/browser/Core/Container.js\");\n/* harmony import */ var _Utils_EventDispatcher_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Utils/EventDispatcher.js */ \"../../engine/dist/browser/Utils/EventDispatcher.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 _Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Utils/NumberUtils.js */ \"../../engine/dist/browser/Utils/NumberUtils.js\");\n\n\n\n\n\n\nasync function getItemsFromInitializer(container, map, initializers, force = false) {\n  let res = map.get(container);\n  if (!res || force) {\n    res = await Promise.all([...initializers.values()].map(t => t(container)));\n    map.set(container, res);\n  }\n  return res;\n}\nasync function getDataFromUrl(data) {\n  const url = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.itemFromSingleOrMultiple)(data.url, data.index);\n  if (!url) {\n    return data.fallback;\n  }\n  const response = await fetch(url);\n  if (response.ok) {\n    return await response.json();\n  }\n  (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.getLogger)().error(`${_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.errorPrefix} ${response.status} while retrieving config file`);\n  return data.fallback;\n}\nconst getCanvasFromContainer = domContainer => {\n    let canvasEl;\n    if (domContainer instanceof HTMLCanvasElement || domContainer.tagName.toLowerCase() === _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.canvasTag) {\n      canvasEl = domContainer;\n      if (!canvasEl.dataset[_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.generatedAttribute]) {\n        canvasEl.dataset[_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.generatedAttribute] = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.generatedFalse;\n      }\n    } else {\n      const existingCanvases = domContainer.getElementsByTagName(_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.canvasTag);\n      if (existingCanvases.length) {\n        canvasEl = existingCanvases[_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.canvasFirstIndex];\n        canvasEl.dataset[_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.generatedAttribute] = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.generatedFalse;\n      } else {\n        canvasEl = document.createElement(_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.canvasTag);\n        canvasEl.dataset[_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.generatedAttribute] = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.generatedTrue;\n        domContainer.appendChild(canvasEl);\n      }\n    }\n    const fullPercent = \"100%\";\n    if (!canvasEl.style.width) {\n      canvasEl.style.width = fullPercent;\n    }\n    if (!canvasEl.style.height) {\n      canvasEl.style.height = fullPercent;\n    }\n    return canvasEl;\n  },\n  getDomContainer = (id, source) => {\n    let domContainer = source ?? document.getElementById(id);\n    if (domContainer) {\n      return domContainer;\n    }\n    domContainer = document.createElement(\"div\");\n    domContainer.id = id;\n    domContainer.dataset[_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.generatedAttribute] = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.generatedTrue;\n    document.body.append(domContainer);\n    return domContainer;\n  };\nclass Engine {\n  constructor() {\n    this._configs = new Map();\n    this._domArray = [];\n    this._eventDispatcher = new _Utils_EventDispatcher_js__WEBPACK_IMPORTED_MODULE_3__.EventDispatcher();\n    this._initialized = false;\n    this.plugins = [];\n    this.colorManagers = new Map();\n    this.easingFunctions = new Map();\n    this._initializers = {\n      interactors: new Map(),\n      movers: new Map(),\n      updaters: new Map()\n    };\n    this.interactors = new Map();\n    this.movers = new Map();\n    this.updaters = new Map();\n    this.presets = new Map();\n    this.effectDrawers = new Map();\n    this.shapeDrawers = new Map();\n    this.pathGenerators = new Map();\n  }\n  get configs() {\n    const res = {};\n    for (const [name, config] of this._configs) {\n      res[name] = config;\n    }\n    return res;\n  }\n  get items() {\n    return this._domArray;\n  }\n  get version() {\n    return \"3.9.0\";\n  }\n  async addColorManager(manager, refresh = true) {\n    this.colorManagers.set(manager.key, manager);\n    await this.refresh(refresh);\n  }\n  addConfig(config) {\n    const key = config.key ?? config.name ?? \"default\";\n    this._configs.set(key, config);\n    this._eventDispatcher.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__.EventType.configAdded, {\n      data: {\n        name: key,\n        config\n      }\n    });\n  }\n  async addEasing(name, easing, refresh = true) {\n    if (this.getEasing(name)) {\n      return;\n    }\n    this.easingFunctions.set(name, easing);\n    await this.refresh(refresh);\n  }\n  async addEffect(effect, drawer, refresh = true) {\n    (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.executeOnSingleOrMultiple)(effect, type => {\n      if (!this.getEffectDrawer(type)) {\n        this.effectDrawers.set(type, drawer);\n      }\n    });\n    await this.refresh(refresh);\n  }\n  addEventListener(type, listener) {\n    this._eventDispatcher.addEventListener(type, listener);\n  }\n  async addInteractor(name, interactorInitializer, refresh = true) {\n    this._initializers.interactors.set(name, interactorInitializer);\n    await this.refresh(refresh);\n  }\n  async addMover(name, moverInitializer, refresh = true) {\n    this._initializers.movers.set(name, moverInitializer);\n    await this.refresh(refresh);\n  }\n  async addParticleUpdater(name, updaterInitializer, refresh = true) {\n    this._initializers.updaters.set(name, updaterInitializer);\n    await this.refresh(refresh);\n  }\n  async addPathGenerator(name, generator, refresh = true) {\n    if (!this.getPathGenerator(name)) {\n      this.pathGenerators.set(name, generator);\n    }\n    await this.refresh(refresh);\n  }\n  async addPlugin(plugin, refresh = true) {\n    if (!this.getPlugin(plugin.id)) {\n      this.plugins.push(plugin);\n    }\n    await this.refresh(refresh);\n  }\n  async addPreset(preset, options, override = false, refresh = true) {\n    if (override || !this.getPreset(preset)) {\n      this.presets.set(preset, options);\n    }\n    await this.refresh(refresh);\n  }\n  async addShape(drawer, refresh = true) {\n    for (const validType of drawer.validTypes) {\n      if (this.getShapeDrawer(validType)) {\n        continue;\n      }\n      this.shapeDrawers.set(validType, drawer);\n    }\n    await this.refresh(refresh);\n  }\n  checkVersion(pluginVersion) {\n    if (this.version === pluginVersion) {\n      return;\n    }\n    throw new Error(`The tsParticles version is different from the loaded plugins version. Engine version: ${this.version}. Plugin version: ${pluginVersion}`);\n  }\n  clearPlugins(container) {\n    this.updaters.delete(container);\n    this.movers.delete(container);\n    this.interactors.delete(container);\n  }\n  dispatchEvent(type, args) {\n    this._eventDispatcher.dispatchEvent(type, args);\n  }\n  dom() {\n    return this.items;\n  }\n  domItem(index) {\n    return this.item(index);\n  }\n  async getAvailablePlugins(container) {\n    const res = new Map();\n    for (const plugin of this.plugins) {\n      if (plugin.needsPlugin(container.actualOptions)) {\n        res.set(plugin.id, await plugin.getPlugin(container));\n      }\n    }\n    return res;\n  }\n  getEasing(name) {\n    return this.easingFunctions.get(name) ?? (value => value);\n  }\n  getEffectDrawer(type) {\n    return this.effectDrawers.get(type);\n  }\n  async getInteractors(container, force = false) {\n    return getItemsFromInitializer(container, this.interactors, this._initializers.interactors, force);\n  }\n  async getMovers(container, force = false) {\n    return getItemsFromInitializer(container, this.movers, this._initializers.movers, force);\n  }\n  getPathGenerator(type) {\n    return this.pathGenerators.get(type);\n  }\n  getPlugin(plugin) {\n    return this.plugins.find(t => t.id === plugin);\n  }\n  getPreset(preset) {\n    return this.presets.get(preset);\n  }\n  getShapeDrawer(type) {\n    return this.shapeDrawers.get(type);\n  }\n  getSupportedEffects() {\n    return this.effectDrawers.keys();\n  }\n  getSupportedShapes() {\n    return this.shapeDrawers.keys();\n  }\n  async getUpdaters(container, force = false) {\n    return getItemsFromInitializer(container, this.updaters, this._initializers.updaters, force);\n  }\n  init() {\n    if (this._initialized) {\n      return;\n    }\n    this._initialized = true;\n  }\n  item(index) {\n    const {\n        items\n      } = this,\n      item = items[index];\n    if (!item || item.destroyed) {\n      items.splice(index, _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_