JsPlumb在react的使用方法及介紹
JsPlumb在react的使用方法及介紹
一．相關資料來源：
1.//bitqiang.gitbooks.io/jsplumb/content/Chapter1_IMPORTS_AND_SETUP/ ——— 一個翻譯一半就不能打開的文檔
2.//github.com/wangduanduan/jsplumb-chinese-tutorial ——— 一個事件方法很全的網站（推薦）
3.//wdd.js.org/jsplumb-chinese-tutorial/#/ ——— 一個事件方法很全的網站（同上）
4.//www.cnblogs.com/Bryran/p/3950122.html ————— jq ui 拖動
二．引用庫：
版本：2.13.3
庫：//github.com/jsplumb/jsplumb
鏈接：//pan.baidu.com/s/1EvftCI5gXRvoL6pNRenSpQ
提取碼：z2t4
React vue : npm i jsplumb
注意：低版本需要引用jq 以及jq-ui，此版本不需要
三．在React使用方法：
-
在我的react項目中，分菜單欄和畫布，菜單欄是可拖動子菜單，將菜單拖到畫布上，在畫布上進行對子菜單項目的操作，大概是這樣：
-
在使用過程中，應為拖動事件，和畫圖事件都是要先有dom節點,所以，一定要有節點的時候再註冊相應的監聽事件：
a. React項目中要在 componentDidMount() 生命周期後開始操作，因為是單頁面應用，要保證當前頁面渲染完成後註冊jsplumb實例，離開後要銷毀實例所以
let idePageJsPlumstance=』』; //初始化 componentDidMount() { idePageJsPlumstance = jsPlumb.getInstance() //關鍵函數 註冊jsplumb實例 idePageJsPlumstance.setContainer ('flow-main')//設置面板 }, //離開 componentWillUnmount() { if (idePageJsPlumstance) { idePageJsPlumstance.clear() //清空 } },
b. 在左側子菜單渲染完後要註冊拖拽事件，這裡用的是jq ui 拖動 不熟悉的可以搜下jq ui 這裡這樣寫的：
//給span註冊拖動事件 $('#flow-btns').find('span').draggable({ helper: 'clone',//拖動樣式 zIndex: 11, scope: 'flowMainCanvas',//關鍵參數 })
Scope //關鍵參數，被拖動子菜單和拖動到面板要對應相同
c. 在面板中，要獲取位置生成新的dom 對新dom註冊事件, （此處以簡寫，具體方式根據實際項目來做）
//樣式 let endAllPointStyle={ endpoint: 'Dot', //端點的形狀 isSource: true, //是否可以拖動（作為連線起點） isTarget: true, //是否可以放置（連線終點） }
//畫圖 $('#flow-main').droppable ({ scope: 'flowMainCanvas', drop: function ( event, ui ) { let left = parseInt ( ui.offset.left) let top = parseInt ( ui.offset.top) let id = 『node12』 let dom = 「<span id=』+id+』 >』+ui.helper.context.dataset.text+』</span>」 $ (this).append (dom) dom.css ('left', left).css ('top', top) idePageJsPlumstance.addEndpoint ( id, { anchor:"LeftMiddle" }, endAllPointStyle) //註冊端點拖桶 idePageJsPlumstance.draggable ( id) //註冊節點拖動 $ ('#' + id).draggable ({ containment:"parent", }) } })
d. 同時要對線做一些事件，這裡有
//連接線的右鍵單擊事件 idePageJsPlumstance.bind ('contextmenu', function ( conn, e ) { e.preventDefault () e.stopPropagation () ///// .... }) //連接線的單擊事件 idePageJsPlumstance.bind ('mousedown', function ( conn, e ) { ///// .... }) //開始拖動新連接時 idePageJsPlumstance.bind ('beforeDrag', function ( info ) { ///// .... }) // 結束拖動新連接時 idePageJsPlumstance.bind ('beforeDrop', function ( info ) { ///// .... } // 連接事件 註冊線的參數 idePageJsPlumstance.bind ('connection', function ( info ) { ///// ... }) // 開始拖動現有連接 idePageJsPlumstance.bind('beforeStartDetach',function (conn) { ///// .... }) //頁面線的dom const connectors =idePageJsPlumstance.getAllConnections () //刪除點，線 節點 idePageJsPlumstance.detach(con) idePageJsPlumstance.remove(id) idePageJsPlumstance.removeAllEndpoints(id)
3. 儲存和 回顯 重新程式碼生成操作
a . 儲存的話，先將拖動的新增節點資訊保存,比如left 、id、 top 固定資訊保存
再將線保存 線有五個參數 通過遍歷idePageJsPlumstance.getAllConnections() //線數據獲取，保存線的id、 sourceId、targetId 還有點錨點的起止位置參數
b . 重新程式碼生成 還原節點後
idePageJsPlumstance.ready (function () { idePageJsPlumstance.connect ({ source: startKey, target:endKe, anchors: [sourcepoint, item.targetpoint ], endpoint: 'Dot', isSource: true, isTarget: true, }) })
再註冊相應的拖拽事件
四．總結：
- 程式碼回顯時候顯示連接線 用jsPlumb.connect()，
- 在項目中每個錨點是層級關係，層級疊加要處理好，
- 在拖拽事件中，生成點，再連線，注意好相關順序，順序不一樣，影響不一樣，
- 有些事件參數不起作用，需要程式碼控制。
- 自帶zoom 要和位置等相結合使用，避免冒泡
