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/components/ConnectionLine/ConnectionLine.vue

@@ -22,7 +22,7 @@ const sourceHandle =
     ? props.sourceNode.__rf?.handleBounds[store.connectionHandleType].find(
         (d: HandleElement) => d.id === store.connectionHandleId,
       )
-    : store.connectionHandleType && props.sourceNode.__rf?.handleBounds[store.connectionHandleType][0]
+    : store.connectionHandleType && props.sourceNode.__rf?.handleBounds[store.connectionHandleType ?? 'source'][0]
 const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : (props.sourceNode.__rf?.width as number) / 2
 const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : props.sourceNode.__rf?.height
 const sourceX = props.sourceNode.__rf?.position?.x + sourceHandleX

src/components/Edges/Edge.vue

@@ -20,6 +20,7 @@ const type = store.getEdgeTypes[edgeType] || store.getEdgeTypes.default
 if (!store.getEdgeTypes[edgeType]) {
   console.warn(`Edge type "${edgeType}" not found. Using fallback type "default".`)
 }
+const updating = ref<boolean>(false)
 
 const onEdgeClick = (event: MouseEvent) => {
   if (store.elementsSelectable) {
@@ -63,7 +64,6 @@ const onEdgeUpdaterTargetMouseDown = (event: MouseEvent) => {
   handleEdgeUpdater(event, false)
 }
 
-const updating = ref<boolean>(false)
 const onEdgeUpdaterMouseEnter = () => (updating.value = true)
 
 const onEdgeUpdaterMouseOut = () => (updating.value = false)

src/components/Handle/Handle.vue

@@ -19,7 +19,7 @@ const props = withDefaults(defineProps<HandleProps>(), {
 })
 
 const store = useStore()
-const nodeId = inject(NodeId, '')!
+const nodeId = inject(NodeId, '')
 
 const handler = useHandle()
 const onMouseDownHandler = (event: MouseEvent) =>