@tsparticles/plugin-polygon-mask 3.0.3 → 3.2.0

package/cjs/PolygonMaskInstance.js

@@ -1,9 +1,34 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PolygonMaskInstance = void 0;
 const engine_1 = require("@tsparticles/engine");
-const utils_js_1 = require("./utils.js");
-const noPolygonDataLoaded = `${engine_1.errorPrefix} No polygon data loaded.`, noPolygonFound = `${engine_1.errorPrefix} No polygon found, you need to specify SVG url in config.`;
+const noPolygonDataLoaded = `${engine_1.errorPrefix} No polygon data loaded.`, noPolygonFound = `${engine_1.errorPrefix} No polygon found, you need to specify SVG url in config.`, origin = {
+    x: 0,
+    y: 0,
+}, half = 0.5, double = 2;
 class PolygonMaskInstance {
     constructor(container, engine) {
         this._checkInsidePolygon = (position) => {
@@ -14,19 +39,20 @@ class PolygonMaskInstance {
             if (!this.raw) {
                 throw new Error(noPolygonFound);
             }
-            const canvasSize = container.canvas.size, x = position?.x ?? (0, engine_1.getRandom)() * canvasSize.width, y = position?.y ?? (0, engine_1.getRandom)() * canvasSize.height;
+            const canvasSize = container.canvas.size, x = position?.x ?? (0, engine_1.getRandom)() * canvasSize.width, y = position?.y ?? (0, engine_1.getRandom)() * canvasSize.height, indexOffset = 1;
             let inside = false;
-            for (let i = 0, j = this.raw.length - 1; i < this.raw.length; j = i++) {
+            for (let i = 0, j = this.raw.length - indexOffset; 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;
+            if (options.type === "inside") {
+                return inside;
+            }
+            else {
+                return options.type === "outside" ? !inside : false;
+            }
         };
         this._createPath2D = () => {
             const container = this._container, options = container.actualOptions.polygon;
@@ -48,13 +74,14 @@ class PolygonMaskInstance {
                 else {
                     delete path.path2d;
                 }
-                if (path.path2d || !this.raw) {
+                if (path.path2d ?? !this.raw) {
                     continue;
                 }
                 path.path2d = new Path2D();
-                path.path2d.moveTo(this.raw[0].x, this.raw[0].y);
+                const firstIndex = 0, firstPoint = this.raw[firstIndex];
+                path.path2d.moveTo(firstPoint.x, firstPoint.y);
                 this.raw.forEach((pos, i) => {
-                    if (i > 0) {
+                    if (i > firstIndex) {
                         path.path2d?.lineTo(pos.x, pos.y);
                     }
                 });
@@ -66,7 +93,7 @@ class PolygonMaskInstance {
             if (!options) {
                 return;
             }
-            const url = svgUrl || options.url, forceDownload = force ?? false;
+            const url = svgUrl ?? options.url, forceDownload = force ?? false;
             if (!url || (this.paths !== undefined && !forceDownload)) {
                 return this.raw;
             }
@@ -74,14 +101,14 @@ class PolygonMaskInstance {
             if (!req.ok) {
                 throw new Error(`${engine_1.errorPrefix} occurred during polygon mask download`);
             }
-            return this._parseSvgPath(await req.text(), force);
+            return await this._parseSvgPath(await req.text(), force);
         };
         this._drawPoints = () => {
             if (!this.raw) {
                 return;
             }
             for (const item of this.raw) {
-                this._container.particles.addParticle({
+                void this._container.particles.addParticle({
                     x: item.x,
                     y: item.y,
                 });
@@ -92,11 +119,11 @@ class PolygonMaskInstance {
             if (!polygonMaskOptions) {
                 return;
             }
-            if (!this.raw || !this.raw.length || !this.paths?.length) {
+            if (!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;
+            const baseAccumulator = 0, totalLength = this.paths.reduce((tot, path) => tot + path.length, baseAccumulator), distance = totalLength / options.particles.number.value;
             for (const path of this.paths) {
                 const pathDistance = distance * index - offset;
                 if (pathDistance <= path.length) {
@@ -109,12 +136,12 @@ class PolygonMaskInstance {
             }
             const scale = this._scale;
             return {
-                x: (point?.x ?? 0) * scale + (this.offset?.x ?? 0),
-                y: (point?.y ?? 0) * scale + (this.offset?.y ?? 0),
+                x: (point?.x ?? origin.x) * scale + (this.offset?.x ?? origin.x),
+                y: (point?.y ?? origin.y) * scale + (this.offset?.y ?? origin.y),
             };
         };
         this._getPointByIndex = (index) => {
-            if (!this.raw || !this.raw.length) {
+            if (!this.raw?.length) {
                 throw new Error(noPolygonDataLoaded);
             }
             const coords = this.raw[index % this.raw.length];
@@ -124,7 +151,7 @@ class PolygonMaskInstance {
             };
         };
         this._getRandomPoint = () => {
-            if (!this.raw || !this.raw.length) {
+            if (!this.raw?.length) {
                 throw new Error(noPolygonDataLoaded);
             }
             const coords = (0, engine_1.itemFromArray)(this.raw);
@@ -138,13 +165,13 @@ class PolygonMaskInstance {
             if (!options) {
                 return;
             }
-            if (!this.raw || !this.raw.length || !this.paths?.length) {
+            if (!this.raw?.length || !this.paths?.length) {
                 throw new Error(noPolygonDataLoaded);
             }
-            const path = (0, engine_1.itemFromArray)(this.paths), distance = Math.floor((0, engine_1.getRandom)() * path.length) + 1, point = path.element.getPointAtLength(distance), scale = this._scale;
+            const path = (0, engine_1.itemFromArray)(this.paths), offset = 1, distance = Math.floor((0, engine_1.getRandom)() * path.length) + offset, 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),
+                x: point.x * scale + (this.offset?.x ?? origin.x),
+                y: point.y * scale + (this.offset?.y ?? origin.y),
             };
         };
         this._initRawData = async (force) => {
@@ -166,14 +193,14 @@ 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 = this._parseSvgPath(svg, force);
+                this.raw = await this._parseSvgPath(svg, force);
             }
             this._createPath2D();
             this._engine.dispatchEvent("polygonMaskLoaded", {
                 container: this._container,
             });
         };
-        this._parseSvgPath = (xml, force) => {
+        this._parseSvgPath = async (xml, force) => {
             const forceDownload = force ?? false;
             if (this.paths !== undefined && !forceDownload) {
                 return this.raw;
@@ -182,7 +209,7 @@ class PolygonMaskInstance {
             if (!options) {
                 return;
             }
-            const parser = new DOMParser(), doc = parser.parseFromString(xml, "image/svg+xml"), svg = doc.getElementsByTagName("svg")[0];
+            const parser = new DOMParser(), doc = parser.parseFromString(xml, "image/svg+xml"), firstIndex = 0, svg = doc.getElementsByTagName("svg")[firstIndex];
             let svgPaths = svg.getElementsByTagName("path");
             if (!svgPaths.length) {
                 svgPaths = doc.getElementsByTagName("path");
@@ -205,31 +232,33 @@ class PolygonMaskInstance {
                 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,
+                x: (canvasSize.width * position.x) / engine_1.percentDenominator - this.dimension.width * half,
+                y: (canvasSize.height * position.y) / engine_1.percentDenominator - this.dimension.height * half,
             };
-            return (0, utils_js_1.parsePaths)(this.paths, scale, this.offset);
+            const { parsePaths } = await Promise.resolve().then(() => __importStar(require("./utils.js")));
+            return parsePaths(this.paths, scale, this.offset);
         };
-        this._polygonBounce = (particle, _delta, direction) => {
+        this._polygonBounce = async (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 = (0, utils_js_1.calcClosestPtOnSegment)(pi, pj, pos);
+                const pos = particle.getPosition(), radius = particle.getRadius(), offset = 1;
+                for (let i = 0, j = this.raw.length - offset; i < this.raw.length; j = i++) {
+                    const pi = this.raw[i], pj = this.raw[j], { calcClosestPointOnSegment } = await Promise.resolve().then(() => __importStar(require("./utils.js")));
+                    closest = calcClosestPointOnSegment(pi, pj, pos);
                     const dist = (0, engine_1.getDistances)(pos, closest);
                     [dx, dy] = [dist.dx, dist.dy];
                     if (dist.distance < radius) {
-                        (0, utils_js_1.segmentBounce)(pi, pj, particle.velocity);
+                        const { segmentBounce } = await Promise.resolve().then(() => __importStar(require("./utils.js")));
+                        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;
+                    const factor = { x: 1, y: 1 }, diameter = radius * double, inverse = -1;
                     if (pos.x >= closest.x) {
                         factor.x = -1;
                     }
@@ -238,15 +267,15 @@ class PolygonMaskInstance {
                     }
                     particle.position.x = closest.x + diameter * factor.x;
                     particle.position.y = closest.y + diameter * factor.y;
-                    particle.velocity.mult(-1);
+                    particle.velocity.mult(inverse);
                     return true;
                 }
             }
             else if (options.type === "inline" && particle.initialPosition) {
                 const dist = (0, engine_1.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;
+                    velocity.x = velocity.y * half - velocity.x;
+                    velocity.y = velocity.x * half - velocity.y;
                     return true;
                 }
             }
@@ -305,7 +334,7 @@ class PolygonMaskInstance {
             options.type !== "inline" &&
             this._checkInsidePolygon(position));
     }
-    draw(context) {
+    async draw(context) {
         if (!this.paths?.length) {
             return;
         }
@@ -324,10 +353,12 @@ class PolygonMaskInstance {
                 continue;
             }
             if (path2d && this.offset) {
-                (0, utils_js_1.drawPolygonMaskPath)(context, path2d, polygonDraw.stroke, this.offset);
+                const { drawPolygonMaskPath } = await Promise.resolve().then(() => __importStar(require("./utils.js")));
+                drawPolygonMaskPath(context, path2d, polygonDraw.stroke, this.offset);
             }
             else if (rawData) {
-                (0, utils_js_1.drawPolygonMask)(context, rawData, polygonDraw.stroke);
+                const { drawPolygonMask } = await Promise.resolve().then(() => __importStar(require("./utils.js")));
+                drawPolygonMask(context, rawData, polygonDraw.stroke);
             }
         }
     }
@@ -342,12 +373,12 @@ class PolygonMaskInstance {
             await this._initRawData();
         }
     }
-    particleBounce(particle, delta, direction) {
-        return this._polygonBounce(particle, delta, direction);
+    async particleBounce(particle, delta, direction) {
+        return await this._polygonBounce(particle, delta, direction);
     }
     particlePosition(position) {
-        const options = this._container.actualOptions.polygon;
-        if (!(options?.enable && (this.raw?.length ?? 0) > 0)) {
+        const options = this._container.actualOptions.polygon, defaultLength = 0;
+        if (!(options?.enable && (this.raw?.length ?? defaultLength) > defaultLength)) {
             return;
         }
         return (0, engine_1.deepExtend)({}, position ? position : this._randomPoint());
@@ -371,10 +402,13 @@ class PolygonMaskInstance {
         if (this.redrawTimeout) {
             clearTimeout(this.redrawTimeout);
         }
-        this.redrawTimeout = window.setTimeout(async () => {
-            await this._initRawData(true);
-            await container.particles.redraw();
-        }, 250);
+        const timeout = 250;
+        this.redrawTimeout = window.setTimeout(() => {
+            void (async () => {
+                await this._initRawData(true);
+                await container.particles.redraw();
+            })();
+        }, timeout);
     }
     stop() {
         delete this.raw;

package/cjs/PolygonMaskPlugin.js

@@ -0,0 +1,52 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PolygonMaskPlugin = void 0;
+const PolygonMask_js_1 = require("./Options/Classes/PolygonMask.js");
+class PolygonMaskPlugin {
+    constructor(engine) {
+        this.id = "polygonMask";
+        this._engine = engine;
+    }
+    async getPlugin(container) {
+        const { PolygonMaskInstance } = await Promise.resolve().then(() => __importStar(require("./PolygonMaskInstance.js")));
+        return new PolygonMaskInstance(container, this._engine);
+    }
+    loadOptions(options, source) {
+        if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
+            return;
+        }
+        let polygonOptions = options.polygon;
+        if (polygonOptions?.load === undefined) {
+            options.polygon = polygonOptions = new PolygonMask_js_1.PolygonMask();
+        }
+        polygonOptions.load(source?.polygon);
+    }
+    needsPlugin(options) {
+        return (options?.polygon?.enable ??
+            (options?.polygon?.type !== undefined && options.polygon.type !== "none"));
+    }
+}
+exports.PolygonMaskPlugin = PolygonMaskPlugin;

package/cjs/index.js

@@ -10,38 +10,26 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
 }));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadPolygonMaskPlugin = void 0;
 require("./pathseg.js");
-const PolygonMask_js_1 = require("./Options/Classes/PolygonMask.js");
-const PolygonMaskInstance_js_1 = require("./PolygonMaskInstance.js");
-class PolygonMaskPlugin {
-    constructor(engine) {
-        this.id = "polygonMask";
-        this._engine = engine;
-    }
-    getPlugin(container) {
-        return new PolygonMaskInstance_js_1.PolygonMaskInstance(container, this._engine);
-    }
-    loadOptions(options, source) {
-        if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
-            return;
-        }
-        let polygonOptions = options.polygon;
-        if (polygonOptions?.load === undefined) {
-            options.polygon = polygonOptions = new PolygonMask_js_1.PolygonMask();
-        }
-        polygonOptions.load(source?.polygon);
-    }
-    needsPlugin(options) {
-        return (options?.polygon?.enable ??
-            (options?.polygon?.type !== undefined && options.polygon.type !== "none"));
-    }
-}
 async function loadPolygonMaskPlugin(engine, refresh = true) {
+    const { PolygonMaskPlugin } = await Promise.resolve().then(() => __importStar(require("./PolygonMaskPlugin.js")));
     await engine.addPlugin(new PolygonMaskPlugin(engine), refresh);
 }
 exports.loadPolygonMaskPlugin = loadPolygonMaskPlugin;

package/cjs/utils.js

@@ -1,14 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.segmentBounce = exports.calcClosestPtOnSegment = exports.parsePaths = exports.drawPolygonMaskPath = exports.drawPolygonMask = void 0;
+exports.segmentBounce = exports.calcClosestPointOnSegment = exports.parsePaths = exports.drawPolygonMaskPath = exports.drawPolygonMask = void 0;
 const engine_1 = require("@tsparticles/engine");
+const squareExp = 2, inSegmentRange = {
+    min: 0,
+    max: 1,
+}, double = 2;
 function drawPolygonMask(context, rawData, stroke) {
     const color = (0, engine_1.rangeColorToRgb)(stroke.color);
     if (!color) {
         return;
     }
+    const firstIndex = 0, firstItem = rawData[firstIndex];
     context.beginPath();
-    context.moveTo(rawData[0].x, rawData[0].y);
+    context.moveTo(firstItem.x, firstItem.y);
     for (const item of rawData) {
         context.lineTo(item.x, item.y);
     }
@@ -19,7 +24,13 @@ function drawPolygonMask(context, rawData, stroke) {
 }
 exports.drawPolygonMask = drawPolygonMask;
 function drawPolygonMaskPath(context, path, stroke, position) {
-    context.setTransform(1, 0, 0, 1, position.x, position.y);
+    const defaultTransform = {
+        a: 1,
+        b: 0,
+        c: 0,
+        d: 1,
+    };
+    context.setTransform(defaultTransform.a, defaultTransform.b, defaultTransform.c, defaultTransform.d, position.x, position.y);
     const color = (0, engine_1.rangeColorToRgb)(stroke.color);
     if (!color) {
         return;
@@ -27,13 +38,13 @@ function drawPolygonMaskPath(context, path, stroke, position) {
     context.strokeStyle = (0, engine_1.getStyleFromRgb)(color, stroke.opacity);
     context.lineWidth = stroke.width;
     context.stroke(path);
-    context.setTransform(1, 0, 0, 1, 0, 0);
+    context.resetTransform();
 }
 exports.drawPolygonMaskPath = drawPolygonMaskPath;
 function parsePaths(paths, scale, offset) {
-    const res = [];
+    const res = [], defaultCount = 0;
     for (const path of paths) {
-        const segments = path.element.pathSegList, len = segments?.numberOfItems ?? 0, p = {
+        const segments = path.element.pathSegList, len = segments?.numberOfItems ?? defaultCount, p = {
             x: 0,
             y: 0,
         };
@@ -89,25 +100,25 @@ function parsePaths(paths, scale, offset) {
     return res;
 }
 exports.parsePaths = parsePaths;
-function calcClosestPtOnSegment(s1, s2, pos) {
-    const { dx: dx1, dy: dy1 } = (0, engine_1.getDistances)(pos, s1), { dx: dx2, dy: dy2 } = (0, engine_1.getDistances)(s2, s1), t = (dx1 * dx2 + dy1 * dy2) / (dx2 ** 2 + dy2 ** 2), res = {
+function calcClosestPointOnSegment(s1, s2, pos) {
+    const { dx: dx1, dy: dy1 } = (0, engine_1.getDistances)(pos, s1), { dx: dx2, dy: dy2 } = (0, engine_1.getDistances)(s2, s1), t = (dx1 * dx2 + dy1 * dy2) / (dx2 ** squareExp + dy2 ** squareExp), res = {
         x: s1.x + dx2 * t,
         y: s1.y + dy2 * t,
-        isOnSegment: t >= 0 && t <= 1,
+        isOnSegment: t >= inSegmentRange.min && t <= inSegmentRange.max,
     };
-    if (t < 0) {
+    if (t < inSegmentRange.min) {
         res.x = s1.x;
         res.y = s1.y;
     }
-    else if (t > 1) {
+    else if (t > inSegmentRange.max) {
         res.x = s2.x;
         res.y = s2.y;
     }
     return res;
 }
-exports.calcClosestPtOnSegment = calcClosestPtOnSegment;
+exports.calcClosestPointOnSegment = calcClosestPointOnSegment;
 function segmentBounce(start, stop, velocity) {
-    const { dx, dy } = (0, engine_1.getDistances)(start, stop), wallAngle = Math.atan2(dy, dx), wallNormal = engine_1.Vector.create(Math.sin(wallAngle), -Math.cos(wallAngle)), d = 2 * (velocity.x * wallNormal.x + velocity.y * wallNormal.y);
+    const { dx, dy } = (0, engine_1.getDistances)(start, stop), wallAngle = Math.atan2(dy, dx), wallNormal = engine_1.Vector.create(Math.sin(wallAngle), -Math.cos(wallAngle)), d = double * (velocity.x * wallNormal.x + velocity.y * wallNormal.y);
     wallNormal.multTo(d);
     velocity.subFrom(wallNormal);
 }

package/dist_browser_PolygonMaskInstance_js.js

@@ -0,0 +1,30 @@
+/*!
+ * Author : Matteo Bruni
+ * MIT license: https://opensource.org/licenses/MIT
+ * Demo / Generator : https://particles.js.org/
+ * GitHub : https://www.github.com/matteobruni/tsparticles
+ * How to use? : Check the GitHub README
+ * v3.2.0
+ */
+"use strict";
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+(this["webpackChunk_tsparticles_plugin_polygon_mask"] = this["webpackChunk_tsparticles_plugin_polygon_mask"] || []).push([["dist_browser_PolygonMaskInstance_js"],{
+
+/***/ "./dist/browser/PolygonMaskInstance.js":
+/*!*********************************************!*\
+  !*** ./dist/browser/PolygonMaskInstance.js ***!
+  \*********************************************/
+/***/ ((__unused_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 _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__);\n\nconst noPolygonDataLoaded = `${_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.errorPrefix} No polygon data loaded.`,\n  noPolygonFound = `${_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.errorPrefix} No polygon found, you need to specify SVG url in config.`,\n  origin = {\n    x: 0,\n    y: 0\n  },\n  half = 0.5,\n  double = 2;\nclass PolygonMaskInstance {\n  constructor(container, engine) {\n    this._checkInsidePolygon = position => {\n      const container = this._container,\n        options = container.actualOptions.polygon;\n      if (!options?.enable || options.type === \"none\" || options.type === \"inline\") {\n        return true;\n      }\n      if (!this.raw) {\n        throw new Error(noPolygonFound);\n      }\n      const canvasSize = container.canvas.size,\n        x = position?.x ?? (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRandom)() * canvasSize.width,\n        y = position?.y ?? (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRandom)() * canvasSize.height,\n        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],\n          pj = this.raw[j],\n          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 === \"inside\") {\n        return inside;\n      } else {\n        return options.type === \"outside\" ? !inside : false;\n      }\n    };\n    this._createPath2D = () => {\n      const container = this._container,\n        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),\n            matrix = document.createElementNS(\"http://www.w3.org/2000/svg\", \"svg\").createSVGMatrix(),\n            finalPath = new Path2D(),\n            transform = matrix.scale(this._scale);\n          if (finalPath.addPath) {\n            finalPath.addPath(path2d, transform);\n            path.path2d = finalPath;\n          } else {\n            delete path.path2d;\n          }\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,\n          firstPoint = this.raw[firstIndex];\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    this._downloadSvgPath = async (svgUrl, force) => {\n      const options = this._container.actualOptions.polygon;\n      if (!options) {\n        return;\n      }\n      const url = svgUrl ?? options.url,\n        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(`${_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.errorPrefix} occurred during polygon mask download`);\n      }\n      return await this._parseSvgPath(await req.text(), force);\n    };\n    this._drawPoints = () => {\n      if (!this.raw) {\n        return;\n      }\n      for (const item of this.raw) {\n        void this._container.particles.addParticle({\n          x: item.x,\n          y: item.y\n        });\n      }\n    };\n    this._getEquidistantPointByIndex = index => {\n      const container = this._container,\n        options = container.actualOptions,\n        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,\n        point;\n      const baseAccumulator = 0,\n        totalLength = this.paths.reduce((tot, path) => tot + path.length, baseAccumulator),\n        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 ?? origin.x) * scale + (this.offset?.x ?? origin.x),\n        y: (point?.y ?? origin.y) * scale + (this.offset?.y ?? origin.y)\n      };\n    };\n    this._getPointByIndex = index => {\n      if (!this.raw?.length) {\n        throw new Error(noPolygonDataLoaded);\n      }\n      const coords = this.raw[index % this.raw.length];\n      return {\n        x: coords.x,\n        y: coords.y\n      };\n    };\n    this._getRandomPoint = () => {\n      if (!this.raw?.length) {\n        throw new Error(noPolygonDataLoaded);\n      }\n      const coords = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.itemFromArray)(this.raw);\n      return {\n        x: coords.x,\n        y: coords.y\n      };\n    };\n    this._getRandomPointByLength = () => {\n      const container = this._container,\n        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_0__.itemFromArray)(this.paths),\n        offset = 1,\n        distance = Math.floor((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRandom)() * path.length) + offset,\n        point = path.element.getPointAtLength(distance),\n        scale = this._scale;\n      return {\n        x: point.x * scale + (this.offset?.x ?? origin.x),\n        y: point.y * scale + (this.offset?.y ?? origin.y)\n      };\n    };\n    this._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_0__.isString)(data)) {\n          svg = data;\n        } else {\n          const getPath = p => `<path d=\"${p}\" />`,\n            path = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isArray)(data.path) ? data.path.map(getPath).join(\"\") : getPath(data.path);\n          const namespaces = 'xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"';\n          svg = `<svg ${namespaces} width=\"${data.size.width}\" height=\"${data.size.height}\">${path}</svg>`;\n        }\n        this.raw = await this._parseSvgPath(svg, force);\n      }\n      this._createPath2D();\n      this._engine.dispatchEvent(\"polygonMaskLoaded\", {\n        container: this._container\n      });\n    };\n    this._parseSvgPath = async (xml, force) => {\n      const forceDownload = force ?? false;\n      if (this.paths !== undefined && !forceDownload) {\n        return this.raw;\n      }\n      const container = this._container,\n        options = container.actualOptions.polygon;\n      if (!options) {\n        return;\n      }\n      const parser = new DOMParser(),\n        doc = parser.parseFromString(xml, \"image/svg+xml\"),\n        firstIndex = 0,\n        svg = doc.getElementsByTagName(\"svg\")[firstIndex];\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        },\n        canvasSize = container.canvas.size;\n      this.offset = {\n        x: canvasSize.width * position.x / _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.percentDenominator - this.dimension.width * half,\n        y: canvasSize.height * position.y / _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.percentDenominator - this.dimension.height * half\n      };\n      const {\n        parsePaths\n      } = await __webpack_require__.e(/*! import() */ \"dist_browser_utils_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./utils.js */ \"./dist/browser/utils.js\"));\n      return parsePaths(this.paths, scale, this.offset);\n    };\n    this._polygonBounce = async (particle, delta, direction) => {\n      const options = this._container.actualOptions.polygon;\n      if (!this.raw || !options?.enable || direction !== \"top\") {\n        return false;\n      }\n      if (options.type === \"inside\" || options.type === \"outside\") {\n        let closest, dx, dy;\n        const pos = particle.getPosition(),\n          radius = particle.getRadius(),\n          offset = 1;\n        for (let i = 0, j = this.raw.length - offset; i < this.raw.length; j = i++) {\n          const pi = this.raw[i],\n            pj = this.raw[j],\n            {\n              calcClosestPointOnSegment\n            } = await __webpack_require__.e(/*! import() */ \"dist_browser_utils_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./utils.js */ \"./dist/browser/utils.js\"));\n          closest = calcClosestPointOnSegment(pi, pj, pos);\n          const dist = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistances)(pos, closest);\n          [dx, dy] = [dist.dx, dist.dy];\n          if (dist.distance < radius) {\n            const {\n              segmentBounce\n            } = await __webpack_require__.e(/*! import() */ \"dist_browser_utils_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./utils.js */ \"./dist/browser/utils.js\"));\n            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            },\n            diameter = radius * double,\n            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 === \"inline\" && particle.initialPosition) {\n        const dist = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistance)(particle.initialPosition, particle.getPosition()),\n          {\n            velocity\n          } = particle;\n        if (dist > this._moveRadius) {\n          velocity.x = velocity.y * half - velocity.x;\n          velocity.y = velocity.x * half - velocity.y;\n          return true;\n        }\n      }\n      return false;\n    };\n    this._randomPoint = () => {\n      const container = this._container,\n        options = container.actualOptions.polygon;\n      if (!options) {\n        return;\n      }\n      let position;\n      if (options.type === \"inline\") {\n        switch (options.inline.arrangement) {\n          case \"random-point\":\n            position = this._getRandomPoint();\n            break;\n          case \"random-length\":\n            position = this._getRandomPointByLength();\n            break;\n          case \"equidistant\":\n            position = this._getEquidistantPointByIndex(container.particles.count);\n            break;\n          case \"one-per-point\":\n          case \"per-point\":\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_0__.getRandom)() * canvasSize.width,\n          y: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRandom)() * canvasSize.height\n        };\n      }\n      if (this._checkInsidePolygon(position)) {\n        return position;\n      } else {\n        return this._randomPoint();\n      }\n    };\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 !== \"none\" && options.type !== \"inline\" && this._checkInsidePolygon(position);\n  }\n  async 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 (!context) {\n        continue;\n      }\n      if (path2d && this.offset) {\n        const {\n          drawPolygonMaskPath\n        } = await __webpack_require__.e(/*! import() */ \"dist_browser_utils_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./utils.js */ \"./dist/browser/utils.js\"));\n        drawPolygonMaskPath(context, path2d, polygonDraw.stroke, this.offset);\n      } else if (rawData) {\n        const {\n          drawPolygonMask\n        } = await __webpack_require__.e(/*! import() */ \"dist_browser_utils_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./utils.js */ \"./dist/browser/utils.js\"));\n        drawPolygonMask(context, rawData, polygonDraw.stroke);\n      }\n    }\n  }\n  async init() {\n    const container = this._container,\n      polygonMaskOptions = container.actualOptions.polygon,\n      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  async particleBounce(particle, delta, direction) {\n    return await this._polygonBounce(particle, delta, direction);\n  }\n  particlePosition(position) {\n    const options = this._container.actualOptions.polygon,\n      defaultLength = 0;\n    if (!(options?.enable && (this.raw?.length ?? defaultLength) > defaultLength)) {\n      return;\n    }\n    return (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.deepExtend)({}, position ? position : this._randomPoint());\n  }\n  particlesInitialization() {\n    const options = this._container.actualOptions.polygon;\n    if (options?.enable && options.type === \"inline\" && (options.inline.arrangement === \"one-per-point\" || options.inline.arrangement === \"per-point\")) {\n      this._drawPoints();\n      return true;\n    }\n    return false;\n  }\n  resize() {\n    const container = this._container,\n      options = container.actualOptions.polygon;\n    if (!(options?.enable && options.type !== \"none\")) {\n      return;\n    }\n    if (this.redrawTimeout) {\n      clearTimeout(this.redrawTimeout);\n    }\n    const timeout = 250;\n    this.redrawTimeout = window.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}\n\n//# sourceURL=webpack://@tsparticles/plugin-polygon-mask/./dist/browser/PolygonMaskInstance.js?");
+
+/***/ })
+
+}]);