@logicflow/core 2.0.6 → 2.0.8

package/lib/event/eventArgs.d.ts

@@ -97,7 +97,7 @@ interface NodeEventArgs {
     /**
      * 删除节点
      */
-    'node:delete': NodeEventArgsPick<'data'>;
+    'node:delete': NodeEventArgsPick<'data' | 'model'>;
     /**
      * 添加外部拖入节点
      */
@@ -105,7 +105,7 @@ interface NodeEventArgs {
     /**
      * 拖拽外部拖入节点
      */
-    'node:dnd-drag': NodeEventArgsPick<'data'>;
+    'node:dnd-drag': NodeEventArgsPick<'data' | 'e'>;
     /**
      * 开始拖拽节点
      */
@@ -130,6 +130,35 @@ interface NodeEventArgs {
      * 节点缩放
      */
     'node:resize': NodeEventArgsPick<'preData' | 'data' | 'model' | 'deltaX' | 'deltaY' | 'index'>;
+    /**
+     * 元素的 properties 发生改变
+     */
+    'node:properties-change': {
+        /**
+         * 元素的 id
+         */
+        id: string;
+        /**
+         * 改变的 properties 的 key
+         */
+        keys: string[];
+        /**
+         * 改变前的 properties
+         */
+        preProperties: Record<string, any>;
+        /**
+         * 改变后的 properties
+         */
+        properties: Record<string, any>;
+    };
+    /**
+     * 节点获焦
+     */
+    'node:focus': NodeEventArgsPick<'data'>;
+    /**
+     * 节点失焦
+     */
+    'node:blur': NodeEventArgsPick<'data'>;
 }
 type EdgeEventArgsPick<T extends 'data' | 'e' | 'position'> = Pick<{
     /**
@@ -196,6 +225,14 @@ interface EdgeEventArgs {
             oldEdge: EdgeData;
         };
     };
+    /**
+     * 边获焦
+     */
+    'edge:focus': EdgeEventArgsPick<'data'>;
+    /**
+     * 边失焦
+     */
+    'edge:blur': EdgeEventArgsPick<'data'>;
 }
 /**
  * 文本事件
@@ -275,33 +312,6 @@ interface CommonEventArgs {
          */
         position: ClientPosition;
     };
-    /**
-     * 元素的 properties 发生改变
-     */
-    'properties:change': {
-        data: {
-            /**
-             * 元素的 id
-             */
-            id: string;
-            /**
-             * 元素的类型
-             */
-            type: string;
-            /**
-             * 改变的 properties 的 key
-             */
-            keys: string[];
-            /**
-             * 改变前的 properties
-             */
-            preProperties: Record<string, any>;
-            /**
-             * 改变后的 properties
-             */
-            properties: Record<string, any>;
-        };
-    };
     /**
      * 进行画布平移或缩放等变化操作时触发
      */
@@ -356,7 +366,7 @@ type AnchorEventArgsPick<T extends 'data' | 'e' | 'nodeModel' | 'edgeModel'> = P
     /**
      * 通过拖动锚点连线添加的边的数据
      */
-    edgeModel: BaseEdgeModel;
+    edgeModel?: BaseEdgeModel;
 }, T>;
 /**
  * 锚点事件

package/lib/index.css

@@ -15,6 +15,9 @@
 .lf-text-draggable {
   cursor: move;
 }
+*:focus {
+  outline: none;
+}
 .lf-node-anchor {
   cursor: crosshair;
 }

package/lib/model/GraphModel.d.ts

@@ -3,6 +3,7 @@ import { ElementState, EventType, OverlapMode, TextMode } from '../constant';
 import LogicFlow from '../LogicFlow';
 import { Options as LFOptions } from '../options';
 import EventEmitter from '../event/eventEmitter';
+import { Grid } from '../view/overlay';
 import PointTuple = LogicFlow.PointTuple;
 import GraphData = LogicFlow.GraphData;
 import NodeConfig = LogicFlow.NodeConfig;
@@ -16,6 +17,7 @@ export declare class GraphModel {
     width: number;
     height: number;
     theme: LogicFlow.Theme;
+    grid: Grid.GridOptions;
     readonly eventCenter: EventEmitter;
     readonly modelMap: Map<string, LogicFlow.GraphElementCtor>;
     /**
@@ -68,15 +70,15 @@ export declare class GraphModel {
      * 基于zIndex对元素进行排序。
      * todo: 性能优化
      */
-    get sortElements(): (BaseNodeModel<LogicFlow.PropertiesType> | BaseEdgeModel<LogicFlow.PropertiesType>)[];
+    get sortElements(): (BaseEdgeModel<LogicFlow.PropertiesType> | BaseNodeModel<LogicFlow.PropertiesType>)[];
     /**
      * 当前编辑的元素，低频操作，先循环找。
      */
-    get textEditElement(): BaseNodeModel<LogicFlow.PropertiesType> | BaseEdgeModel<LogicFlow.PropertiesType> | undefined;
+    get textEditElement(): BaseEdgeModel<LogicFlow.PropertiesType> | BaseNodeModel<LogicFlow.PropertiesType> | undefined;
     /**
      * 当前画布所有被选中的元素
      */
-    get selectElements(): Map<string, BaseNodeModel<LogicFlow.PropertiesType> | BaseEdgeModel<LogicFlow.PropertiesType>>;
+    get selectElements(): Map<string, BaseEdgeModel<LogicFlow.PropertiesType> | BaseNodeModel<LogicFlow.PropertiesType>>;
     get selectNodes(): BaseNodeModel<LogicFlow.PropertiesType>[];
     /**
      * 获取指定区域内的所有元素
@@ -383,6 +385,14 @@ export declare class GraphModel {
      * todo docs link
      */
     setTheme(style: Partial<LogicFlow.Theme>): void;
+    /**
+     * 更新网格配置
+     */
+    updateGridOptions(options: Partial<Grid.GridOptions>): void;
+    /**
+     * 更新网格配置
+     */
+    updateBackgroundOptions(options: boolean | Partial<LFOptions.BackgroundConfig>): void;
     /**
      * 重新设置画布的宽高
      */

package/lib/model/GraphModel.js

@@ -52,6 +52,7 @@ var _1 = require(".");
 var constant_1 = require("../constant");
 var util_1 = require("../util");
 var eventEmitter_1 = __importDefault(require("../event/eventEmitter"));
+var overlay_1 = require("../view/overlay");
 var GraphModel = /** @class */ (function () {
     function GraphModel(options) {
         // 维护所有节点和边类型对应的 model
@@ -94,6 +95,7 @@ var GraphModel = /** @class */ (function () {
             this.gridSize = grid.size || 1; // 默认 gridSize 设置为 1
         }
         this.theme = (0, util_1.setupTheme)(options.style);
+        this.grid = overlay_1.Grid.getGridOptions(grid !== null && grid !== void 0 ? grid : false);
         this.edgeType = options.edgeType || 'polyline';
         this.animation = (0, util_1.setupAnimation)(animation);
         this.overlapMode = options.overlapMode || constant_1.OverlapMode.DEFAULT;
@@ -379,6 +381,31 @@ var GraphModel = /** @class */ (function () {
                     throw new Error("\u627E\u4E0D\u5230".concat(edge.type, "\u5BF9\u5E94\u7684\u8FB9\u3002"));
                 }
                 var edgeModel = new Model(edge, _this);
+                // 根据edgeModel中存储的数据找到当前画布上的起终锚点坐标
+                // 判断当前起终锚点数据和Model中存储的起终点数据是否一致，不一致更新起终点信息
+                var sourceNodeId = edgeModel.sourceNodeId, targetNodeId = edgeModel.targetNodeId, _b = edgeModel.sourceAnchorId, sourceAnchorId = _b === void 0 ? '' : _b, _c = edgeModel.targetAnchorId, targetAnchorId = _c === void 0 ? '' : _c, startPoint = edgeModel.startPoint, endPoint = edgeModel.endPoint, text = edgeModel.text, textPosition = edgeModel.textPosition;
+                var updateAnchorPoint = function (node, anchorId, point, updatePoint) {
+                    var anchor = node === null || node === void 0 ? void 0 : node.anchors.find(function (anchor) { return anchor.id === anchorId; });
+                    if (anchor && !(0, lodash_es_1.isEqual)(anchor, point)) {
+                        updatePoint(anchor);
+                    }
+                };
+                var sourceNode = _this.getNodeModelById(sourceNodeId);
+                var targetNode = _this.getNodeModelById(targetNodeId);
+                updateAnchorPoint(sourceNode, sourceAnchorId, startPoint, edgeModel.updateStartPoint.bind(edgeModel));
+                updateAnchorPoint(targetNode, targetAnchorId, endPoint, edgeModel.updateEndPoint.bind(edgeModel));
+                // 而文本需要先算一下文本与默认文本位置之间的相对位置差
+                // 再计算新路径的文本默认位置，加上相对位置差，得到调整后边的文本的位置
+                if (text) {
+                    var x = text.x, y = text.y;
+                    var defaultX = textPosition.x, defaultY = textPosition.y;
+                    if (x && y && defaultX && defaultY) {
+                        var deltaX = x - defaultX;
+                        var deltaY = y - defaultY;
+                        edgeModel.resetTextPosition();
+                        edgeModel.moveText(deltaX, deltaY);
+                    }
+                }
                 _this.edgeModelMap.set(edgeModel.id, edgeModel);
                 _this.elementsModelMap.set(edgeModel.id, edgeModel);
                 return edgeModel;
@@ -670,11 +697,15 @@ var GraphModel = /** @class */ (function () {
      * @param {string} nodeId 节点Id
      */
     GraphModel.prototype.deleteNode = function (nodeId) {
-        var nodeData = this.nodesMap[nodeId].model.getData();
+        var nodeModel = this.nodesMap[nodeId].model;
+        var nodeData = nodeModel.getData();
         this.deleteEdgeBySource(nodeId);
         this.deleteEdgeByTarget(nodeId);
         this.nodes.splice(this.nodesMap[nodeId].index, 1);
-        this.eventCenter.emit(constant_1.EventType.NODE_DELETE, { data: nodeData });
+        this.eventCenter.emit(constant_1.EventType.NODE_DELETE, {
+            data: nodeData,
+            model: nodeModel,
+        });
     };
     /**
      * 添加节点
@@ -1244,6 +1275,23 @@ var GraphModel = /** @class */ (function () {
     GraphModel.prototype.setTheme = function (style) {
         this.theme = (0, util_1.updateTheme)(__assign(__assign({}, this.theme), style));
     };
+    /**
+     * 更新网格配置
+     */
+    GraphModel.prototype.updateGridOptions = function (options) {
+        (0, lodash_es_1.merge)(this.grid, options);
+    };
+    /**
+     * 更新网格配置
+     */
+    GraphModel.prototype.updateBackgroundOptions = function (options) {
+        if ((0, lodash_es_1.isBoolean)(options) || (0, lodash_es_1.isBoolean)(this.background)) {
+            this.background = options;
+        }
+        else {
+            this.background = __assign(__assign({}, this.background), options);
+        }
+    };
     /**
      * 重新设置画布的宽高
      */
@@ -1371,6 +1419,9 @@ var GraphModel = /** @class */ (function () {
     __decorate([
         mobx_1.observable
     ], GraphModel.prototype, "height", void 0);
+    __decorate([
+        mobx_1.observable
+    ], GraphModel.prototype, "grid", void 0);
     __decorate([
         mobx_1.observable
     ], GraphModel.prototype, "edgeType", void 0);

package/lib/model/edge/BaseEdgeModel.d.ts

@@ -48,6 +48,7 @@ export declare class BaseEdgeModel<P extends PropertiesType = PropertiesType> im
     visible: boolean;
     isAnimation: boolean;
     isShowAdjustPoint: boolean;
+    isDragging?: boolean;
     graphModel: GraphModel;
     zIndex: number;
     state: ElementState;

package/lib/model/edge/LineEdgeModel.d.ts

@@ -16,6 +16,8 @@ export declare class LineEdgeModel extends BaseEdgeModel {
         height?: number | undefined;
         path?: string | undefined;
     };
+    initEdgeData(data: LogicFlow.EdgeConfig): void;
+    getPath(points: Point[]): string;
     getTextPosition(): Point;
 }
 export default LineEdgeModel;

package/lib/model/edge/LineEdgeModel.js

@@ -71,6 +71,14 @@ var LineEdgeModel = /** @class */ (function (_super) {
         var _a = this.properties.style, customStyle = _a === void 0 ? {} : _a;
         return __assign(__assign(__assign({}, style), (0, lodash_es_1.cloneDeep)(line)), (0, lodash_es_1.cloneDeep)(customStyle));
     };
+    LineEdgeModel.prototype.initEdgeData = function (data) {
+        _super.prototype.initEdgeData.call(this, data);
+        this.points = this.getPath([this.startPoint, this.endPoint]);
+    };
+    LineEdgeModel.prototype.getPath = function (points) {
+        var _a = __read(points, 2), start = _a[0], end = _a[1];
+        return "".concat(start.x, ",").concat(start.y, " ").concat(end.x, ",").concat(end.y);
+    };
     LineEdgeModel.prototype.getTextPosition = function () {
         return {
             x: (this.startPoint.x + this.endPoint.x) / 2,

package/lib/model/edge/PolylineEdgeModel.d.ts

@@ -39,6 +39,7 @@ export declare class PolylineEdgeModel extends BaseEdgeModel {
             y: number;
         }[];
     };
+    getPath(points: Point[]): string;
     initPoints(): void;
     updatePoints(): void;
     updateStartPoint(anchor: Point): void;

package/lib/model/edge/PolylineEdgeModel.js

@@ -298,11 +298,12 @@ var PolylineEdgeModel = /** @class */ (function (_super) {
             pointsList: pointsList,
         });
     };
+    PolylineEdgeModel.prototype.getPath = function (points) {
+        return points.map(function (point) { return "".concat(point.x, ",").concat(point.y); }).join(' ');
+    };
     PolylineEdgeModel.prototype.initPoints = function () {
         if (this.pointsList.length > 0) {
-            this.points = this.pointsList
-                .map(function (point) { return "".concat(point.x, ",").concat(point.y); })
-                .join(' ');
+            this.points = this.getPath(this.pointsList);
         }
         else {
             this.updatePoints();

package/lib/model/node/BaseNodeModel.d.ts

@@ -172,8 +172,8 @@ export declare class BaseNodeModel<P extends PropertiesType = PropertiesType> im
         color?: string | undefined;
         fontSize: number;
         lineHeight?: number | undefined;
-        textAnchor?: "middle" | "start" | "end" | undefined;
-        dominantBaseline?: "middle" | "central" | "auto" | "text-bottom" | "alphabetic" | "ideographic" | "mathematical" | "hanging" | "text-top" | undefined;
+        textAnchor?: "start" | "end" | "middle" | undefined;
+        dominantBaseline?: "middle" | "auto" | "text-bottom" | "alphabetic" | "ideographic" | "central" | "mathematical" | "hanging" | "text-top" | undefined;
     };
     /**
      * @overridable 支持重写

package/lib/model/node/BaseNodeModel.js

@@ -739,7 +739,7 @@ var BaseNodeModel = /** @class */ (function () {
         var preProperties = (0, mobx_1.toJS)(this.properties);
         this.properties = nextProperties;
         this.setAttributes();
-        // 触发更新节点 properties:change 的事件
+        // 触发更新节点 node:properties-change 的事件
         this.graphModel.eventCenter.emit(constant_1.EventType.NODE_PROPERTIES_CHANGE, {
             id: this.id,
             keys: updateKeys,

package/lib/model/node/HtmlNodeModel.d.ts

@@ -4,13 +4,13 @@ import { ModelType } from '../../constant';
 import AnchorConfig = Model.AnchorConfig;
 import LogicFlow from '../../LogicFlow';
 import GraphModel from '../GraphModel';
-export type IHtmlNodeProperties = {
+export interface IHtmlNodeProperties {
     width?: number;
     height?: number;
     style?: LogicFlow.CommonTheme;
     textStyle?: LogicFlow.CommonTheme;
     [key: string]: unknown;
-};
+}
 export declare class HtmlNodeModel<P extends IHtmlNodeProperties = IHtmlNodeProperties> extends BaseNodeModel<P> {
     modelType: ModelType;
     constructor(data: LogicFlow.NodeConfig<P>, graphModel: GraphModel);

package/lib/model/node/TextNodeModel.d.ts

@@ -24,8 +24,8 @@ export declare class TextNodeModel<P extends ITextNodeProperties = ITextNodeProp
         fontSize: number;
         textWidth?: number | undefined;
         lineHeight?: number | undefined;
-        textAnchor?: "middle" | "start" | "end" | undefined;
-        dominantBaseline?: "middle" | "central" | "auto" | "text-bottom" | "alphabetic" | "ideographic" | "mathematical" | "hanging" | "text-top" | undefined;
+        textAnchor?: "start" | "end" | "middle" | undefined;
+        dominantBaseline?: "middle" | "auto" | "text-bottom" | "alphabetic" | "ideographic" | "central" | "mathematical" | "hanging" | "text-top" | undefined;
         overflowMode?: "default" | "autoWrap" | "ellipsis" | undefined;
         wrapPadding?: string | undefined;
     };

package/lib/style/index.css

@@ -15,6 +15,9 @@
 .lf-text-draggable {
   cursor: move;
 }
+*:focus {
+  outline: none;
+}
 .lf-node-anchor {
   cursor: crosshair;
 }

package/lib/style/index.less

@@ -19,6 +19,11 @@
   cursor: move;
 }
 
+// 在元素focus时浏览器会给元素outline设置一个5像素宽的默认样式，这里先全局禁用一下，后续再根据需要再做调整
+*:focus {
+  outline: none;
+}
+
 .lf-node-anchor {
   cursor: crosshair;
 }

package/lib/style/raw.d.ts

@@ -1,4 +1,4 @@
 /**
  * Auto generated file, do not modify it!
  */
-export declare const content = ".lf-graph {\n  position: relative;\n  z-index: 0;\n  width: 100%;\n  height: 100%;\n  background: #fff;\n  user-select: none;\n}\n.lf-element-text {\n  cursor: text;\n}\n.lf-text-disabled {\n  pointer-events: none;\n}\n.lf-text-draggable {\n  cursor: move;\n}\n.lf-node-anchor {\n  cursor: crosshair;\n}\n.lf-node-anchor-hover {\n  visibility: hidden;\n}\n.lf-anchor:hover .lf-node-anchor-hover {\n  visibility: visible;\n}\n.lf-edge.pointer-none {\n  pointer-events: none;\n}\n.lf-edge-append {\n  cursor: pointer;\n}\n.lf-edge-animation {\n  stroke-dashoffset: 100%;\n  animation: lf_animate_dash 5s linear infinite;\n}\n@keyframes lf_animate_dash {\n  to {\n    stroke-dashoffset: 0;\n  }\n}\n/* node */\n.lf-node-not-allow {\n  cursor: not-allowed;\n}\n.lf-polyline-append-ns-resize {\n  cursor: ns-resize;\n}\n.lf-polyline-append-ew-resize {\n  cursor: ew-resize;\n}\n.lf-dragging {\n  cursor: move;\n}\n.lf-dragging .lf-element-text {\n  cursor: move;\n}\n.lf-draggable {\n  cursor: default;\n}\n.lf-bezier-adjust-anchor {\n  cursor: pointer;\n}\n/* background */\n.lf-background,\n.lf-grid {\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n}\n.lf-background-area {\n  width: 100%;\n  height: 100%;\n}\n/* html-overlay */\n.lf-html-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  overflow: hidden;\n  user-select: none;\n  pointer-events: none;\n}\n.lf-html-overlay__transform > * {\n  pointer-events: all;\n}\n.lf-text-editable {\n  pointer-events: all;\n}\n.lf-text-input {\n  position: absolute;\n  box-sizing: border-box;\n  min-width: 100px;\n  min-height: 20px;\n  padding: 5px;\n  line-height: 1.2;\n  white-space: pre;\n  text-align: center;\n  background: #fff;\n  border: 1px solid #edefed;\n  border-radius: 3px;\n  outline: none;\n  transform: translate(-50%, -50%);\n  resize: none;\n}\n.lf-get-text-height {\n  display: inline-block;\n  box-sizing: border-box;\n  word-break: break-all;\n  /* \u4E3A\u4E86\u8DDF\u8F93\u5165\u6548\u679C\u4FDD\u6301\u4E00\u81F4\uFF0C\u8BBE\u7F6E\u900F\u660E\u8FB9\u6846\u5360\u4F4D */\n  border: 1px solid transparent;\n}\n.lf-node-text-auto-wrap {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  /* border: 1px solid transparent; */\n}\n.lf-node-text-auto-wrap-content {\n  width: 100%;\n  line-height: 1.2;\n  text-align: center;\n  word-break: break-all;\n  background: transparent;\n}\n.lf-node-text-ellipsis-content {\n  width: 100%;\n  line-height: 1.2;\n  white-space: nowrap;\n  text-align: center;\n  background: transparent;\n  /* overflow: hidden;\n  text-overflow: ellipsis; */\n}\n.lf-node-text-ellipsis-content > div {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n/* tool-overlay */\n.lf-tool-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  overflow: hidden;\n  pointer-events: none;\n}\n.lf-tool-overlay > * {\n  pointer-events: all;\n}\n/* modification-overlay */\n.modification-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  overflow: hidden;\n  pointer-events: none;\n}\n.modification-overlay > * {\n  pointer-events: all;\n}\n.lf-outline,\n.lf-snapline {\n  pointer-events: none;\n}\n.lf-keyboard-tips {\n  float: right;\n}\n.lf-node-select-decorate {\n  position: absolute;\n  border: 1px dashed #343435;\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n}\n.lf-multiple-select {\n  position: absolute;\n  border: 2px dashed #187dffcc;\n  box-shadow: 0 0 3px 0 #187dff80;\n  cursor: move;\n}\n.lf-edge-adjust-point {\n  cursor: move;\n}\n.lf-rotate-control {\n  cursor: grabbing;\n}\n.lf-resize-control-nw {\n  cursor: nw-resize;\n}\n.lf-resize-control-n {\n  cursor: n-resize;\n}\n.lf-resize-control-ne {\n  cursor: ne-resize;\n}\n.lf-resize-control-e {\n  cursor: e-resize;\n}\n.lf-resize-control-se {\n  cursor: se-resize;\n}\n.lf-resize-control-s {\n  cursor: s-resize;\n}\n.lf-resize-control-sw {\n  cursor: sw-resize;\n}\n.lf-resize-control-w {\n  cursor: w-resize;\n}\n";
+export declare const content = ".lf-graph {\n  position: relative;\n  z-index: 0;\n  width: 100%;\n  height: 100%;\n  background: #fff;\n  user-select: none;\n}\n.lf-element-text {\n  cursor: text;\n}\n.lf-text-disabled {\n  pointer-events: none;\n}\n.lf-text-draggable {\n  cursor: move;\n}\n*:focus {\n  outline: none;\n}\n.lf-node-anchor {\n  cursor: crosshair;\n}\n.lf-node-anchor-hover {\n  visibility: hidden;\n}\n.lf-anchor:hover .lf-node-anchor-hover {\n  visibility: visible;\n}\n.lf-edge.pointer-none {\n  pointer-events: none;\n}\n.lf-edge-append {\n  cursor: pointer;\n}\n.lf-edge-animation {\n  stroke-dashoffset: 100%;\n  animation: lf_animate_dash 5s linear infinite;\n}\n@keyframes lf_animate_dash {\n  to {\n    stroke-dashoffset: 0;\n  }\n}\n/* node */\n.lf-node-not-allow {\n  cursor: not-allowed;\n}\n.lf-polyline-append-ns-resize {\n  cursor: ns-resize;\n}\n.lf-polyline-append-ew-resize {\n  cursor: ew-resize;\n}\n.lf-dragging {\n  cursor: move;\n}\n.lf-dragging .lf-element-text {\n  cursor: move;\n}\n.lf-draggable {\n  cursor: default;\n}\n.lf-bezier-adjust-anchor {\n  cursor: pointer;\n}\n/* background */\n.lf-background,\n.lf-grid {\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n}\n.lf-background-area {\n  width: 100%;\n  height: 100%;\n}\n/* html-overlay */\n.lf-html-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  overflow: hidden;\n  user-select: none;\n  pointer-events: none;\n}\n.lf-html-overlay__transform > * {\n  pointer-events: all;\n}\n.lf-text-editable {\n  pointer-events: all;\n}\n.lf-text-input {\n  position: absolute;\n  box-sizing: border-box;\n  min-width: 100px;\n  min-height: 20px;\n  padding: 5px;\n  line-height: 1.2;\n  white-space: pre;\n  text-align: center;\n  background: #fff;\n  border: 1px solid #edefed;\n  border-radius: 3px;\n  outline: none;\n  transform: translate(-50%, -50%);\n  resize: none;\n}\n.lf-get-text-height {\n  display: inline-block;\n  box-sizing: border-box;\n  word-break: break-all;\n  /* \u4E3A\u4E86\u8DDF\u8F93\u5165\u6548\u679C\u4FDD\u6301\u4E00\u81F4\uFF0C\u8BBE\u7F6E\u900F\u660E\u8FB9\u6846\u5360\u4F4D */\n  border: 1px solid transparent;\n}\n.lf-node-text-auto-wrap {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  /* border: 1px solid transparent; */\n}\n.lf-node-text-auto-wrap-content {\n  width: 100%;\n  line-height: 1.2;\n  text-align: center;\n  word-break: break-all;\n  background: transparent;\n}\n.lf-node-text-ellipsis-content {\n  width: 100%;\n  line-height: 1.2;\n  white-space: nowrap;\n  text-align: center;\n  background: transparent;\n  /* overflow: hidden;\n  text-overflow: ellipsis; */\n}\n.lf-node-text-ellipsis-content > div {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n/* tool-overlay */\n.lf-tool-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  overflow: hidden;\n  pointer-events: none;\n}\n.lf-tool-overlay > * {\n  pointer-events: all;\n}\n/* modification-overlay */\n.modification-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  overflow: hidden;\n  pointer-events: none;\n}\n.modification-overlay > * {\n  pointer-events: all;\n}\n.lf-outline,\n.lf-snapline {\n  pointer-events: none;\n}\n.lf-keyboard-tips {\n  float: right;\n}\n.lf-node-select-decorate {\n  position: absolute;\n  border: 1px dashed #343435;\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n}\n.lf-multiple-select {\n  position: absolute;\n  border: 2px dashed #187dffcc;\n  box-shadow: 0 0 3px 0 #187dff80;\n  cursor: move;\n}\n.lf-edge-adjust-point {\n  cursor: move;\n}\n.lf-rotate-control {\n  cursor: grabbing;\n}\n.lf-resize-control-nw {\n  cursor: nw-resize;\n}\n.lf-resize-control-n {\n  cursor: n-resize;\n}\n.lf-resize-control-ne {\n  cursor: ne-resize;\n}\n.lf-resize-control-e {\n  cursor: e-resize;\n}\n.lf-resize-control-se {\n  cursor: se-resize;\n}\n.lf-resize-control-s {\n  cursor: s-resize;\n}\n.lf-resize-control-sw {\n  cursor: sw-resize;\n}\n.lf-resize-control-w {\n  cursor: w-resize;\n}\n";

package/lib/style/raw.js

@@ -5,4 +5,4 @@ exports.content = void 0;
 /**
  * Auto generated file, do not modify it!
  */
-exports.content = ".lf-graph {\n  position: relative;\n  z-index: 0;\n  width: 100%;\n  height: 100%;\n  background: #fff;\n  user-select: none;\n}\n.lf-element-text {\n  cursor: text;\n}\n.lf-text-disabled {\n  pointer-events: none;\n}\n.lf-text-draggable {\n  cursor: move;\n}\n.lf-node-anchor {\n  cursor: crosshair;\n}\n.lf-node-anchor-hover {\n  visibility: hidden;\n}\n.lf-anchor:hover .lf-node-anchor-hover {\n  visibility: visible;\n}\n.lf-edge.pointer-none {\n  pointer-events: none;\n}\n.lf-edge-append {\n  cursor: pointer;\n}\n.lf-edge-animation {\n  stroke-dashoffset: 100%;\n  animation: lf_animate_dash 5s linear infinite;\n}\n@keyframes lf_animate_dash {\n  to {\n    stroke-dashoffset: 0;\n  }\n}\n/* node */\n.lf-node-not-allow {\n  cursor: not-allowed;\n}\n.lf-polyline-append-ns-resize {\n  cursor: ns-resize;\n}\n.lf-polyline-append-ew-resize {\n  cursor: ew-resize;\n}\n.lf-dragging {\n  cursor: move;\n}\n.lf-dragging .lf-element-text {\n  cursor: move;\n}\n.lf-draggable {\n  cursor: default;\n}\n.lf-bezier-adjust-anchor {\n  cursor: pointer;\n}\n/* background */\n.lf-background,\n.lf-grid {\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n}\n.lf-background-area {\n  width: 100%;\n  height: 100%;\n}\n/* html-overlay */\n.lf-html-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  overflow: hidden;\n  user-select: none;\n  pointer-events: none;\n}\n.lf-html-overlay__transform > * {\n  pointer-events: all;\n}\n.lf-text-editable {\n  pointer-events: all;\n}\n.lf-text-input {\n  position: absolute;\n  box-sizing: border-box;\n  min-width: 100px;\n  min-height: 20px;\n  padding: 5px;\n  line-height: 1.2;\n  white-space: pre;\n  text-align: center;\n  background: #fff;\n  border: 1px solid #edefed;\n  border-radius: 3px;\n  outline: none;\n  transform: translate(-50%, -50%);\n  resize: none;\n}\n.lf-get-text-height {\n  display: inline-block;\n  box-sizing: border-box;\n  word-break: break-all;\n  /* \u4E3A\u4E86\u8DDF\u8F93\u5165\u6548\u679C\u4FDD\u6301\u4E00\u81F4\uFF0C\u8BBE\u7F6E\u900F\u660E\u8FB9\u6846\u5360\u4F4D */\n  border: 1px solid transparent;\n}\n.lf-node-text-auto-wrap {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  /* border: 1px solid transparent; */\n}\n.lf-node-text-auto-wrap-content {\n  width: 100%;\n  line-height: 1.2;\n  text-align: center;\n  word-break: break-all;\n  background: transparent;\n}\n.lf-node-text-ellipsis-content {\n  width: 100%;\n  line-height: 1.2;\n  white-space: nowrap;\n  text-align: center;\n  background: transparent;\n  /* overflow: hidden;\n  text-overflow: ellipsis; */\n}\n.lf-node-text-ellipsis-content > div {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n/* tool-overlay */\n.lf-tool-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  overflow: hidden;\n  pointer-events: none;\n}\n.lf-tool-overlay > * {\n  pointer-events: all;\n}\n/* modification-overlay */\n.modification-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  overflow: hidden;\n  pointer-events: none;\n}\n.modification-overlay > * {\n  pointer-events: all;\n}\n.lf-outline,\n.lf-snapline {\n  pointer-events: none;\n}\n.lf-keyboard-tips {\n  float: right;\n}\n.lf-node-select-decorate {\n  position: absolute;\n  border: 1px dashed #343435;\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n}\n.lf-multiple-select {\n  position: absolute;\n  border: 2px dashed #187dffcc;\n  box-shadow: 0 0 3px 0 #187dff80;\n  cursor: move;\n}\n.lf-edge-adjust-point {\n  cursor: move;\n}\n.lf-rotate-control {\n  cursor: grabbing;\n}\n.lf-resize-control-nw {\n  cursor: nw-resize;\n}\n.lf-resize-control-n {\n  cursor: n-resize;\n}\n.lf-resize-control-ne {\n  cursor: ne-resize;\n}\n.lf-resize-control-e {\n  cursor: e-resize;\n}\n.lf-resize-control-se {\n  cursor: se-resize;\n}\n.lf-resize-control-s {\n  cursor: s-resize;\n}\n.lf-resize-control-sw {\n  cursor: sw-resize;\n}\n.lf-resize-control-w {\n  cursor: w-resize;\n}\n";
+exports.content = ".lf-graph {\n  position: relative;\n  z-index: 0;\n  width: 100%;\n  height: 100%;\n  background: #fff;\n  user-select: none;\n}\n.lf-element-text {\n  cursor: text;\n}\n.lf-text-disabled {\n  pointer-events: none;\n}\n.lf-text-draggable {\n  cursor: move;\n}\n*:focus {\n  outline: none;\n}\n.lf-node-anchor {\n  cursor: crosshair;\n}\n.lf-node-anchor-hover {\n  visibility: hidden;\n}\n.lf-anchor:hover .lf-node-anchor-hover {\n  visibility: visible;\n}\n.lf-edge.pointer-none {\n  pointer-events: none;\n}\n.lf-edge-append {\n  cursor: pointer;\n}\n.lf-edge-animation {\n  stroke-dashoffset: 100%;\n  animation: lf_animate_dash 5s linear infinite;\n}\n@keyframes lf_animate_dash {\n  to {\n    stroke-dashoffset: 0;\n  }\n}\n/* node */\n.lf-node-not-allow {\n  cursor: not-allowed;\n}\n.lf-polyline-append-ns-resize {\n  cursor: ns-resize;\n}\n.lf-polyline-append-ew-resize {\n  cursor: ew-resize;\n}\n.lf-dragging {\n  cursor: move;\n}\n.lf-dragging .lf-element-text {\n  cursor: move;\n}\n.lf-draggable {\n  cursor: default;\n}\n.lf-bezier-adjust-anchor {\n  cursor: pointer;\n}\n/* background */\n.lf-background,\n.lf-grid {\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n}\n.lf-background-area {\n  width: 100%;\n  height: 100%;\n}\n/* html-overlay */\n.lf-html-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  overflow: hidden;\n  user-select: none;\n  pointer-events: none;\n}\n.lf-html-overlay__transform > * {\n  pointer-events: all;\n}\n.lf-text-editable {\n  pointer-events: all;\n}\n.lf-text-input {\n  position: absolute;\n  box-sizing: border-box;\n  min-width: 100px;\n  min-height: 20px;\n  padding: 5px;\n  line-height: 1.2;\n  white-space: pre;\n  text-align: center;\n  background: #fff;\n  border: 1px solid #edefed;\n  border-radius: 3px;\n  outline: none;\n  transform: translate(-50%, -50%);\n  resize: none;\n}\n.lf-get-text-height {\n  display: inline-block;\n  box-sizing: border-box;\n  word-break: break-all;\n  /* \u4E3A\u4E86\u8DDF\u8F93\u5165\u6548\u679C\u4FDD\u6301\u4E00\u81F4\uFF0C\u8BBE\u7F6E\u900F\u660E\u8FB9\u6846\u5360\u4F4D */\n  border: 1px solid transparent;\n}\n.lf-node-text-auto-wrap {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  /* border: 1px solid transparent; */\n}\n.lf-node-text-auto-wrap-content {\n  width: 100%;\n  line-height: 1.2;\n  text-align: center;\n  word-break: break-all;\n  background: transparent;\n}\n.lf-node-text-ellipsis-content {\n  width: 100%;\n  line-height: 1.2;\n  white-space: nowrap;\n  text-align: center;\n  background: transparent;\n  /* overflow: hidden;\n  text-overflow: ellipsis; */\n}\n.lf-node-text-ellipsis-content > div {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n/* tool-overlay */\n.lf-tool-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  overflow: hidden;\n  pointer-events: none;\n}\n.lf-tool-overlay > * {\n  pointer-events: all;\n}\n/* modification-overlay */\n.modification-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  overflow: hidden;\n  pointer-events: none;\n}\n.modification-overlay > * {\n  pointer-events: all;\n}\n.lf-outline,\n.lf-snapline {\n  pointer-events: none;\n}\n.lf-keyboard-tips {\n  float: right;\n}\n.lf-node-select-decorate {\n  position: absolute;\n  border: 1px dashed #343435;\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n}\n.lf-multiple-select {\n  position: absolute;\n  border: 2px dashed #187dffcc;\n  box-shadow: 0 0 3px 0 #187dff80;\n  cursor: move;\n}\n.lf-edge-adjust-point {\n  cursor: move;\n}\n.lf-rotate-control {\n  cursor: grabbing;\n}\n.lf-resize-control-nw {\n  cursor: nw-resize;\n}\n.lf-resize-control-n {\n  cursor: n-resize;\n}\n.lf-resize-control-ne {\n  cursor: ne-resize;\n}\n.lf-resize-control-e {\n  cursor: e-resize;\n}\n.lf-resize-control-se {\n  cursor: se-resize;\n}\n.lf-resize-control-s {\n  cursor: s-resize;\n}\n.lf-resize-control-sw {\n  cursor: sw-resize;\n}\n.lf-resize-control-w {\n  cursor: w-resize;\n}\n";

package/lib/util/drag.d.ts

@@ -44,4 +44,5 @@ export declare class StepDrag {
     handleMouseMove: (e: MouseEvent) => void;
     handleMouseUp: (e: MouseEvent) => void;
     cancelDrag: () => void;
+    destroy: () => void;
 }

package/lib/util/drag.js

@@ -124,6 +124,17 @@ var StepDrag = /** @class */ (function () {
             _this.onDragEnd({ event: undefined });
             _this.isDragging = false;
         };
+        this.destroy = function () {
+            if (_this.isStartDragging) {
+                // https://github.com/didi/LogicFlow/issues/1934
+                // https://github.com/didi/LogicFlow/issues/1926
+                // cancelDrag()->onDragEnd()->updateEdgePointByAnchors()触发线的重新计算
+                // 我们的本意是为了防止mousemove和mouseup没有及时被移除
+                // 因此这里增加if(this.isStartDragging)的判断，isStartDragging=true代表没有触发handleMouseUp()，此时监听还没被移除
+                // 在拖拽情况下(isStartDragging=true)，此时注册了监听，在组件突然销毁时，强制触发cancelDrag进行监听事件的移除
+                _this.cancelDrag();
+            }
+        };
         this.onDragStart = onDragStart;
         this.onDragging = onDragging;
         this.onDragEnd = onDragEnd;

package/lib/view/Anchor.js

@@ -141,14 +141,12 @@ var Anchor = /** @class */ (function (_super) {
             _this.sourceRuleResults.clear();
             _this.targetRuleResults.clear();
             var _b = _this.props, graphModel = _b.graphModel, nodeModel = _b.nodeModel, anchorData = _b.anchorData;
-            if (edgeModel) {
-                graphModel.eventCenter.emit(constant_1.EventType.ANCHOR_DRAGEND, {
-                    data: anchorData,
-                    e: event,
-                    nodeModel: nodeModel,
-                    edgeModel: edgeModel,
-                });
-            }
+            graphModel.eventCenter.emit(constant_1.EventType.ANCHOR_DRAGEND, {
+                data: anchorData,
+                e: event,
+                nodeModel: nodeModel,
+                edgeModel: edgeModel !== null && edgeModel !== void 0 ? edgeModel : undefined,
+            });
         };
         _this.checkEnd = function (event) {
             var _a;

package/lib/view/Control.js

@@ -319,7 +319,7 @@ var ResizeControl = /** @class */ (function (_super) {
         return _this;
     }
     ResizeControl.prototype.componentWillUnmount = function () {
-        this.dragHandler.cancelDrag();
+        this.dragHandler.destroy();
     };
     ResizeControl.prototype.render = function () {
         var _a = this.props, x = _a.x, y = _a.y, direction = _a.direction, model = _a.model;

package/lib/view/Graph.js

@@ -14,17 +14,6 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -104,12 +93,11 @@ var Graph = /** @class */ (function (_super) {
         if (options.height) {
             style.height = "".concat(graphModel.height, "px");
         }
-        var grid = options.grid && overlay_1.Grid.getGridOptions(options.grid);
-        var fakeNode = graphModel.fakeNode, editConfigModel = graphModel.editConfigModel;
+        var fakeNode = graphModel.fakeNode, editConfigModel = graphModel.editConfigModel, background = graphModel.background;
         var adjustEdge = editConfigModel.adjustEdge;
-        return ((0, jsx_runtime_1.jsxs)("div", { className: "lf-graph", "flow-id": graphModel.flowId, children: [(0, jsx_runtime_1.jsxs)(overlay_1.CanvasOverlay, { graphModel: graphModel, dnd: dnd, children: [(0, jsx_runtime_1.jsx)("g", { className: "lf-base", children: (0, lodash_es_1.map)(graphModel.sortElements, function (nodeModel) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "lf-graph", "flow-id": graphModel.flowId, style: style, children: [(0, jsx_runtime_1.jsxs)(overlay_1.CanvasOverlay, { graphModel: graphModel, dnd: dnd, children: [(0, jsx_runtime_1.jsx)("g", { className: "lf-base", children: (0, lodash_es_1.map)(graphModel.sortElements, function (nodeModel) {
                                 return _this.getComponent(nodeModel, graphModel);
-                            }) }), fakeNode ? this.getComponent(fakeNode, graphModel) : ''] }), (0, jsx_runtime_1.jsxs)(overlay_1.ModificationOverlay, { graphModel: graphModel, children: [(0, jsx_runtime_1.jsx)(overlay_1.OutlineOverlay, { graphModel: graphModel }), adjustEdge ? (0, jsx_runtime_1.jsx)(overlay_1.BezierAdjustOverlay, { graphModel: graphModel }) : '', options.snapline !== false ? ((0, jsx_runtime_1.jsx)(overlay_1.SnaplineOverlay, { snaplineModel: snaplineModel })) : ('')] }), (0, jsx_runtime_1.jsx)(overlay_1.ToolOverlay, { graphModel: graphModel, tool: tool }), options.background && ((0, jsx_runtime_1.jsx)(overlay_1.BackgroundOverlay, { background: options.background })), grid && (0, jsx_runtime_1.jsx)(overlay_1.Grid, __assign({}, grid, { graphModel: graphModel }))] }));
+                            }) }), fakeNode ? this.getComponent(fakeNode, graphModel) : ''] }), (0, jsx_runtime_1.jsxs)(overlay_1.ModificationOverlay, { graphModel: graphModel, children: [(0, jsx_runtime_1.jsx)(overlay_1.OutlineOverlay, { graphModel: graphModel }), adjustEdge ? (0, jsx_runtime_1.jsx)(overlay_1.BezierAdjustOverlay, { graphModel: graphModel }) : '', options.snapline !== false ? ((0, jsx_runtime_1.jsx)(overlay_1.SnaplineOverlay, { snaplineModel: snaplineModel })) : ('')] }), (0, jsx_runtime_1.jsx)(overlay_1.ToolOverlay, { graphModel: graphModel, tool: tool }), background && (0, jsx_runtime_1.jsx)(overlay_1.BackgroundOverlay, { background: background }), (0, jsx_runtime_1.jsx)(overlay_1.Grid, { graphModel: graphModel })] }));
     };
     Graph = __decorate([
         __1.observer

package/lib/view/behavior/dnd.js

@@ -44,6 +44,7 @@ var Dnd = /** @class */ (function () {
                 _this.lf.setNodeSnapLine(nodeData);
                 _this.lf.graphModel.eventCenter.emit(constant_1.EventType.NODE_DND_DRAG, {
                     data: nodeData,
+                    e: e,
                 });
             }
             return false;

package/lib/view/edge/BaseEdge.d.ts

@@ -13,6 +13,7 @@ export type IEdgeState = {
 export declare abstract class BaseEdge<P extends IProps> extends Component<P, IEdgeState> {
     static isObserved: boolean;
     static extendsKey?: string;
+    mouseUpDrag?: boolean;
     startTime?: number;
     contextMenuTime?: number;
     clickTimer?: number;
@@ -127,10 +128,13 @@ export declare abstract class BaseEdge<P extends IProps> extends Component<P, IE
      * 不支持重写
      */
     handleMouseDown: (e: MouseEvent) => void;
+    handleMouseUp: () => void;
     /**
      * 不支持重写
      */
-    handleMouseUp: (e: MouseEvent) => void;
+    handleClick: (e: MouseEvent) => void;
+    handleFocus: () => void;
+    handleBlur: () => void;
     /**
      * @overridable 支持重写, 此方法为获取边的形状，如果需要自定义边的形状，请重写此方法。
      * @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

package/lib/view/edge/BaseEdge.js

@@ -149,15 +149,18 @@ var BaseEdge = /** @class */ (function (_super) {
             e.stopPropagation();
             _this.startTime = new Date().getTime();
         };
+        _this.handleMouseUp = function () {
+            var model = _this.props.model;
+            _this.mouseUpDrag = model.isDragging;
+        };
         /**
          * 不支持重写
          */
-        _this.handleMouseUp = function (e) {
+        _this.handleClick = function (e) {
             if (!_this.startTime)
                 return;
-            var time = new Date().getTime() - _this.startTime;
-            if (time > 200)
-                return; // 事件大于200ms，认为是拖拽。
+            if (_this.mouseUpDrag)
+                return; // 如果是拖拽，不触发click事件。
             var isRightClick = e.button === 2;
             if (isRightClick)
                 return;
@@ -217,6 +220,18 @@ var BaseEdge = /** @class */ (function (_super) {
             graphModel.selectEdgeById(model.id, (0, util_1.isMultipleSelect)(e, editConfigModel));
             _this.toFront();
         };
+        _this.handleFocus = function () {
+            var _a = _this.props, model = _a.model, graphModel = _a.graphModel;
+            graphModel.eventCenter.emit(constant_1.EventType.EDGE_FOCUS, {
+                data: model.getData(),
+            });
+        };
+        _this.handleBlur = function () {
+            var _a = _this.props, model = _a.model, graphModel = _a.graphModel;
+            graphModel.eventCenter.emit(constant_1.EventType.EDGE_BLUR, {
+                data: model.getData(),
+            });
+        };
         return _this;
     }
     /**
@@ -405,7 +420,7 @@ var BaseEdge = /** @class */ (function (_super) {
                         isSelected && 'lf-edge-selected',
                     ]
                         .filter(Boolean)
-                        .join(' '), onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp, onContextMenu: this.handleContextMenu, onMouseOver: this.setHoverOn, onMouseEnter: this.setHoverOn, onMouseLeave: this.setHoverOff, children: [this.getShape(), this.getAppend(), this.getText(), this.getArrow()] }), isShowAdjustPoint && isSelected ? this.getAdjustPoints() : ''] }));
+                        .join(' '), onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp, onClick: this.handleClick, onContextMenu: this.handleContextMenu, onMouseOver: this.setHoverOn, onMouseEnter: this.setHoverOn, onMouseLeave: this.setHoverOff, onFocus: this.handleFocus, onBlur: this.handleBlur, children: [this.getShape(), this.getAppend(), this.getText(), this.getArrow()] }), isShowAdjustPoint && isSelected ? this.getAdjustPoints() : ''] }));
     };
     BaseEdge.isObserved = false;
     return BaseEdge;

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

@@ -38,6 +38,8 @@ export declare abstract class BaseNode<P extends IProps = IProps> extends Compon
     handleClick: (e: MouseEvent) => void;
     handleContextMenu: (ev: MouseEvent) => void;
     handleMouseDown: (ev: MouseEvent) => void;
+    handleFocus: () => void;
+    handleBlur: () => void;
     setHoverOn: (ev: MouseEvent) => void;
     setHoverOff: (ev: MouseEvent) => void;
     /**