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,60 +43,58 @@ const nodeColor = (n: Node): string => {
   return '#fff'
 }
 
-onMounted(() => {
-  const onChange = (event: Event) => {
-    elements.value = elements.value.map((e: FlowElement) => {
-      if (isEdge(e) || e.id !== '2') {
-        return e
-      }
-      const color = (event.target as HTMLInputElement).value
-      bgColor.value = color
+const onChange = (event: Event) => {
+  elements.value = elements.value.map((e: FlowElement) => {
+    if (isEdge(e) || e.id !== '2') {
+      return e
+    }
+    const color = (event.target as HTMLInputElement).value
+    bgColor.value = color
 
-      return {
-        ...e,
-        data: {
-          ...e.data,
-          color,
-        },
-      }
-    })
-  }
+    return {
+      ...e,
+      data: {
+        ...e.data,
+        color,
+      },
+    }
+  })
+}
 
-  elements.value = [
-    {
-      id: '1',
-      type: 'input',
-      data: { label: 'An input node' },
-      position: { x: 0, y: 50 },
-      sourcePosition: Position.Right,
-    },
-    {
-      id: '2',
-      type: 'selectorNode',
-      data: { onChange, color: bgColor.value },
-      style: { border: '1px solid #777', padding: '10px' },
-      position: { x: 250, y: 50 },
-    },
-    {
-      id: '3',
-      type: 'output',
-      data: { label: 'Output A' },
-      position: { x: 650, y: 25 },
-      targetPosition: Position.Left,
-    },
-    {
-      id: '4',
-      type: 'output',
-      data: { label: 'Output B' },
-      position: { x: 650, y: 100 },
-      targetPosition: Position.Left,
-    },
+elements.value = [
+  {
+    id: '1',
+    type: 'input',
+    data: { label: 'An input node' },
+    position: { x: 0, y: 50 },
+    sourcePosition: Position.Right,
+  },
+  {
+    id: '2',
+    type: 'selectorNode',
+    data: { onChange, color: bgColor.value },
+    style: { border: '1px solid #777', padding: '10px' },
+    position: { x: 250, y: 50 },
+  },
+  {
+    id: '3',
+    type: 'output',
+    data: { label: 'Output A' },
+    position: { x: 650, y: 25 },
+    targetPosition: Position.Left,
+  },
+  {
+    id: '4',
+    type: 'output',
+    data: { label: 'Output B' },
+    position: { x: 650, y: 100 },
+    targetPosition: Position.Left,
+  },
 
-    { 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' } },
-  ]
-})
+  { 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 })