From 74bc231844f2abfed8eeb91eeee71ef25128fb1b Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 30 Mar 2022 18:35:46 +0200
Subject: [PATCH] fix: short circuit passing slots to renderer

---
 .../TransformationPane/TransformationPane.vue        |  2 +-
 package/src/container/VueFlow/VueFlow.vue            | 12 ++++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/package/src/container/TransformationPane/TransformationPane.vue b/package/src/container/TransformationPane/TransformationPane.vue
index dd6f0b67..463472d6 100644
--- a/package/src/container/TransformationPane/TransformationPane.vue
+++ b/package/src/container/TransformationPane/TransformationPane.vue
@@ -34,7 +34,7 @@ const transform = computed(() => `translate(${store.transform[0]}px,${store.tran
 </script>
 <template>
   <div :key="`transformation-pane-${id}`" class="vue-flow__transformation-pane vue-flow__container" :style="{ transform }">
-    <NodeRenderer v-if="store.getNodes.length" :key="`node-renderer-${id}`" />
+    <NodeRenderer :key="`node-renderer-${id}`" />
     <EdgeRenderer :key="`edge-renderer-${id}`" />
     <slot />
   </div>
diff --git a/package/src/container/VueFlow/VueFlow.vue b/package/src/container/VueFlow/VueFlow.vue
index 952e9e34..4f5f2c8c 100644
--- a/package/src/container/VueFlow/VueFlow.vue
+++ b/package/src/container/VueFlow/VueFlow.vue
@@ -86,11 +86,15 @@ export default {
 <template>
   <div class="vue-flow">
     <ZoomPane :key="`renderer-${id}`">
-      <template v-for="nodeName of Object.keys(getNodeTypes)" :key="`node-${nodeName}-${id}`">
-        <slot :name="`node-${nodeName}`" />
+      <template #nodes>
+        <template v-for="nodeName of Object.keys(getNodeTypes)" :key="`node-${nodeName}-${id}`">
+          <slot :name="`node-${nodeName}`" />
+        </template>
       </template>
-      <template v-for="edgeName of Object.keys(getEdgeTypes)" :key="`edge-${edgeName}-${id}`">
-        <slot :name="`edge-${edgeName}`" />
+      <template #edges>
+        <template v-for="edgeName of Object.keys(getEdgeTypes)" :key="`edge-${edgeName}-${id}`">
+          <slot :name="`edge-${edgeName}`" />
+        </template>
       </template>
       <slot name="connection-line" />
       <slot name="zoom-pane" />