@tsparticles/plugin-polygon-mask 4.0.0-beta.0 → 4.0.0-beta.1

package/dist_browser_PolygonMaskInstance_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-beta.0
+ * 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 */   PolygonMaskInstance: () => (/* binding */ PolygonMaskInstance)\n/* harmony export */ });\n/* harmony import */ var _pathseg_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./pathseg.js */ \"./dist/browser/pathseg.js\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _utils_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./utils.js */ \"./dist/browser/utils.js\");\n/* harmony import */ var _Enums_PolygonMaskInlineArrangement_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Enums/PolygonMaskInlineArrangement.js */ \"./dist/browser/Enums/PolygonMaskInlineArrangement.js\");\n/* harmony import */ var _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Enums/PolygonMaskType.js */ \"./dist/browser/Enums/PolygonMaskType.js\");\n\n\n\n\n\nconst noPolygonDataLoaded = `No polygon data loaded.`, noPolygonFound = `No polygon found, you need to specify SVG url in config.`;\nclass PolygonMaskInstance {\n    dimension;\n    offset;\n    paths;\n    raw;\n    redrawTimeout;\n    _container;\n    _engine;\n    _moveRadius;\n    _scale;\n    constructor(container, engine){\n        this._container = container;\n        this._engine = engine;\n        this.dimension = {\n            height: 0,\n            width: 0\n        };\n        this._moveRadius = 0;\n        this._scale = 1;\n    }\n    clickPositionValid(position) {\n        const options = this._container.actualOptions.polygon;\n        return !!options?.enable && options.type !== _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_4__.PolygonMaskType.none && options.type !== _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_4__.PolygonMaskType.inline && this._checkInsidePolygon(position);\n    }\n    draw(context) {\n        if (!this.paths?.length) {\n            return;\n        }\n        const options = this._container.actualOptions.polygon;\n        if (!options?.enable) {\n            return;\n        }\n        const polygonDraw = options.draw;\n        if (!polygonDraw.enable) {\n            return;\n        }\n        const rawData = this.raw;\n        for (const path of this.paths){\n            const path2d = path.path2d;\n            if (path2d && this.offset) {\n                (0,_utils_js__WEBPACK_IMPORTED_MODULE_2__.drawPolygonMaskPath)(this._engine, context, path2d, polygonDraw.stroke, this.offset, this._container.hdr);\n            } else if (rawData) {\n                (0,_utils_js__WEBPACK_IMPORTED_MODULE_2__.drawPolygonMask)(this._engine, context, rawData, polygonDraw.stroke, this._container.hdr);\n            }\n        }\n    }\n    async init() {\n        const container = this._container, polygonMaskOptions = container.actualOptions.polygon, pxRatio = container.retina.pixelRatio;\n        if (!polygonMaskOptions) {\n            return;\n        }\n        this._moveRadius = polygonMaskOptions.move.radius * pxRatio;\n        this._scale = polygonMaskOptions.scale * pxRatio;\n        if (polygonMaskOptions.enable) {\n            await this._initRawData();\n        }\n    }\n    particleBounce(particle, delta, direction) {\n        return this._polygonBounce(particle, delta, direction);\n    }\n    particlePosition(position) {\n        const options = this._container.actualOptions.polygon, defaultLength = 0;\n        if (!(options?.enable && (this.raw?.length ?? defaultLength) > defaultLength)) {\n            return;\n        }\n        return (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.deepExtend)({}, position ?? this._randomPoint());\n    }\n    particlesInitialization() {\n        const options = this._container.actualOptions.polygon;\n        if (options?.enable && options.type === _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_4__.PolygonMaskType.inline && (options.inline.arrangement === _Enums_PolygonMaskInlineArrangement_js__WEBPACK_IMPORTED_MODULE_3__.PolygonMaskInlineArrangement.onePerPoint || options.inline.arrangement === _Enums_PolygonMaskInlineArrangement_js__WEBPACK_IMPORTED_MODULE_3__.PolygonMaskInlineArrangement.perPoint)) {\n            this._drawPoints();\n            return true;\n        }\n        return false;\n    }\n    resize() {\n        const container = this._container, options = container.actualOptions.polygon;\n        if (!(options?.enable && options.type !== _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_4__.PolygonMaskType.none)) {\n            return;\n        }\n        if (this.redrawTimeout) {\n            clearTimeout(this.redrawTimeout);\n        }\n        const timeout = 250;\n        this.redrawTimeout = setTimeout(()=>{\n            void (async ()=>{\n                await this._initRawData(true);\n                await container.particles.redraw();\n            })();\n        }, timeout);\n    }\n    stop() {\n        delete this.raw;\n        delete this.paths;\n    }\n    _checkInsidePolygon = (position)=>{\n        const container = this._container, options = container.actualOptions.polygon;\n        if (!options?.enable || options.type === _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_4__.PolygonMaskType.none || options.type === _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_4__.PolygonMaskType.inline) {\n            return true;\n        }\n        if (!this.raw) {\n            throw new Error(noPolygonFound);\n        }\n        const canvasSize = container.canvas.size, x = position?.x ?? (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.getRandom)() * canvasSize.width, y = position?.y ?? (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.getRandom)() * canvasSize.height, indexOffset = 1;\n        let inside = false;\n        for(let i = 0, j = this.raw.length - indexOffset; i < this.raw.length; j = i++){\n            const pi = this.raw[i], pj = this.raw[j];\n            if (!pi || !pj) {\n                continue;\n            }\n            const intersect = pi.y > y !== pj.y > y && x < (pj.x - pi.x) * (y - pi.y) / (pj.y - pi.y) + pi.x;\n            if (intersect) {\n                inside = !inside;\n            }\n        }\n        if (options.type === _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_4__.PolygonMaskType.inside) {\n            return inside;\n        } else {\n            return !inside;\n        }\n    };\n    _createPath2D = ()=>{\n        const container = this._container, options = container.actualOptions.polygon;\n        if (!options || !this.paths?.length) {\n            return;\n        }\n        for (const path of this.paths){\n            const pathData = path.element.getAttribute(\"d\");\n            if (pathData) {\n                const path2d = new Path2D(pathData), matrix = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.safeDocument)().createElementNS(\"http://www.w3.org/2000/svg\", \"svg\").createSVGMatrix(), finalPath = new Path2D(), transform = matrix.scale(this._scale);\n                finalPath.addPath(path2d, transform);\n                path.path2d = finalPath;\n            } else {\n                delete path.path2d;\n            }\n            if (path.path2d ?? !this.raw) {\n                continue;\n            }\n            path.path2d = new Path2D();\n            const firstIndex = 0, firstPoint = this.raw[firstIndex];\n            if (!firstPoint) {\n                continue;\n            }\n            path.path2d.moveTo(firstPoint.x, firstPoint.y);\n            this.raw.forEach((pos, i)=>{\n                if (i > firstIndex) {\n                    path.path2d?.lineTo(pos.x, pos.y);\n                }\n            });\n            path.path2d.closePath();\n        }\n    };\n    _downloadSvgPath = async (svgUrl, force)=>{\n        const options = this._container.actualOptions.polygon;\n        if (!options) {\n            return;\n        }\n        const url = svgUrl ?? options.url, forceDownload = force ?? false;\n        if (!url || this.paths !== undefined && !forceDownload) {\n            return this.raw;\n        }\n        const req = await fetch(url);\n        if (!req.ok) {\n            throw new Error(`Error occurred during polygon mask download`);\n        }\n        return this._parseSvgPath(await req.text(), force);\n    };\n    _drawPoints = ()=>{\n        if (!this.raw) {\n            return;\n        }\n        for (const item of this.raw){\n            this._container.particles.addParticle({\n                x: item.x,\n                y: item.y\n            });\n        }\n    };\n    _getEquidistantPointByIndex = (index)=>{\n        const container = this._container, options = container.actualOptions, polygonMaskOptions = options.polygon;\n        if (!polygonMaskOptions) {\n            return;\n        }\n        if (!this.raw?.length || !this.paths?.length) {\n            throw new Error(noPolygonDataLoaded);\n        }\n        let offset = 0, point;\n        const baseAccumulator = 0, totalLength = this.paths.reduce((tot, path)=>tot + path.length, baseAccumulator), distance = totalLength / options.particles.number.value;\n        for (const path of this.paths){\n            const pathDistance = distance * index - offset;\n            if (pathDistance <= path.length) {\n                point = path.element.getPointAtLength(pathDistance);\n                break;\n            } else {\n                offset += path.length;\n            }\n        }\n        const scale = this._scale;\n        return {\n            x: (point?.x ?? _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.x) * scale + (this.offset?.x ?? _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.x),\n            y: (point?.y ?? _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.y) * scale + (this.offset?.y ?? _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.y)\n        };\n    };\n    _getPointByIndex = (index)=>{\n        if (!this.raw?.length) {\n            throw new Error(noPolygonDataLoaded);\n        }\n        const coords = this.raw[index % this.raw.length];\n        if (!coords) {\n            return;\n        }\n        return {\n            x: coords.x,\n            y: coords.y\n        };\n    };\n    _getRandomPoint = ()=>{\n        if (!this.raw?.length) {\n            throw new Error(noPolygonDataLoaded);\n        }\n        const coords = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.itemFromArray)(this.raw);\n        if (!coords) {\n            return;\n        }\n        return {\n            x: coords.x,\n            y: coords.y\n        };\n    };\n    _getRandomPointByLength = ()=>{\n        const container = this._container, options = container.actualOptions.polygon;\n        if (!options) {\n            return;\n        }\n        if (!this.raw?.length || !this.paths?.length) {\n            throw new Error(noPolygonDataLoaded);\n        }\n        const path = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.itemFromArray)(this.paths);\n        if (!path) {\n            return;\n        }\n        const offset = 1, distance = Math.floor((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.getRandom)() * path.length) + offset, point = path.element.getPointAtLength(distance), scale = this._scale;\n        return {\n            x: point.x * scale + (this.offset?.x ?? _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.x),\n            y: point.y * scale + (this.offset?.y ?? _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.y)\n        };\n    };\n    _initRawData = async (force)=>{\n        const options = this._container.actualOptions.polygon;\n        if (!options) {\n            return;\n        }\n        if (options.url) {\n            this.raw = await this._downloadSvgPath(options.url, force);\n        } else if (options.data) {\n            const data = options.data;\n            let svg;\n            if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.isString)(data)) {\n                svg = data;\n            } else {\n                const getPath = (p)=>`<path d=\"${p}\" />`, path = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.isArray)(data.path) ? data.path.map(getPath).join(\"\") : getPath(data.path), namespaces = 'xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"';\n                svg = `<svg ${namespaces} width=\"${data.size.width.toString()}\" height=\"${data.size.height.toString()}\">${path}</svg>`;\n            }\n            this.raw = this._parseSvgPath(svg, force);\n        }\n        this._createPath2D();\n        this._engine.dispatchEvent(\"polygonMaskLoaded\", {\n            container: this._container\n        });\n    };\n    _parseSvgPath = (xml, force)=>{\n        const forceDownload = force ?? false;\n        if (this.paths !== undefined && !forceDownload) {\n            return this.raw;\n        }\n        const container = this._container, options = container.actualOptions.polygon;\n        if (!options) {\n            return;\n        }\n        const parser = new DOMParser(), doc = parser.parseFromString(xml, \"image/svg+xml\"), firstIndex = 0, svg = doc.getElementsByTagName(\"svg\")[firstIndex];\n        if (!svg) {\n            return;\n        }\n        let svgPaths = svg.getElementsByTagName(\"path\");\n        if (!svgPaths.length) {\n            svgPaths = doc.getElementsByTagName(\"path\");\n        }\n        this.paths = [];\n        for(let i = 0; i < svgPaths.length; i++){\n            const path = svgPaths.item(i);\n            if (path) {\n                this.paths.push({\n                    element: path,\n                    length: path.getTotalLength()\n                });\n            }\n        }\n        const scale = this._scale;\n        this.dimension.width = parseFloat(svg.getAttribute(\"width\") ?? \"0\") * scale;\n        this.dimension.height = parseFloat(svg.getAttribute(\"height\") ?? \"0\") * scale;\n        const position = options.position ?? {\n            x: 50,\n            y: 50\n        }, canvasSize = container.canvas.size;\n        this.offset = {\n            x: canvasSize.width * position.x / _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.percentDenominator - this.dimension.width * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.half,\n            y: canvasSize.height * position.y / _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.percentDenominator - this.dimension.height * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.half\n        };\n        return (0,_utils_js__WEBPACK_IMPORTED_MODULE_2__.parsePaths)(this.paths, scale, this.offset);\n    };\n    _polygonBounce = (particle, _delta, direction)=>{\n        const options = this._container.actualOptions.polygon;\n        if (!this.raw || !options?.enable || direction !== _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.OutModeDirection.top) {\n            return false;\n        }\n        if (options.type === _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_4__.PolygonMaskType.inside || options.type === _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_4__.PolygonMaskType.outside) {\n            let closest, dx, dy;\n            const pos = particle.getPosition(), radius = particle.getRadius(), offset = 1;\n            for(let i = 0, j = this.raw.length - offset; i < this.raw.length; j = i++){\n                const pi = this.raw[i], pj = this.raw[j];\n                if (!pi || !pj) {\n                    continue;\n                }\n                closest = (0,_utils_js__WEBPACK_IMPORTED_MODULE_2__.calcClosestPointOnSegment)(pi, pj, pos);\n                const dist = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.getDistances)(pos, closest);\n                [dx, dy] = [\n                    dist.dx,\n                    dist.dy\n                ];\n                if (dist.distance < radius) {\n                    (0,_utils_js__WEBPACK_IMPORTED_MODULE_2__.segmentBounce)(pi, pj, particle.velocity);\n                    return true;\n                }\n            }\n            if (closest && dx !== undefined && dy !== undefined && !this._checkInsidePolygon(pos)) {\n                const factor = {\n                    x: 1,\n                    y: 1\n                }, diameter = radius * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.double, inverse = -1;\n                if (pos.x >= closest.x) {\n                    factor.x = -1;\n                }\n                if (pos.y >= closest.y) {\n                    factor.y = -1;\n                }\n                particle.position.x = closest.x + diameter * factor.x;\n                particle.position.y = closest.y + diameter * factor.y;\n                particle.velocity.mult(inverse);\n                return true;\n            }\n        } else if (options.type === _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_4__.PolygonMaskType.inline) {\n            const dist = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.getDistance)(particle.initialPosition, particle.getPosition()), { velocity } = particle;\n            if (dist > this._moveRadius) {\n                velocity.x = velocity.y * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.half - velocity.x;\n                velocity.y = velocity.x * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.half - velocity.y;\n                return true;\n            }\n        }\n        return false;\n    };\n    _randomPoint = ()=>{\n        const container = this._container, options = container.actualOptions.polygon;\n        if (!options) {\n            return;\n        }\n        let position;\n        if (options.type === _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_4__.PolygonMaskType.inline) {\n            switch(options.inline.arrangement){\n                case _Enums_PolygonMaskInlineArrangement_js__WEBPACK_IMPORTED_MODULE_3__.PolygonMaskInlineArrangement.randomPoint:\n                    position = this._getRandomPoint();\n                    break;\n                case _Enums_PolygonMaskInlineArrangement_js__WEBPACK_IMPORTED_MODULE_3__.PolygonMaskInlineArrangement.randomLength:\n                    position = this._getRandomPointByLength();\n                    break;\n                case _Enums_PolygonMaskInlineArrangement_js__WEBPACK_IMPORTED_MODULE_3__.PolygonMaskInlineArrangement.equidistant:\n                    position = this._getEquidistantPointByIndex(container.particles.count);\n                    break;\n                case _Enums_PolygonMaskInlineArrangement_js__WEBPACK_IMPORTED_MODULE_3__.PolygonMaskInlineArrangement.onePerPoint:\n                case _Enums_PolygonMaskInlineArrangement_js__WEBPACK_IMPORTED_MODULE_3__.PolygonMaskInlineArrangement.perPoint:\n                default:\n                    position = this._getPointByIndex(container.particles.count);\n            }\n        } else {\n            const canvasSize = container.canvas.size;\n            position = {\n                x: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.getRandom)() * canvasSize.width,\n                y: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.getRandom)() * canvasSize.height\n            };\n        }\n        if (this._checkInsidePolygon(position)) {\n            return position;\n        } else {\n            return this._randomPoint();\n        }\n    };\n}\n\n\n//# sourceURL=webpack://@tsparticles/plugin-polygon-mask/./dist/browser/PolygonMaskInstance.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   PolygonMaskInstance: () => (/* binding */ PolygonMaskInstance)\n/* harmony export */ });\n/* harmony import */ var _pathseg_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./pathseg.js */ \"./dist/browser/pathseg.js\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _utils_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./utils.js */ \"./dist/browser/utils.js\");\n/* harmony import */ var _Enums_PolygonMaskInlineArrangement_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Enums/PolygonMaskInlineArrangement.js */ \"./dist/browser/Enums/PolygonMaskInlineArrangement.js\");\n/* harmony import */ var _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Enums/PolygonMaskType.js */ \"./dist/browser/Enums/PolygonMaskType.js\");\n\n\n\n\n\nconst noPolygonDataLoaded = `No polygon data loaded.`, noPolygonFound = `No polygon found, you need to specify SVG url in config.`;\nclass PolygonMaskInstance {\n    dimension;\n    offset;\n    paths;\n    raw;\n    redrawTimeout;\n    _container;\n    _moveRadius;\n    _pluginManager;\n    _scale;\n    constructor(pluginManager, container){\n        this._container = container;\n        this._pluginManager = pluginManager;\n        this.dimension = {\n            height: 0,\n            width: 0\n        };\n        this._moveRadius = 0;\n        this._scale = 1;\n    }\n    clickPositionValid(position) {\n        const options = this._container.actualOptions.polygon;\n        return !!options?.enable && options.type !== _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_4__.PolygonMaskType.none && options.type !== _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_4__.PolygonMaskType.inline && this._checkInsidePolygon(position);\n    }\n    draw(context) {\n        if (!this.paths?.length) {\n            return;\n        }\n        const options = this._container.actualOptions.polygon;\n        if (!options?.enable) {\n            return;\n        }\n        const polygonDraw = options.draw;\n        if (!polygonDraw.enable) {\n            return;\n        }\n        const rawData = this.raw;\n        for (const path of this.paths){\n            const path2d = path.path2d;\n            if (path2d && this.offset) {\n                (0,_utils_js__WEBPACK_IMPORTED_MODULE_2__.drawPolygonMaskPath)(this._pluginManager, context, path2d, polygonDraw.stroke, this.offset, this._container.hdr);\n            } else if (rawData) {\n                (0,_utils_js__WEBPACK_IMPORTED_MODULE_2__.drawPolygonMask)(this._pluginManager, context, rawData, polygonDraw.stroke, this._container.hdr);\n            }\n        }\n    }\n    async init() {\n        const container = this._container, polygonMaskOptions = container.actualOptions.polygon, pxRatio = container.retina.pixelRatio;\n        if (!polygonMaskOptions) {\n            return;\n        }\n        this._moveRadius = polygonMaskOptions.move.radius * pxRatio;\n        this._scale = polygonMaskOptions.scale * pxRatio;\n        if (polygonMaskOptions.enable) {\n            await this._initRawData();\n        }\n    }\n    particleBounce(particle, delta, direction) {\n        return this._polygonBounce(particle, delta, direction);\n    }\n    particlePosition(position) {\n        const options = this._container.actualOptions.polygon, defaultLength = 0;\n        if (!(options?.enable && (this.raw?.length ?? defaultLength) > defaultLength)) {\n            return;\n        }\n        return (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.deepExtend)({}, position ?? this._randomPoint());\n    }\n    particlesInitialization() {\n        const options = this._container.actualOptions.polygon;\n        if (options?.enable && options.type === _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_4__.PolygonMaskType.inline && (options.inline.arrangement === _Enums_PolygonMaskInlineArrangement_js__WEBPACK_IMPORTED_MODULE_3__.PolygonMaskInlineArrangement.onePerPoint || options.inline.arrangement === _Enums_PolygonMaskInlineArrangement_js__WEBPACK_IMPORTED_MODULE_3__.PolygonMaskInlineArrangement.perPoint)) {\n            this._drawPoints();\n            return true;\n        }\n        return false;\n    }\n    resize() {\n        const container = this._container, options = container.actualOptions.polygon;\n        if (!(options?.enable && options.type !== _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_4__.PolygonMaskType.none)) {\n            return;\n        }\n        if (this.redrawTimeout) {\n            clearTimeout(this.redrawTimeout);\n        }\n        const timeout = 250;\n        this.redrawTimeout = setTimeout(()=>{\n            void (async ()=>{\n                await this._initRawData(true);\n                await container.particles.redraw();\n            })();\n        }, timeout);\n    }\n    stop() {\n        delete this.raw;\n        delete this.paths;\n    }\n    _checkInsidePolygon = (position)=>{\n        const container = this._container, options = container.actualOptions.polygon;\n        if (!options?.enable || options.type === _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_4__.PolygonMaskType.none || options.type === _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_4__.PolygonMaskType.inline) {\n            return true;\n        }\n        if (!this.raw) {\n            throw new Error(noPolygonFound);\n        }\n        const canvasSize = container.canvas.size, x = position?.x ?? (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.getRandom)() * canvasSize.width, y = position?.y ?? (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.getRandom)() * canvasSize.height, indexOffset = 1;\n        let inside = false;\n        for(let i = 0, j = this.raw.length - indexOffset; i < this.raw.length; j = i++){\n            const pi = this.raw[i], pj = this.raw[j];\n            if (!pi || !pj) {\n                continue;\n            }\n            const intersect = pi.y > y !== pj.y > y && x < (pj.x - pi.x) * (y - pi.y) / (pj.y - pi.y) + pi.x;\n            if (intersect) {\n                inside = !inside;\n            }\n        }\n        if (options.type === _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_4__.PolygonMaskType.inside) {\n            return inside;\n        } else {\n            return !inside;\n        }\n    };\n    _createPath2D = ()=>{\n        const container = this._container, options = container.actualOptions.polygon;\n        if (!options || !this.paths?.length) {\n            return;\n        }\n        for (const path of this.paths){\n            const pathData = path.element.getAttribute(\"d\");\n            if (pathData) {\n                const path2d = new Path2D(pathData), matrix = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.safeDocument)().createElementNS(\"http://www.w3.org/2000/svg\", \"svg\").createSVGMatrix(), finalPath = new Path2D(), transform = matrix.scale(this._scale);\n                finalPath.addPath(path2d, transform);\n                path.path2d = finalPath;\n            } else {\n                delete path.path2d;\n            }\n            if (path.path2d ?? !this.raw) {\n                continue;\n            }\n            path.path2d = new Path2D();\n            const firstIndex = 0, firstPoint = this.raw[firstIndex];\n            if (!firstPoint) {\n                continue;\n            }\n            path.path2d.moveTo(firstPoint.x, firstPoint.y);\n            this.raw.forEach((pos, i)=>{\n                if (i > firstIndex) {\n                    path.path2d?.lineTo(pos.x, pos.y);\n                }\n            });\n            path.path2d.closePath();\n        }\n    };\n    _downloadSvgPath = async (svgUrl, force)=>{\n        const options = this._container.actualOptions.polygon;\n        if (!options) {\n            return;\n        }\n        const url = svgUrl ?? options.url, forceDownload = force ?? false;\n        if (!url || this.paths !== undefined && !forceDownload) {\n            return this.raw;\n        }\n        const req = await fetch(url);\n        if (!req.ok) {\n            throw new Error(`Error occurred during polygon mask download`);\n        }\n        return this._parseSvgPath(await req.text(), force);\n    };\n    _drawPoints = ()=>{\n        if (!this.raw) {\n            return;\n        }\n        for (const item of this.raw){\n            this._container.particles.addParticle({\n                x: item.x,\n                y: item.y\n            });\n        }\n    };\n    _getEquidistantPointByIndex = (index)=>{\n        const container = this._container, options = container.actualOptions, polygonMaskOptions = options.polygon;\n        if (!polygonMaskOptions) {\n            return;\n        }\n        if (!this.raw?.length || !this.paths?.length) {\n            throw new Error(noPolygonDataLoaded);\n        }\n        let offset = 0, point;\n        const baseAccumulator = 0, totalLength = this.paths.reduce((tot, path)=>tot + path.length, baseAccumulator), distance = totalLength / options.particles.number.value;\n        for (const path of this.paths){\n            const pathDistance = distance * index - offset;\n            if (pathDistance <= path.length) {\n                point = path.element.getPointAtLength(pathDistance);\n                break;\n            } else {\n                offset += path.length;\n            }\n        }\n        const scale = this._scale;\n        return {\n            x: (point?.x ?? _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.x) * scale + (this.offset?.x ?? _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.x),\n            y: (point?.y ?? _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.y) * scale + (this.offset?.y ?? _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.y)\n        };\n    };\n    _getPointByIndex = (index)=>{\n        if (!this.raw?.length) {\n            throw new Error(noPolygonDataLoaded);\n        }\n        const coords = this.raw[index % this.raw.length];\n        if (!coords) {\n            return;\n        }\n        return {\n            x: coords.x,\n            y: coords.y\n        };\n    };\n    _getRandomPoint = ()=>{\n        if (!this.raw?.length) {\n            throw new Error(noPolygonDataLoaded);\n        }\n        const coords = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.itemFromArray)(this.raw);\n        if (!coords) {\n            return;\n        }\n        return {\n            x: coords.x,\n            y: coords.y\n        };\n    };\n    _getRandomPointByLength = ()=>{\n        const container = this._container, options = container.actualOptions.polygon;\n        if (!options) {\n            return;\n        }\n        if (!this.raw?.length || !this.paths?.length) {\n            throw new Error(noPolygonDataLoaded);\n        }\n        const path = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.itemFromArray)(this.paths);\n        if (!path) {\n            return;\n        }\n        const offset = 1, distance = Math.floor((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.getRandom)() * path.length) + offset, point = path.element.getPointAtLength(distance), scale = this._scale;\n        return {\n            x: point.x * scale + (this.offset?.x ?? _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.x),\n            y: point.y * scale + (this.offset?.y ?? _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.originPoint.y)\n        };\n    };\n    _initRawData = async (force)=>{\n        const options = this._container.actualOptions.polygon;\n        if (!options) {\n            return;\n        }\n        if (options.url) {\n            this.raw = await this._downloadSvgPath(options.url, force);\n        } else if (options.data) {\n            const data = options.data;\n            let svg;\n            if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.isString)(data)) {\n                svg = data;\n            } else {\n                const getPath = (p)=>`<path d=\"${p}\" />`, path = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.isArray)(data.path) ? data.path.map(getPath).join(\"\") : getPath(data.path), namespaces = 'xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"';\n                svg = `<svg ${namespaces} width=\"${data.size.width.toString()}\" height=\"${data.size.height.toString()}\">${path}</svg>`;\n            }\n            this.raw = this._parseSvgPath(svg, force);\n        }\n        this._createPath2D();\n        this._container.dispatchEvent(\"polygonMaskLoaded\");\n    };\n    _parseSvgPath = (xml, force)=>{\n        const forceDownload = force ?? false;\n        if (this.paths !== undefined && !forceDownload) {\n            return this.raw;\n        }\n        const container = this._container, options = container.actualOptions.polygon;\n        if (!options) {\n            return;\n        }\n        const parser = new DOMParser(), doc = parser.parseFromString(xml, \"image/svg+xml\"), firstIndex = 0, svg = doc.getElementsByTagName(\"svg\")[firstIndex];\n        if (!svg) {\n            return;\n        }\n        let svgPaths = svg.getElementsByTagName(\"path\");\n        if (!svgPaths.length) {\n            svgPaths = doc.getElementsByTagName(\"path\");\n        }\n        this.paths = [];\n        for(let i = 0; i < svgPaths.length; i++){\n            const path = svgPaths.item(i);\n            if (path) {\n                this.paths.push({\n                    element: path,\n                    length: path.getTotalLength()\n                });\n            }\n        }\n        const scale = this._scale;\n        this.dimension.width = parseFloat(svg.getAttribute(\"width\") ?? \"0\") * scale;\n        this.dimension.height = parseFloat(svg.getAttribute(\"height\") ?? \"0\") * scale;\n        const position = options.position ?? {\n            x: 50,\n            y: 50\n        }, canvasSize = container.canvas.size;\n        this.offset = {\n            x: canvasSize.width * position.x / _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.percentDenominator - this.dimension.width * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.half,\n            y: canvasSize.height * position.y / _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.percentDenominator - this.dimension.height * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.half\n        };\n        return (0,_utils_js__WEBPACK_IMPORTED_MODULE_2__.parsePaths)(this.paths, scale, this.offset);\n    };\n    _polygonBounce = (particle, _delta, direction)=>{\n        const options = this._container.actualOptions.polygon;\n        if (!this.raw || !options?.enable || direction !== _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.OutModeDirection.top) {\n            return false;\n        }\n        if (options.type === _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_4__.PolygonMaskType.inside || options.type === _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_4__.PolygonMaskType.outside) {\n            let closest, dx, dy;\n            const pos = particle.getPosition(), radius = particle.getRadius(), offset = 1;\n            for(let i = 0, j = this.raw.length - offset; i < this.raw.length; j = i++){\n                const pi = this.raw[i], pj = this.raw[j];\n                if (!pi || !pj) {\n                    continue;\n                }\n                closest = (0,_utils_js__WEBPACK_IMPORTED_MODULE_2__.calcClosestPointOnSegment)(pi, pj, pos);\n                const dist = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.getDistances)(pos, closest);\n                [dx, dy] = [\n                    dist.dx,\n                    dist.dy\n                ];\n                if (dist.distance < radius) {\n                    (0,_utils_js__WEBPACK_IMPORTED_MODULE_2__.segmentBounce)(pi, pj, particle.velocity);\n                    return true;\n                }\n            }\n            if (closest && dx !== undefined && dy !== undefined && !this._checkInsidePolygon(pos)) {\n                const factor = {\n                    x: 1,\n                    y: 1\n                }, diameter = radius * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.double, inverse = -1;\n                if (pos.x >= closest.x) {\n                    factor.x = -1;\n                }\n                if (pos.y >= closest.y) {\n                    factor.y = -1;\n                }\n                particle.position.x = closest.x + diameter * factor.x;\n                particle.position.y = closest.y + diameter * factor.y;\n                particle.velocity.mult(inverse);\n                return true;\n            }\n        } else if (options.type === _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_4__.PolygonMaskType.inline) {\n            const dist = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.getDistance)(particle.initialPosition, particle.getPosition()), { velocity } = particle;\n            if (dist > this._moveRadius) {\n                velocity.x = velocity.y * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.half - velocity.x;\n                velocity.y = velocity.x * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.half - velocity.y;\n                return true;\n            }\n        }\n        return false;\n    };\n    _randomPoint = ()=>{\n        const container = this._container, options = container.actualOptions.polygon;\n        if (!options) {\n            return;\n        }\n        let position;\n        if (options.type === _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_4__.PolygonMaskType.inline) {\n            switch(options.inline.arrangement){\n                case _Enums_PolygonMaskInlineArrangement_js__WEBPACK_IMPORTED_MODULE_3__.PolygonMaskInlineArrangement.randomPoint:\n                    position = this._getRandomPoint();\n                    break;\n                case _Enums_PolygonMaskInlineArrangement_js__WEBPACK_IMPORTED_MODULE_3__.PolygonMaskInlineArrangement.randomLength:\n                    position = this._getRandomPointByLength();\n                    break;\n                case _Enums_PolygonMaskInlineArrangement_js__WEBPACK_IMPORTED_MODULE_3__.PolygonMaskInlineArrangement.equidistant:\n                    position = this._getEquidistantPointByIndex(container.particles.count);\n                    break;\n                case _Enums_PolygonMaskInlineArrangement_js__WEBPACK_IMPORTED_MODULE_3__.PolygonMaskInlineArrangement.onePerPoint:\n                case _Enums_PolygonMaskInlineArrangement_js__WEBPACK_IMPORTED_MODULE_3__.PolygonMaskInlineArrangement.perPoint:\n                default:\n                    position = this._getPointByIndex(container.particles.count);\n            }\n        } else {\n            const canvasSize = container.canvas.size;\n            position = {\n                x: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.getRandom)() * canvasSize.width,\n                y: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.getRandom)() * canvasSize.height\n            };\n        }\n        if (this._checkInsidePolygon(position)) {\n            return position;\n        } else {\n            return this._randomPoint();\n        }\n    };\n}\n\n\n//# sourceURL=webpack://@tsparticles/plugin-polygon-mask/./dist/browser/PolygonMaskInstance.js?\n}");
 
 /***/ },
 
@@ -43,7 +43,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n\n(function() {\n    \"use s
   \*******************************/
 (__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 */   calcClosestPointOnSegment: () => (/* binding */ calcClosestPointOnSegment),\n/* harmony export */   drawPolygonMask: () => (/* binding */ drawPolygonMask),\n/* harmony export */   drawPolygonMaskPath: () => (/* binding */ drawPolygonMaskPath),\n/* harmony export */   parsePaths: () => (/* binding */ parsePaths),\n/* harmony export */   segmentBounce: () => (/* binding */ segmentBounce)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nconst squareExp = 2, inSegmentRange = {\n    min: 0,\n    max: 1\n};\nfunction drawPolygonMask(engine, context, rawData, stroke, hdr = false) {\n    const color = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToRgb)(engine, stroke.color);\n    if (!color) {\n        return;\n    }\n    const firstIndex = 0, firstItem = rawData[firstIndex];\n    if (!firstItem) {\n        return;\n    }\n    context.beginPath();\n    context.moveTo(firstItem.x, firstItem.y);\n    for (const item of rawData){\n        context.lineTo(item.x, item.y);\n    }\n    context.closePath();\n    context.strokeStyle = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(color, hdr);\n    context.lineWidth = stroke.width;\n    context.stroke();\n}\nfunction drawPolygonMaskPath(engine, context, path, stroke, position, hdr = false) {\n    const defaultTransform = {\n        a: 1,\n        b: 0,\n        c: 0,\n        d: 1\n    };\n    context.setTransform(defaultTransform.a, defaultTransform.b, defaultTransform.c, defaultTransform.d, position.x, position.y);\n    const color = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToRgb)(engine, stroke.color);\n    if (!color) {\n        return;\n    }\n    context.strokeStyle = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(color, hdr, stroke.opacity);\n    context.lineWidth = stroke.width;\n    context.stroke(path);\n    context.resetTransform();\n}\nfunction parsePaths(paths, scale, offset) {\n    const res = [], defaultCount = 0;\n    for (const path of paths){\n        const segments = path.element.pathSegList, len = segments?.numberOfItems ?? defaultCount, p = {\n            x: 0,\n            y: 0\n        };\n        for(let i = 0; i < len; i++){\n            const segment = segments?.getItem(i), svgPathSeg = globalThis.SVGPathSeg;\n            switch(segment?.pathSegType){\n                case svgPathSeg.PATHSEG_MOVETO_ABS:\n                case svgPathSeg.PATHSEG_LINETO_ABS:\n                case svgPathSeg.PATHSEG_CURVETO_CUBIC_ABS:\n                case svgPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS:\n                case svgPathSeg.PATHSEG_ARC_ABS:\n                case svgPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_ABS:\n                case svgPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS:\n                    {\n                        const absSeg = segment;\n                        p.x = absSeg.x;\n                        p.y = absSeg.y;\n                        break;\n                    }\n                case svgPathSeg.PATHSEG_LINETO_HORIZONTAL_ABS:\n                    p.x = segment.x;\n                    break;\n                case svgPathSeg.PATHSEG_LINETO_VERTICAL_ABS:\n                    p.y = segment.y;\n                    break;\n                case svgPathSeg.PATHSEG_LINETO_REL:\n                case svgPathSeg.PATHSEG_MOVETO_REL:\n                case svgPathSeg.PATHSEG_CURVETO_CUBIC_REL:\n                case svgPathSeg.PATHSEG_CURVETO_QUADRATIC_REL:\n                case svgPathSeg.PATHSEG_ARC_REL:\n                case svgPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_REL:\n                case svgPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL:\n                    {\n                        const relSeg = segment;\n                        p.x += relSeg.x;\n                        p.y += relSeg.y;\n                        break;\n                    }\n                case svgPathSeg.PATHSEG_LINETO_HORIZONTAL_REL:\n                    p.x += segment.x;\n                    break;\n                case svgPathSeg.PATHSEG_LINETO_VERTICAL_REL:\n                    p.y += segment.y;\n                    break;\n                case svgPathSeg.PATHSEG_UNKNOWN:\n                case svgPathSeg.PATHSEG_CLOSEPATH:\n                    continue;\n                default:\n                    continue;\n            }\n            res.push({\n                x: p.x * scale + offset.x,\n                y: p.y * scale + offset.y\n            });\n        }\n    }\n    return res;\n}\nfunction calcClosestPointOnSegment(s1, s2, pos) {\n    const { dx: dx1, dy: dy1 } = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistances)(pos, s1), { dx: dx2, dy: dy2 } = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistances)(s2, s1), t = (dx1 * dx2 + dy1 * dy2) / (dx2 ** squareExp + dy2 ** squareExp), res = {\n        x: s1.x + dx2 * t,\n        y: s1.y + dy2 * t,\n        isOnSegment: t >= inSegmentRange.min && t <= inSegmentRange.max\n    };\n    if (t < inSegmentRange.min) {\n        res.x = s1.x;\n        res.y = s1.y;\n    } else if (t > inSegmentRange.max) {\n        res.x = s2.x;\n        res.y = s2.y;\n    }\n    return res;\n}\nfunction segmentBounce(start, stop, velocity) {\n    const { dx, dy } = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistances)(start, stop), wallAngle = Math.atan2(dy, dx), wallNormal = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Vector.create(Math.sin(wallAngle), -Math.cos(wallAngle)), d = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.double * (velocity.x * wallNormal.x + velocity.y * wallNormal.y);\n    wallNormal.multTo(d);\n    velocity.subFrom(wallNormal);\n}\n\n\n//# sourceURL=webpack://@tsparticles/plugin-polygon-mask/./dist/browser/utils.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   calcClosestPointOnSegment: () => (/* binding */ calcClosestPointOnSegment),\n/* harmony export */   drawPolygonMask: () => (/* binding */ drawPolygonMask),\n/* harmony export */   drawPolygonMaskPath: () => (/* binding */ drawPolygonMaskPath),\n/* harmony export */   parsePaths: () => (/* binding */ parsePaths),\n/* harmony export */   segmentBounce: () => (/* binding */ segmentBounce)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nconst squareExp = 2, inSegmentRange = {\n    min: 0,\n    max: 1\n};\nfunction drawPolygonMask(pluginManager, context, rawData, stroke, hdr = false) {\n    const color = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToRgb)(pluginManager, stroke.color);\n    if (!color) {\n        return;\n    }\n    const firstIndex = 0, firstItem = rawData[firstIndex];\n    if (!firstItem) {\n        return;\n    }\n    context.beginPath();\n    context.moveTo(firstItem.x, firstItem.y);\n    for (const item of rawData){\n        context.lineTo(item.x, item.y);\n    }\n    context.closePath();\n    context.strokeStyle = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(color, hdr);\n    context.lineWidth = stroke.width;\n    context.stroke();\n}\nfunction drawPolygonMaskPath(pluginManager, context, path, stroke, position, hdr = false) {\n    const defaultTransform = {\n        a: 1,\n        b: 0,\n        c: 0,\n        d: 1\n    };\n    context.setTransform(defaultTransform.a, defaultTransform.b, defaultTransform.c, defaultTransform.d, position.x, position.y);\n    const color = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToRgb)(pluginManager, stroke.color);\n    if (!color) {\n        return;\n    }\n    context.strokeStyle = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(color, hdr, stroke.opacity);\n    context.lineWidth = stroke.width;\n    context.stroke(path);\n    context.resetTransform();\n}\nfunction parsePaths(paths, scale, offset) {\n    const res = [], defaultCount = 0;\n    for (const path of paths){\n        const segments = path.element.pathSegList, len = segments?.numberOfItems ?? defaultCount, p = {\n            x: 0,\n            y: 0\n        };\n        for(let i = 0; i < len; i++){\n            const segment = segments?.getItem(i), svgPathSeg = globalThis.SVGPathSeg;\n            switch(segment?.pathSegType){\n                case svgPathSeg.PATHSEG_MOVETO_ABS:\n                case svgPathSeg.PATHSEG_LINETO_ABS:\n                case svgPathSeg.PATHSEG_CURVETO_CUBIC_ABS:\n                case svgPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS:\n                case svgPathSeg.PATHSEG_ARC_ABS:\n                case svgPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_ABS:\n                case svgPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS:\n                    {\n                        const absSeg = segment;\n                        p.x = absSeg.x;\n                        p.y = absSeg.y;\n                        break;\n                    }\n                case svgPathSeg.PATHSEG_LINETO_HORIZONTAL_ABS:\n                    p.x = segment.x;\n                    break;\n                case svgPathSeg.PATHSEG_LINETO_VERTICAL_ABS:\n                    p.y = segment.y;\n                    break;\n                case svgPathSeg.PATHSEG_LINETO_REL:\n                case svgPathSeg.PATHSEG_MOVETO_REL:\n                case svgPathSeg.PATHSEG_CURVETO_CUBIC_REL:\n                case svgPathSeg.PATHSEG_CURVETO_QUADRATIC_REL:\n                case svgPathSeg.PATHSEG_ARC_REL:\n                case svgPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_REL:\n                case svgPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL:\n                    {\n                        const relSeg = segment;\n                        p.x += relSeg.x;\n                        p.y += relSeg.y;\n                        break;\n                    }\n                case svgPathSeg.PATHSEG_LINETO_HORIZONTAL_REL:\n                    p.x += segment.x;\n                    break;\n                case svgPathSeg.PATHSEG_LINETO_VERTICAL_REL:\n                    p.y += segment.y;\n                    break;\n                case svgPathSeg.PATHSEG_UNKNOWN:\n                case svgPathSeg.PATHSEG_CLOSEPATH:\n                    continue;\n                default:\n                    continue;\n            }\n            res.push({\n                x: p.x * scale + offset.x,\n                y: p.y * scale + offset.y\n            });\n        }\n    }\n    return res;\n}\nfunction calcClosestPointOnSegment(s1, s2, pos) {\n    const { dx: dx1, dy: dy1 } = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistances)(pos, s1), { dx: dx2, dy: dy2 } = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistances)(s2, s1), t = (dx1 * dx2 + dy1 * dy2) / (dx2 ** squareExp + dy2 ** squareExp), res = {\n        x: s1.x + dx2 * t,\n        y: s1.y + dy2 * t,\n        isOnSegment: t >= inSegmentRange.min && t <= inSegmentRange.max\n    };\n    if (t < inSegmentRange.min) {\n        res.x = s1.x;\n        res.y = s1.y;\n    } else if (t > inSegmentRange.max) {\n        res.x = s2.x;\n        res.y = s2.y;\n    }\n    return res;\n}\nfunction segmentBounce(start, stop, velocity) {\n    const { dx, dy } = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistances)(start, stop), wallAngle = Math.atan2(dy, dx), wallNormal = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Vector.create(Math.sin(wallAngle), -Math.cos(wallAngle)), d = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.double * (velocity.x * wallNormal.x + velocity.y * wallNormal.y);\n    wallNormal.multTo(d);\n    velocity.subFrom(wallNormal);\n}\n\n\n//# sourceURL=webpack://@tsparticles/plugin-polygon-mask/./dist/browser/utils.js?\n}");
 
 /***/ }
 

package/dist_browser_PolygonMaskPlugin_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-beta.0
+ * 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 */   PolygonMask: () => (/* binding */ PolygonMask)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _PolygonMaskDraw_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./PolygonMaskDraw.js */ \"./dist/browser/Options/Classes/PolygonMaskDraw.js\");\n/* harmony import */ var _PolygonMaskInline_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./PolygonMaskInline.js */ \"./dist/browser/Options/Classes/PolygonMaskInline.js\");\n/* harmony import */ var _PolygonMaskLocalSvg_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./PolygonMaskLocalSvg.js */ \"./dist/browser/Options/Classes/PolygonMaskLocalSvg.js\");\n/* harmony import */ var _PolygonMaskMove_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./PolygonMaskMove.js */ \"./dist/browser/Options/Classes/PolygonMaskMove.js\");\n/* harmony import */ var _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../Enums/PolygonMaskType.js */ \"./dist/browser/Enums/PolygonMaskType.js\");\n\n\n\n\n\n\nclass PolygonMask {\n    data;\n    draw;\n    enable;\n    inline;\n    move;\n    position;\n    scale;\n    type;\n    url;\n    constructor(engine){\n        this.draw = new _PolygonMaskDraw_js__WEBPACK_IMPORTED_MODULE_1__.PolygonMaskDraw(engine);\n        this.enable = false;\n        this.inline = new _PolygonMaskInline_js__WEBPACK_IMPORTED_MODULE_2__.PolygonMaskInline();\n        this.move = new _PolygonMaskMove_js__WEBPACK_IMPORTED_MODULE_4__.PolygonMaskMove();\n        this.scale = 1;\n        this.type = _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_5__.PolygonMaskType.none;\n    }\n    load(data) {\n        if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n            return;\n        }\n        this.draw.load(data.draw);\n        this.inline.load(data.inline);\n        this.move.load(data.move);\n        if (data.scale !== undefined) {\n            this.scale = data.scale;\n        }\n        if (data.type !== undefined) {\n            this.type = data.type;\n        }\n        if (data.enable !== undefined) {\n            this.enable = data.enable;\n        } else {\n            this.enable = this.type !== _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_5__.PolygonMaskType.none;\n        }\n        if (data.url !== undefined) {\n            this.url = data.url;\n        }\n        if (data.data !== undefined) {\n            if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isString)(data.data)) {\n                this.data = data.data;\n            } else {\n                this.data = new _PolygonMaskLocalSvg_js__WEBPACK_IMPORTED_MODULE_3__.PolygonMaskLocalSvg();\n                this.data.load(data.data);\n            }\n        }\n        if (data.position !== undefined) {\n            this.position = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.deepExtend)({}, data.position);\n        }\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/plugin-polygon-mask/./dist/browser/Options/Classes/PolygonMask.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   PolygonMask: () => (/* binding */ PolygonMask)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _PolygonMaskDraw_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./PolygonMaskDraw.js */ \"./dist/browser/Options/Classes/PolygonMaskDraw.js\");\n/* harmony import */ var _PolygonMaskInline_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./PolygonMaskInline.js */ \"./dist/browser/Options/Classes/PolygonMaskInline.js\");\n/* harmony import */ var _PolygonMaskLocalSvg_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./PolygonMaskLocalSvg.js */ \"./dist/browser/Options/Classes/PolygonMaskLocalSvg.js\");\n/* harmony import */ var _PolygonMaskMove_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./PolygonMaskMove.js */ \"./dist/browser/Options/Classes/PolygonMaskMove.js\");\n/* harmony import */ var _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../Enums/PolygonMaskType.js */ \"./dist/browser/Enums/PolygonMaskType.js\");\n\n\n\n\n\n\nclass PolygonMask {\n    data;\n    draw;\n    enable;\n    inline;\n    move;\n    position;\n    scale;\n    type;\n    url;\n    constructor(pluginManager){\n        this.draw = new _PolygonMaskDraw_js__WEBPACK_IMPORTED_MODULE_1__.PolygonMaskDraw(pluginManager);\n        this.enable = false;\n        this.inline = new _PolygonMaskInline_js__WEBPACK_IMPORTED_MODULE_2__.PolygonMaskInline();\n        this.move = new _PolygonMaskMove_js__WEBPACK_IMPORTED_MODULE_4__.PolygonMaskMove();\n        this.scale = 1;\n        this.type = _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_5__.PolygonMaskType.none;\n    }\n    load(data) {\n        if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n            return;\n        }\n        this.draw.load(data.draw);\n        this.inline.load(data.inline);\n        this.move.load(data.move);\n        if (data.scale !== undefined) {\n            this.scale = data.scale;\n        }\n        if (data.type !== undefined) {\n            this.type = data.type;\n        }\n        if (data.enable !== undefined) {\n            this.enable = data.enable;\n        } else {\n            this.enable = this.type !== _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_5__.PolygonMaskType.none;\n        }\n        if (data.url !== undefined) {\n            this.url = data.url;\n        }\n        if (data.data !== undefined) {\n            if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isString)(data.data)) {\n                this.data = data.data;\n            } else {\n                this.data = new _PolygonMaskLocalSvg_js__WEBPACK_IMPORTED_MODULE_3__.PolygonMaskLocalSvg();\n                this.data.load(data.data);\n            }\n        }\n        if (data.position !== undefined) {\n            this.position = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.deepExtend)({}, data.position);\n        }\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/plugin-polygon-mask/./dist/browser/Options/Classes/PolygonMask.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 */   PolygonMaskDraw: () => (/* binding */ PolygonMaskDraw)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _PolygonMaskDrawStroke_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./PolygonMaskDrawStroke.js */ \"./dist/browser/Options/Classes/PolygonMaskDrawStroke.js\");\n\n\nclass PolygonMaskDraw {\n    enable;\n    stroke;\n    constructor(engine){\n        this.enable = false;\n        this.stroke = new _PolygonMaskDrawStroke_js__WEBPACK_IMPORTED_MODULE_1__.PolygonMaskDrawStroke(engine);\n    }\n    load(data) {\n        if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n            return;\n        }\n        if (data.enable !== undefined) {\n            this.enable = data.enable;\n        }\n        const stroke = data.stroke;\n        this.stroke.load(stroke);\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/plugin-polygon-mask/./dist/browser/Options/Classes/PolygonMaskDraw.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   PolygonMaskDraw: () => (/* binding */ PolygonMaskDraw)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _PolygonMaskDrawStroke_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./PolygonMaskDrawStroke.js */ \"./dist/browser/Options/Classes/PolygonMaskDrawStroke.js\");\n\n\nclass PolygonMaskDraw {\n    enable;\n    stroke;\n    constructor(pluginManager){\n        this.enable = false;\n        this.stroke = new _PolygonMaskDrawStroke_js__WEBPACK_IMPORTED_MODULE_1__.PolygonMaskDrawStroke(pluginManager);\n    }\n    load(data) {\n        if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n            return;\n        }\n        if (data.enable !== undefined) {\n            this.enable = data.enable;\n        }\n        const stroke = data.stroke;\n        this.stroke.load(stroke);\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/plugin-polygon-mask/./dist/browser/Options/Classes/PolygonMaskDraw.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 */   PolygonMaskDrawStroke: () => (/* binding */ PolygonMaskDrawStroke)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nclass PolygonMaskDrawStroke {\n    color;\n    opacity;\n    width;\n    _engine;\n    constructor(engine){\n        this._engine = engine;\n        this.color = new _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.OptionsColor();\n        this.width = 0.5;\n        this.opacity = 1;\n    }\n    load(data) {\n        if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n            return;\n        }\n        this.color = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.OptionsColor.create(this.color, data.color);\n        if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isString)(this.color.value)) {\n            this.opacity = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.stringToAlpha)(this._engine, this.color.value) ?? this.opacity;\n        }\n        if (data.opacity !== undefined) {\n            this.opacity = data.opacity;\n        }\n        if (data.width !== undefined) {\n            this.width = data.width;\n        }\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/plugin-polygon-mask/./dist/browser/Options/Classes/PolygonMaskDrawStroke.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   PolygonMaskDrawStroke: () => (/* binding */ PolygonMaskDrawStroke)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nclass PolygonMaskDrawStroke {\n    color;\n    opacity;\n    width;\n    _pluginManager;\n    constructor(pluginManager){\n        this._pluginManager = pluginManager;\n        this.color = new _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.OptionsColor();\n        this.width = 0.5;\n        this.opacity = 1;\n    }\n    load(data) {\n        if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n            return;\n        }\n        this.color = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.OptionsColor.create(this.color, data.color);\n        if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isString)(this.color.value)) {\n            this.opacity = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.stringToAlpha)(this._pluginManager, this.color.value) ?? this.opacity;\n        }\n        if (data.opacity !== undefined) {\n            this.opacity = data.opacity;\n        }\n        if (data.width !== undefined) {\n            this.width = data.width;\n        }\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/plugin-polygon-mask/./dist/browser/Options/Classes/PolygonMaskDrawStroke.js?\n}");
 
 /***/ },
 
@@ -83,7 +83,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 */   PolygonMaskPlugin: () => (/* binding */ PolygonMaskPlugin)\n/* harmony export */ });\n/* harmony import */ var _Options_Classes_PolygonMask_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Options/Classes/PolygonMask.js */ \"./dist/browser/Options/Classes/PolygonMask.js\");\n/* harmony import */ var _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Enums/PolygonMaskType.js */ \"./dist/browser/Enums/PolygonMaskType.js\");\n\n\nclass PolygonMaskPlugin {\n    id = \"polygon-mask\";\n    _engine;\n    constructor(engine){\n        this._engine = engine;\n    }\n    async getPlugin(container) {\n        const { PolygonMaskInstance } = await __webpack_require__.e(/*! import() */ \"dist_browser_PolygonMaskInstance_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./PolygonMaskInstance.js */ \"./dist/browser/PolygonMaskInstance.js\"));\n        return new PolygonMaskInstance(container, this._engine);\n    }\n    loadOptions(_container, options, source) {\n        if (!this.needsPlugin(options) && !this.needsPlugin(source)) {\n            return;\n        }\n        let polygonOptions = options.polygon;\n        if (polygonOptions?.load === undefined) {\n            options.polygon = polygonOptions = new _Options_Classes_PolygonMask_js__WEBPACK_IMPORTED_MODULE_0__.PolygonMask(this._engine);\n        }\n        polygonOptions.load(source?.polygon);\n    }\n    needsPlugin(options) {\n        return options?.polygon?.enable ?? (options?.polygon?.type !== undefined && options.polygon.type !== _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_1__.PolygonMaskType.none);\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/plugin-polygon-mask/./dist/browser/PolygonMaskPlugin.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   PolygonMaskPlugin: () => (/* binding */ PolygonMaskPlugin)\n/* harmony export */ });\n/* harmony import */ var _Options_Classes_PolygonMask_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Options/Classes/PolygonMask.js */ \"./dist/browser/Options/Classes/PolygonMask.js\");\n/* harmony import */ var _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Enums/PolygonMaskType.js */ \"./dist/browser/Enums/PolygonMaskType.js\");\n\n\nclass PolygonMaskPlugin {\n    id = \"polygon-mask\";\n    _pluginManager;\n    constructor(pluginManager){\n        this._pluginManager = pluginManager;\n    }\n    async getPlugin(container) {\n        const { PolygonMaskInstance } = await __webpack_require__.e(/*! import() */ \"dist_browser_PolygonMaskInstance_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./PolygonMaskInstance.js */ \"./dist/browser/PolygonMaskInstance.js\"));\n        return new PolygonMaskInstance(this._pluginManager, container);\n    }\n    loadOptions(_container, options, source) {\n        if (!this.needsPlugin(options) && !this.needsPlugin(source)) {\n            return;\n        }\n        let polygonOptions = options.polygon;\n        if (polygonOptions?.load === undefined) {\n            options.polygon = polygonOptions = new _Options_Classes_PolygonMask_js__WEBPACK_IMPORTED_MODULE_0__.PolygonMask(this._pluginManager);\n        }\n        polygonOptions.load(source?.polygon);\n    }\n    needsPlugin(options) {\n        return options?.polygon?.enable ?? (options?.polygon?.type !== undefined && options.polygon.type !== _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_1__.PolygonMaskType.none);\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/plugin-polygon-mask/./dist/browser/PolygonMaskPlugin.js?\n}");
 
 /***/ }
 

package/esm/Options/Classes/PolygonMask.js

@@ -14,8 +14,8 @@ export class PolygonMask {
     scale;
     type;
     url;
-    constructor(engine) {
-        this.draw = new PolygonMaskDraw(engine);
+    constructor(pluginManager) {
+        this.draw = new PolygonMaskDraw(pluginManager);
         this.enable = false;
         this.inline = new PolygonMaskInline();
         this.move = new PolygonMaskMove();

package/esm/Options/Classes/PolygonMaskDraw.js

@@ -3,9 +3,9 @@ import { PolygonMaskDrawStroke } from "./PolygonMaskDrawStroke.js";
 export class PolygonMaskDraw {
     enable;
     stroke;
-    constructor(engine) {
+    constructor(pluginManager) {
         this.enable = false;
-        this.stroke = new PolygonMaskDrawStroke(engine);
+        this.stroke = new PolygonMaskDrawStroke(pluginManager);
     }
     load(data) {
         if (isNull(data)) {

package/esm/Options/Classes/PolygonMaskDrawStroke.js

@@ -3,9 +3,9 @@ export class PolygonMaskDrawStroke {
     color;
     opacity;
     width;
-    _engine;
-    constructor(engine) {
-        this._engine = engine;
+    _pluginManager;
+    constructor(pluginManager) {
+        this._pluginManager = pluginManager;
         this.color = new OptionsColor();
         this.width = 0.5;
         this.opacity = 1;
@@ -16,7 +16,7 @@ export class PolygonMaskDrawStroke {
         }
         this.color = OptionsColor.create(this.color, data.color);
         if (isString(this.color.value)) {
-            this.opacity = stringToAlpha(this._engine, this.color.value) ?? this.opacity;
+            this.opacity = stringToAlpha(this._pluginManager, this.color.value) ?? this.opacity;
         }
         if (data.opacity !== undefined) {
             this.opacity = data.opacity;

package/esm/PolygonMaskInstance.js

@@ -11,12 +11,12 @@ export class PolygonMaskInstance {
     raw;
     redrawTimeout;
     _container;
-    _engine;
     _moveRadius;
+    _pluginManager;
     _scale;
-    constructor(container, engine) {
+    constructor(pluginManager, container) {
         this._container = container;
-        this._engine = engine;
+        this._pluginManager = pluginManager;
         this.dimension = {
             height: 0,
             width: 0,
@@ -47,10 +47,10 @@ export class PolygonMaskInstance {
         for (const path of this.paths) {
             const path2d = path.path2d;
             if (path2d && this.offset) {
-                drawPolygonMaskPath(this._engine, context, path2d, polygonDraw.stroke, this.offset, this._container.hdr);
+                drawPolygonMaskPath(this._pluginManager, context, path2d, polygonDraw.stroke, this.offset, this._container.hdr);
             }
             else if (rawData) {
-                drawPolygonMask(this._engine, context, rawData, polygonDraw.stroke, this._container.hdr);
+                drawPolygonMask(this._pluginManager, context, rawData, polygonDraw.stroke, this._container.hdr);
             }
         }
     }
@@ -282,9 +282,7 @@ export class PolygonMaskInstance {
             this.raw = this._parseSvgPath(svg, force);
         }
         this._createPath2D();
-        this._engine.dispatchEvent("polygonMaskLoaded", {
-            container: this._container,
-        });
+        this._container.dispatchEvent("polygonMaskLoaded");
     };
     _parseSvgPath = (xml, force) => {
         const forceDownload = force ?? false;

package/esm/PolygonMaskPlugin.js

@@ -2,13 +2,13 @@ import { PolygonMask } from "./Options/Classes/PolygonMask.js";
 import { PolygonMaskType } from "./Enums/PolygonMaskType.js";
 export class PolygonMaskPlugin {
     id = "polygon-mask";
-    _engine;
-    constructor(engine) {
-        this._engine = engine;
+    _pluginManager;
+    constructor(pluginManager) {
+        this._pluginManager = pluginManager;
     }
     async getPlugin(container) {
         const { PolygonMaskInstance } = await import("./PolygonMaskInstance.js");
-        return new PolygonMaskInstance(container, this._engine);
+        return new PolygonMaskInstance(this._pluginManager, container);
     }
     loadOptions(_container, options, source) {
         if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
@@ -16,7 +16,7 @@ export class PolygonMaskPlugin {
         }
         let polygonOptions = options.polygon;
         if (polygonOptions?.load === undefined) {
-            options.polygon = polygonOptions = new PolygonMask(this._engine);
+            options.polygon = polygonOptions = new PolygonMask(this._pluginManager);
         }
         polygonOptions.load(source?.polygon);
     }

package/esm/index.js

@@ -1,8 +1,8 @@
 export async function loadPolygonMaskPlugin(engine) {
-    engine.checkVersion("4.0.0-beta.0");
-    await engine.register(async (e) => {
+    engine.checkVersion("4.0.0-beta.1");
+    await engine.pluginManager.register(async (e) => {
         const { PolygonMaskPlugin } = await import("./PolygonMaskPlugin.js");
-        e.addPlugin(new PolygonMaskPlugin(engine));
+        e.pluginManager.addPlugin(new PolygonMaskPlugin(e.pluginManager));
     });
 }
 export * from "./Enums/PolygonMaskInlineArrangement.js";

package/esm/utils.js

@@ -3,8 +3,8 @@ const squareExp = 2, inSegmentRange = {
     min: 0,
     max: 1,
 };
-export function drawPolygonMask(engine, context, rawData, stroke, hdr = false) {
-    const color = rangeColorToRgb(engine, stroke.color);
+export function drawPolygonMask(pluginManager, context, rawData, stroke, hdr = false) {
+    const color = rangeColorToRgb(pluginManager, stroke.color);
     if (!color) {
         return;
     }
@@ -22,7 +22,7 @@ export function drawPolygonMask(engine, context, rawData, stroke, hdr = false) {
     context.lineWidth = stroke.width;
     context.stroke();
 }
-export function drawPolygonMaskPath(engine, context, path, stroke, position, hdr = false) {
+export function drawPolygonMaskPath(pluginManager, context, path, stroke, position, hdr = false) {
     const defaultTransform = {
         a: 1,
         b: 0,
@@ -30,7 +30,7 @@ export function drawPolygonMaskPath(engine, context, path, stroke, position, hdr
         d: 1,
     };
     context.setTransform(defaultTransform.a, defaultTransform.b, defaultTransform.c, defaultTransform.d, position.x, position.y);
-    const color = rangeColorToRgb(engine, stroke.color);
+    const color = rangeColorToRgb(pluginManager, stroke.color);
     if (!color) {
         return;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/plugin-polygon-mask",
-  "version": "4.0.0-beta.0",
+  "version": "4.0.0-beta.1",
   "description": "tsParticles polygon mask plugin",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -88,7 +88,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@tsparticles/engine": "4.0.0-beta.0"
+    "@tsparticles/engine": "4.0.0-beta.1"
   },
   "publishConfig": {
     "access": "public"