# 数据转换 Adapter
# LogicFlow 的数据格式
在 LogicFlow 中,一个流程图是由节点和连线组成的。
对于一个节点,我们需要知道这个节点的 id、类型、位置、文本、properties
对于一个连线,我们则需要知道这个连线的 id、类型、起始节点id(sourceNodeId)、目标节点id(targetNodeId)、文本、properties 以及连线的起点位置(startPoint),连线的终点位置(endPoint)。
- 折线的额外数据
pointsList
,因为折线是可以被用户手动调整的,所以增加此字段用于记录这个折线的具体路径。
- 折线的额外数据
# 类型
在 LogicFlow 中,一个节点宽、高、颜色等表示外观的信息都不会保存到数据中,而是统一使用这个节点的类型来表示。例如我们通过 LogicFlow 的自定义机制定义一个节点为“开始节点(startNode)”,那么当前的这个项目中,就应该是知道这个 type 为 startNode 的节点外观是什么样的。
# properties
properties 是 LogicFlow 预留给开发者的一个空对象,开发者可以基于这个属性来绑定任何数据。上面的类型中提到,一个节点具体外观是通过类型来确定。但是当在项目中,需要基于某些业务条件,将这个节点外观进行一些调整时,我们可以将这些业务条件放到 properties 中,然后在自定义节点的时候,通过getAttributes
方法拿到 properties,然后基于 proerties 中的内容重新设置这个节点的样式。
# 使用方法
lf.render({
nodes: [
{
id: '1',
type: 'rect',
x: 100,
y: 100,
},
{
id: '2',
type: 'circle',
x: 300,
y: 200,
}
],
edges: [
{
id: 'edge1',
type: 'polyline',
sourceNodeId: '1',
targetNodeId: '2',
startPoint: { x: 150, y: 100, },
endPoint: { x: 250, y: 200, },
pointList: [
{ x: 150, y: 100, },
{ x: 200, y: 100, },
{ x: 200, y: 200, },
{ x: 250, y: 200, },
]
}
]
})
# 什么是数据转换工具
在某些情况下,LogicFlow 生成的数据格式可能不满足业务需要的格式。比如后端需要的数据格式是 bpmn-js 生成的格式,那么可以使用数据转换工具,将 LogicFlow 生成的数据转换为 bpmn-js 生成的数据。
# 如何自定义数据转换工具
自定义数据转换工具本质上是将用户传入的数据,通过一个lf.adapterIn
方法,将其转换为 LogicFlow 可以识别的格式。然后在生成数据的时候,又通过lf.adapterOut
方法将 LogicFlow 的数据转换为用户传入的数据。所以自定义数据转换工具我们只需要重新覆盖这两个方法即可。
const lf = new LogicFlow({
container: document.querySelector('#app')
})
lf.adapterIn = function (userData) {
// 这里把userData转换为LogicFlow支持的格式
return logicFlowData;
}
lf.adapterOut = function (logicFlowData) {
// 这里把LogicFlow生成的数据转换为用户需要的格式。
return userData;
}
# 使用内置的数据转换工具
LogicFlow 内置通用的 bpmn-js 兼容的转换工具。可以支持将 LogicFlow 上绘制的图在 bpmn-js 上显示,也支持 bpmn-js 上绘制的图在 LogicFlow 上显示。LogicFlow2Bpmn
# bpmnAdapter
import LogicFlow from '@logicflow/core';
import { BpmnAdapter } from '@logicflow/extension';
// 注册插件
LogicFlow.use(BpmnAdapter);
// 示例化 LogicFlow
const lf = new LogicFlow();
lf.render();
// 通过 getGraphData 来获取转换后的数据
lf.getGraphData();