From 10af4848679fc3c59e1bca53d2689734733bf161 Mon Sep 17 00:00:00 2001
From: Dave <ci713@qq.com>
Date: Thu, 7 Nov 2024 10:44:29 +0000
Subject: [PATCH] feat(vue-shape): export `clearItemsCache`, `VueNodeTeleport`

---
 packages/x6-vue-shape/src/teleport.ts | 34 +++++++++++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/packages/x6-vue-shape/src/teleport.ts b/packages/x6-vue-shape/src/teleport.ts
index a6f957f3762..6cba159e71a 100644
--- a/packages/x6-vue-shape/src/teleport.ts
+++ b/packages/x6-vue-shape/src/teleport.ts
@@ -1,4 +1,13 @@
-import { defineComponent, h, reactive, isVue3, Teleport, markRaw, Fragment } from 'vue-demi'
+import {
+  defineComponent,
+  h,
+  reactive,
+  isVue3,
+  Teleport,
+  markRaw,
+  Fragment,
+  onMounted,
+} from 'vue-demi'
 import { Graph } from '@antv/x6'
 import { VueShape } from './node'
 
@@ -15,7 +24,10 @@ export function connect(
   if (active) {
     items[id] = markRaw(
       defineComponent({
-        render: () => h(Teleport, { to: container } as any, [h(component, { node, graph })]),
+        render: () =>
+          h(Teleport, { to: container } as any, [
+            h(component, { node, graph }),
+          ]),
         provide: () => ({
           getNode: () => node,
           getGraph: () => graph,
@@ -31,6 +43,12 @@ export function disconnect(id: string) {
   }
 }
 
+export function clearItemsCache() {
+  Object.keys(items).forEach((key) => {
+    delete items[key]
+  })
+}
+
 export function isActive() {
   return active
 }
@@ -52,3 +70,15 @@ export function getTeleport(): any {
     },
   })
 }
+
+export const VueNodeTeleport = defineComponent({
+  name: 'VueNodeTeleport',
+  setup() {
+    onMounted(() => {
+      clearItemsCache()
+    })
+
+    const TeleportContainer = getTeleport()
+    return () => h(TeleportContainer)
+  },
+})