fix: custom node example not fitting view

* fit view can't work (for the onLoad event) for elements assigned after the host has mounted (onMounted hook) as we can't calculate a rect of elements that don't exist at flow creation
* in this case just trigger fit view __after__ elements have been created/passed to the flow

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

docs/pages/examples/custom-node.vue

@@ -43,8 +43,7 @@ const nodeColor = (n: Node): string => {
   return '#fff'
 }
 
-onMounted(() => {
-  const onChange = (event: Event) => {
+const onChange = (event: Event) => {
   elements.value = elements.value.map((e: FlowElement) => {
     if (isEdge(e) || e.id !== '2') {
       return e
@@ -60,9 +59,9 @@ onMounted(() => {
       },
     }
   })
-  }
+}
 
-  elements.value = [
+elements.value = [
   {
     id: '1',
     type: 'input',
@@ -95,8 +94,7 @@ onMounted(() => {
   { id: 'e1-2', source: '1', target: '2', animated: true, style: { stroke: '#fff' } },
   { id: 'e2a-3', source: '2', sourceHandle: 'a', target: '3', animated: true, style: { stroke: '#fff' } },
   { id: 'e2b-4', source: '2', sourceHandle: 'b', target: '4', animated: true, style: { stroke: '#fff' } },
-  ]
-})
+]
 
 const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
 

docs/pages/examples/layouting.vue

@@ -27,7 +27,6 @@ const elements = ref<Elements>(initialElements)
 const onConnect = (params: Connection | Edge) => (elements.value = addEdge({ ...params, animated: true }, elements.value))
 const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
 
-// todo changing elements not properly updating flowchart...
 const onLayout = (direction: string) => {
   const isHorizontal = direction === 'LR'
   dagreGraph.setGraph({ rankdir: direction })

src/composables/useZoomPanHelper.ts

@@ -23,9 +23,9 @@ export default (store = useStore()): UseZoomPanHelper => {
         bounds,
         store.dimensions.width,
         store.dimensions.height,
-        options.minZoom || store.minZoom,
-        options.maxZoom || store.maxZoom,
-        options.padding || DEFAULT_PADDING,
+        options.minZoom ?? store.minZoom,
+        options.maxZoom ?? store.maxZoom,
+        options.padding ?? DEFAULT_PADDING,
       )
       const transform = zoomIdentity.translate(x, y).scale(zoom)
 

src/container/ZoomPane/ZoomPane.vue

@@ -69,7 +69,6 @@ until(zoomPaneEl)
     store.initD3Zoom({ d3Zoom: d3z, d3Selection: d3s, d3ZoomHandler })
     store.transform = [updatedTransform.x, updatedTransform.y, updatedTransform.k]
 
-    const applyZoomHandlers = () => {
     d3z.on('start', (event: D3ZoomEvent<HTMLDivElement, any>) => {
       if (viewChanged(transform.value, event.transform)) {
         const flowTransform = eventToFlowTransform(event.transform)
@@ -140,17 +139,14 @@ until(zoomPaneEl)
         d3s?.on('wheel', null).on('wheel.zoom', d3ZoomHandler)
       }
     })
-    }
 
-    const applyZoomFilter = () => {
     const keyPress = useKeyPress(props.selectionKeyCode)
     d3z.filter((event: MouseEvent) => {
       const zoomScroll = props.zoomOnScroll
       const pinchZoom = props.zoomOnPinch && event.ctrlKey
 
       // if all interactions are disabled, we prevent all zoom events
-        if (!props.paneMoveable && !zoomScroll && !props.panOnScroll && !props.zoomOnDoubleClick && !props.zoomOnPinch)
-          return false
+      if (!props.paneMoveable && !zoomScroll && !props.panOnScroll && !props.zoomOnDoubleClick && !props.zoomOnPinch) return false
 
       // during a selection we prevent all other interactions
       if (keyPress.value) return false
@@ -181,10 +177,6 @@ until(zoomPaneEl)
       // default filter for d3-zoom
       return (!event.ctrlKey || event.type === 'wheel') && !event.button
     })
-    }
-
-    applyZoomHandlers()
-    applyZoomFilter()
   })
 
 const { width, height } = useElementBounding(zoomPaneEl)
@@ -197,9 +189,8 @@ watch(width, (val) => (store.dimensions.width = val))
 watch(height, (val) => (store.dimensions.height = val))
 watch(transform, (val) => (store.transform = [val.x, val.y, val.zoom]))
 
+const { zoomIn, zoomOut, zoomTo, transform: setTransform, fitView } = useZoomPanHelper()
 onMounted(() => {
-  const { zoomIn, zoomOut, zoomTo, transform: setTransform, fitView } = useZoomPanHelper()
-
   watchOnce(
     () => width.value && height.value,
     () => {

src/utils/graph.ts

@@ -222,7 +222,7 @@ export const getRectOfNodes = (nodes: Node[]): Rect => {
           ...position,
           width,
           height,
-        } as any),
+        }),
       ),
     { x: Infinity, y: Infinity, x2: -Infinity, y2: -Infinity },
   )