feat: vue3支持使用useTeleport

packages/x6-vue-shape/src/index.ts

@@ -3,3 +3,4 @@ import './hook'
 export * from './node'
 export * from './view'
 export * from './registry'
+export * from './teleport'

packages/x6-vue-shape/src/teleport.ts

@@ -0,0 +1,97 @@
+import { defineComponent, h, reactive, isVue3, Vue } from 'vue-demi'
+import { Graph, NodeView } from '@antv/x6'
+import { VueShape } from './node'
+import { VueShapeView } from './view'
+
+export function useTeleport(uniqViewId: string) {
+  if (isVue3) {
+    const { Teleport, markRaw, Fragment, VNode, VNodeData } = Vue as any
+    const action: any = 'vue'
+
+    const items = reactive<{ [key: string]: any }>({})
+
+    const TeleportContainer = defineComponent({
+      setup() {
+        return () =>
+          h(
+            Fragment,
+            {},
+            Object.keys(items).map((id) => h(items[id])),
+          )
+      },
+    })
+
+    const connect = (
+      id: string,
+      node: VueShape,
+      graph: Graph,
+      component: any,
+      getContainer: () => HTMLDivElement,
+    ) => {
+      items[id] = markRaw(
+        defineComponent({
+          render: () =>
+            (getContainer()
+              ? h(Teleport, { to: getContainer() } as typeof VNodeData, [
+                  h(component),
+                ])
+              : null) as typeof VNode,
+          provide: () => ({
+            getGraph: () => graph,
+            getNode: () => node,
+          }),
+        }),
+      )
+    }
+    const disconnect = (id: string) => {
+      delete items[id]
+    }
+
+    class VuePortalShapeView extends NodeView<VueShape> {
+      init() {
+        super.init()
+        const targetId = `${this.graph.view.cid}:${this.cell.id}`
+        this.cell.on('removed', () => {
+          disconnect(targetId)
+        })
+        const component = this.graph.hook.getVueComponent(this.cell)
+        // 这里需要将当前View的cell以及graph还有component等对象存储起来给TeleportContainer使用
+        connect(
+          targetId,
+          this.cell,
+          this.graph,
+          component,
+          this.getComponentContainer.bind(this),
+        )
+      }
+      getComponentContainer() {
+        return this.cell.prop('useForeignObject') === false
+          ? (this.selectors.content as SVGElement)
+          : (this.selectors.foContent as HTMLDivElement)
+      }
+      confirmUpdate(flag: any) {
+        const ret = super.confirmUpdate(flag)
+        return this.handleAction(ret, action, () => {
+          // 这里无需做任何处理，但是，没有这个函数的时候，会卡死...
+        })
+      }
+    }
+    VuePortalShapeView.config({
+      bootstrap: [action],
+      actions: {
+        component: action,
+      },
+    })
+
+    NodeView.registry.register(uniqViewId, VuePortalShapeView, true)
+
+    return TeleportContainer
+  }
+  // 如果是vue2就默认输出一个警告信息
+  console.warn('useTeleport should run in vue3')
+  // 或者拿默认的view注册一个，保证这个api是可用状态，不至于用户使用了，但是报错
+  NodeView.registry.register(uniqViewId, VueShapeView, true)
+  return defineComponent(() => null)
+}
+
+export default useTeleport

sites/x6-sites/docs/tutorial/advanced/react.en.md

@@ -393,6 +393,34 @@ export default {
 
 [详细 demo](https://codesandbox.io/s/vue-shape-8ciig)
 
+**提升 Vue 节点挂载性能**
+
+当要挂载的 Vue 组件节点数量非常多时，挂载时长会比较长，此时可以通过 `@antv/x6-vue-shape` 提供的 `useTeleport`来提升节点的挂载性能（由于使用了vue3内置的Teleport组件，只在vue3可用）。具体做法为：
+
+```tsx
+import { useTeleport } from '@antv/x6-react-shape'
+
+const UNIQ_GRAPH_ID = 'UNIQ_GRAPH_ID'
+
+const TeleportContainer = useTeleport(UNIQ_GRAPH_ID)
+
+graph.addNode({
+  id: "1",
+  shape: "my-count",
+  view: UNIQ_GRAPH_ID, // 需要指定 view 属性为定义的标识
+  x: 400,
+  y: 150,
+  width: 150,
+  height: 100,
+  data: {
+    num: 0,
+  },
+});
+
+{/* 在原有的 Vue 树中挂载 TeleportContainer */}
+<TeleportContainer />
+```
+
 [[warning]]
 | 需要注意的是，在渲染 `vue` 组件的过程中用到了运行时编译，所以需要在 `vue.config.js` 中启用 `runtimeCompiler: true` 配置。同样当 `component` 为 Vue 组件或函数时，将不能通过 `graph.JSON()`和`graph.fromJSON()` 方法正确导出和导入画布数据，因此我们提供了 `Graph.registerVueComponent(...)` 来解决这个问题。
 

sites/x6-sites/docs/tutorial/advanced/react.zh.md

@@ -393,6 +393,34 @@ export default {
 
 [详细 demo](https://codesandbox.io/s/vue-shape-8ciig)
 
+**提升 Vue 节点挂载性能**
+
+当要挂载的 Vue 组件节点数量非常多时，挂载时长会比较长，此时可以通过 `@antv/x6-vue-shape` 提供的 `useTeleport`来提升节点的挂载性能（由于使用了vue3内置的Teleport组件，只在vue3可用）。具体做法为：
+
+```tsx
+import { useTeleport } from '@antv/x6-react-shape'
+
+const UNIQ_GRAPH_ID = 'UNIQ_GRAPH_ID'
+
+const TeleportContainer = useTeleport(UNIQ_GRAPH_ID)
+
+graph.addNode({
+  id: "1",
+  shape: "my-count",
+  view: UNIQ_GRAPH_ID, // 需要指定 view 属性为定义的标识
+  x: 400,
+  y: 150,
+  width: 150,
+  height: 100,
+  data: {
+    num: 0,
+  },
+});
+
+{/* 在原有的 Vue 树中挂载 TeleportContainer */}
+<TeleportContainer />
+```
+
 [[warning]]
 | 需要注意的是，在渲染 `vue` 组件的过程中用到了运行时编译，所以需要在 `vue.config.js` 中启用 `runtimeCompiler: true` 配置。同样当 `component` 为 Vue 组件或函数时，将不能通过 `graph.JSON()`和`graph.fromJSON()` 方法正确导出和导入画布数据，因此我们提供了 `Graph.registerVueComponent(...)` 来解决这个问题。