From 9bde3ed6e893599e4f0c846e24e982e19ba6a243 Mon Sep 17 00:00:00 2001
From: Dave <ci713@qq.com>
Date: Fri, 8 Nov 2024 09:34:27 +0000
Subject: [PATCH] feat(vue-shape): vue-shape's teleport is only registered once

---
 packages/x6-vue-shape/src/teleport.ts | 30 ++++++++++++++++++++++++---
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/packages/x6-vue-shape/src/teleport.ts b/packages/x6-vue-shape/src/teleport.ts
index a6f957f3762..8bbc27fb4ab 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,
+  onBeforeUnmount,
+} 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,
@@ -35,14 +47,25 @@ export function isActive() {
   return active
 }
 
+let itemComponets: any = null
+
 export function getTeleport(): any {
   if (!isVue3) {
     throw new Error('teleport is only available in Vue3')
   }
+
+  if (itemComponets && active) {
+    return null
+  }
+
   active = true
 
-  return defineComponent({
+  itemComponets = defineComponent({
     setup() {
+      onBeforeUnmount(() => {
+        itemComponets = null
+      })
+
       return () =>
         h(
           Fragment,
@@ -51,4 +74,5 @@ export function getTeleport(): any {
         )
     },
   })
+  return itemComponets
 }