@logicflow/core 2.2.0 → 2.2.1

package/lib/util/theme.js

@@ -1,289 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.updateTheme = exports.clearThemeMode = exports.removeThemeMode = exports.addThemeMode = exports.setupTheme = exports.gridModeMap = exports.defaultGrid = exports.colorfulGrid = exports.darkGrid = exports.backgroundModeMap = exports.defaultBackground = exports.colorfulBackground = exports.darkBackground = exports.themeModeMap = exports.colorfulMode = exports.darkMode = exports.radiusMode = exports.defaultTheme = void 0;
+exports.updateTheme = exports.clearThemeMode = exports.removeThemeMode = exports.addThemeMode = exports.setupTheme = void 0;
 var lodash_es_1 = require("lodash-es");
-exports.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',
-    },
-};
-exports.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',
-    },
-};
-exports.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',
-    },
-};
-exports.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',
-    },
-};
-exports.themeModeMap = {
-    colorful: exports.colorfulMode,
-    dark: exports.darkMode,
-    radius: exports.radiusMode,
-    default: exports.defaultTheme,
-};
-// 不同主题的背景色
-exports.darkBackground = {
-    background: '#23272e',
-};
-exports.colorfulBackground = {
-    background: '#fefeff',
-};
-exports.defaultBackground = {
-    background: '#ffffff',
-};
-exports.backgroundModeMap = {
-    colorful: exports.colorfulBackground,
-    dark: exports.darkBackground,
-    radius: exports.defaultBackground,
-    default: exports.defaultBackground,
-};
-// 不同主题的网格样式
-exports.darkGrid = {
-    color: '#66676a',
-    thickness: 1,
-};
-exports.colorfulGrid = {
-    color: '#dadada',
-    thickness: 1,
-};
-exports.defaultGrid = {
-    color: '#acacac',
-    thickness: 1,
-};
-exports.gridModeMap = {
-    colorful: exports.colorfulGrid,
-    dark: exports.darkGrid,
-    radius: exports.defaultGrid,
-    default: exports.defaultGrid,
-};
+var theme_1 = require("../constant/theme");
 /* 主题（全局样式）相关工具方法 */
 var setupTheme = function (customTheme, themeMode) {
-    var theme = (0, lodash_es_1.cloneDeep)(exports.defaultTheme);
-    if (themeMode) {
-        theme = (0, lodash_es_1.merge)(theme, exports.themeModeMap[themeMode]);
-    }
+    var theme = (0, lodash_es_1.cloneDeep)(theme_1.themeModeMap[themeMode || 'default']) ||
+        (0, lodash_es_1.cloneDeep)(theme_1.themeModeMap.default);
     if (customTheme) {
         /**
          * 为了不让默认样式被覆盖，使用 merge 方法
@@ -318,31 +41,31 @@ var setupTheme = function (customTheme, themeMode) {
 };
 exports.setupTheme = setupTheme;
 var addThemeMode = function (themeMode, style) {
-    if (exports.themeModeMap[themeMode]) {
+    if (theme_1.themeModeMap[themeMode]) {
         console.warn("theme mode ".concat(themeMode, " already exists"));
         return;
     }
-    exports.themeModeMap[themeMode] = style;
-    exports.backgroundModeMap[themeMode] = style.background || exports.defaultBackground;
-    exports.gridModeMap[themeMode] = style.grid || exports.defaultGrid;
+    theme_1.themeModeMap[themeMode] = style;
+    theme_1.backgroundModeMap[themeMode] = style.background || theme_1.defaultBackground;
+    theme_1.gridModeMap[themeMode] = style.grid || theme_1.defaultGrid;
 };
 exports.addThemeMode = addThemeMode;
 var removeThemeMode = function (themeMode) {
-    delete exports.themeModeMap[themeMode];
-    delete exports.backgroundModeMap[themeMode];
-    delete exports.gridModeMap[themeMode];
+    delete theme_1.themeModeMap[themeMode];
+    delete theme_1.backgroundModeMap[themeMode];
+    delete theme_1.gridModeMap[themeMode];
 };
 exports.removeThemeMode = removeThemeMode;
 var clearThemeMode = function () {
     var resetTheme = {
         colorful: {},
         dark: {},
-        radius: {},
+        retro: {},
         default: {},
     };
-    (0, lodash_es_1.assign)(exports.themeModeMap, resetTheme);
-    (0, lodash_es_1.assign)(exports.backgroundModeMap, resetTheme);
-    (0, lodash_es_1.assign)(exports.gridModeMap, resetTheme);
+    (0, lodash_es_1.assign)(theme_1.themeModeMap, resetTheme);
+    (0, lodash_es_1.assign)(theme_1.backgroundModeMap, resetTheme);
+    (0, lodash_es_1.assign)(theme_1.gridModeMap, resetTheme);
 };
 exports.clearThemeMode = clearThemeMode;
 /* 更新 theme 方法 */

package/lib/view/Anchor.d.ts

@@ -40,6 +40,7 @@ declare class Anchor extends Component<IProps, IState> {
     };
     checkEnd: (event: PointerEvent | null | undefined) => import("../model").BaseEdgeModel<LogicFlow.PropertiesType> | null | undefined;
     moveAnchorEnd(endX: number, endY: number, event?: PointerEvent): void;
+    validateAndSetState(targetNode: BaseNodeModel, anchorId: string | undefined, targetAnchor: AnchorConfig, nodeModel: BaseNodeModel, anchorData: AnchorConfig): void;
     isShowLine(): boolean;
     render(): import("preact/compat").JSX.Element;
 }

package/lib/view/Anchor.js

@@ -250,8 +250,7 @@ var Anchor = /** @class */ (function (_super) {
         configurable: true
     });
     Anchor.prototype.moveAnchorEnd = function (endX, endY, event) {
-        var _a, _b;
-        var _c = this.props, graphModel = _c.graphModel, nodeModel = _c.nodeModel, anchorData = _c.anchorData;
+        var _a = this.props, graphModel = _a.graphModel, nodeModel = _a.nodeModel, anchorData = _a.anchorData;
         var info = (0, util_1.targetNodeInfo)({
             x: endX,
             y: endY,
@@ -267,25 +266,7 @@ var Anchor = /** @class */ (function (_super) {
                 return;
             }
             this.preTargetNode = targetNode;
-            // 支持节点的每个锚点单独设置是否可连接，因此规则key去nodeId + anchorId作为唯一值
-            var targetInfoId = "".concat(nodeModel.id, "_").concat(targetNode.id, "_").concat(anchorId, "_").concat(anchorData.id);
-            // 查看鼠标是否进入过target，若有检验结果，表示进入过, 就不重复计算了。
-            if (!this.targetRuleResults.has(targetInfoId)) {
-                var targetAnchor = info.anchor;
-                var sourceRuleResult = nodeModel.isAllowConnectedAsSource(targetNode, anchorData, targetAnchor);
-                var targetRuleResult = targetNode.isAllowConnectedAsTarget(nodeModel, anchorData, targetAnchor);
-                this.sourceRuleResults.set(targetInfoId, (0, util_1.formatAnchorConnectValidateData)(sourceRuleResult));
-                this.targetRuleResults.set(targetInfoId, (0, util_1.formatAnchorConnectValidateData)(targetRuleResult));
-            }
-            var isSourcePass = ((_a = this.sourceRuleResults.get(targetInfoId)) !== null && _a !== void 0 ? _a : {}).isAllPass;
-            var isTargetPass = ((_b = this.targetRuleResults.get(targetInfoId)) !== null && _b !== void 0 ? _b : {}).isAllPass;
-            // 实时提示出即将链接的锚点
-            if (isSourcePass && isTargetPass) {
-                targetNode.setElementState(constant_1.ElementState.ALLOW_CONNECT);
-            }
-            else {
-                targetNode.setElementState(constant_1.ElementState.NOT_ALLOW_CONNECT);
-            }
+            this.validateAndSetState(targetNode, anchorId, info.anchor, nodeModel, anchorData);
             // 人工触发进入目标节点事件，同步设置 hovered 以驱动锚点显隐和样式
             if (!targetNode.isHovered) {
                 var nodeData = targetNode.getData();
@@ -314,6 +295,28 @@ var Anchor = /** @class */ (function (_super) {
             this.preTargetNode = undefined;
         }
     };
+    // 校验 source/target 连接规则并设置目标节点状态
+    Anchor.prototype.validateAndSetState = function (targetNode, anchorId, targetAnchor, nodeModel, anchorData) {
+        var _a, _b;
+        var targetInfoId = "".concat(nodeModel.id, "_").concat(targetNode.id, "_").concat(anchorId, "_").concat(anchorData.id);
+        if (!this.targetRuleResults.has(targetInfoId)) {
+            // 首次计算并缓存源/目标两侧的规则校验结果
+            var sourceRuleResult = nodeModel.isAllowConnectedAsSource(targetNode, anchorData, targetAnchor);
+            var targetRuleResult = targetNode.isAllowConnectedAsTarget(nodeModel, anchorData, targetAnchor);
+            this.sourceRuleResults.set(targetInfoId, (0, util_1.formatAnchorConnectValidateData)(sourceRuleResult));
+            this.targetRuleResults.set(targetInfoId, (0, util_1.formatAnchorConnectValidateData)(targetRuleResult));
+        }
+        // 读取缓存的校验结果
+        var isSourcePass = ((_a = this.sourceRuleResults.get(targetInfoId)) !== null && _a !== void 0 ? _a : {}).isAllPass;
+        var isTargetPass = ((_b = this.targetRuleResults.get(targetInfoId)) !== null && _b !== void 0 ? _b : {}).isAllPass;
+        // 两侧都通过则允许连接，否则标记为不允许连接
+        if (isSourcePass && isTargetPass) {
+            targetNode.setElementState(constant_1.ElementState.ALLOW_CONNECT);
+        }
+        else {
+            targetNode.setElementState(constant_1.ElementState.NOT_ALLOW_CONNECT);
+        }
+    };
     Anchor.prototype.isShowLine = function () {
         var _a = this.state, startX = _a.startX, startY = _a.startY, endX = _a.endX, endY = _a.endY;
         var v = (0, util_1.distance)(startX, startY, endX, endY);

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

@@ -246,61 +246,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);
@@ -328,6 +273,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;
@@ -346,10 +295,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 ((0, jsx_runtime_1.jsxs)("g", { className: "lf-resize-control lf-resize-control-".concat(direction), children: [(0, jsx_runtime_1.jsx)(shape_1.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)), (0, jsx_runtime_1.jsx)(shape_1.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 ((0, jsx_runtime_1.jsxs)("g", { className: "lf-resize-control lf-resize-control-".concat(direction), children: [(0, jsx_runtime_1.jsx)(shape_1.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)), (0, jsx_runtime_1.jsx)(shape_1.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;
 }(compat_1.Component));
@@ -394,7 +379,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 (0, jsx_runtime_1.jsx)(shape_1.Rect, __assign({}, style, { x: x, y: y, width: width, height: height }));
+        return ((0, jsx_runtime_1.jsx)(shape_1.Rect, __assign({}, style, { "pointer-events": "none", x: x, y: y, 
+            // TODO：宽高padding后续改成配置化的
+            width: width + 10, height: height + 10 })));
     };
     ResizeControlGroup.prototype.render = function () {
         return ((0, jsx_runtime_1.jsxs)("g", { className: "lf-resize-control-group", children: [this.getResizeOutline(), this.getResizeControl()] }));

package/lib/view/edge/BaseEdge.js

@@ -68,6 +68,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BaseEdge = void 0;
 var jsx_runtime_1 = require("preact/jsx-runtime");
 var compat_1 = require("preact/compat");
+var lodash_es_1 = require("lodash-es");
 var shape_1 = require("../shape");
 var text_1 = require("../text");
 var constant_1 = require("../../constant");
@@ -233,6 +234,14 @@ var BaseEdge = /** @class */ (function (_super) {
                     e: e,
                     position: position,
                 });
+                // 复制粘贴后会出现点击边时，边会失去焦点的问题，这里手动让边获焦以解决这个问题
+                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();
+                });
             }
             var editConfigModel = graphModel.editConfigModel;
             graphModel.selectEdgeById(model.id, (0, util_1.isMultipleSelect)(e, editConfigModel));

package/lib/view/edge/PolylineEdge.js

@@ -51,6 +51,7 @@ var BaseEdge_1 = __importDefault(require("./BaseEdge"));
 var shape_1 = require("../shape");
 var constant_1 = require("../../constant");
 var util_1 = require("../../util");
+var geometry_1 = require("../../util/geometry");
 var algorithm_1 = require("../../algorithm");
 var PolylineEdge = /** @class */ (function (_super) {
     __extends(PolylineEdge, _super);
@@ -131,12 +132,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 ((0, jsx_runtime_1.jsx)(shape_1.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 = (0, util_1.points2PointsList)(points);
+            var rounded = (0, geometry_1.generateRoundedCorners)(list, radius, false);
+            return rounded.map(function (p) { return "".concat(p.x, ",").concat(p.y); }).join(' ');
+        })();
+        return ((0, jsx_runtime_1.jsx)(shape_1.Polyline, __assign({ points: roundedPointsStr }, style, arrowConfig, (isAnimation
             ? {
                 strokeDasharray: strokeDasharray,
                 stroke: stroke,

package/lib/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;