jsplump新增节点删除连线等操作

前言

本文基础上一篇文章基础上，进行编写，如果看不懂，可以先看上一篇文章JsPlumb + D3js实现自定义节点，可拖拽节点,自动树状布局

新增节点

监听右键行为，在画布上点击右键，弹出添加节点

// 添加右键菜单事件处理函数
    document.addEventListener("contextmenu", function(event) {
      console.info(event);
      that.selectedId = 0;

      $(".flow-popover").css('left',event.x + 'px');
      $(".flow-popover").css('top',event.y + 'px');
      that.visible = true;
      event.preventDefault(); // 取消默认右键菜单显示行为
    }, false);

复制

添加节点代码

<!-- 添加节点 -->
    <el-popover
      placement="left"
      class="flow-popover"
      trigger="manual"
      v-model="visible">
      <div><el-button type="text" icon="el-icon-user-solid" @click="newNode">添加节点</el-button></div>
    </el-popover>

复制

添加节点按钮的点击事件

    newNode(e) {
      let that = this;
      let maxId = that.nodeList[this.nodeList.length - 1].id;
      let id = Number(maxId) + 1;
      var rect = document.getElementById("relation-box").getBoundingClientRect();
      that.nodeList.push({
        id: Number(maxId) + 1,
        left: e.x - rect.left + "px",
        name: 'new node',
        top: e.y - rect.top + "px"
      })
      
    },
复制

此时点击右键-添加节点按钮，就在画布上创建出一个叫new node的新节点。但节点无法拖动

拖拽事件

要让节点可以拖动，需要执行以下事件

that.$nextTick().then(() => {
        that.jsPlumbInstance.draggable("node-" + id);
        // 给每个节点添加锚点
        that.jsPlumbInstance.addEndpoint("node-" + id, {
          anchor: ['Bottom', 'Top', 'Left', 'Right'],
          Overlays: [
            ['Arrow', {width: 10, length: 8, location: 1, direction: 1, foldback: 0.623}]]
        }, that.commonLink)
      })
复制

删除连线

// 给连线添加右键点击事件
          let that = this;
          this.jsPlumbInstance.bind("dblclick",function(event) {
            that.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              that.jsPlumbInstance.deleteConnection(event);
              that.$message({
                type: 'success',
                message: '删除成功!'
              });
            }).catch(() => {
              that.$message({
                type: 'info',
                message: '已取消删除'
              });
            });
          })
复制