docs: improve teleport example with transitions

docs/components/examples/teleport/App.vue

@@ -16,14 +16,14 @@ const elements = ref([
     id: '2',
     label: 'Click to teleport',
     type: 'teleportable',
-    position: { x: 250, y: 100 },
+    position: { x: 350, y: 200 },
     data: {},
   },
   {
     id: '3',
     label: 'Click to teleport',
     type: 'teleportable',
-    position: { x: 0, y: 100 },
+    position: { x: 0, y: 200 },
     data: {},
   },
   {

docs/components/examples/teleport/TeleportableNode.vue

@@ -12,34 +12,64 @@ const props = defineProps({
 const { edges, getNode } = useVueFlow()
 
 const teleport = ref(null)
+const transition = ref(false)
 
-const onClick = () => {
-  /**
-   * specify a selector to teleport to
-   *
-   * teleported elements still behave like they're at their position before,
-   * i.e. if they emit events, they will still emit them up their regular tree
-   */
-  const target = teleport.value ? null : '#port'
+/**
+ * specify a selector to teleport to
+ *
+ * teleported elements still behave like they're at their position before,
+ * i.e. if they emit events, they will still emit them up their regular tree
+ */
+const onClick = (destination) => {
+  const node = getNode.value(props.id)
 
-  // teleport to target or disable teleport
-  teleport.value = target
+  transition.value = true
+
+  // save current teleport destination to data of node
+  node.data.destination = destination
 
   // hide connected edges when teleporting
-  const connectedEdges = getConnectedEdges([getNode.value(props.id)], edges.value)
+  const connectedEdges = getConnectedEdges([node], edges.value)
 
-  console.log(connectedEdges)
+  // if destination is not null, hide edges immediately
+  // check if nodes connected to edge are teleported and hide edge if one of them is
+  if (destination) {
+    connectedEdges.forEach(
+      (edge) => (edge.hidden = !!getNode.value(edge.source).data.destination || !!getNode.value(edge.target).data.destination),
+    )
+  }
 
-  connectedEdges.forEach((edge) => (edge.hidden = !!target))
+  setTimeout(() => {
+    // teleport to destination or disable teleport
+    teleport.value = destination
+
+    setTimeout(() => {
+      transition.value = false
+
+      // if destination is null, defer hiding edges until node is teleported back
+      if (!destination) {
+        connectedEdges.forEach(
+          (edge) =>
+            (edge.hidden = !!getNode.value(edge.source).data.destination || !!getNode.value(edge.target).data.destination),
+        )
+      }
+    }, 500)
+  }, 500)
 }
 </script>
 
 <template>
   <teleport :disabled="!teleport" :to="teleport">
-    <div class="teleportable" @click.prevent="onClick">
-      <Handle type="target" :position="Position.Top" />
-      Click to teleport
-      <Handle type="source" :position="Position.Bottom" />
-    </div>
+    <transition name="fade">
+      <div v-if="!transition" class="teleportable">
+        <Handle type="target" :position="Position.Top" />
+        [Node {{ id }}]
+        <div class="buttons">
+          <div v-if="teleport !== '#port'" class="button" @click.prevent="onClick('#port')">Teleport To Sidebar</div>
+          <div v-if="teleport !== null" class="button" @click.prevent="onClick(null)">Teleport To Main Graph</div>
+        </div>
+        <Handle type="source" :position="Position.Bottom" />
+      </div>
+    </transition>
   </teleport>
 </template>

docs/components/examples/teleport/style.css

@@ -45,8 +45,8 @@
 
 @media screen and (max-width: 639px) {
   .teleportflow aside .port {
-    display: flex;
-    flex-direction: row;
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 5px;
   }
 }
@@ -58,3 +58,37 @@
   border-radius: 10px;
   color: black
 }
+
+.teleportable .buttons {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin-top: 5px;
+  gap: 5px;
+}
+
+.teleportable .buttons .button {
+  cursor: pointer;
+  padding: 5px 10px;
+  border: 1px solid black;
+  border-radius: 10px;
+  color: black;
+  font-weight: 700;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+}
+
+.teleportable .buttons .button:hover {
+  background: black;
+  color: white;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}