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

package/tsparticles.plugin.polygon-mask.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
- * v3.0.0-alpha.1
+ * v3.0.0-beta.0
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -20,7 +20,7 @@ return /******/ (() => { // webpackBootstrap
 /******/ 	"use strict";
 /******/ 	var __webpack_modules__ = ({
 
-/***/ 505:
+/***/ 448:
 /***/ (() => {
 
 
@@ -1085,7 +1085,7 @@ return /******/ (() => { // webpackBootstrap
         this._pathElement.setAttribute("d", window.SVGPathSegList._pathSegArrayAsString(this._list));
         this._pathElementMutationObserver.observe(this._pathElement, this._mutationObserverConfig);
       };
-      window.SVGPathSegList.prototype.segmentChanged = function (pathSeg) {
+      window.SVGPathSegList.prototype.segmentChanged = function () {
         this._writeListToPath();
       };
       window.SVGPathSegList.prototype.clear = function () {
@@ -1529,11 +1529,11 @@ __webpack_require__.r(__webpack_exports__);
 
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, {
-  "loadPolygonMaskPlugin": () => (/* binding */ loadPolygonMaskPlugin)
+  loadPolygonMaskPlugin: () => (/* binding */ loadPolygonMaskPlugin)
 });
 
 // EXTERNAL MODULE: ./dist/browser/pathseg.js
-var pathseg = __webpack_require__(505);
+var pathseg = __webpack_require__(448);
 // EXTERNAL MODULE: external {"commonjs":"@tsparticles/engine","commonjs2":"@tsparticles/engine","amd":"@tsparticles/engine","root":"window"}
 var engine_root_window_ = __webpack_require__(533);
 ;// CONCATENATED MODULE: ./dist/browser/Options/Classes/PolygonMaskDrawStroke.js
@@ -1545,13 +1545,12 @@ class PolygonMaskDrawStroke {
     this.opacity = 1;
   }
   load(data) {
-    var _a;
     if (!data) {
       return;
     }
     this.color = engine_root_window_.OptionsColor.create(this.color, data.color);
-    if (typeof this.color.value === "string") {
-      this.opacity = (_a = (0,engine_root_window_.stringToAlpha)(this.color.value)) !== null && _a !== void 0 ? _a : this.opacity;
+    if ((0,engine_root_window_.isString)(this.color.value)) {
+      this.opacity = (0,engine_root_window_.stringToAlpha)(this.color.value) ?? this.opacity;
     }
     if (data.opacity !== undefined) {
       this.opacity = data.opacity;
@@ -1563,36 +1562,19 @@ class PolygonMaskDrawStroke {
 }
 ;// CONCATENATED MODULE: ./dist/browser/Options/Classes/PolygonMaskDraw.js
 
-
 class PolygonMaskDraw {
   constructor() {
     this.enable = false;
     this.stroke = new PolygonMaskDrawStroke();
   }
-  get lineColor() {
-    return this.stroke.color;
-  }
-  set lineColor(value) {
-    this.stroke.color = engine_root_window_.OptionsColor.create(this.stroke.color, value);
-  }
-  get lineWidth() {
-    return this.stroke.width;
-  }
-  set lineWidth(value) {
-    this.stroke.width = value;
-  }
   load(data) {
-    var _a;
     if (!data) {
       return;
     }
     if (data.enable !== undefined) {
       this.enable = data.enable;
     }
-    const stroke = (_a = data.stroke) !== null && _a !== void 0 ? _a : {
-      color: data.lineColor,
-      width: data.lineWidth
-    };
+    const stroke = data.stroke;
     this.stroke.load(stroke);
   }
 }
@@ -1669,12 +1651,6 @@ class PolygonMask {
     this.scale = 1;
     this.type = "none";
   }
-  get inlineArrangement() {
-    return this.inline.arrangement;
-  }
-  set inlineArrangement(value) {
-    this.inline.arrangement = value;
-  }
   load(data) {
     if (!data) {
       return;
@@ -1697,7 +1673,7 @@ class PolygonMask {
       this.url = data.url;
     }
     if (data.data !== undefined) {
-      if (typeof data.data === "string") {
+      if ((0,engine_root_window_.isString)(data.data)) {
         this.data = data.data;
       } else {
         this.data = new PolygonMaskLocalSvg();
@@ -1738,19 +1714,18 @@ function drawPolygonMaskPath(context, path, stroke, position) {
   context.setTransform(1, 0, 0, 1, 0, 0);
 }
 function parsePaths(paths, scale, offset) {
-  var _a;
   const res = [];
   for (const path of paths) {
     const segments = path.element.pathSegList,
-      len = (_a = segments === null || segments === void 0 ? void 0 : segments.numberOfItems) !== null && _a !== void 0 ? _a : 0,
+      len = segments?.numberOfItems ?? 0,
       p = {
         x: 0,
         y: 0
       };
     for (let i = 0; i < len; i++) {
-      const segment = segments === null || segments === void 0 ? void 0 : segments.getItem(i);
-      const svgPathSeg = window.SVGPathSeg;
-      switch (segment === null || segment === void 0 ? void 0 : segment.pathSegType) {
+      const segment = segments?.getItem(i),
+        svgPathSeg = window.SVGPathSeg;
+      switch (segment?.pathSegType) {
         case svgPathSeg.PATHSEG_MOVETO_ABS:
         case svgPathSeg.PATHSEG_LINETO_ABS:
         case svgPathSeg.PATHSEG_CURVETO_CUBIC_ABS:
@@ -1839,10 +1814,314 @@ function segmentBounce(start, stop, velocity) {
 ;// CONCATENATED MODULE: ./dist/browser/PolygonMaskInstance.js
 
 
-const noPolygonDataLoaded = "No polygon data loaded.",
-  noPolygonFound = "No polygon found, you need to specify SVG url in config.";
+const noPolygonDataLoaded = `${engine_root_window_.errorPrefix} No polygon data loaded.`,
+  noPolygonFound = `${engine_root_window_.errorPrefix} No polygon found, you need to specify SVG url in config.`;
 class PolygonMaskInstance {
   constructor(container, engine) {
+    this._checkInsidePolygon = position => {
+      const container = this._container,
+        options = container.actualOptions.polygon;
+      if (!options?.enable || options.type === "none" || options.type === "inline") {
+        return true;
+      }
+      if (!this.raw) {
+        throw new Error(noPolygonFound);
+      }
+      const canvasSize = container.canvas.size,
+        x = position?.x ?? (0,engine_root_window_.getRandom)() * canvasSize.width,
+        y = position?.y ?? (0,engine_root_window_.getRandom)() * canvasSize.height;
+      let inside = false;
+      for (let i = 0, j = this.raw.length - 1; i < this.raw.length; j = i++) {
+        const pi = this.raw[i],
+          pj = this.raw[j],
+          intersect = pi.y > y !== pj.y > y && x < (pj.x - pi.x) * (y - pi.y) / (pj.y - pi.y) + pi.x;
+        if (intersect) {
+          inside = !inside;
+        }
+      }
+      return options.type === "inside" ? inside : options.type === "outside" ? !inside : false;
+    };
+    this._createPath2D = () => {
+      const container = this._container,
+        options = container.actualOptions.polygon;
+      if (!options || !this.paths?.length) {
+        return;
+      }
+      for (const path of this.paths) {
+        const pathData = path.element?.getAttribute("d");
+        if (pathData) {
+          const path2d = new Path2D(pathData),
+            matrix = document.createElementNS("http://www.w3.org/2000/svg", "svg").createSVGMatrix(),
+            finalPath = new Path2D(),
+            transform = matrix.scale(this._scale);
+          if (finalPath.addPath) {
+            finalPath.addPath(path2d, transform);
+            path.path2d = finalPath;
+          } else {
+            delete path.path2d;
+          }
+        } else {
+          delete path.path2d;
+        }
+        if (path.path2d || !this.raw) {
+          continue;
+        }
+        path.path2d = new Path2D();
+        path.path2d.moveTo(this.raw[0].x, this.raw[0].y);
+        this.raw.forEach((pos, i) => {
+          if (i > 0) {
+            path.path2d?.lineTo(pos.x, pos.y);
+          }
+        });
+        path.path2d.closePath();
+      }
+    };
+    this._downloadSvgPath = async (svgUrl, force) => {
+      const options = this._container.actualOptions.polygon;
+      if (!options) {
+        return;
+      }
+      const url = svgUrl || options.url,
+        forceDownload = force ?? false;
+      if (!url || this.paths !== undefined && !forceDownload) {
+        return this.raw;
+      }
+      const req = await fetch(url);
+      if (!req.ok) {
+        throw new Error(`${engine_root_window_.errorPrefix} occurred during polygon mask download`);
+      }
+      return this._parseSvgPath(await req.text(), force);
+    };
+    this._drawPoints = () => {
+      if (!this.raw) {
+        return;
+      }
+      for (const item of this.raw) {
+        this._container.particles.addParticle({
+          x: item.x,
+          y: item.y
+        });
+      }
+    };
+    this._getEquidistantPointByIndex = index => {
+      const container = this._container,
+        options = container.actualOptions,
+        polygonMaskOptions = options.polygon;
+      if (!polygonMaskOptions) {
+        return;
+      }
+      if (!this.raw || !this.raw.length || !this.paths?.length) {
+        throw new Error(noPolygonDataLoaded);
+      }
+      let offset = 0,
+        point;
+      const totalLength = this.paths.reduce((tot, path) => tot + path.length, 0),
+        distance = totalLength / options.particles.number.value;
+      for (const path of this.paths) {
+        const pathDistance = distance * index - offset;
+        if (pathDistance <= path.length) {
+          point = path.element.getPointAtLength(pathDistance);
+          break;
+        } else {
+          offset += path.length;
+        }
+      }
+      const scale = this._scale;
+      return {
+        x: (point?.x ?? 0) * scale + (this.offset?.x ?? 0),
+        y: (point?.y ?? 0) * scale + (this.offset?.y ?? 0)
+      };
+    };
+    this._getPointByIndex = index => {
+      if (!this.raw || !this.raw.length) {
+        throw new Error(noPolygonDataLoaded);
+      }
+      const coords = this.raw[index % this.raw.length];
+      return {
+        x: coords.x,
+        y: coords.y
+      };
+    };
+    this._getRandomPoint = () => {
+      if (!this.raw || !this.raw.length) {
+        throw new Error(noPolygonDataLoaded);
+      }
+      const coords = (0,engine_root_window_.itemFromArray)(this.raw);
+      return {
+        x: coords.x,
+        y: coords.y
+      };
+    };
+    this._getRandomPointByLength = () => {
+      const container = this._container,
+        options = container.actualOptions.polygon;
+      if (!options) {
+        return;
+      }
+      if (!this.raw || !this.raw.length || !this.paths?.length) {
+        throw new Error(noPolygonDataLoaded);
+      }
+      const path = (0,engine_root_window_.itemFromArray)(this.paths),
+        distance = Math.floor((0,engine_root_window_.getRandom)() * path.length) + 1,
+        point = path.element.getPointAtLength(distance),
+        scale = this._scale;
+      return {
+        x: point.x * scale + (this.offset?.x || 0),
+        y: point.y * scale + (this.offset?.y || 0)
+      };
+    };
+    this._initRawData = async force => {
+      const options = this._container.actualOptions.polygon;
+      if (!options) {
+        return;
+      }
+      if (options.url) {
+        this.raw = await this._downloadSvgPath(options.url, force);
+      } else if (options.data) {
+        const data = options.data;
+        let svg;
+        if ((0,engine_root_window_.isString)(data)) {
+          svg = data;
+        } else {
+          const getPath = p => `<path d="${p}" />`,
+            path = (0,engine_root_window_.isArray)(data.path) ? data.path.map(getPath).join("") : getPath(data.path);
+          const namespaces = 'xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"';
+          svg = `<svg ${namespaces} width="${data.size.width}" height="${data.size.height}">${path}</svg>`;
+        }
+        this.raw = this._parseSvgPath(svg, force);
+      }
+      this._createPath2D();
+      this._engine.dispatchEvent("polygonMaskLoaded", {
+        container: this._container
+      });
+    };
+    this._parseSvgPath = (xml, force) => {
+      const forceDownload = force ?? false;
+      if (this.paths !== undefined && !forceDownload) {
+        return this.raw;
+      }
+      const container = this._container,
+        options = container.actualOptions.polygon;
+      if (!options) {
+        return;
+      }
+      const parser = new DOMParser(),
+        doc = parser.parseFromString(xml, "image/svg+xml"),
+        svg = doc.getElementsByTagName("svg")[0];
+      let svgPaths = svg.getElementsByTagName("path");
+      if (!svgPaths.length) {
+        svgPaths = doc.getElementsByTagName("path");
+      }
+      this.paths = [];
+      for (let i = 0; i < svgPaths.length; i++) {
+        const path = svgPaths.item(i);
+        if (path) {
+          this.paths.push({
+            element: path,
+            length: path.getTotalLength()
+          });
+        }
+      }
+      const scale = this._scale;
+      this.dimension.width = parseFloat(svg.getAttribute("width") ?? "0") * scale;
+      this.dimension.height = parseFloat(svg.getAttribute("height") ?? "0") * scale;
+      const position = options.position ?? {
+          x: 50,
+          y: 50
+        },
+        canvasSize = container.canvas.size;
+      this.offset = {
+        x: canvasSize.width * position.x / 100 - this.dimension.width / 2,
+        y: canvasSize.height * position.y / 100 - this.dimension.height / 2
+      };
+      return parsePaths(this.paths, scale, this.offset);
+    };
+    this._polygonBounce = (particle, _delta, direction) => {
+      const options = this._container.actualOptions.polygon;
+      if (!this.raw || !options?.enable || direction !== "top") {
+        return false;
+      }
+      if (options.type === "inside" || options.type === "outside") {
+        let closest, dx, dy;
+        const pos = particle.getPosition(),
+          radius = particle.getRadius();
+        for (let i = 0, j = this.raw.length - 1; i < this.raw.length; j = i++) {
+          const pi = this.raw[i],
+            pj = this.raw[j];
+          closest = calcClosestPtOnSegment(pi, pj, pos);
+          const dist = (0,engine_root_window_.getDistances)(pos, closest);
+          [dx, dy] = [dist.dx, dist.dy];
+          if (dist.distance < radius) {
+            segmentBounce(pi, pj, particle.velocity);
+            return true;
+          }
+        }
+        if (closest && dx !== undefined && dy !== undefined && !this._checkInsidePolygon(pos)) {
+          const factor = {
+              x: 1,
+              y: 1
+            },
+            diameter = radius * 2;
+          if (pos.x >= closest.x) {
+            factor.x = -1;
+          }
+          if (pos.y >= closest.y) {
+            factor.y = -1;
+          }
+          particle.position.x = closest.x + diameter * factor.x;
+          particle.position.y = closest.y + diameter * factor.y;
+          particle.velocity.mult(-1);
+          return true;
+        }
+      } else if (options.type === "inline" && particle.initialPosition) {
+        const dist = (0,engine_root_window_.getDistance)(particle.initialPosition, particle.getPosition()),
+          {
+            velocity
+          } = particle;
+        if (dist > this._moveRadius) {
+          velocity.x = velocity.y / 2 - velocity.x;
+          velocity.y = velocity.x / 2 - velocity.y;
+          return true;
+        }
+      }
+      return false;
+    };
+    this._randomPoint = () => {
+      const container = this._container,
+        options = container.actualOptions.polygon;
+      if (!options) {
+        return;
+      }
+      let position;
+      if (options.type === "inline") {
+        switch (options.inline.arrangement) {
+          case "random-point":
+            position = this._getRandomPoint();
+            break;
+          case "random-length":
+            position = this._getRandomPointByLength();
+            break;
+          case "equidistant":
+            position = this._getEquidistantPointByIndex(container.particles.count);
+            break;
+          case "one-per-point":
+          case "per-point":
+          default:
+            position = this._getPointByIndex(container.particles.count);
+        }
+      } else {
+        const canvasSize = container.canvas.size;
+        position = {
+          x: (0,engine_root_window_.getRandom)() * canvasSize.width,
+          y: (0,engine_root_window_.getRandom)() * canvasSize.height
+        };
+      }
+      if (this._checkInsidePolygon(position)) {
+        return position;
+      } else {
+        return this._randomPoint();
+      }
+    };
     this._container = container;
     this._engine = engine;
     this.dimension = {
@@ -1854,15 +2133,14 @@ class PolygonMaskInstance {
   }
   clickPositionValid(position) {
     const options = this._container.actualOptions.polygon;
-    return !!(options === null || options === void 0 ? void 0 : options.enable) && options.type !== "none" && options.type !== "inline" && this.checkInsidePolygon(position);
+    return !!options?.enable && options.type !== "none" && options.type !== "inline" && this._checkInsidePolygon(position);
   }
   draw(context) {
-    var _a;
-    if (!((_a = this.paths) === null || _a === void 0 ? void 0 : _a.length)) {
+    if (!this.paths?.length) {
       return;
     }
     const options = this._container.actualOptions.polygon;
-    if (!(options === null || options === void 0 ? void 0 : options.enable)) {
+    if (!options?.enable) {
       return;
     }
     const polygonDraw = options.draw;
@@ -1892,24 +2170,23 @@ class PolygonMaskInstance {
     this._moveRadius = polygonMaskOptions.move.radius * pxRatio;
     this._scale = polygonMaskOptions.scale * pxRatio;
     if (polygonMaskOptions.enable) {
-      await this.initRawData();
+      await this._initRawData();
     }
   }
   particleBounce(particle, delta, direction) {
-    return this.polygonBounce(particle, delta, direction);
+    return this._polygonBounce(particle, delta, direction);
   }
   particlePosition(position) {
-    var _a, _b;
     const options = this._container.actualOptions.polygon;
-    if (!((options === null || options === void 0 ? void 0 : options.enable) && ((_b = (_a = this.raw) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0)) {
+    if (!(options?.enable && (this.raw?.length ?? 0) > 0)) {
       return;
     }
-    return (0,engine_root_window_.deepExtend)({}, position ? position : this.randomPoint());
+    return (0,engine_root_window_.deepExtend)({}, position ? position : this._randomPoint());
   }
   particlesInitialization() {
     const options = this._container.actualOptions.polygon;
-    if ((options === null || options === void 0 ? void 0 : options.enable) && options.type === "inline" && (options.inline.arrangement === "one-per-point" || options.inline.arrangement === "per-point")) {
-      this.drawPoints();
+    if (options?.enable && options.type === "inline" && (options.inline.arrangement === "one-per-point" || options.inline.arrangement === "per-point")) {
+      this._drawPoints();
       return true;
     }
     return false;
@@ -1917,14 +2194,14 @@ class PolygonMaskInstance {
   resize() {
     const container = this._container,
       options = container.actualOptions.polygon;
-    if (!((options === null || options === void 0 ? void 0 : options.enable) && options.type !== "none")) {
+    if (!(options?.enable && options.type !== "none")) {
       return;
     }
     if (this.redrawTimeout) {
       clearTimeout(this.redrawTimeout);
     }
     this.redrawTimeout = window.setTimeout(async () => {
-      await this.initRawData(true);
+      await this._initRawData(true);
       await container.particles.redraw();
     }, 250);
   }
@@ -1932,307 +2209,6 @@ class PolygonMaskInstance {
     delete this.raw;
     delete this.paths;
   }
-  checkInsidePolygon(position) {
-    var _a, _b;
-    const container = this._container,
-      options = container.actualOptions.polygon;
-    if (!(options === null || options === void 0 ? void 0 : options.enable) || options.type === "none" || options.type === "inline") {
-      return true;
-    }
-    if (!this.raw) {
-      throw new Error(noPolygonFound);
-    }
-    const canvasSize = container.canvas.size,
-      x = (_a = position === null || position === void 0 ? void 0 : position.x) !== null && _a !== void 0 ? _a : (0,engine_root_window_.getRandom)() * canvasSize.width,
-      y = (_b = position === null || position === void 0 ? void 0 : position.y) !== null && _b !== void 0 ? _b : (0,engine_root_window_.getRandom)() * canvasSize.height;
-    let inside = false;
-    for (let i = 0, j = this.raw.length - 1; i < this.raw.length; j = i++) {
-      const pi = this.raw[i],
-        pj = this.raw[j],
-        intersect = pi.y > y !== pj.y > y && x < (pj.x - pi.x) * (y - pi.y) / (pj.y - pi.y) + pi.x;
-      if (intersect) {
-        inside = !inside;
-      }
-    }
-    return options.type === "inside" ? inside : options.type === "outside" ? !inside : false;
-  }
-  createPath2D() {
-    var _a, _b;
-    const container = this._container,
-      options = container.actualOptions.polygon;
-    if (!options || !((_a = this.paths) === null || _a === void 0 ? void 0 : _a.length)) {
-      return;
-    }
-    for (const path of this.paths) {
-      const pathData = (_b = path.element) === null || _b === void 0 ? void 0 : _b.getAttribute("d");
-      if (pathData) {
-        const path2d = new Path2D(pathData),
-          matrix = document.createElementNS("http://www.w3.org/2000/svg", "svg").createSVGMatrix(),
-          finalPath = new Path2D(),
-          transform = matrix.scale(this._scale);
-        if (finalPath.addPath) {
-          finalPath.addPath(path2d, transform);
-          path.path2d = finalPath;
-        } else {
-          delete path.path2d;
-        }
-      } else {
-        delete path.path2d;
-      }
-      if (path.path2d || !this.raw) {
-        continue;
-      }
-      path.path2d = new Path2D();
-      path.path2d.moveTo(this.raw[0].x, this.raw[0].y);
-      this.raw.forEach((pos, i) => {
-        var _a;
-        if (i > 0) {
-          (_a = path.path2d) === null || _a === void 0 ? void 0 : _a.lineTo(pos.x, pos.y);
-        }
-      });
-      path.path2d.closePath();
-    }
-  }
-  async downloadSvgPath(svgUrl, force) {
-    const options = this._container.actualOptions.polygon;
-    if (!options) {
-      return;
-    }
-    const url = svgUrl || options.url,
-      forceDownload = force !== null && force !== void 0 ? force : false;
-    if (!url || this.paths !== undefined && !forceDownload) {
-      return this.raw;
-    }
-    const req = await fetch(url);
-    if (!req.ok) {
-      throw new Error("tsParticles Error - Error occurred during polygon mask download");
-    }
-    return this.parseSvgPath(await req.text(), force);
-  }
-  drawPoints() {
-    if (!this.raw) {
-      return;
-    }
-    for (const item of this.raw) {
-      this._container.particles.addParticle({
-        x: item.x,
-        y: item.y
-      });
-    }
-  }
-  getEquidistantPointByIndex(index) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    const container = this._container,
-      options = container.actualOptions,
-      polygonMaskOptions = options.polygon;
-    if (!polygonMaskOptions) {
-      return;
-    }
-    if (!this.raw || !this.raw.length || !((_a = this.paths) === null || _a === void 0 ? void 0 : _a.length)) throw new Error(noPolygonDataLoaded);
-    let offset = 0,
-      point;
-    const totalLength = this.paths.reduce((tot, path) => tot + path.length, 0),
-      distance = totalLength / options.particles.number.value;
-    for (const path of this.paths) {
-      const pathDistance = distance * index - offset;
-      if (pathDistance <= path.length) {
-        point = path.element.getPointAtLength(pathDistance);
-        break;
-      } else {
-        offset += path.length;
-      }
-    }
-    const scale = this._scale;
-    return {
-      x: ((_b = point === null || point === void 0 ? void 0 : point.x) !== null && _b !== void 0 ? _b : 0) * scale + ((_d = (_c = this.offset) === null || _c === void 0 ? void 0 : _c.x) !== null && _d !== void 0 ? _d : 0),
-      y: ((_e = point === null || point === void 0 ? void 0 : point.y) !== null && _e !== void 0 ? _e : 0) * scale + ((_g = (_f = this.offset) === null || _f === void 0 ? void 0 : _f.y) !== null && _g !== void 0 ? _g : 0)
-    };
-  }
-  getPointByIndex(index) {
-    if (!this.raw || !this.raw.length) {
-      throw new Error(noPolygonDataLoaded);
-    }
-    const coords = this.raw[index % this.raw.length];
-    return {
-      x: coords.x,
-      y: coords.y
-    };
-  }
-  getRandomPoint() {
-    if (!this.raw || !this.raw.length) {
-      throw new Error(noPolygonDataLoaded);
-    }
-    const coords = (0,engine_root_window_.itemFromArray)(this.raw);
-    return {
-      x: coords.x,
-      y: coords.y
-    };
-  }
-  getRandomPointByLength() {
-    var _a, _b, _c;
-    const container = this._container,
-      options = container.actualOptions.polygon;
-    if (!options) {
-      return;
-    }
-    if (!this.raw || !this.raw.length || !((_a = this.paths) === null || _a === void 0 ? void 0 : _a.length)) {
-      throw new Error(noPolygonDataLoaded);
-    }
-    const path = (0,engine_root_window_.itemFromArray)(this.paths),
-      distance = Math.floor((0,engine_root_window_.getRandom)() * path.length) + 1,
-      point = path.element.getPointAtLength(distance),
-      scale = this._scale;
-    return {
-      x: point.x * scale + (((_b = this.offset) === null || _b === void 0 ? void 0 : _b.x) || 0),
-      y: point.y * scale + (((_c = this.offset) === null || _c === void 0 ? void 0 : _c.y) || 0)
-    };
-  }
-  async initRawData(force) {
-    const options = this._container.actualOptions.polygon;
-    if (!options) {
-      return;
-    }
-    if (options.url) {
-      this.raw = await this.downloadSvgPath(options.url, force);
-    } else if (options.data) {
-      const data = options.data;
-      let svg;
-      if (typeof data !== "string") {
-        const path = data.path instanceof Array ? data.path.map(t => `<path d="${t}" />`).join("") : `<path d="${data.path}" />`;
-        const namespaces = 'xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"';
-        svg = `<svg ${namespaces} width="${data.size.width}" height="${data.size.height}">${path}</svg>`;
-      } else {
-        svg = data;
-      }
-      this.raw = this.parseSvgPath(svg, force);
-    }
-    this.createPath2D();
-    this._engine.dispatchEvent("polygonMaskLoaded", {
-      container: this._container
-    });
-  }
-  parseSvgPath(xml, force) {
-    var _a, _b, _c;
-    const forceDownload = force !== null && force !== void 0 ? force : false;
-    if (this.paths !== undefined && !forceDownload) {
-      return this.raw;
-    }
-    const container = this._container,
-      options = container.actualOptions.polygon;
-    if (!options) {
-      return;
-    }
-    const parser = new DOMParser(),
-      doc = parser.parseFromString(xml, "image/svg+xml"),
-      svg = doc.getElementsByTagName("svg")[0];
-    let svgPaths = svg.getElementsByTagName("path");
-    if (!svgPaths.length) {
-      svgPaths = doc.getElementsByTagName("path");
-    }
-    this.paths = [];
-    for (let i = 0; i < svgPaths.length; i++) {
-      const path = svgPaths.item(i);
-      if (path) {
-        this.paths.push({
-          element: path,
-          length: path.getTotalLength()
-        });
-      }
-    }
-    const scale = this._scale;
-    this.dimension.width = parseFloat((_a = svg.getAttribute("width")) !== null && _a !== void 0 ? _a : "0") * scale;
-    this.dimension.height = parseFloat((_b = svg.getAttribute("height")) !== null && _b !== void 0 ? _b : "0") * scale;
-    const position = (_c = options.position) !== null && _c !== void 0 ? _c : {
-      x: 50,
-      y: 50
-    };
-    this.offset = {
-      x: container.canvas.size.width * position.x / 100 - this.dimension.width / 2,
-      y: container.canvas.size.height * position.y / 100 - this.dimension.height / 2
-    };
-    return parsePaths(this.paths, scale, this.offset);
-  }
-  polygonBounce(particle, _delta, direction) {
-    const options = this._container.actualOptions.polygon;
-    if (!this.raw || !(options === null || options === void 0 ? void 0 : options.enable) || direction !== "top") {
-      return false;
-    }
-    if (options.type === "inside" || options.type === "outside") {
-      let closest, dx, dy;
-      const pos = particle.getPosition(),
-        radius = particle.getRadius();
-      for (let i = 0, j = this.raw.length - 1; i < this.raw.length; j = i++) {
-        const pi = this.raw[i],
-          pj = this.raw[j];
-        closest = calcClosestPtOnSegment(pi, pj, pos);
-        const dist = (0,engine_root_window_.getDistances)(pos, closest);
-        [dx, dy] = [dist.dx, dist.dy];
-        if (dist.distance < radius) {
-          segmentBounce(pi, pj, particle.velocity);
-          return true;
-        }
-      }
-      if (closest && dx !== undefined && dy !== undefined && !this.checkInsidePolygon(pos)) {
-        const factor = {
-          x: 1,
-          y: 1
-        };
-        if (particle.position.x >= closest.x) {
-          factor.x = -1;
-        }
-        if (particle.position.y >= closest.y) {
-          factor.y = -1;
-        }
-        particle.position.x = closest.x + radius * 2 * factor.x;
-        particle.position.y = closest.y + radius * 2 * factor.y;
-        particle.velocity.mult(-1);
-        return true;
-      }
-    } else if (options.type === "inline" && particle.initialPosition) {
-      const dist = (0,engine_root_window_.getDistance)(particle.initialPosition, particle.getPosition());
-      if (dist > this._moveRadius) {
-        particle.velocity.x = particle.velocity.y / 2 - particle.velocity.x;
-        particle.velocity.y = particle.velocity.x / 2 - particle.velocity.y;
-        return true;
-      }
-    }
-    return false;
-  }
-  randomPoint() {
-    const container = this._container,
-      options = container.actualOptions.polygon;
-    if (!options) {
-      return;
-    }
-    let position;
-    if (options.type === "inline") {
-      switch (options.inline.arrangement) {
-        case "random-point":
-          position = this.getRandomPoint();
-          break;
-        case "random-length":
-          position = this.getRandomPointByLength();
-          break;
-        case "equidistant":
-          position = this.getEquidistantPointByIndex(container.particles.count);
-          break;
-        case "one-per-point":
-        case "per-point":
-        default:
-          position = this.getPointByIndex(container.particles.count);
-      }
-    } else {
-      position = {
-        x: (0,engine_root_window_.getRandom)() * container.canvas.size.width,
-        y: (0,engine_root_window_.getRandom)() * container.canvas.size.height
-      };
-    }
-    if (this.checkInsidePolygon(position)) {
-      return position;
-    } else {
-      return this.randomPoint();
-    }
-  }
 }
 ;// CONCATENATED MODULE: ./dist/browser/index.js
 
@@ -2247,23 +2223,21 @@ class PolygonMaskPlugin {
     return new PolygonMaskInstance(container, this._engine);
   }
   loadOptions(options, source) {
-    if (!this.needsPlugin(source)) {
+    if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
       return;
     }
     let polygonOptions = options.polygon;
-    if ((polygonOptions === null || polygonOptions === void 0 ? void 0 : polygonOptions.load) === undefined) {
+    if (polygonOptions?.load === undefined) {
       options.polygon = polygonOptions = new PolygonMask();
     }
-    polygonOptions.load(source === null || source === void 0 ? void 0 : source.polygon);
+    polygonOptions.load(source?.polygon);
   }
   needsPlugin(options) {
-    var _a, _b, _c;
-    return (_b = (_a = options === null || options === void 0 ? void 0 : options.polygon) === null || _a === void 0 ? void 0 : _a.enable) !== null && _b !== void 0 ? _b : ((_c = options === null || options === void 0 ? void 0 : options.polygon) === null || _c === void 0 ? void 0 : _c.type) !== undefined && options.polygon.type !== "none";
+    return options?.polygon?.enable ?? (options?.polygon?.type !== undefined && options.polygon.type !== "none");
   }
 }
-async function loadPolygonMaskPlugin(engine) {
-  const plugin = new PolygonMaskPlugin(engine);
-  await engine.addPlugin(plugin);
+async function loadPolygonMaskPlugin(engine, refresh = true) {
+  await engine.addPlugin(new PolygonMaskPlugin(engine), refresh);
 }