From 55de815a39cf3a3fe398ecbe8df681658688f63e Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 10 Jul 2023 18:20:45 +0200
Subject: [PATCH] chore(core): cleanup (#1003)

---
 .../src/components/UserSelection/UserSelection.vue  | 10 +++++-----
 packages/core/src/composables/useViewport.ts        | 13 ++++++++++---
 packages/core/src/container/Pane/Pane.vue           |  2 +-
 3 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/packages/core/src/components/UserSelection/UserSelection.vue b/packages/core/src/components/UserSelection/UserSelection.vue
index a20480fc..03a4a91b 100644
--- a/packages/core/src/components/UserSelection/UserSelection.vue
+++ b/packages/core/src/components/UserSelection/UserSelection.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { useVueFlow } from '../../composables'
+import type { SelectionRect } from '~/types'
 
-const { userSelectionRect } = useVueFlow()
+defineProps<{ userSelectionRect: SelectionRect }>()
 </script>
 
 <script lang="ts">
@@ -15,9 +15,9 @@ export default {
   <div
     class="vue-flow__selection vue-flow__container"
     :style="{
-      width: `${userSelectionRect?.width}px`,
-      height: `${userSelectionRect?.height}px`,
-      transform: `translate(${userSelectionRect?.x}px, ${userSelectionRect?.y}px)`,
+      width: `${userSelectionRect.width}px`,
+      height: `${userSelectionRect.height}px`,
+      transform: `translate(${userSelectionRect.x}px, ${userSelectionRect.y}px)`,
     }"
   />
 </template>
diff --git a/packages/core/src/composables/useViewport.ts b/packages/core/src/composables/useViewport.ts
index 9c79fda9..182ee316 100644
--- a/packages/core/src/composables/useViewport.ts
+++ b/packages/core/src/composables/useViewport.ts
@@ -28,7 +28,7 @@ export function useViewport(state: State, getters: ComputedGetters) {
   const { nodes, d3Zoom, d3Selection, dimensions, translateExtent, minZoom, maxZoom, viewport, snapToGrid, snapGrid, hooks } =
     $(state)
 
-  const { getNodes } = $(getters)
+  const { getNodes } = getters
 
   const nodesInitialized = ref(false)
 
@@ -36,7 +36,14 @@ export function useViewport(state: State, getters: ComputedGetters) {
     nodesInitialized.value = true
   })
 
-  const isReady = computed(() => !!d3Zoom && !!d3Selection && !!dimensions.width && !!dimensions.height && nodesInitialized.value)
+  const isReady = computed(
+    () =>
+      !!d3Zoom &&
+      !!d3Selection &&
+      !!dimensions.width &&
+      !!dimensions.height &&
+      (getNodes.value.length ? nodesInitialized.value : true),
+  )
 
   function zoom(scale: number, duration?: number) {
     if (d3Selection && d3Zoom) {
@@ -89,7 +96,7 @@ export function useViewport(state: State, getters: ComputedGetters) {
             return
           }
 
-          const nodesToFit: GraphNode[] = (options.includeHiddenNodes ? nodes : getNodes).filter((node) => {
+          const nodesToFit: GraphNode[] = (options.includeHiddenNodes ? nodes : getNodes.value).filter((node) => {
             const initialized = node.initialized && node.dimensions.width && node.dimensions.height
             let shouldInclude = true
 
diff --git a/packages/core/src/container/Pane/Pane.vue b/packages/core/src/container/Pane/Pane.vue
index ccb0982c..3ad76d78 100644
--- a/packages/core/src/container/Pane/Pane.vue
+++ b/packages/core/src/container/Pane/Pane.vue
@@ -264,7 +264,7 @@ export default {
     @mouseleave="onMouseLeave"
   >
     <slot />
-    <UserSelection v-if="userSelectionActive && userSelectionRect" />
+    <UserSelection v-if="userSelectionActive && userSelectionRect" :user-selection-rect="userSelectionRect" />
     <NodesSelection v-if="nodesSelectionActive && getSelectedNodes.length" />
   </div>
 </template>