docs: add teleportable example

docs/components/examples/index.ts

@@ -14,7 +14,7 @@ import { HiddenApp } from './hidden'
 import { InteractionApp, InteractionCSS, InteractionControls } from './interaction'
 import { MultiApp, MultiCSS, MultiFlow } from './multi'
 import { HorizontalApp, HorizontalElements } from './horizontal'
-import { TeleportApp, TeleportSidebar, TeleportCSS } from './teleport'
+import { TeleportApp, TeleportCSS, TeleportSidebar, TeleportableNode } from './teleport'
 
 export const exampleImports = {
   basic: {
@@ -93,6 +93,7 @@ export const exampleImports = {
   teleport: {
     'App.vue': TeleportApp,
     'Sidebar.vue': TeleportSidebar,
+    'TeleportableNode.vue': TeleportableNode,
     'style.css': TeleportCSS,
   },
 }

docs/components/examples/teleport/App.vue

@@ -1,23 +1,30 @@
 <script setup>
 import { VueFlow, useVueFlow } from '@braks/vue-flow'
-import { reactive, ref } from 'vue'
+import { ref } from 'vue'
 import Sidebar from './Sidebar.vue'
+import TeleportableNode from './TeleportableNode.vue'
 
 const elements = ref([
   {
     id: '1',
     label: 'Click to teleport',
+    type: 'teleportable',
     position: { x: 125, y: 0 },
+    data: {},
   },
   {
     id: '2',
     label: 'Click to teleport',
+    type: 'teleportable',
     position: { x: 250, y: 100 },
+    data: {},
   },
   {
     id: '3',
     label: 'Click to teleport',
+    type: 'teleportable',
     position: { x: 0, y: 100 },
+    data: {},
   },
   {
     id: 'e1-2',
@@ -25,43 +32,15 @@ const elements = ref([
     target: '2',
   },
 ])
-
-const { onNodeClick } = useVueFlow()
-
-const lastPositions = {}
-
-onNodeClick(({ node, connectedEdges }) => {
-  /**
-   * specify a selector to teleport to
-   * beware that teleports only work after viewpane is ready
-   *
-   * 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 = node.teleport ? null : '#port'
-
-  // teleport to target or disable teleport
-  node.teleport = target
-
-  // hide connected edges when teleporting
-  connectedEdges.forEach((edge) => (edge.hidden = !!target))
-
-  if (!target) {
-    // apply last position (so the transformation gets applied)
-    node.position = lastPositions[node.id]
-  } else {
-    // save last position
-    lastPositions[node.id] = Object.assign({}, { ...node.position })
-
-    // remove current position (so the transformation gets removed)
-    node.position = { x: 0, y: 0 }
-  }
-})
 </script>
 
 <template>
   <div class="teleportflow">
-    <VueFlow v-model="elements" :fit-view-on-init="true" />
+    <VueFlow v-model="elements" :fit-view-on-init="true">
+      <template #node-teleportable="props">
+        <TeleportableNode :id="props.id" />
+      </template>
+    </VueFlow>
     <Sidebar />
   </div>
 </template>

docs/components/examples/teleport/TeleportableNode.vue

@@ -0,0 +1,45 @@
+<script setup>
+import { Handle, Position, getConnectedEdges, useVueFlow } from '@braks/vue-flow'
+import { ref } from 'vue'
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+})
+
+const { edges, getNode } = useVueFlow()
+
+const teleport = ref(null)
+
+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'
+
+  // teleport to target or disable teleport
+  teleport.value = target
+
+  // hide connected edges when teleporting
+  const connectedEdges = getConnectedEdges([getNode.value(props.id)], edges.value)
+
+  console.log(connectedEdges)
+
+  connectedEdges.forEach((edge) => (edge.hidden = !!target))
+}
+</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>
+  </teleport>
+</template>

docs/components/examples/teleport/index.ts

@@ -1,3 +1,4 @@
 export { default as TeleportApp } from './App.vue?raw'
 export { default as TeleportSidebar } from './Sidebar.vue?raw'
+export { default as TeleportableNode } from './TeleportableNode.vue?raw'
 export { default as TeleportCSS } from './style.css'

docs/components/examples/teleport/style.css

@@ -11,8 +11,8 @@
   padding: 15px 10px;
   font-size: 12px;
   background: rgba(16, 185, 129, 0.75);
-  -webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
-  box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
+  -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.3);
+  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.3);
 }
 
 .teleportflow aside .port > * {
@@ -20,8 +20,8 @@
   margin-bottom: 10px;
   cursor: grab;
   font-weight: 500;
-  -webkit-box-shadow: 5px 5px 10px 2px rgba(0,0,0,0.25);
-  box-shadow: 5px 5px 10px 2px rgba(0,0,0,0.25);
+  -webkit-box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.25);
+  box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.25);
 }
 
 .teleportflow aside .description {
@@ -50,3 +50,11 @@
     gap: 5px;
   }
 }
+
+.teleportable {
+  padding: 10px;
+  background: white;
+  border: 1px solid black;
+  border-radius: 10px;
+  color: black
+}