@logicflow/extension 2.0.21 → 2.1.1

package/src/components/menu/index.ts

@@ -1,4 +1,4 @@
-import LogicFlow from '@logicflow/core'
+import LogicFlow, { EditConfigModel } from '@logicflow/core'
 
 import GraphData = LogicFlow.GraphData
 import NodeData = LogicFlow.NodeData
@@ -10,7 +10,8 @@ type SetType = 'add' | 'reset'
 export type MenuItem = {
   text?: string
   className?: string
-  icon?: boolean
+  icon?: boolean | string
+  disabled?: boolean
   callback: (element: any) => void
 }
 
@@ -18,13 +19,30 @@ export type MenuConfig = {
   nodeMenu?: MenuItem[] | false
   edgeMenu?: MenuItem[] | false
   graphMenu?: MenuItem[] | false
+  selectionMenu?: MenuItem[] | false
 }
 
+export type MenuType = 'nodeMenu' | 'edgeMenu' | 'graphMenu' | 'selectionMenu'
+
 const DefaultNodeMenuKey = 'lf:defaultNodeMenu'
 const DefaultEdgeMenuKey = 'lf:defaultEdgeMenu'
 const DefaultGraphMenuKey = 'lf:defaultGraphMenu'
 const DefaultSelectionMenuKey = 'lf:defaultSelectionMenu'
 
+const menuKeyMap: Record<MenuType, string> = {
+  nodeMenu: DefaultNodeMenuKey,
+  edgeMenu: DefaultEdgeMenuKey,
+  graphMenu: DefaultGraphMenuKey,
+  selectionMenu: DefaultSelectionMenuKey,
+}
+
+const defaultMenuConfig: MenuConfig = {
+  nodeMenu: [],
+  edgeMenu: [],
+  graphMenu: [],
+  selectionMenu: [],
+}
+
 class Menu {
   lf: LogicFlow
   private __container?: HTMLElement
@@ -32,27 +50,38 @@ class Menu {
   private menuTypeMap?: Map<string, MenuItem[]>
   private __currentData: EdgeData | NodeData | GraphData | Position | null =
     null
+  private __isSilentMode: boolean = false
+  private __editConfigChangeHandler?: ({
+    data,
+  }: {
+    data: EditConfigModel
+  }) => void
   static pluginName = 'menu'
 
   constructor({ lf }) {
     this.lf = lf
-    const {
-      options: { isSilentMode },
-    } = lf
-    if (!isSilentMode) {
-      this.__menuDOM = document.createElement('ul')
-
-      this.menuTypeMap = new Map()
-      this.init()
-      this.lf.setMenuConfig = (config) => {
-        this.setMenuConfig(config)
-      }
-      this.lf.addMenuConfig = (config) => {
-        this.addMenuConfig(config)
-      }
-      this.lf.setMenuByType = (config) => {
-        this.setMenuByType(config)
-      }
+    this.__menuDOM = document.createElement('ul')
+    this.__isSilentMode = lf.graphModel.editConfigModel.isSilentMode
+
+    this.menuTypeMap = new Map()
+    this.init()
+    this.lf.setMenuConfig = (config) => {
+      this.setMenuConfig(config)
+    }
+    this.lf.addMenuConfig = (config) => {
+      this.addMenuConfig(config)
+    }
+    this.lf.setMenuByType = (config) => {
+      this.setMenuByType(config)
+    }
+    this.lf.changeMenuItemDisableStatus = (menuKey, text, disabled) => {
+      this.changeMenuItemDisableStatus(menuKey, text, disabled)
+    }
+    this.lf.getMenuConfig = (menuKey) => {
+      return this.getMenuConfig(menuKey)
+    }
+    this.lf.resetMenuConfigByType = (menuType) => {
+      this.resetMenuConfigByType(menuType)
     }
   }
 
@@ -60,7 +89,7 @@ class Menu {
    * 初始化设置默认内置菜单栏
    */
   private init() {
-    const defaultNodeMenu = [
+    defaultMenuConfig.nodeMenu = [
       {
         text: '删除',
         callback: (node) => {
@@ -80,9 +109,9 @@ class Menu {
         },
       },
     ]
-    this.menuTypeMap?.set(DefaultNodeMenuKey, defaultNodeMenu)
+    this.menuTypeMap?.set(DefaultNodeMenuKey, defaultMenuConfig.nodeMenu)
 
-    const defaultEdgeMenu = [
+    defaultMenuConfig.edgeMenu = [
       {
         text: '删除',
         callback: (edge) => {
@@ -96,11 +125,11 @@ class Menu {
         },
       },
     ]
-    this.menuTypeMap?.set(DefaultEdgeMenuKey, defaultEdgeMenu)
+    this.menuTypeMap?.set(DefaultEdgeMenuKey, defaultMenuConfig.edgeMenu)
 
-    this.menuTypeMap?.set(DefaultGraphMenuKey, [])
+    defaultMenuConfig.graphMenu = []
 
-    const DefaultSelectionMenu = [
+    defaultMenuConfig.selectionMenu = [
       {
         text: '删除',
         callback: (elements) => {
@@ -110,138 +139,16 @@ class Menu {
         },
       },
     ]
-    this.menuTypeMap?.set(DefaultSelectionMenuKey, DefaultSelectionMenu)
-  }
-
-  render(lf: LogicFlow, container: HTMLElement) {
-    if (lf.options.isSilentMode) return
-    this.__container = container
-    this.__currentData = null // 当前展示的菜单所属元素的model数据
-    if (this.__menuDOM) {
-      this.__menuDOM.className = 'lf-menu'
-      container.appendChild(this.__menuDOM)
-      // 将选项的click事件委托至menu容器
-      // 在捕获阶段拦截并执行
-      this.__menuDOM.addEventListener(
-        'click',
-        (event) => {
-          event.stopPropagation()
-          let target = event.target as HTMLElement
-          // 菜单有多层dom，需要精确获取菜单项所对应的dom
-          // 除菜单项dom外，应考虑两种情况
-          // 1. 菜单项的子元素 2. 菜单外层容器
-          while (
-            Array.from(target.classList).indexOf('lf-menu-item') === -1 &&
-            Array.from(target.classList).indexOf('lf-menu') === -1
-          ) {
-            target = target?.parentElement as HTMLElement
-          }
-          if (Array.from(target.classList).indexOf('lf-menu-item') > -1) {
-            // 如果点击区域在菜单项内
-            ;(target as any).onclickCallback(this.__currentData)
-            // 点击后隐藏menu
-            if (this.__menuDOM) {
-              this.__menuDOM.style.display = 'none'
-            }
-            this.__currentData = null
-          } else {
-            // 如果点击区域不在菜单项内
-            console.warn('点击区域不在菜单项内，请检查代码！')
-          }
-        },
-        true,
-      )
-    }
-    // 通过事件控制菜单的显示和隐藏
-    this.lf.on('node:contextmenu', ({ data, position, e }) => {
-      const {
-        domOverlayPosition: { x, y },
-      } = position
-      const { id } = data
-      const model = this.lf.graphModel.getNodeModelById(id)
-
-      if (!model) return
-      let menuList: any = []
-      const typeMenus = this.menuTypeMap?.get(model.type)
-      // 1.如果单个节点自定义了菜单，以单个节点自定义为准
-      if (model && model.menu && Array.isArray(model.menu)) {
-        menuList = model.menu
-      } else if (typeMenus) {
-        // 2.如果当前节点类型定义了菜单，再取该配置
-        menuList = typeMenus
-      } else {
-        // 3.最后取全局默认
-        menuList = this.menuTypeMap?.get(DefaultNodeMenuKey)
-      }
-      this.__currentData = data
-      this.showMenu(x, y, menuList, {
-        width: model.width,
-        height: model.height,
-        clientX: e.clientX,
-        clientY: e.clientY,
-      })
-    })
-    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)
-      // 菜单优先级： model.menu > typeMenus > defaultEdgeMenu，注释同上节点
-      if (model && model.menu && Array.isArray(model.menu)) {
-        menuList = model.menu
-      } else if (typeMenus) {
-        menuList = typeMenus
-      } else {
-        menuList = this.menuTypeMap?.get(DefaultEdgeMenuKey) ?? []
-      }
-      this.__currentData = data
-      this.showMenu(x, y, menuList, {
-        width: model.width,
-        height: model.height,
-        clientX: e.clientX,
-        clientY: e.clientY,
-      })
-    })
-    this.lf.on('blank:contextmenu', ({ position }) => {
-      const menuList = this.menuTypeMap?.get(DefaultGraphMenuKey) ?? []
-      const {
-        domOverlayPosition: { x, y },
-      } = position
-      this.__currentData = { ...position.canvasOverlayPosition }
-      this.showMenu(x, y, menuList)
-    })
-    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'
-    })
-    this.lf.on('edge:click', () => {
-      this.__menuDOM!.style.display = 'none'
-    })
-    this.lf.on('blank:click', () => {
-      this.__menuDOM!.style.display = 'none'
-    })
-  }
-
-  destroy() {
-    if (this.__menuDOM) {
-      this?.__container?.removeChild(this.__menuDOM)
-      this.__menuDOM = undefined
-    }
+    this.menuTypeMap?.set(
+      DefaultSelectionMenuKey,
+      defaultMenuConfig.selectionMenu,
+    )
   }
 
   private showMenu(x, y, menuList, options?) {
+    // 在静默模式下不显示菜单
+    if (this.__isSilentMode) return
+
     if (!menuList || !menuList.length) return
     const { __menuDOM: menu } = this
     if (menu) {
@@ -323,13 +230,109 @@ class Menu {
   }
 
   /**
-   * 设置指定类型元素的菜单
+   * 通用的菜单配置处理方法
    */
-  setMenuByType({ type, menu }: { type: string; menu: MenuItem[] }) {
-    if (!type || !menu) {
+  private processMenuConfig(config: MenuConfig, operation: 'set' | 'add') {
+    if (!config) return
+
+    const menuTypes: MenuType[] = [
+      'nodeMenu',
+      'edgeMenu',
+      'graphMenu',
+      'selectionMenu',
+    ]
+
+    menuTypes.forEach((menuType) => {
+      const menuConfig = config[menuType]
+      const menuKey = menuKeyMap[menuType]
+
+      if (menuConfig === undefined) return
+
+      if (operation === 'set') {
+        // 设置菜单配置
+        this.menuTypeMap?.set(menuKey, menuConfig ? menuConfig : [])
+      } else if (operation === 'add' && Array.isArray(menuConfig)) {
+        // 追加菜单配置（只支持数组类型）
+        const existingMenuList = this.menuTypeMap?.get(menuKey) ?? []
+        this.menuTypeMap?.set(menuKey, existingMenuList.concat(menuConfig))
+      }
+    })
+  }
+
+  /**
+   * 创建图片元素
+   */
+  private createImageElement(src: string, alt: string): HTMLImageElement {
+    const img = document.createElement('img')
+    img.src = src
+    img.alt = alt
+    img.style.width = '16px'
+    img.style.height = '16px'
+    img.style.objectFit = 'contain'
+    return img
+  }
+
+  /**
+   * 检查是否为图片文件路径
+   */
+  private isImageFile(iconString: string): boolean {
+    const imageExtensions = [
+      '.png',
+      '.jpg',
+      '.jpeg',
+      '.gif',
+      '.svg',
+      '.webp',
+      '.ico',
+      '.bmp',
+    ]
+    return imageExtensions.some((ext) => iconString.toLowerCase().includes(ext))
+  }
+
+  /**
+   * 处理图标逻辑
+   */
+  private processIcon(
+    iconContainer: HTMLElement,
+    icon: boolean | string,
+    text?: string,
+  ) {
+    if (typeof icon !== 'string') {
+      // 如果icon是true，保持原有逻辑（创建空的图标容器）
       return
     }
-    this.menuTypeMap?.set(type, menu)
+
+    const iconString = icon as string
+
+    // 1. base64格式的图片数据
+    if (iconString.startsWith('data:image/')) {
+      const img = this.createImageElement(iconString, text || 'icon')
+      iconContainer.appendChild(img)
+      return
+    }
+
+    // 2. 图片文件路径
+    if (this.isImageFile(iconString)) {
+      const img = this.createImageElement(iconString, text || 'icon')
+      iconContainer.appendChild(img)
+      return
+    }
+
+    // 3. HTML内容（包含< >标签）
+    if (iconString.includes('<') && iconString.includes('>')) {
+      iconContainer.innerHTML = iconString
+      return
+    }
+
+    // 4. CSS类名（以空格分隔的多个类名或以.开头）
+    if (iconString.includes(' ') || iconString.startsWith('.')) {
+      const iconClasses = iconString.replace(/^\./, '').split(' ')
+      iconContainer.classList.add(...iconClasses)
+      return
+    }
+
+    // 5. 单个CSS类名
+    iconContainer.classList.add(iconString)
   }
 
   /**
@@ -344,13 +347,14 @@ class Menu {
       list.forEach((item) => {
         const element = document.createElement('li')
         if (item.className) {
-          element.className = `lf-menu-item ${item.className}`
+          element.className = `lf-menu-item ${item.disabled ? 'lf-menu-item__disabled' : ''} ${item.className}`
         } else {
-          element.className = 'lf-menu-item'
+          element.className = `lf-menu-item ${item.disabled ? 'lf-menu-item__disabled' : ''}`
         }
-        if (item.icon === true) {
+        if (item.icon) {
           const icon = document.createElement('span')
           icon.className = 'lf-menu-item-icon'
+          this.processIcon(icon, item.icon, item.text)
           element.appendChild(icon)
         }
         const text = document.createElement('span')
@@ -359,64 +363,198 @@ class Menu {
           text.innerText = item.text
         }
         element.appendChild(text)
+        if (item.disabled) {
+          element.setAttribute('disabled', 'true')
+        }
         ;(element as any).onclickCallback = item.callback
         menuList.push(element)
       })
     return menuList
   }
 
-  // 复写菜单
-  setMenuConfig(config: MenuConfig) {
-    if (!config) {
+  /**
+   * 更新菜单项DOM元素的禁用状态
+   * @param text 菜单项文本
+   * @param disabled 是否禁用
+   */
+  private updateMenuItemDOMStatus(text: string, disabled: boolean) {
+    if (!this.__menuDOM || this.__menuDOM.style.display === 'none') {
       return
     }
-    // node
-    config.nodeMenu !== undefined &&
-      this.menuTypeMap?.set(
-        DefaultNodeMenuKey,
-        config.nodeMenu ? config.nodeMenu : [],
-      )
-    // edge
-    config.edgeMenu !== undefined &&
-      this.menuTypeMap?.set(
-        DefaultEdgeMenuKey,
-        config.edgeMenu ? config.edgeMenu : [],
-      )
-    // graph
-    config.graphMenu !== undefined &&
-      this.menuTypeMap?.set(
-        DefaultGraphMenuKey,
-        config.graphMenu ? config.graphMenu : [],
-      )
+
+    // 查找对应的菜单项DOM元素
+    const menuItems = Array.from(
+      this.__menuDOM.querySelectorAll('.lf-menu-item'),
+    )
+
+    const targetMenuItem = menuItems.find((menuItemElement) => {
+      const textElement = menuItemElement.querySelector('.lf-menu-item-text')
+      return textElement?.textContent === text
+    })
+
+    if (targetMenuItem) {
+      const element = targetMenuItem as HTMLElement
+
+      if (disabled) {
+        element.classList.add('lf-menu-item__disabled')
+        element.setAttribute('disabled', 'true')
+      } else {
+        element.classList.remove('lf-menu-item__disabled')
+        element.removeAttribute('disabled')
+      }
+    }
   }
 
-  // 在默认菜单后面追加菜单项
-  addMenuConfig(config: MenuConfig) {
-    if (!config) {
+  /**
+   * 设置静默模式监听器
+   * 当 isSilentMode 变化时，动态更新菜单的显隐状态
+   */
+  private setupSilentModeListener() {
+    // 创建并保存事件处理器引用
+    this.__editConfigChangeHandler = ({ data }) => {
+      const newIsSilentMode = data.isSilentMode
+      if (newIsSilentMode !== this.__isSilentMode) {
+        this.__isSilentMode = newIsSilentMode
+        this.updateMenuVisibility(!newIsSilentMode)
+      }
+    }
+    // 监听编辑配置变化
+    this.lf.on('editConfig:changed', this.__editConfigChangeHandler)
+  }
+
+  /**
+   * 更新菜单显隐状态
+   */
+  private updateMenuVisibility(visible: boolean) {
+    if (!this.__menuDOM) return
+
+    if (visible) {
+      if (this.__currentData) {
+        this.__menuDOM.style.display = 'block'
+      }
+    } else {
+      this.__menuDOM.style.display = 'none'
+      this.__currentData = null // 清除当前数据
+    }
+  }
+
+  /**
+   * 检查菜单是否正在显示并重新渲染
+   */
+  private refreshCurrentMenu() {
+    if (
+      !this.__menuDOM ||
+      this.__menuDOM.style.display === 'none' ||
+      !this.__currentData
+    ) {
       return
     }
-    // 追加项时，只支持数组类型，对false不做操作
-    if (Array.isArray(config.nodeMenu)) {
-      const menuList = this.menuTypeMap?.get(DefaultNodeMenuKey) ?? []
-      this.menuTypeMap?.set(
-        DefaultNodeMenuKey,
-        menuList.concat(config.nodeMenu),
-      )
+
+    // 保存当前菜单的位置
+    const { left, top } = this.__menuDOM.style
+
+    // 根据当前数据类型获取对应的菜单配置
+    let menuList: any[] = []
+
+    // 判断当前数据类型并获取相应菜单
+    if (this.__currentData && typeof this.__currentData === 'object') {
+      if (
+        'sourceNodeId' in this.__currentData &&
+        'targetNodeId' in this.__currentData
+      ) {
+        // 边菜单
+        const model = this.lf.graphModel.getEdgeModelById(
+          (this.__currentData as any).id,
+        )
+        if (model) {
+          const typeMenus = this.menuTypeMap?.get(model.type)
+          if (model.menu && Array.isArray(model.menu)) {
+            menuList = model.menu
+          } else if (typeMenus) {
+            menuList = typeMenus
+          } else {
+            menuList = this.menuTypeMap?.get(DefaultEdgeMenuKey) ?? []
+          }
+        }
+      } else if ('id' in this.__currentData && 'type' in this.__currentData) {
+        // 节点菜单
+        const model = this.lf.graphModel.getNodeModelById(
+          (this.__currentData as any).id,
+        )
+        if (model) {
+          const typeMenus = this.menuTypeMap?.get(model.type)
+          if (model.menu && Array.isArray(model.menu)) {
+            menuList = model.menu
+          } else if (typeMenus) {
+            menuList = typeMenus
+          } else {
+            menuList = this.menuTypeMap?.get(DefaultNodeMenuKey) ?? []
+          }
+        }
+      } else if (
+        'nodes' in this.__currentData &&
+        'edges' in this.__currentData
+      ) {
+        // 选区菜单
+        menuList = this.menuTypeMap?.get(DefaultSelectionMenuKey) ?? []
+      } else {
+        // 画布菜单
+        menuList = this.menuTypeMap?.get(DefaultGraphMenuKey) ?? []
+      }
     }
-    if (Array.isArray(config.edgeMenu)) {
-      const menuList = this.menuTypeMap?.get(DefaultEdgeMenuKey) ?? []
-      this.menuTypeMap?.set(
-        DefaultEdgeMenuKey,
-        menuList.concat(config.edgeMenu),
-      )
+
+    // 重新渲染菜单
+    if (menuList && menuList.length > 0) {
+      this.__menuDOM.innerHTML = ''
+      this.__menuDOM.append(...this.__getMenuDom(menuList))
+
+      // 恢复菜单位置（如果有的话）
+      if (left) this.__menuDOM.style.left = left
+      if (top) this.__menuDOM.style.top = top
+    } else {
+      // 如果没有菜单项，隐藏菜单
+      this.__menuDOM.style.display = 'none'
+      this.__currentData = null
     }
-    if (Array.isArray(config.graphMenu)) {
-      const menuList = this.menuTypeMap?.get(DefaultGraphMenuKey) ?? []
-      this.menuTypeMap?.set(
-        DefaultGraphMenuKey,
-        menuList.concat(config.graphMenu),
-      )
+  }
+
+  /**
+   * 设置指定类型元素的菜单
+   */
+  setMenuByType({ type, menu }: { type: string; menu: MenuItem[] }) {
+    if (!type || !menu) {
+      return
     }
+    this.menuTypeMap?.set(type, menu)
+    this.refreshCurrentMenu() // 实时更新DOM
+  }
+
+  getMenuConfig(menuKey: MenuType) {
+    return this.menuTypeMap?.get(menuKeyMap[menuKey]) ?? []
+  }
+
+  resetMenuConfigByType(menuKey: MenuType) {
+    this.setMenuConfig({
+      [menuKey]: defaultMenuConfig[menuKey],
+    })
+    // setMenuConfig 已经包含了 refreshCurrentMenu 调用
+  }
+
+  resetAllMenuConfig() {
+    this.setMenuConfig(defaultMenuConfig)
+    // setMenuConfig 已经包含了 refreshCurrentMenu 调用
+  }
+
+  // 复写菜单
+  setMenuConfig(config: MenuConfig) {
+    this.processMenuConfig(config, 'set')
+    this.refreshCurrentMenu() // 实时更新DOM
+  }
+
+  // 在默认菜单后面追加菜单项
+  addMenuConfig(config: MenuConfig) {
+    this.processMenuConfig(config, 'add')
+    this.refreshCurrentMenu() // 实时更新DOM
   }
 
   /**
@@ -433,6 +571,176 @@ class Menu {
         "The first parameter of changeMenuConfig should be 'add' or 'reset'",
       )
     }
+    // addMenuConfig 和 setMenuConfig 已经包含了 refreshCurrentMenu 调用
+  }
+
+  changeMenuItemDisableStatus(
+    menuKey: MenuType,
+    text: string,
+    disabled: boolean,
+  ) {
+    if (!menuKey || !text) {
+      console.warn('params is vaild')
+      return
+    }
+    const menuList = this.menuTypeMap?.get(menuKeyMap[menuKey]) ?? []
+    if (!menuList.length) {
+      console.warn(`menuMap: ${menuKey} is not exist`)
+      return
+    }
+    const menuItem = menuList.find((item) => item.text === text)
+    if (!menuItem) {
+      console.warn(`menuItem: ${text} is not exist`)
+      return
+    }
+    menuItem.disabled = disabled
+
+    // 如果菜单当前正在显示，则同时更新DOM元素的样式
+    this.updateMenuItemDOMStatus(text, disabled)
+  }
+
+  render(lf: LogicFlow, container: HTMLElement) {
+    if (lf.graphModel.editConfigModel.isSilentMode) return
+    this.__container = container
+    this.__currentData = null // 当前展示的菜单所属元素的model数据
+
+    // 监听 isSilentMode 变化
+    this.setupSilentModeListener()
+
+    if (this.__menuDOM) {
+      this.__menuDOM.className = 'lf-menu'
+      container.appendChild(this.__menuDOM)
+      // 将选项的click事件委托至menu容器
+      // 在捕获阶段拦截并执行
+      this.__menuDOM.addEventListener(
+        'click',
+        (event) => {
+          event.stopPropagation()
+          let target = event.target as HTMLElement
+
+          // 菜单有多层dom，需要精确获取菜单项所对应的dom
+          // 除菜单项dom外，应考虑两种情况
+          // 1. 菜单项的子元素 2. 菜单外层容器
+          while (
+            Array.from(target.classList).indexOf('lf-menu-item') === -1 &&
+            Array.from(target.classList).indexOf('lf-menu') === -1
+          ) {
+            target = target?.parentElement as HTMLElement
+          }
+          if (
+            Array.from(target.classList).indexOf('lf-menu-item__disabled') > -1
+          )
+            return
+          if (Array.from(target.classList).indexOf('lf-menu-item') > -1) {
+            // 如果菜单项被禁用，则不执行回调
+            ;(target as any).onclickCallback(this.__currentData, target)
+            // 点击后隐藏menu
+            if (this.__menuDOM) {
+              this.__menuDOM.style.display = 'none'
+            }
+            this.__currentData = null
+          } else {
+            // 如果点击区域不在菜单项内
+            console.warn('点击区域不在菜单项内，请检查代码！')
+          }
+        },
+        true,
+      )
+    }
+    // 通过事件控制菜单的显示和隐藏
+    this.lf.on('node:contextmenu', ({ data, position, e }) => {
+      const {
+        domOverlayPosition: { x, y },
+      } = position
+      const { id } = data
+      const model = this.lf.graphModel.getNodeModelById(id)
+
+      if (!model || this.__isSilentMode) return
+      let menuList: any = []
+      const typeMenus = this.menuTypeMap?.get(model.type)
+      // 1.如果单个节点自定义了菜单，以单个节点自定义为准
+      if (model && model.menu && Array.isArray(model.menu)) {
+        menuList = model.menu
+      } else if (typeMenus) {
+        // 2.如果当前节点类型定义了菜单，再取该配置
+        menuList = typeMenus
+      } else {
+        // 3.最后取全局默认
+        menuList = this.menuTypeMap?.get(DefaultNodeMenuKey)
+      }
+      this.__currentData = data
+      this.showMenu(x, y, menuList, {
+        width: model.width,
+        height: model.height,
+        clientX: e.clientX,
+        clientY: e.clientY,
+      })
+    })
+    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 || this.__isSilentMode) return
+      let menuList: any = []
+      const typeMenus = this.menuTypeMap?.get(model.type)
+      // 菜单优先级： model.menu > typeMenus > defaultEdgeMenu，注释同上节点
+      if (model && model.menu && Array.isArray(model.menu)) {
+        menuList = model.menu
+      } else if (typeMenus) {
+        menuList = typeMenus
+      } else {
+        menuList = this.menuTypeMap?.get(DefaultEdgeMenuKey) ?? []
+      }
+      this.__currentData = data
+      this.showMenu(x, y, menuList, {
+        width: model.width,
+        height: model.height,
+        clientX: e.clientX,
+        clientY: e.clientY,
+      })
+    })
+    this.lf.on('blank:contextmenu', ({ position }) => {
+      if (this.__isSilentMode) return
+      const menuList = this.menuTypeMap?.get(DefaultGraphMenuKey) ?? []
+      const {
+        domOverlayPosition: { x, y },
+      } = position
+      this.__currentData = { ...position.canvasOverlayPosition }
+      this.showMenu(x, y, menuList)
+    })
+    this.lf.on('selection:contextmenu', ({ data, position }) => {
+      if (this.__isSilentMode) return
+      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'
+    })
+    this.lf.on('edge:click', () => {
+      this.__menuDOM!.style.display = 'none'
+    })
+    this.lf.on('blank:click', () => {
+      this.__menuDOM!.style.display = 'none'
+    })
+  }
+
+  destroy() {
+    // 清理事件监听器
+    if (this.__editConfigChangeHandler) {
+      this.lf.off('editConfig:changed', this.__editConfigChangeHandler)
+    }
+
+    if (this.__menuDOM) {
+      this?.__container?.removeChild(this.__menuDOM)
+      this.__menuDOM = undefined
+    }
   }
 }