G6实现拖拽图例构建拓扑图

1.添加节点

需求：从左侧图符中拖出，在右边画布上展示拖出的图符信息生成图例

解决：布局：左侧图符组件（node）+中间画布组件(index)，通过dragend事件实现图符可拖拽，通过addItem在画布中添加节点

1. 定义nodeList数组，存放图例相关信息，包括名称、图片路径等信息
2. 遍历数组生成图符
3. 为图符添加dragend事件调用addNode方法，添加自定义事件refresh，将节点信息和事件信息传出去
4. 在index组件通过自定义事件接收node组件的节点信息，并实现新增节点

<template>
  <div class="node_panel">
    <div class="node_select" v-for="item in nodeList" :key="item.type" draggable="true" @dragend="addNode(item, $event,nodeList)">
      <div style="color: rgb(255,255,255);">
        <img :src="item.src" />
        {{ item.label }}
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { defineEmits } from "vue";
// import G6 from '@antv/g6'

const emit = defineEmits(['refresh'])
const addNode = (a, b,c) => {
  emit('refresh', a, b,c)
}
const nodeList = reactive([
  {
    label: "docker",
    src: "/src/assets/antv/docker.png",
    size: [30, 30],
    type: "circle ",
    data:{
      config:{
        id: "扫描任务id",
        name: "扫描任务名称",
        group_id: "1",
      },
      targetInfo:{
        targetIP: "目标设备的连接方式和凭据",
        credital: "",
      }
    }
  },
  {
    label: "experibox",
    src: "/src/assets/antv/experibox.png",
    size: [30, 30],
    type: "circle ",
    data:{
      config:{
        id: "111",
        name: "111",
        group_id: "1",
      },
      targetInfo:{
        targetIP: "111",
        credital: "",
      }
    }
  },
])
</script>  

中间画布组件（index）引入node组件并使用，添加refresh事件，触发addNodes方法向画布中添加图例，向节点集中添加新节点信息

<node @refresh="addNodes" />

// 添加节点
const addNodes = (type: any, e: any) => {
  // 将屏幕/页面坐标转换为渲染坐标
  const point = graph.value.getPointByClient(e.x, e.y)
  // 新创建的节点信息
  const model = {
    id: 'node' + Math.random(), // id使用了随机数，尽可能避免重复
    label: type.label, // 文本标签
    labelCfg: {
      style: {
        fill: '#fff',
      },
    },
    type: 'image', // 图片类型的节点
    x: point.x,
    y: point.y,
    img: type.src, // 图片地址
    size: [70, 70],
    status: 0,
  }
  graph.value.addItem('node', model, true)
  data.nodes.push(model)
}