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

package/es/util/theme.js

@@ -1,286 +1,9 @@
 import { cloneDeep, merge, assign } from 'lodash-es';
-export var defaultTheme = {
-    baseNode: {
-        fill: '#fff',
-        stroke: '#000',
-        strokeWidth: 2,
-    },
-    baseEdge: {
-        stroke: '#000',
-        strokeWidth: 2,
-    },
-    rect: {},
-    circle: {},
-    diamond: {},
-    ellipse: {},
-    polygon: {},
-    text: {
-        color: '#000',
-        stroke: 'none',
-        fontSize: 12,
-        background: {
-            fill: 'transparent',
-        },
-    },
-    anchor: {
-        stroke: '#000',
-        fill: '#fff',
-        r: 4,
-        hover: {
-            r: 10,
-            fill: '#949494',
-            fillOpacity: 0.5,
-            stroke: '#949494',
-        },
-    },
-    anchorLine: {
-        stroke: '#000',
-        strokeWidth: 2,
-        strokeDasharray: '3,2',
-    },
-    nodeText: {
-        color: '#000',
-        overflowMode: 'default',
-        fontSize: 12,
-        lineHeight: 1.2,
-    },
-    edgeText: {
-        textWidth: 100,
-        overflowMode: 'default',
-        fontSize: 12,
-        background: {
-            fill: '#fff',
-        },
-    },
-    line: {},
-    polyline: {},
-    bezier: {
-        fill: 'none',
-        adjustLine: {
-            stroke: '#949494',
-        },
-        adjustAnchor: {
-            r: 4,
-            fill: '#949494',
-            fillOpacity: 1,
-            stroke: '#949494',
-        },
-    },
-    arrow: {
-        offset: 10,
-        verticalLength: 5, // 箭头垂直于边的距离
-    },
-    snapline: {
-        stroke: '#949494',
-        strokeWidth: 1,
-    },
-    edgeAdjust: {
-        r: 4,
-        fill: '#fff',
-        stroke: '#949494',
-        strokeWidth: 2,
-    },
-    outline: {
-        fill: 'transparent',
-        stroke: '#949494',
-        strokeDasharray: '3,3',
-        hover: {
-            stroke: '#949494',
-        },
-    },
-    edgeAnimation: {
-        stroke: 'red',
-        strokeDasharray: '10,10',
-        strokeDashoffset: '100%',
-        animationName: 'lf_animate_dash',
-        animationDuration: '20s',
-        animationIterationCount: 'infinite',
-        animationTimingFunction: 'linear',
-        animationDirection: 'normal',
-    },
-    rotateControl: {
-        stroke: '#000',
-        fill: '#fff',
-        strokeWidth: 1.5,
-    },
-    resizeControl: {
-        width: 7,
-        height: 7,
-        fill: '#fff',
-        stroke: '#000',
-    },
-    resizeOutline: {
-        fill: 'none',
-        stroke: 'transparent', // 矩形默认不显示调整边框
-        strokeWidth: 1,
-        strokeDasharray: '3,3',
-    },
-};
-export var radiusMode = {
-    rect: { radius: 8 },
-    diamond: { radius: 8 },
-    polygon: { radius: 8 },
-    polyline: { radius: 8 },
-    arrow: {
-        strokeLinecap: 'round',
-        strokeLinejoin: 'round',
-        offset: 10,
-        verticalLength: 5, // 箭头垂直于边的距离
-    },
-    snapline: {
-        strokeLinecap: 'round',
-        strokeLinejoin: 'round',
-        stroke: '#949494',
-        strokeWidth: 1,
-    },
-    outline: {
-        radius: 8,
-        fill: 'transparent',
-        stroke: '#949494',
-        strokeDasharray: '3,3',
-        hover: {
-            stroke: '#949494',
-        },
-    },
-    resizeOutline: {
-        radius: 8,
-        fill: 'none',
-        stroke: 'transparent', // 矩形默认不显示调整边框
-        strokeWidth: 1,
-        strokeDasharray: '3,3',
-    },
-};
-export var darkMode = {
-    baseNode: {
-        fill: '#23272e',
-        stroke: '#fefeff',
-    },
-    baseEdge: {
-        stroke: '#fefeff',
-    },
-    rect: { radius: 8 },
-    diamond: { radius: 8 },
-    polygon: { radius: 8 },
-    polyline: { radius: 8 },
-    nodeText: {
-        color: '#fefeff',
-        overflowMode: 'default',
-        fontSize: 12,
-        lineHeight: 1.2,
-    },
-    arrow: {
-        strokeLinecap: 'round',
-        strokeLinejoin: 'round',
-        offset: 10,
-        verticalLength: 5, // 箭头垂直于边的距离
-    },
-    snapline: {
-        strokeLinecap: 'round',
-        strokeLinejoin: 'round',
-        stroke: '#949494',
-        strokeWidth: 1,
-    },
-    outline: {
-        radius: 8,
-        fill: 'transparent',
-        stroke: '#949494',
-        strokeDasharray: '3,3',
-        hover: {
-            stroke: '#949494',
-        },
-    },
-    resizeOutline: {
-        radius: 8,
-        fill: 'none',
-        stroke: 'transparent', // 矩形默认不显示调整边框
-        strokeWidth: 1,
-        strokeDasharray: '3,3',
-    },
-};
-export var colorfulMode = {
-    rect: { fill: '#72CBFF', stroke: '#3ABDF9', radius: 8 },
-    circle: { fill: '#FFE075', stroke: '#F9CE3A', radius: 8 },
-    ellipse: { fill: '#FFA8A8', stroke: '#FF6B66', radius: 8 },
-    text: { fill: '#72CBFF', radius: 8 },
-    diamond: { fill: '#96F7AF', stroke: '#40EF7E', radius: 8 },
-    polygon: { fill: '#E0A8FF', stroke: '#C271FF', radius: 8 },
-    polyline: { radius: 8 },
-    arrow: {
-        strokeLinecap: 'round',
-        strokeLinejoin: 'round',
-        offset: 10,
-        verticalLength: 5, // 箭头垂直于边的距离
-    },
-    snapline: {
-        strokeLinecap: 'round',
-        strokeLinejoin: 'round',
-        stroke: '#949494',
-        strokeWidth: 1,
-    },
-    outline: {
-        radius: 8,
-        fill: 'transparent',
-        stroke: '#949494',
-        strokeDasharray: '3,3',
-        hover: {
-            stroke: '#949494',
-        },
-    },
-    resizeOutline: {
-        radius: 8,
-        fill: 'none',
-        stroke: 'transparent', // 矩形默认不显示调整边框
-        strokeWidth: 1,
-        strokeDasharray: '3,3',
-    },
-};
-export var themeModeMap = {
-    colorful: colorfulMode,
-    dark: darkMode,
-    radius: radiusMode,
-    default: defaultTheme,
-};
-// 不同主题的背景色
-export var darkBackground = {
-    background: '#23272e',
-};
-export var colorfulBackground = {
-    background: '#fefeff',
-};
-export var defaultBackground = {
-    background: '#ffffff',
-};
-export var backgroundModeMap = {
-    colorful: colorfulBackground,
-    dark: darkBackground,
-    radius: defaultBackground,
-    default: defaultBackground,
-};
-// 不同主题的网格样式
-export var darkGrid = {
-    color: '#66676a',
-    thickness: 1,
-};
-export var colorfulGrid = {
-    color: '#dadada',
-    thickness: 1,
-};
-export var defaultGrid = {
-    color: '#acacac',
-    thickness: 1,
-};
-export var gridModeMap = {
-    colorful: colorfulGrid,
-    dark: darkGrid,
-    radius: defaultGrid,
-    default: defaultGrid,
-};
+import { themeModeMap, backgroundModeMap, defaultBackground, gridModeMap, defaultGrid, } from '../constant/theme';
 /* 主题（全局样式）相关工具方法 */
 export var setupTheme = function (customTheme, themeMode) {
-    var theme = cloneDeep(defaultTheme);
-    if (themeMode) {
-        theme = merge(theme, themeModeMap[themeMode]);
-    }
+    var theme = cloneDeep(themeModeMap[themeMode || 'default']) ||
+        cloneDeep(themeModeMap.default);
     if (customTheme) {
         /**
          * 为了不让默认样式被覆盖，使用 merge 方法
@@ -331,7 +54,7 @@ export var clearThemeMode = function () {
     var resetTheme = {
         colorful: {},
         dark: {},
-        radius: {},
+        retro: {},
         default: {},
     };
     assign(themeModeMap, resetTheme);

package/es/view/Control.d.ts

@@ -50,6 +50,11 @@ export declare class ResizeControl extends Component<IResizeControlProps, IResiz
     onDragStart: () => void;
     onDragging: ({ deltaX, deltaY }: IDragParams) => void;
     onDragEnd: () => void;
+    onPointerDown: (e: PointerEvent) => void;
+    getViewPosition(direction: any, x: any, y: any): {
+        x: any;
+        y: any;
+    };
     render(): h.JSX.Element;
 }
 interface IResizeControlGroupProps {

package/es/view/Control.js

@@ -243,61 +243,6 @@ var ResizeControl = /** @class */ (function (_super) {
                     _this.dragHandler.cancelDrag();
                 },
             });
-            // 1. 计算当前 Control 的一些信息，
-            // const {
-            //   r, // circle
-            //   rx, // ellipse/diamond
-            //   ry,
-            //   width, // rect/html
-            //   height,
-            //   PCTResizeInfo,
-            //
-            //   minWidth,
-            //   minHeight,
-            //   maxWidth,
-            //   maxHeight,
-            // } = this.nodeModel
-            // const isFreezeWidth = minWidth === maxWidth
-            // const isFreezeHeight = minHeight === maxHeight
-            //
-            // const resizeInfo = {
-            //   width: r || rx || width,
-            //   height: r || ry || height,
-            //   deltaX,
-            //   deltaY,
-            //   PCTResizeInfo,
-            // }
-            //
-            // const pct = r || (rx && ry) ? 1 / 2 : 1
-            // const nextSize = this.recalcResizeInfo(
-            //   this.index,
-            //   resizeInfo,
-            //   pct,
-            //   isFreezeWidth,
-            //   isFreezeHeight,
-            // )
-            //
-            // // 限制放大缩小的最大最小范围
-            // if (
-            //   nextSize.width < minWidth ||
-            //   nextSize.width > maxWidth ||
-            //   nextSize.height < minHeight ||
-            //   nextSize.height > maxHeight
-            // ) {
-            //   this.dragHandler.cancelDrag()
-            //   return
-            // }
-            // // 如果限制了宽高不变，对应的 x/y 不产生位移
-            // nextSize.deltaX = isFreezeWidth ? 0 : nextSize.deltaX
-            // nextSize.deltaY = isFreezeWidth ? 0 : nextSize.deltaY
-            //
-            // const preNodeData = this.nodeModel.getData()
-            // const curNodeData = this.nodeModel.resize(nextSize)
-            //
-            // // 更新边
-            // this.updateEdgePointByAnchors()
-            // // 触发 resize 事件
-            // this.triggerResizeEvent(preNodeData, curNodeData, deltaX, deltaY, this.index, this.nodeModel)
         };
         _this.onDragStart = function () {
             _this.graphModel.selectNodeById(_this.nodeModel.id);
@@ -325,6 +270,10 @@ var ResizeControl = /** @class */ (function (_super) {
             // 此时拿到的 anchors 是最新的
             _this.updateEdgePointByAnchors();
         };
+        _this.onPointerDown = function (e) {
+            e.stopPropagation();
+            _this.dragHandler.handleMouseDown(e);
+        };
         var index = props.index, model = props.model, graphModel = props.graphModel;
         _this.index = index;
         _this.nodeModel = model;
@@ -343,10 +292,46 @@ var ResizeControl = /** @class */ (function (_super) {
         document.removeEventListener('keydown', this.handleKeyDown);
         document.removeEventListener('keyup', this.handleKeyUp);
     };
+    ResizeControl.prototype.getViewPosition = function (direction, x, y) {
+        var _a = this.props.model.getResizeControlStyle(), _b = _a.width, width = _b === void 0 ? 8 : _b, _c = _a.height, height = _c === void 0 ? 8 : _c;
+        switch (direction) {
+            case 'nw':
+                return {
+                    x: x - width / 2,
+                    y: y - height / 2,
+                };
+            case 'ne': {
+                return {
+                    x: x + width / 2,
+                    y: y - height / 2,
+                };
+            }
+            case 'se': {
+                return {
+                    x: x + width / 2,
+                    y: y + height / 2,
+                };
+            }
+            case 'sw': {
+                return {
+                    x: x - width / 2,
+                    y: y + height / 2,
+                };
+            }
+            default: {
+                return {
+                    x: x,
+                    y: y,
+                };
+            }
+        }
+    };
     ResizeControl.prototype.render = function () {
         var _a = this.props, x = _a.x, y = _a.y, direction = _a.direction, model = _a.model;
         var _b = model.getResizeControlStyle(), width = _b.width, height = _b.height, restStyle = __rest(_b, ["width", "height"]);
-        return (_jsxs("g", { className: "lf-resize-control lf-resize-control-".concat(direction), children: [_jsx(Rect, __assign({ className: "lf-resize-control-content", x: x, y: y, width: width !== null && width !== void 0 ? width : 7, height: height !== null && height !== void 0 ? height : 7 }, restStyle)), _jsx(Rect, { className: "lf-resize-control-content", x: x, y: y, width: 25, height: 25, fill: "transparent", stroke: "transparent", onPointerDown: this.dragHandler.handleMouseDown })] }));
+        // 为了让调整点在视觉上在调整外框的中间，因此在渲染时转换一下
+        var _c = this.getViewPosition(direction, x, y), viewX = _c.x, viewY = _c.y;
+        return (_jsxs("g", { className: "lf-resize-control lf-resize-control-".concat(direction), children: [_jsx(Rect, __assign({ className: "lf-resize-control-content", x: viewX, y: viewY, width: width !== null && width !== void 0 ? width : 7, height: height !== null && height !== void 0 ? height : 7 }, restStyle)), _jsx(Rect, { className: "lf-resize-control-content", x: viewX, y: viewY, width: width ? width + 5 : 25, height: width ? width + 5 : 25, fill: "transparent", stroke: "transparent", onPointerDown: this.onPointerDown })] }));
     };
     return ResizeControl;
 }(Component));
@@ -391,7 +376,9 @@ var ResizeControlGroup = /** @class */ (function (_super) {
         var model = this.props.model;
         var x = model.x, y = model.y, width = model.width, height = model.height;
         var style = model.getResizeOutlineStyle();
-        return _jsx(Rect, __assign({}, style, { x: x, y: y, width: width, height: height }));
+        return (_jsx(Rect, __assign({}, style, { "pointer-events": "none", x: x, y: y, 
+            // TODO：宽高padding后续改成配置化的
+            width: width + 10, height: height + 10 })));
     };
     ResizeControlGroup.prototype.render = function () {
         return (_jsxs("g", { className: "lf-resize-control-group", children: [this.getResizeOutline(), this.getResizeControl()] }));

package/es/view/edge/PolylineEdge.js

@@ -45,6 +45,7 @@ import BaseEdge from './BaseEdge';
 import { Polyline, Path } from '../shape';
 import { EventType, SegmentDirection } from '../../constant';
 import { StepDrag, points2PointsList } from '../../util';
+import { generateRoundedCorners } from '../../util/geometry';
 import { getVerticalPointOfLine } from '../../algorithm';
 var PolylineEdge = /** @class */ (function (_super) {
     __extends(PolylineEdge, _super);
@@ -125,12 +126,22 @@ var PolylineEdge = /** @class */ (function (_super) {
      * @example https://docs.logic-flow.cn/docs/#/zh/guide/basic/edge?id=%e5%9f%ba%e4%ba%8e-react-%e7%bb%84%e4%bb%b6%e8%87%aa%e5%ae%9a%e4%b9%89%e8%be%b9
      */
     PolylineEdge.prototype.getEdge = function () {
+        var _a, _b;
         var model = this.props.model;
-        var points = model.points, isAnimation = model.isAnimation, arrowConfig = model.arrowConfig;
+        var points = model.points, isAnimation = model.isAnimation, arrowConfig = model.arrowConfig, properties = model.properties;
         var style = model.getEdgeStyle();
         var animationStyle = model.getEdgeAnimationStyle();
         var strokeDasharray = animationStyle.strokeDasharray, stroke = animationStyle.stroke, strokeDashoffset = animationStyle.strokeDashoffset, animationName = animationStyle.animationName, animationDuration = animationStyle.animationDuration, animationIterationCount = animationStyle.animationIterationCount, animationTimingFunction = animationStyle.animationTimingFunction, animationDirection = animationStyle.animationDirection;
-        return (_jsx(Polyline, __assign({ points: points }, style, arrowConfig, (isAnimation
+        // 应用通用圆角：当存在样式半径时，为折线拐点生成圆角
+        var radius = ((_b = (_a = properties === null || properties === void 0 ? void 0 : properties.radius) !== null && _a !== void 0 ? _a : style === null || style === void 0 ? void 0 : style.radius) !== null && _b !== void 0 ? _b : 0);
+        var roundedPointsStr = (function () {
+            if (!radius || radius <= 0)
+                return points;
+            var list = points2PointsList(points);
+            var rounded = generateRoundedCorners(list, radius, false);
+            return rounded.map(function (p) { return "".concat(p.x, ",").concat(p.y); }).join(' ');
+        })();
+        return (_jsx(Polyline, __assign({ points: roundedPointsStr }, style, arrowConfig, (isAnimation
             ? {
                 strokeDasharray: strokeDasharray,
                 stroke: stroke,

package/es/view/node/BaseNode.d.ts

@@ -20,6 +20,7 @@ export declare abstract class BaseNode<P extends IProps = IProps> extends Compon
     startTime?: number;
     modelDisposer: IReactionDisposer;
     longPressTimer?: number;
+    mouseDownPosition?: LogicFlow.Position;
     constructor(props: IProps);
     componentWillUnmount(): void;
     componentDidMount(): void;

package/es/view/node/BaseNode.js

@@ -86,13 +86,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);
@@ -110,14 +113,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) {
@@ -184,7 +187,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();
@@ -239,6 +242,15 @@ var BaseNode = /** @class */ (function (_super) {
             else {
                 graphModel.eventCenter.emit(EventType.ELEMENT_CLICK, eventOptions);
                 graphModel.eventCenter.emit(EventType.NODE_CLICK, eventOptions);
+                // 复制粘贴后会出现点击节点时，节点会失去焦点的问题，这里手动让节点获焦以解决这个问题
+                var el_1 = e.currentTarget;
+                var rAF = typeof window !== 'undefined' &&
+                    typeof window.requestAnimationFrame === 'function'
+                    ? window.requestAnimationFrame.bind(window)
+                    : function (fn) { return setTimeout(fn, 0); };
+                rAF(function () {
+                    el_1.focus();
+                });
             }
         };
         _this.handleContextMenu = function (ev) {
@@ -267,6 +279,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) {
@@ -454,7 +467,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 = (_jsxs("g", { className: "lf-node-content", children: [_jsxs("g", { transform: transform, children: [this.getShape(), this.getText(), allowRotate && this.getRotateControl(), allowResize && this.getResizeControl()] }), !hideAnchors && this.getAnchors()] }));
+        var nodeShapeInner = (_jsxs("g", { className: "lf-node-content", children: [_jsxs("g", { transform: transform, children: [this.getShape(), this.getText(), allowResize && this.getResizeControl(), allowRotate && this.getRotateControl()] }), !hideAnchors && this.getAnchors()] }));
         var nodeShape;
         if (!isHitable) {
             nodeShape = (_jsx("g", __assign({ className: "".concat(this.getStateClassName(), " ").concat(className) }, restAttributes, { children: nodeShapeInner })));

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 {};