@logicflow/core 2.0.9 → 2.0.10

package/lib/view/node/BaseNode.js

@@ -89,7 +89,7 @@ var BaseNode = /** @class */ (function (_super) {
             var _b, _c, _d, _e;
             var event = _a.event;
             var _f = _this.props, model = _f.model, graphModel = _f.graphModel;
-            var _g = graphModel.editConfigModel, stopMoveGraph = _g.stopMoveGraph, autoExpand = _g.autoExpand, transformModel = graphModel.transformModel, selectNodes = graphModel.selectNodes, width = graphModel.width, height = graphModel.height, gridSize = graphModel.gridSize;
+            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({
@@ -101,9 +101,9 @@ var BaseNode = /** @class */ (function (_super) {
             // 2. 考虑鼠标位置不再节点中心
             x = x + ((_c = (_b = _this.moveOffset) === null || _b === void 0 ? void 0 : _b.dx) !== null && _c !== void 0 ? _c : 0);
             y = y + ((_e = (_d = _this.moveOffset) === null || _d === void 0 ? void 0 : _d.dy) !== null && _e !== void 0 ? _e : 0);
-            // 将x, y移动到grid上
-            x = (0, util_1.snapToGrid)(x, gridSize);
-            y = (0, util_1.snapToGrid)(y, gridSize);
+            // 校准坐标
+            x = (0, util_1.snapToGrid)(x, gridSize, snapGrid);
+            y = (0, util_1.snapToGrid)(y, gridSize, snapGrid);
             if (!width || !height) {
                 graphModel.moveNode2Coordinate(model.id, x, y);
                 return;
@@ -217,7 +217,10 @@ var BaseNode = /** @class */ (function (_super) {
             else {
                 graphModel.selectNodeById(model.id, isMultiple);
                 eventOptions.isSelected = true;
-                _this.toFront();
+                // 静默模式下点击节点不变更节点层级
+                if (!editConfigModel.isSilentMode) {
+                    _this.toFront();
+                }
             }
             // 不是双击的，默认都是单击
             if (isDoubleClick) {
@@ -237,6 +240,7 @@ var BaseNode = /** @class */ (function (_super) {
         _this.handleContextMenu = function (ev) {
             ev.preventDefault();
             var _a = _this.props, model = _a.model, graphModel = _a.graphModel;
+            var editConfigModel = graphModel.editConfigModel;
             // 节点数据，多为事件对象数据抛出
             var nodeData = model.getData();
             var position = graphModel.getPointByClient({
@@ -252,7 +256,10 @@ var BaseNode = /** @class */ (function (_super) {
                 e: ev,
                 position: position,
             });
-            _this.toFront();
+            // 静默模式下点击节点不变更节点层级
+            if (!editConfigModel.isSilentMode) {
+                _this.toFront();
+            }
         };
         _this.handleMouseDown = function (ev) {
             var _a = _this.props, model = _a.model, graphModel = _a.graphModel;
@@ -326,6 +333,12 @@ var BaseNode = /** @class */ (function (_super) {
         if (this.modelDisposer) {
             this.modelDisposer();
         }
+        // 以下是 mobx-preact 中 componentWillUnmount 的回调逻辑，但是不知道出于什么考虑，mobx-preact 没有混入这一段逻辑
+        // @ts-ignore
+        if (this.render.$mobx) {
+            // @ts-ignore
+            this.render.$mobx.dispose();
+        }
     };
     BaseNode.prototype.componentDidMount = function () { };
     BaseNode.prototype.componentDidUpdate = function () { };

package/lib/view/node/HtmlNode.js

@@ -119,6 +119,7 @@ var HtmlNode = /** @class */ (function (_super) {
         }
     };
     HtmlNode.prototype.componentWillUnmount = function () {
+        _super.prototype.componentWillUnmount.call(this);
         this.rootEl.innerHTML = '';
     };
     HtmlNode.prototype.getShape = function () {

package/lib/view/overlay/CanvasOverlay.js

@@ -66,8 +66,9 @@ var CanvasOverlay = /** @class */ (function (_super) {
         _this.zoomHandler = function (ev) {
             var _a = _this.props, _b = _a.graphModel, editConfigModel = _b.editConfigModel, transformModel = _b.transformModel, gridSize = _b.gridSize, graphModel = _a.graphModel;
             var eX = ev.deltaX, eY = ev.deltaY;
+            var stopScrollGraph = editConfigModel.stopScrollGraph, stopZoomGraph = editConfigModel.stopZoomGraph;
             // 如果没有禁止滚动移动画布, 并且当前触发的时候ctrl键、cmd键没有按住, 那么移动画布
-            if (!editConfigModel.stopScrollGraph && !ev.ctrlKey && !ev.metaKey) {
+            if (!stopScrollGraph && !ev.ctrlKey && !ev.metaKey) {
                 ev.preventDefault();
                 _this.stepScrollX += eX;
                 _this.stepScrollY += eY;
@@ -86,7 +87,7 @@ var CanvasOverlay = /** @class */ (function (_super) {
                 return;
             }
             // 如果没有禁止缩放画布，那么进行缩放. 在禁止缩放画布后，按住 ctrl、cmd 键也不能缩放了。
-            if (!editConfigModel.stopZoomGraph) {
+            if (!stopZoomGraph) {
                 ev.preventDefault();
                 var position = graphModel.getPointByClient({
                     x: ev.clientX,
@@ -127,10 +128,11 @@ var CanvasOverlay = /** @class */ (function (_super) {
         // 鼠标、触摸板 按下
         _this.mouseDownHandler = function (ev) {
             var _a = _this.props.graphModel, eventCenter = _a.eventCenter, editConfigModel = _a.editConfigModel, SCALE_X = _a.transformModel.SCALE_X, gridSize = _a.gridSize;
+            var adjustEdge = editConfigModel.adjustEdge, adjustNodePosition = editConfigModel.adjustNodePosition, stopMoveGraph = editConfigModel.stopMoveGraph;
             var target = ev.target;
-            var isFrozenElement = !editConfigModel.adjustEdge && !editConfigModel.adjustNodePosition;
+            var isFrozenElement = !adjustEdge && !adjustNodePosition;
             if (target.getAttribute('name') === 'canvas-overlay' || isFrozenElement) {
-                if (editConfigModel.stopMoveGraph !== true) {
+                if (stopMoveGraph !== true) {
                     _this.stepDrag.setStep(gridSize * SCALE_X);
                     _this.stepDrag.handleMouseDown(ev);
                 }

package/lib/view/text/BaseText.js

@@ -60,6 +60,7 @@ var BaseText = /** @class */ (function (_super) {
             var _a = _this.props, draggable = _a.draggable, model = _a.model, graphModel = _a.graphModel;
             var nodeTextDraggable = graphModel.editConfigModel.nodeTextDraggable;
             if (draggable !== null && draggable !== void 0 ? draggable : nodeTextDraggable) {
+                e.stopPropagation();
                 _this.stepperDrag.model = model;
                 _this.stepperDrag.handleMouseDown(e);
             }

package/package.json

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

package/src/LogicFlow.tsx

@@ -1,5 +1,5 @@
 import { ComponentType, createElement as h, render } from 'preact/compat'
-import { cloneDeep, forEach, indexOf } from 'lodash-es'
+import { cloneDeep, forEach, indexOf, isNil } from 'lodash-es'
 import { observer } from '.'
 import { Options as LFOptions } from './options'
 import * as _Model from './model'
@@ -885,12 +885,23 @@ export class LogicFlow {
    */
   updateEditConfig(config: Partial<IEditConfigType>) {
     const { editConfigModel, transformModel } = this.graphModel
+    const currentSnapGrid = editConfigModel.snapGrid
+
     editConfigModel.updateEditConfig(config)
     if (config?.stopMoveGraph !== undefined) {
       transformModel.updateTranslateLimits(config.stopMoveGraph)
     }
+
     // 静默模式切换时，修改快捷键的启用状态
     config?.isSilentMode ? this.keyboard.disable() : this.keyboard.enable(true)
+
+    // 切换网格对齐状态时，修改网格尺寸
+    if (!isNil(config?.snapGrid) && config.snapGrid !== currentSnapGrid) {
+      const {
+        grid: { size = 1 },
+      } = this.graphModel
+      this.graphModel.updateGridSize(config.snapGrid ? size : 1)
+    }
   }
 
   /**
@@ -1044,6 +1055,8 @@ export class LogicFlow {
    */
   clearData() {
     this.graphModel.clearData()
+    // 强制刷新数据, 让 preact 清除对已删除节点的引用
+    this.render({})
   }
 
   /*********************************************************
@@ -1372,7 +1385,12 @@ export class LogicFlow {
 
   /** 销毁当前实例 */
   destroy() {
+    this.clearData()
+    render(null, this.container)
+    this.keyboard.destroy()
     this.graphModel.destroy()
+    this.tool.destroy()
+    this.history.destroy()
   }
 }
 

package/src/event/eventEmitter.ts

@@ -147,6 +147,10 @@ export default class EventEmitter {
   getEvents() {
     return this._events
   }
+
+  destroy() {
+    this._events = {}
+  }
 }
 
 export { EventEmitter, EventArgs }

package/src/history/index.ts

@@ -107,6 +107,13 @@ export class History {
       }, this.waitTime),
     )
   }
+
+  destroy() {
+    this.undos = []
+    this.redos = []
+    this.curData = null
+    this.stopWatch && this.stopWatch()
+  }
 }
 
 export default History

package/src/keyboard/index.ts

@@ -90,6 +90,10 @@ export class Keyboard {
     }
   }
 
+  destroy() {
+    this.mousetrap.reset()
+  }
+
   private getKeys(keys: string | string[]) {
     return (Array.isArray(keys) ? keys : [keys]).map((key) =>
       this.formatKey(key),

package/src/model/EditConfigModel.ts

@@ -123,6 +123,8 @@ export interface IEditConfigType {
   nodeTextMode: TextMode
   // 边文本类型
   edgeTextMode: TextMode
+  // 开启网格对齐
+  snapGrid: boolean
 }
 
 export type IConfigKeys = keyof IEditConfigType
@@ -154,6 +156,7 @@ const allKeys = [
   'stopZoomGraph', // 禁止缩放画布
   'stopScrollGraph', // 禁止鼠标滚动移动画布
   'stopMoveGraph', // 禁止拖动画布
+  'snapGrid', // 是否开启网格对齐
   'adjustEdge', // 允许调整边
   'adjustEdgeMiddle', // 允许调整边中点
   'adjustEdgeStartAndEnd', // 允许调整边起点和终点
@@ -198,6 +201,7 @@ export class EditConfigModel {
   @observable stopZoomGraph = false
   @observable stopMoveGraph = false
   @observable stopScrollGraph = false
+  @observable snapGrid = false
   /*********************************************************
    * 文本相关配置（全局）
    ********************************************************/

package/src/model/GraphModel.ts

@@ -1,4 +1,12 @@
-import { find, forEach, map, merge, isBoolean, debounce, isEqual } from 'lodash-es'
+import {
+  find,
+  forEach,
+  map,
+  merge,
+  isBoolean,
+  debounce,
+  isNil,
+} from 'lodash-es'
 import { action, computed, observable } from 'mobx'
 import {
   BaseEdgeModel,
@@ -41,7 +49,6 @@ import Position = LogicFlow.Position
 import PointTuple = LogicFlow.PointTuple
 import GraphData = LogicFlow.GraphData
 import NodeConfig = LogicFlow.NodeConfig
-import AnchorConfig = Model.AnchorConfig
 import BaseNodeModelCtor = LogicFlow.BaseNodeModelCtor
 import BaseEdgeModelCtor = LogicFlow.BaseEdgeModelCtor
 
@@ -99,6 +106,15 @@ export class GraphModel {
    */
   customTrajectory: LFOptions.Definition['customTrajectory']
 
+  /**
+   * 判断是否使用的是容器的宽度
+   */
+  isContainerWidth: boolean
+  /**
+   * 判断是否使用的是容器的高度
+   */
+  isContainerHeight: boolean
+
   // 在图上操作创建边时，默认使用的边类型.
   @observable edgeType: string
   // 当前图上所有节点的model
@@ -144,7 +160,9 @@ export class GraphModel {
     this.rootEl = container
     this.partial = !!partial
     this.background = background
-    if (typeof grid === 'object') {
+    if (typeof grid === 'object' && options.snapGrid) {
+      // 开启网格对齐时才根据网格尺寸设置步长
+      // TODO：需要让用户设置成 0 吗？后面可以讨论一下
       this.gridSize = grid.size || 1 // 默认 gridSize 设置为 1
     }
     this.theme = setupTheme(options.style)
@@ -153,8 +171,10 @@ export class GraphModel {
     this.animation = setupAnimation(animation)
     this.overlapMode = options.overlapMode || OverlapMode.DEFAULT
 
-    this.width = options.width || this.rootEl.getBoundingClientRect().width
-    this.height = options.height || this.rootEl.getBoundingClientRect().height
+    this.width = options.width ?? this.rootEl.getBoundingClientRect().width
+    this.isContainerWidth = isNil(options.width)
+    this.height = options.height ?? this.rootEl.getBoundingClientRect().height
+    this.isContainerHeight = isNil(options.height)
 
     const resizeObserver = new ResizeObserver(
       debounce(
@@ -438,18 +458,25 @@ export class GraphModel {
    * @param { object } graphData 图数据
    */
   graphDataToModel(graphData: Partial<LogicFlow.GraphConfigData>) {
-    if (!this.width || !this.height) {
-      this.resize()
-    }
+    // 宽度必然存在，取消重新计算
+    // if (!this.width || !this.height) {
+    //   this.resize()
+    // }
     if (!graphData) {
-      this.nodes = []
-      this.edges = []
+      this.clearData()
       return
     }
+    this.elementsModelMap.clear()
+    this.nodeModelMap.clear()
+    this.edgeModelMap.clear()
+
     if (graphData.nodes) {
-      this.nodes = map(graphData.nodes, (node: NodeConfig) =>
-        this.getModelAfterSnapToGrid(node),
-      )
+      this.nodes = map(graphData.nodes, (node: NodeConfig) => {
+        const nodeModel = this.getModelAfterSnapToGrid(node)
+        this.elementsModelMap.set(nodeModel.id, nodeModel)
+        this.nodeModelMap.set(nodeModel.id, nodeModel)
+        return nodeModel
+      })
     } else {
       this.nodes = []
     }
@@ -463,58 +490,6 @@ export class GraphModel {
           throw new Error(`找不到${edge.type}对应的边。`)
         }
         const edgeModel = new Model(edge, this)
-        // 根据edgeModel中存储的数据找到当前画布上的起终锚点坐标
-        // 判断当前起终锚点数据和Model中存储的起终点数据是否一致，不一致更新起终点信息
-        const {
-          sourceNodeId,
-          targetNodeId,
-          sourceAnchorId = '',
-          targetAnchorId = '',
-          startPoint,
-          endPoint,
-          text,
-          textPosition,
-        } = edgeModel
-        const updateAnchorPoint = (
-          node: BaseNodeModel | undefined,
-          anchorId: string,
-          point: Position,
-          updatePoint: (anchor: AnchorConfig) => void,
-        ) => {
-          const anchor = node?.anchors.find((anchor) => anchor.id === anchorId)
-          if (anchor && !isEqual(anchor, point)) {
-            updatePoint(anchor)
-          }
-        }
-
-        const sourceNode = this.getNodeModelById(sourceNodeId)
-        const targetNode = this.getNodeModelById(targetNodeId)
-
-        updateAnchorPoint(
-          sourceNode,
-          sourceAnchorId,
-          startPoint,
-          edgeModel.updateStartPoint.bind(edgeModel),
-        )
-        updateAnchorPoint(
-          targetNode,
-          targetAnchorId,
-          endPoint,
-          edgeModel.updateEndPoint.bind(edgeModel),
-        )
-
-        // 而文本需要先算一下文本与默认文本位置之间的相对位置差
-        // 再计算新路径的文本默认位置，加上相对位置差，得到调整后边的文本的位置
-        if (text) {
-          const { x, y } = text
-          const { x: defaultX, y: defaultY } = textPosition
-          if (x && y && defaultX && defaultY) {
-            const deltaX = x - defaultX
-            const deltaY = y - defaultY
-            edgeModel.resetTextPosition()
-            edgeModel.moveText(deltaX, deltaY)
-          }
-        }
         this.edgeModelMap.set(edgeModel.id, edgeModel)
         this.elementsModelMap.set(edgeModel.id, edgeModel)
 
@@ -873,6 +848,7 @@ export class GraphModel {
    */
   getModelAfterSnapToGrid(node: NodeConfig) {
     const Model = this.getModel(node.type) as BaseNodeModelCtor
+    const { snapGrid } = this.editConfigModel
     if (!Model) {
       throw new Error(
         `找不到${node.type}对应的节点，请确认是否已注册此类型节点。`,
@@ -881,8 +857,8 @@ export class GraphModel {
     const { x: nodeX, y: nodeY } = node
     // 根据 grid 修正节点的 x, y
     if (nodeX && nodeY) {
-      node.x = snapToGrid(nodeX, this.gridSize)
-      node.y = snapToGrid(nodeY, this.gridSize)
+      node.x = snapToGrid(nodeX, this.gridSize, snapGrid)
+      node.y = snapToGrid(nodeY, this.gridSize, snapGrid)
       if (typeof node.text === 'object' && node.text !== null) {
         // 原来的处理是：node.text.x -= getGridOffset(nodeX, this.gridSize)
         // 由于snapToGrid()使用了Math.round()四舍五入的做法，因此无法判断需要执行
@@ -1499,7 +1475,14 @@ export class GraphModel {
   }
 
   /**
-   * 更新网格配置
+   * 更新网格尺寸
+   */
+  updateGridSize(size: number) {
+    this.gridSize = size
+  }
+
+  /**
+   * 更新背景配置
    */
   updateBackgroundOptions(
     options: boolean | Partial<LFOptions.BackgroundConfig>,
@@ -1518,8 +1501,11 @@ export class GraphModel {
    * 重新设置画布的宽高
    */
   @action resize(width?: number, height?: number): void {
-    this.width = width || this.rootEl.getBoundingClientRect().width
-    this.height = height || this.rootEl.getBoundingClientRect().height
+    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',
@@ -1533,6 +1519,11 @@ export class GraphModel {
   @action clearData(): void {
     this.nodes = []
     this.edges = []
+
+    // 清除对已清除节点的引用
+    this.edgeModelMap.clear()
+    this.nodeModelMap.clear()
+    this.elementsModelMap.clear()
   }
 
   /**
@@ -1680,6 +1671,7 @@ export class GraphModel {
       console.warn('error on destroy GraphModel', err)
     }
     this.waitCleanEffects.length = 0
+    this.eventCenter.destroy()
   }
 }
 

package/src/model/edge/BaseEdgeModel.ts

@@ -392,6 +392,8 @@ export class BaseEdgeModel<P extends PropertiesType = PropertiesType>
       properties,
       sourceNodeId: this.sourceNodeId,
       targetNodeId: this.targetNodeId,
+      sourceAnchorId: this.sourceAnchorId,
+      targetAnchorId: this.targetAnchorId,
       startPoint: assign({}, this.startPoint),
       endPoint: assign({}, this.endPoint),
     }
@@ -515,14 +517,17 @@ export class BaseEdgeModel<P extends PropertiesType = PropertiesType>
    * 内部方法，处理初始化文本格式
    */
   @action formatText(data: EdgeConfig) {
+    const {
+      editConfigModel: { edgeTextDraggable, edgeTextEdit },
+    } = this.graphModel
     const { x, y } = this.textPosition
     const { text } = data
     let textConfig: Required<TextConfig> = {
       value: '',
       x,
       y,
-      draggable: false,
-      editable: true,
+      draggable: edgeTextDraggable,
+      editable: edgeTextEdit,
     }
 
     if (text) {

package/src/model/edge/PolylineEdgeModel.ts

@@ -35,6 +35,9 @@ export class PolylineEdgeModel extends BaseEdgeModel {
 
   initEdgeData(data: LogicFlow.EdgeConfig): void {
     this.offset = 30
+    if (data.pointsList) {
+      this.pointsList = data.pointsList
+    }
     super.initEdgeData(data)
   }
 
@@ -315,6 +318,11 @@ export class PolylineEdgeModel extends BaseEdgeModel {
     return list
   }
 
+  updatePath(pointList: Point[]) {
+    this.pointsList = pointList
+    this.points = this.getPath(this.pointsList)
+  }
+
   getData() {
     const data = super.getData()
     const pointsList = this.pointsList.map(({ x, y }) => ({

package/src/model/node/BaseNodeModel.ts

@@ -246,13 +246,16 @@ export class BaseNodeModel<P extends PropertiesType = PropertiesType>
    * 始化文本属性
    */
   private formatText(data: NodeConfig): void {
+    const {
+      editConfigModel: { nodeTextDraggable, nodeTextEdit },
+    } = this.graphModel
     const { x, y, text } = data
     let textConfig: TextConfig = {
       value: '',
       x,
       y,
-      draggable: false,
-      editable: true,
+      draggable: nodeTextDraggable,
+      editable: nodeTextEdit,
     }
     if (text) {
       if (typeof text === 'string') {

package/src/tool/index.ts

@@ -91,6 +91,11 @@ export class Tool {
   getInstance() {
     return this.instance
   }
+
+  destroy() {
+    this.toolMap.clear()
+    this.disabledToolMap.clear()
+  }
 }
 
 export default Tool

package/src/util/geometry.ts

@@ -1,7 +1,9 @@
 import LogicFlow from '../LogicFlow'
 import PointTuple = LogicFlow.PointTuple
 
-export function snapToGrid(point: number, gridSize: number) {
+export function snapToGrid(point: number, gridSize: number, snapGrid: boolean) {
+  // 开启节网格对齐时才根据网格尺寸校准坐标
+  if (!snapGrid) return point
   // 保证 x, y 的值为 gridSize 的整数倍
   return gridSize * Math.round(point / gridSize) || point
 }

package/src/view/Graph.tsx

@@ -39,9 +39,26 @@ type ContainerStyle = {
 @observer
 class Graph extends Component<IGraphProps> {
   private handleResize = () => {
-    this.props.graphModel.resize()
+    const { graphModel, options } = this.props
+    const { width, height, isContainerWidth, isContainerHeight } = graphModel
+    let resizeWidth: number | undefined = width
+    let resizeHeight: number | undefined = height
+    let needUpdate = false
+    if (isContainerWidth) {
+      resizeWidth = undefined
+      needUpdate = true
+    }
+    if (isContainerHeight) {
+      resizeHeight = undefined
+      needUpdate = true
+    }
+    if (needUpdate) {
+      graphModel.resize(resizeWidth, resizeHeight)
+    }
+    options.width = width
+    options.height = height
   }
-  private throttleResize = () => throttle(this.handleResize, 200)
+  private throttleResize = throttle(this.handleResize, 200)
 
   componentDidMount() {
     window.addEventListener('resize', this.throttleResize)

package/src/view/behavior/dnd.ts

@@ -26,10 +26,13 @@ export class Dnd {
     })
     // 处理缩放和偏移
     const { x: x1, y: y1 } = position.canvasOverlayPosition
+    const {
+      editConfigModel: { snapGrid },
+    } = this.lf.graphModel
     // x, y 对齐到网格的 size
     return {
-      x: snapToGrid(x1, gridSize),
-      y: snapToGrid(y1, gridSize),
+      x: snapToGrid(x1, gridSize, snapGrid),
+      y: snapToGrid(y1, gridSize, snapGrid),
     }
   }
 

package/src/view/edge/BaseEdge.tsx

@@ -358,6 +358,7 @@ export abstract class BaseEdge<P extends IProps> extends Component<
       clearTimeout(this.clickTimer)
     }
     const { model, graphModel } = this.props
+    const { editConfigModel } = graphModel
     const position = graphModel.getPointByClient({
       x: ev.clientX,
       y: ev.clientY,
@@ -367,7 +368,10 @@ export abstract class BaseEdge<P extends IProps> extends Component<
       ElementState.SHOW_MENU,
       position.domOverlayPosition,
     )
-    this.toFront()
+    // 静默模式下点击节点不变更节点层级
+    if (!editConfigModel.isSilentMode) {
+      this.toFront()
+    }
     if (!model.isSelected) {
       graphModel.selectEdgeById(model.id)
     }
@@ -456,7 +460,10 @@ export abstract class BaseEdge<P extends IProps> extends Component<
     }
     const { editConfigModel } = graphModel
     graphModel.selectEdgeById(model.id, isMultipleSelect(e, editConfigModel))
-    this.toFront()
+    // 静默模式下点击节点不变更节点层级
+    if (!editConfigModel.isSilentMode) {
+      this.toFront()
+    }
   }
 
   handleFocus = () => {