vue3使用AntV G6 (图可视化引擎)历程[三]

上期回顾：历程[二]描述了节点抽离自定义节点并做数据静态渲染。下面这篇继续描述节点升级版的模块化抽离以及动态数据渲染
官网地址：https://g6-next.antv.antgroup.com/manual/introduction “@antv/g6”: “^4.8.24”

一、案例效果

在这里插入图片描述

二、自定义节点的模块化抽离

1. 组件引用

  <TopologyBase domId="featureTreeInfoContainer" :treeData="treeData" />

2. 【TopologyBase.vue】组件封装

<template>
  <div :id="domId" class="w-full h-[95%]"></div>
</template>
<script setup lang="ts">
import G6 from '@antv/g6'
import { onMounted, ref } from 'vue'
import { attrConfigHandle } from './initAttrConfig'
import { drawShape } from './registerNode'

const props = defineProps({
  domId: {
    type: String,
    default: '',
  },
  treeData: {
    type: Object,
  },
})
const initTreeData = ref(props.treeData)
const container = ref<any>()

G6.registerNode(
  'dom-node',
  {
    draw(cfg: any, group) {
      return drawShape(cfg).featureTreeShape(cfg, group)
    },
  },
  'single-node',
)

// 初始化G6图形
const initG6 = (initData: any) => {
  container.value = document.getElementById(props.domId)
  const width = container.value?.scrollWidth
  const height = container.value?.scrollHeight
  // 创建一个新的G6树形图
  const graph = new G6.TreeGraph({
    container: props.domId, // 指定图形容器的ID
    width, // 设置图形的宽度
    height, // 设置图形的高度
    modes: {
      default: [...attrConfigHandle().modes().default], // 设置图形的模式
    },
    defaultNode: {
      ...attrConfigHandle().defaultNode(), // 设置默认节点的配置
    },
    fitCenter: true, // 设置图形居中
    renderer: 'svg', // 设置渲染器为svg
    linkCenter: true, // 设置连接中心
    defaultEdge: {
      ...attrConfigHandle().defaultEdge(), // 设置默认边的配置
    },
    layout: {
      ...attrConfigHandle().layout(), // 设置布局的配置
    },
  })

  graph.node(function (node) {
    return {
      label: node.id,
      labelCfg: {
        position: node.children && node.children.length > 0 ? 'left' : 'right',
        offset: 5,
      },
    }
  })
  render(graph, initData)
}
// 调整图形的大小以适应容器的变化
const graphResize = (graph: any) => {
  if (!graph || graph.get('destroyed')) return
  if (!container.value || !container.value.scrollWidth || !container.value.scrollHeight) return
  graph.changeSize(container.value.scrollWidth, container.value.scrollHeight)
}
// 渲染图形
const render = (graph: any, initData: any) => {
  graph.data(initData) // 将数据加载到图形中
  graph.render() // 渲染图形
  graph.fitView() // 使图形适应视图
  //  如果在浏览器环境中，当窗口大小改变时，调整图形的大小以适应容器的变化
  if (typeof window !== 'undefined')
    window.onresize = () => {
      graphResize(graph)
    }
}

onMounted(() => {
  initG6(initTreeData.value)
})
</script>

3. 模块抽离

./initAttrConfig.ts

/**
 * 生成节点配置
 * @returns 返回以下配置属性
 * modes - 生成模式配置
 * defaultNode - 生成默认节点配置
 * defaultEdge - 生成默认边配置
 * layout - 生成布局配置
 */
export const attrConfigHandle = () => {
  // 生成模式配置
  const modes = () => {
    return {
      // 默认模式，包括：拖拽画布、缩放画布、拖拽节点
      default: ['drag-canvas', 'zoom-canvas', 'drag-node'],
    }
  }
  // 生成默认节点配置
  const defaultNode = () => {
    return {
      type: 'dom-node', // 节点类型: 矩形 rect/ 默认circle
      size: [80, 30], // 节点大小，此处为 80*30
      anchorPoints: [
        // 节点锚点，此处为左中和右中两个点
        [0, 0.5],
        [1, 0.5],
      ],
    }
  }
  // 生成默认边配置
  const defaultEdge = () => {
    return {
      type: 'cubic-horizontal', // 边的类型，此处为水平方向的曲线
      /*  通过配置边的 style 属性来设置弯曲半径和到端节点的最小距离 */
      style: {
        radius: 5, // 弯曲半径
        offset: 10, // 到端节点的最小距离
        endArrow: true, // 是否显示箭头
        /* 设置其他样式 */
        stroke: '#2c3e50', // 边的颜色
      },
    }
  }
  // 生成布局配置
  const layout = () => {
    return {
      type: 'compactBox', // 布局类型，此处为紧凑型盒子布局
      direction: 'LR', // 布局方向，此处为从左到右
      getId: function getId(d: { id: string }) {
        // 获取节点 id 的回调函数
        return d.id
      },
      getHeight: function getHeight() {
        // 获取每个节点的高度
        return 16
      },
      getWidth: function getWidth() {
        // 获取每个节点的宽度
        return 16
      },
      getVGap: function getVGap() {
        // 获取每个节点的垂直间隙
        return 30
      },
      getHGap: function getHGap() {
        // 获取每个节点的水平间隙
        return 50
      },
    }
  }
  return {
    modes,
    defaultNode,
    defaultEdge,
    layout,
  }
}

./registerNode.ts

import TreeNodeHtml from '@/views/featureManage/featureTree/topologyToolKit/TreeNodeHtml.vue'
import { createApp } from 'vue'
/**
 * 绘制图形
 * 参数介绍:
 * @param cfg:节点的配置项
 * @param group: 图形分组，节点中的图形对象的容器
 * @returns 返回以下图形
 * featureTreeShape -创建特征树形状
 */
export const drawShape = (cfg: any) => {
  const nodeWidth = cfg.size[0]
  const nodeHeight = cfg.size[1]
  // 创建特征树形状
  const featureTreeShape = (cfg: any, group: any) => {
    const container = document.createElement('div')
    const app = createApp(TreeNodeHtml, { domNodeMsg: { ...cfg } })
    app.mount(container)
    const shape = group.addShape('dom', {
      attrs: {
        width: nodeWidth,
        height: nodeHeight,
        html: container.innerHTML,
      },
      name: 'dom-shape',
    })
    return shape
  }

  return {
    featureTreeShape,
  }
}

[TreeNodeHtml.vue] 自定义节点html渲染

<template>
  <div class="status-node" :style="nodeStyle()">
    <div :id="domNodeMsg.id" class="dom-node">
      <span style="cursor: pointer">{{ domNodeMsg.name }}</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { attrConfigHandle } from './attrConfig'

const props = defineProps(['domNodeMsg'])
const domNode = ref(props.domNodeMsg)

const nodeStyle = () => {
  return attrConfigHandle().nodeLevelColor[domNode.value.featureCategory]
}
</script>

<style scoped>
.status-node {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  text-align: center;
  font-size: 12px;
  padding: 0px 5px;
  color: #fff;
  .dom-node {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}
</style>

./attrConfig.ts

/**
 * 节点配置
 * @returns
 */
export const attrConfigHandle = () => {
  // 节点等级样式配置
  const nodeLevelColor: any = {
    FIRST_STAGE: {
      background: '#1b8a0f',
    },
    SECOND_STAGE: {
      background: '#5b8ff9',
    },
    THIRD_STAGE: {
      background: '#ff9d00',
    },
    FOURTH_STAGE: {
      background: '#b09a7f',
    },
    FIFTH_STAGE: {
      background: '#a27fb0',
    },
  }
  return {
    nodeLevelColor,
  }
}