vue項(xiàng)目中使用jsplum總結(jié)
先介紹一下背景，最近項(xiàng)目中有個(gè)需求(各節(jié)點(diǎn)與節(jié)點(diǎn)之間的連線(xiàn))，網(wǎng)上搜刮了一波關(guān)于連線(xiàn)的開(kāi)源庫(kù)，發(fā)現(xiàn)jsplumb的文章應(yīng)該是最多的，功能也比較豐富，最終就選擇了jsplumb來(lái)實(shí)現(xiàn)項(xiàng)目需求。
下面開(kāi)始我的vue+jsplumb踩坑之旅。
在線(xiàn)DOME預(yù)覽

image.png

一、安裝 jsplumb

1、vue 項(xiàng)目中安裝 jsPlumb 模塊

npm install jsplumb  --save

2、在main.js 中引入 jsPlumb（全局引入，也可以局部引入）

import jsPlumb from 'jsplumb'
Vue.prototype.$jsPlumb = jsPlumb.jsPlumb

二、使用jsplumb

nodeConnection.vue組件

// 初始化JSPlumb樣式
    initJSPlumb() {
      this.jsPlumb = this.$jsPlumb.getInstance({
        Container: "efContainer", //容器id
        //  Endpoint:['Image', {
        //    src: 'static/images/def_endpoint.png',
        //  }] , // 端點(diǎn)的形狀
        Anchor: [0.5, 1, 0, 1, 0, 50],
        Anchors: ["Right", "Left"], //連線(xiàn)的source和target 
        EndpointStyle: { radius: 6, fill: "#818FB4" }, //端點(diǎn)默認(rèn)樣式
        PaintStyle: { stroke: "#818FB4", strokeWidth: 1, fill: 'red' }, // 連線(xiàn)樣式
        HoverPaintStyle: { stroke: "#498FFF" }, // 默認(rèn)懸停樣式
        // EndpointHoverStyle: {src: 'static/images/endpoint.png', },
        EndpointHoverStyle: { fill: "#498FFF" }, // 端點(diǎn)懸停樣式
        ConnectionOverlays: [
          [
            "Arrow",
            {
              // 箭頭
              location: 1,
              visible: false,
              paintStyle: {
                stroke: "#ccc",
                fill: "#ccc"
              }
            }
          ]
        ],
        Connector: ["Straight", { gap: 5 }], //要使用的默認(rèn)連接器的類(lèi)型：折線(xiàn)，流程等
        DrapOptions: { cursor: "crosshair", zIndex: 2000 },
        Scope: "jsPlumb_DefaultScope"
      });
      
    // 連接斷開(kāi)時(shí)觸發(fā)
      this.jsPlumb.bind('connectionDetached', evt => {
      })

      // 連接建立時(shí)觸發(fā)
      this.jsPlumb.bind("connection", evt => {
      });

      // 改變線(xiàn)的連接節(jié)點(diǎn)
      this.jsPlumb.bind("connectionMoved", evt => {
      });

      // 當(dāng)鏈接建立前
      this.jsPlumb.bind("beforeDrop", evt => { 
      });
      // 連接斷開(kāi)前
      this.jsPlumb.bind("beforeDetach", evt => {
      });
    }

三、默認(rèn)的參數(shù)配置(此處只列了部分參數(shù)配置，更多配置請(qǐng)移步官方文檔)

{
  Anchor : "BottomCenter",//端點(diǎn)的定位點(diǎn)的位置聲明（錨點(diǎn)）：left，top，bottom等
  Anchors : [ null, null ],//多個(gè)錨點(diǎn)的位置聲明
  ConnectionsDetachable   : true,//連接是否可以使用鼠標(biāo)默認(rèn)分離
  ConnectionOverlays  : [],//附加到每個(gè)連接的默認(rèn)重疊
  Connector : "Bezier",//要使用的默認(rèn)連接器的類(lèi)型：折線(xiàn)，流程等
  Container : null,//設(shè)置父級(jí)的元素，一個(gè)容器
  DoNotThrowErrors  : false,//如果請(qǐng)求不存在的Anchor，Endpoint或Connector，是否會(huì)拋出
  DragOptions : { },//用于配置拖拽元素的參數(shù)
  DropOptions : { },//用于配置元素的drop行為的參數(shù)
  Endpoint : "Dot",//端點(diǎn)（錨點(diǎn)）的樣式聲明（Dot）
  Endpoints : [ null, null ],//多個(gè)端點(diǎn)的樣式聲明（Dot）
  EndpointOverlays : [ ],//端點(diǎn)的重疊
  EndpointStyle : { fill : "#456" },//端點(diǎn)的css樣式聲明
  EndpointStyles : [ null, null ],//同上
  EndpointHoverStyle : null,//鼠標(biāo)經(jīng)過(guò)樣式
  EndpointHoverStyles : [ null, null ],//同上
  HoverPaintStyle : null,//鼠標(biāo)經(jīng)過(guò)線(xiàn)的樣式
  LabelStyle : { color : "black" },／／標(biāo)簽的默認(rèn)樣式。
  LogEnabled : false,//是否打開(kāi)jsPlumb的內(nèi)部日志記錄
  Overlays : [ ],//重疊
  MaxConnections : 1,//最大連接數(shù)
  PaintStyle : { lineWidth : 8, stroke : "#456" },//連線(xiàn)樣式
  ReattachConnections : false,//是否重新連接使用鼠標(biāo)分離的線(xiàn)
  RenderMode : "svg",//默認(rèn)渲染模式
  Scope : "jsPlumb_DefaultScope"http://范圍，標(biāo)識(shí)
}

四、jsPlumb的相關(guān)方法

• 添加連線(xiàn)

// 此處參數(shù)sourceId，targetId一般是從后臺(tái)獲取后再添加連線(xiàn)
const params={source: item.sourceId, target: item.targetId};
// 為自定義的jsPlumb設(shè)置，也可以不傳入
const  connectOptions = {
   isSource: true,
   isTarget: true,
   // 動(dòng)態(tài)錨點(diǎn)、提供了4個(gè)方向 Continuous、AutoDefault
   anchor: 'Continuous',
   // 設(shè)置連線(xiàn)上面的label樣式
   labelStyle: {
     cssClass: 'flowLabel'
   },
  connectorStyle: {
     stroke: '#30BF78'
   },
}
this.jsPlumb.connect(params, connectOptions);

• 刪除連線(xiàn)

//  這個(gè)方法刪除指定的節(jié)點(diǎn)和連線(xiàn)，傳入的node為節(jié)點(diǎn)元素
this.jsPlumb.removeAllEndpoints(node)
// 這個(gè)方法刪除所有連線(xiàn)，不需要傳入?yún)?shù) 
this.jsPlumb.deleteEveryConnection();
// 這個(gè)方法刪除所有節(jié)點(diǎn)，不需要傳入?yún)?shù)
this.jsPlumb.deleteEveryEndpoint();
// 刪除制定的連線(xiàn)，傳入節(jié)點(diǎn)ID
this.jsPlumb.deleteConnectionsForElement('t001',{});

• 重繪連線(xiàn)

// 重繪連線(xiàn)
this.jsPlumb.repaintEverything()
// 這里第二個(gè)參數(shù)的true，會(huì)使整個(gè)jsPlumb立即重繪。
this.jsPlumb.setSuspendDrawing(false,true);

最后附上一個(gè)在線(xiàn)DOME預(yù)覽
https://qinghub.net/jsplumb