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

package/esm/types.js

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

package/esm/utils.js

@@ -0,0 +1,108 @@
+import { Vector, getDistances, getStyleFromRgb, rangeColorToRgb } from "@tsparticles/engine";
+export function drawPolygonMask(context, rawData, stroke) {
+    const color = 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 = getStyleFromRgb(color);
+    context.lineWidth = stroke.width;
+    context.stroke();
+}
+export function drawPolygonMaskPath(context, path, stroke, position) {
+    context.setTransform(1, 0, 0, 1, position.x, position.y);
+    const color = rangeColorToRgb(stroke.color);
+    if (!color) {
+        return;
+    }
+    context.strokeStyle = getStyleFromRgb(color, stroke.opacity);
+    context.lineWidth = stroke.width;
+    context.stroke(path);
+    context.setTransform(1, 0, 0, 1, 0, 0);
+}
+export 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;
+}
+export function calcClosestPtOnSegment(s1, s2, pos) {
+    const { dx: dx1, dy: dy1 } = getDistances(pos, s1), { dx: dx2, dy: dy2 } = getDistances(s2, s1), t = (dx1 * dx2 + dy1 * dy2) / (dx2 ** 2 + 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;
+}
+export function segmentBounce(start, stop, velocity) {
+    const { dx, dy } = getDistances(start, stop), wallAngle = Math.atan2(dy, dx), wallNormal = Vector.create(Math.sin(wallAngle), -Math.cos(wallAngle)), d = 2 * (velocity.x * wallNormal.x + velocity.y * wallNormal.y);
+    wallNormal.multTo(d);
+    velocity.subFrom(wallNormal);
+}

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@tsparticles/plugin-polygon-mask",
+  "version": "3.0.0-alpha.0",
+  "description": "tsParticles polygon mask plugin",
+  "homepage": "https://particles.js.org",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/matteobruni/tsparticles.git",
+    "directory": "plugins/polygonMask"
+  },
+  "keywords": [
+    "front-end",
+    "frontend",
+    "tsparticles",
+    "particles.js",
+    "particlesjs",
+    "particles",
+    "particle",
+    "canvas",
+    "jsparticles",
+    "xparticles",
+    "particles-js",
+    "particles-bg",
+    "particles-bg-vue",
+    "particles-ts",
+    "particles.ts",
+    "react-particles-js",
+    "react-particles.js",
+    "react-particles",
+    "react",
+    "reactjs",
+    "vue-particles",
+    "ngx-particles",
+    "angular-particles",
+    "particleground",
+    "vue",
+    "vuejs",
+    "preact",
+    "preactjs",
+    "jquery",
+    "angularjs",
+    "angular",
+    "typescript",
+    "javascript",
+    "animation",
+    "web",
+    "html5",
+    "web-design",
+    "webdesign",
+    "css",
+    "html",
+    "css3",
+    "animated",
+    "background",
+    "confetti",
+    "canvas",
+    "fireworks",
+    "fireworks-js",
+    "confetti-js",
+    "confettijs",
+    "fireworksjs",
+    "canvas-confetti",
+    "@tsparticles/plugin"
+  ],
+  "author": "Matteo Bruni <matteo.bruni@me.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/matteobruni/tsparticles/issues"
+  },
+  "main": "cjs/index.js",
+  "jsdelivr": "tsparticles.plugin.polygon-mask.min.js",
+  "unpkg": "tsparticles.plugin.polygon-mask.min.js",
+  "module": "esm/index.js",
+  "types": "types/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@tsparticles/engine": "^3.0.0-alpha.0"
+  }
+}