https://v3.cn.vuejs.org/guide/teleport.html
支持将子节点渲染到组件外部。
所以可以考虑将子节点渲染到vue-shape的foConten元素里面去。

优点：

1. 一方面提升渲染性能不用在每次renderVueComponent的时候createApp再mount。
2. 另一方面，这个vue的组件实际上是在当前用户空间，更新的时候或许可以交给自定义的组件处理。根本不用去操作foContent

https://x6.antv.vision/en/docs/tutorial/basic/group/#%E5%9F%BA%E7%A1%80%E5%B5%8C%E5%A5%97

https://github.com/lloydzhou/x6-html-shape

import createRender from 'x6-html-shape/dist/vue'

const render = createRender(Component)

register({
  shape: 'vue3-node',
  render,
  width: 100,
  height: 40,
})

• readme里面的手绘图使用组件渲染出来。
• 增加几个场景（流程图/ER图...）

使用vue-shape

1. 利用x6 graph和x6-vue-shape管理图关联关系
2. x6-vue-shape内部的UI组件实际上可以和最外层的组件处在同一级

3. 提供useVueShape，可以很容易的自定义一个vue组件定制出来的节点。
4. 使用useCellEvent，可以比较方便的给当前节点绑定事件。

const CustomNode = defineComponent({
  name: 'CustomNode',
  props: [...VueShapeProps, 'otherOptions'],
  inject: [contextSymbol],
  setup(props, context) {
    const cell = useVueShape(props, context)
    useCellEvent('node:click', (e) => context.emit('click', e), { cell })
    return () => null
  }
})

// template
<CustomNode
  v-if="visible"
  primer="circle"
  id="4"
  :x="400" :y="y"
  :attrs="{circle: {fill: '#ddd', stroke: '#333'}, label: {text: 'CustomNode'}}"
  @added="added"
  @click="click"
  @cell:change:position="changed"
>
  <span>Hello</span>
</CustomNode>

使用teleport优化节点，但是一旦设置 node 的visible =false, 然后visible还原为true，此时，修改node的属性（比如移动位置，修改大小）不会触发视图刷新，好像是model层的变化不会被view层接收到了，希望这问题早点能解决。

当前仓库中通过watch指定的字段，然后调用x6的api更新节点。

这种模式代码写得很复杂，而且可能出现有一些属性没有提前监听到的情况。
参考最近新写的这个react hooks的逻辑，更新的时候，尝试使用createNode创建一个新的临时节点，然后通过getProp拿到两个store的数据进行对比再重新更新到画布。

antvis/X6#2834
https://github.com/lloydzhou/antv-x6-react-practice/blob/master/src/lib/hooks.js#L15

升级到2.x版本

Components

• 提供Graph容器以及GraphContext.useContext获取x6的graph对象。可以利用这个对象操作画布，绑定事件。
• 包装Shape作为vue组件＋使用x6-vue-shape封装自定义组件，暴露的组件有：

另外提供帮助函数

• 提供内置的一些组件

• Widgets

TODO

• Stencil支持默认分组（不使用StencilGroup的情况）
• Dnd也作为组件实现
• ContextMenu：实现一个默认的menu，同时暴露一个useContextMenu方便用户定制

这里有一种别的思路，使用自定义渲染器直接渲染x6内置的对象，包括x6的插件等。这个库更加简洁清晰。

vue-x6