From 0d35f1c7e3c24407241fab6f24cc66c0fcaf2c95 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 24 Apr 2022 00:11:25 +0200
Subject: [PATCH] feat(nodes): Add teleport option to nodes

# What's changed?

* Add option to set a teleport target to nodes
---
 .../src/components/Nodes/NodeWrapper.vue      | 70 ++++++++++---------
 packages/vue-flow/src/types/node.ts           |  5 +-
 2 files changed, 40 insertions(+), 35 deletions(-)

diff --git a/packages/vue-flow/src/components/Nodes/NodeWrapper.vue b/packages/vue-flow/src/components/Nodes/NodeWrapper.vue
index 77168670..34bf2078 100644
--- a/packages/vue-flow/src/components/Nodes/NodeWrapper.vue
+++ b/packages/vue-flow/src/components/Nodes/NodeWrapper.vue
@@ -246,38 +246,40 @@ export default {
 </script>
 
 <template>
-  <div
-    ref="nodeElement"
-    :class="getClass"
-    :style="getStyle"
-    :data-id="id"
-    @mouseenter="onMouseEnter"
-    @mousemove="onMouseMove"
-    @mouseleave="onMouseLeave"
-    @contextmenu="onContextMenu"
-    @click="onSelectNode"
-    @dblclick="onDoubleClick"
-  >
-    <component
-      :is="type"
-      :id="node.id"
-      :type="node.type"
-      :data="node.data"
-      :selected="!!node.selected"
-      :connectable="connectable"
-      :position="node.position"
-      :computed-position="node.computedPosition"
-      :dimensions="node.dimensions"
-      :is-valid-target-pos="node.isValidTargetPos"
-      :is-valid-source-pos="node.isValidSourcePos"
-      :parent-node="node.parentNode"
-      :dragging="!!node.dragging"
-      :z-index="node.computedPosition.z"
-      :target-position="node.targetPosition"
-      :source-position="node.sourcePosition"
-      :label="node.label"
-      :drag-handle="node.dragHandle"
-      :node-element="nodeElement"
-    />
-  </div>
+  <Teleport :disabled="!node.teleport" :to="node.teleport">
+    <div
+      ref="nodeElement"
+      :class="getClass"
+      :style="getStyle"
+      :data-id="id"
+      @mouseenter="onMouseEnter"
+      @mousemove="onMouseMove"
+      @mouseleave="onMouseLeave"
+      @contextmenu="onContextMenu"
+      @click="onSelectNode"
+      @dblclick="onDoubleClick"
+    >
+      <component
+        :is="type"
+        :id="node.id"
+        :type="node.type"
+        :data="node.data"
+        :selected="!!node.selected"
+        :connectable="connectable"
+        :position="node.position"
+        :computed-position="node.computedPosition"
+        :dimensions="node.dimensions"
+        :is-valid-target-pos="node.isValidTargetPos"
+        :is-valid-source-pos="node.isValidSourcePos"
+        :parent-node="node.parentNode"
+        :dragging="!!node.dragging"
+        :z-index="node.computedPosition.z"
+        :target-position="node.targetPosition"
+        :source-position="node.sourcePosition"
+        :label="node.label"
+        :drag-handle="node.dragHandle"
+        :node-element="nodeElement"
+      />
+    </div>
+  </Teleport>
 </template>
diff --git a/packages/vue-flow/src/types/node.ts b/packages/vue-flow/src/types/node.ts
index ec99f633..da289e6b 100644
--- a/packages/vue-flow/src/types/node.ts
+++ b/packages/vue-flow/src/types/node.ts
@@ -1,4 +1,4 @@
-import type { Component, VNode } from 'vue'
+import type { Component, TeleportProps, VNode } from 'vue'
 import type { BaseElement, Dimensions, ElementData, Position, SnapGrid, XYPosition, XYZPosition } from './flow'
 import type { DefaultNodeTypes, NodeComponent } from './components'
 import type { HandleElement, ValidConnectionFunc } from './handle'
@@ -58,6 +58,9 @@ export interface Node<Data = ElementData> extends BaseElement<Data> {
 
   /** overwrites current node type */
   template?: NodeComponent
+
+  /** teleports node element to specified dom location */
+  teleport?: TeleportProps['to']
 }
 
 export interface GraphNode<Data = ElementData> extends Node<Data> {