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

package/shapes_heart_dist_browser_HeartDrawer_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v4.0.0-alpha.8
+ * v4.0.0-beta.1
  */
 "use strict";
 /*
@@ -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 */   HeartDrawer: () => (/* binding */ HeartDrawer)\n/* harmony export */ });\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Utils.js */ \"../../shapes/heart/dist/browser/Utils.js\");\n\nclass HeartDrawer {\n  constructor() {\n    this.validTypes = [\"heart\"];\n  }\n  draw(data) {\n    (0,_Utils_js__WEBPACK_IMPORTED_MODULE_0__.drawHeart)(data);\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/heart/dist/browser/HeartDrawer.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   HeartDrawer: () => (/* binding */ HeartDrawer)\n/* harmony export */ });\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Utils.js */ \"../../shapes/heart/dist/browser/Utils.js\");\n\nclass HeartDrawer {\n    draw(data) {\n        (0,_Utils_js__WEBPACK_IMPORTED_MODULE_0__.drawHeart)(data);\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/heart/dist/browser/HeartDrawer.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 */   drawHeart: () => (/* binding */ drawHeart)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"../../engine/dist/browser/index.js\");\n\nfunction drawHeart(data) {\n  const {\n      context,\n      radius\n    } = data,\n    diameter = radius * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.double,\n    halfRadius = radius * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half,\n    radiusAndHalf = radius + halfRadius,\n    x = -radius,\n    y = -radius;\n  context.moveTo(x, y + halfRadius);\n  context.quadraticCurveTo(x, y, x + halfRadius, y);\n  context.quadraticCurveTo(x + radius, y, x + radius, y + halfRadius);\n  context.quadraticCurveTo(x + radius, y, x + radiusAndHalf, y);\n  context.quadraticCurveTo(x + diameter, y, x + diameter, y + halfRadius);\n  context.quadraticCurveTo(x + diameter, y + radius, x + radiusAndHalf, y + radiusAndHalf);\n  context.lineTo(x + radius, y + diameter);\n  context.lineTo(x + halfRadius, y + radiusAndHalf);\n  context.quadraticCurveTo(x, y + radius, x, y + halfRadius);\n}\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/heart/dist/browser/Utils.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   drawHeart: () => (/* binding */ drawHeart)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"../../engine/dist/browser/index.js\");\n\nfunction drawHeart(data) {\n    const { context, radius } = data, diameter = radius * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.double, halfRadius = radius * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half, radiusAndHalf = radius + halfRadius, x = -radius, y = -radius;\n    context.moveTo(x, y + halfRadius);\n    context.quadraticCurveTo(x, y, x + halfRadius, y);\n    context.quadraticCurveTo(x + radius, y, x + radius, y + halfRadius);\n    context.quadraticCurveTo(x + radius, y, x + radiusAndHalf, y);\n    context.quadraticCurveTo(x + diameter, y, x + diameter, y + halfRadius);\n    context.quadraticCurveTo(x + diameter, y + radius, x + radiusAndHalf, y + radiusAndHalf);\n    context.lineTo(x + radius, y + diameter);\n    context.lineTo(x + halfRadius, y + radiusAndHalf);\n    context.quadraticCurveTo(x, y + radius, x, y + halfRadius);\n}\n\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/heart/dist/browser/Utils.js?\n}");
 
 /***/ }
 

package/shapes_heart_dist_browser_index_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v4.0.0-alpha.8
+ * v4.0.0-beta.1
  */
 "use strict";
 /*
@@ -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 */   loadHeartShape: () => (/* binding */ loadHeartShape)\n/* harmony export */ });\nasync function loadHeartShape(engine) {\n  engine.checkVersion(\"4.0.0-alpha.8\");\n  await engine.register(async e => {\n    const {\n      HeartDrawer\n    } = await __webpack_require__.e(/*! import() */ \"shapes_heart_dist_browser_HeartDrawer_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./HeartDrawer.js */ \"../../shapes/heart/dist/browser/HeartDrawer.js\"));\n    e.addShape(new HeartDrawer());\n  });\n}\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/heart/dist/browser/index.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   loadHeartShape: () => (/* binding */ loadHeartShape)\n/* harmony export */ });\nasync function loadHeartShape(engine) {\n    engine.checkVersion(\"4.0.0-beta.1\");\n    await engine.pluginManager.register((e)=>{\n        e.pluginManager.addShape([\n            \"heart\"\n        ], async ()=>{\n            const { HeartDrawer } = await __webpack_require__.e(/*! import() */ \"shapes_heart_dist_browser_HeartDrawer_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./HeartDrawer.js */ \"../../shapes/heart/dist/browser/HeartDrawer.js\"));\n            return new HeartDrawer();\n        });\n    });\n}\n\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/heart/dist/browser/index.js?\n}");
 
 /***/ }
 

package/shapes_image_dist_browser_GifUtils_Utils_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v4.0.0-alpha.8
+ * v4.0.0-beta.1
  */
 "use strict";
 /*
@@ -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 */   ByteStream: () => (/* binding */ ByteStream)\n/* harmony export */ });\nclass ByteStream {\n  constructor(bytes) {\n    this.pos = 0;\n    this.data = new Uint8ClampedArray(bytes);\n  }\n  getString(count) {\n    const slice = this.data.slice(this.pos, this.pos + count);\n    this.pos += slice.length;\n    return slice.reduce((acc, curr) => acc + String.fromCharCode(curr), \"\");\n  }\n  nextByte() {\n    return this.data[this.pos++];\n  }\n  nextTwoBytes() {\n    const increment = 2,\n      previous = 1,\n      shift = 8;\n    this.pos += increment;\n    return this.data[this.pos - increment] + (this.data[this.pos - previous] << shift);\n  }\n  readSubBlocks() {\n    let blockString = \"\",\n      size = 0;\n    const minCount = 0,\n      emptySize = 0;\n    do {\n      size = this.data[this.pos++];\n      for (let count = size; --count >= minCount; blockString += String.fromCharCode(this.data[this.pos++])) {}\n    } while (size !== emptySize);\n    return blockString;\n  }\n  readSubBlocksBin() {\n    let size = this.data[this.pos],\n      len = 0;\n    const emptySize = 0,\n      increment = 1;\n    for (let offset = 0; size !== emptySize; offset += size + increment, size = this.data[this.pos + offset]) {\n      len += size;\n    }\n    const blockData = new Uint8Array(len);\n    size = this.data[this.pos++];\n    for (let i = 0; size !== emptySize; size = this.data[this.pos++]) {\n      for (let count = size; --count >= emptySize; blockData[i++] = this.data[this.pos++]) {}\n    }\n    return blockData;\n  }\n  skipSubBlocks() {\n    for (const increment = 1, noData = 0; this.data[this.pos] !== noData; this.pos += this.data[this.pos] + increment) {}\n    this.pos++;\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/image/dist/browser/GifUtils/ByteStream.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   ByteStream: () => (/* binding */ ByteStream)\n/* harmony export */ });\nclass ByteStream {\n    data;\n    pos;\n    constructor(bytes){\n        this.pos = 0;\n        this.data = new Uint8ClampedArray(bytes);\n    }\n    getString(count) {\n        const slice = this.data.slice(this.pos, this.pos + count);\n        this.pos += slice.length;\n        return slice.reduce((acc, curr)=>acc + String.fromCharCode(curr), \"\");\n    }\n    nextByte() {\n        return this.data[this.pos++];\n    }\n    nextTwoBytes() {\n        const increment = 2, previous = 1, shift = 8;\n        this.pos += increment;\n        return this.data[this.pos - increment] + (this.data[this.pos - previous] << shift);\n    }\n    readSubBlocks() {\n        let blockString = \"\", size;\n        const minCount = 0, emptySize = 0;\n        do {\n            size = this.data[this.pos++];\n            for(let count = size; --count >= minCount; blockString += String.fromCharCode(this.data[this.pos++])){}\n        }while (size !== emptySize)\n        return blockString;\n    }\n    readSubBlocksBin() {\n        let size = this.data[this.pos], len = 0;\n        const emptySize = 0, increment = 1;\n        for(let offset = 0; size !== emptySize; offset += size + increment, size = this.data[this.pos + offset]){\n            len += size;\n        }\n        const blockData = new Uint8Array(len);\n        size = this.data[this.pos++];\n        for(let i = 0; size !== emptySize; size = this.data[this.pos++]){\n            for(let count = size; --count >= emptySize; blockData[i++] = this.data[this.pos++]){}\n        }\n        return blockData;\n    }\n    skipSubBlocks() {\n        for(const increment = 1, noData = 0; this.data[this.pos] !== noData; this.pos += this.data[this.pos] + increment){}\n        this.pos++;\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/image/dist/browser/GifUtils/ByteStream.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 */   InterlaceOffsets: () => (/* binding */ InterlaceOffsets),\n/* harmony export */   InterlaceSteps: () => (/* binding */ InterlaceSteps)\n/* harmony export */ });\nconst InterlaceOffsets = [0, 4, 2, 1];\nconst InterlaceSteps = [8, 8, 4, 2];\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/image/dist/browser/GifUtils/Constants.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   InterlaceOffsets: () => (/* binding */ InterlaceOffsets),\n/* harmony export */   InterlaceSteps: () => (/* binding */ InterlaceSteps)\n/* harmony export */ });\nconst InterlaceOffsets = [\n    0,\n    4,\n    2,\n    1\n];\nconst InterlaceSteps = [\n    8,\n    8,\n    4,\n    2\n];\n\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/image/dist/browser/GifUtils/Constants.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 */   DisposalMethod: () => (/* binding */ DisposalMethod)\n/* harmony export */ });\nvar DisposalMethod;\n(function (DisposalMethod) {\n  DisposalMethod[DisposalMethod[\"Replace\"] = 0] = \"Replace\";\n  DisposalMethod[DisposalMethod[\"Combine\"] = 1] = \"Combine\";\n  DisposalMethod[DisposalMethod[\"RestoreBackground\"] = 2] = \"RestoreBackground\";\n  DisposalMethod[DisposalMethod[\"RestorePrevious\"] = 3] = \"RestorePrevious\";\n  DisposalMethod[DisposalMethod[\"UndefinedA\"] = 4] = \"UndefinedA\";\n  DisposalMethod[DisposalMethod[\"UndefinedB\"] = 5] = \"UndefinedB\";\n  DisposalMethod[DisposalMethod[\"UndefinedC\"] = 6] = \"UndefinedC\";\n  DisposalMethod[DisposalMethod[\"UndefinedD\"] = 7] = \"UndefinedD\";\n})(DisposalMethod || (DisposalMethod = {}));\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/image/dist/browser/GifUtils/Enums/DisposalMethod.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   DisposalMethod: () => (/* binding */ DisposalMethod)\n/* harmony export */ });\nvar DisposalMethod;\n(function(DisposalMethod) {\n    DisposalMethod[DisposalMethod[\"Replace\"] = 0] = \"Replace\";\n    DisposalMethod[DisposalMethod[\"Combine\"] = 1] = \"Combine\";\n    DisposalMethod[DisposalMethod[\"RestoreBackground\"] = 2] = \"RestoreBackground\";\n    DisposalMethod[DisposalMethod[\"RestorePrevious\"] = 3] = \"RestorePrevious\";\n    DisposalMethod[DisposalMethod[\"UndefinedA\"] = 4] = \"UndefinedA\";\n    DisposalMethod[DisposalMethod[\"UndefinedB\"] = 5] = \"UndefinedB\";\n    DisposalMethod[DisposalMethod[\"UndefinedC\"] = 6] = \"UndefinedC\";\n    DisposalMethod[DisposalMethod[\"UndefinedD\"] = 7] = \"UndefinedD\";\n})(DisposalMethod || (DisposalMethod = {}));\n\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/image/dist/browser/GifUtils/Enums/DisposalMethod.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 */   GIFDataHeaders: () => (/* binding */ GIFDataHeaders)\n/* harmony export */ });\nvar GIFDataHeaders;\n(function (GIFDataHeaders) {\n  GIFDataHeaders[GIFDataHeaders[\"Extension\"] = 33] = \"Extension\";\n  GIFDataHeaders[GIFDataHeaders[\"ApplicationExtension\"] = 255] = \"ApplicationExtension\";\n  GIFDataHeaders[GIFDataHeaders[\"GraphicsControlExtension\"] = 249] = \"GraphicsControlExtension\";\n  GIFDataHeaders[GIFDataHeaders[\"PlainTextExtension\"] = 1] = \"PlainTextExtension\";\n  GIFDataHeaders[GIFDataHeaders[\"CommentExtension\"] = 254] = \"CommentExtension\";\n  GIFDataHeaders[GIFDataHeaders[\"Image\"] = 44] = \"Image\";\n  GIFDataHeaders[GIFDataHeaders[\"EndOfFile\"] = 59] = \"EndOfFile\";\n})(GIFDataHeaders || (GIFDataHeaders = {}));\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/image/dist/browser/GifUtils/Types/GIFDataHeaders.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   GIFDataHeaders: () => (/* binding */ GIFDataHeaders)\n/* harmony export */ });\nvar GIFDataHeaders;\n(function(GIFDataHeaders) {\n    GIFDataHeaders[GIFDataHeaders[\"Extension\"] = 33] = \"Extension\";\n    GIFDataHeaders[GIFDataHeaders[\"ApplicationExtension\"] = 255] = \"ApplicationExtension\";\n    GIFDataHeaders[GIFDataHeaders[\"GraphicsControlExtension\"] = 249] = \"GraphicsControlExtension\";\n    GIFDataHeaders[GIFDataHeaders[\"PlainTextExtension\"] = 1] = \"PlainTextExtension\";\n    GIFDataHeaders[GIFDataHeaders[\"CommentExtension\"] = 254] = \"CommentExtension\";\n    GIFDataHeaders[GIFDataHeaders[\"Image\"] = 44] = \"Image\";\n    GIFDataHeaders[GIFDataHeaders[\"EndOfFile\"] = 59] = \"EndOfFile\";\n})(GIFDataHeaders || (GIFDataHeaders = {}));\n\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/image/dist/browser/GifUtils/Types/GIFDataHeaders.js?\n}");
 
 /***/ },
 
@@ -63,17 +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 */   decodeGIF: () => (/* binding */ decodeGIF),\n/* harmony export */   drawGif: () => (/* binding */ drawGif),\n/* harmony export */   getGIFLoopAmount: () => (/* binding */ getGIFLoopAmount),\n/* harmony export */   loadGifImage: () => (/* binding */ loadGifImage)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"../../engine/dist/browser/index.js\");\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Utils.js */ \"../../shapes/image/dist/browser/Utils.js\");\n/* harmony import */ var _Constants_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Constants.js */ \"../../shapes/image/dist/browser/GifUtils/Constants.js\");\n/* harmony import */ var _ByteStream_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./ByteStream.js */ \"../../shapes/image/dist/browser/GifUtils/ByteStream.js\");\n/* harmony import */ var _Enums_DisposalMethod_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Enums/DisposalMethod.js */ \"../../shapes/image/dist/browser/GifUtils/Enums/DisposalMethod.js\");\n/* harmony import */ var _Types_GIFDataHeaders_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./Types/GIFDataHeaders.js */ \"../../shapes/image/dist/browser/GifUtils/Types/GIFDataHeaders.js\");\n\n\n\n\n\n\nconst origin = {\n    x: 0,\n    y: 0\n  },\n  defaultFrame = 0,\n  initialTime = 0,\n  firstIndex = 0,\n  defaultLoopCount = 0;\nfunction parseColorTable(byteStream, count) {\n  const colors = [];\n  for (let i = 0; i < count; i++) {\n    colors.push({\n      r: byteStream.data[byteStream.pos],\n      g: byteStream.data[byteStream.pos + 1],\n      b: byteStream.data[byteStream.pos + 2]\n    });\n    byteStream.pos += 3;\n  }\n  return colors;\n}\nfunction parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex) {\n  switch (byteStream.nextByte()) {\n    case _Types_GIFDataHeaders_js__WEBPACK_IMPORTED_MODULE_5__.GIFDataHeaders.GraphicsControlExtension:\n      {\n        const frame = gif.frames[getFrameIndex(false)];\n        byteStream.pos++;\n        const packedByte = byteStream.nextByte();\n        frame.GCreserved = (packedByte & 0xe0) >>> 5;\n        frame.disposalMethod = (packedByte & 0x1c) >>> 2;\n        frame.userInputDelayFlag = (packedByte & 2) === 2;\n        const transparencyFlag = (packedByte & 1) === 1;\n        frame.delayTime = byteStream.nextTwoBytes() * 0xa;\n        const transparencyIndex = byteStream.nextByte();\n        if (transparencyFlag) {\n          getTransparencyIndex(transparencyIndex);\n        }\n        byteStream.pos++;\n        break;\n      }\n    case _Types_GIFDataHeaders_js__WEBPACK_IMPORTED_MODULE_5__.GIFDataHeaders.ApplicationExtension:\n      {\n        byteStream.pos++;\n        const applicationExtension = {\n          identifier: byteStream.getString(8),\n          authenticationCode: byteStream.getString(3),\n          data: byteStream.readSubBlocksBin()\n        };\n        gif.applicationExtensions.push(applicationExtension);\n        break;\n      }\n    case _Types_GIFDataHeaders_js__WEBPACK_IMPORTED_MODULE_5__.GIFDataHeaders.CommentExtension:\n      {\n        gif.comments.push([getFrameIndex(false), byteStream.readSubBlocks()]);\n        break;\n      }\n    case _Types_GIFDataHeaders_js__WEBPACK_IMPORTED_MODULE_5__.GIFDataHeaders.PlainTextExtension:\n      {\n        if (gif.globalColorTable.length === 0) {\n          throw new EvalError(\"plain text extension without global color table\");\n        }\n        byteStream.pos++;\n        gif.frames[getFrameIndex(false)].plainTextData = {\n          left: byteStream.nextTwoBytes(),\n          top: byteStream.nextTwoBytes(),\n          width: byteStream.nextTwoBytes(),\n          height: byteStream.nextTwoBytes(),\n          charSize: {\n            width: byteStream.nextTwoBytes(),\n            height: byteStream.nextTwoBytes()\n          },\n          foregroundColor: byteStream.nextByte(),\n          backgroundColor: byteStream.nextByte(),\n          text: byteStream.readSubBlocks()\n        };\n        break;\n      }\n    default:\n      byteStream.skipSubBlocks();\n      break;\n  }\n}\nasync function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, progressCallback) {\n  const frame = gif.frames[getFrameIndex(true)];\n  frame.left = byteStream.nextTwoBytes();\n  frame.top = byteStream.nextTwoBytes();\n  frame.width = byteStream.nextTwoBytes();\n  frame.height = byteStream.nextTwoBytes();\n  const packedByte = byteStream.nextByte(),\n    localColorTableFlag = (packedByte & 0x80) === 0x80,\n    interlacedFlag = (packedByte & 0x40) === 0x40;\n  frame.sortFlag = (packedByte & 0x20) === 0x20;\n  frame.reserved = (packedByte & 0x18) >>> 3;\n  const localColorCount = 1 << (packedByte & 7) + 1;\n  if (localColorTableFlag) {\n    frame.localColorTable = parseColorTable(byteStream, localColorCount);\n  }\n  const getColor = index => {\n    const {\n      r,\n      g,\n      b\n    } = (localColorTableFlag ? frame.localColorTable : gif.globalColorTable)[index];\n    if (index !== getTransparencyIndex(null)) {\n      return {\n        r,\n        g,\n        b,\n        a: 255\n      };\n    }\n    return {\n      r,\n      g,\n      b,\n      a: avgAlpha ? Math.trunc((r + g + b) / 3) : 0\n    };\n  };\n  const image = (() => {\n    try {\n      return new ImageData(frame.width, frame.height, {\n        colorSpace: \"srgb\"\n      });\n    } catch (error) {\n      if (error instanceof DOMException && error.name === \"IndexSizeError\") {\n        return null;\n      }\n      throw error;\n    }\n  })();\n  if (image == null) {\n    throw new EvalError(\"GIF frame size is to large\");\n  }\n  const minCodeSize = byteStream.nextByte(),\n    imageData = byteStream.readSubBlocksBin(),\n    clearCode = 1 << minCodeSize;\n  const readBits = (pos, len) => {\n    const bytePos = pos >>> 3,\n      bitPos = pos & 7;\n    return (imageData[bytePos] + (imageData[bytePos + 1] << 8) + (imageData[bytePos + 2] << 16) & (1 << len) - 1 << bitPos) >>> bitPos;\n  };\n  if (interlacedFlag) {\n    for (let code = 0, size = minCodeSize + 1, pos = 0, dic = [[0]], pass = 0; pass < 4; pass++) {\n      if (_Constants_js__WEBPACK_IMPORTED_MODULE_2__.InterlaceOffsets[pass] < frame.height) {\n        let pixelPos = 0,\n          lineIndex = 0,\n          exit = false;\n        while (!exit) {\n          const last = code;\n          code = readBits(pos, size);\n          pos += size + 1;\n          if (code === clearCode) {\n            size = minCodeSize + 1;\n            dic.length = clearCode + 2;\n            for (let i = 0; i < dic.length; i++) {\n              dic[i] = i < clearCode ? [i] : [];\n            }\n          } else {\n            if (code >= dic.length) {\n              dic.push(dic[last].concat(dic[last][0]));\n            } else if (last !== clearCode) {\n              dic.push(dic[last].concat(dic[code][0]));\n            }\n            for (const item of dic[code]) {\n              const {\n                r,\n                g,\n                b,\n                a\n              } = getColor(item);\n              image.data.set([r, g, b, a], _Constants_js__WEBPACK_IMPORTED_MODULE_2__.InterlaceOffsets[pass] * frame.width + _Constants_js__WEBPACK_IMPORTED_MODULE_2__.InterlaceSteps[pass] * lineIndex + pixelPos % (frame.width * 4));\n              pixelPos += 4;\n            }\n            if (dic.length === 1 << size && size < 0xc) {\n              size++;\n            }\n          }\n          if (pixelPos === frame.width * 4 * (lineIndex + 1)) {\n            lineIndex++;\n            if (_Constants_js__WEBPACK_IMPORTED_MODULE_2__.InterlaceOffsets[pass] + _Constants_js__WEBPACK_IMPORTED_MODULE_2__.InterlaceSteps[pass] * lineIndex >= frame.height) {\n              exit = true;\n            }\n          }\n        }\n      }\n      progressCallback?.(byteStream.pos / (byteStream.data.length - 1), getFrameIndex(false) + 1, image, {\n        x: frame.left,\n        y: frame.top\n      }, {\n        width: gif.width,\n        height: gif.height\n      });\n    }\n    frame.image = image;\n    frame.bitmap = await createImageBitmap(image);\n  } else {\n    let code = 0,\n      size = minCodeSize + 1,\n      pos = 0,\n      pixelPos = -4;\n    const dic = [[0]];\n    for (;;) {\n      const last = code;\n      code = readBits(pos, size);\n      pos += size;\n      if (code === clearCode) {\n        size = minCodeSize + 1;\n        dic.length = clearCode + 2;\n        for (let i = 0; i < dic.length; i++) {\n          dic[i] = i < clearCode ? [i] : [];\n        }\n      } else {\n        if (code === clearCode + 1) {\n          break;\n        }\n        if (code >= dic.length) {\n          dic.push(dic[last].concat(dic[last][0]));\n        } else if (last !== clearCode) {\n          dic.push(dic[last].concat(dic[code][0]));\n        }\n        for (const item of dic[code]) {\n          const {\n            r,\n            g,\n            b,\n            a\n          } = getColor(item);\n          image.data.set([r, g, b, a], pixelPos);\n          pixelPos += 4;\n        }\n        if (dic.length >= 1 << size && size < 0xc) {\n          size++;\n        }\n      }\n    }\n    frame.image = image;\n    frame.bitmap = await createImageBitmap(image);\n    progressCallback?.((byteStream.pos + 1) / byteStream.data.length, getFrameIndex(false) + 1, frame.image, {\n      x: frame.left,\n      y: frame.top\n    }, {\n      width: gif.width,\n      height: gif.height\n    });\n  }\n}\nasync function parseBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, progressCallback) {\n  switch (byteStream.nextByte()) {\n    case _Types_GIFDataHeaders_js__WEBPACK_IMPORTED_MODULE_5__.GIFDataHeaders.EndOfFile:\n      return true;\n    case _Types_GIFDataHeaders_js__WEBPACK_IMPORTED_MODULE_5__.GIFDataHeaders.Image:\n      await parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, progressCallback);\n      break;\n    case _Types_GIFDataHeaders_js__WEBPACK_IMPORTED_MODULE_5__.GIFDataHeaders.Extension:\n      parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex);\n      break;\n    default:\n      throw new EvalError(\"undefined block found\");\n  }\n  return false;\n}\nfunction getGIFLoopAmount(gif) {\n  for (const extension of gif.applicationExtensions) {\n    if (extension.identifier + extension.authenticationCode !== \"NETSCAPE2.0\") {\n      continue;\n    }\n    return extension.data[1] + (extension.data[2] << 8);\n  }\n  return NaN;\n}\nasync function decodeGIF(gifURL, progressCallback, avgAlpha) {\n  avgAlpha ??= false;\n  const res = await fetch(gifURL);\n  if (!res.ok && res.status === 404) {\n    throw new EvalError(\"file not found\");\n  }\n  const buffer = await res.arrayBuffer();\n  const gif = {\n      width: 0,\n      height: 0,\n      totalTime: 0,\n      colorRes: 0,\n      pixelAspectRatio: 0,\n      frames: [],\n      sortFlag: false,\n      globalColorTable: [],\n      backgroundImage: new ImageData(1, 1, {\n        colorSpace: \"srgb\"\n      }),\n      comments: [],\n      applicationExtensions: []\n    },\n    byteStream = new _ByteStream_js__WEBPACK_IMPORTED_MODULE_3__.ByteStream(new Uint8ClampedArray(buffer));\n  if (byteStream.getString(6) !== \"GIF89a\") {\n    throw new Error(\"not a supported GIF file\");\n  }\n  gif.width = byteStream.nextTwoBytes();\n  gif.height = byteStream.nextTwoBytes();\n  const packedByte = byteStream.nextByte(),\n    globalColorTableFlag = (packedByte & 0x80) === 0x80;\n  gif.colorRes = (packedByte & 0x70) >>> 4;\n  gif.sortFlag = (packedByte & 8) === 8;\n  const globalColorCount = 1 << (packedByte & 7) + 1,\n    backgroundColorIndex = byteStream.nextByte();\n  gif.pixelAspectRatio = byteStream.nextByte();\n  if (gif.pixelAspectRatio !== 0) {\n    gif.pixelAspectRatio = (gif.pixelAspectRatio + 0xf) / 0x40;\n  }\n  if (globalColorTableFlag) {\n    gif.globalColorTable = parseColorTable(byteStream, globalColorCount);\n  }\n  const backgroundImage = (() => {\n    try {\n      return new ImageData(gif.width, gif.height, {\n        colorSpace: \"srgb\"\n      });\n    } catch (error) {\n      if (error instanceof DOMException && error.name === \"IndexSizeError\") {\n        return null;\n      }\n      throw error;\n    }\n  })();\n  if (backgroundImage == null) {\n    throw new Error(\"GIF frame size is to large\");\n  }\n  const {\n    r,\n    g,\n    b\n  } = gif.globalColorTable[backgroundColorIndex];\n  backgroundImage.data.set(globalColorTableFlag ? [r, g, b, 255] : [0, 0, 0, 0]);\n  for (let i = 4; i < backgroundImage.data.length; i *= 2) {\n    backgroundImage.data.copyWithin(i, 0, i);\n  }\n  gif.backgroundImage = backgroundImage;\n  let frameIndex = -1,\n    incrementFrameIndex = true,\n    transparencyIndex = -1;\n  const getframeIndex = increment => {\n    if (increment) {\n      incrementFrameIndex = true;\n    }\n    return frameIndex;\n  };\n  const getTransparencyIndex = newValue => {\n    if (newValue != null) {\n      transparencyIndex = newValue;\n    }\n    return transparencyIndex;\n  };\n  try {\n    do {\n      if (incrementFrameIndex) {\n        gif.frames.push({\n          left: 0,\n          top: 0,\n          width: 0,\n          height: 0,\n          disposalMethod: _Enums_DisposalMethod_js__WEBPACK_IMPORTED_MODULE_4__.DisposalMethod.Replace,\n          image: new ImageData(1, 1, {\n            colorSpace: \"srgb\"\n          }),\n          plainTextData: null,\n          userInputDelayFlag: false,\n          delayTime: 0,\n          sortFlag: false,\n          localColorTable: [],\n          reserved: 0,\n          GCreserved: 0\n        });\n        frameIndex++;\n        transparencyIndex = -1;\n        incrementFrameIndex = false;\n      }\n    } while (!(await parseBlock(byteStream, gif, avgAlpha, getframeIndex, getTransparencyIndex, progressCallback)));\n    gif.frames.length--;\n    for (const frame of gif.frames) {\n      if (frame.userInputDelayFlag && frame.delayTime === 0) {\n        gif.totalTime = Infinity;\n        break;\n      }\n      gif.totalTime += frame.delayTime;\n    }\n    return gif;\n  } catch (error) {\n    if (error instanceof EvalError) {\n      throw new Error(`error while parsing frame ${frameIndex.toString()} \"${error.message}\"`);\n    }\n    throw error;\n  }\n}\nfunction drawGif(data) {\n  const {\n      context,\n      radius,\n      particle,\n      delta\n    } = data,\n    image = particle.image;\n  if (!image?.gifData || !image.gif) {\n    return;\n  }\n  const offscreenCanvas = new OffscreenCanvas(image.gifData.width, image.gifData.height),\n    offscreenContext = offscreenCanvas.getContext(\"2d\");\n  if (!offscreenContext) {\n    throw new Error(\"could not create offscreen canvas context\");\n  }\n  offscreenContext.imageSmoothingQuality = \"low\";\n  offscreenContext.imageSmoothingEnabled = false;\n  offscreenContext.clearRect(origin.x, origin.y, offscreenCanvas.width, offscreenCanvas.height);\n  particle.gifLoopCount ??= image.gifLoopCount ?? defaultLoopCount;\n  let frameIndex = particle.gifFrame ?? defaultFrame;\n  const pos = {\n      x: -image.gifData.width * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half,\n      y: -image.gifData.height * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half\n    },\n    frame = image.gifData.frames[frameIndex];\n  particle.gifTime ??= initialTime;\n  if (!frame.bitmap) {\n    return;\n  }\n  context.scale(radius / image.gifData.width, radius / image.gifData.height);\n  switch (frame.disposalMethod) {\n    case _Enums_DisposalMethod_js__WEBPACK_IMPORTED_MODULE_4__.DisposalMethod.UndefinedA:\n    case _Enums_DisposalMethod_js__WEBPACK_IMPORTED_MODULE_4__.DisposalMethod.UndefinedB:\n    case _Enums_DisposalMethod_js__WEBPACK_IMPORTED_MODULE_4__.DisposalMethod.UndefinedC:\n    case _Enums_DisposalMethod_js__WEBPACK_IMPORTED_MODULE_4__.DisposalMethod.UndefinedD:\n    case _Enums_DisposalMethod_js__WEBPACK_IMPORTED_MODULE_4__.DisposalMethod.Replace:\n      offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);\n      context.drawImage(offscreenCanvas, pos.x, pos.y);\n      offscreenContext.clearRect(origin.x, origin.y, offscreenCanvas.width, offscreenCanvas.height);\n      break;\n    case _Enums_DisposalMethod_js__WEBPACK_IMPORTED_MODULE_4__.DisposalMethod.Combine:\n      offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);\n      context.drawImage(offscreenCanvas, pos.x, pos.y);\n      break;\n    case _Enums_DisposalMethod_js__WEBPACK_IMPORTED_MODULE_4__.DisposalMethod.RestoreBackground:\n      offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);\n      context.drawImage(offscreenCanvas, pos.x, pos.y);\n      offscreenContext.clearRect(origin.x, origin.y, offscreenCanvas.width, offscreenCanvas.height);\n      if (!image.gifData.globalColorTable.length) {\n        offscreenContext.putImageData(image.gifData.frames[firstIndex].image, pos.x + frame.left, pos.y + frame.top);\n      } else {\n        offscreenContext.putImageData(image.gifData.backgroundImage, pos.x, pos.y);\n      }\n      break;\n    case _Enums_DisposalMethod_js__WEBPACK_IMPORTED_MODULE_4__.DisposalMethod.RestorePrevious:\n      {\n        const previousImageData = offscreenContext.getImageData(origin.x, origin.y, offscreenCanvas.width, offscreenCanvas.height);\n        offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);\n        context.drawImage(offscreenCanvas, pos.x, pos.y);\n        offscreenContext.clearRect(origin.x, origin.y, offscreenCanvas.width, offscreenCanvas.height);\n        offscreenContext.putImageData(previousImageData, origin.x, origin.y);\n      }\n      break;\n  }\n  particle.gifTime += delta.value;\n  if (particle.gifTime > frame.delayTime) {\n    particle.gifTime -= frame.delayTime;\n    if (++frameIndex >= image.gifData.frames.length) {\n      if (--particle.gifLoopCount <= defaultLoopCount) {\n        return;\n      }\n      frameIndex = firstIndex;\n      offscreenContext.clearRect(origin.x, origin.y, offscreenCanvas.width, offscreenCanvas.height);\n    }\n    particle.gifFrame = frameIndex;\n  }\n  context.scale(image.gifData.width / radius, image.gifData.height / radius);\n}\nasync function loadGifImage(image) {\n  if (image.type !== \"gif\") {\n    await (0,_Utils_js__WEBPACK_IMPORTED_MODULE_1__.loadImage)(image);\n    return;\n  }\n  image.loading = true;\n  try {\n    image.gifData = await decodeGIF(image.source);\n    image.gifLoopCount = getGIFLoopAmount(image.gifData);\n    if (!image.gifLoopCount) {\n      image.gifLoopCount = Infinity;\n    }\n  } catch {\n    image.error = true;\n  }\n  image.loading = false;\n}\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/image/dist/browser/GifUtils/Utils.js?\n}");
-
-/***/ },
-
-/***/ "../../shapes/image/dist/browser/Utils.js"
-/*!************************************************!*\
-  !*** ../../shapes/image/dist/browser/Utils.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 */   downloadSvgImage: () => (/* binding */ downloadSvgImage),\n/* harmony export */   loadImage: () => (/* binding */ loadImage),\n/* harmony export */   replaceImageColor: () => (/* binding */ replaceImageColor)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"../../engine/dist/browser/index.js\");\n\nconst stringStart = 0,\n  defaultOpacity = 1;\nconst currentColorRegex = /(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\\((-?\\d+%?[,\\s]+){2,3}\\s*[\\d.]+%?\\))|currentcolor/gi;\nfunction replaceColorSvg(imageShape, color, opacity, hdr = false) {\n  const {\n    svgData\n  } = imageShape;\n  if (!svgData) {\n    return \"\";\n  }\n  const colorStyle = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromHsl)(color, hdr, opacity);\n  if (svgData.includes(\"fill\")) {\n    return svgData.replace(currentColorRegex, () => colorStyle);\n  }\n  const preFillIndex = svgData.indexOf(\">\");\n  return `${svgData.substring(stringStart, preFillIndex)} fill=\"${colorStyle}\"${svgData.substring(preFillIndex)}`;\n}\nasync function loadImage(image) {\n  return new Promise(resolve => {\n    image.loading = true;\n    const img = new Image();\n    image.element = img;\n    img.addEventListener(\"load\", () => {\n      image.loading = false;\n      resolve();\n    });\n    img.addEventListener(\"error\", () => {\n      image.element = undefined;\n      image.error = true;\n      image.loading = false;\n      (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getLogger)().error(`Error loading image: ${image.source}`);\n      resolve();\n    });\n    img.src = image.source;\n  });\n}\nasync function downloadSvgImage(image) {\n  if (image.type !== \"svg\") {\n    await loadImage(image);\n    return;\n  }\n  image.loading = true;\n  const response = await fetch(image.source);\n  if (!response.ok) {\n    (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getLogger)().error(\"Image not found\");\n    image.error = true;\n  } else {\n    image.svgData = await response.text();\n  }\n  image.loading = false;\n}\nfunction replaceImageColor(image, imageData, color, particle, hdr = false) {\n  const svgColoredData = replaceColorSvg(image, color, particle.opacity?.value ?? defaultOpacity, hdr),\n    imageRes = {\n      color,\n      gif: imageData.gif,\n      data: {\n        ...image,\n        svgData: svgColoredData\n      },\n      loaded: false,\n      ratio: imageData.width / imageData.height,\n      replaceColor: imageData.replaceColor,\n      source: imageData.src\n    };\n  return new Promise(resolve => {\n    const svg = new Blob([svgColoredData], {\n        type: \"image/svg+xml\"\n      }),\n      url = URL.createObjectURL(svg),\n      img = new Image();\n    img.addEventListener(\"load\", () => {\n      imageRes.loaded = true;\n      imageRes.element = img;\n      resolve(imageRes);\n      URL.revokeObjectURL(url);\n    });\n    const errorHandler = async () => {\n      URL.revokeObjectURL(url);\n      const img2 = {\n        ...image,\n        error: false,\n        loading: true\n      };\n      await loadImage(img2);\n      imageRes.loaded = true;\n      imageRes.element = img2.element;\n      resolve(imageRes);\n    };\n    img.addEventListener(\"error\", () => void errorHandler());\n    img.src = url;\n  });\n}\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/image/dist/browser/Utils.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   decodeGIF: () => (/* binding */ decodeGIF),\n/* harmony export */   drawGif: () => (/* binding */ drawGif),\n/* harmony export */   getGIFLoopAmount: () => (/* binding */ getGIFLoopAmount),\n/* harmony export */   loadGifImage: () => (/* binding */ loadGifImage)\n/* harmony export */ });\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../Utils.js */ \"../../shapes/image/dist/browser/Utils.js\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @tsparticles/engine */ \"../../engine/dist/browser/index.js\");\n/* harmony import */ var _Constants_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Constants.js */ \"../../shapes/image/dist/browser/GifUtils/Constants.js\");\n/* harmony import */ var _ByteStream_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./ByteStream.js */ \"../../shapes/image/dist/browser/GifUtils/ByteStream.js\");\n/* harmony import */ var _Enums_DisposalMethod_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Enums/DisposalMethod.js */ \"../../shapes/image/dist/browser/GifUtils/Enums/DisposalMethod.js\");\n/* harmony import */ var _Types_GIFDataHeaders_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./Types/GIFDataHeaders.js */ \"../../shapes/image/dist/browser/GifUtils/Types/GIFDataHeaders.js\");\n\n\n\n\n\n\nconst defaultFrame = 0, initialTime = 0, firstIndex = 0, defaultLoopCount = 0;\nfunction parseColorTable(byteStream, count) {\n    const colors = [];\n    for(let i = 0; i < count; i++){\n        colors.push({\n            r: byteStream.data[byteStream.pos],\n            g: byteStream.data[byteStream.pos + 1],\n            b: byteStream.data[byteStream.pos + 2]\n        });\n        byteStream.pos += 3;\n    }\n    return colors;\n}\nfunction parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex) {\n    switch(byteStream.nextByte()){\n        case _Types_GIFDataHeaders_js__WEBPACK_IMPORTED_MODULE_5__.GIFDataHeaders.GraphicsControlExtension:\n            {\n                const frame = gif.frames[getFrameIndex(false)];\n                byteStream.pos++;\n                const packedByte = byteStream.nextByte();\n                frame.GCreserved = (packedByte & 0xe0) >>> 5;\n                frame.disposalMethod = (packedByte & 0x1c) >>> 2;\n                frame.userInputDelayFlag = (packedByte & 2) === 2;\n                const transparencyFlag = (packedByte & 1) === 1;\n                frame.delayTime = byteStream.nextTwoBytes() * 0xa;\n                const transparencyIndex = byteStream.nextByte();\n                if (transparencyFlag) {\n                    getTransparencyIndex(transparencyIndex);\n                }\n                byteStream.pos++;\n                break;\n            }\n        case _Types_GIFDataHeaders_js__WEBPACK_IMPORTED_MODULE_5__.GIFDataHeaders.ApplicationExtension:\n            {\n                byteStream.pos++;\n                const applicationExtension = {\n                    identifier: byteStream.getString(8),\n                    authenticationCode: byteStream.getString(3),\n                    data: byteStream.readSubBlocksBin()\n                };\n                gif.applicationExtensions.push(applicationExtension);\n                break;\n            }\n        case _Types_GIFDataHeaders_js__WEBPACK_IMPORTED_MODULE_5__.GIFDataHeaders.CommentExtension:\n            {\n                gif.comments.push([\n                    getFrameIndex(false),\n                    byteStream.readSubBlocks()\n                ]);\n                break;\n            }\n        case _Types_GIFDataHeaders_js__WEBPACK_IMPORTED_MODULE_5__.GIFDataHeaders.PlainTextExtension:\n            {\n                if (gif.globalColorTable.length === 0) {\n                    throw new EvalError(\"plain text extension without global color table\");\n                }\n                byteStream.pos++;\n                gif.frames[getFrameIndex(false)].plainTextData = {\n                    left: byteStream.nextTwoBytes(),\n                    top: byteStream.nextTwoBytes(),\n                    width: byteStream.nextTwoBytes(),\n                    height: byteStream.nextTwoBytes(),\n                    charSize: {\n                        width: byteStream.nextTwoBytes(),\n                        height: byteStream.nextTwoBytes()\n                    },\n                    foregroundColor: byteStream.nextByte(),\n                    backgroundColor: byteStream.nextByte(),\n                    text: byteStream.readSubBlocks()\n                };\n                break;\n            }\n        default:\n            byteStream.skipSubBlocks();\n            break;\n    }\n}\nfunction readBits(imageData, pos, len) {\n    const bytePos = pos >>> 3, bitPos = pos & 7;\n    return (imageData[bytePos] + (imageData[bytePos + 1] << 8) + (imageData[bytePos + 2] << 16) & (1 << len) - 1 << bitPos) >>> bitPos;\n}\nasync function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, canvasSettings, progressCallback) {\n    const frame = gif.frames[getFrameIndex(true)];\n    frame.left = byteStream.nextTwoBytes();\n    frame.top = byteStream.nextTwoBytes();\n    frame.width = byteStream.nextTwoBytes();\n    frame.height = byteStream.nextTwoBytes();\n    const packedByte = byteStream.nextByte(), localColorTableFlag = (packedByte & 0x80) === 0x80, interlacedFlag = (packedByte & 0x40) === 0x40;\n    frame.sortFlag = (packedByte & 0x20) === 0x20;\n    frame.reserved = (packedByte & 0x18) >>> 3;\n    const localColorCount = 1 << (packedByte & 7) + 1;\n    if (localColorTableFlag) {\n        frame.localColorTable = parseColorTable(byteStream, localColorCount);\n    }\n    const getColor = (index)=>{\n        const { r, g, b } = (localColorTableFlag ? frame.localColorTable : gif.globalColorTable)[index];\n        if (index !== getTransparencyIndex(null)) {\n            return {\n                r,\n                g,\n                b,\n                a: 255\n            };\n        }\n        return {\n            r,\n            g,\n            b,\n            a: avgAlpha ? Math.trunc((r + g + b) / 3) : 0\n        };\n    }, image = (()=>{\n        try {\n            return new ImageData(frame.width, frame.height, canvasSettings);\n        } catch (error) {\n            if (error instanceof DOMException && error.name === \"IndexSizeError\") {\n                return null;\n            }\n            throw error;\n        }\n    })();\n    if (image == null) {\n        throw new EvalError(\"GIF frame size is to large\");\n    }\n    const minCodeSize = byteStream.nextByte(), imageData = byteStream.readSubBlocksBin(), clearCode = 1 << minCodeSize;\n    if (interlacedFlag) {\n        for(let code = 0, size = minCodeSize + 1, pos = 0, dic = [\n            [\n                0\n            ]\n        ], pass = 0; pass < 4; pass++){\n            if (_Constants_js__WEBPACK_IMPORTED_MODULE_2__.InterlaceOffsets[pass] < frame.height) {\n                let pixelPos = 0, lineIndex = 0, exit = false;\n                while(!exit){\n                    const last = code;\n                    code = readBits(imageData, pos, size);\n                    pos += size + 1;\n                    if (code === clearCode) {\n                        size = minCodeSize + 1;\n                        dic.length = clearCode + 2;\n                        for(let i = 0; i < dic.length; i++){\n                            dic[i] = i < clearCode ? [\n                                i\n                            ] : [];\n                        }\n                    } else {\n                        if (code >= dic.length) {\n                            dic.push(dic[last].concat(dic[last][0]));\n                        } else if (last !== clearCode) {\n                            dic.push(dic[last].concat(dic[code][0]));\n                        }\n                        for (const item of dic[code]){\n                            const { r, g, b, a } = getColor(item);\n                            image.data.set([\n                                r,\n                                g,\n                                b,\n                                a\n                            ], _Constants_js__WEBPACK_IMPORTED_MODULE_2__.InterlaceOffsets[pass] * frame.width + _Constants_js__WEBPACK_IMPORTED_MODULE_2__.InterlaceSteps[pass] * lineIndex + pixelPos % (frame.width * 4));\n                            pixelPos += 4;\n                        }\n                        if (dic.length === 1 << size && size < 0xc) {\n                            size++;\n                        }\n                    }\n                    if (pixelPos === frame.width * 4 * (lineIndex + 1)) {\n                        lineIndex++;\n                        if (_Constants_js__WEBPACK_IMPORTED_MODULE_2__.InterlaceOffsets[pass] + _Constants_js__WEBPACK_IMPORTED_MODULE_2__.InterlaceSteps[pass] * lineIndex >= frame.height) {\n                            exit = true;\n                        }\n                    }\n                }\n            }\n            progressCallback?.(byteStream.pos / (byteStream.data.length - 1), getFrameIndex(false) + 1, image, {\n                x: frame.left,\n                y: frame.top\n            }, {\n                width: gif.width,\n                height: gif.height\n            });\n        }\n        frame.image = image;\n        frame.bitmap = await createImageBitmap(image);\n    } else {\n        let code = 0, size = minCodeSize + 1, pos = 0, pixelPos = -4;\n        const dic = [\n            [\n                0\n            ]\n        ];\n        for(;;){\n            const last = code;\n            code = readBits(imageData, pos, size);\n            pos += size;\n            if (code === clearCode) {\n                size = minCodeSize + 1;\n                dic.length = clearCode + 2;\n                for(let i = 0; i < dic.length; i++){\n                    dic[i] = i < clearCode ? [\n                        i\n                    ] : [];\n                }\n            } else {\n                if (code === clearCode + 1) {\n                    break;\n                }\n                if (code >= dic.length) {\n                    dic.push(dic[last].concat(dic[last][0]));\n                } else if (last !== clearCode) {\n                    dic.push(dic[last].concat(dic[code][0]));\n                }\n                for (const item of dic[code]){\n                    const { r, g, b, a } = getColor(item);\n                    pixelPos += 4;\n                    image.data.set([\n                        r,\n                        g,\n                        b,\n                        a\n                    ], pixelPos);\n                }\n                if (dic.length >= 1 << size && size < 0xc) {\n                    size++;\n                }\n            }\n        }\n        frame.image = image;\n        frame.bitmap = await createImageBitmap(image);\n        progressCallback?.((byteStream.pos + 1) / byteStream.data.length, getFrameIndex(false) + 1, frame.image, {\n            x: frame.left,\n            y: frame.top\n        }, {\n            width: gif.width,\n            height: gif.height\n        });\n    }\n}\nasync function parseBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, canvasSettings, progressCallback) {\n    switch(byteStream.nextByte()){\n        case _Types_GIFDataHeaders_js__WEBPACK_IMPORTED_MODULE_5__.GIFDataHeaders.EndOfFile:\n            return true;\n        case _Types_GIFDataHeaders_js__WEBPACK_IMPORTED_MODULE_5__.GIFDataHeaders.Image:\n            await parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, canvasSettings, progressCallback);\n            break;\n        case _Types_GIFDataHeaders_js__WEBPACK_IMPORTED_MODULE_5__.GIFDataHeaders.Extension:\n            parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex);\n            break;\n        default:\n            throw new EvalError(\"undefined block found\");\n    }\n    return false;\n}\nfunction getGIFLoopAmount(gif) {\n    for (const extension of gif.applicationExtensions){\n        if (extension.identifier + extension.authenticationCode !== \"NETSCAPE2.0\") {\n            continue;\n        }\n        return extension.data[1] + (extension.data[2] << 8);\n    }\n    return Number.NaN;\n}\nasync function decodeGIF(gifURL, canvasSettings, progressCallback, avgAlpha) {\n    avgAlpha ??= false;\n    const res = await fetch(gifURL);\n    if (!res.ok && res.status === 404) {\n        throw new EvalError(\"file not found\");\n    }\n    const buffer = await res.arrayBuffer(), gif = {\n        width: 0,\n        height: 0,\n        totalTime: 0,\n        colorRes: 0,\n        pixelAspectRatio: 0,\n        frames: [],\n        sortFlag: false,\n        globalColorTable: [],\n        backgroundImage: new ImageData(1, 1, canvasSettings),\n        comments: [],\n        applicationExtensions: []\n    }, byteStream = new _ByteStream_js__WEBPACK_IMPORTED_MODULE_3__.ByteStream(new Uint8ClampedArray(buffer));\n    if (byteStream.getString(6) !== \"GIF89a\") {\n        throw new Error(\"not a supported GIF file\");\n    }\n    gif.width = byteStream.nextTwoBytes();\n    gif.height = byteStream.nextTwoBytes();\n    const packedByte = byteStream.nextByte(), globalColorTableFlag = (packedByte & 0x80) === 0x80;\n    gif.colorRes = (packedByte & 0x70) >>> 4;\n    gif.sortFlag = (packedByte & 8) === 8;\n    const globalColorCount = 1 << (packedByte & 7) + 1, backgroundColorIndex = byteStream.nextByte();\n    gif.pixelAspectRatio = byteStream.nextByte();\n    if (gif.pixelAspectRatio !== 0) {\n        gif.pixelAspectRatio = (gif.pixelAspectRatio + 0xf) / 0x40;\n    }\n    if (globalColorTableFlag) {\n        gif.globalColorTable = parseColorTable(byteStream, globalColorCount);\n    }\n    const backgroundImage = (()=>{\n        try {\n            return new ImageData(gif.width, gif.height, canvasSettings);\n        } catch (error) {\n            if (error instanceof DOMException && error.name === \"IndexSizeError\") {\n                return null;\n            }\n            throw error;\n        }\n    })();\n    if (backgroundImage == null) {\n        throw new Error(\"GIF frame size is to large\");\n    }\n    const { r, g, b } = gif.globalColorTable[backgroundColorIndex];\n    backgroundImage.data.set(globalColorTableFlag ? [\n        r,\n        g,\n        b,\n        255\n    ] : [\n        0,\n        0,\n        0,\n        0\n    ]);\n    for(let i = 4; i < backgroundImage.data.length; i *= 2){\n        backgroundImage.data.copyWithin(i, 0, i);\n    }\n    gif.backgroundImage = backgroundImage;\n    let frameIndex = -1, incrementFrameIndex = true, transparencyIndex = -1;\n    const getframeIndex = (increment)=>{\n        if (increment) {\n            incrementFrameIndex = true;\n        }\n        return frameIndex;\n    }, getTransparencyIndex = (newValue)=>{\n        if (newValue != null) {\n            transparencyIndex = newValue;\n        }\n        return transparencyIndex;\n    };\n    try {\n        do {\n            if (incrementFrameIndex) {\n                gif.frames.push({\n                    left: 0,\n                    top: 0,\n                    width: 0,\n                    height: 0,\n                    disposalMethod: _Enums_DisposalMethod_js__WEBPACK_IMPORTED_MODULE_4__.DisposalMethod.Replace,\n                    image: new ImageData(1, 1, canvasSettings),\n                    plainTextData: null,\n                    userInputDelayFlag: false,\n                    delayTime: 0,\n                    sortFlag: false,\n                    localColorTable: [],\n                    reserved: 0,\n                    GCreserved: 0\n                });\n                frameIndex++;\n                transparencyIndex = -1;\n                incrementFrameIndex = false;\n            }\n        }while (!await parseBlock(byteStream, gif, avgAlpha, getframeIndex, getTransparencyIndex, canvasSettings, progressCallback))\n        gif.frames.length--;\n        for (const frame of gif.frames){\n            if (frame.userInputDelayFlag && frame.delayTime === 0) {\n                gif.totalTime = Infinity;\n                break;\n            }\n            gif.totalTime += frame.delayTime;\n        }\n        return gif;\n    } catch (error) {\n        if (error instanceof EvalError) {\n            throw new Error(`error while parsing frame ${frameIndex.toString()} \"${error.message}\"`, {\n                cause: error\n            });\n        }\n        throw error;\n    }\n}\nfunction drawGif(data, canvasSettings) {\n    const { context, radius, particle, delta } = data, image = particle.image;\n    if (!image?.gifData || !image.gif) {\n        return;\n    }\n    const offscreenCanvas = new OffscreenCanvas(image.gifData.width, image.gifData.height), offscreenContext = offscreenCanvas.getContext(\"2d\", canvasSettings);\n    if (!offscreenContext) {\n        throw new Error(\"could not create offscreen canvas context\");\n    }\n    offscreenContext.imageSmoothingQuality = \"low\";\n    offscreenContext.imageSmoothingEnabled = false;\n    offscreenContext.clearRect(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.x, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.y, offscreenCanvas.width, offscreenCanvas.height);\n    particle.gifLoopCount ??= image.gifLoopCount ?? defaultLoopCount;\n    let frameIndex = particle.gifFrame ?? defaultFrame;\n    const pos = {\n        x: -image.gifData.width * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.half,\n        y: -image.gifData.height * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.half\n    }, frame = image.gifData.frames[frameIndex];\n    particle.gifTime ??= initialTime;\n    if (!frame.bitmap) {\n        return;\n    }\n    context.scale(radius / image.gifData.width, radius / image.gifData.height);\n    switch(frame.disposalMethod){\n        case _Enums_DisposalMethod_js__WEBPACK_IMPORTED_MODULE_4__.DisposalMethod.UndefinedA:\n        case _Enums_DisposalMethod_js__WEBPACK_IMPORTED_MODULE_4__.DisposalMethod.UndefinedB:\n        case _Enums_DisposalMethod_js__WEBPACK_IMPORTED_MODULE_4__.DisposalMethod.UndefinedC:\n        case _Enums_DisposalMethod_js__WEBPACK_IMPORTED_MODULE_4__.DisposalMethod.UndefinedD:\n        case _Enums_DisposalMethod_js__WEBPACK_IMPORTED_MODULE_4__.DisposalMethod.Replace:\n            offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);\n            context.drawImage(offscreenCanvas, pos.x, pos.y);\n            offscreenContext.clearRect(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.x, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.y, offscreenCanvas.width, offscreenCanvas.height);\n            break;\n        case _Enums_DisposalMethod_js__WEBPACK_IMPORTED_MODULE_4__.DisposalMethod.Combine:\n            offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);\n            context.drawImage(offscreenCanvas, pos.x, pos.y);\n            break;\n        case _Enums_DisposalMethod_js__WEBPACK_IMPORTED_MODULE_4__.DisposalMethod.RestoreBackground:\n            offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);\n            context.drawImage(offscreenCanvas, pos.x, pos.y);\n            offscreenContext.clearRect(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.x, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.y, offscreenCanvas.width, offscreenCanvas.height);\n            if (!image.gifData.globalColorTable.length) {\n                offscreenContext.putImageData(image.gifData.frames[firstIndex].image, pos.x + frame.left, pos.y + frame.top);\n            } else {\n                offscreenContext.putImageData(image.gifData.backgroundImage, pos.x, pos.y);\n            }\n            break;\n        case _Enums_DisposalMethod_js__WEBPACK_IMPORTED_MODULE_4__.DisposalMethod.RestorePrevious:\n            {\n                const previousImageData = offscreenContext.getImageData(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.x, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.y, offscreenCanvas.width, offscreenCanvas.height);\n                offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);\n                context.drawImage(offscreenCanvas, pos.x, pos.y);\n                offscreenContext.clearRect(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.x, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.y, offscreenCanvas.width, offscreenCanvas.height);\n                offscreenContext.putImageData(previousImageData, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.x, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.y);\n            }\n            break;\n    }\n    particle.gifTime += delta.value;\n    if (particle.gifTime > frame.delayTime) {\n        particle.gifTime -= frame.delayTime;\n        if (++frameIndex >= image.gifData.frames.length) {\n            if (--particle.gifLoopCount <= defaultLoopCount) {\n                return;\n            }\n            frameIndex = firstIndex;\n            offscreenContext.clearRect(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.x, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.y, offscreenCanvas.width, offscreenCanvas.height);\n        }\n        particle.gifFrame = frameIndex;\n    }\n    context.scale(image.gifData.width / radius, image.gifData.height / radius);\n}\nasync function loadGifImage(image, canvasSettings) {\n    if (image.type !== \"gif\") {\n        await (0,_Utils_js__WEBPACK_IMPORTED_MODULE_0__.loadImage)(image);\n        return;\n    }\n    image.loading = true;\n    try {\n        image.gifData = await decodeGIF(image.source, canvasSettings);\n        image.gifLoopCount = getGIFLoopAmount(image.gifData);\n        if (!image.gifLoopCount) {\n            image.gifLoopCount = Infinity;\n        }\n    } catch  {\n        image.error = true;\n    }\n    image.loading = false;\n}\n\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/image/dist/browser/GifUtils/Utils.js?\n}");
 
 /***/ }
 

package/shapes_image_dist_browser_ImageDrawer_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v4.0.0-alpha.8
+ * v4.0.0-beta.1
  */
 "use strict";
 /*
@@ -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 */   ImageDrawer: () => (/* binding */ ImageDrawer)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"../../engine/dist/browser/index.js\");\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Utils.js */ \"../../shapes/image/dist/browser/Utils.js\");\n/* harmony import */ var _GifUtils_Utils_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./GifUtils/Utils.js */ \"../../shapes/image/dist/browser/GifUtils/Utils.js\");\n\n\n\nconst sides = 12;\nclass ImageDrawer {\n  constructor(engine) {\n    this.validTypes = [\"image\", \"images\"];\n    this.loadImageShape = async imageShape => {\n      if (!this._engine.loadImage) {\n        throw new Error(`Image shape not initialized`);\n      }\n      await this._engine.loadImage({\n        gif: imageShape.gif,\n        name: imageShape.name,\n        replaceColor: imageShape.replaceColor,\n        src: imageShape.src\n      });\n    };\n    this._engine = engine;\n  }\n  addImage(image) {\n    this._engine.images ??= [];\n    this._engine.images.push(image);\n  }\n  draw(data) {\n    const {\n        context,\n        radius,\n        particle,\n        opacity\n      } = data,\n      image = particle.image,\n      element = image?.element;\n    if (!image) {\n      return;\n    }\n    context.globalAlpha = opacity;\n    if (image.gif && image.gifData) {\n      (0,_GifUtils_Utils_js__WEBPACK_IMPORTED_MODULE_2__.drawGif)(data);\n    } else if (element) {\n      const ratio = image.ratio,\n        pos = {\n          x: -radius,\n          y: -radius\n        },\n        diameter = radius * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.double;\n      context.drawImage(element, pos.x, pos.y, diameter, diameter / ratio);\n    }\n    context.globalAlpha = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.defaultAlpha;\n  }\n  getSidesCount() {\n    return sides;\n  }\n  async init(container) {\n    const options = container.actualOptions;\n    if (!options.preload || !this._engine.loadImage) {\n      return;\n    }\n    for (const imageData of options.preload) {\n      await this._engine.loadImage(imageData);\n    }\n  }\n  loadShape(particle) {\n    if (particle.shape !== \"image\" && particle.shape !== \"images\") {\n      return;\n    }\n    this._engine.images ??= [];\n    const imageData = particle.shapeData;\n    if (!imageData) {\n      return;\n    }\n    const image = this._engine.images.find(t => t.name === imageData.name || t.source === imageData.src);\n    if (!image) {\n      void this.loadImageShape(imageData).then(() => {\n        this.loadShape(particle);\n      });\n    }\n  }\n  particleInit(container, particle) {\n    if (particle.shape !== \"image\" && particle.shape !== \"images\") {\n      return;\n    }\n    this._engine.images ??= [];\n    const images = this._engine.images,\n      imageData = particle.shapeData;\n    if (!imageData) {\n      return;\n    }\n    const color = particle.getFillColor(),\n      image = images.find(t => t.name === imageData.name || t.source === imageData.src);\n    if (!image) {\n      return;\n    }\n    const replaceColor = imageData.replaceColor;\n    if (image.loading) {\n      setTimeout(() => {\n        this.particleInit(container, particle);\n      });\n      return;\n    }\n    void (async () => {\n      let imageRes;\n      if (image.svgData && color) {\n        imageRes = await (0,_Utils_js__WEBPACK_IMPORTED_MODULE_1__.replaceImageColor)(image, imageData, color, particle, container.hdr);\n      } else {\n        imageRes = {\n          color,\n          data: image,\n          element: image.element,\n          gif: image.gif,\n          gifData: image.gifData,\n          gifLoopCount: image.gifLoopCount,\n          loaded: true,\n          ratio: imageData.width && imageData.height ? imageData.width / imageData.height : image.ratio ?? _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.defaultRatio,\n          replaceColor: replaceColor,\n          source: imageData.src\n        };\n      }\n      if (!imageRes.ratio) {\n        imageRes.ratio = 1;\n      }\n      const fill = imageData.fill ?? particle.shapeFill,\n        close = imageData.close ?? particle.shapeClose,\n        imageShape = {\n          image: imageRes,\n          fill,\n          close\n        };\n      particle.image = imageShape.image;\n      particle.shapeFill = imageShape.fill;\n      particle.shapeClose = imageShape.close;\n    })();\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/image/dist/browser/ImageDrawer.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   ImageDrawer: () => (/* binding */ ImageDrawer)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"../../engine/dist/browser/index.js\");\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Utils.js */ \"../../shapes/image/dist/browser/Utils.js\");\n/* harmony import */ var _GifUtils_Utils_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./GifUtils/Utils.js */ \"../../shapes/image/dist/browser/GifUtils/Utils.js\");\n\n\n\nconst sides = 12;\nclass ImageDrawer {\n    _container;\n    _engine;\n    constructor(engine, container){\n        this._engine = engine;\n        this._container = container;\n    }\n    draw(data) {\n        const { context, radius, particle, opacity } = data, image = particle.image, element = image?.element;\n        if (!image) {\n            return;\n        }\n        context.globalAlpha = opacity;\n        if (image.gif && image.gifData) {\n            (0,_GifUtils_Utils_js__WEBPACK_IMPORTED_MODULE_2__.drawGif)(data, this._container.canvas.render.settings);\n        } else if (element) {\n            const ratio = image.ratio, pos = {\n                x: -radius,\n                y: -radius\n            }, diameter = radius * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.double;\n            context.drawImage(element, pos.x, pos.y, diameter, diameter / ratio);\n        }\n        context.globalAlpha = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.defaultAlpha;\n    }\n    getSidesCount() {\n        return sides;\n    }\n    async init(container) {\n        const options = container.actualOptions;\n        if (!options.preload || !this._engine.loadImage) {\n            return;\n        }\n        const promises = [];\n        for (const imageData of options.preload){\n            promises.push(this._engine.loadImage(container, imageData));\n        }\n        await Promise.all(promises);\n    }\n    loadShape(particle) {\n        const { _container: container } = this;\n        if (!particle.shape || !_Utils_js__WEBPACK_IMPORTED_MODULE_1__.shapeTypes.includes(particle.shape)) {\n            return;\n        }\n        const imageData = particle.shapeData;\n        if (!imageData) {\n            return;\n        }\n        const images = this._engine.getImages?.(container), image = images?.find((t)=>t.name === imageData.name || t.source === imageData.src);\n        if (image) {\n            return;\n        }\n        void this.loadImageShape(container, imageData).then(()=>{\n            this.loadShape(particle);\n        });\n    }\n    particleInit(container, particle) {\n        if (particle.shape !== \"image\" && particle.shape !== \"images\") {\n            return;\n        }\n        const images = this._engine.getImages?.(container), imageData = particle.shapeData;\n        if (!imageData) {\n            return;\n        }\n        const color = particle.getFillColor(), image = images?.find((t)=>t.name === imageData.name || t.source === imageData.src);\n        if (!image) {\n            return;\n        }\n        const replaceColor = imageData.replaceColor;\n        if (image.loading) {\n            setTimeout(()=>{\n                this.particleInit(container, particle);\n            });\n            return;\n        }\n        void (async ()=>{\n            let imageRes;\n            if (image.svgData && color) {\n                imageRes = await (0,_Utils_js__WEBPACK_IMPORTED_MODULE_1__.replaceImageColor)(image, imageData, color, particle, container.hdr);\n            } else {\n                imageRes = {\n                    color,\n                    data: image,\n                    element: image.element,\n                    gif: image.gif,\n                    gifData: image.gifData,\n                    gifLoopCount: image.gifLoopCount,\n                    loaded: true,\n                    ratio: imageData.width && imageData.height ? imageData.width / imageData.height : image.ratio ?? _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.defaultRatio,\n                    replaceColor: replaceColor,\n                    source: imageData.src\n                };\n            }\n            if (!imageRes.ratio) {\n                imageRes.ratio = 1;\n            }\n            const close = imageData.close ?? particle.shapeClose, imageShape = {\n                image: imageRes,\n                close\n            };\n            particle.image = imageShape.image;\n            particle.shapeClose = imageShape.close;\n        })();\n    }\n    loadImageShape = async (container, imageShape)=>{\n        if (!this._engine.loadImage) {\n            throw new Error(`Image shape not initialized`);\n        }\n        await this._engine.loadImage(container, {\n            gif: imageShape.gif,\n            name: imageShape.name,\n            replaceColor: imageShape.replaceColor,\n            src: imageShape.src\n        });\n    };\n}\n\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/image/dist/browser/ImageDrawer.js?\n}");
 
 /***/ }
 

package/shapes_image_dist_browser_ImagePreloaderInstance_js.js

@@ -0,0 +1,30 @@
+/*!
+ * Author : Matteo Bruni
+ * MIT license: https://opensource.org/licenses/MIT
+ * Demo / Generator : https://particles.js.org/
+ * GitHub : https://www.github.com/matteobruni/tsparticles
+ * How to use? : Check the GitHub README
+ * v4.0.0-beta.1
+ */
+"use strict";
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+(this["webpackChunk_tsparticles_all"] = this["webpackChunk_tsparticles_all"] || []).push([["shapes_image_dist_browser_ImagePreloaderInstance_js"],{
+
+/***/ "../../shapes/image/dist/browser/ImagePreloaderInstance.js"
+/*!*****************************************************************!*\
+  !*** ../../shapes/image/dist/browser/ImagePreloaderInstance.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 */   ImagePreloaderInstance: () => (/* binding */ ImagePreloaderInstance)\n/* harmony export */ });\nclass ImagePreloaderInstance {\n    _container;\n    _engine;\n    constructor(engine, container){\n        this._engine = engine;\n        this._container = container;\n    }\n    destroy() {\n        this._engine.images?.delete(this._container);\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/image/dist/browser/ImagePreloaderInstance.js?\n}");
+
+/***/ }
+
+}]);

package/shapes_image_dist_browser_ImagePreloader_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v4.0.0-alpha.8
+ * v4.0.0-beta.1
  */
 "use strict";
 /*
@@ -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 */   ImagePreloaderPlugin: () => (/* binding */ ImagePreloaderPlugin)\n/* harmony export */ });\n/* harmony import */ var _Options_Classes_Preload_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Options/Classes/Preload.js */ \"../../shapes/image/dist/browser/Options/Classes/Preload.js\");\n\nclass ImagePreloaderPlugin {\n  constructor() {\n    this.id = \"imagePreloader\";\n  }\n  async getPlugin() {\n    await Promise.resolve();\n    return {};\n  }\n  loadOptions(_container, options, source) {\n    if (!source?.preload) {\n      return;\n    }\n    options.preload ??= [];\n    const preloadOptions = options.preload;\n    for (const item of source.preload) {\n      const existing = preloadOptions.find(t => t.name === item.name || t.src === item.src);\n      if (existing) {\n        existing.load(item);\n      } else {\n        const preload = new _Options_Classes_Preload_js__WEBPACK_IMPORTED_MODULE_0__.Preload();\n        preload.load(item);\n        preloadOptions.push(preload);\n      }\n    }\n  }\n  needsPlugin() {\n    return true;\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/image/dist/browser/ImagePreloader.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   ImagePreloaderPlugin: () => (/* binding */ ImagePreloaderPlugin)\n/* harmony export */ });\n/* harmony import */ var _Options_Classes_Preload_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Options/Classes/Preload.js */ \"../../shapes/image/dist/browser/Options/Classes/Preload.js\");\n\nclass ImagePreloaderPlugin {\n    id = \"image-preloader\";\n    _engine;\n    constructor(engine){\n        this._engine = engine;\n    }\n    async getPlugin(container) {\n        const { ImagePreloaderInstance } = await __webpack_require__.e(/*! import() */ \"shapes_image_dist_browser_ImagePreloaderInstance_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./ImagePreloaderInstance.js */ \"../../shapes/image/dist/browser/ImagePreloaderInstance.js\"));\n        return new ImagePreloaderInstance(this._engine, container);\n    }\n    loadOptions(_container, options, source) {\n        if (!source?.preload) {\n            return;\n        }\n        options.preload ??= [];\n        const preloadOptions = options.preload;\n        for (const item of source.preload){\n            const existing = preloadOptions.find((t)=>t.name === item.name || t.src === item.src);\n            if (existing) {\n                existing.load(item);\n            } else {\n                const preload = new _Options_Classes_Preload_js__WEBPACK_IMPORTED_MODULE_0__.Preload();\n                preload.load(item);\n                preloadOptions.push(preload);\n            }\n        }\n    }\n    needsPlugin() {\n        return true;\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/image/dist/browser/ImagePreloader.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 */   Preload: () => (/* binding */ Preload)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"../../engine/dist/browser/index.js\");\n\nclass Preload {\n  constructor() {\n    this.src = \"\";\n    this.gif = false;\n  }\n  load(data) {\n    if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n      return;\n    }\n    if (data.gif !== undefined) {\n      this.gif = data.gif;\n    }\n    if (data.height !== undefined) {\n      this.height = data.height;\n    }\n    if (data.name !== undefined) {\n      this.name = data.name;\n    }\n    if (data.replaceColor !== undefined) {\n      this.replaceColor = data.replaceColor;\n    }\n    if (data.src !== undefined) {\n      this.src = data.src;\n    }\n    if (data.width !== undefined) {\n      this.width = data.width;\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/image/dist/browser/Options/Classes/Preload.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Preload: () => (/* binding */ Preload)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"../../engine/dist/browser/index.js\");\n\nclass Preload {\n    gif;\n    height;\n    name;\n    replaceColor;\n    src;\n    width;\n    constructor(){\n        this.src = \"\";\n        this.gif = false;\n    }\n    load(data) {\n        if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n            return;\n        }\n        if (data.gif !== undefined) {\n            this.gif = data.gif;\n        }\n        if (data.height !== undefined) {\n            this.height = data.height;\n        }\n        if (data.name !== undefined) {\n            this.name = data.name;\n        }\n        if (data.replaceColor !== undefined) {\n            this.replaceColor = data.replaceColor;\n        }\n        if (data.src !== undefined) {\n            this.src = data.src;\n        }\n        if (data.width !== undefined) {\n            this.width = data.width;\n        }\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/image/dist/browser/Options/Classes/Preload.js?\n}");
 
 /***/ }
 

package/shapes_image_dist_browser_index_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v4.0.0-alpha.8
+ * v4.0.0-beta.1
  */
 "use strict";
 /*
@@ -17,13 +17,23 @@
  */
 (this["webpackChunk_tsparticles_all"] = this["webpackChunk_tsparticles_all"] || []).push([["shapes_image_dist_browser_index_js"],{
 
+/***/ "../../shapes/image/dist/browser/Utils.js"
+/*!************************************************!*\
+  !*** ../../shapes/image/dist/browser/Utils.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 */   downloadSvgImage: () => (/* binding */ downloadSvgImage),\n/* harmony export */   loadImage: () => (/* binding */ loadImage),\n/* harmony export */   replaceImageColor: () => (/* binding */ replaceImageColor),\n/* harmony export */   shapeTypes: () => (/* binding */ shapeTypes)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"../../engine/dist/browser/index.js\");\n\nconst shapeTypes = [\n    \"image\",\n    \"images\"\n];\nconst stringStart = 0, defaultOpacity = 1;\nconst currentColorRegex = /(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\\((-?\\d+%?[,\\s]+){2,3}\\s*[\\d.]+%?\\))|currentcolor/gi;\nfunction replaceColorSvg(imageShape, color, opacity, hdr = false) {\n    const { svgData } = imageShape;\n    if (!svgData) {\n        return \"\";\n    }\n    const colorStyle = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromHsl)(color, hdr, opacity);\n    if (svgData.includes(\"fill\")) {\n        return svgData.replaceAll(currentColorRegex, ()=>colorStyle);\n    }\n    const preFillIndex = svgData.indexOf(\">\");\n    return `${svgData.substring(stringStart, preFillIndex)} fill=\"${colorStyle}\"${svgData.substring(preFillIndex)}`;\n}\nasync function loadImage(image) {\n    return new Promise((resolve)=>{\n        image.loading = true;\n        const img = new Image();\n        image.element = img;\n        img.addEventListener(\"load\", ()=>{\n            image.loading = false;\n            resolve();\n        });\n        img.addEventListener(\"error\", ()=>{\n            image.element = undefined;\n            image.error = true;\n            image.loading = false;\n            (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getLogger)().error(`Error loading image: ${image.source}`);\n            resolve();\n        });\n        img.src = image.source;\n    });\n}\nasync function downloadSvgImage(image) {\n    if (image.type !== \"svg\") {\n        await loadImage(image);\n        return;\n    }\n    image.loading = true;\n    const response = await fetch(image.source);\n    if (response.ok) {\n        image.svgData = await response.text();\n    } else {\n        (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getLogger)().error(\"Image not found\");\n        image.error = true;\n    }\n    image.loading = false;\n}\nfunction replaceImageColor(image, imageData, color, particle, hdr = false) {\n    const svgColoredData = replaceColorSvg(image, color, particle.opacity?.value ?? defaultOpacity, hdr), imageRes = {\n        color,\n        gif: imageData.gif,\n        data: {\n            ...image,\n            svgData: svgColoredData\n        },\n        loaded: false,\n        ratio: imageData.width / imageData.height,\n        replaceColor: imageData.replaceColor,\n        source: imageData.src\n    };\n    return new Promise((resolve)=>{\n        const svg = new Blob([\n            svgColoredData\n        ], {\n            type: \"image/svg+xml\"\n        }), url = URL.createObjectURL(svg), img = new Image();\n        img.addEventListener(\"load\", ()=>{\n            imageRes.loaded = true;\n            imageRes.element = img;\n            resolve(imageRes);\n            URL.revokeObjectURL(url);\n        });\n        const errorHandler = async ()=>{\n            URL.revokeObjectURL(url);\n            const img2 = {\n                ...image,\n                error: false,\n                loading: true\n            };\n            await loadImage(img2);\n            imageRes.loaded = true;\n            imageRes.element = img2.element;\n            resolve(imageRes);\n        };\n        img.addEventListener(\"error\", ()=>void errorHandler());\n        img.src = url;\n    });\n}\n\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/image/dist/browser/Utils.js?\n}");
+
+/***/ },
+
 /***/ "../../shapes/image/dist/browser/index.js"
 /*!************************************************!*\
   !*** ../../shapes/image/dist/browser/index.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 */   loadImageShape: () => (/* binding */ loadImageShape)\n/* harmony export */ });\nconst extLength = 3;\nfunction addLoadImageToEngine(engine) {\n  if (engine.loadImage) {\n    return;\n  }\n  engine.loadImage = async data => {\n    if (!data.name && !data.src) {\n      throw new Error(\"No image source provided\");\n    }\n    engine.images ??= [];\n    if (engine.images.some(t => t.name === data.name || t.source === data.src)) {\n      return;\n    }\n    try {\n      const image = {\n        gif: data.gif,\n        name: data.name ?? data.src,\n        source: data.src,\n        type: data.src.substring(data.src.length - extLength),\n        error: false,\n        loading: true,\n        replaceColor: data.replaceColor,\n        ratio: data.width && data.height ? data.width / data.height : undefined\n      };\n      engine.images.push(image);\n      let imageFunc;\n      if (data.gif) {\n        const {\n          loadGifImage\n        } = await __webpack_require__.e(/*! import() */ \"shapes_image_dist_browser_GifUtils_Utils_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./GifUtils/Utils.js */ \"../../shapes/image/dist/browser/GifUtils/Utils.js\"));\n        imageFunc = loadGifImage;\n      } else if (data.replaceColor) {\n        const {\n          downloadSvgImage\n        } = await __webpack_require__.e(/*! import() */ \"shapes_image_dist_browser_Utils_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./Utils.js */ \"../../shapes/image/dist/browser/Utils.js\"));\n        imageFunc = downloadSvgImage;\n      } else {\n        const {\n          loadImage\n        } = await __webpack_require__.e(/*! import() */ \"shapes_image_dist_browser_Utils_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./Utils.js */ \"../../shapes/image/dist/browser/Utils.js\"));\n        imageFunc = loadImage;\n      }\n      await imageFunc(image);\n    } catch {\n      throw new Error(`${data.name ?? data.src} not found`);\n    }\n  };\n}\nasync function loadImageShape(engine) {\n  engine.checkVersion(\"4.0.0-alpha.8\");\n  await engine.register(async e => {\n    const {\n        ImageDrawer\n      } = await Promise.all(/*! import() */[__webpack_require__.e(\"shapes_image_dist_browser_GifUtils_Utils_js\"), __webpack_require__.e(\"shapes_image_dist_browser_ImageDrawer_js\")]).then(__webpack_require__.bind(__webpack_require__, /*! ./ImageDrawer.js */ \"../../shapes/image/dist/browser/ImageDrawer.js\")),\n      {\n        ImagePreloaderPlugin\n      } = await __webpack_require__.e(/*! import() */ \"shapes_image_dist_browser_ImagePreloader_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./ImagePreloader.js */ \"../../shapes/image/dist/browser/ImagePreloader.js\"));\n    addLoadImageToEngine(e);\n    const preloader = new ImagePreloaderPlugin();\n    e.addPlugin(preloader);\n    e.addShape(new ImageDrawer(e));\n  });\n}\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/image/dist/browser/index.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   loadImageShape: () => (/* binding */ loadImageShape)\n/* harmony export */ });\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Utils.js */ \"../../shapes/image/dist/browser/Utils.js\");\n\nconst extLength = 3;\nfunction addLoadImageToEngine(engine) {\n    engine.getImages ??= (container)=>{\n        engine.images ??= new Map();\n        let images = engine.images.get(container);\n        if (!images) {\n            images = [];\n            engine.images.set(container, images);\n        }\n        return images;\n    };\n    engine.loadImage ??= async (container, data)=>{\n        if (!engine.getImages) {\n            throw new Error(\"No images collection found\");\n        }\n        if (!data.name && !data.src) {\n            throw new Error(\"No image source provided\");\n        }\n        engine.images ??= new Map();\n        const containerImages = engine.getImages(container);\n        if (containerImages.some((t)=>t.name === data.name || t.source === data.src)) {\n            return;\n        }\n        try {\n            const image = {\n                gif: data.gif,\n                name: data.name ?? data.src,\n                source: data.src,\n                type: data.src.substring(data.src.length - extLength),\n                error: false,\n                loading: true,\n                replaceColor: data.replaceColor,\n                ratio: data.width && data.height ? data.width / data.height : undefined\n            };\n            containerImages.push(image);\n            engine.images.set(container, containerImages);\n            let imageFunc;\n            if (data.gif) {\n                const { loadGifImage } = await __webpack_require__.e(/*! import() */ \"shapes_image_dist_browser_GifUtils_Utils_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./GifUtils/Utils.js */ \"../../shapes/image/dist/browser/GifUtils/Utils.js\"));\n                imageFunc = (img)=>loadGifImage(img, {\n                        colorSpace: \"srgb\"\n                    });\n            } else if (data.replaceColor) {\n                const { downloadSvgImage } = await Promise.resolve(/*! import() */).then(__webpack_require__.bind(__webpack_require__, /*! ./Utils.js */ \"../../shapes/image/dist/browser/Utils.js\"));\n                imageFunc = downloadSvgImage;\n            } else {\n                const { loadImage } = await Promise.resolve(/*! import() */).then(__webpack_require__.bind(__webpack_require__, /*! ./Utils.js */ \"../../shapes/image/dist/browser/Utils.js\"));\n                imageFunc = loadImage;\n            }\n            await imageFunc(image);\n        } catch  {\n            throw new Error(`${data.name ?? data.src} not found`);\n        }\n    };\n}\nasync function loadImageShape(engine) {\n    engine.checkVersion(\"4.0.0-beta.1\");\n    await engine.pluginManager.register(async (e)=>{\n        const { ImagePreloaderPlugin } = await __webpack_require__.e(/*! import() */ \"shapes_image_dist_browser_ImagePreloader_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./ImagePreloader.js */ \"../../shapes/image/dist/browser/ImagePreloader.js\"));\n        addLoadImageToEngine(e);\n        e.pluginManager.addPlugin(new ImagePreloaderPlugin(e));\n        e.pluginManager.addShape(_Utils_js__WEBPACK_IMPORTED_MODULE_0__.shapeTypes, async (container)=>{\n            const { ImageDrawer } = await Promise.all(/*! import() */[__webpack_require__.e(\"shapes_image_dist_browser_GifUtils_Utils_js\"), __webpack_require__.e(\"shapes_image_dist_browser_ImageDrawer_js\")]).then(__webpack_require__.bind(__webpack_require__, /*! ./ImageDrawer.js */ \"../../shapes/image/dist/browser/ImageDrawer.js\"));\n            return new ImageDrawer(e, container);\n        });\n    });\n}\n\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/image/dist/browser/index.js?\n}");
 
 /***/ }
 

package/shapes_infinity_dist_browser_InfinityDrawer_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v4.0.0-alpha.8
+ * v4.0.0-beta.1
  */
 "use strict";
 /*
@@ -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 */   InfinityDrawer: () => (/* binding */ InfinityDrawer)\n/* harmony export */ });\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Utils.js */ \"../../shapes/infinity/dist/browser/Utils.js\");\n\nclass InfinityDrawer {\n  constructor() {\n    this.validTypes = [\"infinity\"];\n  }\n  draw(data) {\n    (0,_Utils_js__WEBPACK_IMPORTED_MODULE_0__.drawInfinity)(data);\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/infinity/dist/browser/InfinityDrawer.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   InfinityDrawer: () => (/* binding */ InfinityDrawer)\n/* harmony export */ });\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Utils.js */ \"../../shapes/infinity/dist/browser/Utils.js\");\n\nclass InfinityDrawer {\n    draw(data) {\n        (0,_Utils_js__WEBPACK_IMPORTED_MODULE_0__.drawInfinity)(data);\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/infinity/dist/browser/InfinityDrawer.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 */   drawInfinity: () => (/* binding */ drawInfinity)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"../../engine/dist/browser/index.js\");\n\nconst loopSizeFactor = 0.55;\nfunction drawInfinity(data) {\n  const {\n      context,\n      radius\n    } = data,\n    loopControl = radius * loopSizeFactor;\n  context.moveTo(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.x, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.y);\n  context.bezierCurveTo(loopControl, -radius, loopControl, radius, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.x, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.y);\n  context.moveTo(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.x, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.y);\n  context.bezierCurveTo(-loopControl, -radius, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.x - loopControl, radius, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.x, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.y);\n}\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/infinity/dist/browser/Utils.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   drawInfinity: () => (/* binding */ drawInfinity)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"../../engine/dist/browser/index.js\");\n\nconst loopSizeFactor = 0.55;\nfunction drawInfinity(data) {\n    const { context, radius } = data, loopControl = radius * loopSizeFactor;\n    context.moveTo(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.x, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.y);\n    context.bezierCurveTo(loopControl, -radius, loopControl, radius, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.x, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.y);\n    context.moveTo(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.x, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.y);\n    context.bezierCurveTo(-loopControl, -radius, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.x - loopControl, radius, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.x, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.y);\n}\n\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/infinity/dist/browser/Utils.js?\n}");
 
 /***/ }
 

package/shapes_infinity_dist_browser_index_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v4.0.0-alpha.8
+ * v4.0.0-beta.1
  */
 "use strict";
 /*
@@ -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 */   loadInfinityShape: () => (/* binding */ loadInfinityShape)\n/* harmony export */ });\nasync function loadInfinityShape(engine) {\n  engine.checkVersion(\"4.0.0-alpha.8\");\n  await engine.register(async e => {\n    const {\n      InfinityDrawer\n    } = await __webpack_require__.e(/*! import() */ \"shapes_infinity_dist_browser_InfinityDrawer_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./InfinityDrawer.js */ \"../../shapes/infinity/dist/browser/InfinityDrawer.js\"));\n    e.addShape(new InfinityDrawer());\n  });\n}\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/infinity/dist/browser/index.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   loadInfinityShape: () => (/* binding */ loadInfinityShape)\n/* harmony export */ });\nasync function loadInfinityShape(engine) {\n    engine.checkVersion(\"4.0.0-beta.1\");\n    await engine.pluginManager.register((e)=>{\n        e.pluginManager.addShape([\n            \"infinity\"\n        ], async ()=>{\n            const { InfinityDrawer } = await __webpack_require__.e(/*! import() */ \"shapes_infinity_dist_browser_InfinityDrawer_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./InfinityDrawer.js */ \"../../shapes/infinity/dist/browser/InfinityDrawer.js\"));\n            return new InfinityDrawer();\n        });\n    });\n}\n\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/infinity/dist/browser/index.js?\n}");
 
 /***/ }
 

package/shapes_line_dist_browser_LineDrawer_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v4.0.0-alpha.8
+ * v4.0.0-beta.1
  */
 "use strict";
 /*
@@ -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 */   LineDrawer: () => (/* binding */ LineDrawer)\n/* harmony export */ });\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Utils.js */ \"../../shapes/line/dist/browser/Utils.js\");\n\nconst sides = 1;\nclass LineDrawer {\n  constructor() {\n    this.validTypes = [\"line\"];\n  }\n  draw(data) {\n    (0,_Utils_js__WEBPACK_IMPORTED_MODULE_0__.drawLine)(data);\n  }\n  getSidesCount() {\n    return sides;\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/line/dist/browser/LineDrawer.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   LineDrawer: () => (/* binding */ LineDrawer)\n/* harmony export */ });\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Utils.js */ \"../../shapes/line/dist/browser/Utils.js\");\n\nconst sides = 1;\nclass LineDrawer {\n    draw(data) {\n        (0,_Utils_js__WEBPACK_IMPORTED_MODULE_0__.drawLine)(data);\n    }\n    getSidesCount() {\n        return sides;\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/line/dist/browser/LineDrawer.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 */   drawLine: () => (/* binding */ drawLine)\n/* harmony export */ });\nfunction drawLine(data) {\n  const {\n      context,\n      particle,\n      radius\n    } = data,\n    shapeData = particle.shapeData,\n    centerY = 0;\n  context.moveTo(-radius, centerY);\n  context.lineTo(radius, centerY);\n  context.lineCap = shapeData?.cap ?? \"butt\";\n}\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/line/dist/browser/Utils.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   drawLine: () => (/* binding */ drawLine)\n/* harmony export */ });\nfunction drawLine(data) {\n    const { context, particle, radius } = data, shapeData = particle.shapeData, centerY = 0;\n    context.moveTo(-radius, centerY);\n    context.lineTo(radius, centerY);\n    context.lineCap = shapeData?.cap ?? \"butt\";\n}\n\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/line/dist/browser/Utils.js?\n}");
 
 /***/ }
 

package/shapes_line_dist_browser_index_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v4.0.0-alpha.8
+ * v4.0.0-beta.1
  */
 "use strict";
 /*
@@ -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 */   loadLineShape: () => (/* binding */ loadLineShape)\n/* harmony export */ });\nasync function loadLineShape(engine) {\n  engine.checkVersion(\"4.0.0-alpha.8\");\n  await engine.register(async e => {\n    const {\n      LineDrawer\n    } = await __webpack_require__.e(/*! import() */ \"shapes_line_dist_browser_LineDrawer_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./LineDrawer.js */ \"../../shapes/line/dist/browser/LineDrawer.js\"));\n    e.addShape(new LineDrawer());\n  });\n}\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/line/dist/browser/index.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   loadLineShape: () => (/* binding */ loadLineShape)\n/* harmony export */ });\nasync function loadLineShape(engine) {\n    engine.checkVersion(\"4.0.0-beta.1\");\n    await engine.pluginManager.register((e)=>{\n        e.pluginManager.addShape([\n            \"line\"\n        ], async ()=>{\n            const { LineDrawer } = await __webpack_require__.e(/*! import() */ \"shapes_line_dist_browser_LineDrawer_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./LineDrawer.js */ \"../../shapes/line/dist/browser/LineDrawer.js\"));\n            return new LineDrawer();\n        });\n    });\n}\n\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/line/dist/browser/index.js?\n}");
 
 /***/ }