vueflow

自定义节点，自定义线，具体细节还未完善，实现效果：

1.安装vueflow

2.目录如下

index.vue

<script setup>
import { ref } from 'vue'
import { VueFlow, useVueFlow } from '@vue-flow/core'
import { Background } from '@vue-flow/background'
import { ControlButton, Controls } from '@vue-flow/controls'
import { MiniMap } from '@vue-flow/minimap'
import { MarkerType } from '@vue-flow/core'
import useDragAndDrop from './components/useDnD'
import Sidebar from './components/Sidebar.vue'
const { onInit, onNodeDragStop, onConnect, addEdges, setViewport, toObject, addNodes, project } = useVueFlow()
const { onDragStart, onDragOver, onDrop, onDragLeave, isDragOver } = useDragAndDrop()
import EdgeWithButton from './components/EdgeWithButton.vue'
import { toPng, toJpeg, toBlob } from 'html-to-image'
// const flowContainer = ref(null)
// 导入自定义节点
import DataSetNode from './components/DataSetNode.vue'//数据集
import ConditionNode from './components/ConditionNode.vue'//条件
import AlgorithmsLibraryNode from './components/AlgorithmsLibraryNode.vue'//算法
// 节点
const nodes = ref([])
// 线
const edges = ref([])
// var drawer = ref(false)
// 线的默认颜色
const edgesStyle = {
  style: {
    // stroke: '#6366f1',
    strokeWidth: 1, // 设置线宽 
  },
  markerEnd: {
    type: MarkerType.ArrowClosed,
    // color: '#6366f1',
    // width: 6,   // 箭头宽度
    // height: 12,  // 箭头高度
  }

}
// 初始化
onInit((vueFlowInstance) => {
  vueFlowInstance.fitView()
})
// 链接线
onConnect((connection) => {
  addEdges({
    ...connection, // 保留原始连接属性
    type: 'button',
    ...edgesStyle
  })
})
// 双击事件
// const handleNodeDoubleClick = (event, node) => {
//   drawer.value = true
// }
// 阻止右键事件
const showContextMenu = (e) => {
  // e.preventDefault()
}
// 保存按钮
const saveNodes = () => {
  console.log(nodes.value)
  console.log(edges.value)
  edges.value.map(val => {
    val.type = null
  })
  console.log("保存")
}
</script>

<template>
  <div class="dndflow" @drop="onDrop" @click.right.native="showContextMenu($event)">
    <!-- 顶部的按钮 -->
    <div class="top-title-button">
      <div class="top-title">算法流程编辑</div>
      <el-button type="primary" class="ybutton">运行</el-button>
      <el-button type="success" class="ybutton" @click="saveNodes">保存</el-button>
    </div>
    <div ref="flowContainer" class="flow-container">
      <!-- @node-double-click="handleNodeDoubleClick" -->
      <VueFlow v-model:nodes="nodes" v-model:edges="edges" class="basic-flow" :default-viewport="{ zoom: 1.5 }"
        :min-zoom="0.2" :max-zoom="4" @dragover="onDragOver" @dragleave="onDragLeave">
        <template #edge-button="buttonEdgeProps">
          <!-- 删除线的删除按钮 -->
          <EdgeWithButton :id="buttonEdgeProps.id" :source-x="buttonEdgeProps.sourceX"
            :source-y="buttonEdgeProps.sourceY" :target-x="buttonEdgeProps.targetX" :target-y="buttonEdgeProps.targetY"
            :source-position="buttonEdgeProps.sourcePosition" :target-position="buttonEdgeProps.targetPosition"
            :marker-end="buttonEdgeProps.markerEnd" :style="buttonEdgeProps.style" />
        </template>
        <template #node-data-set="props">
          <!-- 数据集节点 -->
          <DataSetNode :id="props.id" :data="props.data"></DataSetNode>
        </template>
        <template #node-algorithms-library="props">
          <!-- 算法库节点 -->
          <AlgorithmsLibraryNode :id="props.id" :data="props.data"></AlgorithmsLibraryNode>
        </template>
        <template #node-condition="props">
          <!-- 条件节点 -->
          <ConditionNode :id="props.id" :data="props.data"></ConditionNode>
        </template>
        
        <!-- 背景 -->
        <Background :gap="16" />
        <!-- 小地图 -->
        <MiniMap />
        <!-- 小按钮 -->
        <Controls position="bottom-center" />
      </VueFlow>
    </div>
    <!-- 左侧拖动面板 -->
    <Sidebar />
  </div>
</template>
<style>
@import './main.css';
</style>

main.css

/* import the necessary styles for Vue Flow to work */
@import "@vue-flow/core/dist/style.css";

/* import the default theme, this is optional but generally recommended */
@import "@vue-flow/core/dist/theme-default.css";


html,
body,
#app {
    margin: 0;
    height: 100%;
}

#app {
    text-transform: uppercase;
    font-family: 'JetBrains Mono', monospace;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

/* 最外层div样式 */
.dndflow {
    flex-direction: column;
    display: flex;
    height: 100%;
    width: calc(100% - 200px);
    position: absolute;
    left: 200px;
}

.flow-container {
    width: 100%;
    height: calc(100% - 60px);
    background: white;
    border: 1px solid #ddd;
}

/* 小地图 */
.vue-flow__minimap {
    transform: scale(75%);
    transform-origin: bottom right;
}

/* 顶部标题及运行和保存按钮 */
.top-title-button {
    height: 60px;
    text-align: left;
    line-height: 60px;
}

.top-title {
    display: inline-block;
    font-size: 30px;
    font-weight: 800;
    padding-left: 20px;
    font-weight: bold;
    /* color: #0f6cd6; */
    text-shadow:
        -2px -2px 0 #000;
    /* 1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000; */
    background-image: -webkit-linear-gradient(bottom, red, #fd8403, yellow);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ybutton {
    margin: 20px 10px 0;
    float: right;
}

/* 工具行样式 */
.basic-flow .vue-flow__controls .vue-flow__controls-button svg {
    height: 16px;
    width: 16px;
    padding: 2px;
}

/* 在 handle 内部添加 + 号 */
.vue-flow__handle {
    height: 12px;
    width: 12px;
    border-radius: 50%;
}

.vue-flow__handle::after {
    content: "+";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    color: #fff;
    pointer-events: none;
    /* 避免干扰拖拽事件 */
}

/* 左侧面板 */
.left-panal {
    position: fixed;
    bottom: 0;
    left: 0;
    top: 0;
    margin: 0;
    background: linear-gradient(to left, #ba8beb, #c1e9e9);
    z-index: 5;
    width: 200px;
}

.left-panal>div {
    margin: 10px auto;
    cursor: grab;
}

/*左侧按钮 */
.vue-flow__node-default {
    /* border-width: 3px; */
    padding: 0;
    border: 1px solid #ca9fed;
    padding: 5px 10px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vue-flow__node-default .el-icon {
    margin-right: 5px;
}

/* 删除按钮 */
.edgebutton {
    width:15px;
    height:15px;
    line-height:15px;
    font-size: 12px;
    border: 1px solid #b0dee7;
    background: #ffffff;
    border-radius: 50%;
    cursor: pointer;
    color: #aaa;
}

.edgebutton:hover {
    transform: scale(1.1);
    transition: all ease .5s;
    box-shadow: 0 0 0 1px #a8ddcb80, 0 0 0 2px #c0e4e4
}

/* 节点样式 */
.custom-node {
    width: 180px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    position: relative;
    text-align: left;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 5px;
    padding:10px;
}

.node-header {
    font-weight: bold;
    /* border-bottom: 1px solid #eee; */
    padding-bottom: 4px;
}

.vue-flow__node.selected .custom-node {
    box-shadow: 0 1px 3px #6366f1 !important;
    border: 1px solid #6366f1 !important;
}

.deletebtn {
    position: absolute;
    right: 5px;
    top: 0;
    cursor: pointer;
}

.deletebtn .el-icon {
    margin: 5px 5px;
    width: 12px;
    height: 12px;
}

.del-icon {
    color: #f00;
}

.copy-icon {
    color: rgb(13, 67, 227);
}

.edit-icon {
    color: rgb(10, 236, 232);
}

.yxjgbtn {
    float: right;
    color: #6366f1;
    font-size: 14px;
    cursor: pointer;
}

/* .btnList{
    cursor: pointer;
  }
  .btnList>p{
    cursor: pointer;
    text-align: center;
    font-size: 16px;
    border-bottom:1px solid #eee;
    margin: 0;
    padding: 5px 0;
  }
  .btnList>p:last-child{
    border: 0;
  } */

Sidebar.vue

<!-- 左侧拖动节点栏 -->
<script setup>
import useDragAndDrop from './useDnD'
const { onDragStart } = useDragAndDrop()
</script>

<template>
    <aside class="left-panal">
        <!-- <div class="vue-flow__node-input" :draggable="true"
            @dragstart="(event) => onDragStart(event, { type: 'input', label: '开始' })">
            开始
        </div>
        <div class="vue-flow__node-output" :draggable="true"
            @dragstart="(event) => onDragStart(event, { type: 'output', label: '结束' })">
            结束
        </div> -->
        <div class="vue-flow__node-default" :draggable="true"
            @dragstart="(event) => onDragStart(event, 'algorithms-library')">
            <el-icon style="color: #532ff3;">
                <Memo />
            </el-icon>算法
        </div>
        <div class="vue-flow__node-default" :draggable="true" @dragstart="(event) => onDragStart(event, 'data-set')">
            <el-icon style="color: #f34033;">
                <Files />
            </el-icon>数据集
        </div>
        <div class="vue-flow__node-default" :draggable="true" @dragstart="(event) => onDragStart(event, 'condition')">
            <el-icon  style="color: #077215;"><Connection /></el-icon>条件
        </div>
    </aside>
</template>

useDnD.js

import { useVueFlow } from '@vue-flow/core'
import { ref, watch } from 'vue'

/**
 * @returns {string} - A unique id.
 */
function getId() {
  let id = Date.now();
  return `dndnode_${id}`
}

/**
 * In a real world scenario you'd want to avoid creating refs in a global scope like this as they might not be cleaned up properly.
 * @type {{draggedType: Ref<string|null>, isDragOver: Ref<boolean>, isDragging: Ref<boolean>}}
 */
const state = {
  /**
   * The type of the node being dragged.
   */
  draggedType: ref(null),
  isDragOver: ref(false),
  isDragging: ref(false),
}

export default function useDragAndDrop() {
  const { draggedType, isDragOver, isDragging } = state

  const { addNodes, screenToFlowCoordinate, onNodesInitialized, updateNode } = useVueFlow()

  watch(isDragging, (dragging) => {
    document.body.style.userSelect = dragging ? 'none' : ''
  })

  function onDragStart(event, type) {
    if (event.dataTransfer) {
      event.dataTransfer.setData('application/vueflow', type)
      event.dataTransfer.effectAllowed = 'move'
    }

    draggedType.value = type
    isDragging.value = true

    document.addEventListener('drop', onDragEnd)
  }

  /**
   * Handles the drag over event.
   *
   * @param {DragEvent} event
   */
  function onDragOver(event) {
    event.preventDefault()

    if (draggedType.value) {
      isDragOver.value = true

      if (event.dataTransfer) {
        event.dataTransfer.dropEffect = 'move'
      }
    }
  }

  function onDragLeave() {
    isDragOver.value = false
  }

  function onDragEnd() {
    isDragging.value = false
    isDragOver.value = false
    draggedType.value = null
    document.removeEventListener('drop', onDragEnd)
  }

  /**
   * Handles the drop event.
   *
   * @param {DragEvent} event
   */
  function onDrop(event) {
    const position = screenToFlowCoordinate({
      x: event.clientX,
      y: event.clientY,
    })

    const nodeId = getId()

    const newNode = {
      id: nodeId,
      type: draggedType.value,
      position,
      data: { label: nodeId },
    }

    /**
     * Align node position after drop, so it's centered to the mouse
     *
     * We can hook into events even in a callback, and we can remove the event listener after it's been called.
     */
    const { off } = onNodesInitialized(() => {
      updateNode(nodeId, (node) => ({
        position: { x: node.position.x - node.dimensions.width / 2, y: node.position.y - node.dimensions.height / 2 },
      }))

      off()
    })

    addNodes(newNode)
  }

  return {
    draggedType,
    isDragOver,
    isDragging,
    onDragStart,
    onDragLeave,
    onDragOver,
    onDrop,
  }
}

AlgorithmsLibraryNode.vue

<!-- CustomNode.vue -->
<template>
    <div class="custom-node clearfix">
      <div class="deletebtn">
        <el-popconfirm class="box-item" title="确定删除该节点吗？" placement="top-start" @confirm="deleteNode(id)">
          <template #reference>
            <el-icon class="del-icon">
              <Delete />
            </el-icon>
          </template>
        </el-popconfirm>
        <el-icon class="copy-icon" @click="duplicateNode(id)">
          <DocumentCopy />
        </el-icon>
        <el-icon class="edit-icon" @click="xgjd(id)">
          <EditPen />
        </el-icon>
        <!-- <el-popover class="box-item"   placement="top-start">
          <template #reference>
            <el-icon>
              <MoreFilled />
            </el-icon>
          </template>
  <div class="btnList">
    <p @click="deleteNode">删除</p>
    <p>复制</p>
  </div>
  </el-popover> -->
      </div>
      <div class="node-header">
        算法
      </div>
      <div @click="yxjg()" class="yxjgbtn">运行结果</div>
      <Handle type="source" position="right" />
      <Handle type="target" position="left" />
    </div>
    <!-- 运行结果 -->
    <el-drawer v-model="draweryx" :with-header="false" size="20%" append-to-body>
      <span>运行结果</span>
    </el-drawer>
    <!-- 点击节点弹出的弹出框 -->
    <el-drawer v-model="drawerjd" :with-header="false" size="20%" append-to-body>
      <span>修改节点</span>
    </el-drawer>
  </template>
  
  <script setup>
  import { Handle } from '@vue-flow/core'
  import { useVueFlow } from '@vue-flow/core'
  const { removeNodes, getNodes, addNodes } = useVueFlow()
  var draweryx = ref(false)
  var drawerjd = ref(false)
  
  const props = defineProps({
    id: String,
    data: Object,
    selected: Boolean
  })
  // 运行结果事件
  const yxjg = (id) => {
    draweryx.value = true
  }
  // 修改节点事件
  const xgjd = (id) => {
    drawerjd.value = true
  }
  // 删除单个节点
  const deleteNode = (nodeId) => {
    removeNodes(nodeId)
  }
  // 复制指定节点
  const duplicateNode = (nodeId) => {
    const originalNode = getNodes.value.find(n => n.id === nodeId)
    if (!originalNode) return
  
    // 创建新节点（修改ID和位置）
    const newNode = {
      ...originalNode,
      id: `${originalNode.id}-copy-${Date.now()}`, // 确保ID唯一
      position: {
        x: originalNode.position.x + 50, // 偏移位置
        y: originalNode.position.y + 50
      },
      selected: false // 取消选中状态
    }
    addNodes(newNode)
  }
  
  </script>
  

ConditionNode.vue

<!-- CustomNode.vue -->
<template>
    <div class="custom-node clearfix" >
        <div class="deletebtn">
            <el-popconfirm class="box-item" title="确定删除该节点吗？" placement="top-start" @confirm="deleteNode(id)">
                <template #reference>
                    <el-icon class="del-icon">
                        <Delete />
                    </el-icon>
                </template>
            </el-popconfirm>
            <el-icon class="copy-icon" @click="duplicateNode(id)">
                <DocumentCopy />
            </el-icon>
            <el-icon class="edit-icon" @click="xgjd(id)">
                <EditPen />
            </el-icon>
        </div>
        <div class="node-header">
            条件
        </div>
        <div v-for="(item, index) in data.conditions" v-if="data.conditions" class="conditionsNode">
            <p v-if="index == 0"><span>Case{{ index + 1 }}</span> <span class="caseif">If</span></p>
            <p v-if="index != 0 && index != data.conditions.length - 1"><span>Case{{ index + 1 }}</span><span
                    class="caseif">Else
                    If</span></p>
            <p v-if="index == data.conditions.length - 1"><span class="caseif">Else</span></p>
            <div class="paramList" v-if="index != data.conditions.length - 1">
                <div v-for="(d, num) in item.rules">
                    <p class="param"> {{ d.param }}{{ d.operator }}{{ d.value }}</p>
                    <p v-if="item.rules.length > 1 && item.rules.length - 1 != num" class="operator">{{ item.operator }}
                    </p>
                </div>
            </div>

            <Handle :position="Position.Right" type="source" :id="item.id + 'right_' + index"
                class="conditionsHandleNode">
            </Handle>
        </div>
        <Handle type="target" position="left" />
        <!-- <Handle v-for="(item, index) in conditions" :position="Position.Right" type="source" :id="'right_' + index"
            :style="getDynamicHandlePos(item, index)">
        </Handle> -->
    </div>
    <!-- 点击节点弹出的弹出框 -->
    <el-drawer v-model="drawerjd" size="20%" append-to-body :with-header="false">
        <div class="drawerTitle"><el-icon style="color: blueviolet;margin-right: 5px;">
                <Edit />
            </el-icon>条件节点</div>
        <p class="nodedescribe">该组件用于根据前面的组件输出相应的引导执行流程，通过定义各种情况并指定操作，或不满足条件时采取默认操作，实现复杂的分支逻辑</p>
        <div v-for="(item, index) in data.conditions" class="drawerCase" v-show="index!=data.conditions.length-1">
            <el-select v-model="item.operator" placeholder="选择" size="large">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <div></div>
        </div>
        <el-button type="success">Add Condition</el-button>
        <!-- <div class="addcondition">Add Condition</div> -->
        <el-button type="primary">Add Case</el-button>
        <!-- <div class="addcase">Add Case</div> -->

    </el-drawer>
</template>

<script setup>
import { Position, Handle } from '@vue-flow/core'
import { useVueFlow } from '@vue-flow/core'
import { onMounted } from 'vue'
const { removeNodes, getNodes, addNodes, updateNode } = useVueFlow()
var draweryx = ref(false)
var drawerjd = ref(false)
const options = [
  {
    value: 'AND',
    label: '与',
  },
  {
    value: 'OR',
    label: '或',
  },
]


const props = defineProps({
    id: String,
    data: Object,
    selected: Boolean
})
const initconditions = () => {
    if (props.data.conditions) return
    props.data.conditions = [
        {
            operator: 'AND',
            rules: [
                {
                    param: 'ceshi',
                    operator: '>',
                    value: '13',
                }, {
                    param: 'ceshi',
                    operator: '>',
                    value: '13',
                }, {
                    param: null,
                    operator: null,
                    value: null,
                }
            ]
        }, {
            operator: null,
            rules: null
        }
    ]
}
// 修改节点事件
const xgjd = (id) => {
    drawerjd.value = true
}
// 删除单个节点
const deleteNode = (nodeId) => {
    removeNodes(nodeId)
}
// 复制指定节点
const duplicateNode = (nodeId) => {
    const originalNode = getNodes.value.find(n => n.id === nodeId)
    if (!originalNode) return

    // 创建新节点（修改ID和位置）
    const newNode = {
        ...originalNode,
        id: `${originalNode.id}-copy-${Date.now()}`, // 确保ID唯一
        position: {
            x: originalNode.position.x + 50, // 偏移位置
            y: originalNode.position.y + 50
        },
        selected: false // 取消选中状态
    }
    addNodes(newNode)
}
onMounted(() => {
    initconditions()
    const originalNode = getNodes.value.find(n => n.id === props.id)
    console.log(originalNode)
})
</script>
<style scoped>
.conditionsNode {
    width: 100%;
    position: relative;
    /* text-align: right; */
}

.conditionsNode p {
    font-size: 14px;
    margin: 5px 0;
}

.conditionsHandleNode {
    position: absolute;
    top: 10px;
    right: -10px;
}

.caseif {
    float: right;
}

.paramList {
    padding: 5px;
    background: #f8f6fe;
}

.paramList .param {
    padding: 5px;
    background: #e2d6ff;
}

.paramList .operator {
    text-align: center;
    font-size: 12px;
    font-weight: 800;
}

.drawerTitle {
    font-size: 16px;
    font-weight: 800;
    display: flex;
    align-items: center;
}

.nodedescribe {
    color: #666;
    font-size: 12px;
}
.drawerCase{
    background: #f8f6fe;
    padding: 5px;
}
</style>

DataSetNode.vue

<!-- CustomNode.vue -->
<template>
  <div class="custom-node clearfix" >
    <div class="deletebtn">
      <el-popconfirm class="box-item" title="确定删除该节点吗？" placement="top-start" @confirm="deleteNode(id)">
        <template #reference>
          <el-icon class="del-icon">
            <Delete />
          </el-icon>
        </template>
      </el-popconfirm>
      <el-icon class="copy-icon" @click="duplicateNode(id)">
        <DocumentCopy />
      </el-icon>
      <el-icon class="edit-icon" @click="xgjd(id)">
        <EditPen />
      </el-icon>
      <!-- <el-popover class="box-item"   placement="top-start">
        <template #reference>
          <el-icon>
            <MoreFilled />
          </el-icon>
        </template>
<div class="btnList">
  <p @click="deleteNode">删除</p>
  <p>复制</p>
</div>
</el-popover> -->
    </div>
    <div class="node-header">
     数据集
    </div>
    <div @click="yxjg()" class="yxjgbtn">运行结果</div>
    <Handle type="source" position="right" />
    <Handle type="target" position="left" />
  </div>
  <!-- 运行结果 -->
  <el-drawer v-model="draweryx" :with-header="false" size="20%" append-to-body>
    <span>运行结果</span>
  </el-drawer>
  <!-- 点击节点弹出的弹出框 -->
  <el-drawer v-model="drawerjd" :with-header="false" size="20%" append-to-body>
    <span>修改节点</span>
  </el-drawer>
</template>

<script setup>
import { Handle } from '@vue-flow/core'
import { useVueFlow } from '@vue-flow/core'
const { removeNodes, getNodes, addNodes } = useVueFlow()
var draweryx = ref(false)
var drawerjd = ref(false)

const props = defineProps({
  id: String,
  data: Object,
  selected: Boolean
})

// 运行结果事件
const yxjg = (id) => {
  draweryx.value = true
}
// 修改节点事件
const xgjd = (id) => {
  drawerjd.value = true
}
// 删除单个节点
const deleteNode = (nodeId) => {
  removeNodes(nodeId)
}
// 复制指定节点
const duplicateNode = (nodeId) => {
  const originalNode = getNodes.value.find(n => n.id === nodeId)
  if (!originalNode) return

  // 创建新节点（修改ID和位置）
  const newNode = {
    ...originalNode,
    id: `${originalNode.id}-copy-${Date.now()}`, // 确保ID唯一
    position: {
      x: originalNode.position.x + 50, // 偏移位置
      y: originalNode.position.y + 50
    },
    selected: false // 取消选中状态
  }
  addNodes(newNode)
}

</script>

EdgeWithButton.vue

<script setup>
import { BaseEdge, EdgeLabelRenderer, getBezierPath, useVueFlow } from '@vue-flow/core'
import { computed } from 'vue'

const props = defineProps({
  id: {
    type: String,
    required: true,
  },
  sourceX: {
    type: Number,
    required: true,
  },
  sourceY: {
    type: Number,
    required: true,
  },
  targetX: {
    type: Number,
    required: true,
  },
  targetY: {
    type: Number,
    required: true,
  },
  sourcePosition: {
    type: String,
    required: true,
  },
  targetPosition: {
    type: String,
    required: true,
  },
  markerEnd: {
    type: String,
    required: false,
  },
  style: {
    type: Object,
    required: false,
  },
})

const { removeEdges } = useVueFlow()

const path = computed(() => getBezierPath(props))
</script>

<script>
export default {
  inheritAttrs: false,
}
</script>

<template>
  <!-- You can use the `BaseEdge` component to create your own custom edge more easily -->
  <BaseEdge :id="id" :style="style" :path="path[0]" :marker-end="markerEnd" />

  <!-- Use the `EdgeLabelRenderer` to escape the SVG world of edges and render your own custom label in a `<div>` ctx -->
  <EdgeLabelRenderer>
    <div :style="{
      pointerEvents: 'all',
      position: 'absolute',
      transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)`,
    }" class="nodrag nopan">
      <div class="edgebutton" @click="removeEdges(id)">×</div>
    </div>
  </EdgeLabelRenderer>
</template>
<style scoped>

</style>