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>

src/composables/useHandle.ts

@@ -67,10 +67,8 @@ const resetRecentHandle = (hoveredHandle: Element): void => {
   hoveredHandle?.classList.remove('vue-flow__handle-connecting')
 }
 
-export default () => {
-  const store = useStore()
-
-  return (
+export default (store = useStore()) =>
+  (
     event: MouseEvent,
     handleId: ElementId,
     nodeId: ElementId,
@@ -93,7 +91,7 @@ export default () => {
 
     if (!flowNode || (!elementBelowIsTarget && !elementBelowIsSource && !elementEdgeUpdaterType)) return
 
-    const handleType = elementEdgeUpdaterType || (elementBelowIsTarget ? 'target' : 'source')
+    const handleType = elementEdgeUpdaterType ?? (elementBelowIsTarget ? 'target' : 'source')
     const containerBounds = flowNode.getBoundingClientRect()
     let recentHoveredHandle: Element
 
@@ -167,4 +165,3 @@ export default () => {
     doc.addEventListener('mousemove', onMouseMove as EventListenerOrEventListenerObject)
     doc.addEventListener('mouseup', onMouseUp as EventListenerOrEventListenerObject)
   }
-}

src/composables/useStore.ts

@@ -1,11 +1,11 @@
 import { FlowExportObject, FlowOptions } from '~/types'
-import { useFlowStore, initialState } from '~/store'
+import { useStateStore, initialState } from '~/store'
 import { Store } from '~/context'
 import { onLoadToObject } from '~/utils'
 
 let id = 0
 export default (options?: Partial<FlowOptions>) => {
-  let store = inject(Store, null)!
+  let store = inject(Store, null)
 
   if (!store) {
     const withStorage = options?.storageKey ?? false
@@ -25,7 +25,7 @@ export default (options?: Partial<FlowOptions>) => {
           preloadedState.transform = [storedState.value.position[0], storedState.value.position[1], storedState.value.zoom]
       }
     }
-    store = useFlowStore(storageKey, preloadedState)()
+    store = useStateStore(storageKey, preloadedState)()
     if (withStorage && storageKey === store.$id) {
       const toObject = onLoadToObject(store)
       store.$subscribe(() => {

src/composables/useVueFlow.ts

@@ -1,15 +1,10 @@
-import useHooks from './useHooks'
 import useStore from './useStore'
+import useHooks from './useHooks'
 import { EmitFunc, FlowOptions, FlowStore } from '~/types'
 
-export const initFlow = (emit: EmitFunc, options: Partial<FlowOptions>) => {
-  const store = useStore(options)
-  const hooks = useHooks(store, emit)
-
-  return {
-    store,
-    hooks,
-  }
+export const initFlow = (emit: EmitFunc, store = useStore()) => {
+  useHooks(store, emit)
+  return store
 }
 
 export default (options?: Partial<FlowOptions>): FlowStore => useStore(options)