@logicflow/core 2.1.2 → 2.1.4

package/es/LogicFlow.d.ts

@@ -7,7 +7,7 @@ import Tool from './tool';
 import History from './history';
 import Keyboard from './keyboard';
 import { EventCallback, CallbackArgs, EventArgs } from './event/eventEmitter';
-import { EventType, SegmentDirection } from './constant';
+import { EventType, OverlapMode, SegmentDirection } from './constant';
 import { Grid } from './view/overlay';
 import Extension = LogicFlow.Extension;
 import ExtensionConfig = LogicFlow.ExtensionConfig;
@@ -430,6 +430,7 @@ export declare class LogicFlow {
      * 清空画布
      */
     clearData(): void;
+    setOverlapMode(mode: OverlapMode): void;
     /*********************************************************
      * LogicFlow Render方法
      ********************************************************/

package/es/LogicFlow.js

@@ -48,7 +48,7 @@ import { Dnd, snapline } from './view/behavior';
 import Tool from './tool';
 import History from './history';
 import Keyboard, { initDefaultShortcut } from './keyboard';
-import { ElementType, EventType } from './constant';
+import { ElementType, EventType, } from './constant';
 var pluginFlag = Symbol('plugin registered by Logicflow.use');
 var LogicFlow = /** @class */ (function () {
     function LogicFlow(options) {
@@ -933,6 +933,9 @@ var LogicFlow = /** @class */ (function () {
         // 强制刷新数据, 让 preact 清除对已删除节点的引用
         this.render({});
     };
+    LogicFlow.prototype.setOverlapMode = function (mode) {
+        this.graphModel.setOverlapMode(mode);
+    };
     /*********************************************************
      * LogicFlow Render方法
      ********************************************************/

package/es/constant/index.d.ts

@@ -134,8 +134,10 @@ export declare enum EventType {
     EDIT_CONFIG_CHANGED = "editConfig:changed"
 }
 export declare enum OverlapMode {
+    STATIC = -1,// 静态(元素层级不随点击变化)
     DEFAULT = 0,// 默认
-    INCREASE = 1
+    INCREASE = 1,// 递增
+    EDGE_TOP = 2
 }
 export declare enum SegmentDirection {
     HORIZONTAL = "horizontal",

package/es/constant/index.js

@@ -149,8 +149,10 @@ export var EventType;
 })(EventType || (EventType = {}));
 export var OverlapMode;
 (function (OverlapMode) {
+    OverlapMode[OverlapMode["STATIC"] = -1] = "STATIC";
     OverlapMode[OverlapMode["DEFAULT"] = 0] = "DEFAULT";
     OverlapMode[OverlapMode["INCREASE"] = 1] = "INCREASE";
+    OverlapMode[OverlapMode["EDGE_TOP"] = 2] = "EDGE_TOP";
 })(OverlapMode || (OverlapMode = {}));
 export var SegmentDirection;
 (function (SegmentDirection) {

package/es/model/GraphModel.d.ts

@@ -179,6 +179,14 @@ export declare class GraphModel {
      * @param model
      */
     getTextModel(model: BaseNodeModel): TextMode | undefined;
+    /**
+     * 内部保留方法，请勿直接使用
+     */
+    /**
+     * 设置重叠模式
+     * @param mode 重叠模式
+     */
+    setOverlapMode(mode: OverlapMode): void;
     /**
      * 更新元素的文本模式
      * @param mode
@@ -449,7 +457,7 @@ export declare class GraphModel {
      */
     clearData(): void;
     /**
-     * 获取图形区域虚拟矩型的尺寸和中心坐标
+     * 获取图形区域虚拟矩形的尺寸和中心坐标
      * @returns
      */
     getVirtualRectSize(): GraphModel.VirtualRectProps;

package/es/model/GraphModel.js

@@ -113,6 +113,7 @@ var GraphModel = /** @class */ (function () {
         this.edgeType = options.edgeType || 'polyline';
         this.animation = setupAnimation(animation);
         this.overlapMode = options.overlapMode || OverlapMode.DEFAULT;
+        this.isMiniMap = options.isMiniMap || false;
         this.width = (_a = options.width) !== null && _a !== void 0 ? _a : this.rootEl.getBoundingClientRect().width;
         this.isContainerWidth = isNil(options.width);
         this.height = (_b = options.height) !== null && _b !== void 0 ? _b : this.rootEl.getBoundingClientRect().height;
@@ -193,7 +194,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?
@@ -637,6 +642,19 @@ var GraphModel = /** @class */ (function () {
             return model.textMode || edgeTextMode || textMode || TextMode.TEXT;
         }
     };
+    /**
+     * 内部保留方法，请勿直接使用
+     */
+    /**
+     * 设置重叠模式
+     * @param mode 重叠模式
+     */
+    GraphModel.prototype.setOverlapMode = function (mode) {
+        this.overlapMode = mode;
+        this.eventCenter.emit('overlap:change', {
+            overlapMode: mode,
+        });
+    };
     /**
      * 更新元素的文本模式
      * @param mode
@@ -679,14 +697,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 === OverlapMode.DEFAULT) {
-                (_c = this.topElement) === null || _c === void 0 ? void 0 : _c.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
+            (_c = this.topElement) === null || _c === void 0 ? void 0 : _c.setZIndex();
+            element.setZIndex(ELEMENT_MAX_Z_INDEX);
+            this.topElement = element;
         }
     };
     /**
@@ -1078,7 +1101,7 @@ var GraphModel = /** @class */ (function () {
         /**
          * 如果堆叠模式为默认模式，则将置顶元素重新恢复原有层级
          */
-        if (this.overlapMode === OverlapMode.DEFAULT) {
+        if ([OverlapMode.DEFAULT, OverlapMode.EDGE_TOP].includes(this.overlapMode)) {
             (_a = this.topElement) === null || _a === void 0 ? void 0 : _a.setZIndex();
         }
     };
@@ -1379,7 +1402,7 @@ var GraphModel = /** @class */ (function () {
         this.elementsModelMap.clear();
     };
     /**
-     * 获取图形区域虚拟矩型的尺寸和中心坐标
+     * 获取图形区域虚拟矩形的尺寸和中心坐标
      * @returns
      */
     GraphModel.prototype.getVirtualRectSize = function () {
@@ -1403,7 +1426,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 {
@@ -1558,6 +1581,9 @@ var GraphModel = /** @class */ (function () {
     __decorate([
         computed
     ], GraphModel.prototype, "selectNodes", null);
+    __decorate([
+        action
+    ], GraphModel.prototype, "setOverlapMode", null);
     __decorate([
         action
     ], GraphModel.prototype, "setTextMode", null);

package/es/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/es/model/edge/BaseEdgeModel.js

@@ -73,6 +73,7 @@ var BaseEdgeModel = /** @class */ (function () {
      * setAttributes除了初始化调用外，还会在properties发生变化后调用。
      */
     BaseEdgeModel.prototype.initEdgeData = function (data) {
+        var _this = this;
         if (!data.properties) {
             data.properties = {};
         }
@@ -88,10 +89,8 @@ var BaseEdgeModel = /** @class */ (function () {
         var adjustEdgeStartAndEnd = this.graphModel.editConfigModel.adjustEdgeStartAndEnd;
         this.isShowAdjustPoint = adjustEdgeStartAndEnd;
         assign(this, pickEdgeConfig(data));
-        var overlapMode = this.graphModel.overlapMode;
-        if (overlapMode === OverlapMode.INCREASE) {
-            this.zIndex = data.zIndex || getZIndex();
-        }
+        var _a = this.graphModel, overlapMode = _a.overlapMode, eventCenter = _a.eventCenter;
+        this.updateZIndexByOverlap(overlapMode, data.zIndex || getZIndex());
         // 设置边的 anchors，也就是边的两个端点
         // 端点依赖于 edgeData 的 sourceNode 和 targetNode
         this.setAnchors();
@@ -99,6 +98,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 || getZIndex());
+        });
     };
     /**
      * 设置model属性
@@ -322,7 +325,9 @@ var BaseEdgeModel = /** @class */ (function () {
             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;
         }
         var _a = this.text, x = _a.x, y = _a.y, value = _a.value;
@@ -586,6 +591,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 OverlapMode.DEFAULT:
+                this.zIndex = 0;
+                break;
+            case OverlapMode.EDGE_TOP:
+                this.zIndex = 1;
+                break;
+            case OverlapMode.INCREASE:
+                this.zIndex = defaultZIndex;
+                break;
+            default:
+                break;
+        }
+    };
     BaseEdgeModel.BaseType = ElementType.EDGE;
     __decorate([
         observable
@@ -755,6 +776,9 @@ var BaseEdgeModel = /** @class */ (function () {
     __decorate([
         action
     ], BaseEdgeModel.prototype, "updateAfterAdjustStartAndEnd", null);
+    __decorate([
+        action
+    ], BaseEdgeModel.prototype, "updateZIndexByOverlap", null);
     return BaseEdgeModel;
 }());
 export { BaseEdgeModel };

package/es/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/es/model/node/BaseNodeModel.js

@@ -172,6 +172,7 @@ var BaseNodeModel = /** @class */ (function () {
      * setAttributes 除了初始化调用外，还会在 properties 发生变化了调用。
      */
     BaseNodeModel.prototype.initNodeData = function (data) {
+        var _this = this;
         if (!data.properties) {
             data.properties = {};
         }
@@ -186,10 +187,12 @@ var BaseNodeModel = /** @class */ (function () {
         // 在下面又将 NodeConfig 中的数据赋值给了 this，应该会触发 setAttributes，确认是否符合预期
         // TODO: 确认 constructor 中赋值 properties 是否必要，此处将 NodeConfig 中所有属性赋值给 this，包括 rotate、rotatable，resizable 等
         assign(this, pickNodeConfig(data));
-        var overlapMode = this.graphModel.overlapMode;
-        if (overlapMode === OverlapMode.INCREASE) {
-            this.zIndex = data.zIndex || getZIndex();
-        }
+        var _a = this.graphModel, overlapMode = _a.overlapMode, eventCenter = _a.eventCenter;
+        this.updateZIndexByOverlap(overlapMode, data.zIndex || getZIndex());
+        eventCenter.on('overlap:change', function (data) {
+            var newMode = data.overlapMode;
+            _this.updateZIndexByOverlap(newMode, _this.zIndex || getZIndex());
+        });
     };
     /**
      * 设置model属性，每次properties发生变化会触发
@@ -302,7 +305,9 @@ var BaseNodeModel = /** @class */ (function () {
         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) {
@@ -791,6 +796,22 @@ var BaseNodeModel = /** @class */ (function () {
     BaseNodeModel.prototype.updateAttributes = function (attributes) {
         assign(this, attributes);
     };
+    // 堆叠模式变化时，更新zIndex
+    BaseNodeModel.prototype.updateZIndexByOverlap = function (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;
+        }
+    };
     BaseNodeModel.BaseType = ElementType.NODE;
     __decorate([
         observable
@@ -945,6 +966,9 @@ var BaseNodeModel = /** @class */ (function () {
     __decorate([
         action
     ], BaseNodeModel.prototype, "updateAttributes", null);
+    __decorate([
+        action
+    ], BaseNodeModel.prototype, "updateZIndexByOverlap", null);
     return BaseNodeModel;
 }());
 export { BaseNodeModel };

package/es/view/edge/BaseEdge.js

@@ -282,12 +282,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 = degrees(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 = degrees(getThetaOfVector({
+                    x: dx,
+                    y: dy,
+                    z: 0,
+                }));
+                if (Number.isFinite(computed) && !Number.isNaN(computed)) {
+                    theta = computed;
+                }
+            }
         }
         return (_jsx("g", { children: _jsxs("defs", { children: [_jsx("marker", { id: "marker-start-".concat(id), refX: -refX, refY: refY, overflow: "visible", orient: "auto", markerUnits: "userSpaceOnUse", children: this.getStartArrow() }), _jsx("marker", { id: "marker-end-".concat(id), refX: refX, refY: refY, overflow: "visible", orient: theta, markerUnits: "userSpaceOnUse", children: this.getEndArrow() })] }) }));
     };

package/es/view/node/BaseNode.js

@@ -173,11 +173,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({
@@ -268,6 +276,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(EventType.NODE_BLUR, {
                 data: model.getData(),

package/lib/LogicFlow.d.ts

@@ -7,7 +7,7 @@ import Tool from './tool';
 import History from './history';
 import Keyboard from './keyboard';
 import { EventCallback, CallbackArgs, EventArgs } from './event/eventEmitter';
-import { EventType, SegmentDirection } from './constant';
+import { EventType, OverlapMode, SegmentDirection } from './constant';
 import { Grid } from './view/overlay';
 import Extension = LogicFlow.Extension;
 import ExtensionConfig = LogicFlow.ExtensionConfig;
@@ -430,6 +430,7 @@ export declare class LogicFlow {
      * 清空画布
      */
     clearData(): void;
+    setOverlapMode(mode: OverlapMode): void;
     /*********************************************************
      * LogicFlow Render方法
      ********************************************************/

package/lib/LogicFlow.js

@@ -962,6 +962,9 @@ var LogicFlow = /** @class */ (function () {
         // 强制刷新数据, 让 preact 清除对已删除节点的引用
         this.render({});
     };
+    LogicFlow.prototype.setOverlapMode = function (mode) {
+        this.graphModel.setOverlapMode(mode);
+    };
     /*********************************************************
      * LogicFlow Render方法
      ********************************************************/

package/lib/constant/index.d.ts

@@ -134,8 +134,10 @@ export declare enum EventType {
     EDIT_CONFIG_CHANGED = "editConfig:changed"
 }
 export declare enum OverlapMode {
+    STATIC = -1,// 静态(元素层级不随点击变化)
     DEFAULT = 0,// 默认
-    INCREASE = 1
+    INCREASE = 1,// 递增
+    EDGE_TOP = 2
 }
 export declare enum SegmentDirection {
     HORIZONTAL = "horizontal",

package/lib/constant/index.js

@@ -152,8 +152,10 @@ var EventType;
 })(EventType || (exports.EventType = EventType = {}));
 var OverlapMode;
 (function (OverlapMode) {
+    OverlapMode[OverlapMode["STATIC"] = -1] = "STATIC";
     OverlapMode[OverlapMode["DEFAULT"] = 0] = "DEFAULT";
     OverlapMode[OverlapMode["INCREASE"] = 1] = "INCREASE";
+    OverlapMode[OverlapMode["EDGE_TOP"] = 2] = "EDGE_TOP";
 })(OverlapMode || (exports.OverlapMode = OverlapMode = {}));
 var SegmentDirection;
 (function (SegmentDirection) {

package/lib/model/GraphModel.d.ts

@@ -179,6 +179,14 @@ export declare class GraphModel {
      * @param model
      */
     getTextModel(model: BaseNodeModel): TextMode | undefined;
+    /**
+     * 内部保留方法，请勿直接使用
+     */
+    /**
+     * 设置重叠模式
+     * @param mode 重叠模式
+     */
+    setOverlapMode(mode: OverlapMode): void;
     /**
      * 更新元素的文本模式
      * @param mode
@@ -449,7 +457,7 @@ export declare class GraphModel {
      */
     clearData(): void;
     /**
-     * 获取图形区域虚拟矩型的尺寸和中心坐标
+     * 获取图形区域虚拟矩形的尺寸和中心坐标
      * @returns
      */
     getVirtualRectSize(): GraphModel.VirtualRectProps;

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;
@@ -199,7 +200,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 +648,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 +703,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 +1107,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();
         }
     };
@@ -1385,7 +1408,7 @@ var GraphModel = /** @class */ (function () {
         this.elementsModelMap.clear();
     };
     /**
-     * 获取图形区域虚拟矩型的尺寸和中心坐标
+     * 获取图形区域虚拟矩形的尺寸和中心坐标
      * @returns
      */
     GraphModel.prototype.getVirtualRectSize = function () {
@@ -1409,7 +1432,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 +1587,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;