From 47bc652c468deaa994f2a3a407a86b434f59c509 Mon Sep 17 00:00:00 2001
From: bcakmakoglu <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 16 Jun 2022 12:14:26 +0200
Subject: [PATCH] docs: use `updateNodeInternals` in teleport example

---
 .../components/examples/teleport/TeleportableNode.vue | 11 +----------
 docs/components/examples/teleport/useTransition.js    |  6 ++----
 2 files changed, 3 insertions(+), 14 deletions(-)

diff --git a/docs/components/examples/teleport/TeleportableNode.vue b/docs/components/examples/teleport/TeleportableNode.vue
index b89e578d..e1c4a8e9 100644
--- a/docs/components/examples/teleport/TeleportableNode.vue
+++ b/docs/components/examples/teleport/TeleportableNode.vue
@@ -1,6 +1,5 @@
 <script setup>
 import { Handle, Position } from '@braks/vue-flow'
-import { watch } from 'vue'
 import { useTransition } from './useTransition.js'
 
 const props = defineProps({
@@ -8,17 +7,9 @@ const props = defineProps({
     type: String,
     required: true,
   },
-  nodeElement: {
-    type: Object,
-    required: false,
-  },
 })
 
-const { animation, transition, teleport, nodeElement, onClick } = useTransition(props.id, props.nodeElement)
-
-watch(props, () => {
-  if (props.nodeElement) nodeElement.value = props.nodeElement
-})
+const { animation, transition, teleport, onClick } = useTransition(props.id)
 
 const changeAnimation = () => {
   animation.value = animation.value === 'fade' ? 'shrink' : 'fade'
diff --git a/docs/components/examples/teleport/useTransition.js b/docs/components/examples/teleport/useTransition.js
index 87856553..21eeedb1 100644
--- a/docs/components/examples/teleport/useTransition.js
+++ b/docs/components/examples/teleport/useTransition.js
@@ -8,12 +8,11 @@ import { nextTick, ref } from 'vue'
  * Otherwise edges do not connect properly
  */
 export const useTransition = (id) => {
-  const nodeElement = ref()
   const animation = ref('fade')
   const transition = ref(false)
   const teleport = ref(null)
 
-  const { updateNodeDimensions, getNode, edges } = useVueFlow()
+  const { updateNodeInternals, getNode, edges } = useVueFlow()
 
   /**
    * specify a selector to teleport to
@@ -48,7 +47,7 @@ export const useTransition = (id) => {
         setTimeout(() => {
           // if destination is null, defer hiding edges until node is teleported back
           if (!destination) {
-            updateNodeDimensions([{ id, nodeElement: nodeElement.value, forceUpdate: true }])
+            updateNodeInternals([id])
 
             nextTick(() => {
               onFinish()
@@ -103,7 +102,6 @@ export const useTransition = (id) => {
     animation,
     transition,
     teleport,
-    nodeElement,
     onClick,
   }
 }