我的LF使用说明

ps. 这是一篇关于LogicFlow的使用笔记

不可或缺

1. 导入

import LogicFlow from '@logicflow/core'
import { onMounted, ref } from 'vue'

2. 画布

<div ref="container" class="container"></div>

3. 实例化

// 声明容器的对应ref对象和LF对象
const container = ref()
const lf = ref<LogicFlow>()

// 实例化LogicFlow对象
onMounted(() => {
  lf.value = new LogicFlow({
    // 通过选项指定了渲染的容器和需要显示网格
    container: container.value,
    grid: true,
    plugins: []
  })
  lf.value.render()
})

BPMNTask自定义

1. 导入 & 数据存储指定地址

import LFData from '@/utils/LFData/index'
import { RegisterBPMNTask } from '@/utils/LFTools/registerNode'

LFData.CUSTOM_BPMN_TASK_DATA

2. 注册自定义节点

RegisterBPMNTask(lf.value)
// lf.value.render()

继承重写的自定义节点

1. 导入 & 数据存储指定地址

import LFData from '@/utils/LFData/index'
import { RegisterCustomNode } from '@/utils/LFTools/registerNode'

LFData.CUSTOM_NODE_LIST

2. 注册自定义节点

RegisterCustomNode(lf.value)
// lf.value.render()

拖拽面板

1. 导入 & 数据存储指定地址

import LFData from '@/utils/LFData/index'
import { DndPanel } from '@logicflow/extension'

LFData.DND_MENU_DATA

2. 使用拖拽面板插件

需在 new LogicFlow 时，在plugins中加入DndPanel插件

// plugins：[DndPanel]
lf.value.extension.dndPanel.setPatternItems(LFData.DEMO.MENU_DATA_JH)
// lf.value.render()

右键菜单

1. 导入

import LFData from '@/utils/LFData/index'
import { Menu } from '@logicflow/extension'
import { setPredefineMenuConfig } from '@/utils/LFTools/predefineMenu'

2. 使用菜单

需在 new LogicFlow 时，在plugins中加入Menu插件

// plugins：[Menu]

默认情况下，Menu在各个菜单内置了一些菜单选项，直接使用无需额外操作，包含以下菜单选项：

• 节点右键菜单(nodeMenu)： 删除、复制、编辑文案
• 边右键菜单(edgeMenu)：删除、编辑文案
• 画布右键菜单(graphMenu)：无

使用预定义菜单

setPredefineMenuConfig(lf.value)
// lf.value.render()

该方法预定义了以下菜单选项：

• 节点：复制、删除
• 边：删除
• 画布：清空、上一步、下一步

3. 自定义右键菜单

由于每个菜单选项都需要相应的callback函数，并且大多数callback函数都需要使用到lf对象，因此该自定义数据须在能引用到lf对象时定义，故不做数据存储和公共方法，直接在页面中定义即可，具体可参考官方文档。

const menuConfig = {...}
lf.value.extension.menu.setMenuConfig(menuConfig)
// lf.value.render()

4. 右键菜单补充

如果菜单需求基本符合官方提供的选项或预定义的选项，但仍需额外添加一些菜单选项，可使用以下方法：

const supplementalData = {...}
lf.value.extension.menu.addMenuConfig(supplementalData)
// lf.value.render()