docs(examples): update layouting example (#1576)

* refactor(examples): use offsetPath in layouting example

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

* chore(examples): cleanup

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

* docs(examples): update layouting example

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

---------

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

examples/vite/src/SaveRestore/Controls.vue

@@ -1,21 +1,20 @@
 <script lang="ts" setup>
-import type { FlowExportObject } from '@vue-flow/core'
+import type { Edge, FlowExportObject, Node } from '@vue-flow/core'
 import { useVueFlow } from '@vue-flow/core'
 
 const flowKey = 'example-flow'
 
-const state = useStorage<FlowExportObject | null>(flowKey, {
-  nodes: [],
-  edges: [],
-  position: [NaN, NaN],
-  zoom: 1,
-})
+const state = useStorage(flowKey, {
+  nodes: [] as Node[],
+  edges: [] as Edge[],
+  viewport: { x: 0, y: 0, zoom: 1 },
+} as FlowExportObject)
 
 function getNodeId() {
   return `randomnode_${+new Date()}`
 }
 
-const { addNodes, setNodes, setEdges, toObject, dimensions, setTransform } = useVueFlow()
+const { addNodes, setNodes, setEdges, toObject, dimensions, setViewport } = useVueFlow()
 
 function onSave() {
   state.value = toObject()
@@ -31,7 +30,7 @@ function onRestore() {
 
     setEdges(flow.edges)
 
-    setTransform({ x, y, zoom: flow.zoom || 0 })
+    setViewport({ x, y, zoom: flow.zoom || 0 })
   }
 }