LogicFlow插件
2024-06-08 19:25:42 4 举报AI智能生成
LogicFlow插件，包括拖拽面板、控制面板、菜单、选区、迷你地图、自定义插件等
作者其他创作
大纲/内容
安装
全局插件
LogicFlow.use(BpmnElement);
实例插件
new LogicFlow({plugins: [DndPanel, SelectionSelect]});
菜单(Menu)
默认菜单
LogicFlow.use(Menu);
菜单类型
节点右键菜单(nodeMenu)： 删除、复制、编辑文案
边右键菜单(edgeMenu)：删除、编辑文案
画布右键菜单(graphMenu)：无
菜单配置项
text
菜单项展示的文案
className
class 名称
icon
是否创建 icon 的 span 展位
callback
点击后执行的回调
追加菜单选项
通过lf.extension.menu.addMenuConfig方法可以在原有菜单的基础上追加新的选项
重置菜单
如果默认菜单中存在不需要的选项，或者无法满足需求，可以通过lf.setMenuConfig重置菜单，更换
指定类型元素配置菜单
除了上面的为所有的节点、元素、画布自定义通用菜单外，还可以使用lf.setMenuByType为指定类型的节点或边定义菜单。
设置选区菜单
在使用了选区插件后，选区组件也会出现菜单，可以通过设置菜单项为空来实现不显示菜单效果。
指定业务状态设置菜单
在自定义元素的时候，为节点处于不同业务状态下设置菜单。
菜单样式
菜单：lf-menu
菜单项：lf-menu-item、用户自定义的 className
菜单项-文案：lf-menu-item-text
菜单项-图标：lf-menu-item-icon,需要将菜单项配置 icon 设置为 true 通过设置这些 class，可以覆盖默认样式，美化字体颜色，设置菜单项 icon 等。
拖拽面板(DndPanel)
import { DndPanel } from "@logicflow/extension";
自定义拖拽面板内容
控制面板(Control)
import { Control } from "@logicflow/extension";
自定义
添加选项
删除选项
小地图(MiniMap)
import { MiniMap } from "@logicflow/extension";
显示
lf.extension.miniMap.show(leftPosition?: number, topPosition?: number)
隐藏
lf.extension.miniMap.hide();
框选(SelectionSelect)
import { SelectionSelect } from "@logicflow/extension";
开启
lf.openSelectionSelect();
lf.extension.selectionSelect.openSelectionSelect();
关闭
lf.closeSelectionSelect();
lf.extension.selectionSelect.closeSelectionSelect();
节点缩放(NodeResize)
类型
RectResize
EllipseResize
DiamonResize
HtmlResize
设置节点的形状属性
事件
设置放大缩小的最大最小值
设置放大缩小的调整默认距离
设置调整边框样式
设置调整点样式
分组(Group)
默认分组
group 的数据格式
自定义分组
groupModel 的属性和方法
圆角折线(CurvedEdge)
边上插入节点(InsertNodeInPolyline)
数据转换(Adapter)
BPMN 元素(BpmnElement)
内置基础节点
事件
开始事件 (bpmn:startEvent)
边界事件 (bpmn:boundaryEvent)
中间事件
结束事件 (bpmn:endEvent)
任务
服务任务 (bpmn:serviceTask)
用户任务 (bpmn:userTask)
网关
并行网关 (bpmn:parallelGateway)
排他网关 (bpmn:exclusiveGateway)
包容网关 (bpmn:inclusiveGateway)
子流程
嵌入子流程 (bpmn:subProcess)
流（flow）
顺序流 (bpmn:sequenceFlow)
导出(Snapshot)
导出图片
import { Snapshot } from "@logicflow/extension";
导出
lf.getSnapshot();
lf.extension.snapshot.getSnapshot()
导出XML
import { lfJson2Xml, lfXml2Json } from "@logicflow/extension";
const data = lfJson2Xml(jsonData);
const xml = lfJson2Xml(lf.getGraphData());
自定义插件(CustomPlugin)
插件的基础格式
static pluginName
constructor({ lf, LogicFlow }) {}
render(lf, toolOverlay) {}
destroy() {}
0 条评论
下一页
![wallet-eco[web3多链钱包插件]](https://www.processon.com/chart_image/template/thumb/671884922144d03a915a4a4a.png?tid=671884922144d03a915a4a49)
