fix: 优化堆叠模式相关代码

Author: DymoneLewis

packages/core/src/model/GraphModel.ts

@@ -255,11 +255,6 @@ export class GraphModel {
     }
     // 默认情况下节点与边按照 zIndex 排序
     const elements = sortElement([...this.nodes, ...this.edges])
-    console.log('sortElement run', [...this.nodes, ...this.edges], elements)
-    // 在 EDGE_TOP 模式下，分别为节点和边进行排序，然后再以节点先，边后的方式塞到渲染数据里，保证边始终在顶部。
-    // if (this.overlapMode === OverlapMode.EDGE_TOP) {
-    //   elements = [...sortElement(this.nodes), ...sortElement(this.edges)]
-    // }
 
     // 只显示可见区域的节点和边
     const visibleElements: (BaseNodeModel | BaseEdgeModel)[] = []
@@ -789,7 +784,6 @@ export class GraphModel {
    */
   @action
   toFront(id: string) {
-    console.log('toFront run', id)
     const element = this.nodesMap[id]?.model || this.edgesMap[id]?.model
     if (element) {
       // 静态模式toFront不做处理
@@ -804,7 +798,6 @@ export class GraphModel {
       // 默认模式（节点在上）和边在上模式下，将原置顶元素重新恢复原有层级，将需指定元素zIndex设置为最大zIndex
       this.topElement?.setZIndex()
       element.setZIndex(ELEMENT_MAX_Z_INDEX)
-      console.log('setZIndex run', element.zIndex)
       this.topElement = element
     }
   }

packages/core/src/model/edge/BaseEdgeModel.ts

@@ -145,10 +145,7 @@ export class BaseEdgeModel<P extends PropertiesType = PropertiesType>
     this.isShowAdjustPoint = adjustEdgeStartAndEnd
     assign(this, pickEdgeConfig(data))
     const { overlapMode, eventCenter } = this.graphModel
-    if (overlapMode !== OverlapMode.DEFAULT) {
-      this.zIndex =
-        overlapMode === OverlapMode.EDGE_TOP ? 1 : data.zIndex || getZIndex()
-    }
+    this.updateZIndexByOverlap(overlapMode, data.zIndex || getZIndex())
     // 设置边的 anchors，也就是边的两个端点
     // 端点依赖于 edgeData 的 sourceNode 和 targetNode
     this.setAnchors()
@@ -159,17 +156,7 @@ export class BaseEdgeModel<P extends PropertiesType = PropertiesType>
 
     eventCenter.on('overlap:change', (data) => {
       const { overlapMode: newMode } = data
-      switch (newMode) {
-        case OverlapMode.DEFAULT:
-          this.zIndex = 0
-          break
-        case OverlapMode.EDGE_TOP:
-          this.zIndex = 1
-          break
-        default:
-          this.zIndex = data.zIndex || getZIndex()
-          break
-      }
+      this.updateZIndexByOverlap(newMode, data.zIndex || getZIndex())
     })
   }
 
@@ -767,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

packages/core/src/model/node/BaseNodeModel.ts

@@ -207,23 +207,10 @@ export class BaseNodeModel<P extends PropertiesType = PropertiesType>
     assign(this, pickNodeConfig(data))
 
     const { overlapMode, eventCenter } = this.graphModel
-    if (overlapMode !== OverlapMode.DEFAULT) {
-      this.zIndex =
-        overlapMode === OverlapMode.EDGE_TOP ? 0 : data.zIndex || getZIndex()
-    }
+    this.updateZIndexByOverlap(overlapMode, data.zIndex || getZIndex())
     eventCenter.on('overlap:change', (data) => {
       const { overlapMode: newMode } = data
-      switch (newMode) {
-        case OverlapMode.DEFAULT:
-          this.zIndex = 1
-          break
-        case OverlapMode.EDGE_TOP:
-          this.zIndex = 0
-          break
-        default:
-          this.zIndex = data.zIndex || getZIndex()
-          break
-      }
+      this.updateZIndexByOverlap(newMode, this.zIndex || getZIndex())
     })
   }
 
@@ -935,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 {