

首页  思维导图  详情



LogicFlow插件

2024-06-08 19:25:42   5  举报





AI智能生成

LogicFlow插件，包括拖拽面板、控制面板、菜单、选区、迷你地图、自定义插件等

LogicFlow

插件

流程

flowbale

模版推荐

作者其他创作

大纲/内容

安装

全局插件

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

 Collect

Get Started

病理插件开发

 Collect

Get Started

插件化电商ERP平台业务流程

 Collect

Get Started

flash引擎插件的初始化时序图

 Collect

Get Started

LogicFlow





0 条评论

下一页