update: invoke until func in zoom pane

* instead of using .then cb we use the invoke func to call the async await and wait for the zoomPaneEl

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

src/container/SelectionPane/SelectionPane.vue

@@ -56,5 +56,5 @@ onMounted(() => {
   <slot></slot>
   <UserSelection v-if="selectionKeyPresed && (store.selectionActive || store.elementsSelectable)" id="user-selection" />
   <NodesSelection v-if="store.nodesSelectionActive" id="nodes-selection" />
-  <div class="vue-flow__pane" @click="onClick" @contextmenu="onContextMenu" @wheel="onWheel" />
+  <div class="vue-flow__pane" @click.self="onClick" @contextmenu="onContextMenu" @wheel="onWheel" />
 </template>

src/container/ZoomPane/ZoomPane.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { D3ZoomEvent, zoom, zoomIdentity, ZoomTransform } from 'd3-zoom'
-import { get } from '@vueuse/core'
+import { get, invoke } from '@vueuse/core'
 import { pointer, select } from 'd3-selection'
 import { FlowTransform, KeyCode, PanOnScrollMode } from '../../types'
 import { useHooks, useKeyPress, useStore, useZoomPanHelper } from '../../composables'
@@ -57,9 +57,8 @@ const d3Zoom = ref(zoom<HTMLDivElement, any>().scaleExtent([store.minZoom, store
 const d3Selection = ref()
 store.transform = [transform.value.x, transform.value.y, transform.value.zoom]
 
-until(zoomPaneEl)
+invoke(async () => {
-  .toBeTruthy()
+  await until(zoomPaneEl).toBeTruthy()
-  .then(() => {
   const d3z = get(d3Zoom)!
   d3Selection.value = select(zoomPaneEl.value).call(d3z)
   const d3s = get(d3Selection)!
@@ -178,7 +177,7 @@ until(zoomPaneEl)
     // default filter for d3-zoom
     return (!event.ctrlKey || event.type === 'wheel') && !event.button
   })
-  })
+})
 
 const { width, height } = useElementBounding(zoomPaneEl)
 store.dimensions = {
@@ -194,7 +193,7 @@ watch(transform, (val) => (store.transform = [val.x, val.y, val.zoom]))
 
 const { zoomIn, zoomOut, zoomTo, transform: setTransform, fitView } = useZoomPanHelper()
 watchOnce(
-  () => width.value && height.value,
+  () => !isNaN(width.value) && width.value > 0 && !isNaN(height.value) && height.value > 0,
   () => {
     hooks.load.trigger({
       fitView: (params = { padding: 0.1 }) => fitView(params),