vue中使用Drawflow连线插件,并对端口进行命名_vue-drawflow

效果如图

场景:项目中需要拖拽模块并连线,有输入端和输出端之分,不同模块不同端口才能相连

文档相关

点击前往------->原项目git地址

点击前往------->提供端口既可输出又可输出方案

点击前往----->查阅发现原项目无法对端口命名

public文件夹下创建drawflow文件夹,将原项目的对应文件放在drawflow文件夹中,并且在public文件下的html中对对应的文件进行引用,这样对应的js就挂载在window上

<link rel="stylesheet" href="./Drawflow/dist/drawflow.min.css">

<link rel="stylesheet" href="./Drawflow/docs/beautiful.css">

<script src="./Drawflow/dist/drawflow.min.js"></script>

<template>
  <div>
    <div class="wrapper drawflow-box">
      <div class="col">
        <el-collapse accordion>
          <div v-for="(item,index) in listData" :key="index">
            <el-collapse-item :title="item.name">
              <el-row :gutter="12">
                <el-col :span="12" v-for="(data,key) in item.children" :key="key">
                  <div class="drawflow-drag" draggable="true" @dragstart="drag($event)" :data-node="data.type">
                    <i class="el-icon-platform-eleme"></i>
                    <span>{{data.name}}</span>
                  </div>
                </el-col>
              </el-row>
            </el-collapse-item>
          </div>
        </el-collapse>
 
      </div>
      <div class="col-right">
        <div class="menu">
          <ul>
            <li @click="changeModule($event);" class="selected">模块单元</li>
            <!-- <li @click="editor.changeModule('Home'); changeModule($event);" class="selected">模块单元</li> -->
            <!-- <li @click="editor.changeModule('Other'); changeModule($event);">Other Module</li> -->
          </ul>
        </div>
        <div id="drawflow" @drop="drop($event)" @dragover="allowDrop($event)">
 
          <div class="btn-export" @click="handleExport(editor.export())">导出</div>
          <div class="btn-clear" @click="editor.clearModuleSelected()">清除</div>
          <!-- <div class="btn-lock">
            <i id="lock" class="fas fa-lock" onclick="editor.editor_mode='fixed'; changeMode('lock');"></i>
            <i id="unlock" class="fas fa-lock-open" onclick="editor.editor_mode='edit'; changeMode('unlock');" style="display:none;"></i>
          </div> -->
          <div class="bar-zoom">
            <i class="icon-suoxiao" title="缩小" @click="editor.zoom_out()"></i>
            <i class="icon-fuwei" title="复位" @click="editor.zoom_reset()"></i>
            <i class="icon-fangda" title="放大" @click="editor.zoom_in()"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// Drawflow 连线插件
 
export default {
  data() {
    return {
      active: "",
      editor: null,
      mobile_item_selec: "",
      mobile_last_move: null,
      transform: "",
      listData: [
        {
          type: "in",
          name: "输入模块",
          children: [
            {
              name: "输入模块一",
              type: "test",
            },
            {
              name: "输入模块二",
              type: "test",
            },
            {
              name: "输入模块三",
              type: "test",
            },
          ],
        },
        {
          type: "out",
          name: "输出单元",
          children: [
            {
              name: "输出单元一",
              type: "dbclick",
            },
            {
              name: "输出单元二",
              type: "dbclick",
            },
            {
              name: "输出单元三",
              type: "dbclick",
            },
          ],
        },
      ],
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
      //挂载方法事件
      window.showpopup = this.showpopup;
      window.closemodal = this.closemodal;
    });
  },
  methods: {
    init() {
      var id = document.getElementById("drawflow");
      this.editor = new window.Drawflow(id);
      this.editor.reroute = true;
      this.editor.reroute_fix_curvature = true;
      this.editor.force_first_input = false;
 
      const dataToImport = {
        drawflow: {
          Home: {
            data: {},
          },
        },
      };
 
      this.editor.start();
      this.editor.import(dataToImport);
      this.editor.addNode(
        "test",
        3,
        3,
        180,
        200,
        "test",
        {
          name: "",
          inputs: {
            input_1: { connections: [], name: "t1" },
            input_2: { connections: [], name: "t2" },
            input_3: { connections: [], name: "t3" },
          },
          outputs: {
            output_1: { connections: [], name: "t4" },
            output_2: { connections: [], name: "t5" },
            output_3: { connections: [], name: "t6" },
          },
        },
        '<div><div class="content-box">Multiple!</div></div>'
      );
    },
    //下面的所有方法都是从原项目html中直接搬过来,有问题去原项目看
    showpopup(e) {
      e.target.closest(".drawflow-node").style.zIndex = "9999";
      e.target.children[0].style.display = "block";
      //document.getElementById("modalfix").style.display = "block";
 
      //e.target.children[0].style.transform = 'translate('+translate.x+'px, '+translate.y+'px)';
      this.transform = this.editor.precanvas.style.transform;
      this.editor.precanvas.style.transform = "";
      this.editor.precanvas.style.left = this.editor.canvas_x + "px";
      this.editor.precanvas.style.top = this.editor.canvas_y + "px";
 
      //e.target.children[0].style.top  =  -editor.canvas_y - editor.container.offsetTop +'px';
      //e.target.children[0].style.left  =  -editor.canvas_x  - editor.container.offsetLeft +'px';
      this.editor.editor_mode = "fixed";
    },
    closemodal(e) {
      e.target.closest(".drawflow-node").style.zIndex = "2";
      e.target.parentElement.parentElement.style.display = "none";
      //document.getElementById("modalfix").style.display = "none";
      this.editor.precanvas.style.transform = this.transform;
      this.editor.precanvas.style.left = "0px";
      this.editor.precanvas.style.top = "0px";
      this.editor.editor_mode = "edit";
    },
    allowDrop(ev) {
      ev.preventDefault();
    },
    drag(ev) {
      if (ev.type === "touchstart") {
        this.mobile_item_selec = ev.target
          .closest(".drag-drawflow")
          .getAttribute("data-node");
      } else {
        ev.dataTransfer.setData("node", ev.target.getAttribute("data-node"));
      }
    },
    drop(ev) {
      if (ev.type === "touchend") {
        var parentdrawflow = document
          .elementFromPoint(
            mobile_last_move.touches[0].clientX,
            mobile_last_move.touches[0].clientY
          )
          .closest("#drawflow");
        if (parentdrawflow != null) {
          this.addNodeToDrawFlow(
            mobile_item_selec,
            mobile_last_move.touches[0].clientX,
            mobile_last_move.touches[0].clientY
          );
        }
        mobile_item_selec = "";
      } else {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("node");
        this.addNodeToDrawFlow(data, ev.clientX, ev.clientY);
      }
    },
    addNodeToDrawFlow(name, pos_x, pos_y) {
      let editor = this.editor;
      if (editor.editor_mode === "fixed") {
        return false;
      }
      pos_x =
        pos_x *
          (editor.precanvas.clientWidth /
            (editor.precanvas.clientWidth * editor.zoom)) -
        editor.precanvas.getBoundingClientRect().x *
          (editor.precanvas.clientWidth /
            (editor.precanvas.clientWidth * editor.zoom));
      pos_y =
        pos_y *
          (editor.precanvas.clientHeight /
            (editor.precanvas.clientHeight * editor.zoom)) -
        editor.precanvas.getBoundingClientRect().y *
          (editor.precanvas.clientHeight /
            (editor.precanvas.clientHeight * editor.zoom));
 
      switch (name) {
        case "test":
          var test = `
            <div>
              <div class="box" ondblclick="showpopup(event)">
                双击可以打开!
                <div class="modal" style="display:none">
                  <div class="modal-content">
                    <span class="close" onclick="closemodal(event)">&times;</span>
                    插入文本
                    <input type="text">
                  </div>
                </div>
              </div>
            </div>
            `;
          editor.addNode(
            "test",
            3,
            3,
            pos_x,
            pos_y,
            "test",
            {
              name: "test",
              inputs: {
                input_1: { connections: [], name: "t1" },
                input_2: { connections: [], name: "t2" },
                input_3: { connections: [], name: "t3" },
              },
              outputs: {
                output_1: { connections: [], name: "t4" },
                output_2: { connections: [], name: "t5" },
                output_3: { connections: [], name: "t6" },
              },
            },
            test
          );
          break;
        case "multiple":
          var multiple = `
            <div>
              <div class="box">
                Multiple!
              </div>
            </div>
            `;
          editor.addNode(
            "multiple",
            3,
            4,
            pos_x,
            pos_y,
            "multiple",
            {},
            multiple
          );
          break;
        case "dbclick":
          var dbclick = `
            <div>
            <div class="title-box"><i class="fas fa-mouse"></i> Db Click</div>
              <div class="box dbclickbox" ondblclick="showpopup(event)">
                Db Click here
                <div class="modal" style="display:none">
                  <div class="modal-content">
                    <span class="close" onclick="closemodal(event)">&times;</span>
                    插入文本
                    <input type="text" df-name>
                  </div>
                </div>
              </div>
            </div>
            `;
          editor.addNode("dbclick", 3, 3, pos_x, pos_y, "dbclick", {}, dbclick);
          break;
 
        default:
      }
    },
    changeModule(event) {
      var all = document.querySelectorAll(".menu ul li");
      for (var i = 0; i < all.length; i++) {
        all[i].classList.remove("selected");
      }
      event.target.classList.add("selected");
    },
    handleExport(val) {
      console.log(val);
    },
  },
};
</script>
<style>
.drawflow .drawflow-node .input::before {
      //通过操作标签上的属性,动态获取对应的文字
      content: attr(data-before);
      position: absolute;
      width: 64px;
      text-align: right;
      top: 0;
      left: -72px;
      font-size: 12px;
      color: #67C23A;
    }
    .drawflow .drawflow-node .output::before {
      content: attr(data-before);
      position: absolute;
      text-align: left;
      width: 64px;
      top: 0;
      left: 20px;
      font-size: 12px;
      color: #F56C6C;
    }
</style>
<style lang="scss">
 
.drawflow-box {
  /** 样式调整 */
  .col {
    background: #fff;
    padding: 0 20px;
    box-sizing: border-box;
    .el-row {
      margin-top: 10px;
      .el-col {
        .drawflow-drag {
          width: 120px;
          height: 64px;
          border: 1px solid #ccc;
          margin: 0 auto;
          cursor: move;
          user-select: none;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
  .test .drawflow_content_node {
    height: 100%;
  }
 
  .content-box {
    padding: 20px;
  }
}
</style>

修改 Drawflow/dist 文件夹下的drawflow.min.js文件对应的addNode方法(拖拽组件时执行)

添加1,2两处代码后,

 如果自定义节点类型中带了name属性,对应的端口就会出现对应的名称,如果没有name就按原项目逻辑执行