@tsparticles/plugin-polygon-mask 3.3.0 → 3.5.0

package/esm/Options/Classes/PolygonMask.js

@@ -3,6 +3,7 @@ import { PolygonMaskDraw } from "./PolygonMaskDraw.js";
 import { PolygonMaskInline } from "./PolygonMaskInline.js";
 import { PolygonMaskLocalSvg } from "./PolygonMaskLocalSvg.js";
 import { PolygonMaskMove } from "./PolygonMaskMove.js";
+import { PolygonMaskType } from "../../Enums/PolygonMaskType.js";
 export class PolygonMask {
     constructor() {
         this.draw = new PolygonMaskDraw();
@@ -10,7 +11,7 @@ export class PolygonMask {
         this.inline = new PolygonMaskInline();
         this.move = new PolygonMaskMove();
         this.scale = 1;
-        this.type = "none";
+        this.type = PolygonMaskType.none;
     }
     load(data) {
         if (!data) {
@@ -29,7 +30,7 @@ export class PolygonMask {
             this.enable = data.enable;
         }
         else {
-            this.enable = this.type !== "none";
+            this.enable = this.type !== PolygonMaskType.none;
         }
         if (data.url !== undefined) {
             this.url = data.url;

package/esm/Options/Classes/PolygonMaskInline.js

@@ -1,6 +1,7 @@
+import { PolygonMaskInlineArrangement, } from "../../Enums/PolygonMaskInlineArrangement.js";
 export class PolygonMaskInline {
     constructor() {
-        this.arrangement = "one-per-point";
+        this.arrangement = PolygonMaskInlineArrangement.onePerPoint;
     }
     load(data) {
         if (!data) {

package/esm/Options/Classes/PolygonMaskMove.js

@@ -1,7 +1,8 @@
+import { PolygonMaskMoveType } from "../../Enums/PolygonMaskMoveType.js";
 export class PolygonMaskMove {
     constructor() {
         this.radius = 10;
-        this.type = "path";
+        this.type = PolygonMaskMoveType.path;
     }
     load(data) {
         if (!data) {

package/esm/PolygonMaskInstance.js

@@ -1,14 +1,16 @@
-import { deepExtend, errorPrefix, getDistance, getDistances, getRandom, isArray, isString, itemFromArray, percentDenominator, } from "@tsparticles/engine";
-import { calcClosestPointOnSegment, drawPolygonMask, drawPolygonMaskPath, segmentBounce } from "./utils.js";
+import { OutModeDirection, deepExtend, errorPrefix, getDistance, getDistances, getRandom, isArray, isString, itemFromArray, percentDenominator, } from "@tsparticles/engine";
+import { calcClosestPointOnSegment, drawPolygonMask, drawPolygonMaskPath, parsePaths, segmentBounce } from "./utils.js";
+import { PolygonMaskInlineArrangement } from "./Enums/PolygonMaskInlineArrangement.js";
+import { PolygonMaskType } from "./Enums/PolygonMaskType.js";
 const noPolygonDataLoaded = `${errorPrefix} No polygon data loaded.`, noPolygonFound = `${errorPrefix} No polygon found, you need to specify SVG url in config.`, origin = {
     x: 0,
     y: 0,
 }, half = 0.5, double = 2;
 export class PolygonMaskInstance {
     constructor(container, engine) {
-        this._checkInsidePolygon = (position) => {
+        this._checkInsidePolygon = position => {
             const container = this._container, options = container.actualOptions.polygon;
-            if (!options?.enable || options.type === "none" || options.type === "inline") {
+            if (!options?.enable || options.type === PolygonMaskType.none || options.type === PolygonMaskType.inline) {
                 return true;
             }
             if (!this.raw) {
@@ -22,11 +24,11 @@ export class PolygonMaskInstance {
                     inside = !inside;
                 }
             }
-            if (options.type === "inside") {
+            if (options.type === PolygonMaskType.inside) {
                 return inside;
             }
             else {
-                return options.type === "outside" ? !inside : false;
+                return options.type === PolygonMaskType.outside ? !inside : false;
             }
         };
         this._createPath2D = () => {
@@ -76,7 +78,7 @@ export class PolygonMaskInstance {
             if (!req.ok) {
                 throw new Error(`${errorPrefix} occurred during polygon mask download`);
             }
-            return await this._parseSvgPath(await req.text(), force);
+            return this._parseSvgPath(await req.text(), force);
         };
         this._drawPoints = () => {
             if (!this.raw) {
@@ -89,7 +91,7 @@ export class PolygonMaskInstance {
                 });
             }
         };
-        this._getEquidistantPointByIndex = (index) => {
+        this._getEquidistantPointByIndex = index => {
             const container = this._container, options = container.actualOptions, polygonMaskOptions = options.polygon;
             if (!polygonMaskOptions) {
                 return;
@@ -115,7 +117,7 @@ export class PolygonMaskInstance {
                 y: (point?.y ?? origin.y) * scale + (this.offset?.y ?? origin.y),
             };
         };
-        this._getPointByIndex = (index) => {
+        this._getPointByIndex = index => {
             if (!this.raw?.length) {
                 throw new Error(noPolygonDataLoaded);
             }
@@ -168,14 +170,14 @@ export class PolygonMaskInstance {
                     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 = await this._parseSvgPath(svg, force);
+                this.raw = this._parseSvgPath(svg, force);
             }
             this._createPath2D();
             this._engine.dispatchEvent("polygonMaskLoaded", {
                 container: this._container,
             });
         };
-        this._parseSvgPath = async (xml, force) => {
+        this._parseSvgPath = (xml, force) => {
             const forceDownload = force ?? false;
             if (this.paths !== undefined && !forceDownload) {
                 return this.raw;
@@ -210,15 +212,14 @@ export class PolygonMaskInstance {
                 x: (canvasSize.width * position.x) / percentDenominator - this.dimension.width * half,
                 y: (canvasSize.height * position.y) / percentDenominator - this.dimension.height * half,
             };
-            const { parsePaths } = await import("./utils.js");
             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") {
+            if (!this.raw || !options?.enable || direction !== OutModeDirection.top) {
                 return false;
             }
-            if (options.type === "inside" || options.type === "outside") {
+            if (options.type === PolygonMaskType.inside || options.type === PolygonMaskType.outside) {
                 let closest, dx, dy;
                 const pos = particle.getPosition(), radius = particle.getRadius(), offset = 1;
                 for (let i = 0, j = this.raw.length - offset; i < this.raw.length; j = i++) {
@@ -245,7 +246,7 @@ export class PolygonMaskInstance {
                     return true;
                 }
             }
-            else if (options.type === "inline" && particle.initialPosition) {
+            else if (options.type === PolygonMaskType.inline && particle.initialPosition) {
                 const dist = getDistance(particle.initialPosition, particle.getPosition()), { velocity } = particle;
                 if (dist > this._moveRadius) {
                     velocity.x = velocity.y * half - velocity.x;
@@ -261,19 +262,19 @@ export class PolygonMaskInstance {
                 return;
             }
             let position;
-            if (options.type === "inline") {
+            if (options.type === PolygonMaskType.inline) {
                 switch (options.inline.arrangement) {
-                    case "random-point":
+                    case PolygonMaskInlineArrangement.randomPoint:
                         position = this._getRandomPoint();
                         break;
-                    case "random-length":
+                    case PolygonMaskInlineArrangement.randomLength:
                         position = this._getRandomPointByLength();
                         break;
-                    case "equidistant":
+                    case PolygonMaskInlineArrangement.equidistant:
                         position = this._getEquidistantPointByIndex(container.particles.count);
                         break;
-                    case "one-per-point":
-                    case "per-point":
+                    case PolygonMaskInlineArrangement.onePerPoint:
+                    case PolygonMaskInlineArrangement.perPoint:
                     default:
                         position = this._getPointByIndex(container.particles.count);
                 }
@@ -304,8 +305,8 @@ export class PolygonMaskInstance {
     clickPositionValid(position) {
         const options = this._container.actualOptions.polygon;
         return (!!options?.enable &&
-            options.type !== "none" &&
-            options.type !== "inline" &&
+            options.type !== PolygonMaskType.none &&
+            options.type !== PolygonMaskType.inline &&
             this._checkInsidePolygon(position));
     }
     draw(context) {
@@ -358,9 +359,9 @@ export class PolygonMaskInstance {
     particlesInitialization() {
         const options = this._container.actualOptions.polygon;
         if (options?.enable &&
-            options.type === "inline" &&
-            (options.inline.arrangement === "one-per-point" ||
-                options.inline.arrangement === "per-point")) {
+            options.type === PolygonMaskType.inline &&
+            (options.inline.arrangement === PolygonMaskInlineArrangement.onePerPoint ||
+                options.inline.arrangement === PolygonMaskInlineArrangement.perPoint)) {
             this._drawPoints();
             return true;
         }
@@ -368,7 +369,7 @@ export class PolygonMaskInstance {
     }
     resize() {
         const container = this._container, options = container.actualOptions.polygon;
-        if (!(options?.enable && options.type !== "none")) {
+        if (!(options?.enable && options.type !== PolygonMaskType.none)) {
             return;
         }
         if (this.redrawTimeout) {

package/esm/PolygonMaskPlugin.js

@@ -1,12 +1,13 @@
 import { PolygonMask } from "./Options/Classes/PolygonMask.js";
+import { PolygonMaskInstance } from "./PolygonMaskInstance.js";
+import { PolygonMaskType } from "./Enums/PolygonMaskType.js";
 export class PolygonMaskPlugin {
     constructor(engine) {
         this.id = "polygonMask";
         this._engine = engine;
     }
-    async getPlugin(container) {
-        const { PolygonMaskInstance } = await import("./PolygonMaskInstance.js");
-        return new PolygonMaskInstance(container, this._engine);
+    getPlugin(container) {
+        return Promise.resolve(new PolygonMaskInstance(container, this._engine));
     }
     loadOptions(options, source) {
         if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
@@ -20,6 +21,6 @@ export class PolygonMaskPlugin {
     }
     needsPlugin(options) {
         return (options?.polygon?.enable ??
-            (options?.polygon?.type !== undefined && options.polygon.type !== "none"));
+            (options?.polygon?.type !== undefined && options.polygon.type !== PolygonMaskType.none));
     }
 }

package/esm/index.js

@@ -1,6 +1,6 @@
 import "./pathseg.js";
+import { PolygonMaskPlugin } from "./PolygonMaskPlugin.js";
 export async function loadPolygonMaskPlugin(engine, refresh = true) {
-    const { PolygonMaskPlugin } = await import("./PolygonMaskPlugin.js");
     await engine.addPlugin(new PolygonMaskPlugin(engine), refresh);
 }
 export * from "./Enums/PolygonMaskInlineArrangement.js";

package/package.json

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

package/report.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
-    <title>@tsparticles/plugin-polygon-mask [27 Feb 2024 at 12:19]</title>
+    <title>@tsparticles/plugin-polygon-mask [1 Jul 2024 at 09:21]</title>
     <link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABrVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+O1foceMD///+J0/qK1Pr7/v8Xdr/9///W8P4UdL7L7P0Scr2r4Pyj3vwad8D5/f/2/f+55f3E6f34+/2H0/ojfMKpzOd0rNgQcb3F3O/j9f7c8v6g3Pz0/P/w+v/q+P7n9v6T1/uQ1vuE0vqLut/y+v+Z2fvt+f+15Pzv9fuc2/vR7v2V2Pvd6/bg9P7I6/285/2y4/yp3/zp8vk8i8kqgMT7/P31+fyv4vxGkcz6/P6/6P3j7vfS5PNnpNUxhcbO7f7F6v3O4vHK3/DA2u631Ouy0eqXweKJud5wqthfoNMMbLvY8f73+v2dxeR8sNtTmdDx9/zX6PSjyeaCtd1YnNGX2PuQveCGt95Nls42h8dLlM3F4vBtAAAAM3RSTlMAAyOx0/sKBvik8opWGBMOAe3l1snDm2E9LSb06eHcu5JpHbarfHZCN9CBb08zzkdNS0kYaptYAAAFV0lEQVRYw92X51/aYBDHHS2O2qqttVbrqNq9m+TJIAYIShBkWwqIiCgoWvfeq7Z2/s29hyQNyUcR7LveGwVyXy6XH8/9rqxglLfUPLxVduUor3h0rfp2TYvpivk37929TkG037hffoX0+peVtZQc1589rigVUdXS/ABSAyEmGIO/1XfvldSK8vs3OqB6u3m0nxmIrvgB0dj7rr7Y9IbuF68hnfFaiHA/sxqm0wciIG43P60qKv9WXWc1RXGh/mFESFABTSBi0sNAKzqet17eCtOb3kZIDwxEEU0oAIJGYxNBDhBND29e0rtXXbcpuPmED9IhEAAQ/AXEaF8EPmnrrKsv0LvWR3fg5sWDNAFZOgAgaKvZDogHNU9MFwnnYROkc56RD5CjAbQX9Ow4g7upCsvYu55aSI/Nj0H1akgKQEUM94dwK65hYRmFU9MIcH/fqJYOZYcnuJSU/waKDgTOEVaVKhwrTRP5XzgSpAITYzom7UvkhFX5VutmxeNnWDjjswTKTyfgluNDGbUpWissXhF3s7mlSml+czWkg3D0l1nNjGNjz3myOQOa1KM/jOS6ebdbAVTCi4gljHSFrviza7tOgRWcS0MOUX9zdNgag5w7rRqA44Lzw0hr1WqES36dFliSJFlh2rXIae3FFcDDgKdxrUIDePr8jGcSClV1u7A9xeN0ModY/pHMxmR1EzRh8TJiwqsHmKW0l4FCEZI+jHio+JdPPE9qwQtTRxku2D8sIeRL2LnxWSllANCQGOIiqVHAz2ye2JR0DcH+HoxDkaADLjgxjKQ+AwCX/g0+DNgdG0ukYCONAe+dbc2IAc6fwt1ARoDSezNHxV2Cmzwv3O6lDMV55edBGwGK9n1+x2F8EDfAGCxug8MhpsMEcTEAWf3rx2vZhe/LAmtIn/6apE6PN0ULKgywD9mmdxbmFl3OvD5AS5fW5zLbv/YHmcsBTjf/afDz3MaZTVCfAP9z6/Bw6ycv8EUBWJIn9zYcoAWWlW9+OzO3vkTy8H+RANLmdrpOuYWdZYEXpo+TlCJrW5EARb7fF+bWdqf3hhyZI1nWJQHgznErZhbjoEsWqi8dQNoE294aldzFurwSABL2XXMf9+H1VQGke9exw5P/AnA5Pv5ngMul7LOvO922iwACu8WkCwLCafvM4CeWPxfA8lNHcWZSoi8EwMAIciKX2Z4SWCMAa3snCZ/G4EA8D6CMLNFsGQhkkz/gQNEBbPCbWsxGUpYVu3z8IyNAknwJkfPMEhLyrdi5RTyUVACkw4GSFRNWJNEW+fgPGwHD8/JxnRuLabN4CGNRkAE23na2+VmEAUmrYymSGjMAYqH84YUIyzgzs3XC7gNgH36Vcc4zKY9o9fgPBXUAiHHwVboBHGLiX6Zcjp1f2wu4tvzZKo0ecPnDtQYDQvJXaBeNzce45Fp28ZQLrEZVuFqgBwOalArKXnW1UzlnSusQKJqKYNuz4tOnI6sZG4zanpemv+7ySU2jbA9h6uhcgpfy6G2PahirDZ6zvq6zDduMVFTKvzw8wgyEdelwY9in3XkEPs3osJuwRQ4qTkfzifndg9Gfc4pdsu82+tTnHZTBa2EAMrqr2t43pguc8tNm7JQVQ2S0ukj2d22dhXYP0/veWtwKrCkNoNimAN5+Xr/oLrxswKbVJjteWrX7eR63o4j9q0GxnaBdWgGA5VStpanIjQmEhV0/nVt5VOFUvix6awJhPcAaTEShgrG+iGyvb5a0Ndb1YGHFPEwoqAinoaykaID1o1pdPNu7XsnCKQ3R+hwWIIhGvORcJUBYXe3Xa3vq/mF/N9V13ugufMkfXn+KHsRD0B8AAAAASUVORK5CYII=" type="image/x-icon" />
 
     <script>