背景

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

• "@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