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,129 +57,128 @@ 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)!
-    const d3z = get(d3Zoom)!
+  d3Selection.value = select(zoomPaneEl.value).call(d3z)
-    d3Selection.value = select(zoomPaneEl.value).call(d3z)
+  const d3s = get(d3Selection)!
-    const d3s = get(d3Selection)!
+  const d3ZoomHandler = d3s.on('wheel.zoom')
-    const d3ZoomHandler = d3s.on('wheel.zoom')
 
-    const updatedTransform = zoomIdentity.translate(clampedX, clampedY).scale(clampedZoom)
+  const updatedTransform = zoomIdentity.translate(clampedX, clampedY).scale(clampedZoom)
-    d3z.transform(d3s, updatedTransform)
+  d3z.transform(d3s, updatedTransform)
-    store.initD3Zoom({ d3Zoom: d3z, d3Selection: d3s, d3ZoomHandler })
+  store.initD3Zoom({ d3Zoom: d3z, d3Selection: d3s, d3ZoomHandler })
-    store.transform = [updatedTransform.x, updatedTransform.y, updatedTransform.k]
+  store.transform = [updatedTransform.x, updatedTransform.y, updatedTransform.k]
 
-    d3z.on('start', (event: D3ZoomEvent<HTMLDivElement, any>) => {
+  d3z.on('start', (event: D3ZoomEvent<HTMLDivElement, any>) => {
-      if (viewChanged(transform.value, event.transform)) {
+    if (viewChanged(transform.value, event.transform)) {
-        const flowTransform = eventToFlowTransform(event.transform)
+      const flowTransform = eventToFlowTransform(event.transform)
-        transform.value = flowTransform
+      transform.value = flowTransform
 
-        hooks.moveStart.trigger(flowTransform)
+      hooks.moveStart.trigger(flowTransform)
-      }
+    }
-    })
-
-    d3z.on('end', (event: D3ZoomEvent<HTMLDivElement, any>) => {
-      if (viewChanged(transform.value, event.transform)) {
-        const flowTransform = eventToFlowTransform(event.transform)
-        transform.value = flowTransform
-
-        hooks.moveEnd.trigger(flowTransform)
-      }
-    })
-
-    useKeyPress(props.selectionKeyCode, (keyPress) => {
-      if (keyPress) {
-        d3z.on('zoom', null)
-      } else {
-        d3z.on('zoom', (event: D3ZoomEvent<HTMLDivElement, any>) => {
-          if (viewChanged(transform.value, event.transform)) {
-            const flowTransform = eventToFlowTransform(event.transform)
-            transform.value = flowTransform
-
-            hooks.move.trigger(flowTransform)
-          }
-        })
-      }
-    })
-
-    useKeyPress(props.zoomActivationKeyCode, (keyPress) => {
-      if (props.panOnScroll && keyPress) {
-        d3s
-          ?.on('wheel', (event: WheelEvent) => {
-            event.preventDefault()
-            event.stopImmediatePropagation()
-
-            const currentZoom = d3s?.property('__zoom').k || 1
-
-            if (event.ctrlKey && props.zoomOnPinch) {
-              const point = pointer(event)
-              // taken from https://github.com/d3/d3-zoom/blob/master/src/zoom.js
-              const pinchDelta = -event.deltaY * (event.deltaMode === 1 ? 0.05 : event.deltaMode ? 1 : 0.002) * 10
-              const zoom = currentZoom * Math.pow(2, pinchDelta)
-              if (d3s) d3z.scaleTo(d3s, zoom, point)
-
-              return
-            }
-
-            // increase scroll speed in firefox
-            // firefox: deltaMode === 1; chrome: deltaMode === 0
-            const deltaNormalize = event.deltaMode === 1 ? 20 : 1
-            const deltaX = props.panOnScrollMode === PanOnScrollMode.Vertical ? 0 : event.deltaX * deltaNormalize
-            const deltaY = props.panOnScrollMode === PanOnScrollMode.Horizontal ? 0 : event.deltaY * deltaNormalize
-
-            if (d3s && props.panOnScrollSpeed)
-              d3z?.translateBy(
-                d3s,
-                -(deltaX / currentZoom) * props.panOnScrollSpeed,
-                -(deltaY / currentZoom) * props.panOnScrollSpeed,
-              )
-          })
-          .on('wheel.zoom', null)
-      } else if (typeof d3ZoomHandler !== 'undefined') {
-        d3s?.on('wheel', null).on('wheel.zoom', d3ZoomHandler)
-      }
-    })
-
-    const keyPress = useKeyPress(props.selectionKeyCode)
-    d3z.filter((event: MouseEvent) => {
-      const pinchZoom = props.zoomOnPinch && event.ctrlKey
-
-      // if all interactions are disabled, we prevent all zoom events
-      if (!props.paneMoveable && !props.zoomOnScroll && !props.panOnScroll && !props.zoomOnDoubleClick && !props.zoomOnPinch)
-        return false
-
-      // during a selection we prevent all other interactions
-      if (keyPress.value) return false
-
-      // if zoom on double click is disabled, we prevent the double click event
-      if (!props.zoomOnDoubleClick && event.type === 'dblclick') return false
-
-      if ((event.target as Element).closest('.nowheel') && event.type === 'wheel') return false
-
-      // when the target element is a node, we still allow zooming
-      if (
-        ((event.target as Element).closest('.vue-flow__node') || (event.target as Element).closest('.vue-flow__edge')) &&
-        event.type !== 'wheel'
-      )
-        return false
-
-      // when the target element is a node selection, we still allow zooming
-      if ((event.target as Element).closest('.vue-flow__nodesselection') && event.type !== 'wheel') return false
-
-      if (!props.zoomOnPinch && event.ctrlKey && event.type === 'wheel') return false
-
-      // when there is no scroll handling enabled, we prevent all wheel events
-      if (!props.zoomOnScroll && !props.panOnScroll && !pinchZoom && event.type === 'wheel') return false
-
-      // if the pane is not movable, we prevent dragging it with mousestart or touchstart
-      if (!props.paneMoveable && (event.type === 'mousedown' || event.type === 'touchstart')) return false
-
-      // default filter for d3-zoom
-      return (!event.ctrlKey || event.type === 'wheel') && !event.button
-    })
   })
 
+  d3z.on('end', (event: D3ZoomEvent<HTMLDivElement, any>) => {
+    if (viewChanged(transform.value, event.transform)) {
+      const flowTransform = eventToFlowTransform(event.transform)
+      transform.value = flowTransform
+
+      hooks.moveEnd.trigger(flowTransform)
+    }
+  })
+
+  useKeyPress(props.selectionKeyCode, (keyPress) => {
+    if (keyPress) {
+      d3z.on('zoom', null)
+    } else {
+      d3z.on('zoom', (event: D3ZoomEvent<HTMLDivElement, any>) => {
+        if (viewChanged(transform.value, event.transform)) {
+          const flowTransform = eventToFlowTransform(event.transform)
+          transform.value = flowTransform
+
+          hooks.move.trigger(flowTransform)
+        }
+      })
+    }
+  })
+
+  useKeyPress(props.zoomActivationKeyCode, (keyPress) => {
+    if (props.panOnScroll && keyPress) {
+      d3s
+        ?.on('wheel', (event: WheelEvent) => {
+          event.preventDefault()
+          event.stopImmediatePropagation()
+
+          const currentZoom = d3s?.property('__zoom').k || 1
+
+          if (event.ctrlKey && props.zoomOnPinch) {
+            const point = pointer(event)
+            // taken from https://github.com/d3/d3-zoom/blob/master/src/zoom.js
+            const pinchDelta = -event.deltaY * (event.deltaMode === 1 ? 0.05 : event.deltaMode ? 1 : 0.002) * 10
+            const zoom = currentZoom * Math.pow(2, pinchDelta)
+            if (d3s) d3z.scaleTo(d3s, zoom, point)
+
+            return
+          }
+
+          // increase scroll speed in firefox
+          // firefox: deltaMode === 1; chrome: deltaMode === 0
+          const deltaNormalize = event.deltaMode === 1 ? 20 : 1
+          const deltaX = props.panOnScrollMode === PanOnScrollMode.Vertical ? 0 : event.deltaX * deltaNormalize
+          const deltaY = props.panOnScrollMode === PanOnScrollMode.Horizontal ? 0 : event.deltaY * deltaNormalize
+
+          if (d3s && props.panOnScrollSpeed)
+            d3z?.translateBy(
+              d3s,
+              -(deltaX / currentZoom) * props.panOnScrollSpeed,
+              -(deltaY / currentZoom) * props.panOnScrollSpeed,
+            )
+        })
+        .on('wheel.zoom', null)
+    } else if (typeof d3ZoomHandler !== 'undefined') {
+      d3s?.on('wheel', null).on('wheel.zoom', d3ZoomHandler)
+    }
+  })
+
+  const keyPress = useKeyPress(props.selectionKeyCode)
+  d3z.filter((event: MouseEvent) => {
+    const pinchZoom = props.zoomOnPinch && event.ctrlKey
+
+    // if all interactions are disabled, we prevent all zoom events
+    if (!props.paneMoveable && !props.zoomOnScroll && !props.panOnScroll && !props.zoomOnDoubleClick && !props.zoomOnPinch)
+      return false
+
+    // during a selection we prevent all other interactions
+    if (keyPress.value) return false
+
+    // if zoom on double click is disabled, we prevent the double click event
+    if (!props.zoomOnDoubleClick && event.type === 'dblclick') return false
+
+    if ((event.target as Element).closest('.nowheel') && event.type === 'wheel') return false
+
+    // when the target element is a node, we still allow zooming
+    if (
+      ((event.target as Element).closest('.vue-flow__node') || (event.target as Element).closest('.vue-flow__edge')) &&
+      event.type !== 'wheel'
+    )
+      return false
+
+    // when the target element is a node selection, we still allow zooming
+    if ((event.target as Element).closest('.vue-flow__nodesselection') && event.type !== 'wheel') return false
+
+    if (!props.zoomOnPinch && event.ctrlKey && event.type === 'wheel') return false
+
+    // when there is no scroll handling enabled, we prevent all wheel events
+    if (!props.zoomOnScroll && !props.panOnScroll && !pinchZoom && event.type === 'wheel') return false
+
+    // if the pane is not movable, we prevent dragging it with mousestart or touchstart
+    if (!props.paneMoveable && (event.type === 'mousedown' || event.type === 'touchstart')) return false
+
+    // default filter for d3-zoom
+    return (!event.ctrlKey || event.type === 'wheel') && !event.button
+  })
+})
+
 const { width, height } = useElementBounding(zoomPaneEl)
 store.dimensions = {
   width: width.value,
@@ -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),