js流程圖:aworkflow.js
auto-workflow
用於快速構建各種關係圖的庫
快速開始
npm install aworkflow
或者引用dist資料夾下的產出檔案
訪問demo
npm install
npm run dev
也可以訪問線上demo:
技術文件
快速開始
1,定義node:
let node1 = {
// 唯一標識,必須
id: '123',
// 自定義資料,用於填充模版,nodeName為元件文案
defineData: {
nodeName: '資料拆分'
},
// 畫布中位置
position: [100, 100],
// 輸入圈,物件陣列,每個物件表示一個輸入,以下標區分
input: [
{
}
],
// 輸出圈,物件陣列,每個物件表示一個輸出,allInputs:能連結到所有node的輸入,enbaleInputs:物件陣列,每個物件定義可以輸入的圈資訊(id對應節點,inputIndex對應輸入點下標)
output: [
{
allInputs: true,
enbaleInputs: [{
id: '124',
inputIndex: 0
}]
}
]
};
let node2 = {
// 使用的模版,預設使用defaultTemplate
templateName: 'iconTemplate',
id: '124',
defineData: {
nodeName: '隨機取樣',
imgSrc: 'base64...'
},
// 畫布中位置
position: [300, 100],
// 輸入
input: [
{
}
],
// 輸出
output: [
]
};
2,定義節點關係:
let edges = [
{
// 輸出節點及輸出圈,‘123:0’表示id為123的node的下標為0的輸出點
src: '123:0',
// 輸入節點及輸入圈,'124:0'表示id為124的node的下標為0的輸入點
to: '124:0'
}
];
3,例項化:
// 全域性配置
let globalConfig = {
// 是否靜態圖片,true:節點和連線都不可拖動,false:可以新增事件監聽
isStatic: false,
// 整個圖預設模版,預設為defaultTemplate
templateName: 'defaultTemplate',
// templateName: 'iconTemplate',
// 是否需要自動排序,true: 程式智慧計算每個node的位置,false: 根據node position來定位
autoSort: true,
// 自動排序時,true: 水平排序,false: 垂直排序
horizontal: false,
// 可選,node對齊方式,start: 水平排列時表示上對齊,垂直排列時表示左對齊 middle: 中間對齊 end: 水平排列時表示下對齊,垂直排列時表示右對齊
align: 'middle',
// 可選,beginX 起點X座標,預設10
beginX: 30,
// 可選,beginY 起點Y座標,預設10
beginY: 30,
// 可選,spaceX 橫向間距,預設200
spaceX: 200,
// 可選,spaceY 縱向間距,預設100
spaceY: 60
};
// 例項化
let workflow = new AWrokflow(document.getElementById('aw'), {nodes, edges}, globalConfig);
API
基礎概念
模版
模版是形狀和樣式的結合體,定義了節點(node)和連線(edge)的具體形狀和樣式
預設為defaultTemplate,由矩形和文案組成
系統內建iconTemplate模版,由一個icon和文案組成
系統內建菱形模版diamondTemplate,由菱形和文案組成
當然還可以自定義模版,可以參考demo,定義了一個紅色模版
定義的模版可以在node和edge中使用,這樣就可以畫出不同的節點和連線了
node
節點,可以定義使用的模版,模版中引數,輸入,輸出圈資訊
edge
連線,可以定義模版,連線資訊
高階用法,自定義node和edge的基礎繪製方法
DrawView
在渲染工作流中,為了方便地處理縮放,所以整個工作流的圖形集合是一個物件,對應zrender中的Group
類,預設情況下是Aworkflow中的DrawView
類,在DrawView
中包含了NodeView
和EdgeView
,NodeView
和EdgeView
是由不同的Shape組成的Group。如果想自定義一個渲染規則,可以參考src/draw/basicdraw/DrawView.js
中的程式碼,使用Draw.extend()
實現一個自定義的類,需要設定type
欄位,並且實現render()
方法,render()
方法中需要將最終使用的zrender的形狀例項物件return出去,以便於在Aworkflow中add到zrender物件中。(這個地方實現的好像不太好)
NodeView
Node是工作流中的節點,預設的實現類是src/draw/basicDraw/NodeView
,父類是src/draw/Node
,Node也是一個Group
,包含了像文字(Text),圖示(Image),矩形(Rect)等基本形狀。在NodeView中render輸入輸出點的時候,會根據點的個數和Node的position來計算出每個點的座標來繪製,同時可以在config中配置input或者output在node中的位置,如top、right、bottom、left。同樣,如果想要自定義一個Node,需要使用Node.extend()
方法,需要定義type和實現render()
方法,render()
方法中需要將最終使用的zrender的形狀例項物件return出去,以便於在DrawView
或者父集合物件中add到對應的Group物件中。
EdgeView
Edge是工作流中的連線,預設的實現類是src/draw/basicDraw/EdgeView
,父類是src/draw/Edge
,Edge也是一個Group
,包含了像貝塞爾曲線和三角形箭頭基本形狀。渲染連線需要在渲染節點之後進行,因為連線的資訊只有節點資訊沒有座標資訊,所以需要在節點渲染後,根據起止節點來計算處連線的起始點座標,同時會根據箭頭的位置對終點座標進行細微的調整。同樣,如果想要自定義一個Edge,需要使用Edge.extend()
方法,需要定義type和實現render()
方法,render()
方法中需要將最終使用的zrender的形狀例項物件return出去,以便於在DrawView
或者父集合物件中add到對應的Group物件中。
Shape
Shape是一些基本形狀,目前實現了的有BezierCurve、CirCle、Image、Text、React、Triangle,是對zrender中Displayable中的簡單封裝。在使用Shape的時候,需要先例項化,然後呼叫shape.init()
方法例項化對應的zrender物件,init之後shape.dom
中儲存便是對應的zrender物件。 需要自定義Shape的時候,需要使用Shape.extend()
方法。和上面幾個類似,具體可參考src/draw/shape
目錄中的程式碼
測試
npm run test
如何貢獻
討論
qq群:869605396