antv/x6使用vue组件渲染节点

1.antv x6 提供了一个独立的包 @antv/x6-vue-shape 来使用 Vue 组件渲染节点。

需要注意的是，x6 的版本要和 x6-vue-shape 的版本匹配，也就是两个包需要用同一个大版本。

npm install @antv/x6-vue-shape --save

2.vue节点组件

<template>
  <div class="rounded-corner">
    <div class="content">
      这是一段文字
    </div>
  </div>
</template>

<script lang="ts" setup>

</script>

<style scoped>
.rounded-corner {
  background-color: purple;
  height: 50px;
  width: 100px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content {
  color: white;
  font-size: 14px;
}
</style>

2.注册vue节点，并创建流程图数据 

<template>
  <div id="container"></div>
</template>
<script lang="ts" setup>
import TestNode from './TestNode.vue'
import { onMounted } from 'vue'
import { Graph } from '@antv/x6'
import { register, getTeleport } from '@antv/x6-vue-shape'
// 填充流程图数据，包括节点和边（data=>nodes=>shape表示节点，此处可以使用自定义的vue节点）
const data = {
  nodes: [
    {
      id: 'node1',
      shape: 'custom-vue-node',
      x: 40,
      y: 40,
    },
    {
      id: 'node2',
      shape: 'custom-vue-node',
      x: 160,
      y: 180,
    },
  ],
  edges: [
    {
      shape: 'edge',
      source: 'node1',
      target: 'node2',
      label: 'x6',
      attrs: {
        // line 是选择器名称，选中的边的 path 元素
        line: {
          stroke: '#8f8f8f',
          strokeWidth: 1,
        },
      },
    },
  ],
}


onMounted(() => {
  // 创建画布
  const graph = new Graph({
    container: document.getElementById('container') as HTMLElement,
    width: 800,
    height: 600,
    background: {
      color: '#F2F7FA',
    },

  })
  // 注册vue组件节点
  register({
    shape: 'custom-vue-node',
    width: 100,
    height: 50,
    component: TestNode,
  })
  // 将节点添加到画布上
  graph.fromJSON(data) // 渲染元素
  graph.centerContent() // 居中显示

})
</script>