From d9e7c7a0b089841f645e019ad85d758066110eab Mon Sep 17 00:00:00 2001
From: bcakmakoglu <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 27 May 2022 00:00:07 +0200
Subject: [PATCH] docs: add teleport example

---
 docs/components/examples/index.ts             |  6 ++
 docs/components/examples/teleport/App.vue     | 67 +++++++++++++++++++
 docs/components/examples/teleport/Sidebar.vue | 10 +++
 docs/components/examples/teleport/index.ts    |  3 +
 docs/components/examples/teleport/style.css   | 52 ++++++++++++++
 docs/src/.vuepress/config.ts                  |  1 +
 docs/src/examples/teleport.md                 | 16 +++++
 7 files changed, 155 insertions(+)
 create mode 100644 docs/components/examples/teleport/App.vue
 create mode 100644 docs/components/examples/teleport/Sidebar.vue
 create mode 100644 docs/components/examples/teleport/index.ts
 create mode 100644 docs/components/examples/teleport/style.css
 create mode 100644 docs/src/examples/teleport.md

diff --git a/docs/components/examples/index.ts b/docs/components/examples/index.ts
index 3fb50965..6c349821 100644
--- a/docs/components/examples/index.ts
+++ b/docs/components/examples/index.ts
@@ -14,6 +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'
 
 export const exampleImports = {
   basic: {
@@ -89,4 +90,9 @@ export const exampleImports = {
     'App.vue': HorizontalApp,
     'initial-elements.js': HorizontalElements,
   },
+  teleport: {
+    'App.vue': TeleportApp,
+    'Sidebar.vue': TeleportSidebar,
+    'style.css': TeleportCSS,
+  },
 }
diff --git a/docs/components/examples/teleport/App.vue b/docs/components/examples/teleport/App.vue
new file mode 100644
index 00000000..d66482e6
--- /dev/null
+++ b/docs/components/examples/teleport/App.vue
@@ -0,0 +1,67 @@
+<script setup>
+import { VueFlow, useVueFlow } from '@braks/vue-flow'
+import { reactive, ref } from 'vue'
+import Sidebar from './Sidebar.vue'
+
+const elements = ref([
+  {
+    id: '1',
+    label: 'Click to teleport',
+    position: { x: 125, y: 0 },
+  },
+  {
+    id: '2',
+    label: 'Click to teleport',
+    position: { x: 250, y: 100 },
+  },
+  {
+    id: '3',
+    label: 'Click to teleport',
+    position: { x: 0, y: 100 },
+  },
+  {
+    id: 'e1-2',
+    source: '1',
+    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" />
+    <Sidebar />
+  </div>
+</template>
diff --git a/docs/components/examples/teleport/Sidebar.vue b/docs/components/examples/teleport/Sidebar.vue
new file mode 100644
index 00000000..e632a47b
--- /dev/null
+++ b/docs/components/examples/teleport/Sidebar.vue
@@ -0,0 +1,10 @@
+<script setup>
+//
+</script>
+
+<template>
+  <aside>
+    <div class="description">Teleport destination</div>
+    <div id="port" class="port"></div>
+  </aside>
+</template>
diff --git a/docs/components/examples/teleport/index.ts b/docs/components/examples/teleport/index.ts
new file mode 100644
index 00000000..82855be9
--- /dev/null
+++ b/docs/components/examples/teleport/index.ts
@@ -0,0 +1,3 @@
+export { default as TeleportApp } from './App.vue?raw'
+export { default as TeleportSidebar } from './Sidebar.vue?raw'
+export { default as TeleportCSS } from './style.css'
diff --git a/docs/components/examples/teleport/style.css b/docs/components/examples/teleport/style.css
new file mode 100644
index 00000000..0c04f63c
--- /dev/null
+++ b/docs/components/examples/teleport/style.css
@@ -0,0 +1,52 @@
+.teleportflow {
+  flex-direction: column;
+  display: flex;
+  height: 100%;
+}
+
+.teleportflow aside {
+  color: white;
+  font-weight: 700;
+  border-right: 1px solid #eee;
+  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);
+}
+
+.teleportflow aside .port > * {
+  position: relative;
+  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);
+}
+
+.teleportflow aside .description {
+  margin-bottom: 10px;
+}
+
+.teleportflow .vue-flow-wrapper {
+  flex-grow: 1;
+  height: 100%;
+}
+
+@media screen and (min-width: 640px) {
+  .teleportflow {
+    flex-direction: row;
+  }
+
+  .teleportflow aside {
+    min-width: 25%;
+  }
+}
+
+@media screen and (max-width: 639px) {
+  .teleportflow aside .port {
+    display: flex;
+    flex-direction: row;
+    gap: 5px;
+  }
+}
diff --git a/docs/src/.vuepress/config.ts b/docs/src/.vuepress/config.ts
index 9fe172ed..1bbbf921 100644
--- a/docs/src/.vuepress/config.ts
+++ b/docs/src/.vuepress/config.ts
@@ -115,6 +115,7 @@ export default defineUserConfig<DefaultThemeOptions>({
             '/examples/interaction',
             '/examples/multi',
             '/examples/horizontal',
+            '/examples/teleport',
             '/examples/pinia',
             '/examples/stress',
           ],
diff --git a/docs/src/examples/teleport.md b/docs/src/examples/teleport.md
new file mode 100644
index 00000000..5d769ee4
--- /dev/null
+++ b/docs/src/examples/teleport.md
@@ -0,0 +1,16 @@
+---
+pageClass: examples
+
+---
+
+# Teleport
+
+Teleport your nodes to another dom element using Vue 3 [`Teleport`](https://vuejs.org/guide/built-ins/teleport.html).
+
+<div class="mt-6">
+  <client-only>
+    <Suspense>
+      <Repl example="teleport"></Repl>
+    </Suspense>
+  </client-only>
+</div>