@logicflow/core 2.1.2 → 2.1.4

package/lib/model/edge/BaseEdgeModel.js

@@ -76,6 +76,7 @@ var BaseEdgeModel = /** @class */ (function () {
      * setAttributes除了初始化调用外，还会在properties发生变化后调用。
      */
     BaseEdgeModel.prototype.initEdgeData = function (data) {
+        var _this = this;
         if (!data.properties) {
             data.properties = {};
         }
@@ -91,10 +92,8 @@ var BaseEdgeModel = /** @class */ (function () {
         var adjustEdgeStartAndEnd = this.graphModel.editConfigModel.adjustEdgeStartAndEnd;
         this.isShowAdjustPoint = adjustEdgeStartAndEnd;
         (0, lodash_es_1.assign)(this, (0, util_1.pickEdgeConfig)(data));
-        var overlapMode = this.graphModel.overlapMode;
-        if (overlapMode === constant_1.OverlapMode.INCREASE) {
-            this.zIndex = data.zIndex || (0, util_1.getZIndex)();
-        }
+        var _a = this.graphModel, overlapMode = _a.overlapMode, eventCenter = _a.eventCenter;
+        this.updateZIndexByOverlap(overlapMode, data.zIndex || (0, util_1.getZIndex)());
         // 设置边的 anchors，也就是边的两个端点
         // 端点依赖于 edgeData 的 sourceNode 和 targetNode
         this.setAnchors();
@@ -102,6 +101,10 @@ var BaseEdgeModel = /** @class */ (function () {
         this.initPoints();
         // 文本位置依赖于边上的所有拐点
         this.formatText(data);
+        eventCenter.on('overlap:change', function (data) {
+            var newMode = data.overlapMode;
+            _this.updateZIndexByOverlap(newMode, _this.zIndex || (0, util_1.getZIndex)());
+        });
     };
     /**
      * 设置model属性
@@ -325,7 +328,9 @@ var BaseEdgeModel = /** @class */ (function () {
             startPoint: (0, lodash_es_1.assign)({}, this.startPoint),
             endPoint: (0, lodash_es_1.assign)({}, this.endPoint),
         };
-        if (this.graphModel.overlapMode === constant_1.OverlapMode.INCREASE) {
+        // 因为默认模式和边在上模式下，对节点的zIndex要求不高（因为渲染的时候会按照模式对所有元素进行排序）
+        // 所以只在递增模式和静态模式下设置zIndex
+        if ([constant_1.OverlapMode.INCREASE, constant_1.OverlapMode.STATIC].includes(this.graphModel.overlapMode)) {
             data.zIndex = this.zIndex;
         }
         var _a = this.text, x = _a.x, y = _a.y, value = _a.value;
@@ -589,6 +594,22 @@ var BaseEdgeModel = /** @class */ (function () {
         this.updateStartPoint({ x: startPoint.x, y: startPoint.y });
         this.updateEndPoint({ x: endPoint.x, y: endPoint.y });
     };
+    // 堆叠模式变化时，更新zIndex
+    BaseEdgeModel.prototype.updateZIndexByOverlap = function (overlapMode, defaultZIndex) {
+        switch (overlapMode) {
+            case constant_1.OverlapMode.DEFAULT:
+                this.zIndex = 0;
+                break;
+            case constant_1.OverlapMode.EDGE_TOP:
+                this.zIndex = 1;
+                break;
+            case constant_1.OverlapMode.INCREASE:
+                this.zIndex = defaultZIndex;
+                break;
+            default:
+                break;
+        }
+    };
     BaseEdgeModel.BaseType = constant_1.ElementType.EDGE;
     __decorate([
         mobx_1.observable
@@ -758,6 +779,9 @@ var BaseEdgeModel = /** @class */ (function () {
     __decorate([
         mobx_1.action
     ], BaseEdgeModel.prototype, "updateAfterAdjustStartAndEnd", null);
+    __decorate([
+        mobx_1.action
+    ], BaseEdgeModel.prototype, "updateZIndexByOverlap", null);
     return BaseEdgeModel;
 }());
 exports.BaseEdgeModel = BaseEdgeModel;

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

@@ -1,6 +1,6 @@
 import { GraphModel, Model } from '..';
 import LogicFlow from '../../LogicFlow';
-import { ElementState, ElementType, ModelType, TextMode } from '../../constant';
+import { ElementState, ElementType, ModelType, OverlapMode, TextMode } from '../../constant';
 import { ResizeControl } from '../../view/Control';
 import AnchorConfig = Model.AnchorConfig;
 import GraphElements = LogicFlow.GraphElements;
@@ -288,6 +288,7 @@ export declare class BaseNodeModel<P extends PropertiesType = PropertiesType> im
     updateStyles(styles: Record<string, any>): void;
     setZIndex(zIndex?: number): void;
     updateAttributes(attributes: any): void;
+    updateZIndexByOverlap(overlapMode: OverlapMode, defaultZIndex: any): void;
 }
 export declare namespace BaseNodeModel {
     type PointTuple = [number, number];

package/lib/model/node/BaseNodeModel.js

@@ -175,6 +175,7 @@ var BaseNodeModel = /** @class */ (function () {
      * setAttributes 除了初始化调用外，还会在 properties 发生变化了调用。
      */
     BaseNodeModel.prototype.initNodeData = function (data) {
+        var _this = this;
         if (!data.properties) {
             data.properties = {};
         }
@@ -189,10 +190,12 @@ var BaseNodeModel = /** @class */ (function () {
         // 在下面又将 NodeConfig 中的数据赋值给了 this，应该会触发 setAttributes，确认是否符合预期
         // TODO: 确认 constructor 中赋值 properties 是否必要，此处将 NodeConfig 中所有属性赋值给 this，包括 rotate、rotatable，resizable 等
         (0, lodash_es_1.assign)(this, (0, util_1.pickNodeConfig)(data));
-        var overlapMode = this.graphModel.overlapMode;
-        if (overlapMode === constant_1.OverlapMode.INCREASE) {
-            this.zIndex = data.zIndex || (0, util_1.getZIndex)();
-        }
+        var _a = this.graphModel, overlapMode = _a.overlapMode, eventCenter = _a.eventCenter;
+        this.updateZIndexByOverlap(overlapMode, data.zIndex || (0, util_1.getZIndex)());
+        eventCenter.on('overlap:change', function (data) {
+            var newMode = data.overlapMode;
+            _this.updateZIndexByOverlap(newMode, _this.zIndex || (0, util_1.getZIndex)());
+        });
     };
     /**
      * 设置model属性，每次properties发生变化会触发
@@ -305,7 +308,9 @@ var BaseNodeModel = /** @class */ (function () {
         if (this.rotate) {
             data.rotate = this.rotate;
         }
-        if (this.graphModel.overlapMode === constant_1.OverlapMode.INCREASE) {
+        // 因为默认模式和节点在上模式下，对边的zIndex要求不高（因为渲染的时候会按照模式对所有元素进行排序）
+        // 所以只在递增模式和静态模式下设置zIndex
+        if ([constant_1.OverlapMode.INCREASE, constant_1.OverlapMode.STATIC].includes(this.graphModel.overlapMode)) {
             data.zIndex = this.zIndex;
         }
         if (value) {
@@ -794,6 +799,22 @@ var BaseNodeModel = /** @class */ (function () {
     BaseNodeModel.prototype.updateAttributes = function (attributes) {
         (0, lodash_es_1.assign)(this, attributes);
     };
+    // 堆叠模式变化时，更新zIndex
+    BaseNodeModel.prototype.updateZIndexByOverlap = function (overlapMode, defaultZIndex) {
+        switch (overlapMode) {
+            case constant_1.OverlapMode.DEFAULT:
+                this.zIndex = 1;
+                break;
+            case constant_1.OverlapMode.EDGE_TOP:
+                this.zIndex = 0;
+                break;
+            case constant_1.OverlapMode.INCREASE:
+                this.zIndex = defaultZIndex;
+                break;
+            default:
+                break;
+        }
+    };
     BaseNodeModel.BaseType = constant_1.ElementType.NODE;
     __decorate([
         mobx_1.observable
@@ -948,6 +969,9 @@ var BaseNodeModel = /** @class */ (function () {
     __decorate([
         mobx_1.action
     ], BaseNodeModel.prototype, "updateAttributes", null);
+    __decorate([
+        mobx_1.action
+    ], BaseNodeModel.prototype, "updateZIndexByOverlap", null);
     return BaseNodeModel;
 }());
 exports.BaseNodeModel = BaseNodeModel;

package/lib/view/edge/BaseEdge.js

@@ -308,12 +308,21 @@ var BaseEdge = /** @class */ (function (_super) {
         var _a = model.getArrowStyle(), _b = _a.refY, refY = _b === void 0 ? 0 : _b, _c = _a.refX, refX = _c === void 0 ? 2 : _c;
         var _d = __read(this.getLastTwoPoints(), 2), start = _d[0], end = _d[1];
         var theta = 'auto';
-        if (start !== null && end !== null) {
-            theta = (0, util_1.degrees)((0, util_1.getThetaOfVector)({
-                x: end.x - start.x,
-                y: end.y - start.y,
-                z: 0,
-            }));
+        // 防止无效点和零长度向量以避免 NaN 方向
+        if (start && end) {
+            var dx = end.x - start.x;
+            var dy = end.y - start.y;
+            // 仅在有实际方向时才计算
+            if (dx !== 0 || dy !== 0) {
+                var computed = (0, util_1.degrees)((0, util_1.getThetaOfVector)({
+                    x: dx,
+                    y: dy,
+                    z: 0,
+                }));
+                if (Number.isFinite(computed) && !Number.isNaN(computed)) {
+                    theta = computed;
+                }
+            }
         }
         return ((0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsxs)("defs", { children: [(0, jsx_runtime_1.jsx)("marker", { id: "marker-start-".concat(id), refX: -refX, refY: refY, overflow: "visible", orient: "auto", markerUnits: "userSpaceOnUse", children: this.getStartArrow() }), (0, jsx_runtime_1.jsx)("marker", { id: "marker-end-".concat(id), refX: refX, refY: refY, overflow: "visible", orient: theta, markerUnits: "userSpaceOnUse", children: this.getEndArrow() })] }) }));
     };

package/lib/view/node/BaseNode.js

@@ -177,11 +177,19 @@ var BaseNode = /** @class */ (function (_super) {
             // 节点拖拽进画布之后，不触发click事件相关emit
             // 点拖拽进画布没有触发mousedown事件，没有startTime，用这个值做区分
             var isDragging = _this.mouseUpDrag === false;
+            var curTime = new Date().getTime();
             if (!_this.startTime)
                 return;
+            var timeInterval = curTime - _this.startTime;
             var _a = _this.props, model = _a.model, graphModel = _a.graphModel;
-            if (!isDragging)
-                return; // 如果是拖拽, 不触发click事件。
+            // 这里会有一种极端情况：当网格大小是1或者关闭网格吸附时，用触摸板点击节点会触发拖拽事件导致节点无法选中
+            // 当触摸板点击节点时,为了防止误触发拖拽导致节点无法选中，允许在非拖拽状态且时间间隔小于100ms时触发点击事件
+            if (!isDragging && timeInterval > 100)
+                return;
+            if (!isDragging) {
+                _this.onDragEnd();
+                _this.handleMouseUp();
+            }
             // 节点数据，多为事件对象数据抛出
             var nodeData = model.getData();
             var position = graphModel.getPointByClient({
@@ -272,6 +280,9 @@ var BaseNode = /** @class */ (function (_super) {
             });
         };
         _this.handleBlur = function () {
+            // 当节点通过自定义锚点实现节点删除时，这里props会变成undefined，需兼容一下
+            if (!_this.props)
+                return;
             var _a = _this.props, model = _a.model, graphModel = _a.graphModel;
             graphModel.eventCenter.emit(constant_1.EventType.NODE_BLUR, {
                 data: model.getData(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logicflow/core",
-  "version": "2.1.2",
+  "version": "2.1.4",
   "description": "LogicFlow, help you quickly create flowcharts",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/LogicFlow.tsx

@@ -26,7 +26,12 @@ import Tool from './tool'
 import History from './history'
 import Keyboard, { initDefaultShortcut } from './keyboard'
 import { EventCallback, CallbackArgs, EventArgs } from './event/eventEmitter'
-import { ElementType, EventType, SegmentDirection } from './constant'
+import {
+  ElementType,
+  EventType,
+  OverlapMode,
+  SegmentDirection,
+} from './constant'
 import { Grid } from './view/overlay'
 
 import Extension = LogicFlow.Extension
@@ -1088,6 +1093,9 @@ export class LogicFlow {
     this.render({})
   }
 
+  setOverlapMode(mode: OverlapMode) {
+    this.graphModel.setOverlapMode(mode)
+  }
   /*********************************************************
    * LogicFlow Render方法
    ********************************************************/

package/src/constant/index.ts

@@ -162,8 +162,10 @@ export enum EventType {
 }
 
 export enum OverlapMode {
+  STATIC = -1, // 静态(元素层级不随点击变化)
   DEFAULT = 0, // 默认
   INCREASE = 1, // 递增
+  EDGE_TOP = 2, // 边固定在顶部
 }
 
 export enum SegmentDirection {

package/src/model/GraphModel.ts

@@ -181,6 +181,7 @@ export class GraphModel {
     this.animation = setupAnimation(animation)
     this.overlapMode = options.overlapMode || OverlapMode.DEFAULT
 
+    this.isMiniMap = options.isMiniMap || false
     this.width = options.width ?? this.rootEl.getBoundingClientRect().width
     this.isContainerWidth = isNil(options.width)
     this.height = options.height ?? this.rootEl.getBoundingClientRect().height
@@ -249,9 +250,11 @@ export class GraphModel {
    * todo: 性能优化
    */
   @computed get sortElements() {
-    const elements = [...this.nodes, ...this.edges].sort(
-      (a, b) => a.zIndex - b.zIndex,
-    )
+    const sortElement = (list) => {
+      return [...list].sort((a, b) => a.zIndex - b.zIndex)
+    }
+    // 默认情况下节点与边按照 zIndex 排序
+    const elements = sortElement([...this.nodes, ...this.edges])
 
     // 只显示可见区域的节点和边
     const visibleElements: (BaseNodeModel | BaseEdgeModel)[] = []
@@ -717,6 +720,22 @@ export class GraphModel {
     }
   }
 
+  /**
+   * 内部保留方法，请勿直接使用
+   */
+
+  /**
+   * 设置重叠模式
+   * @param mode 重叠模式
+   */
+  @action
+  setOverlapMode(mode: OverlapMode) {
+    this.overlapMode = mode
+    this.eventCenter.emit('overlap:change', {
+      overlapMode: mode,
+    })
+  }
+
   /**
    * 更新元素的文本模式
    * @param mode
@@ -767,14 +786,19 @@ export class GraphModel {
   toFront(id: string) {
     const element = this.nodesMap[id]?.model || this.edgesMap[id]?.model
     if (element) {
-      if (this.overlapMode === OverlapMode.DEFAULT) {
-        this.topElement?.setZIndex()
-        element.setZIndex(ELEMENT_MAX_Z_INDEX)
-        this.topElement = element
+      // 静态模式toFront不做处理
+      if (this.overlapMode === OverlapMode.STATIC) {
+        return
       }
+      // 递增模式下，将需指定元素zIndex设置为当前最大zIndex + 1
       if (this.overlapMode === OverlapMode.INCREASE) {
         this.setElementZIndex(id, 'top')
+        return
       }
+      // 默认模式（节点在上）和边在上模式下，将原置顶元素重新恢复原有层级，将需指定元素zIndex设置为最大zIndex
+      this.topElement?.setZIndex()
+      element.setZIndex(ELEMENT_MAX_Z_INDEX)
+      this.topElement = element
     }
   }
 
@@ -1229,7 +1253,9 @@ export class GraphModel {
     /**
      * 如果堆叠模式为默认模式，则将置顶元素重新恢复原有层级
      */
-    if (this.overlapMode === OverlapMode.DEFAULT) {
+    if (
+      [OverlapMode.DEFAULT, OverlapMode.EDGE_TOP].includes(this.overlapMode)
+    ) {
       this.topElement?.setZIndex()
     }
   }
@@ -1584,7 +1610,7 @@ export class GraphModel {
   }
 
   /**
-   * 获取图形区域虚拟矩型的尺寸和中心坐标
+   * 获取图形区域虚拟矩形的尺寸和中心坐标
    * @returns
    */
   getVirtualRectSize(): GraphModel.VirtualRectProps {
@@ -1611,7 +1637,7 @@ export class GraphModel {
     const virtualRectWidth = maxX - minX || 0
     const virtualRectHeight = maxY - minY || 0
 
-    // 获取虚拟矩型的中心坐标
+    // 获取虚拟矩形的中心坐标
     const virtualRectCenterPositionX = minX + virtualRectWidth / 2
     const virtualRectCenterPositionY = minY + virtualRectHeight / 2
 
@@ -1717,7 +1743,6 @@ export class GraphModel {
   @action setPartial(partial: boolean): void {
     this.partial = partial
   }
-
   /** 销毁当前实例 */
   destroy() {
     try {

package/src/model/edge/BaseEdgeModel.ts

@@ -144,10 +144,8 @@ export class BaseEdgeModel<P extends PropertiesType = PropertiesType>
     } = this.graphModel
     this.isShowAdjustPoint = adjustEdgeStartAndEnd
     assign(this, pickEdgeConfig(data))
-    const { overlapMode } = this.graphModel
-    if (overlapMode === OverlapMode.INCREASE) {
-      this.zIndex = data.zIndex || getZIndex()
-    }
+    const { overlapMode, eventCenter } = this.graphModel
+    this.updateZIndexByOverlap(overlapMode, data.zIndex || getZIndex())
     // 设置边的 anchors，也就是边的两个端点
     // 端点依赖于 edgeData 的 sourceNode 和 targetNode
     this.setAnchors()
@@ -155,6 +153,11 @@ export class BaseEdgeModel<P extends PropertiesType = PropertiesType>
     this.initPoints()
     // 文本位置依赖于边上的所有拐点
     this.formatText(data)
+
+    eventCenter.on('overlap:change', (data) => {
+      const { overlapMode: newMode } = data
+      this.updateZIndexByOverlap(newMode, this.zIndex || getZIndex())
+    })
   }
 
   /**
@@ -397,7 +400,13 @@ export class BaseEdgeModel<P extends PropertiesType = PropertiesType>
       startPoint: assign({}, this.startPoint),
       endPoint: assign({}, this.endPoint),
     }
-    if (this.graphModel.overlapMode === OverlapMode.INCREASE) {
+    // 因为默认模式和边在上模式下，对节点的zIndex要求不高（因为渲染的时候会按照模式对所有元素进行排序）
+    // 所以只在递增模式和静态模式下设置zIndex
+    if (
+      [OverlapMode.INCREASE, OverlapMode.STATIC].includes(
+        this.graphModel.overlapMode,
+      )
+    ) {
       data.zIndex = this.zIndex
     }
     const { x, y, value } = this.text
@@ -745,6 +754,24 @@ export class BaseEdgeModel<P extends PropertiesType = PropertiesType>
     this.updateStartPoint({ x: startPoint.x, y: startPoint.y })
     this.updateEndPoint({ x: endPoint.x, y: endPoint.y })
   }
+
+  // 堆叠模式变化时，更新zIndex
+  @action
+  updateZIndexByOverlap(overlapMode: OverlapMode, defaultZIndex) {
+    switch (overlapMode) {
+      case OverlapMode.DEFAULT:
+        this.zIndex = 0
+        break
+      case OverlapMode.EDGE_TOP:
+        this.zIndex = 1
+        break
+      case OverlapMode.INCREASE:
+        this.zIndex = defaultZIndex
+        break
+      default:
+        break
+    }
+  }
 }
 
 export default BaseEdgeModel

package/src/model/node/BaseNodeModel.ts

@@ -206,10 +206,12 @@ export class BaseNodeModel<P extends PropertiesType = PropertiesType>
     // TODO: 确认 constructor 中赋值 properties 是否必要，此处将 NodeConfig 中所有属性赋值给 this，包括 rotate、rotatable，resizable 等
     assign(this, pickNodeConfig(data))
 
-    const { overlapMode } = this.graphModel
-    if (overlapMode === OverlapMode.INCREASE) {
-      this.zIndex = data.zIndex || getZIndex()
-    }
+    const { overlapMode, eventCenter } = this.graphModel
+    this.updateZIndexByOverlap(overlapMode, data.zIndex || getZIndex())
+    eventCenter.on('overlap:change', (data) => {
+      const { overlapMode: newMode } = data
+      this.updateZIndexByOverlap(newMode, this.zIndex || getZIndex())
+    })
   }
 
   /**
@@ -339,7 +341,13 @@ export class BaseNodeModel<P extends PropertiesType = PropertiesType>
     if (this.rotate) {
       data.rotate = this.rotate
     }
-    if (this.graphModel.overlapMode === OverlapMode.INCREASE) {
+    // 因为默认模式和节点在上模式下，对边的zIndex要求不高（因为渲染的时候会按照模式对所有元素进行排序）
+    // 所以只在递增模式和静态模式下设置zIndex
+    if (
+      [OverlapMode.INCREASE, OverlapMode.STATIC].includes(
+        this.graphModel.overlapMode,
+      )
+    ) {
       data.zIndex = this.zIndex
     }
     if (value) {
@@ -914,6 +922,23 @@ export class BaseNodeModel<P extends PropertiesType = PropertiesType>
   @action updateAttributes(attributes: any) {
     assign(this, attributes)
   }
+  // 堆叠模式变化时，更新zIndex
+  @action
+  updateZIndexByOverlap(overlapMode: OverlapMode, defaultZIndex) {
+    switch (overlapMode) {
+      case OverlapMode.DEFAULT:
+        this.zIndex = 1
+        break
+      case OverlapMode.EDGE_TOP:
+        this.zIndex = 0
+        break
+      case OverlapMode.INCREASE:
+        this.zIndex = defaultZIndex
+        break
+      default:
+        break
+    }
+  }
 }
 
 export namespace BaseNodeModel {

package/src/view/edge/BaseEdge.tsx

@@ -124,14 +124,23 @@ export abstract class BaseEdge<P extends IProps> extends Component<
     const { refY = 0, refX = 2 } = model.getArrowStyle()
     const [start, end] = this.getLastTwoPoints()
     let theta: string | number = 'auto'
-    if (start !== null && end !== null) {
-      theta = degrees(
-        getThetaOfVector({
-          x: end.x - start.x,
-          y: end.y - start.y,
-          z: 0,
-        }),
-      )
+    // 防止无效点和零长度向量以避免 NaN 方向
+    if (start && end) {
+      const dx = end.x - start.x
+      const dy = end.y - start.y
+      // 仅在有实际方向时才计算
+      if (dx !== 0 || dy !== 0) {
+        const computed = degrees(
+          getThetaOfVector({
+            x: dx,
+            y: dy,
+            z: 0,
+          }),
+        )
+        if (Number.isFinite(computed) && !Number.isNaN(computed)) {
+          theta = computed
+        }
+      }
     }
     return (
       <g>

package/src/view/node/BaseNode.tsx

@@ -88,9 +88,9 @@ export abstract class BaseNode<P extends IProps = IProps> extends Component<
     }
   }
 
-  componentDidMount() {}
+  componentDidMount() { }
 
-  componentDidUpdate() {}
+  componentDidUpdate() { }
 
   abstract getShape(): h.JSX.Element | null
 
@@ -336,9 +336,17 @@ export abstract class BaseNode<P extends IProps = IProps> extends Component<
     // 节点拖拽进画布之后，不触发click事件相关emit
     // 点拖拽进画布没有触发mousedown事件，没有startTime，用这个值做区分
     const isDragging = this.mouseUpDrag === false
+    const curTime = new Date().getTime()
     if (!this.startTime) return
+    const timeInterval = curTime - this.startTime
     const { model, graphModel } = this.props
-    if (!isDragging) return // 如果是拖拽, 不触发click事件。
+    // 这里会有一种极端情况：当网格大小是1或者关闭网格吸附时，用触摸板点击节点会触发拖拽事件导致节点无法选中
+    // 当触摸板点击节点时,为了防止误触发拖拽导致节点无法选中，允许在非拖拽状态且时间间隔小于100ms时触发点击事件
+    if (!isDragging && timeInterval > 100) return
+    if (!isDragging) {
+      this.onDragEnd()
+      this.handleMouseUp()
+    }
     // 节点数据，多为事件对象数据抛出
     const nodeData = model.getData()
     const position = graphModel.getPointByClient({
@@ -440,6 +448,8 @@ export abstract class BaseNode<P extends IProps = IProps> extends Component<
   }
 
   handleBlur = () => {
+    // 当节点通过自定义锚点实现节点删除时，这里props会变成undefined，需兼容一下
+    if (!this.props) return
     const { model, graphModel } = this.props
     graphModel.eventCenter.emit(EventType.NODE_BLUR, {
       data: model.getData(),