【前端】跟着maxkb学习logicflow流程图画法

背景

看看前端如何绘制流程图，界面好看点。

• "@logicflow/core": "1.2.27",
  

• "@logicflow/extension": "1.2.27",
  

1. 选定学习对象-maxkb应用逻辑编排

2. 确定实现框架

maxkb采用vue3 + ts + logicflow实现上面的界面，我们选择vue2 + js跟着学。

3. 关键逻辑：查看app-node.js

import { HtmlResize } from '@logicflow/extension'

app-node.js是maxkb的基础节点， 所有的节点基本都是由此扩展而来，以开始节点为例，其定义的js为：

import StartNodeVue from './index.vue'
import { AppNode, AppNodeModel } from '@/workflow/common/app-node'
class StartNode extends AppNode {constructor (props) {super(props, StartNodeVue)}
}
export default {type: 'start-node',model: AppNodeModel,view: StartNode
}

而配置开始节点的属性字段、通过表单录入的逻辑则是在startNode/index.vue中编写。

4. 学习开始节点绘制

我们绘制一个demo级别的开始节点，通过logicflow

可以看到很简陋，那么我们尝试自定义节点样式，通过logicflow提供的html节点方法。

流程数据形式

{"nodes": [{"id": "1","type": "start-node","x": 580,"y": 160,"properties": {"name": "Default Node","body": "Node content"}},{"id": "2","type": "end-node","x": 1160,"y": 160,"properties": {"name": "Default Node","body": "Node content"}}],"edges": [{"id": "0cc6a7da-1a06-4f7e-b792-dc11c8c91c97","type": "bezier","sourceNodeId": "1","targetNodeId": "2","startPoint": {"x": 730,"y": 160},"endPoint": {"x": 1010,"y": 160},"properties": {},"pointsList": [{"x": 730,"y": 160},{"x": 830,"y": 160},{"x": 910,"y": 160},{"x": 1010,"y": 160}]}]
}

5. 给节点增加表单输入框

vue节点组件中，emit回传数据， 然后通过this.lf.on处理属性更新。
需要注意input框使用@blur监听， 如果是@input可能需要防抖处理。

this.lf.on("update:properties", (model) => { // 处理节点emit回来的事件数据this.lf.setProperties(model.id, model.properties);
});

遇到过的问题

• 节点有几个锚点，以及锚点坐标位置定义 ok
• 通过vue + js 定义一个自定义节点 ok
• 拖拽生成节点 no
• 点击锚点上的加号， 选择下一步节点 no