@logicflow/core 2.2.0 → 2.2.2

package/lib/view/node/BaseNode.js

@@ -90,13 +90,16 @@ var BaseNode = /** @class */ (function (_super) {
             var event = _a.event;
             var _f = _this.props, model = _f.model, graphModel = _f.graphModel;
             var _g = graphModel.editConfigModel, stopMoveGraph = _g.stopMoveGraph, autoExpand = _g.autoExpand, snapGrid = _g.snapGrid, transformModel = graphModel.transformModel, selectNodes = graphModel.selectNodes, width = graphModel.width, height = graphModel.height, gridSize = graphModel.gridSize;
-            model.isDragging = true;
             var _h = event, clientX = _h.clientX, clientY = _h.clientY;
-            var _j = graphModel.getPointByClient({
+            var _j = _this.mouseDownPosition, mouseDownX = _j.x, mouseDownY = _j.y;
+            if (clientX - mouseDownX > gridSize || clientY - mouseDownY > gridSize) {
+                model.isDragging = true;
+            }
+            var _k = graphModel.getPointByClient({
                 x: clientX,
                 y: clientY,
-            }).canvasOverlayPosition, x = _j.x, y = _j.y;
-            var _k = __read(transformModel.CanvasPointToHtmlPoint([x, y]), 2), x1 = _k[0], y1 = _k[1];
+            }).canvasOverlayPosition, x = _k.x, y = _k.y;
+            var _l = __read(transformModel.CanvasPointToHtmlPoint([x, y]), 2), x1 = _l[0], y1 = _l[1];
             // 1. 考虑画布被缩放
             // 2. 考虑鼠标位置不再节点中心
             x = x + ((_c = (_b = _this.moveOffset) === null || _b === void 0 ? void 0 : _b.dx) !== null && _c !== void 0 ? _c : 0);
@@ -114,14 +117,14 @@ var BaseNode = /** @class */ (function (_super) {
                 return;
             }
             // 取节点左上角和右下角，计算节点移动是否超出范围
-            var _l = __read(transformModel.CanvasPointToHtmlPoint([
+            var _m = __read(transformModel.CanvasPointToHtmlPoint([
                 x - model.width / 2,
                 y - model.height / 2,
-            ]), 2), leftTopX = _l[0], leftTopY = _l[1];
-            var _m = __read(transformModel.CanvasPointToHtmlPoint([
+            ]), 2), leftTopX = _m[0], leftTopY = _m[1];
+            var _o = __read(transformModel.CanvasPointToHtmlPoint([
                 x + model.width / 2,
                 y + model.height / 2,
-            ]), 2), rightBottomX = _m[0], rightBottomY = _m[1];
+            ]), 2), rightBottomX = _o[0], rightBottomY = _o[1];
             var size = Math.max(gridSize, 20);
             var nearBoundary = [];
             if (leftTopX < 0) {
@@ -188,7 +191,7 @@ var BaseNode = /** @class */ (function (_super) {
             var _a = _this.props, model = _a.model, graphModel = _a.graphModel;
             // 这里会有一种极端情况：当网格大小是1或者关闭网格吸附时，用触摸板点击节点会触发拖拽事件导致节点无法选中
             // 当触摸板点击节点时,为了防止误触发拖拽导致节点无法选中，允许在非拖拽状态且时间间隔小于100ms时触发点击事件
-            if (!isDragging && timeInterval > 100)
+            if (!isDragging && timeInterval > 300)
                 return;
             if (!isDragging) {
                 _this.onDragEnd();
@@ -243,6 +246,14 @@ var BaseNode = /** @class */ (function (_super) {
             else {
                 graphModel.eventCenter.emit(constant_1.EventType.ELEMENT_CLICK, eventOptions);
                 graphModel.eventCenter.emit(constant_1.EventType.NODE_CLICK, eventOptions);
+                // 复制粘贴后会出现点击节点时，节点会失去焦点的问题，这里手动让节点获焦以解决这个问题
+                var el_1 = e.currentTarget;
+                var rAF = !(0, lodash_es_1.isNil)(window) && (0, lodash_es_1.isFunction)(window.requestAnimationFrame)
+                    ? window.requestAnimationFrame.bind(window)
+                    : function (fn) { return setTimeout(fn, 0); };
+                rAF(function () {
+                    el_1.focus();
+                });
             }
         };
         _this.handleContextMenu = function (ev) {
@@ -271,6 +282,7 @@ var BaseNode = /** @class */ (function (_super) {
         };
         _this.handleMouseDown = function (ev) {
             var _a = _this.props, model = _a.model, graphModel = _a.graphModel;
+            _this.mouseDownPosition = { x: ev.clientX, y: ev.clientY };
             _this.startTime = new Date().getTime();
             var editConfigModel = graphModel.editConfigModel;
             if (editConfigModel.adjustNodePosition && model.draggable) {
@@ -458,7 +470,7 @@ var BaseNode = /** @class */ (function (_super) {
         var _b = graphModel.editConfigModel, hideAnchors = _b.hideAnchors, adjustNodePosition = _b.adjustNodePosition, allowRotate = _b.allowRotate, allowResize = _b.allowResize, gridSize = graphModel.gridSize, SCALE_X = graphModel.transformModel.SCALE_X;
         var isHitable = model.isHitable, draggable = model.draggable, transform = model.transform;
         var _c = model.getOuterGAttributes(), _d = _c.className, className = _d === void 0 ? '' : _d, restAttributes = __rest(_c, ["className"]);
-        var nodeShapeInner = ((0, jsx_runtime_1.jsxs)("g", { className: "lf-node-content", children: [(0, jsx_runtime_1.jsxs)("g", { transform: transform, children: [this.getShape(), this.getText(), allowRotate && this.getRotateControl(), allowResize && this.getResizeControl()] }), !hideAnchors && this.getAnchors()] }));
+        var nodeShapeInner = ((0, jsx_runtime_1.jsxs)("g", { className: "lf-node-content", children: [(0, jsx_runtime_1.jsxs)("g", { transform: transform, children: [this.getShape(), this.getText(), allowResize && this.getResizeControl(), allowRotate && this.getRotateControl()] }), !hideAnchors && this.getAnchors()] }));
         var nodeShape;
         if (!isHitable) {
             nodeShape = ((0, jsx_runtime_1.jsx)("g", __assign({ className: "".concat(this.getStateClassName(), " ").concat(className) }, restAttributes, { children: nodeShapeInner })));

package/lib/view/node/HtmlNode.js

@@ -105,13 +105,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) {
@@ -127,7 +125,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 ((0, jsx_runtime_1.jsx)("foreignObject", __assign({}, style, { x: x - width / 2, y: y - height / 2, width: width, height: height, ref: this.ref })));
+        return ((0, jsx_runtime_1.jsxs)("g", { children: [style.shadow && ((0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("filter", { id: "shadow", x: "-50%", y: "-50%", width: "200%", height: "200%", children: (0, jsx_runtime_1.jsx)("feDropShadow", __assign({}, style.shadow)) }) })), (0, jsx_runtime_1.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)" })), (0, jsx_runtime_1.jsx)("foreignObject", __assign({}, style, { x: x - width / 2, y: y - height / 2, width: width, height: height, ref: this.ref }))] }));
     };
     return HtmlNode;
 }(BaseNode_1.default));

package/lib/view/overlay/CanvasOverlay.js

@@ -100,6 +100,9 @@ var CanvasOverlay = /** @class */ (function (_super) {
                 if (selectElements.size > 0) {
                     graphModel.clearSelectElements();
                 }
+                // 如果是拖拽状态，不触发点击事件
+                if (_this.state.isDragging)
+                    return;
                 graphModel.eventCenter.emit(constant_1.EventType.BLANK_CLICK, { e: ev });
             }
         };
@@ -161,8 +164,6 @@ var CanvasOverlay = /** @class */ (function (_super) {
                 else {
                     eventCenter.emit(constant_1.EventType.BLANK_MOUSEDOWN, { e: ev });
                 }
-                // 为了处理画布移动的时候，编辑和菜单仍然存在的问题。
-                _this.clickHandler(ev);
             }
         };
         _this.pointerMoveHandler = function (ev) {
@@ -220,6 +221,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/lib/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/lib/view/overlay/Grid.js

@@ -20,12 +20,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));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Grid = void 0;
 var jsx_runtime_1 = require("preact/jsx-runtime");
 var compat_1 = require("preact/compat");
 var lodash_es_1 = require("lodash-es");
 var __1 = require("../..");
+var gridConfig_1 = require("./gridConfig");
 var util_1 = require("../../util");
 var constant_1 = require("../../constant");
 var Grid = /** @class */ (function (_super) {
@@ -45,21 +71,64 @@ var Grid = /** @class */ (function (_super) {
         var opacity = visible ? 1 : 0;
         return ((0, jsx_runtime_1.jsxs)("g", { fill: color, opacity: opacity, children: [(0, jsx_runtime_1.jsx)("circle", { cx: 0, cy: 0, r: radius / 2 }), (0, jsx_runtime_1.jsx)("circle", { cx: 0, cy: size, r: radius / 2 }), (0, jsx_runtime_1.jsx)("circle", { cx: size, cy: 0, r: radius / 2 }), (0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsx)("g", { opacity: opacity, fill: "transparent", children: segments.map(function (seg) { return ((0, jsx_runtime_1.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 = (0, gridConfig_1.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 ((0, jsx_runtime_1.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 && !(0, lodash_es_1.isNil)(majorBold);
+        var advanced = (0, gridConfig_1.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,
@@ -70,10 +139,12 @@ var Grid = /** @class */ (function (_super) {
             TRANSLATE_Y,
         ].join(',');
         var transform = "matrix(".concat(matrixString, ")");
-        // const transitionStyle = {
-        //   transition: 'all 0.1s ease',
-        // };
-        return ((0, jsx_runtime_1.jsx)("div", { className: "lf-grid", children: (0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.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()] }) }), (0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsx)("div", { className: "lf-grid", children: (0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", children: [(0, jsx_runtime_1.jsxs)("defs", { children: [(0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.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: (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("circle", { cx: 0, cy: 0, r: (radius * 1.5) / 2 }), (0, jsx_runtime_1.jsx)("circle", { cx: size * this.getPeriod(advanced), cy: 0, r: (radius * 1.5) / 2 }), (0, jsx_runtime_1.jsx)("circle", { cx: 0, cy: size * this.getPeriod(advanced), r: (radius * 1.5) / 2 }), (0, jsx_runtime_1.jsx)("circle", { cx: size * this.getPeriod(advanced), cy: size * this.getPeriod(advanced), r: (radius * 1.5) / 2 })] }) })) : null, type === 'mesh' && advanced.boldIndices.length ? ((0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.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" }), (0, jsx_runtime_1.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] }), (0, jsx_runtime_1.jsx)("rect", { width: "100%", height: "100%", fill: "url(#".concat(this.id, ")") }), type === 'dot' && showMajorBold && advanced.boldIndices.length ? ((0, jsx_runtime_1.jsx)("rect", { width: "100%", height: "100%", fill: "url(#".concat(this.id, "-dot-major)") })) : null, type === 'mesh' && showMajorBold && advanced.boldIndices.length ? ((0, jsx_runtime_1.jsx)("rect", { width: "100%", height: "100%", fill: "url(#".concat(this.id, "-major)") })) : null] }) }));
     };
     Grid = __decorate([
         __1.observer
@@ -82,17 +153,8 @@ var Grid = /** @class */ (function (_super) {
 }(compat_1.Component));
 exports.Grid = Grid;
 (function (Grid) {
-    Grid.defaultProps = {
-        size: constant_1.DEFAULT_GRID_SIZE,
-        visible: true,
-        type: 'dot',
-        config: {
-            color: '#ababab',
-            thickness: 1,
-        },
-    };
     function getGridOptions(options) {
-        var defaultOptions = (0, lodash_es_1.cloneDeep)(Grid.defaultProps);
+        var defaultOptions = (0, lodash_es_1.cloneDeep)(constant_1.defaultGrid);
         if (typeof options === 'number') {
             return (0, lodash_es_1.assign)(defaultOptions, { size: options });
         }

package/lib/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/lib/view/overlay/OutlineOverlay.js

@@ -44,6 +44,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 = (0, util_1.getBBoxOfPoints)(pointsList, widthOffset, heightOffset), x = _d.x, y = _d.y, width = _d.width, height = _d.height;
+        return ((0, jsx_runtime_1.jsx)(shape_1.Rect, __assign({ className: className, x: x, y: y, width: width, height: height }, style)));
+    };
     // 节点outline
     OutlineOverlay.prototype.getNodesOutline = function () {
         var graphModel = this.props.graphModel;
@@ -54,7 +60,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') {
@@ -65,11 +71,8 @@ var OutlineOverlay = /** @class */ (function (_super) {
                         var hoverStyle = style_1.hover;
                         attributes_1 = __assign(__assign({}, attributes_1), hoverStyle);
                     }
-                    nodeOutline.push((0, jsx_runtime_1.jsx)(shape_1.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((0, jsx_runtime_1.jsx)(shape_1.Rect, __assign({ transform: element.transform, className: "lf-outline-node", x: x, y: y, width: width + 4,
+                        height: height + 4 }, attributes_1)));
                 }
             }
         });
@@ -99,30 +102,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 ((0, jsx_runtime_1.jsx)(shape_1.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 = (0, util_1.points2PointsList)(points);
-        var bbox = (0, util_1.getBBoxOfPoints)(pointsList, 8);
-        var x = bbox.x, y = bbox.y, width = bbox.width, height = bbox.height;
         var style = polyline.getOutlineStyle();
-        return ((0, jsx_runtime_1.jsx)(shape_1.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 = (0, util_1.getBezierPoints)(path);
-        var bbox = (0, util_1.getBBoxOfPoints)(pointsList, 8);
-        var x = bbox.x, y = bbox.y, width = bbox.width, height = bbox.height;
         var style = bezier.getOutlineStyle();
-        return ((0, jsx_runtime_1.jsx)(shape_1.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 ((0, jsx_runtime_1.jsxs)("g", { className: "lf-outline", children: [this.getNodesOutline(), this.getEdgeOutline()] }));

package/lib/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/lib/view/overlay/gridConfig.js

@@ -0,0 +1,104 @@
+"use strict";
+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.");
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mergeMajorBoldConfig = exports.validateGridConfig = exports.defaultGridConfig = void 0;
+exports.defaultGridConfig = {
+    opacity: 1,
+    boldIndices: [5],
+    dashArrayConfig: {
+        pattern: [2, 1],
+    },
+    customBoldWidth: 2,
+};
+/**
+ * 校验并规范化 GridConfig。
+ * - 将 opacity 限制在 [0,1] 范围
+ * - boldIndices 过滤为正整数并去重
+ */
+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 : exports.defaultGridConfig.opacity));
+    var boldIndicesSet = new Set();
+    var boldRaw = Array.isArray(cfg.boldIndices)
+        ? cfg.boldIndices
+        : exports.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
+        : exports.defaultGridConfig.dashArrayConfig.pattern;
+    var dashArrayConfig = {
+        pattern: pattern,
+    };
+    var customBoldWidth = cfg.customBoldWidth;
+    return {
+        opacity: opacity,
+        boldIndices: boldIndices.length
+            ? boldIndices
+            : exports.defaultGridConfig.boldIndices,
+        dashArrayConfig: dashArrayConfig,
+        customBoldWidth: customBoldWidth,
+    };
+}
+exports.validateGridConfig = validateGridConfig;
+/**
+ * 合并用户行为配置与默认值。
+ * - false → 关闭模式：opacity=1，bold=[]，关闭虚线
+ * - true → 默认模式：采用 defaultGridConfig
+ * - object → 自定义模式：校验后使用用户配置
+ */
+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({}, exports.defaultGridConfig) };
+    }
+    return { mode: 'custom', config: validateGridConfig(input) };
+}
+exports.mergeMajorBoldConfig = mergeMajorBoldConfig;

package/lib/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/lib/view/shape/Polygon.js

@@ -27,50 +27,10 @@ var __read = (this && this.__read) || function (o, n) {
     return ar;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Polygon = exports.createRoundedPolygonPath = void 0;
+exports.Polygon = void 0;
 var jsx_runtime_1 = require("preact/jsx-runtime");
 var lodash_es_1 = require("lodash-es");
-/**
- * 生成带圆角的多边形路径
- * @param points 多边形顶点坐标数组
- * @param radius 圆角半径
- * @returns SVG 路径字符串
- */
-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;
-}
-exports.createRoundedPolygonPath = createRoundedPolygonPath;
+var geometry_1 = require("../../util/geometry");
 function Polygon(props) {
     var _a = props.points, points = _a === void 0 ? [] : _a, className = props.className, radius = props.radius;
     var attrs = {
@@ -88,14 +48,22 @@ 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 = (0, geometry_1.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 (0, jsx_runtime_1.jsx)("path", __assign({}, attrs));
     }
     else {