JsPlumb在react的使用方法及介紹

一．相關資料來源：

1.https://bitqiang.gitbooks.io/jsplumb/content/Chapter1_IMPORTS_AND_SETUP/           ———    一個翻譯一半就不能打開的文檔

2.https://github.com/wangduanduan/jsplumb-chinese-tutorial          ———    一個事件方法很全的網站（推薦）

3.https://wdd.js.org/jsplumb-chinese-tutorial/#/                                 ———    一個事件方法很全的網站（同上）

4.https://www.cnblogs.com/Bryran/p/3950122.html        —————    jq ui 拖動

二．引用庫：

版本：2.13.3

庫：https://github.com/jsplumb/jsplumb

鏈接：https://pan.baidu.com/s/1EvftCI5gXRvoL6pNRenSpQ 

提取碼：z2t4

React  vue :    npm   i   jsplumb

註意：低版本需要引用jq 以及jq-ui，此版本不需要

三．在React使用方法：

1. 在我的react項目中，分菜單欄和畫布，菜單欄是可拖動子菜單，將菜單拖到畫布上，在畫布上進行對子菜單項目的操作，大概是這樣：

   

2. 在使用過程中，應為拖動事件，和畫圖事件都是要先有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,
     })
})

 再註冊相應的拖拽事件

四．總結：

1. 代碼回顯時候顯示連接線 用jsPlumb.connect()，
2. 在項目中每個錨點是層級關係，層級疊加要處理好，
3. 在拖拽事件中，生成點，再連線，註意好相關順序，順序不一樣，影響不一樣，
4. 有些事件參數不起作用，需要代碼控制。
5. 自帶zoom 要和位置等相結合使用，避免冒泡