@logicflow/core 2.1.3 → 2.1.5

package/lib/model/GraphModel.js

@@ -119,6 +119,7 @@ var GraphModel = /** @class */ (function () {
         this.edgeType = options.edgeType || 'polyline';
         this.animation = (0, util_1.setupAnimation)(animation);
         this.overlapMode = options.overlapMode || constant_1.OverlapMode.DEFAULT;
+        this.isMiniMap = options.isMiniMap || false;
         this.width = (_a = options.width) !== null && _a !== void 0 ? _a : this.rootEl.getBoundingClientRect().width;
         this.isContainerWidth = (0, lodash_es_1.isNil)(options.width);
         this.height = (_b = options.height) !== null && _b !== void 0 ? _b : this.rootEl.getBoundingClientRect().height;
@@ -129,6 +130,10 @@ var GraphModel = /** @class */ (function () {
                 for (var entries_1 = __values(entries), entries_1_1 = entries_1.next(); !entries_1_1.done; entries_1_1 = entries_1.next()) {
                     var entry = entries_1_1.value;
                     if (entry.target === _this.rootEl) {
+                        // 检查元素是否仍在DOM中
+                        var isElementInDOM = document.body.contains(_this.rootEl);
+                        if (!isElementInDOM)
+                            return;
                         _this.resize();
                         _this.eventCenter.emit('graph:resize', {
                             target: _this.rootEl,
@@ -199,7 +204,11 @@ var GraphModel = /** @class */ (function () {
          * todo: 性能优化
          */
         get: function () {
-            var elements = __spreadArray(__spreadArray([], __read(this.nodes), false), __read(this.edges), false).sort(function (a, b) { return a.zIndex - b.zIndex; });
+            var sortElement = function (list) {
+                return __spreadArray([], __read(list), false).sort(function (a, b) { return a.zIndex - b.zIndex; });
+            };
+            // 默认情况下节点与边按照 zIndex 排序
+            var elements = sortElement(__spreadArray(__spreadArray([], __read(this.nodes), false), __read(this.edges), false));
             // 只显示可见区域的节点和边
             var visibleElements = [];
             // TODO: 缓存，优化计算效率 by xutao. So how?
@@ -643,6 +652,19 @@ var GraphModel = /** @class */ (function () {
             return model.textMode || edgeTextMode || textMode || constant_1.TextMode.TEXT;
         }
     };
+    /**
+     * 内部保留方法，请勿直接使用
+     */
+    /**
+     * 设置重叠模式
+     * @param mode 重叠模式
+     */
+    GraphModel.prototype.setOverlapMode = function (mode) {
+        this.overlapMode = mode;
+        this.eventCenter.emit('overlap:change', {
+            overlapMode: mode,
+        });
+    };
     /**
      * 更新元素的文本模式
      * @param mode
@@ -685,14 +707,19 @@ var GraphModel = /** @class */ (function () {
         var _a, _b, _c;
         var element = ((_a = this.nodesMap[id]) === null || _a === void 0 ? void 0 : _a.model) || ((_b = this.edgesMap[id]) === null || _b === void 0 ? void 0 : _b.model);
         if (element) {
-            if (this.overlapMode === constant_1.OverlapMode.DEFAULT) {
-                (_c = this.topElement) === null || _c === void 0 ? void 0 : _c.setZIndex();
-                element.setZIndex(constant_1.ELEMENT_MAX_Z_INDEX);
-                this.topElement = element;
+            // 静态模式toFront不做处理
+            if (this.overlapMode === constant_1.OverlapMode.STATIC) {
+                return;
             }
+            // 递增模式下，将需指定元素zIndex设置为当前最大zIndex + 1
             if (this.overlapMode === constant_1.OverlapMode.INCREASE) {
                 this.setElementZIndex(id, 'top');
+                return;
             }
+            // 默认模式（节点在上）和边在上模式下，将原置顶元素重新恢复原有层级，将需指定元素zIndex设置为最大zIndex
+            (_c = this.topElement) === null || _c === void 0 ? void 0 : _c.setZIndex();
+            element.setZIndex(constant_1.ELEMENT_MAX_Z_INDEX);
+            this.topElement = element;
         }
     };
     /**
@@ -1084,7 +1111,7 @@ var GraphModel = /** @class */ (function () {
         /**
          * 如果堆叠模式为默认模式，则将置顶元素重新恢复原有层级
          */
-        if (this.overlapMode === constant_1.OverlapMode.DEFAULT) {
+        if ([constant_1.OverlapMode.DEFAULT, constant_1.OverlapMode.EDGE_TOP].includes(this.overlapMode)) {
             (_a = this.topElement) === null || _a === void 0 ? void 0 : _a.setZIndex();
         }
     };
@@ -1365,12 +1392,30 @@ var GraphModel = /** @class */ (function () {
      * 重新设置画布的宽高
      */
     GraphModel.prototype.resize = function (width, height) {
-        this.width = width !== null && width !== void 0 ? width : this.rootEl.getBoundingClientRect().width;
-        this.isContainerWidth = (0, lodash_es_1.isNil)(width);
-        this.height = height !== null && height !== void 0 ? height : this.rootEl.getBoundingClientRect().height;
-        this.isContainerHeight = (0, lodash_es_1.isNil)(height);
-        if (!this.width || !this.height) {
-            console.warn('渲染画布的时候无法获取画布宽高，请确认在container已挂载到DOM。@see https://github.com/didi/LogicFlow/issues/675');
+        // 检查当前实例是否已被销毁或rootEl不存在
+        if (!this.rootEl)
+            return;
+        // 检查元素是否仍在DOM中
+        var isElementInDOM = document.body.contains(this.rootEl);
+        if (!isElementInDOM)
+            return;
+        // 检查元素是否可见
+        var isVisible = this.rootEl.offsetParent !== null;
+        if (!isVisible)
+            return;
+        try {
+            this.width = width !== null && width !== void 0 ? width : this.rootEl.getBoundingClientRect().width;
+            this.isContainerWidth = (0, lodash_es_1.isNil)(width);
+            this.height = height !== null && height !== void 0 ? height : this.rootEl.getBoundingClientRect().height;
+            this.isContainerHeight = (0, lodash_es_1.isNil)(height);
+            // 只有在元素可见且应该有宽高的情况下才显示警告
+            if (isVisible && (!this.width || !this.height)) {
+                console.warn('渲染画布的时候无法获取画布宽高，请确认在container已挂载到DOM。@see https://github.com/didi/LogicFlow/issues/675');
+            }
+        }
+        catch (error) {
+            // 捕获可能的DOM操作错误
+            console.warn('获取画布宽高时发生错误:', error);
         }
     };
     /**
@@ -1385,7 +1430,7 @@ var GraphModel = /** @class */ (function () {
         this.elementsModelMap.clear();
     };
     /**
-     * 获取图形区域虚拟矩型的尺寸和中心坐标
+     * 获取图形区域虚拟矩形的尺寸和中心坐标
      * @returns
      */
     GraphModel.prototype.getVirtualRectSize = function () {
@@ -1409,7 +1454,7 @@ var GraphModel = /** @class */ (function () {
         var maxY = Math.max.apply(Math, __spreadArray([], __read(nodesY), false));
         var virtualRectWidth = maxX - minX || 0;
         var virtualRectHeight = maxY - minY || 0;
-        // 获取虚拟矩型的中心坐标
+        // 获取虚拟矩形的中心坐标
         var virtualRectCenterPositionX = minX + virtualRectWidth / 2;
         var virtualRectCenterPositionY = minY + virtualRectHeight / 2;
         return {
@@ -1564,6 +1609,9 @@ var GraphModel = /** @class */ (function () {
     __decorate([
         mobx_1.computed
     ], GraphModel.prototype, "selectNodes", null);
+    __decorate([
+        mobx_1.action
+    ], GraphModel.prototype, "setOverlapMode", null);
     __decorate([
         mobx_1.action
     ], GraphModel.prototype, "setTextMode", null);

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

@@ -1,6 +1,6 @@
 import { BaseNodeModel, GraphModel, Model } from '..';
 import LogicFlow from '../../LogicFlow';
-import { ElementState, ElementType, ModelType, TextMode } from '../../constant';
+import { ElementState, ElementType, ModelType, OverlapMode, TextMode } from '../../constant';
 import Point = LogicFlow.Point;
 import EdgeData = LogicFlow.EdgeData;
 import EdgeConfig = LogicFlow.EdgeConfig;
@@ -271,5 +271,6 @@ export declare class BaseEdgeModel<P extends PropertiesType = PropertiesType> im
     getAdjustStart(): LogicFlow.Point;
     getAdjustEnd(): LogicFlow.Point;
     updateAfterAdjustStartAndEnd({ startPoint, endPoint, }: Record<'startPoint' | 'endPoint', Point>): void;
+    updateZIndexByOverlap(overlapMode: OverlapMode, defaultZIndex: any): void;
 }
 export default BaseEdgeModel;

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/node/BaseNode.d.ts

@@ -19,6 +19,7 @@ export declare abstract class BaseNode<P extends IProps = IProps> extends Compon
     mouseUpDrag?: boolean;
     startTime?: number;
     modelDisposer: IReactionDisposer;
+    mouseDownPosition?: LogicFlow.Position;
     constructor(props: IProps);
     componentWillUnmount(): void;
     componentDidMount(): void;

package/lib/view/node/BaseNode.js

@@ -92,11 +92,15 @@ var BaseNode = /** @class */ (function (_super) {
             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 +118,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) {
@@ -177,11 +181,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 > 300)
+                return;
+            if (!isDragging) {
+                _this.onDragEnd();
+                _this.handleMouseUp();
+            }
             // 节点数据，多为事件对象数据抛出
             var nodeData = model.getData();
             var position = graphModel.getPointByClient({
@@ -259,6 +271,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) {
@@ -272,6 +285,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.3",
+  "version": "2.1.5",
   "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
@@ -191,6 +192,9 @@ export class GraphModel {
         ((entries) => {
           for (const entry of entries) {
             if (entry.target === this.rootEl) {
+              // 检查元素是否仍在DOM中
+              const isElementInDOM = document.body.contains(this.rootEl)
+              if (!isElementInDOM) return
               this.resize()
               this.eventCenter.emit('graph:resize', {
                 target: this.rootEl,
@@ -249,9 +253,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 +723,22 @@ export class GraphModel {
     }
   }
 
+  /**
+   * 内部保留方法，请勿直接使用
+   */
+
+  /**
+   * 设置重叠模式
+   * @param mode 重叠模式
+   */
+  @action
+  setOverlapMode(mode: OverlapMode) {
+    this.overlapMode = mode
+    this.eventCenter.emit('overlap:change', {
+      overlapMode: mode,
+    })
+  }
+
   /**
    * 更新元素的文本模式
    * @param mode
@@ -767,14 +789,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 +1256,9 @@ export class GraphModel {
     /**
      * 如果堆叠模式为默认模式，则将置顶元素重新恢复原有层级
      */
-    if (this.overlapMode === OverlapMode.DEFAULT) {
+    if (
+      [OverlapMode.DEFAULT, OverlapMode.EDGE_TOP].includes(this.overlapMode)
+    ) {
       this.topElement?.setZIndex()
     }
   }
@@ -1558,15 +1587,32 @@ export class GraphModel {
    * 重新设置画布的宽高
    */
   @action resize(width?: number, height?: number): void {
-    this.width = width ?? this.rootEl.getBoundingClientRect().width
-    this.isContainerWidth = isNil(width)
-    this.height = height ?? this.rootEl.getBoundingClientRect().height
-    this.isContainerHeight = isNil(height)
-
-    if (!this.width || !this.height) {
-      console.warn(
-        '渲染画布的时候无法获取画布宽高，请确认在container已挂载到DOM。@see https://github.com/didi/LogicFlow/issues/675',
-      )
+    // 检查当前实例是否已被销毁或rootEl不存在
+    if (!this.rootEl) return
+
+    // 检查元素是否仍在DOM中
+    const isElementInDOM = document.body.contains(this.rootEl)
+    if (!isElementInDOM) return
+
+    // 检查元素是否可见
+    const isVisible = this.rootEl.offsetParent !== null
+    if (!isVisible) return
+
+    try {
+      this.width = width ?? this.rootEl.getBoundingClientRect().width
+      this.isContainerWidth = isNil(width)
+      this.height = height ?? this.rootEl.getBoundingClientRect().height
+      this.isContainerHeight = isNil(height)
+
+      // 只有在元素可见且应该有宽高的情况下才显示警告
+      if (isVisible && (!this.width || !this.height)) {
+        console.warn(
+          '渲染画布的时候无法获取画布宽高，请确认在container已挂载到DOM。@see https://github.com/didi/LogicFlow/issues/675',
+        )
+      }
+    } catch (error) {
+      // 捕获可能的DOM操作错误
+      console.warn('获取画布宽高时发生错误:', error)
     }
   }
 
@@ -1584,7 +1630,7 @@ export class GraphModel {
   }
 
   /**
-   * 获取图形区域虚拟矩型的尺寸和中心坐标
+   * 获取图形区域虚拟矩形的尺寸和中心坐标
    * @returns
    */
   getVirtualRectSize(): GraphModel.VirtualRectProps {
@@ -1611,7 +1657,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 +1763,6 @@ export class GraphModel {
   @action setPartial(partial: boolean): void {
     this.partial = partial
   }
-
   /** 销毁当前实例 */
   destroy() {
     try {