@logicflow/core 2.2.0 → 2.2.1

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/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/es/view/Anchor.js

@@ -248,8 +248,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 = targetNodeInfo({
             x: endX,
             y: endY,
@@ -265,25 +264,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, formatAnchorConnectValidateData(sourceRuleResult));
-                this.targetRuleResults.set(targetInfoId, 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(ElementState.ALLOW_CONNECT);
-            }
-            else {
-                targetNode.setElementState(ElementState.NOT_ALLOW_CONNECT);
-            }
+            this.validateAndSetState(targetNode, anchorId, info.anchor, nodeModel, anchorData);
             // 人工触发进入目标节点事件，同步设置 hovered 以驱动锚点显隐和样式
             if (!targetNode.isHovered) {
                 var nodeData = targetNode.getData();
@@ -312,6 +293,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, formatAnchorConnectValidateData(sourceRuleResult));
+            this.targetRuleResults.set(targetInfoId, 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(ElementState.ALLOW_CONNECT);
+        }
+        else {
+            targetNode.setElementState(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 = distance(startX, startY, endX, endY);

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/BaseEdge.js

@@ -42,6 +42,7 @@ var __read = (this && this.__read) || function (o, n) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { Component, createRef } from 'preact/compat';
+import { isFunction, isNil } from 'lodash-es';
 import { Circle } from '../shape';
 import { LineText } from '../text';
 import { ElementState, EventType, ModelType, TextMode } from '../../constant';
@@ -207,6 +208,14 @@ var BaseEdge = /** @class */ (function (_super) {
                     e: e,
                     position: position,
                 });
+                // 复制粘贴后会出现点击边时，边会失去焦点的问题，这里手动让边获焦以解决这个问题
+                var el_1 = e.currentTarget;
+                var rAF = !isNil(window) && 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, isMultipleSelect(e, editConfigModel));

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

@@ -54,7 +54,7 @@ var __read = (this && this.__read) || function (o, n) {
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { Component } from 'preact/compat';
 import { reaction } from 'mobx';
-import { map } from 'lodash-es';
+import { map, isFunction, isNil } from 'lodash-es';
 import Anchor from '../Anchor';
 import { BaseText } from '../text';
 import { ElementState, EventType, TextMode } from '../../constant';
@@ -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,14 @@ 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 = !isNil(window) && isFunction(window.requestAnimationFrame)
+                    ? window.requestAnimationFrame.bind(window)
+                    : function (fn) { return setTimeout(fn, 0); };
+                rAF(function () {
+                    el_1.focus();
+                });
             }
         };
         _this.handleContextMenu = function (ev) {
@@ -267,6 +278,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 +466,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 })));