JSPlumb 修改 lable 的值 和 jsPlumb 更新視圖

在vue 中 JSPlumb 修改 lable 的值

在連線的過程當中必須有source target 才能連接， 一個source 只能對應 一個 target ，而且只能是 HTML 的 id 因此數據結構是

{
    "nodes":[
        {
            "id":"8b058aab-e01c-4eb4-8deb-716481ec2335",
            "name":"BookAuthor",
            "type":"table",
            "x":791,
            "y":113,
            "columns":[
                {
                    "id":"book_id",
                    "datatype":"string",
                    "primaryKey":false,
                    "nodeId":"8b058aab-e01c-4eb4-8deb-716481ec2335.book_id"
                }
            ]
        },
        {
            "id":"97ff1fef-3b55-49fa-b8c7-52ba83df0c8b",
            "name":"Book",
            "type":"table",
            "x":288,
            "y":142,
            "columns":[
                {
                    "id":"id",
                    "datatype":"string",
                    "primaryKey":false,
                    "nodeId":"97ff1fef-3b55-49fa-b8c7-52ba83df0c8b.id"
                }
            ]
        }
    ],
    "edges":[
        {
            "source":"97ff1fef-3b55-49fa-b8c7-52ba83df0c8b.id",

            "target":"8b058aab-e01c-4eb4-8deb-716481ec2335.book_id",
            "data":{
                "type":"N:M"
            }
        }
    ]
}
複製代碼

methods: {
        jsPlumb.ready( () => {
            //把實例放在全局
            this.instance = jsPlumb.getInstance({
                // 能夠添加默認配置
                  ConnectionOverlays: [
                    ["Label", { label: "1", id: "label-1", cssClass: "aLabel", location:0.15,}],
                    ["Label", { label: "1", id: "label-2", cssClass: "aLabel", location:0.85, }]
                  ],
            })
        }
    }
複製代碼

一、默認修改：就是在後臺傳送數據以後直接修改

// 默認連線
    defaultConenction () {
      //若是數據爲空直接返回
      if (this.dataset.edges === 'undefined') {
        return
      }
      this.dataset.edges.forEach(item => {
      // 連線成功以後從新添加 closeId 的 個數
        let connection  = this.instance.connect({
          source: item.source,
          target: item.target,
          type: "basic",
          endpointStyle: { fill: '#f35958' },
          // 必須在這裏配置才能使用 getOverlay，在這裏我是踩了很大一個坑
          ConnectionOverlays: [
            ["Label", { label: "1", id: "label-1", cssClass: "aLabel", location:0.15,}],
            ["Label", { label: "1", id: "label-2", cssClass: "aLabel", location:0.85, }]
          ],
        });
        let type = item.data.type.split(':')
        if (connection) {
          connection.getOverlay("label-1").setLabel(`${type[0]}`);
          connection.getOverlay("label-2").setLabel(`${type[1]}`);
        }

      });
    },
複製代碼

一、連線修改： 就是 source 和 target 連接成功以後的修改, 在這裏偷了個懶，能夠用鏈接前的檢查，判斷是否創建鏈接

this.instance.bind("beforeDrop", (connInfo) => {})

this.instance.bind("connection", (connInfo) => {
        // 不能鏈接本身和類型不同不能鏈接， 也能夠用方法在連接以前判斷時候合法
        if (connInfo.connection.sourceId === connInfo.connection.targetId || connInfo.source.type !== connInfo.target.type) {
          // 刪除連線
          this.instance.detach(connInfo.connection);
        }else {
          this.connInfo = connInfo;
          this.connInfo.connection.getOverlay("label-1").setLabel(`${sourceLabel}`);
      this.connInfo.connection.getOverlay("label-2").setLabel(`${targetLabel}`);
        }
      });
複製代碼

最後補充一點，jsPlumb 是操做dom 的框架，所以 在修改 數據以後 jsPlumb 的視圖並不會發生變化，因此 記得使用 this.$nextTick(),在 每次更新視圖都要使用。