From c4c4c663afbb5bb4219ed5aa86e721e2011214ab Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 24 Feb 2023 17:34:50 +0100
Subject: [PATCH] chore: add changeset

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 .changeset/strange-buses-hope.md  |  5 +++++
 examples/vite/src/Basic/Basic.vue | 31 ++++++++++++++++++++++++-------
 2 files changed, 29 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/strange-buses-hope.md

diff --git a/.changeset/strange-buses-hope.md b/.changeset/strange-buses-hope.md
new file mode 100644
index 00000000..d08e6558
--- /dev/null
+++ b/.changeset/strange-buses-hope.md
@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": patch
+---
+
+Wait until viewport helper is initialized before triggering viewport functions and pane ready event
diff --git a/examples/vite/src/Basic/Basic.vue b/examples/vite/src/Basic/Basic.vue
index f10da04c..37b07780 100644
--- a/examples/vite/src/Basic/Basic.vue
+++ b/examples/vite/src/Basic/Basic.vue
@@ -14,12 +14,13 @@ const elements = ref<Elements>([
   { id: 'e1-2', source: '1', target: '2', animated: true },
   { id: 'e1-3', source: '1', target: '3' },
 ])
-const { onNodeDragStop, onEdgeClick, onConnect, addEdges, setTransform, toObject } = useVueFlow({
-  minZoom: 0.2,
-  maxZoom: 4,
-  connectOnClick: true,
-  fitViewOnInit: false,
-})
+const { onNodeDragStop, onEdgeClick, onConnect, addEdges, setTransform, toObject, fitView, onPaneReady, setNodes, setEdges } =
+  useVueFlow({
+    minZoom: 0.2,
+    maxZoom: 4,
+    connectOnClick: true,
+    fitViewOnInit: false,
+  })
 
 onNodeDragStop((e) => console.log('drag stop', e.event))
 onEdgeClick(console.log)
@@ -35,13 +36,29 @@ const updatePos = () =>
     }
   })
 
+onPaneReady((instance) => {
+  setNodes([
+    { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
+    { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
+    { id: '3', label: 'Node 3', position: { x: 400, y: 100 }, class: 'light' },
+    { id: '4', label: 'Node 4', position: { x: 400, y: 200 }, class: 'light' },
+  ])
+
+  setEdges([
+    { id: 'e1-2', source: '1', target: '2', animated: true },
+    { id: 'e1-3', source: '1', target: '3' },
+  ])
+
+  instance.fitView()
+})
+
 const logToObject = () => console.log(toObject())
 const resetTransform = () => setTransform({ x: 0, y: 0, zoom: 1 })
 const toggleclass = () => elements.value.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
 </script>
 
 <template>
-  <VueFlow v-model="elements" fit-view-on-init connection-mode="strict" class="vue-flow-basic-example">
+  <VueFlow v-model="elements" connection-mode="strict" class="vue-flow-basic-example">
     <Background />
     <MiniMap />
     <Controls />