feat: merge store with props

* if options are passed to useVueFlow, we want to merge them with possibly passed props
* renamed flowStore to stateStore
* fix examples
* add store prop to pass an already existing store to flow

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

examples/Basic/Basic.vue

@@ -13,6 +13,7 @@ import {
   isNode,
   removeElements,
   Node,
+  useVueFlow,
 } from '~/index'
 
 const onNodeDragStop = ({ node }: { node: Node }) => console.log('drag stop', node)
@@ -54,6 +55,7 @@ const toggleclasss = () => {
     return el
   })
 }
+useVueFlow()
 </script>
 <template>
   <VueFlow

examples/DragNDrop/DnD.vue

@@ -28,10 +28,7 @@ const onElementsRemove = (elementsToRemove: Elements) => (elements.value = remov
 const onLoad = (instance: FlowInstance) => (flowInstance.value = instance)
 
 const onDrop = (event: DragEvent) => {
-  event.preventDefault()
-
   if (flowInstance.value) {
-    console.log(event.dataTransfer?.getData('application/vueflow'))
     const type = event.dataTransfer?.getData('application/vueflow')
     const position = flowInstance.value.project({ x: event.clientX, y: event.clientY - 40 })
     const newNode = {
@@ -40,24 +37,13 @@ const onDrop = (event: DragEvent) => {
       position,
       data: { label: `${type} node` },
     } as Node
-
     elements.value.push(newNode)
   }
 }
 </script>
 <template>
-  <div class="dndflow">
-    <div class="vueflow-wrapper" @drop="onDrop">
-      <VueFlow
-        :elements="elements"
-        @elements-remove="onElementsRemove"
-        @load="onLoad"
-        @connect="onConnect"
-        @dragover="onDragOver"
-      >
-        <Controls />
-      </VueFlow>
-    </div>
+  <div class="dndflow" @drop="onDrop">
+    <VueFlow v-model="elements" @elements-remove="onElementsRemove" @load="onLoad" @connect="onConnect" @dragover="onDragOver" />
     <Sidebar />
   </div>
 </template>

examples/Empty/EmptyExample.vue

@@ -38,7 +38,7 @@ const addRandomNode = () => {
 </script>
 <template>
   <VueFlow
-    :elements="elements"
+    v-model="elements"
     @load="onLoad"
     @element-click="onElementClick"
     @elements-remove="onElementsRemove"

examples/Provider/Sidebar.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { useStore } from '~/index'
-const store = useStore()
+import { useVueFlow } from '~/index'
+const store = useVueFlow()
 
 const nodes = computed(() => store.nodes)
 const transform = computed(() => store.transform)

examples/RGBFlow/RGBFlow.vue

@@ -22,7 +22,7 @@ const elements = ref<Elements>([
 const el = templateRef<HTMLDivElement>('page', null)
 
 const onLoad = (flowInstance: FlowInstance) => {
-  flowInstance.setTransform({ x: el.value?.clientWidth / 2.2, y: el.value?.clientHeight / 3, zoom: 1.25 })
+  flowInstance.fitView({ padding: 1 })
 }
 const color = ref<Colors>({
   red: 100,
@@ -35,12 +35,15 @@ const store = useVueFlow({
     'rgb': true,
     'rgb-output': true,
   },
+  edgeTypes: {
+    pathfinding: true,
+  },
   zoomOnScroll: false,
 })
 </script>
 <template>
   <div ref="page" class="demo-flow">
-    <VueFlow :elements="elements" @load="onLoad">
+    <VueFlow v-model="elements" @load="onLoad">
       <template #node-rgb="props">
         <RGBNode v-bind="props" :amount="color" @change="onChange" />
       </template>

examples/RGBFlow/RGBOutputNode.vue

@@ -10,7 +10,7 @@ const props = defineProps<RBGOutputNodeProps>()
 <template>
   <div :style="{ backgroundColor: props.rgb }" class="rgb-output-node">
     <div class="text-md uppercase">{{ props.rgb }}</div>
-    <Handle type="source" :position="Position.Left" />
+    <Handle type="target" :position="Position.Left" />
   </div>
 </template>
 <style>