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(),在 每次更新视图都要使用。