@logicflow/core 2.2.0 → 2.2.1

package/es/view/node/HtmlNode.js

@@ -49,7 +49,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { jsx as _jsx } from "preact/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { createRef } from 'preact/compat';
 import BaseNode from './BaseNode';
 var HtmlNode = /** @class */ (function (_super) {
@@ -99,13 +99,11 @@ var HtmlNode = /** @class */ (function (_super) {
         return true;
     };
     HtmlNode.prototype.componentDidMount = function () {
-        // console.log('HtmlNode --->>> componentDidMount - 初始化内容')
         if (this.shouldUpdate() && this.rootEl) {
             this.setHtml(this.rootEl);
         }
     };
     HtmlNode.prototype.componentDidUpdate = function () {
-        // console.log('HtmlNode --->>> componentDidUpdate - 更新节点内容')
         // DONE: 将 componentDidMount 和 componentDidUpdate 区分开，如果写在一次，渲染 React 组件会重复初始化，消耗过多资源
         // 为了保证历史兼容性，先将默认 HTML 节点的 setHtml 和 confirmUpdate 保持一直，用户可通过自定义的方式重新定义
         if (this.shouldUpdate() && this.rootEl) {
@@ -121,7 +119,7 @@ var HtmlNode = /** @class */ (function (_super) {
         var x = model.x, y = model.y, height = model.height, width = model.width;
         var style = model.getNodeStyle();
         this.currentProperties = JSON.stringify(model.properties);
-        return (_jsx("foreignObject", __assign({}, style, { x: x - width / 2, y: y - height / 2, width: width, height: height, ref: this.ref })));
+        return (_jsxs("g", { children: [style.shadow && (_jsx("defs", { children: _jsx("filter", { id: "shadow", x: "-50%", y: "-50%", width: "200%", height: "200%", children: _jsx("feDropShadow", __assign({}, style.shadow)) }) })), _jsx("rect", __assign({ x: x - width / 2, y: y - height / 2, width: width, height: height, rx: style.radius, ry: style.radius }, style, { filter: "url(#shadow)" })), _jsx("foreignObject", __assign({}, style, { x: x - width / 2, y: y - height / 2, width: width, height: height, ref: this.ref }))] }));
     };
     return HtmlNode;
 }(BaseNode));

package/es/view/overlay/CanvasOverlay.js

@@ -97,6 +97,9 @@ var CanvasOverlay = /** @class */ (function (_super) {
                 if (selectElements.size > 0) {
                     graphModel.clearSelectElements();
                 }
+                // 如果是拖拽状态，不触发点击事件
+                if (_this.state.isDragging)
+                    return;
                 graphModel.eventCenter.emit(EventType.BLANK_CLICK, { e: ev });
             }
         };
@@ -158,8 +161,6 @@ var CanvasOverlay = /** @class */ (function (_super) {
                 else {
                     eventCenter.emit(EventType.BLANK_MOUSEDOWN, { e: ev });
                 }
-                // 为了处理画布移动的时候，编辑和菜单仍然存在的问题。
-                _this.clickHandler(ev);
             }
         };
         _this.pointerMoveHandler = function (ev) {
@@ -217,6 +218,8 @@ var CanvasOverlay = /** @class */ (function (_super) {
                 var editConfigModel = _this.props.graphModel.editConfigModel;
                 // 标记退出捏合，框选等交互可恢复
                 editConfigModel.updateEditConfig({ isPinching: false });
+                // 为了处理画布移动的时候，编辑和菜单仍然存在的问题。
+                _this.clickHandler(ev);
             }
         };
         var _a = props.graphModel, gridSize = _a.gridSize, eventCenter = _a.eventCenter;

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

@@ -1,4 +1,5 @@
 import { Component } from 'preact/compat';
+import { MajorBoldConfig } from './gridConfig';
 import { GraphModel } from '../../model';
 type IProps = {
     graphModel: GraphModel;
@@ -8,6 +9,10 @@ export declare class Grid extends Component<IProps> {
     readonly id: string;
     constructor(props: IProps);
     renderDot(): import("preact/compat").JSX.Element;
+    private getDashArrayForSize;
+    private getPeriod;
+    private getBoldStrokeWidth;
+    private renderMeshEdgeLines;
     renderMesh(): import("preact/compat").JSX.Element;
     render(): import("preact/compat").JSX.Element;
 }
@@ -39,8 +44,14 @@ export declare namespace Grid {
              */
             thickness?: number;
         };
+        /**
+         * 行为配置：支持 boolean 或高级对象
+         * - false: 禁用特殊样式，opacity=1，无加粗，无虚线
+         * - true: 启用默认样式，opacity=0.75，每第5个加粗/实线，虚线动态计算
+         * - object: 高级配置，详见 MajorBoldConfig
+         */
+        majorBold?: boolean | MajorBoldConfig;
     };
-    const defaultProps: GridOptions;
     function getGridOptions(options: number | boolean | GridOptions): GridOptions;
 }
 export {};

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;
@@ -51,7 +57,7 @@ var OutlineOverlay = /** @class */ (function (_super) {
                 var isHovered = element.isHovered, isSelected = element.isSelected, x = element.x, y = element.y, width = element.width, height = element.height;
                 if ((nodeSelectedOutline && isSelected) ||
                     (hoverOutline && isHovered)) {
-                    var style_1 = element.getOutlineStyle();
+                    var style_1 = element.getOutlineStyle() || {};
                     var attributes_1 = {};
                     Object.keys(style_1).forEach(function (key) {
                         if (key !== 'hover') {
@@ -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/LogicFlow.js

@@ -1246,7 +1246,6 @@ var LogicFlow = /** @class */ (function () {
         this.graphModel.destroy();
         this.tool.destroy();
         this.history.destroy();
-        (0, util_1.clearThemeMode)();
         for (var extensionName in this.extension) {
             var extensionInstance = this.extension[extensionName];
             if ('destroy' in extensionInstance) {

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';