auto-workflow 用於快速構建各種關係圖的庫，比如流程圖，可視化執行流等 github地址：https://github.com/auto-workflow/AWorkflow 快速開始 npm install aworkflow 或者引用dist文件夾下的產出文件 訪問demo npm ...
auto-workflow
用於快速構建各種關係圖的庫，比如流程圖，可視化執行流等
github地址：https://github.com/auto-workflow/AWorkflow
快速開始
npm install aworkflow
或者引用dist文件夾下的產出文件
訪問demo
npm install
npm run dev
預設模版：http://localhost:9999/
動畫：http://localhost:9999/demo/animate
自動排列：http://localhost:9999/demo/autosort
自定義模版：http://localhost:9999/demo/custom
也可以訪問線上demo:
預設模版：http://zhoushengfe.com/flow/dist/index.html
動畫：http://zhoushengfe.com/flow/dist/demo/animate/index.html
自動排列：http://zhoushengfe.com/flow/dist/demo/autosort/index.html
自定義模版：http://zhoushengfe.com/flow/dist/demo/custom/index.html
技術文檔
快速開始
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
介面文檔： http://zhoushengfe.com/flow/api/index.html
基礎概念
模版
模版是形狀和樣式的結合體，定義了節點（node）和連線（edge）的具體形狀和樣式 預設為defaultTemplate，由矩形和文案組成 系統還提供了iconTemplate模版，由一個icon和文案組成 當然還可以自定義模版，可以參考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
