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