js關係圖庫：aworkflow

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