Vue工作流渲染 可拖拽編輯流程圖（附源碼）

x6-vue-example

基于Vue的X6圖編輯示例

X6 是 AntV 旗下的圖編輯引擎

提供了開箱即用的互動元件和簡單易用的節點定制能力，友善我們快速搭建流程圖、DAG 圖、ER 圖等圖應用。

特性

1. 支援元素節點有圖形面闆區拖拽至主畫布,拖拽調整元素位置,拖拽調整元素大小
2. 支援通過拖拽形式進行節點間連線,可控的節點連接配接樁,以及對已有連線拖拽調整連線位置
3. 支援縮略圖
4. 支援鍵盤快捷鍵監聽,例如Del BackPlace ctrl等按鍵以及組合鍵
5. 支援流程編輯操作的撤銷,重做,清空,儲存圖資料,讀取資料後渲染圖
6. 支援滑鼠懸停,點選,單選,框選元素,以及觸發相關事件
7. 支援監聽流程圖視窗尺寸變化,以便調整畫布尺寸

項目示例

項目截圖

使用說明

1. 按下ctrl後将滑鼠移入連線可進行連線拐點調整
2. 按下ctrl後使用滑鼠左鍵單擊圓角矩形節點,可繼續節點尺寸大小調整
3. 按下ctrl和不按下ctrl對應滑鼠滾動操作不同
4. 單擊或框選節點和連線後,可通過Del或BlackPlace鍵删除選中對象
5. ctrl+z 撤銷;ctrl+y 重做
6. 儲存和重新整理網頁觸發的事件為模拟實際的HTTP請求

安裝

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report
           

特别說明

1. 此項目建立的初衷是在進行Antv X6引擎學習時發現流程編輯的example隻有React版本,是以參考其相關功能做了一個Vue版本,并開源出來以供大家參考閱讀
2. 項目中幾乎所有功能都是通過調用X6提供的API完成的,各位如需補充更多功能請移步到X6官網研讀

源碼

x6-vue-example: x6示例項目 (gitee.com)