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 要和位置等相結合使用，避免冒泡