@tsparticles/plugin-polygon-mask 3.0.2 → 3.1.0

package/umd/PolygonMaskInstance.js

@@ -12,7 +12,10 @@
     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) => {
@@ -23,19 +26,20 @@
                 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;
@@ -57,13 +61,14 @@
                     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);
                         }
                     });
@@ -75,7 +80,7 @@
                 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;
                 }
@@ -101,11 +106,11 @@
                 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) {
@@ -118,12 +123,12 @@
                 }
                 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];
@@ -133,7 +138,7 @@
                 };
             };
             this._getRandomPoint = () => {
-                if (!this.raw || !this.raw.length) {
+                if (!this.raw?.length) {
                     throw new Error(noPolygonDataLoaded);
                 }
                 const coords = (0, engine_1.itemFromArray)(this.raw);
@@ -147,13 +152,13 @@
                 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) => {
@@ -191,7 +196,7 @@
                 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");
@@ -214,8 +219,8 @@
                     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);
             };
@@ -226,8 +231,8 @@
                 }
                 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 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];
                         closest = (0, utils_js_1.calcClosestPtOnSegment)(pi, pj, pos);
                         const dist = (0, engine_1.getDistances)(pos, closest);
@@ -238,7 +243,7 @@
                         }
                     }
                     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;
                         }
@@ -247,15 +252,15 @@
                         }
                         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;
                     }
                 }
@@ -355,8 +360,8 @@
             return 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());
@@ -380,10 +385,13 @@
             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/umd/utils.js

@@ -11,13 +11,18 @@
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.segmentBounce = exports.calcClosestPtOnSegment = 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);
         }
@@ -28,7 +33,13 @@
     }
     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;
@@ -36,13 +47,13 @@
         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,
             };
@@ -99,16 +110,16 @@
     }
     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 = {
+        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;
         }
@@ -116,7 +127,7 @@
     }
     exports.calcClosestPtOnSegment = calcClosestPtOnSegment;
     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);
     }