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()