refactor(core): pass renderers to viewport cmp as slots

Author: bcakmakoglu

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>

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 {

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>