docs: update examples

docs/components/examples/basic/App.vue

@@ -7,7 +7,7 @@ import { initialElements } from './initial-elements.js'
  * useVueFlow provides all event handlers and store properties
  * You can pass the composable an object that has the same properties as the VueFlow component props
  */
-const { onPaneReady, onNodeDragStop, onConnect, instance, addEdges } = useVueFlow()
+const { onPaneReady, onNodeDragStop, onConnect, addEdges, setTransform, toObject } = useVueFlow()
 
 /**
  * Our elements
@@ -50,12 +50,12 @@ const updatePos = () =>
 /**
  * toObject transforms your current graph data to an easily persist-able object
  */
-const logToObject = () => console.log(instance.value?.toObject())
+const logToObject = () => console.log(toObject())
 
 /**
  * Resets the current viewpane transformation (zoom & pan)
  */
-const resetTransform = () => instance.value?.setTransform({ x: 0, y: 0, zoom: 1 })
+const resetTransform = () => setTransform({ x: 0, y: 0, zoom: 1 })
 
 const toggleClass = () => {
   dark.value = !dark.value

docs/components/examples/dnd/App.vue

@@ -5,7 +5,7 @@ import Sidebar from './Sidebar.vue'
 let id = 0
 const getId = () => `dndnode_${id++}`
 
-const { instance, onConnect, nodes, edges, addEdges, addNodes, viewport } = useVueFlow({
+const { onConnect, nodes, edges, addEdges, addNodes, viewport, project } = useVueFlow({
   nodes: [
     {
       id: '1',
@@ -25,17 +25,15 @@ const onDragOver = (event) => {
 onConnect((params) => addEdges([params]))
 
 const onDrop = (event) => {
-  if (instance.value) {
+  const type = event.dataTransfer?.getData('application/vueflow')
-    const type = event.dataTransfer?.getData('application/vueflow')
+  const position = project({ x: event.clientX - 40, y: event.clientY - 18 })
-    const position = instance.value.project({ x: event.clientX - 40, y: event.clientY - 18 })
+  const newNode = {
-    const newNode = {
+    id: getId(),
-      id: getId(),
+    type,
-      type,
+    position,
-      position,
+    label: `${type} node`,
-      label: `${type} node`,
-    }
-    addNodes([newNode])
   }
+  addNodes([newNode])
 }
 </script>
 

docs/components/examples/save-restore/Controls.vue

@@ -3,10 +3,10 @@ import { useVueFlow } from '@braks/vue-flow'
 
 const flowKey = 'example-flow'
 
-const { nodes, addNodes, setNodes, setEdges, instance, dimensions } = useVueFlow()
+const { nodes, addNodes, setNodes, setEdges, dimensions, setTransform, toObject } = useVueFlow()
 
 const onSave = () => {
-  localStorage.setItem(flowKey, JSON.stringify(instance.value?.toObject()))
+  localStorage.setItem(flowKey, JSON.stringify(toObject()))
 }
 
 const onRestore = () => {
@@ -16,7 +16,7 @@ const onRestore = () => {
     const [x = 0, y = 0] = flow.position
     setNodes(flow.nodes)
     setEdges(flow.edges)
-    instance.value.setTransform({ x, y, zoom: flow.zoom || 0 })
+    setTransform({ x, y, zoom: flow.zoom || 0 })
   }
 }
 
@@ -35,6 +35,6 @@ const onAdd = () => {
   <div class="save__controls">
     <button style="background-color: #33a6b8" @click="onSave">save</button>
     <button style="background-color: #113285" @click="onRestore">restore</button>
-    <button style="background-color: #6F3381" @click="onAdd">add node</button>
+    <button style="background-color: #6f3381" @click="onAdd">add node</button>
   </div>
 </template>

docs/components/examples/stress/App.vue

@@ -6,13 +6,13 @@ import { getElements } from './utils.js'
 const { nodes, edges } = getElements(15, 15)
 const elements = ref([...nodes, ...edges])
 
-const { onPaneReady, dimensions, instance, onNodeClick, getEdges } = useVueFlow()
+const { onPaneReady, dimensions, onNodeClick, getEdges, fitView } = useVueFlow()
 
 onPaneReady((i) => {
   i.fitView({
     padding: 0.2,
   })
-  console.log(i.getElements())
+  console.log(i.getElements.value)
 })
 
 const toggleClass = () => elements.value.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
@@ -27,7 +27,7 @@ const updatePos = () => {
     }
   })
   nextTick(() => {
-    instance.value.fitView({ duration: 1000, padding: 0.5 })
+    fitView({ duration: 1000, padding: 0.5 })
   })
 }
 

docs/components/home/Features.vue

@@ -1,13 +1,13 @@
 <script lang="ts" setup>
 import { reactive, watch } from 'vue'
 import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
-import type { FlowInstance } from '@braks/vue-flow'
+import type { VueFlowStore } from '@braks/vue-flow'
 
 const breakpoints = useBreakpoints(breakpointsTailwind)
 
-const instances = reactive<FlowInstance[]>([])
+const instances = reactive<VueFlowStore[]>([])
 
-const onLoad = (instance: FlowInstance) => {
+const onLoad = (instance: VueFlowStore) => {
   instances.push(instance)
   instance.fitView()
 }