chore(core): cleanup initial render

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

packages/core/src/composables/useZoomPanHelper.ts

@@ -134,7 +134,7 @@ async function untilDimensions(dimensions: Dimensions, nodes: GraphNode[]) {
   if ('screen' in window) {
     // if initial nodes are present, wait until the node dimensions have been established
     if (nodes.length > 0) {
-      await until(nodes).toMatch((nodes) => !!nodes.filter((node) => node.initialized).length)
+      await until(nodes).toMatch((nodes) => nodes.filter((node) => node.initialized).length === nodes.length, { flush: 'pre' })
     }
   }
 

packages/core/src/container/Viewport/Transform.vue

@@ -3,7 +3,7 @@ import NodeRenderer from '../NodeRenderer/NodeRenderer.vue'
 import EdgeRenderer from '../EdgeRenderer/EdgeRenderer.vue'
 import type { Dimensions } from '../../types'
 
-const { id, viewport, dimensions, fitViewOnInit, emits, fitView, onNodesInitialized, ...rest } = useVueFlow()
+const { id, viewport, dimensions, emits, onNodesInitialized, ...rest } = useVueFlow()
 
 const untilDimensions = async (dim: Dimensions) => {
   // if ssr we can't wait for dimensions, they'll never really exist
@@ -33,14 +33,10 @@ onMounted(async () => {
     id,
     viewport,
     dimensions,
-    fitViewOnInit,
-    fitView,
     emits,
     onNodesInitialized,
     ...rest,
   })
-
-  fitViewOnInit?.value && fitView()
 })
 </script>
 

packages/core/src/container/Viewport/Viewport.vue

@@ -32,6 +32,7 @@ const {
   connectionStartHandle,
   userSelectionActive,
   paneDragging,
+  viewport,
 } = $(useVueFlow())
 
 const viewportEl = ref<HTMLDivElement>()
@@ -67,6 +68,14 @@ onMounted(() => {
   useEventListener(window, 'resize', setDimensions)
 })
 
+watch(
+  () => viewport,
+  () => {
+    console.log(viewport)
+  },
+  { deep: true },
+)
+
 onMounted(() => {
   const viewportElement = viewportEl.value!
   const bbox = viewportElement.getBoundingClientRect()
@@ -90,16 +99,20 @@ onMounted(() => {
     d3Zoom,
     d3Selection,
     d3ZoomHandler,
-    viewport: { x: updatedTransform.x, y: updatedTransform.y, zoom: updatedTransform.k },
+    viewport: { x: constrainedTransform.x, y: constrainedTransform.y, zoom: constrainedTransform.k },
     viewportRef: viewportElement,
   })
 
-  const onKeyPress = (keyPress: boolean) => {
+  useKeyPress(selectionKeyCode, (keyPress) => {
     selectionKeyPressed = keyPress
+  })
 
-    if (keyPress && userSelectionActive && !isZoomingOrPanning) {
+  const zoomKeyPressed = useKeyPress(zoomActivationKeyCode)
+
+  watchEffect(() => {
+    if (selectionKeyPressed && userSelectionActive && !isZoomingOrPanning) {
       d3Zoom.on('zoom', null)
-    } else if (!keyPress && !userSelectionActive) {
+    } else if (!selectionKeyPressed && !userSelectionActive) {
       d3Zoom.on('zoom', (event: D3ZoomEvent<HTMLDivElement, any>) => {
         setState({ viewport: { x: event.transform.x, y: event.transform.y, zoom: event.transform.k } })
 
@@ -111,14 +124,7 @@ onMounted(() => {
         emits.move({ event, flowTransform })
       })
     }
-  }
-
-  useKeyPress(selectionKeyCode, onKeyPress)
-
-  // initialize
-  onKeyPress(false)
-
-  const zoomKeyPressed = useKeyPress(zoomActivationKeyCode)
+  })
 
   d3Zoom.on('start', (event: D3ZoomEvent<HTMLDivElement, any>) => {
     if (!event.sourceEvent) return null