js流程圖：aworkflow.js

js實作流程圖

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()

render()

render()

DrawView

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