chore(core): cleanup (#1003)

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>

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
 

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>