@logicflow/core 2.2.0-alpha.2 → 2.2.0-alpha.4

package/es/view/overlay/Grid.js

@@ -19,12 +19,38 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+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;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { Component } from 'preact/compat';
-import { cloneDeep, assign } from 'lodash-es';
+import { cloneDeep, assign, isNil } from 'lodash-es';
 import { observer } from '../..';
+import { mergeMajorBoldConfig } from './gridConfig';
 import { createUuid } from '../../util';
-import { DEFAULT_GRID_SIZE } from '../../constant';
+import { defaultGrid } from '../../constant';
 var Grid = /** @class */ (function (_super) {
     __extends(Grid, _super);
     function Grid(props) {
@@ -42,21 +68,64 @@ var Grid = /** @class */ (function (_super) {
         var opacity = visible ? 1 : 0;
         return (_jsxs("g", { fill: color, opacity: opacity, children: [_jsx("circle", { cx: 0, cy: 0, r: radius / 2 }), _jsx("circle", { cx: 0, cy: size, r: radius / 2 }), _jsx("circle", { cx: size, cy: 0, r: radius / 2 }), _jsx("circle", { cx: size, cy: size, r: radius / 2 })] }));
     };
+    // 计算与 size 整除的虚线周期，使边长能被 (dash + gap) 完整分割
+    Grid.prototype.getDashArrayForSize = function (dashCfg) {
+        var _a;
+        // 若提供了直接可用的 pattern，则优先使用
+        var direct = (_a = dashCfg === null || dashCfg === void 0 ? void 0 : dashCfg.pattern) === null || _a === void 0 ? void 0 : _a.filter(function (n) { return typeof n === 'number' && n > 0; });
+        return (direct === null || direct === void 0 ? void 0 : direct.join(',')) || '2,1';
+    };
+    // 计算一个周期内的最大加粗索引（作为周期大小）
+    Grid.prototype.getPeriod = function (advanced) {
+        var list = Array.isArray(advanced === null || advanced === void 0 ? void 0 : advanced.boldIndices)
+            ? advanced.boldIndices.filter(function (n) { return typeof n === 'number' && n > 0; })
+            : [];
+        return list.length ? Math.max.apply(Math, __spreadArray([], __read(list), false)) : 0;
+    };
+    // 计算加粗线宽，优先使用自定义；否则根据周期与厚度估算
+    Grid.prototype.getBoldStrokeWidth = function (advanced, size, thickness, period) {
+        if (typeof (advanced === null || advanced === void 0 ? void 0 : advanced.customBoldWidth) === 'number')
+            return advanced.customBoldWidth;
+        var baseThickness = Math.max(1, thickness !== null && thickness !== void 0 ? thickness : 1);
+        var p = Math.max(1, period !== null && period !== void 0 ? period : this.getPeriod(advanced));
+        return Math.min(baseThickness, (size * p) / 2) / 2;
+    };
+    // 渲染 mesh 类型四条边的虚线，减少重复代码
+    Grid.prototype.renderMeshEdgeLines = function (size, color, strokeWidth, opacity, dash) {
+        var segments = [
+            { d: "M 0 0 H ".concat(size) },
+            { d: "M 0 ".concat(size, " H ").concat(size) },
+            { d: "M 0 0 V ".concat(size) },
+            { d: "M ".concat(size, " 0 V ").concat(size) },
+        ];
+        return (_jsx("g", { opacity: opacity, fill: "transparent", children: segments.map(function (seg) { return (_jsx("path", { d: seg.d, stroke: color, strokeWidth: strokeWidth / 2, strokeDasharray: dash, strokeLinecap: "butt", fill: "transparent" })); }) }));
+    };
     // 网格类型为交叉线
     // todo: 采用背景缩放的方式，实现更好的体验
     Grid.prototype.renderMesh = function () {
-        var _a = this.gridOptions, config = _a.config, _b = _a.size, size = _b === void 0 ? 1 : _b, visible = _a.visible;
-        var _c = config !== null && config !== void 0 ? config : {}, color = _c.color, _d = _c.thickness, thickness = _d === void 0 ? 1 : _d;
+        var _a, _b;
+        var _c = this.gridOptions, config = _c.config, _d = _c.size, size = _d === void 0 ? 1 : _d, visible = _c.visible, majorBold = _c.majorBold;
+        var advanced = mergeMajorBoldConfig(majorBold).config;
+        var baseOpacity = advanced.opacity;
+        var color = ((_a = config === null || config === void 0 ? void 0 : config.color) !== null && _a !== void 0 ? _a : '#D7DEEB');
+        var thickness = ((_b = config === null || config === void 0 ? void 0 : config.thickness) !== null && _b !== void 0 ? _b : 1);
         // 对于交叉线网格，线的宽度不能大于网格大小的一半
         var strokeWidth = Math.min(Math.max(1, thickness), size / 2);
-        var d = "M 0 0 H ".concat(size, " V ").concat(size, " H 0 Z");
-        var opacity = visible ? 1 : 0;
-        return (_jsx("path", { d: d, stroke: color, strokeWidth: strokeWidth / 2, opacity: opacity, fill: "transparent" }));
+        var opacity = visible ? baseOpacity : 0;
+        // 根据 size 自动计算合适的 dash/gap 周期，使 size 能被 (dash + gap) 整除
+        var dash = majorBold === false
+            ? undefined
+            : this.getDashArrayForSize(advanced.dashArrayConfig);
+        return this.renderMeshEdgeLines(size, color, strokeWidth, opacity, dash);
     };
     Grid.prototype.render = function () {
-        var _a = this.props.graphModel, transformModel = _a.transformModel, grid = _a.grid;
+        var _this = this;
+        var _a, _b, _c;
+        var _d = this.props.graphModel, transformModel = _d.transformModel, grid = _d.grid;
         this.gridOptions = grid;
-        var _b = this.gridOptions, type = _b.type, _c = _b.size, size = _c === void 0 ? 1 : _c;
+        var _e = this.gridOptions, type = _e.type, _f = _e.config, config = _f === void 0 ? {} : _f, _g = _e.size, size = _g === void 0 ? 1 : _g, majorBold = _e.majorBold;
+        var showMajorBold = majorBold !== false && !isNil(majorBold);
+        var advanced = mergeMajorBoldConfig(majorBold).config;
         var SCALE_X = transformModel.SCALE_X, SKEW_Y = transformModel.SKEW_Y, SKEW_X = transformModel.SKEW_X, SCALE_Y = transformModel.SCALE_Y, TRANSLATE_X = transformModel.TRANSLATE_X, TRANSLATE_Y = transformModel.TRANSLATE_Y;
         var matrixString = [
             SCALE_X,
@@ -67,10 +136,12 @@ var Grid = /** @class */ (function (_super) {
             TRANSLATE_Y,
         ].join(',');
         var transform = "matrix(".concat(matrixString, ")");
-        // const transitionStyle = {
-        //   transition: 'all 0.1s ease',
-        // };
-        return (_jsx("div", { className: "lf-grid", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", children: [_jsx("defs", { children: _jsxs("pattern", { id: this.id, patternUnits: "userSpaceOnUse", patternTransform: transform, x: "0", y: "0", width: size, height: size, children: [type === 'dot' && this.renderDot(), type === 'mesh' && this.renderMesh()] }) }), _jsx("rect", { width: "100%", height: "100%", fill: "url(#".concat(this.id, ")") })] }) }));
+        var radius = Math.min(Math.max(2, (_a = config.thickness) !== null && _a !== void 0 ? _a : 1), size / 4);
+        var opacity = showMajorBold ? advanced.opacity : 1;
+        return (_jsx("div", { className: "lf-grid", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", children: [_jsxs("defs", { children: [_jsxs("pattern", { id: this.id, patternUnits: "userSpaceOnUse", patternTransform: transform, x: "0", y: "0", width: size, height: size, children: [type === 'dot' && this.renderDot(), type === 'mesh' && this.renderMesh()] }), type === 'dot' && advanced.boldIndices.length ? (_jsx("pattern", { id: "".concat(this.id, "-dot-major"), patternUnits: "userSpaceOnUse", patternTransform: transform, x: "0", y: "0", width: size * this.getPeriod(advanced), height: size * this.getPeriod(advanced), children: _jsxs("g", { fill: (_c = (_b = this.gridOptions.config) === null || _b === void 0 ? void 0 : _b.color) !== null && _c !== void 0 ? _c : '#D7DEEB', opacity: this.gridOptions.visible ? opacity : 0, children: [_jsx("circle", { cx: 0, cy: 0, r: (radius * 1.5) / 2 }), _jsx("circle", { cx: size * this.getPeriod(advanced), cy: 0, r: (radius * 1.5) / 2 }), _jsx("circle", { cx: 0, cy: size * this.getPeriod(advanced), r: (radius * 1.5) / 2 }), _jsx("circle", { cx: size * this.getPeriod(advanced), cy: size * this.getPeriod(advanced), r: (radius * 1.5) / 2 })] }) })) : null, type === 'mesh' && advanced.boldIndices.length ? (_jsx("pattern", { id: "".concat(this.id, "-major"), patternUnits: "userSpaceOnUse", patternTransform: transform, x: "0", y: "0", width: size * this.getPeriod(advanced), height: size * this.getPeriod(advanced), children: advanced.boldIndices.map(function (i) {
+                                    var _a, _b, _c, _d, _e, _f;
+                                    return (_jsxs("g", { children: [_jsx("path", { d: "M ".concat(size * i, " 0 V ").concat(size * _this.getPeriod(advanced)), stroke: (_b = (_a = _this.gridOptions.config) === null || _a === void 0 ? void 0 : _a.color) !== null && _b !== void 0 ? _b : '#D7DEEB', strokeWidth: _this.getBoldStrokeWidth(advanced, size, ((_c = _this.gridOptions.config) !== null && _c !== void 0 ? _c : {}).thickness, _this.getPeriod(advanced)), opacity: _this.gridOptions.visible ? opacity : 0, fill: "transparent" }), _jsx("path", { d: "M 0 ".concat(size * i, " H ").concat(size * _this.getPeriod(advanced)), stroke: (_e = (_d = _this.gridOptions.config) === null || _d === void 0 ? void 0 : _d.color) !== null && _e !== void 0 ? _e : '#D7DEEB', strokeWidth: _this.getBoldStrokeWidth(advanced, size, ((_f = _this.gridOptions.config) !== null && _f !== void 0 ? _f : {}).thickness, _this.getPeriod(advanced)), opacity: _this.gridOptions.visible ? opacity : 0, fill: "transparent" })] }));
+                                }) })) : null] }), _jsx("rect", { width: "100%", height: "100%", fill: "url(#".concat(this.id, ")") }), type === 'dot' && showMajorBold && advanced.boldIndices.length ? (_jsx("rect", { width: "100%", height: "100%", fill: "url(#".concat(this.id, "-dot-major)") })) : null, type === 'mesh' && showMajorBold && advanced.boldIndices.length ? (_jsx("rect", { width: "100%", height: "100%", fill: "url(#".concat(this.id, "-major)") })) : null] }) }));
     };
     Grid = __decorate([
         observer
@@ -79,17 +150,8 @@ var Grid = /** @class */ (function (_super) {
 }(Component));
 export { Grid };
 (function (Grid) {
-    Grid.defaultProps = {
-        size: DEFAULT_GRID_SIZE,
-        visible: true,
-        type: 'dot',
-        config: {
-            color: '#ababab',
-            thickness: 1,
-        },
-    };
     function getGridOptions(options) {
-        var defaultOptions = cloneDeep(Grid.defaultProps);
+        var defaultOptions = cloneDeep(defaultGrid);
         if (typeof options === 'number') {
             return assign(defaultOptions, { size: options });
         }

package/es/view/overlay/OutlineOverlay.d.ts

@@ -4,6 +4,7 @@ type IProps = {
     graphModel: GraphModel;
 };
 export declare class OutlineOverlay extends Component<IProps> {
+    private renderRectOutline;
     getNodesOutline(): any;
     getEdgeOutline(): any;
     getLineOutline(line: LineEdgeModel): import("preact/compat").JSX.Element;

package/es/view/overlay/OutlineOverlay.js

@@ -41,6 +41,12 @@ var OutlineOverlay = /** @class */ (function (_super) {
     function OutlineOverlay() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
+    // 通用渲染函数：根据点集合与样式计算包围盒并返回矩形轮廓
+    OutlineOverlay.prototype.renderRectOutline = function (pointsList, style, className, defaultOffsets) {
+        var _a = (style || {}), _b = _a.widthOffset, widthOffset = _b === void 0 ? defaultOffsets.widthOffset : _b, _c = _a.heightOffset, heightOffset = _c === void 0 ? defaultOffsets.heightOffset : _c;
+        var _d = getBBoxOfPoints(pointsList, widthOffset, heightOffset), x = _d.x, y = _d.y, width = _d.width, height = _d.height;
+        return (_jsx(Rect, __assign({ className: className, x: x, y: y, width: width, height: height }, style)));
+    };
     // 节点outline
     OutlineOverlay.prototype.getNodesOutline = function () {
         var graphModel = this.props.graphModel;
@@ -62,11 +68,8 @@ var OutlineOverlay = /** @class */ (function (_super) {
                         var hoverStyle = style_1.hover;
                         attributes_1 = __assign(__assign({}, attributes_1), hoverStyle);
                     }
-                    nodeOutline.push(_jsx(Rect, __assign({ transform: element.transform, className: "lf-outline-node", x: x, y: y, 
-                        // width: width + 10,
-                        // height: height + 10,
-                        width: width + 10,
-                        height: height + 10 }, attributes_1)));
+                    nodeOutline.push(_jsx(Rect, __assign({ transform: element.transform, className: "lf-outline-node", x: x, y: y, width: width + 4,
+                        height: height + 4 }, attributes_1)));
                 }
             }
         });
@@ -96,30 +99,28 @@ var OutlineOverlay = /** @class */ (function (_super) {
     // 直线outline
     OutlineOverlay.prototype.getLineOutline = function (line) {
         var startPoint = line.startPoint, endPoint = line.endPoint;
-        var x = (startPoint.x + endPoint.x) / 2;
-        var y = (startPoint.y + endPoint.y) / 2;
-        var width = Math.abs(startPoint.x - endPoint.x) + 10;
-        var height = Math.abs(startPoint.y - endPoint.y) + 10;
         var style = line.getOutlineStyle();
-        return (_jsx(Rect, __assign({ className: "lf-outline-edge", x: x, y: y, width: width, height: height }, style)));
+        return this.renderRectOutline([startPoint, endPoint], style, 'lf-outline-edge', { widthOffset: 10, heightOffset: 10 });
     };
     // 折线outline
     OutlineOverlay.prototype.getPolylineOutline = function (polyline) {
         var points = polyline.points;
         var pointsList = points2PointsList(points);
-        var bbox = getBBoxOfPoints(pointsList, 8);
-        var x = bbox.x, y = bbox.y, width = bbox.width, height = bbox.height;
         var style = polyline.getOutlineStyle();
-        return (_jsx(Rect, __assign({ className: "lf-outline", x: x, y: y, width: width, height: height }, style)));
+        return this.renderRectOutline(pointsList, style, 'lf-outline', {
+            widthOffset: 8,
+            heightOffset: 16,
+        });
     };
     // 曲线outline
     OutlineOverlay.prototype.getBezierOutline = function (bezier) {
         var path = bezier.path;
         var pointsList = getBezierPoints(path);
-        var bbox = getBBoxOfPoints(pointsList, 8);
-        var x = bbox.x, y = bbox.y, width = bbox.width, height = bbox.height;
         var style = bezier.getOutlineStyle();
-        return (_jsx(Rect, __assign({ className: "lf-outline", x: x, y: y, width: width, height: height }, style)));
+        return this.renderRectOutline(pointsList, style, 'lf-outline', {
+            widthOffset: 8,
+            heightOffset: 16,
+        });
     };
     OutlineOverlay.prototype.render = function () {
         return (_jsxs("g", { className: "lf-outline", children: [this.getNodesOutline(), this.getEdgeOutline()] }));

package/es/view/overlay/gridConfig.d.ts

@@ -0,0 +1,46 @@
+/**
+ * 网格高级 majorBold 配置。
+ *
+ * 示例（布尔值）：
+ *  - false：禁用特殊样式，opacity=1，无加粗，无虚线
+ *  - true：启用默认值，opacity=0.75，每第 5 条线/点加粗/实线，
+ *          虚线图案通过 getDashArrayForSize(size) 计算
+ *
+ * 示例（对象）：
+ * {
+ *   opacity: 0.6,
+ *   boldIndices: [4, 8],
+ *   dashArrayConfig: { pattern: [4,2,4] },
+ *   customBoldWidth: 2,
+ * }
+ */
+export type MajorBoldConfig = {
+    /** 默认网格透明度 (0-1) */
+    opacity: number;
+    /** 一个周期内需要加粗/实线的索引列表 */
+    boldIndices: number[];
+    /** 虚线样式的计算配置 */
+    dashArrayConfig: {
+        /** 固定的虚线模式（可选） */
+        pattern: number[];
+    };
+    /** mesh 网格的自定义加粗线宽（可选） */
+    customBoldWidth?: number;
+};
+export declare const defaultGridConfig: MajorBoldConfig;
+/**
+ * 校验并规范化 GridConfig。
+ * - 将 opacity 限制在 [0,1] 范围
+ * - boldIndices 过滤为正整数并去重
+ */
+export declare function validateGridConfig(cfg: MajorBoldConfig): MajorBoldConfig;
+/**
+ * 合并用户行为配置与默认值。
+ * - false → 关闭模式：opacity=1，bold=[]，关闭虚线
+ * - true → 默认模式：采用 defaultGridConfig
+ * - object → 自定义模式：校验后使用用户配置
+ */
+export declare function mergeMajorBoldConfig(input?: boolean | MajorBoldConfig): {
+    mode: 'disabled' | 'default' | 'custom';
+    config: MajorBoldConfig;
+};

package/es/view/overlay/gridConfig.js

@@ -0,0 +1,99 @@
+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 __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+export var defaultGridConfig = {
+    opacity: 1,
+    boldIndices: [5],
+    dashArrayConfig: {
+        pattern: [2, 1],
+    },
+    customBoldWidth: 2,
+};
+/**
+ * 校验并规范化 GridConfig。
+ * - 将 opacity 限制在 [0,1] 范围
+ * - boldIndices 过滤为正整数并去重
+ */
+export function validateGridConfig(cfg) {
+    var e_1, _a;
+    var _b, _c;
+    var opacity = Math.max(0, Math.min(1, (_b = cfg.opacity) !== null && _b !== void 0 ? _b : defaultGridConfig.opacity));
+    var boldIndicesSet = new Set();
+    var boldRaw = Array.isArray(cfg.boldIndices)
+        ? cfg.boldIndices
+        : defaultGridConfig.boldIndices;
+    try {
+        for (var boldRaw_1 = __values(boldRaw), boldRaw_1_1 = boldRaw_1.next(); !boldRaw_1_1.done; boldRaw_1_1 = boldRaw_1.next()) {
+            var n = boldRaw_1_1.value;
+            if (typeof n === 'number' && Number.isFinite(n) && n > 0) {
+                boldIndicesSet.add(Math.floor(n));
+            }
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (boldRaw_1_1 && !boldRaw_1_1.done && (_a = boldRaw_1.return)) _a.call(boldRaw_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    var boldIndices = Array.from(boldIndicesSet);
+    var pattern = Array.isArray((_c = cfg.dashArrayConfig) === null || _c === void 0 ? void 0 : _c.pattern)
+        ? cfg.dashArrayConfig.pattern
+        : defaultGridConfig.dashArrayConfig.pattern;
+    var dashArrayConfig = {
+        pattern: pattern,
+    };
+    var customBoldWidth = cfg.customBoldWidth;
+    return {
+        opacity: opacity,
+        boldIndices: boldIndices.length
+            ? boldIndices
+            : defaultGridConfig.boldIndices,
+        dashArrayConfig: dashArrayConfig,
+        customBoldWidth: customBoldWidth,
+    };
+}
+/**
+ * 合并用户行为配置与默认值。
+ * - false → 关闭模式：opacity=1，bold=[]，关闭虚线
+ * - true → 默认模式：采用 defaultGridConfig
+ * - object → 自定义模式：校验后使用用户配置
+ */
+export function mergeMajorBoldConfig(input) {
+    if (input === false) {
+        return {
+            mode: 'disabled',
+            config: {
+                opacity: 1,
+                boldIndices: [],
+                dashArrayConfig: {
+                    pattern: [],
+                },
+            },
+        };
+    }
+    if (input === true || input == null) {
+        return { mode: 'default', config: __assign({}, defaultGridConfig) };
+    }
+    return { mode: 'custom', config: validateGridConfig(input) };
+}

package/es/view/shape/Polygon.d.ts

@@ -7,12 +7,5 @@ export type IPolygonProps = {
     className?: string;
     radius?: number;
 };
-/**
- * 生成带圆角的多边形路径
- * @param points 多边形顶点坐标数组
- * @param radius 圆角半径
- * @returns SVG 路径字符串
- */
-export declare function createRoundedPolygonPath(points: any, radius: any): string;
 export declare function Polygon(props: IPolygonProps): h.JSX.Element;
 export default Polygon;

package/es/view/shape/Polygon.js

@@ -27,46 +27,7 @@ var __read = (this && this.__read) || function (o, n) {
 };
 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;
-}
+import { generateRoundedCorners } from '../../util/geometry';
 export function Polygon(props) {
     var _a = props.points, points = _a === void 0 ? [] : _a, className = props.className, radius = props.radius;
     var attrs = {
@@ -84,14 +45,22 @@ export function Polygon(props) {
         }
     });
     if (className) {
-        attrs.classNmae = "lf-basic-shape ".concat(className);
+        attrs.className = "lf-basic-shape ".concat(className);
     }
     else {
         attrs.className = 'lf-basic-shape';
     }
     if (radius) {
-        var path = createRoundedPolygonPath(points, radius);
-        attrs.d = path;
+        var pointList = points.map(function (point) { return ({ x: point[0], y: point[1] }); });
+        var rounded = generateRoundedCorners(pointList, radius, true);
+        var d = rounded.length
+            ? "M ".concat(rounded[0].x, " ").concat(rounded[0].y, " ").concat(rounded
+                .slice(1)
+                .map(function (p) { return "L ".concat(p.x, " ").concat(p.y); })
+                .join(' '), " Z")
+            : '';
+        attrs.d = d;
+        delete attrs.points;
         return _jsx("path", __assign({}, attrs));
     }
     else {

package/lib/LogicFlow.d.ts

@@ -899,6 +899,8 @@ export declare namespace LogicFlow {
     };
     type OutlineTheme = {
         hover?: CommonTheme;
+        widthOffset?: number;
+        heightOffset?: number;
     } & CommonTheme & EdgeAnimation;
     type ArrowTheme = {
         /**
@@ -933,6 +935,7 @@ export declare namespace LogicFlow {
         diamond: PolygonTheme;
         ellipse: EllipseTheme;
         polygon: PolygonTheme;
+        html: RectTheme;
         /**
          * 基础图形线相关主题
          */
@@ -956,6 +959,10 @@ export declare namespace LogicFlow {
         rotateControl: CommonTheme;
         resizeControl: CommonTheme;
         resizeOutline: CommonTheme;
+        multiSelect?: {
+            xPadding?: number;
+            yPadding?: number;
+        };
         /**
          * REMIND: 当开启了跳转边的起点和终点(adjustEdgeStartAndEnd:true)后
          * 边的两端会出现调整按钮
@@ -963,10 +970,12 @@ export declare namespace LogicFlow {
          */
         edgeAdjust: CircleTheme;
         outline: OutlineTheme;
+        edgeOutline: OutlineTheme;
         edgeAnimation: EdgeAnimation;
         background?: boolean | Partial<LFOptions.BackgroundConfig>;
         grid?: boolean | Partial<Grid.GridOptions>;
     }
+    type ThemeMode = 'default' | 'retro' | 'dark' | 'colorful';
 }
 export declare namespace LogicFlow {
     type FocusOnById = {

package/lib/constant/index.d.ts

@@ -1,6 +1,5 @@
 export declare const DEFAULT_VISIBLE_SPACE = 200;
 export declare const ELEMENT_MAX_Z_INDEX = 9999;
-export declare const DEFAULT_GRID_SIZE = 10;
 export declare enum ElementState {
     DEFAULT = 1,// 默认显示
     TEXT_EDIT = 2,// 此元素正在进行文本编辑
@@ -147,3 +146,4 @@ export declare enum TextMode {
     TEXT = "text",
     LABEL = "label"
 }
+export * from './theme';

package/lib/constant/index.js

@@ -1,9 +1,22 @@
 "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 __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.TextMode = exports.SegmentDirection = exports.OverlapMode = exports.EventType = exports.ModelType = exports.ElementType = exports.ElementState = exports.DEFAULT_GRID_SIZE = exports.ELEMENT_MAX_Z_INDEX = exports.DEFAULT_VISIBLE_SPACE = void 0;
+exports.TextMode = exports.SegmentDirection = exports.OverlapMode = exports.EventType = exports.ModelType = exports.ElementType = exports.ElementState = exports.ELEMENT_MAX_Z_INDEX = exports.DEFAULT_VISIBLE_SPACE = void 0;
 exports.DEFAULT_VISIBLE_SPACE = 200;
 exports.ELEMENT_MAX_Z_INDEX = 9999;
-exports.DEFAULT_GRID_SIZE = 10;
 var ElementState;
 (function (ElementState) {
     ElementState[ElementState["DEFAULT"] = 1] = "DEFAULT";
@@ -167,3 +180,4 @@ var TextMode;
     TextMode["TEXT"] = "text";
     TextMode["LABEL"] = "label";
 })(TextMode || (exports.TextMode = TextMode = {}));
+__exportStar(require("./theme"), exports);