在 LogicFlow 中,lf.value.extension.menu.setMenuByType方法里的 type参数,其具体取值完全由你自定义的节点和边

8 阅读2分钟

在 LogicFlow 中,lf.value.extension.menu.setMenuByType方法里的 type参数,其具体取值完全由你自定义的节点和边的类型决定,并没有一个固定数量的“几种”。这个 type就是你注册节点或边时定义的唯一标识符。

核心概念

setMenuByType方法的作用是为特定类型的节点或边设置专属的右键菜单。这里的 type需要与你通过 lf.register方法注册自定义节点或边时使用的 type字段完全一致。

常见 type示例

下面的表格列举了一些常见的基础节点类型和自定义节点类型的例子,它们都可以作为 type的值:

类别节点/边类型 (type值)说明
基础图形节点'rect'矩形
'circle'圆形
'diamond'菱形
'polygon'多边形
'ellipse'椭圆
'text'文本
基础边'polyline'折线
'line'直线
'bezier'贝塞尔曲线
自定义节点'CustomNode'你自定义的业务节点,例如审批节点
'bpmn:startEvent'遵循BPMN规范的开始事件节点
'CustomCircle'继承自圆形节点的自定义节点

使用方法

一旦确定了节点的 type,你就可以为它配置专属菜单了:

// 假设你有一个类型为 'approval-node' 的自定义审批节点
lf.value.extension.menu.setMenuByType({
  type: 'approval-node', // 此处的 type 必须与节点定义时的 type 一致
  menu: [
    {
      text: '通过审批',
      callback: (nodeData) => {
        // 业务逻辑:将该节点的状态标记为“通过”
        lf.value.setProperties(nodeData.id, { status: 'approved' });
      }
    },
    {
      text: '拒绝审批',
      callback: (nodeData) => {
        // 业务逻辑:将该节点的状态标记为“拒绝”
        lf.value.setProperties(nodeData.id, { status: 'rejected' });
      }
    }
  ]
});

如何查看和定义 type

  1. 查看已注册的类型:你可以通过检查注册节点的代码来确认可用的 type。在你的项目中,搜索 lf.register语句,其中的 type字段值就是可用的选项。

    lf.register({
      type: 'Your_Custom_Type', // <-- 这个就是可用的 type
      view: YourNodeView,
      model: YourNodeModel
    });
    
  2. 自定义类型的建议:在实际业务开发中,强烈建议使用有明确业务含义的名称作为 type,而不是简单的 rectcircle等基础图形名称。例如,使用 'start-event''approval-task''end-event',这样能使代码更清晰,菜单配置也更具有针对性。

重要提示

  • 菜单优先级:LogicFlow 的右键菜单遵循一定的优先级规则。通过 setMenuByType为特定类型设置的菜单,其优先级高于通过 addMenuConfig设置的通用菜单。

  • 样式引入:在使用 Menu 插件时,务必确保已经引入了其样式文件,否则菜单可能显示异常或位置错乱。

    import '@logicflow/extension/lib/style/index.css';
    

希望这个解释能帮助你更好地理解和使用 setMenuByType方法!如果你的自定义节点有特定的类型,可以告诉我,我可以帮你分析如何为其配置菜单。