背景

看看前端如何繪制流程圖，界面好看點。

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