From cc9f4fb24499e2c3f374fc46449cbe05114b56ed Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 4 Feb 2024 21:28:30 +0100
Subject: [PATCH] refactor(core): pass renderers to viewport cmp as slots

---
 packages/core/src/container/Viewport/Transform.vue | 12 +-----------
 packages/core/src/container/Viewport/Viewport.vue  |  5 +++--
 packages/core/src/container/VueFlow/VueFlow.vue    |  8 ++++++++
 3 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/packages/core/src/container/Viewport/Transform.vue b/packages/core/src/container/Viewport/Transform.vue
index dc523932..9edf061f 100644
--- a/packages/core/src/container/Viewport/Transform.vue
+++ b/packages/core/src/container/Viewport/Transform.vue
@@ -1,7 +1,5 @@
 <script lang="ts" setup>
 import { useVueFlow } from '../../composables'
-import NodeRenderer from '../NodeRenderer/NodeRenderer.vue'
-import EdgeRenderer from '../EdgeRenderer/EdgeRenderer.vue'
 
 const { viewport } = useVueFlow()
 </script>
@@ -16,16 +14,8 @@ export default {
 <template>
   <div
     class="vue-flow__transformationpane vue-flow__container"
-    :style="{
-      transform: `translate(${viewport.x}px,${viewport.y}px) scale(${viewport.zoom})`,
-    }"
+    :style="{ transform: `translate(${viewport.x}px,${viewport.y}px) scale(${viewport.zoom})` }"
   >
-    <EdgeRenderer />
-
-    <div class="vue-flow__edge-labels" />
-
-    <NodeRenderer />
-
     <slot />
   </div>
 </template>
diff --git a/packages/core/src/container/Viewport/Viewport.vue b/packages/core/src/container/Viewport/Viewport.vue
index 3a4c10c2..4175ffe4 100644
--- a/packages/core/src/container/Viewport/Viewport.vue
+++ b/packages/core/src/container/Viewport/Viewport.vue
@@ -6,10 +6,11 @@ import { onMounted, ref, watch } from 'vue'
 import { toRef } from '@vueuse/core'
 import type { CoordinateExtent, D3ZoomHandler, ViewportTransform } from '../../types'
 import { PanOnScrollMode } from '../../types'
-import { useKeyPress, useVueFlow } from '../../composables'
+import { useKeyPress } from '../../composables/useKeyPress'
+import { useVueFlow } from '../../composables/useVueFlow'
+import { useResizeHandler } from '../../composables/useResizeHandler'
 import { clamp, isMacOs, warn } from '../../utils'
 import Pane from '../Pane/Pane.vue'
-import { useResizeHandler } from '../../composables/useResizeHandler'
 import Transform from './Transform.vue'
 
 const {
diff --git a/packages/core/src/container/VueFlow/VueFlow.vue b/packages/core/src/container/VueFlow/VueFlow.vue
index 85d64b33..70945184 100644
--- a/packages/core/src/container/VueFlow/VueFlow.vue
+++ b/packages/core/src/container/VueFlow/VueFlow.vue
@@ -9,6 +9,8 @@ import { useOnInitHandler } from '../../composables/useOnInitHandler'
 import { useWatchProps } from '../../composables/useWatchProps'
 import { useVueFlow } from '../../composables/useVueFlow'
 import { useHooks } from '../../store/hooks'
+import EdgeRenderer from '../EdgeRenderer/EdgeRenderer.vue'
+import NodeRenderer from '../NodeRenderer/NodeRenderer.vue'
 
 const props = withDefaults(defineProps<FlowProps>(), {
   snapToGrid: undefined,
@@ -97,6 +99,12 @@ export default {
 <template>
   <div ref="vueFlowRef" class="vue-flow">
     <Viewport>
+      <EdgeRenderer />
+
+      <div class="vue-flow__edge-labels" />
+
+      <NodeRenderer />
+
       <!-- This slot is affected by zooming & panning -->
       <slot name="zoom-pane" />
     </Viewport>