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

package/lib/util/theme.d.ts

@@ -1,69 +1,6 @@
 import LogicFlow from '../LogicFlow';
-export declare const defaultTheme: LogicFlow.Theme;
-export declare const radiusMode: any;
-export declare const darkMode: any;
-export declare const colorfulMode: any;
-export declare const themeModeMap: {
-    colorful: any;
-    dark: any;
-    radius: any;
-    default: LogicFlow.Theme;
-};
-export declare const darkBackground: {
-    background: string;
-};
-export declare const colorfulBackground: {
-    background: string;
-};
-export declare const defaultBackground: {
-    background: string;
-};
-export declare const backgroundModeMap: {
-    colorful: {
-        background: string;
-    };
-    dark: {
-        background: string;
-    };
-    radius: {
-        background: string;
-    };
-    default: {
-        background: string;
-    };
-};
-export declare const darkGrid: {
-    color: string;
-    thickness: number;
-};
-export declare const colorfulGrid: {
-    color: string;
-    thickness: number;
-};
-export declare const defaultGrid: {
-    color: string;
-    thickness: number;
-};
-export declare const gridModeMap: {
-    colorful: {
-        color: string;
-        thickness: number;
-    };
-    dark: {
-        color: string;
-        thickness: number;
-    };
-    radius: {
-        color: string;
-        thickness: number;
-    };
-    default: {
-        color: string;
-        thickness: number;
-    };
-};
-export declare const setupTheme: (customTheme?: Partial<LogicFlow.Theme>, themeMode?: 'radius' | 'dark' | 'colorful' | 'default' | string) => LogicFlow.Theme;
+export declare const setupTheme: (customTheme?: Partial<LogicFlow.Theme>, themeMode?: LogicFlow.ThemeMode | string) => LogicFlow.Theme;
 export declare const addThemeMode: (themeMode: string, style: Partial<LogicFlow.Theme>) => void;
 export declare const removeThemeMode: (themeMode: string) => void;
 export declare const clearThemeMode: () => void;
-export declare const updateTheme: (customTheme?: Partial<LogicFlow.Theme>, themeMode?: 'radius' | 'dark' | 'colorful' | 'default' | string) => LogicFlow.Theme;
+export declare const updateTheme: (customTheme?: Partial<LogicFlow.Theme>, themeMode?: LogicFlow.ThemeMode | string) => LogicFlow.Theme;

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

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,15 @@ 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 = 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) {
@@ -271,6 +283,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 +471,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 })));