fix(extension): 修复线的 menu 无法正常显示的 bug

 - 修复初始化时 edgeConfig 中 type 未传值场景下，未使用 graphModel.edgeType(默认边类型) 初始化边的 bug

Author: boyongjiong

examples/feature-examples/src/pages/extensions/menu/index.tsx

@@ -8,6 +8,9 @@ import styles from './index.less'
 import '@logicflow/core/es/index.css'
 import '@logicflow/extension/es/index.css'
 
+import EdgeData = LogicFlow.EdgeData
+import NodeData = LogicFlow.NodeData
+
 const config: Partial<LogicFlow.Options> = {
   isSilentMode: false,
   stopScrollGraph: true,
@@ -93,6 +96,13 @@ const data = {
       text: 'html节点',
     },
   ],
+  edges: [
+    {
+      type: 'polyline',
+      sourceNodeId: '1',
+      targetNodeId: '2',
+    },
+  ],
 }
 
 export default function MenuExtension() {
@@ -112,6 +122,58 @@ export default function MenuExtension() {
         plugins: [Menu],
       })
 
+      lf.addMenuConfig({
+        nodeMenu: [
+          {
+            text: '分享',
+            callback() {
+              alert('分享成功！')
+            },
+          },
+          {
+            text: '属性',
+            callback(node: NodeData) {
+              alert(`
+                节点id：${node.id}
+                节点类型：${node.type}
+                节点坐标：(x: ${node.x}, y: ${node.y})
+              `)
+            },
+          },
+        ],
+        edgeMenu: [
+          {
+            text: '属性',
+            callback(edge: EdgeData) {
+              const {
+                id,
+                type,
+                startPoint,
+                endPoint,
+                sourceNodeId,
+                targetNodeId,
+              } = edge
+              alert(`
+                边id：${id}
+                边类型：${type}
+                边起点坐标：(startPoint: [${startPoint.x}, ${startPoint.y}])
+                边终点坐标：(endPoint: [${endPoint.x}, ${endPoint.y}])
+                源节点id：${sourceNodeId}
+                目标节点id：${targetNodeId}
+              `)
+            },
+          },
+        ],
+        graphMenu: [
+          {
+            text: '分享',
+            callback() {
+              alert('分享成功！')
+            },
+          },
+        ],
+      })
+
       lf.render(data)
       lfRef.current = lf
     }

packages/core/src/model/GraphModel.ts

@@ -420,8 +420,11 @@ export class GraphModel {
       this.nodes = []
     }
     if (graphData.edges) {
+      const currEdgeType = this.edgeType
       this.edges = map(graphData.edges, (edge) => {
-        const Model = this.getModel(edge.type ?? '') as BaseEdgeModelCtor
+        const Model = this.getModel(
+          edge.type ?? currEdgeType,
+        ) as BaseEdgeModelCtor
         if (!Model) {
           throw new Error(`找不到${edge.type}对应的边。`)
         }

packages/extension/src/components/menu/index.ts

@@ -1,5 +1,9 @@
 import LogicFlow from '@logicflow/core'
 
+import GraphData = LogicFlow.GraphData
+import NodeData = LogicFlow.NodeData
+import EdgeData = LogicFlow.EdgeData
+
 type SetType = 'add' | 'reset'
 
 export type MenuItem = {
@@ -25,7 +29,7 @@ class Menu {
   private __container?: HTMLElement
   private __menuDOM?: HTMLElement
   private menuTypeMap?: Map<string, MenuItem[]>
-  private __currentData: any
+  private __currentData: EdgeData | NodeData | GraphData | null = null
   static pluginName = 'menu'
 
   constructor({ lf }) {
@@ -107,7 +111,7 @@ class Menu {
     this.menuTypeMap?.set(DefaultSelectionMenuKey, DefaultSelectionMenu)
   }
 
-  render(lf, container) {
+  render(lf: LogicFlow, container: HTMLElement) {
     if (lf.options.isSilentMode) return
     this.__container = container
     this.__currentData = null // 当前展示的菜单所属元素的model数据
@@ -147,7 +151,7 @@ class Menu {
       )
     }
     // 通过事件控制菜单的显示和隐藏
-    this.lf.on('node:contextmenu', ({ data, position, e }: any) => {
+    this.lf.on('node:contextmenu', ({ data, position, e }) => {
       const {
         domOverlayPosition: { x, y },
       } = position
@@ -175,15 +179,15 @@ class Menu {
         clientY: e.clientY,
       })
     })
-    this.lf.on('edge:contextmenu', ({ data, position, e }: any) => {
+    this.lf.on('edge:contextmenu', ({ data, position, e }) => {
       const {
         domOverlayPosition: { x, y },
       } = position
       const { id } = data
       const model = this.lf.graphModel.getEdgeModelById(id)
       if (!model) return
       let menuList: any = []
-      const typeMenus = this.menuTypeMap?.get(model.type) ?? []
+      const typeMenus = this.menuTypeMap?.get(model.type)
       // 如果单个节点自定义了边
       if (model && model.menu && Array.isArray(model.menu)) {
         menuList = model.menu
@@ -202,21 +206,22 @@ class Menu {
         clientY: e.clientY,
       })
     })
-    this.lf.on('blank:contextmenu', ({ position }: any) => {
+    this.lf.on('blank:contextmenu', ({ position }) => {
       const menuList = this.menuTypeMap?.get(DefaultGraphMenuKey) ?? []
       const {
         domOverlayPosition: { x, y },
       } = position
       this.showMenu(x, y, menuList)
     })
-    this.lf.on('selection:contextmenu', ({ data, position }: any) => {
+    this.lf.on('selection:contextmenu', ({ data, position }) => {
       const menuList = this.menuTypeMap?.get(DefaultSelectionMenuKey)
       const {
         domOverlayPosition: { x, y },
       } = position
       this.__currentData = data
       this.showMenu(x, y, menuList)
     })
+
     this.lf.on('node:mousedown', () => {
       this.__menuDOM!.style.display = 'none'
     })