@logicflow/core/es/view/shape/Polygon.js

LogicFlow, help you quickly create flowcharts

var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __read = (this && this.__read) || function (o, n) {
    var m = typeof Symbol === "function" && o[Symbol.iterator];
    if (!m) return o;
    var i = m.call(o), r, ar = [], e;
    try {
        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
    }
    catch (error) { e = { error: error }; }
    finally {
        try {
            if (r && !r.done && (m = i["return"])) m.call(i);
        }
        finally { if (e) throw e.error; }
    }
    return ar;
};
import { jsx as _jsx } from "preact/jsx-runtime";
import { forEach, toPairs } from 'lodash-es';
/**
 * 生成带圆角的多边形路径
 * @param points 多边形顶点坐标数组
 * @param radius 圆角半径
 * @returns SVG 路径字符串
 */
export function createRoundedPolygonPath(points, radius) {
    var pointList = points.map(function (point) { return ({ x: point[0], y: point[1] }); });
    var len = pointList.length;
    if (len < 3)
        return '';
    var r = Math.abs(radius);
    var path = '';
    for (var i = 0; i < len; i++) {
        var prev = pointList[(i - 1 + len) % len];
        var curr = pointList[i];
        var next = pointList[(i + 1) % len];
        // 向量
        var v1 = { x: curr.x - prev.x, y: curr.y - prev.y };
        var v2 = { x: next.x - curr.x, y: next.y - curr.y };
        // 单位向量
        var len1 = Math.hypot(v1.x, v1.y);
        var len2 = Math.hypot(v2.x, v2.y);
        var u1 = { x: v1.x / len1, y: v1.y / len1 };
        var u2 = { x: v2.x / len2, y: v2.y / len2 };
        // 起点 = curr - u1 * r，终点 = curr + u2 * r
        var start = { x: curr.x - u1.x * r, y: curr.y - u1.y * r };
        var end = { x: curr.x + u2.x * r, y: curr.y + u2.y * r };
        if (i === 0) {
            path += "M ".concat(start.x, " ").concat(start.y, " ");
        }
        else {
            path += "L ".concat(start.x, " ").concat(start.y, " ");
        }
        // Q 控制点是当前拐角点
        path += "Q ".concat(curr.x, " ").concat(curr.y, " ").concat(end.x, " ").concat(end.y, " ");
    }
    path += 'Z';
    return path;
}
export function Polygon(props) {
    var _a = props.points, points = _a === void 0 ? [] : _a, className = props.className, radius = props.radius;
    var attrs = {
        fill: 'transparent',
        fillOpacity: 1,
        strokeWidth: 1,
        stroke: '#000',
        strokeOpacity: 1,
        points: '',
    };
    forEach(toPairs(props), function (_a) {
        var _b = __read(_a, 2), k = _b[0], v = _b[1];
        if (typeof v !== 'object') {
            attrs[k] = v;
        }
    });
    if (className) {
        attrs.classNmae = "lf-basic-shape ".concat(className);
    }
    else {
        attrs.className = 'lf-basic-shape';
    }
    if (radius) {
        var path = createRoundedPolygonPath(points, radius);
        attrs.d = path;
        return _jsx("path", __assign({}, attrs));
    }
    else {
        attrs.points = points.map(function (point) { return point.join(','); }).join(' ');
        return _jsx("polygon", __assign({}, attrs));
    }
}
export default Polygon;