之前寫過從0到1的前端DAG實現流程.
為了方便有需要的同學使用,
現推出npm插件形式的版本.
可以通過
npm install --save
在vue項目中快速使用.
image.png
效果展示
-
畫布移動 / 復原
[圖片上傳中...(畫布縮放.gif-823313-1567493208259-0)]
-
畫布縮放 / 復原
畫布縮放.gif -
拖動節(jié)點
節(jié)點拖動gif.gif -
框選拖動多個節(jié)點
框選拖動gif.gif -
添加節(jié)點
添加節(jié)點gif.gif -
刪除節(jié)點
刪除節(jié)點.gif -
添加節(jié)點關系
添加節(jié)點關系gif.gif
-
刪除節(jié)點關系
刪除節(jié)點關系gif.gif -
添加節(jié)點入口 / 出口
節(jié)點出入口添加gif.gif -
展示模型訓練流程 ( 自定義用法需自行開發(fā) )
節(jié)點訓練gif.gif
使用方法
- 基礎安裝
npm install --save dag-board
vue項目的main.js中
import DAGBoard from 'dag-board'
Vue.use(DAGBoard)
具體文件里中
<DAGBoard :DataAll="DataAll" @updateDAG="updateDAG" @editNodeDetails="editNodeDetails"></DAGBoard>
DataAll: 數據源
updateDAG:每次動作行為會拋出最新的數據, 和對應事件名稱.
editNodeDetails: 可選內容,右鍵點擊節(jié)點會帶出節(jié)點數據,用此方法接受, 進行二次開發(fā).比如更改節(jié)點攜帶的數據等.
- 高級安裝 (動態(tài)添加節(jié)點的時候模擬用)
<node-bus v-if="nodeBusDragging" // 是否正在添加節(jié)點
:value="nodeName" // 模擬的節(jié)點名稱
:pos_x="nodeBusPositionX" // 動態(tài)賦值 鼠標位置的x坐標
:pos_y="nodeBusPositionY" /> // 動態(tài)賦值 鼠標位置的y坐標
以上內容均可前往github 下載項目查看使用過程, 熟練使用vue即可無障礙閱讀代碼.
數據源的擴展性 / 樣式自定義
為了更多同學能友好體驗,在github右側有JSON模擬器.使用如下圖.
-
節(jié)點自定義
節(jié)點自定義.gif
一份完整的節(jié)點包括以下幾個內容
{
"id": 1, // 節(jié)點id
"in_ports": [ 0 ], // 入口下標
"name": "NODE_PARENT", // 節(jié)點名稱
"out_ports": [ 0, 1 ], // 出口下標
"pos_x": 157, // 節(jié)點坐標 距離左側
"pos_y": 120, // 節(jié)點坐標 距離頂部
"nodeStyle": { /* 非必要 節(jié)點樣式 */
"border": "2px solid red"
},
"iconStyle": { /* 非必要 節(jié)點icon樣式 */
"background": "red"
},
"iconClassName": "el-icon-link", /* 非必要 節(jié)點icon的類名 */
"nameDescribe": "氣泡內容", /* 非必要 氣泡內容 */
},
-
節(jié)點關系自定義
節(jié)點關系自定義gif.gif
// 一份完整的節(jié)點關系包括以下幾個內容
"edges": [
{
"dst_input_idx": 0, // 來源節(jié)點出口的下標
"dst_node_id": 2, // 來源節(jié)點的id
"id": 1, // 節(jié)點的id
"src_node_id": 1, // 目標節(jié)點的id
"src_output_idx": 0 // 目標節(jié)點的入口下標
"style": { } /* 非必要 自定義節(jié)點樣式 */
}
],
更多內容移步github~ 戳我到github
很多內容致敬了阿里PAI的早期樣式
如果使用當中有任何問題或者實現不了的需求,
可以qq群艾特我.793841737.
今天是這個項目github破百贊的日子, 希望能幫助到更多的同學~
