@logicflow/core 2.1.3 → 2.2.0

package/lib/view/edge/BaseEdge.js

@@ -152,10 +152,24 @@ var BaseEdge = /** @class */ (function (_super) {
         _this.handleMouseDown = function (e) {
             e.stopPropagation();
             _this.startTime = new Date().getTime();
+            if (_this.longPressTimer) {
+                clearTimeout(_this.longPressTimer);
+            }
+            if (e.pointerType === 'touch') {
+                _this.longPressTimer = window.setTimeout(function () {
+                    if (!_this.props.model.isDragging) {
+                        _this.handleContextMenu(e);
+                    }
+                }, 500);
+            }
         };
         _this.handleMouseUp = function () {
             var model = _this.props.model;
             _this.mouseUpDrag = model.isDragging;
+            if (_this.longPressTimer) {
+                clearTimeout(_this.longPressTimer);
+                _this.longPressTimer = undefined;
+            }
         };
         /**
          * 不支持重写
@@ -478,7 +492,10 @@ var BaseEdge = /** @class */ (function (_super) {
                         isSelected && 'lf-edge-selected',
                     ]
                         .filter(Boolean)
-                        .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() : ''] }));
+                        .join(' '), style: {
+                        touchAction: 'none',
+                        WebkitTouchCallout: 'none',
+                    }, onClick: this.handleClick, onContextMenu: this.handleContextMenu, onPointerDown: this.handleMouseDown, onPointerUp: this.handleMouseUp, onPointerCancel: this.handleMouseUp, 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/edge/PolylineEdge.d.ts

@@ -34,7 +34,7 @@ export declare class PolylineEdge extends BaseEdge<IPolylineEdgeProps> {
     /**
      * 不支持重写
      */
-    beforeDragStart: (e: any, appendInfo: any) => void;
+    beforeDragStart: (e: PointerEvent, appendInfo: any) => 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/PolylineEdge.js

@@ -263,7 +263,7 @@ var PolylineEdge = /** @class */ (function (_super) {
                     }
                     appendInfo.direction = constant_1.SegmentDirection.HORIZONTAL;
                 }
-                append = ((0, jsx_runtime_1.jsx)("g", { className: this_1.isDragging ? 'lf-dragging' : 'lf-drag-able', onMouseDown: function (e) { return _this.beforeDragStart(e, appendInfo); }, children: (0, jsx_runtime_1.jsx)("g", { className: className, children: this_1.getAppendShape(appendInfo) }) }));
+                append = ((0, jsx_runtime_1.jsx)("g", { className: this_1.isDragging ? 'lf-dragging' : 'lf-drag-able', onPointerDown: function (e) { return _this.beforeDragStart(e, appendInfo); }, children: (0, jsx_runtime_1.jsx)("g", { className: className, children: this_1.getAppendShape(appendInfo) }) }));
             }
             LineAppendList.push(append);
         };

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;
+    longPressTimer?: number;
     constructor(props: IProps);
     componentWillUnmount(): void;
     componentDidMount(): void;
@@ -37,7 +38,7 @@ export declare abstract class BaseNode<P extends IProps = IProps> extends Compon
     handleMouseUp: () => void;
     handleClick: (e: MouseEvent) => void;
     handleContextMenu: (ev: MouseEvent) => void;
-    handleMouseDown: (ev: MouseEvent) => void;
+    handleMouseDown: (ev: PointerEvent) => void;
     handleFocus: () => void;
     handleBlur: () => void;
     setHoverOn: (ev: MouseEvent) => void;

package/lib/view/node/BaseNode.js

@@ -172,16 +172,28 @@ var BaseNode = /** @class */ (function (_super) {
         _this.handleMouseUp = function () {
             var model = _this.props.model;
             _this.mouseUpDrag = model.isDragging;
+            if (_this.longPressTimer) {
+                clearTimeout(_this.longPressTimer);
+                _this.longPressTimer = undefined;
+            }
         };
         _this.handleClick = function (e) {
             // 节点拖拽进画布之后，不触发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({
@@ -264,6 +276,16 @@ var BaseNode = /** @class */ (function (_super) {
             if (editConfigModel.adjustNodePosition && model.draggable) {
                 _this.stepDrag && _this.stepDrag.handleMouseDown(ev);
             }
+            if (_this.longPressTimer) {
+                clearTimeout(_this.longPressTimer);
+            }
+            if (ev.pointerType === 'touch') {
+                _this.longPressTimer = window.setTimeout(function () {
+                    if (!_this.props.model.isDragging) {
+                        _this.handleContextMenu(ev);
+                    }
+                }, 500);
+            }
         };
         _this.handleFocus = function () {
             var _a = _this.props, model = _a.model, graphModel = _a.graphModel;
@@ -272,6 +294,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(),
@@ -442,7 +467,9 @@ var BaseNode = /** @class */ (function (_super) {
             if (adjustNodePosition && draggable) {
                 this.stepDrag.setStep(gridSize * SCALE_X);
             }
-            nodeShape = ((0, jsx_runtime_1.jsx)("g", __assign({ className: "".concat(this.getStateClassName(), " ").concat(className), onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp, onClick: this.handleClick, onMouseEnter: this.setHoverOn, onMouseOver: this.setHoverOn, onMouseLeave: this.setHoverOff, onMouseOut: this.onMouseOut, onContextMenu: this.handleContextMenu, onFocus: this.handleFocus, onBlur: this.handleBlur }, restAttributes, { children: nodeShapeInner })));
+            nodeShape = ((0, jsx_runtime_1.jsx)("g", __assign({ className: "".concat(this.getStateClassName(), " ").concat(className), onPointerDown: this.handleMouseDown, onPointerUp: this.handleMouseUp, onClick: this.handleClick, 
+                //因为移动端点击操作完成会按顺序触发enter、leave、click事件，所以会造成节点的闪烁，所以在这里没有统一状态为Pointer
+                onMouseEnter: this.setHoverOn, onMouseOver: this.setHoverOn, onMouseLeave: this.setHoverOff, onMouseOut: this.onMouseOut, onContextMenu: this.handleContextMenu, onFocus: this.handleFocus, onBlur: this.handleBlur }, restAttributes, { children: nodeShapeInner })));
         }
         return nodeShape;
     };

package/lib/view/overlay/BezierAdjustOverlay.js

@@ -91,7 +91,7 @@ var BezierAdjustAnchor = /** @class */ (function (_super) {
         var x = position.x, y = position.y;
         var bezierModel = this.props.bezierModel;
         var adjustAnchor = bezierModel.getEdgeStyle().adjustAnchor;
-        return ((0, jsx_runtime_1.jsx)(shape_1.Circle, __assign({ className: "lf-bezier-adjust-anchor", x: x, y: y }, adjustAnchor, { onMouseDown: function (ev) {
+        return ((0, jsx_runtime_1.jsx)(shape_1.Circle, __assign({ className: "lf-bezier-adjust-anchor", x: x, y: y }, adjustAnchor, { onPointerDown: function (ev) {
                 // if (edgeAddable !== false) {
                 _this.dragHandler.handleMouseDown(ev);
                 // }

package/lib/view/overlay/CanvasOverlay.d.ts

@@ -13,13 +13,24 @@ export declare class CanvasOverlay extends Component<IProps, IState> {
     stepDrag: StepDrag;
     stepScrollX: number;
     stepScrollY: number;
+    pointers: Map<number, {
+        x: number;
+        y: number;
+    }>;
+    pinchStartDistance?: number;
+    pinchStartScale?: number;
+    pinchLastCenterX?: number;
+    pinchLastCenterY?: number;
+    longPressTimer?: number;
     constructor(props: IProps);
     onDragging: ({ deltaX, deltaY }: IDragParams) => void;
     onDragEnd: () => void;
     zoomHandler: (ev: WheelEvent) => void;
     clickHandler: (ev: MouseEvent) => void;
     handleContextMenu: (ev: MouseEvent) => void;
-    mouseDownHandler: (ev: MouseEvent) => void;
+    pointerDownHandler: (ev: PointerEvent) => void;
+    pointerMoveHandler: (ev: PointerEvent) => void;
+    pointerUpHandler: (ev: PointerEvent) => void;
     render(): import("preact/compat").JSX.Element;
 }
 export default CanvasOverlay;

package/lib/view/overlay/CanvasOverlay.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);
@@ -44,11 +33,16 @@ var CanvasOverlay = /** @class */ (function (_super) {
         var _this = _super.call(this) || this;
         _this.stepScrollX = 0;
         _this.stepScrollY = 0;
+        _this.pointers = new Map();
         // get InjectedProps() {
         //   return this.props as InjectedProps;
         // }
         _this.onDragging = function (_a) {
             var deltaX = _a.deltaX, deltaY = _a.deltaY;
+            if (_this.longPressTimer) {
+                clearTimeout(_this.longPressTimer);
+                _this.longPressTimer = undefined;
+            }
             _this.setState({
                 isDragging: true,
             });
@@ -126,8 +120,36 @@ var CanvasOverlay = /** @class */ (function (_super) {
             }
         };
         // 鼠标、触摸板 按下
-        _this.mouseDownHandler = function (ev) {
+        _this.pointerDownHandler = function (ev) {
             var _a = _this.props.graphModel, eventCenter = _a.eventCenter, editConfigModel = _a.editConfigModel, SCALE_X = _a.transformModel.SCALE_X, gridSize = _a.gridSize;
+            _this.pointers.set(ev.pointerId, { x: ev.clientX, y: ev.clientY });
+            if (_this.longPressTimer) {
+                clearTimeout(_this.longPressTimer);
+            }
+            if (ev.pointerType === 'touch') {
+                _this.longPressTimer = window.setTimeout(function () {
+                    _this.handleContextMenu(ev);
+                }, 500);
+            }
+            // 检测双指触摸，初始化捏合缩放
+            if (_this.pointers.size === 2) {
+                var _b = _this.props.graphModel, transformModel = _b.transformModel, editConfigModel_1 = _b.editConfigModel;
+                // 记录两指当前位置用于计算初始距离
+                var pts = Array.from(_this.pointers.values());
+                var dx = pts[0].x - pts[1].x;
+                var dy = pts[0].y - pts[1].y;
+                var cx = (pts[0].x + pts[1].x) / 2;
+                var cy = (pts[0].y + pts[1].y) / 2;
+                // 记录捏合起始距离与当前缩放，后续按比例计算缩放
+                _this.pinchStartDistance = Math.hypot(dx, dy);
+                _this.pinchStartScale = transformModel.SCALE_X;
+                // 双指操作下取消画布拖拽，避免与捏合缩放冲突
+                _this.stepDrag.cancelDrag();
+                _this.pinchLastCenterX = cx;
+                _this.pinchLastCenterY = cy;
+                editConfigModel_1.updateEditConfig({ isPinching: true });
+                return;
+            }
             var adjustEdge = editConfigModel.adjustEdge, adjustNodePosition = editConfigModel.adjustNodePosition, stopMoveGraph = editConfigModel.stopMoveGraph;
             var target = ev.target;
             var isFrozenElement = !adjustEdge && !adjustNodePosition;
@@ -143,6 +165,63 @@ var CanvasOverlay = /** @class */ (function (_super) {
                 _this.clickHandler(ev);
             }
         };
+        _this.pointerMoveHandler = function (ev) {
+            var _a;
+            // 记录当前指针位置（按 pointerId）
+            _this.pointers.set(ev.pointerId, { x: ev.clientX, y: ev.clientY });
+            // 当已记录初始捏合距离且存在两指时，执行捏合缩放
+            if (_this.pinchStartDistance && _this.pointers.size >= 2) {
+                var _b = _this.props, graphModel = _b.graphModel, _c = _b.graphModel, editConfigModel = _c.editConfigModel, transformModel = _c.transformModel;
+                if (editConfigModel.stopZoomGraph)
+                    return;
+                // 取消触摸长按计时，避免捏合过程中误触发上下文菜单
+                if (_this.longPressTimer) {
+                    clearTimeout(_this.longPressTimer);
+                }
+                // 计算两指间当前距离
+                var pts = Array.from(_this.pointers.values());
+                var dx = pts[0].x - pts[1].x;
+                var dy = pts[0].y - pts[1].y;
+                var dist = Math.hypot(dx, dy);
+                // 以初始缩放为基准，根据距离比例得到新的缩放比例
+                var scale = ((_a = _this.pinchStartScale) !== null && _a !== void 0 ? _a : transformModel.SCALE_X) *
+                    (dist / _this.pinchStartDistance);
+                // 取两指中心作为缩放原点，并转换为画布坐标系
+                var cx = (pts[0].x + pts[1].x) / 2;
+                var cy = (pts[0].y + pts[1].y) / 2;
+                var pos = graphModel.getPointByClient({ x: cx, y: cy });
+                var _d = pos.canvasOverlayPosition, x = _d.x, y = _d.y;
+                transformModel.zoom(scale, [x, y]);
+                // 双指中心位移驱动画布平移，配合缩放实现捏合移动；
+                if (!editConfigModel.stopMoveGraph || editConfigModel.isPinching) {
+                    var deltaX = _this.pinchLastCenterX === undefined ? 0 : cx - _this.pinchLastCenterX;
+                    var deltaY = _this.pinchLastCenterY === undefined ? 0 : cy - _this.pinchLastCenterY;
+                    transformModel.translate(deltaX, deltaY);
+                    _this.pinchLastCenterX = cx;
+                    _this.pinchLastCenterY = cy;
+                }
+                ev.preventDefault();
+            }
+        };
+        _this.pointerUpHandler = function (ev) {
+            _this.pointers.delete(ev.pointerId);
+            if (_this.longPressTimer) {
+                clearTimeout(_this.longPressTimer);
+                _this.longPressTimer = undefined;
+            }
+            // 双指松开或仅剩一指：结束捏合手势并清理临时状态
+            if (_this.pointers.size < 2) {
+                // 清空捏合距离与缩放起始值
+                _this.pinchStartDistance = undefined;
+                _this.pinchStartScale = undefined;
+                // 清空上一帧的双指中心
+                _this.pinchLastCenterX = undefined;
+                _this.pinchLastCenterY = undefined;
+                var editConfigModel = _this.props.graphModel.editConfigModel;
+                // 标记退出捏合，框选等交互可恢复
+                editConfigModel.updateEditConfig({ isPinching: false });
+            }
+        };
         var _a = props.graphModel, gridSize = _a.gridSize, eventCenter = _a.eventCenter;
         _this.stepDrag = new util_1.StepDrag({
             onDragging: _this.onDragging,
@@ -162,11 +241,11 @@ var CanvasOverlay = /** @class */ (function (_super) {
     CanvasOverlay.prototype.render = function () {
         var transformModel = this.props.graphModel.transformModel;
         var transform = transformModel.getTransformStyle().transform;
-        var _a = this.props, children = _a.children, dnd = _a.dnd;
+        var children = this.props.children;
         var isDragging = this.state.isDragging;
-        return ((0, jsx_runtime_1.jsx)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", name: "canvas-overlay", onWheel: this.zoomHandler, onMouseDown: this.mouseDownHandler, onContextMenu: this.handleContextMenu, className: isDragging
+        return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", name: "canvas-overlay", onWheel: this.zoomHandler, onPointerDown: this.pointerDownHandler, onPointerMove: this.pointerMoveHandler, onPointerUp: this.pointerUpHandler, onPointerCancel: this.pointerUpHandler, onContextMenu: this.handleContextMenu, style: { touchAction: 'none', WebkitUserSelect: 'none' }, className: isDragging
                 ? 'lf-canvas-overlay lf-dragging'
-                : 'lf-canvas-overlay lf-drag-able' }, dnd.eventMap(), { children: (0, jsx_runtime_1.jsx)("g", { transform: transform, children: children }) })));
+                : 'lf-canvas-overlay lf-drag-able', children: (0, jsx_runtime_1.jsx)("g", { transform: transform, children: children }) }));
     };
     CanvasOverlay = __decorate([
         __1.observer

package/lib/view/text/BaseText.d.ts

@@ -14,7 +14,7 @@ export declare class BaseText<P extends IBaseTextProps, S extends IBaseTextState
     stepperDrag: StepDrag;
     constructor(props: P);
     getShape(): h.JSX.Element | null;
-    mouseDownHandler: (e: MouseEvent) => void;
+    mouseDownHandler: (e: PointerEvent) => void;
     onDragging: ({ deltaX, deltaY }: IDragParams) => void;
     dbClickHandler: () => void;
     render(): h.JSX.Element | undefined;

package/lib/view/text/BaseText.js

@@ -125,7 +125,7 @@ var BaseText = /** @class */ (function (_super) {
     BaseText.prototype.render = function () {
         var text = this.props.model.text;
         if (text) {
-            return ((0, jsx_runtime_1.jsx)("g", { onMouseDown: this.mouseDownHandler, onDblClick: this.dbClickHandler, children: this.getShape() }));
+            return ((0, jsx_runtime_1.jsx)("g", { onPointerDown: this.mouseDownHandler, onDblClick: this.dbClickHandler, children: this.getShape() }));
         }
     };
     return BaseText;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logicflow/core",
-  "version": "2.1.3",
+  "version": "2.2.0",
   "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/EditConfigModel.ts

@@ -125,6 +125,7 @@ export interface IEditConfigType {
   edgeTextMode: TextMode
   // 开启网格对齐
   snapGrid: boolean
+  isPinching: boolean
 }
 
 export type IConfigKeys = keyof IEditConfigType
@@ -186,6 +187,7 @@ const allKeys = [
   'edgeTextMultiple', // 是否支持多个边文本
   'nodeTextVertical', // 节点文本是否纵向显示
   'edgeTextVertical', // 边文本是否纵向显示
+  'isPinching', //是否是双指捏合态
 ] as const
 
 /**
@@ -202,6 +204,7 @@ export class EditConfigModel {
   @observable stopMoveGraph = false
   @observable stopScrollGraph = false
   @observable snapGrid = false
+  @observable isPinching = false
   /*********************************************************
    * 文本相关配置（全局）
    ********************************************************/

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
     }
   }
 
@@ -1224,12 +1248,15 @@ export class GraphModel {
   clearSelectElements() {
     this.selectElements.forEach((element) => {
       element?.setSelected(false)
+      element?.setHovered(false)
     })
     this.selectElements.clear()
     /**
      * 如果堆叠模式为默认模式，则将置顶元素重新恢复原有层级
      */
-    if (this.overlapMode === OverlapMode.DEFAULT) {
+    if (
+      [OverlapMode.DEFAULT, OverlapMode.EDGE_TOP].includes(this.overlapMode)
+    ) {
       this.topElement?.setZIndex()
     }
   }
@@ -1584,7 +1611,7 @@ export class GraphModel {
   }
 
   /**
-   * 获取图形区域虚拟矩型的尺寸和中心坐标
+   * 获取图形区域虚拟矩形的尺寸和中心坐标
    * @returns
    */
   getVirtualRectSize(): GraphModel.VirtualRectProps {
@@ -1611,7 +1638,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 +1744,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 {