Antv x6拖拽支持svg-----vue super flower拖拽支持图片

WXY的头不秃

于 2024-07-16 21:21:30 发布

阅读量343

点赞数 4

分类专栏：拖拽 antv vuesuperflow 文章标签： vue.js 前端 javascript html5 chrome

本文链接：https://blog.csdn.net/WXY18504986602/article/details/140476145

版权

拖拽同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

antv

1 篇文章 0 订阅

订阅专栏

vuesuperflow

1 篇文章 0 订阅

订阅专栏

所有的代码均支持离线开发/并且适配谷歌80以上版本/支持win7-win11/node需求12.22.12 npm需求6.14.16

package.json

{
  "name": "x6_learning",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@antv/x6": "^1.32.6",
    "core-js": "^3.8.3",
    "echarts": "^5.5.1",
    "element-ui": "^2.15.13",
    "vue": "^2.6.14",
    "vue-router": "^3.5.1",
    "vue-super-flow": "^1.3.8",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/eslint-config-standard": "^6.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^5.1.0",
    "eslint-plugin-vue": "^8.0.3",
    "less": "^4.2.0",
    "less-loader": "^7.3.0",
    "svg-sprite-loader": "^6.0.11",
    "svgo": "^1.2.0",
    "vue-template-compiler": "^2.6.14"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "@vue/standard"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

AntvX6

介绍框架

这个是阿里巴巴旗下的产品

1.更新即使 (目前迭代的不错)

2.api相对完备(拿来直接可以用不用过多写原生获取)

3.目前不支持png 还有各种图片格式 (比较遗憾,因为它最后是集成在svg里不是Canvas)

4.入手难度低,但是上线较高

官方文档--https://x6.antv.antgroup.com/

antv代码

home页面

<template>
  <div class="home">
    <!-- 左侧模块菜单 -->
    <div class="menu-bar">
      <el-button @click="SaveData">保存模块</el-button>
      <h2>模块列表</h2>
      <!-- 模块列表 -->
      <div class="menu-list">
        <!-- <svg-icon icon-class="add" /> -->
        <div v-for="item in moduleList" :key="item.id" draggable="true" @dragend="handleDragEnd($event, item)">
          <p>{{ item.name }}</p>
        </div>
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="用户管理" name="first"></el-tab-pane>
        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
      </el-tabs>
    </div>
    <!-- 画布部分 -->
    <div class="canvas-card">
      <div id="container" @dragover="dragoverDiv"></div>
    </div>
  </div>
</template>

<script>
import { Graph, Cell, Color } from "@antv/x6"
import Tools from "@/assets/js/graphTools.js"
// var e = window.document.getElementById("left_top");
export default {
  data () {
    return {
      moduleList: [
        {
          id: 1,
          name: "开始模块", // 模块的名字
          type: "initial", // 初始模块(用于区分样式)
        },
        {
          id: 2,
          name: "结束模块",
          type: "initial",
        },
        {
          id: 3,
          name: "逻辑模块1",
          type: "logic", // 逻辑模块(用于区分样式)
        },
        {
          id: 4,
          name: "逻辑模块2",
          type: "logic",
        },
      ], // 列表可拖动模块
      graph: null, // 画布实例对象
      curSelectNode: null, // 当前选中的节点
      id: null, // 判断所需id
      activeName: "first", // element-tab 初始化显示
    }
  },
  watch: {
    // "e": {
    //   handler(newVal, oldVal) {
    //     console.log(newVal, oldVal);
    //   },
    //   deep: true,
    //   immediate: true,
    // },
  },
  mounted () {
    this.initGraph()
    // this.imgClick();
  },
  methods: {
    // 四角点击事件
    // imgClick() {
    //   // addEventListener("click", (event) => {});
    //   // onclick = (event) => {};
    //   console.log(btn);
    //   btn.οnclick = function () {
    //     console.log(1);
    //   };
    // },
    // tab切换事件
    handleClick (tab, event) {
      console.log(tab, event)
    },
    // 初始化流程图画布
    initGraph () {
      const container = document.getElementById("container")
      this.graph = new Graph({
        container: container, // 画布容器
        width: container.offsetWidth, // 画布宽
        height: container.offsetHeight, // 画布高
        background: true, // 背景（透明）
        snapline: true, // 对齐线
        // 配置连线规则
        connecting: {
          snap: true, // 自动吸附
          allowBlank: false, // 是否允许连接到画布空白位置的点
          allowMulti: true, // 是否允许在相同的起始节点和终止之间创建多条边
          allowLoop: false, // 是否允许创建循环连线，即边的起始节点和终止节点为同一节点
          highlight: true, // 拖动边时，是否高亮显示所有可用的节点
          validateEdge ({ edge, type, previous }) {
            // 连线时设置折线
            edge.setRouter({
              name: "er",
            })
            // 设置连线样式
            edge.setAttrs({
              line: {
                stroke: "#275da3",
                strokeWidth: 2,
              },
            })
            return true
          },
        },
        panning: {
          enabled: false, // 是否支持画布平移
        },
        mousewheel: {
          enabled: false, // 支持滚动放大缩小
        },
        resizing: {
          enabled: false, // 节点缩放大小
          preserveAspectRatio: true, // 节点是否按比例缩放
        },
        grid: {
          type: "mesh",
          size: 10, // 网格大小 10px
          visible: true, // 渲染网格背景
          args: {
            color: "#eeeeee", // 网格线/点颜色
            thickness: 2, // 网格线宽度/网格点大小
          },
        },
      })
      this.nodeAddEvent()
    },
    // 生成节点函数
    addHandleNode (x, y, id, name, type) {
      // 此处判断 生成图形类型
      // 这里是使用了  Tools 我写的工具类  请import查找
      type === "initial"
        ? this.graph.addNode(Tools.initInitialNode(x, y, id, name, type))
        : this.graph.addNode(Tools.initLogicNode(x, y, id, name, type))
    },
    nodeAddEvent () {
      const imgBtn = document.getElementsByClassName("custom_node_img")
      // 自定义连接桩点击事件
      this.graph.on("node:customevent", ({ e, node }) => {
        // handle
        console.log(e, "e")
        // console.log(x, "x");
        // console.log(y, "y");
        console.log(node, "node")
        // console.log(view, "view");
        // console.log(evt, "evt");
      })
      // 节点绑定点击事件
      this.graph.on("node:click", ({ e, x, y, node, view }) => {
        const markup = [
          {
            tagName: "circle",
            selector: "button",
            attrs: {
              shape: "custom-rect",
              label: "My Custom Rect", // label 继承于基类的自定义选项
              r: 14, // 按钮的半径
              stroke: "rgba(47, 128, 235, 0.5)",
              strokeWidth: 2,
              fill: "#ffffff",
              // fill: "transparent",
              cursor: "pointer",
            },
          },
          {
            tagName: "text",
            selector: "test",
            textContent: "btn", // 按钮显示的内容
            attrs: {
              fill: "rgba(47, 128, 235, 0.5)",
              fontSize: 10,
              textAnchor: "middle",
              // pointerEvents: "none",
              y: "0.3em",
            },
          },
        ]
        // 判断是否有选中过节点
        // console.log(e, x, y, node, view);
        if (this.curSelectNode) {
          console.log("取消选中")
          // imgBtn[0].style.display = "none";
          this.curSelectNode.removeTools() // 删除选中状态
          // 判断两次选中节点是否相同
          if (this.curSelectNode !== node) {
            node.addTools([
              {
                name: "boundary",
                args: {
                  attrs: {
                    fill: "#16B8AA",
                    stroke: "#2F80EB",
                    strokeWidth: 50,
                    fillOpacity: 0.1,
                  },
                },
              },
              {
                name: "button-remove",
                args: {
                  x: "100%",
                  y: "-25%",
                  offset: {
                    x: 0,
                    y: 0,
                  },
                },
              },
            ])
            this.curSelectNode = node
          } else {
            this.curSelectNode = null
          }
        } else {
          console.log("选中")
          // imgBtn[0].style.display = "block";
          // this.id = node.id;
          this.curSelectNode = node
          // console.log(imgBtn[0].style.display, "imgBtn");
          // imgBtn[0].style.display = "block";
          node.addTools([
            {
              name: "boundary",
              args: {
                attrs: {
                  fill: "#16B8AA",
                  stroke: "#2F80EB",
                  strokeWidth: 1,
                  fillOpacity: 0.1,
                },
              },
            },
            {
              name: "button-remove",
              args: {
                x: "100%",
                y: "-10%",
                offset: {
                  x: 5,
                  y: 0,
                },
                // onClick() {
                //   console.log(11111);
                // },
              },
            },
            {
              // 点击按钮的配置
              name: "button",
              args: {
                markup,
                x: "100%", // 按钮定位的x位置
                y: "100%", // 按钮定位的y位置
                offset: { x: 25, y: 25 }, // 按钮定位偏移量
                // onclickx6本身方法来实现颜色转换 逻辑运算
                // onClick({ cell }: { cell: Cell }) {
                //   const fill = Color.randomHex();
                //   cell.attr({
                //     body: {
                //       fill,
                //     },
                //     label: {
                //       fill: Color.invert(fill, true),
                //     },
                //   });
                // },
                onClick () {
                  console.log(1)
                },
              },
            },
            ,
            {
              // 点击按钮的配置
              name: "button",
              args: {
                markup,
                x: "0%", // 按钮定位的x位置
                y: "0%", // 按钮定位的y位置
                offset: { x: -25, y: -25 }, // 按钮定位偏移量
                onClick () {
                  console.log(2)
                },
              },
            },
            {
              // 点击按钮的配置
              name: "button",
              args: {
                markup,
                x: "100%", // 按钮定位的x位置
                y: "0%", // 按钮定位的y位置
                offset: { x: 25, y: -25 }, // 按钮定位偏移量
                onClick () {
                  console.log(3)
                },
              },
            },
            {
              // 点击按钮的配置
              name: "button",
              args: {
                markup,
                x: "0%", // 按钮定位的x位置
                y: "100%", // 按钮定位的y位置
                offset: { x: -25, y: 25 }, // 按钮定位偏移量
                onClick () {
                  console.log(4)
                },
              },
            },
          ])
        }
      })
      this.graph.on("node:mouseenter", ({ node }) => {
        console.log("进入节点")
        this.curSelectNode = node
      })
      this.graph.on("node:mouseleave", ({ node }) => {
        console.log("离开节点")
        this.curSelectNode = null
      })
      // 连线绑定悬浮事件
      this.graph.on("cell:mouseenter", ({ cell }) => {
        if (cell.shape == "edge") {
          cell.addTools([
            {
              name: "button-remove",
              args: {
                x: "100%",
                y: 0,
                offset: {
                  x: 0,
                  y: 0,
                },
              },
            },
          ])
          cell.setAttrs({
            line: {
              stroke: "#409EFF",
            },
          })
          cell.zIndex = 99
        }
      })
      this.graph.on("cell:mouseleave", ({ cell }) => {
        if (cell.shape === "edge") {
          cell.removeTools()
          cell.setAttrs({
            line: {
              stroke: "#275da3",
            },
          })
          cell.zIndex = 1
        }
      })
    },
    // 拖动后松开鼠标触发事件
    handleDragEnd (e, item) {
      // console.log(e, "e");
      // console.log(item, "item");
      // console.log();
      // 自定义  按钮
      // var btn = document.getElementsByClassName("right_top1");
      // var btn2 = document.getElementsByClassName("right_top2");
      // var btn3 = document.getElementsByClassName("right_top3");
      // var btn4 = document.getElementsByClassName("right_top4");
      // console.log(btn);
      // btn.οnclick = function () {
      //   console.log(btn);
      // };
      this.addHandleNode(
        e.pageX - 240,
        e.pageY - 40,
        new Date().getTime(),
        item.name,
        item.type
      )
    },
    // 拖动节点到画布中鼠标样式变为可拖动状态
    dragoverDiv (ev) {
      ev.preventDefault()
    },
    // 保存数据 toJSON 的数据格式 大致为 cell{{},{}}
    SaveData () {
      // this.graph.toJSON();
      console.log(this.graph.toJSON(), "========")
    },
  },
}
</script>
<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 20px;
  box-sizing: border-box;
  background: #eaeaea;

  >div {
    background: #ffffff;
    border-radius: 5px;
  }

  // 模块列表部分
  .menu-bar {
    width: 300px;
    height: 100%;
    margin-right: 20px;
    display: flex;
    flex-direction: column;

    h2 {
      width: 100%;
      font-size: 20px;
      padding: 10px;
      box-sizing: border-box;
      margin: 0;
    }

    .menu-list {
      height: 0;
      flex: 1;
      overflow: auto;
      padding: 0 10px;
      box-sizing: border-box;

      >div {
        border: 2px dashed #eaeaea;
        margin-bottom: 10px;
        border-radius: 5px;
        padding: 0 10px;
        box-sizing: border-box;
        cursor: pointer;
      }
    }
  }

  // 画布部分
  .canvas-card {
    width: 0;
    flex: 1;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;

    >div {
      width: 100%;
      height: 100%;
      border: 2px dashed #eaeaea;
    }
  }
}
</style>
<style lang="less">
// 其中节点样式加到没有scoped包裹的style标签中，否则样式不生效
.custom_node_img {

  // display: none;
  >div {
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 28px;
    cursor: pointer;
    background-color: rgba(47, 128, 235);
    // display: none;
  }

  .left_top {
    left: -45px;
    top: -45px;
  }

  .right_top {
    left: 157px;
    top: -45px;
  }

  .left_bottom {
    left: -45px;
    top: 67px;
  }

  .right_bottom {
    left: 157px;
    top: 67px;
  }
}

// 初始节点样式
.custom_node_initial {
  width: 100%;
  height: 100%;
  display: flex;
  border-radius: 3px;
  background: rgba(22, 184, 169, 0.6);
  flex-direction: column;
  overflow: hidden;

  >div {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    box-sizing: border-box;
    border: 5px solid rgba(47, 128, 235, 0.6);

    i {
      line-height: 22px;
      font-size: 18px;
      color: #ffffff;
      display: flex;
      align-items: center;
      margin-right: 5px;
      justify-content: center;
      font-style: normal;
    }

    p {
      color: #ffffff;
      font-size: 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

// 逻辑节点样式
.custom_node_logic {
  width: 100%;
  height: 100%;
  display: flex;
  background: rgba(47, 128, 235, 0.5);
  flex-direction: column;
  overflow: hidden;
  border-radius: 5px;

  >div {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    box-sizing: border-box;
    border: 5px solid rgba(22, 184, 169, 0.5);
    border-radius: 5px;
    line-height: 22px;

    i {
      line-height: 22px;
      font-size: 18px;
      color: #b5cde9;
      margin-right: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-style: normal;
    }

    p {
      color: #ffffff;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>

graphTools.js

import { right } from "@antv/x6/lib/registry/port-layout/line"

/* 
antv x6图谱相关工具函数
*/
export default {
  /* 
  初始化初始节点(开始,结束节点)
  x:x轴坐标
  y:y轴坐标
  id:开始节点id
  name:节点内容，默认为空
  type:节点类型，默认为空
  */
  initInitialNode (x, y, id, name, type) {
    //将公共样式提前
    let attrs = {
      circle: {
        //circle此处为圆形
        r: 6, //圆形独有  圆角半径
        magnet: true, //是否吸附
        stroke: "#31d0c6", //连接桩边框颜色
        strokeWidth: 1, //连接桩边框粗细
        fill: "rgba(47, 128, 235)", //连接桩边框颜色,
        event: "port:click", // 添加自定义属性 event 来监听链接桩的点击事件
      },
    }
    let markup = [
      {
        tagName: "circle",
        selector: "button",
        attrs: {
          r: 14, //按钮的半径
          stroke: "#fe854f",
          strokeWidth: 2,
          fill: "white",
          cursor: "pointer",
        },
      },
      {
        tagName: "text",
        textContent: "1111", //按钮显示的内容
        selector: "icon",
        attrs: {
          fill: "#fe854f",
          fontSize: 10,
          textAnchor: "middle",
          pointerEvents: "none",
          y: "0.3em",
        },
      },
    ]
    let node = {
      shape: "html",
      type: type,
      id: id, // String，可选，节点的唯一标识
      x: x, // Number，必选，节点位置的 x 值
      y: y, // Number，必选，节点位置的 y 值
      width: 140, // Number，可选，节点大小的 width 值
      height: 50, // Number，可选，节点大小的 height 值
      // label: " 这里使用了html 作为插入式写法  但是label的层级依旧高于html写法",
      ports: {
        groups: {
          top: {
            position: "top",
            attrs,
            label: {
              // position: "top", // 标签位置
            },
          },
          bottom: {
            position: "bottom",
            attrs,
            label: {
              // position: "top", // 标签位置
            },
          },
          left: {
            position: "left",
            attrs,
            label: {
              // position: "top", // 标签位置
            },
          },
          right: {
            position: "right",
            attrs,
            label: {
              // position: "top", // 标签位置
            },
          },
          absolute: {
            position: "absolute",
            attrs,
            label: {
              position: "top", // 标签位置
            },
          },
        },
        items: [
          {
            portId: "port1",
            group: "top", // 指定分组名称
          },
          {
            portId: "port2",
            group: "bottom", // 指定分组名称
          },
          {
            portId: "port3",
            group: "left", // 指定分组名称
          },
          {
            portId: "port4",
            group: "right", // 指定分组名称
          },
          {
            portId: "port5",
            group: "absolute", // 指定分组名称
          },
          {
            portId: "port6",
            group: "absolute", // 指定分组名称
            args: {
              x: "100%", //string | number		0	链接桩在 X 轴相对位置。
              y: 0, //string | number		0	链接桩在 X 轴相对位置。
              // angle: 45, //链接桩旋转角度
            },
          },
          {
            portId: "port7",
            group: "absolute", // 指定分组名称
            args: {
              x: 0,
              y: "100%",
              // angle: 45, //链接桩旋转角度
            },
          },
          {
            portId: "port8",
            group: "absolute", // 指定分组名称
            args: {
              x: "100%",
              y: "100%",
              // angle: 45, //链接桩旋转角度
            },
          },
        ],
      },
      // <div class="custom_node_img" style="display='none'">
      //   <div class="left_top">
      //   <a class="right_top1"></a>
      //   </div>
      //   <div class="right_top">
      //   <a class="right_top2"></a>
      //   </div>
      //   <div class="left_bottom">
      //   <a class="right_top3"></a>
      //   </div>
      //   <div class="right_bottom">
      //   <a class="right_top4"></a>
      //   </div>
      html:
        `
          <div class="custom_node_initial">
            <div>
              <svg width="120" height="60" aria-hidden="true">
                <use xlink:href="#icon-add"></use>
              </svg>
            </div>
          </div>
            `,

      attrs: {
        // 这里给生成的节点的body加上透明的边框,一定要给边框宽度加上>0的值,否则节点将不能连线
        body: {
          stroke: "transparent", //背景色
          strokeWidth: 10, // 边框的粗细
          magnet: true, // 节点是否可以连线
        },
      },
      // tools: [
      //   {
      //     //点击按钮的配置
      //     name: "button",
      //     args: {
      //       markup,
      //       x: "100%", //按钮定位的x位置
      //       y: "100%", //按钮定位的y位置
      //       offset: { x: 20, y: 20 }, //按钮定位偏移量
      //       // onClick({ cell }: { cell: Cell }) {
      //       //   const fill = Color.randomHex();
      //       //   cell.attr({
      //       //     body: {
      //       //       fill,
      //       //     },
      //       //     label: {
      //       //       fill: Color.invert(fill, true),
      //       //     },
      //       //   });
      //       // },
      //     },
      //   },
      //   {
      //     //点击按钮的配置
      //     name: "button",
      //     args: {
      //       markup,
      //       x: "0%", //按钮定位的x位置
      //       y: "0%", //按钮定位的y位置
      //       offset: { x: -20, y: -20 }, //按钮定位偏移量
      //       // onClick({ cell }: { cell: Cell }) {
      //       //   const fill = Color.randomHex();
      //       //   cell.attr({
      //       //     body: {
      //       //       fill,
      //       //     },
      //       //     label: {
      //       //       fill: Color.invert(fill, true),
      //       //     },
      //       //   });
      //       // },
      //     },
      //   },
      //   {
      //     //点击按钮的配置
      //     name: "button",
      //     args: {
      //       markup,
      //       x: "100%", //按钮定位的x位置
      //       y: "0%", //按钮定位的y位置
      //       offset: { x: 20, y: -20 }, //按钮定位偏移量
      //       // onClick({ cell }: { cell: Cell }) {
      //       //   const fill = Color.randomHex();
      //       //   cell.attr({
      //       //     body: {
      //       //       fill,
      //       //     },
      //       //     label: {
      //       //       fill: Color.invert(fill, true),
      //       //     },
      //       //   });
      //       // },
      //     },
      //   },
      //   {
      //     //点击按钮的配置
      //     name: "button",
      //     args: {
      //       markup,
      //       x: "0%", //按钮定位的x位置
      //       y: "100%", //按钮定位的y位置
      //       offset: { x: -20, y: 20 }, //按钮定位偏移量
      //       // onClick({ cell }: { cell: Cell }) {
      //       //   const fill = Color.randomHex();
      //       //   cell.attr({
      //       //     body: {
      //       //       fill,
      //       //     },
      //       //     label: {
      //       //       fill: Color.invert(fill, true),
      //       //     },
      //       //   });
      //       // },
      //     },
      //   },
      // ],
    }
    return node
  },

  /* 
  初始化逻辑节点
  x:x轴坐标
  y:y轴坐标
  id:开始节点id
  name:节点内容，默认为空
  type:节点类型，默认为空
  */
  initLogicNode (x, y, id, name, type) {
    let node = {
      shape: "html",
      type: type, // 动作所属类型
      id: id, // String，可选，节点的唯一标识
      x: x, // Number，必选，节点位置的 x 值
      y: y, // Number，必选，节点位置的 y 值
      width: 100, // Number，可选，节点大小的 width 值
      height: 30, // Number，可选，节点大小的 height 值
      html: `
              <div class="custom_node_logic">
                <div>
                  <i>💠</i>
                  <p title=${name}>${name || ""}</p>
                </div>
              </div>
            `,
      attrs: {
        body: {
          stroke: "transparent",
          strokeWidth: 10,
          magnet: true,
        },
      },
    }
    return node
  },

  initImgNode (x, y, id, name, type) {
    //将公共样式提前
    let attrs = {
      circle: {
        //circle此处为圆形
        r: 6, //圆形独有  圆角半径
        magnet: true, //是否吸附
        stroke: "#31d0c6", //连接桩边框颜色
        strokeWidth: 1, //连接桩边框粗细
        fill: "rgba(47, 128, 235)", //连接桩边框颜色,
        event: "port:click", // 添加自定义属性 event 来监听链接桩的点击事件
      },
    }
    let markup = [
      {
        tagName: "circle",
        selector: "button",
        attrs: {
          r: 14, //按钮的半径
          stroke: "#fe854f",
          strokeWidth: 2,
          fill: "white",
          cursor: "pointer",
        },
      },
      {
        tagName: "text",
        textContent: "1111", //按钮显示的内容
        selector: "icon",
        attrs: {
          fill: "#fe854f",
          fontSize: 10,
          textAnchor: "middle",
          pointerEvents: "none",
          y: "0.3em",
        },
      },
    ]
    let node = {
      shape: "html",
      type: type,
      id: id, // String，可选，节点的唯一标识
      x: x, // Number，必选，节点位置的 x 值
      y: y, // Number，必选，节点位置的 y 值
      width: 140, // Number，可选，节点大小的 width 值
      height: 50, // Number，可选，节点大小的 height 值
      // label: " 这里使用了html 作为插入式写法  但是label的层级依旧高于html写法",
      ports: {
        groups: {
          top: {
            position: "top",
            attrs,
            label: {
              // position: "top", // 标签位置
            },
          },
          bottom: {
            position: "bottom",
            attrs,
            label: {
              // position: "top", // 标签位置
            },
          },
          left: {
            position: "left",
            attrs,
            label: {
              // position: "top", // 标签位置
            },
          },
          right: {
            position: "right",
            attrs,
            label: {
              // position: "top", // 标签位置
            },
          },
          absolute: {
            position: "absolute",
            attrs,
            label: {
              position: "top", // 标签位置
            },
          },
        },
        items: [
          {
            portId: "port1",
            group: "top", // 指定分组名称
          },
          {
            portId: "port2",
            group: "bottom", // 指定分组名称
          },
          {
            portId: "port3",
            group: "left", // 指定分组名称
          },
          {
            portId: "port4",
            group: "right", // 指定分组名称
          },
          {
            portId: "port5",
            group: "absolute", // 指定分组名称
          },
          {
            portId: "port6",
            group: "absolute", // 指定分组名称
            args: {
              x: "100%", //string | number		0	链接桩在 X 轴相对位置。
              y: 0, //string | number		0	链接桩在 X 轴相对位置。
              // angle: 45, //链接桩旋转角度
            },
          },
          {
            portId: "port7",
            group: "absolute", // 指定分组名称
            args: {
              x: 0,
              y: "100%",
              // angle: 45, //链接桩旋转角度
            },
          },
          {
            portId: "port8",
            group: "absolute", // 指定分组名称
            args: {
              x: "100%",
              y: "100%",
              // angle: 45, //链接桩旋转角度
            },
          },
        ],
      },
      // <div class="custom_node_img" style="display='none'">
      //   <div class="left_top">
      //   <a class="right_top1"></a>
      //   </div>
      //   <div class="right_top">
      //   <a class="right_top2"></a>
      //   </div>
      //   <div class="left_bottom">
      //   <a class="right_top3"></a>
      //   </div>
      //   <div class="right_bottom">
      //   <a class="right_top4"></a>
      //   </div>
      html: `
            </div>
            <div class="custom_node_initial">
              <div>
              <svg>
               <g data-shape="image">
                <image 'xlink:href': 'https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg' }
                </image>
                </g>
                </svg>
              </div>
            </div>
            `,
      attrs: {
        // 这里给生成的节点的body加上透明的边框,一定要给边框宽度加上>0的值,否则节点将不能连线
        body: {
          stroke: "transparent", //背景色
          strokeWidth: 10, // 边框的粗细
          magnet: true, // 节点是否可以连线
        },
      },
      // tools: [
      //   {
      //     //点击按钮的配置
      //     name: "button",
      //     args: {
      //       markup,
      //       x: "100%", //按钮定位的x位置
      //       y: "100%", //按钮定位的y位置
      //       offset: { x: 20, y: 20 }, //按钮定位偏移量
      //       // onClick({ cell }: { cell: Cell }) {
      //       //   const fill = Color.randomHex();
      //       //   cell.attr({
      //       //     body: {
      //       //       fill,
      //       //     },
      //       //     label: {
      //       //       fill: Color.invert(fill, true),
      //       //     },
      //       //   });
      //       // },
      //     },
      //   },
      //   {
      //     //点击按钮的配置
      //     name: "button",
      //     args: {
      //       markup,
      //       x: "0%", //按钮定位的x位置
      //       y: "0%", //按钮定位的y位置
      //       offset: { x: -20, y: -20 }, //按钮定位偏移量
      //       // onClick({ cell }: { cell: Cell }) {
      //       //   const fill = Color.randomHex();
      //       //   cell.attr({
      //       //     body: {
      //       //       fill,
      //       //     },
      //       //     label: {
      //       //       fill: Color.invert(fill, true),
      //       //     },
      //       //   });
      //       // },
      //     },
      //   },
      //   {
      //     //点击按钮的配置
      //     name: "button",
      //     args: {
      //       markup,
      //       x: "100%", //按钮定位的x位置
      //       y: "0%", //按钮定位的y位置
      //       offset: { x: 20, y: -20 }, //按钮定位偏移量
      //       // onClick({ cell }: { cell: Cell }) {
      //       //   const fill = Color.randomHex();
      //       //   cell.attr({
      //       //     body: {
      //       //       fill,
      //       //     },
      //       //     label: {
      //       //       fill: Color.invert(fill, true),
      //       //     },
      //       //   });
      //       // },
      //     },
      //   },
      //   {
      //     //点击按钮的配置
      //     name: "button",
      //     args: {
      //       markup,
      //       x: "0%", //按钮定位的x位置
      //       y: "100%", //按钮定位的y位置
      //       offset: { x: -20, y: 20 }, //按钮定位偏移量
      //       // onClick({ cell }: { cell: Cell }) {
      //       //   const fill = Color.randomHex();
      //       //   cell.attr({
      //       //     body: {
      //       //       fill,
      //       //     },
      //       //     label: {
      //       //       fill: Color.invert(fill, true),
      //       //     },
      //       //   });
      //       // },
      //     },
      //   },
      // ],
    }
    return node
  },
}

这俩代码是antv的运行代码了如果你需要svg 请继续下面的步骤如果您不需要请再js页面将html中的标签替换掉即可

vue本身来说是不能自己解析svg的尤其是你使用变量引入如果你是直接使用svg的path 和 p代码但我们不能这么使用所以我们需要svg 代码

svg相关

package.json

  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/eslint-config-standard": "^6.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^5.1.0",
    "eslint-plugin-vue": "^8.0.3",
    "less": "^4.2.0",
    "less-loader": "^7.3.0",
    "svg-sprite-loader": "^6.0.11", //这里
    "svgo": "^1.2.0",//这里
    "vue-template-compiler": "^2.6.14"
  },

vue.config.js

const path = require('path')

function resolve (dir) {
  return path.join(__dirname, dir)
}
const baseUrl = '/'
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '../' : '/',
  productionSourceMap: false,
  // chainWebpack: (config) => {
  // config.resolve.alias
  //   .set('@', resolve('/src'))
  //   .set('components', resolve('/src/components'))
  // },
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('/src'))
      .set('components', resolve('/src/components'))
    // const svgRule = config.module.rule('svg')
    // svgRule.uses.clear()
    // svgRule.exclude.add(/node_modules/)
    // svgRule
    //   .test(/\.svg$/)
    //   .use('svg-sprite-loader')
    //   .loader('svg-sprite-loader')
    //   .options({
    //     symbolId: 'icon-[name]',
    //   })

    // 修改images loader 添加svg处理
    // const imagesRule = config.module.rule('images')
    // imagesRule.exclude.add(resolve('src/assets/icons'))
    // config.module
    //   .rule('images')
    //   .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)

    config.plugins.delete('prefetch')

    // set svg-sprite-loader
    config.module
      .rule('svg')
      .exclude.add(resolve('src/assets/icons/svg'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/assets/icons/svg'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]',
      })
      .end()

  },
  lintOnSave: false, // 关闭eslint规范
}

main.js

import Vue from "vue"
import App from "./App.vue"
import router from "./router"
import store from "./store"
import ElementUI from "element-ui"
import "element-ui/lib/theme-chalk/index.css"

Vue.config.productionTip = false

import './assets/icons'
import SvgIcon from '@/components/SvgIcon/index' // svg组件
// 注册为全局组件
Vue.component('svg-icon', SvgIcon)

import SuperFlow from 'vue-super-flow'
import 'vue-super-flow/lib/index.css'
Vue.use(SuperFlow)

Vue.use(ElementUI)

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app")

\src\components\SvgIcon\index.vue

<template>
  <!-- <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" /> -->
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script>
// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
// import { isExternal } from '@/utils/validate'

export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true,
    },
    className: {
      type: String,
      default: '',
    },
  },
  computed: {
    // isExternal() {
    //   return isExternal(this.iconClass)
    // },
    iconName () {
      return `#icon-${this.iconClass}`
    },
    svgClass () {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    },
    styleExternalIcon () {
      return {
        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`,
      }
    },
  },
}
</script>

<style scoped>
.svg-icon {
  width: 4em;
  height: 4em;
  vertical-align: -0.25em;
  fill: currentColor;
  overflow: hidden;
}

.svg-external-icon {
  background-color: currentColor;
  mask-size: cover !important;
  display: inline-block;
}
</style>

\src\assets\icons\index.js

const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)

\src\assets\icons\svg

这个路径下放你的svg图片

完成上述步骤所有的代码就完毕了

vue SuperFlow.vue

介绍框架

1.这个框架功能自带齐全

2.api严重不足

3.支持图片

4.及易上手

vueSuperFlow

<template>
  <div>
    <div class="super-flow-demo1">
      <div class="node-container">
        <button @click="saveCanvasAsImage">保存画布为图片</button>

        <div class="node-item" v-for="item in nodeItemList" @mousedown="evt => nodeItemMouseDown(evt, item.value)">
          <div v-if="item.label == '开始'" class="node-item-img"
            :style="{ backgroundImage: 'url(' + require('./logo.png') + ')' }"></div>
          <div v-if="item.label == '结束'" class="node-item-img node-item-img-2"
            :style="{ backgroundImage: 'url(' + require('./logo.png') + ')' }"></div>
          <div v-if="item.label == '决策'" class="node-item-img"
            :style="{ backgroundImage: 'url(' + require('./logo.png') + ')' }"></div>
          <div v-if="item.label == '分派'" class="node-item-img"
            :style="{ backgroundImage: 'url(' + require('./logo.png') + ')' }"></div>
          {{ item.label }}
        </div>
      </div>
      <div class="flow-container" ref="flowContainer">
        <super-flow ref="superFlow" :graph-menu="graphMenu" :node-menu="nodeMenu" :link-menu="linkMenu"
          :link-base-style="linkBaseStyle" :link-style="linkStyle" :link-desc="linkDesc" :node-list="nodeList"
          :link-list="linkList">
          <template v-slot:node="{ meta }">
            <div @mouseup="nodeMouseUp" @click="nodeClick" class="flow-node ellipsis">
              <div v-if="meta.label == '开始'" class="flow-node-img"
                :style="{ backgroundImage: 'url(' + require('./logo.png') + ')' }"></div>
              <div v-if="meta.label == '结束'" class="flow-node-img flow-node-img-2"
                :style="{ backgroundImage: 'url(' + require('./logo.png') + ')' }"></div>
              <div v-if="meta.label == '决策'" class="flow-node-img"
                :style="{ backgroundImage: 'url(' + require('./logo.png') + ')' }"></div>
              <div v-if="meta.label == '分派'" class="flow-node-img"
                :style="{ backgroundImage: 'url(' + require('./logo.png') + ')' }"></div>
              {{ meta.name }}
            </div>
          </template>
        </super-flow>
      </div>
    </div>
    <!-- 修改节点弹出框 -->
    <el-dialog :title="drawerConf.title" :visible.sync="drawerConf.visible" :close-on-click-modal="false" width="500px">
      <el-form @keyup.native.enter="settingSubmit" @submit.native.prevent v-show="drawerConf.type === drawerType.node"
        ref="nodeSetting" :model="nodeSetting">
        <el-form-item label="节点名称" prop="name">
          <el-input v-model="nodeSetting.name" placeholder="请输入节点名称" maxlength="30">
          </el-input>
        </el-form-item>
        <el-form-item label="节点描述" prop="desc">
          <el-input v-model="nodeSetting.desc" placeholder="请输入节点描述" maxlength="30">
          </el-input>
        </el-form-item>
      </el-form>
      <el-form @keyup.native.enter="settingSubmit" @submit.native.prevent v-show="drawerConf.type === drawerType.link"
        ref="linkSetting" :model="linkSetting">
        <el-form-item label="连线描述" prop="desc">
          <el-input v-model="linkSetting.desc" placeholder="请输入连线描述">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="drawerConf.cancel">
          取 消
        </el-button>
        <el-button type="primary" @click="settingSubmit">
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import SuperFlow from 'vue-super-flow'
import 'vue-super-flow/lib/index.css'
const drawerType = {
  node: 0,
  link: 1
}

export default {
  components: {
    SuperFlow,
  },
  data () {
    return {
      //反显节点
      nodeList: [
        {
          id: 1,
          coordinate: [360, 120],
          width: 200,
          height: 42,
          meta: {
            label: '开始',
            name: '开始',
            type: '开始'
          }
        },
        {
          id: 2,
          coordinate: [360, 240],
          width: 200,
          height: 42,
          meta: {
            label: '决策',
            name: '决策',
            type: '决策'
          }
        },
        {
          id: 3,
          coordinate: [360, 360],
          width: 200,
          height: 42,
          meta: {
            label: '结束',
            name: '结束',
            type: '结束'
          }
        }
      ],
      //反显连线
      linkList: [
        {
          id: 4,
          startAt: [60, 40],
          startId: 1,
          endAt: [100, 0],
          endId: 2,
          meta: null
        },
        {
          id: 5,
          startAt: [100, 40],
          startId: 2,
          endAt: [60, 0],
          endId: 3,
          meta: null
        }
      ],
      drawerType,
      drawerConf: {
        title: '',
        visible: false,
        type: null,
        info: null,
        open: (type, info) => {
          const conf = this.drawerConf
          conf.visible = true
          conf.type = type
          conf.info = info
          if (conf.type === drawerType.node) {
            conf.title = '节点'
            if (this.$refs.nodeSetting) this.$refs.nodeSetting.resetFields()
            this.$set(this.nodeSetting, 'name', info.meta.name)
            this.$set(this.nodeSetting, 'desc', info.meta.desc)
          } else {
            conf.title = '连线'
            if (this.$refs.linkSetting) this.$refs.linkSetting.resetFields()
            this.$set(this.linkSetting, 'desc', info.meta ? info.meta.desc : '')
          }
        },
        cancel: () => {
          this.drawerConf.visible = false
          if (this.drawerConf.type === drawerType.node) {
            this.$refs.nodeSetting.clearValidate()
          } else {
            this.$refs.linkSetting.clearValidate()
          }
        }
      },
      linkSetting: {
        desc: ''
      },
      nodeSetting: {
        name: '',
        desc: ''
      },
      dragConf: {
        isDown: false,
        isMove: false,
        offsetTop: 0,
        offsetLeft: 0,
        clientX: 0,
        clientY: 0,
        ele: null,
        info: null
      },
      // 左边按钮菜单集合
      nodeItemList: [
        {
          label: '开始',
          value: () => ({
            width: 45,
            height: 70,
            meta: {
              label: '开始',
              name: '开始'
            }
          })
        },
        {
          label: '结束',
          value: () => ({
            width: 45,
            height: 70,
            meta: {
              label: '结束',
              name: '结束'
            }
          })
        },
        {
          label: '决策',
          value: () => ({
            width: 45,
            height: 70,
            meta: {
              label: '决策',
              name: '决策'
            }
          })
        },
        {
          label: '分派',
          value: () => ({
            width: 45,
            height: 70,
            meta: {
              label: '分派',
              name: '分派'
            }
          })
        }
      ],
      graphMenu: [
        [
          {
            // 选项 label
            label: '开始',
            // 选项是否禁用
            disable (graph) {
              return !!graph.nodeList.find(node => node.meta.label === '1')
            },
            // 选项选中后回调函数
            selected (graph, coordinate) {
              graph.addNode({
                width: 45,
                height: 70,
                coordinate,
                meta: {
                  label: '开始',
                  name: '开始'
                }
              })
            }
          },
          {
            label: '结束',
            selected (graph, coordinate) {
              graph.addNode({
                width: 45,
                height: 70,
                coordinate,
                meta: {
                  label: '结束',
                  name: '结束'
                }
              })
            }
          },
          {
            label: '决策',
            selected (graph, coordinate) {
              graph.addNode({
                width: 45,
                height: 70,
                coordinate,
                meta: {
                  label: '决策',
                  name: '决策'
                }
              })
            }
          },
          {
            label: '分派',
            selected (graph, coordinate) {
              graph.addNode({
                width: 45,
                height: 70,
                coordinate,
                meta: {
                  label: '分派',
                  name: '分派'
                }
              })
            }
          }
        ],
        [
          {
            label: '全选',
            selected: graph => {
              graph.selectAll()
            }
          }
        ]
      ],
      // 按钮右键菜单
      nodeMenu: [
        [
          {
            label: '删除',
            selected: node => {
              node.remove()
            }
          },
          {
            label: '编辑',
            selected: node => {
              this.drawerConf.open(drawerType.node, node)
            }
          }
        ]
      ],
      // 线条右键菜单
      linkMenu: [
        [
          {
            label: '删除',
            selected: link => {
              link.remove()
            }
          },
          {
            label: '编辑',
            selected: link => {
              this.drawerConf.open(drawerType.link, link)
            }
          }
        ]
      ],
      // 线条样式
      linkBaseStyle: {
        color: '#666666',           // line 颜色
        hover: '#FF0000',           // line hover 的颜色
        textColor: '#666666',       // line 描述文字颜色
        textHover: '#FF0000',       // line 描述文字 hover 颜色
        font: '14px Arial',         // line 描述文字 字体设置 参考 canvas font
        dotted: false,              // 是否是虚线
        lineDash: [4, 4],           // 虚线时生效
        background: 'rgba(255,255,255,0.6)'    // 描述文字背景色
      },
      // 字体样式
      fontList: [
        '14px Arial',
        'italic small-caps bold 12px arial'
      ],
      savedData: {
        "nodes": [
          {
            "id": "node1",
            "type": "start",
            "x": 50,
            "y": 50,
            "data": {
              "label": "开始"
            }
          },
          {
            "id": "node2",
            "type": "process",
            "x": 200,
            "y": 50,
            "data": {
              "label": "处理任务A"
            }
          },
          {
            "id": "node3",
            "type": "decision",
            "x": 350,
            "y": 50,
            "data": {
              "label": "决策点"
            }
          },
          {
            "id": "node4",
            "type": "process",
            "x": 500,
            "y": 50,
            "data": {
              "label": "处理任务B"
            }
          },
          {
            "id": "node5",
            "type": "end",
            "x": 650,
            "y": 50,
            "data": {
              "label": "结束"
            }
          }
        ],
        "edges": [
          {
            "source": "node1",
            "target": "node2",
            "type": "arrow"
          },
          {
            "source": "node2",
            "target": "node3",
            "type": "arrow"
          },
          {
            "source": "node3",
            "target": "node4",
            "condition": "true",
            "type": "arrow"
          },
          {
            "source": "node3",
            "target": "node5",
            "condition": "false",
            "type": "arrow"
          },
          {
            "source": "node4",
            "target": "node5",
            "type": "arrow"
          }
        ]
      }
    }
  },
  mounted () {
    document.addEventListener('mousemove', this.docMousemove)
    document.addEventListener('mouseup', this.docMouseup)
    this.$once('hook:beforeDestroy', () => {
      document.removeEventListener('mousemove', this.docMousemove)
      document.removeEventListener('mouseup', this.docMouseup)
    })
  },
  methods: {
    saveCanvasAsImage () {
      // 调用 super-flow 的 exportData 方法来获取画布数据
      // console.log('this.$refs.superFlow', this.$refs.superFlow.toJSON())
      const canvasData = this.$refs.superFlow.toJSON()
      console.log('canvasData', canvasData)
      // 根据需要处理数据，例如转换为 JSON 或存储到本地
      // 如果你想将数据保存到本地文件，可以使用下面的代码
      // this.saveToFile(JSON.stringify(canvasData), 'canvas_data.json')
    },
    saveToFile (data, filename) {
      const blob = new Blob([data], { type: "text/plain;charset=utf-8" })
      const url = window.URL.createObjectURL(blob)
      const a = document.createElement("a")
      a.style.display = "none"
      a.href = url
      a.download = filename
      document.body.appendChild(a)
      a.click()
      window.URL.revokeObjectURL(url)
      document.body.removeChild(a)
      console.log('blob', blob)
    },
    flowNodeClick (meta) {
      console.log(this.$refs.superFlow.graph)
    },
    linkStyle (link) {
      if (link.meta && link.meta.desc === '1') {
        return {
          color: 'red',
          hover: '#FF00FF',
          dotted: true
        }
      } else {
        return {}
      }
    },
    linkDesc (link) {
      return link.meta ? link.meta.desc : ''
    },
    settingSubmit () {
      const conf = this.drawerConf
      if (this.drawerConf.type === drawerType.node) {
        if (!conf.info.meta) conf.info.meta = {}
        Object.keys(this.nodeSetting).forEach(key => {
          this.$set(conf.info.meta, key, this.nodeSetting[key])
        })
        this.$refs.nodeSetting.resetFields()
      } else {
        if (!conf.info.meta) conf.info.meta = {}
        Object.keys(this.linkSetting).forEach(key => {
          this.$set(conf.info.meta, key, this.linkSetting[key])
        })
        this.$refs.linkSetting.resetFields()
      }
      conf.visible = false
    },
    nodeMouseUp (evt) {
      // 取消这个事件的默认操作
      evt.preventDefault()
    },
    nodeClick () {
      console.log(arguments)
    },
    docMousemove ({ clientX, clientY }) {
      const conf = this.dragConf

      if (conf.isMove) {

        conf.ele.style.top = clientY - conf.offsetTop + 'px'
        conf.ele.style.left = clientX - conf.offsetLeft + 'px'

      } else if (conf.isDown) {

        // 鼠标移动量大于 5 时 移动状态生效
        conf.isMove =
          Math.abs(clientX - conf.clientX) > 5
          || Math.abs(clientY - conf.clientY) > 5

      }
    },
    docMouseup ({ clientX, clientY }) {
      const conf = this.dragConf
      conf.isDown = false

      if (conf.isMove) {
        const {
          top,
          right,
          bottom,
          left
        } = this.$refs.flowContainer.getBoundingClientRect()

        // 判断鼠标是否进入 flow container
        if (
          clientX > left
          && clientX < right
          && clientY > top
          && clientY < bottom
        ) {

          // 获取拖动元素左上角相对 super flow 区域原点坐标
          const coordinate = this.$refs.superFlow.getMouseCoordinate(
            clientX - conf.offsetLeft,
            clientY - conf.offsetTop
          )

          // 添加节点
          this.$refs.superFlow.addNode({
            coordinate,
            ...conf.info
          })

        }

        conf.isMove = false
      }

      if (conf.ele) {
        conf.ele.remove()
        conf.ele = null
      }
    },
    nodeItemMouseDown (evt, infoFun) {
      const {
        clientX,
        clientY,
        currentTarget
      } = evt

      const {
        top,
        left
      } = evt.currentTarget.getBoundingClientRect()

      const conf = this.dragConf
      const ele = currentTarget.cloneNode(true)

      Object.assign(this.dragConf, {
        offsetLeft: clientX - left,
        offsetTop: clientY - top,
        clientX: clientX,
        clientY: clientY,
        info: infoFun(),
        ele,
        isDown: true
      })

      ele.style.position = 'fixed'
      ele.style.margin = '0'
      ele.style.top = clientY - conf.offsetTop + 'px'
      ele.style.left = clientX - conf.offsetLeft + 'px'

      this.$el.appendChild(this.dragConf.ele)
    }
  }
}
</script>

<style lang="less">
.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-wrap: break-word;
}

.link-base-style-form {
  .el-form-item {
    margin-bottom: 12px;
  }

  padding-bottom: 20px;
  border-bottom: 1px solid #DCDCDC;
}

.super-flow-demo1 {
  margin-top: 20px;
  width: 100%;
  height: 800px;
  background-color: #f5f5f5;
  @list-width: 200px;


  >.node-container {
    width: @list-width;
    float: left;
    height: 100%;
    text-align: center;
    background-color: #FFFFFF;
  }

  >.flow-container {
    width: calc(100% - @list-width);
    float: left;
    height: 100%;
    overflow: hidden;
  }

  .super-flow__node {
    box-shadow: none;
    background-color: transparent;
    border: none;
    font-size: 14px;

    .flow-node {
      box-sizing: border-box;
      width: 42px;
      height: 100%;
      font-size: 14px;
      text-align: center;
      line-height: 30px;

      .flow-node-img {
        background: no-repeat;
        background-size: cover;
        height: 41px;
        display: block;
      }

      .flow-node-img-2 {
        height: 42px !important;
      }
    }
  }
}

.node-item {
  @node-item-height: 30px;

  font-size: 14px;
  display: inline-block;
  height: 60px;
  width: 42px;
  margin: 20px 25px;
  background-color: #FFFFFF;
  line-height: 30px;
  cursor: pointer;
  user-select: none;
  text-align: center;
  z-index: 6;
  box-sizing: border-box;

  .node-item-img {
    background: no-repeat;
    background-size: cover;
    height: 41px;
    display: block;
  }

  .node-item-img-2 {
    height: 42px !important;
  }
}
</style>