@tsparticles/plugin-polygon-mask 3.0.0-alpha.0

package/cjs/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/utils.js

@@ -0,0 +1,116 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.segmentBounce = exports.calcClosestPtOnSegment = exports.parsePaths = exports.drawPolygonMaskPath = exports.drawPolygonMask = void 0;
+const engine_1 = require("@tsparticles/engine");
+function drawPolygonMask(context, rawData, stroke) {
+    const color = (0, engine_1.rangeColorToRgb)(stroke.color);
+    if (!color) {
+        return;
+    }
+    context.beginPath();
+    context.moveTo(rawData[0].x, rawData[0].y);
+    for (const item of rawData) {
+        context.lineTo(item.x, item.y);
+    }
+    context.closePath();
+    context.strokeStyle = (0, engine_1.getStyleFromRgb)(color);
+    context.lineWidth = stroke.width;
+    context.stroke();
+}
+exports.drawPolygonMask = drawPolygonMask;
+function drawPolygonMaskPath(context, path, stroke, position) {
+    context.setTransform(1, 0, 0, 1, position.x, position.y);
+    const color = (0, engine_1.rangeColorToRgb)(stroke.color);
+    if (!color) {
+        return;
+    }
+    context.strokeStyle = (0, engine_1.getStyleFromRgb)(color, stroke.opacity);
+    context.lineWidth = stroke.width;
+    context.stroke(path);
+    context.setTransform(1, 0, 0, 1, 0, 0);
+}
+exports.drawPolygonMaskPath = drawPolygonMaskPath;
+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, 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) {
+                case svgPathSeg.PATHSEG_MOVETO_ABS:
+                case svgPathSeg.PATHSEG_LINETO_ABS:
+                case svgPathSeg.PATHSEG_CURVETO_CUBIC_ABS:
+                case svgPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS:
+                case svgPathSeg.PATHSEG_ARC_ABS:
+                case svgPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_ABS:
+                case svgPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS: {
+                    const absSeg = segment;
+                    p.x = absSeg.x;
+                    p.y = absSeg.y;
+                    break;
+                }
+                case svgPathSeg.PATHSEG_LINETO_HORIZONTAL_ABS:
+                    p.x = segment.x;
+                    break;
+                case svgPathSeg.PATHSEG_LINETO_VERTICAL_ABS:
+                    p.y = segment.y;
+                    break;
+                case svgPathSeg.PATHSEG_LINETO_REL:
+                case svgPathSeg.PATHSEG_MOVETO_REL:
+                case svgPathSeg.PATHSEG_CURVETO_CUBIC_REL:
+                case svgPathSeg.PATHSEG_CURVETO_QUADRATIC_REL:
+                case svgPathSeg.PATHSEG_ARC_REL:
+                case svgPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_REL:
+                case svgPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL: {
+                    const relSeg = segment;
+                    p.x += relSeg.x;
+                    p.y += relSeg.y;
+                    break;
+                }
+                case svgPathSeg.PATHSEG_LINETO_HORIZONTAL_REL:
+                    p.x += segment.x;
+                    break;
+                case svgPathSeg.PATHSEG_LINETO_VERTICAL_REL:
+                    p.y += segment.y;
+                    break;
+                case svgPathSeg.PATHSEG_UNKNOWN:
+                case svgPathSeg.PATHSEG_CLOSEPATH:
+                    continue;
+            }
+            res.push({
+                x: p.x * scale + offset.x,
+                y: p.y * scale + offset.y,
+            });
+        }
+    }
+    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) / (Math.pow(dx2, 2) + Math.pow(dy2, 2)), res = {
+        x: s1.x + dx2 * t,
+        y: s1.y + dy2 * t,
+        isOnSegment: t >= 0 && t <= 1,
+    };
+    if (t < 0) {
+        res.x = s1.x;
+        res.y = s1.y;
+    }
+    else if (t > 1) {
+        res.x = s2.x;
+        res.y = s2.y;
+    }
+    return res;
+}
+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);
+    wallNormal.multTo(d);
+    velocity.subFrom(wallNormal);
+}
+exports.segmentBounce = segmentBounce;

package/esm/Enums/PolygonMaskInlineArrangement.js

@@ -0,0 +1 @@
+export {};

package/esm/Enums/PolygonMaskMoveType.js

@@ -0,0 +1 @@
+export {};

package/esm/Enums/PolygonMaskType.js

@@ -0,0 +1 @@
+export {};

package/esm/Interfaces/ISvgPath.js

@@ -0,0 +1 @@
+export {};

package/esm/Options/Classes/PolygonMask.js

@@ -0,0 +1,56 @@
+import { PolygonMaskDraw } from "./PolygonMaskDraw";
+import { PolygonMaskInline } from "./PolygonMaskInline";
+import { PolygonMaskLocalSvg } from "./PolygonMaskLocalSvg";
+import { PolygonMaskMove } from "./PolygonMaskMove";
+import { deepExtend } from "@tsparticles/engine";
+export class PolygonMask {
+    constructor() {
+        this.draw = new PolygonMaskDraw();
+        this.enable = false;
+        this.inline = new PolygonMaskInline();
+        this.move = new PolygonMaskMove();
+        this.scale = 1;
+        this.type = "none";
+    }
+    get inlineArrangement() {
+        return this.inline.arrangement;
+    }
+    set inlineArrangement(value) {
+        this.inline.arrangement = value;
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        this.draw.load(data.draw);
+        this.inline.load(data.inline);
+        this.move.load(data.move);
+        if (data.scale !== undefined) {
+            this.scale = data.scale;
+        }
+        if (data.type !== undefined) {
+            this.type = data.type;
+        }
+        if (data.enable !== undefined) {
+            this.enable = data.enable;
+        }
+        else {
+            this.enable = this.type !== "none";
+        }
+        if (data.url !== undefined) {
+            this.url = data.url;
+        }
+        if (data.data !== undefined) {
+            if (typeof data.data === "string") {
+                this.data = data.data;
+            }
+            else {
+                this.data = new PolygonMaskLocalSvg();
+                this.data.load(data.data);
+            }
+        }
+        if (data.position !== undefined) {
+            this.position = deepExtend({}, data.position);
+        }
+    }
+}

package/esm/Options/Classes/PolygonMaskDraw.js

@@ -0,0 +1,34 @@
+import { OptionsColor } from "@tsparticles/engine";
+import { PolygonMaskDrawStroke } from "./PolygonMaskDrawStroke";
+export class PolygonMaskDraw {
+    constructor() {
+        this.enable = false;
+        this.stroke = new PolygonMaskDrawStroke();
+    }
+    get lineColor() {
+        return this.stroke.color;
+    }
+    set lineColor(value) {
+        this.stroke.color = 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,
+        };
+        this.stroke.load(stroke);
+    }
+}

package/esm/Options/Classes/PolygonMaskDrawStroke.js

@@ -0,0 +1,24 @@
+import { OptionsColor, stringToAlpha } from "@tsparticles/engine";
+export class PolygonMaskDrawStroke {
+    constructor() {
+        this.color = new OptionsColor();
+        this.width = 0.5;
+        this.opacity = 1;
+    }
+    load(data) {
+        var _a;
+        if (!data) {
+            return;
+        }
+        this.color = OptionsColor.create(this.color, data.color);
+        if (typeof this.color.value === "string") {
+            this.opacity = (_a = stringToAlpha(this.color.value)) !== null && _a !== void 0 ? _a : this.opacity;
+        }
+        if (data.opacity !== undefined) {
+            this.opacity = data.opacity;
+        }
+        if (data.width !== undefined) {
+            this.width = data.width;
+        }
+    }
+}

package/esm/Options/Classes/PolygonMaskInline.js

@@ -0,0 +1,13 @@
+export class PolygonMaskInline {
+    constructor() {
+        this.arrangement = "one-per-point";
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.arrangement !== undefined) {
+            this.arrangement = data.arrangement;
+        }
+    }
+}

package/esm/Options/Classes/PolygonMaskLocalSvg.js

@@ -0,0 +1,25 @@
+export class PolygonMaskLocalSvg {
+    constructor() {
+        this.path = [];
+        this.size = {
+            height: 0,
+            width: 0,
+        };
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.path !== undefined) {
+            this.path = data.path;
+        }
+        if (data.size !== undefined) {
+            if (data.size.width !== undefined) {
+                this.size.width = data.size.width;
+            }
+            if (data.size.height !== undefined) {
+                this.size.height = data.size.height;
+            }
+        }
+    }
+}

package/esm/Options/Classes/PolygonMaskMove.js

@@ -0,0 +1,17 @@
+export class PolygonMaskMove {
+    constructor() {
+        this.radius = 10;
+        this.type = "path";
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.radius !== undefined) {
+            this.radius = data.radius;
+        }
+        if (data.type !== undefined) {
+            this.type = data.type;
+        }
+    }
+}

package/esm/Options/Interfaces/IPolygonMask.js

@@ -0,0 +1 @@
+export {};

package/esm/Options/Interfaces/IPolygonMaskDraw.js

@@ -0,0 +1 @@
+export {};

package/esm/Options/Interfaces/IPolygonMaskDrawStroke.js

@@ -0,0 +1 @@
+export {};

package/esm/Options/Interfaces/IPolygonMaskInline.js

@@ -0,0 +1 @@
+export {};

package/esm/Options/Interfaces/IPolygonMaskLocalSvg.js

@@ -0,0 +1 @@
+export {};

package/esm/Options/Interfaces/IPolygonMaskMove.js

@@ -0,0 +1 @@
+export {};