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/types/edge.ts

@@ -22,7 +22,7 @@ export interface Edge<T = any> {
   labelBgStyle?: any
   labelBgPadding?: [number, number]
   labelBgBorderRadius?: number
-  style?: CSSProperties
+  style?: CSSProperties | unknown
   animated?: boolean
   arrowHeadType?: ArrowHeadType
   markerEndId?: string

src/types/store.ts

@@ -24,9 +24,9 @@ export interface FlowState extends FlowOptions {
   transform: Transform
   elements: Elements
   nodes: Node[]
-  nodeTypes: NodeTypes
+  nodeTypes?: NodeTypes
   edges: Edge[]
-  edgeTypes: EdgeTypes
+  edgeTypes?: EdgeTypes
   selectedElements?: Elements
   selectedNodesBbox: Rect
 

src/types/types.ts

@@ -3,6 +3,7 @@ import { Edge, EdgeTypes } from './edge'
 import { Node, NodeExtent, NodeTypes, TranslateExtent } from './node'
 import { ConnectionLineType, ConnectionMode } from './connection'
 import { KeyCode, PanOnScrollMode } from './panel'
+import { FlowStore } from './store'
 
 export type ElementId = string
 
@@ -89,7 +90,9 @@ export type FlowInstance<T = any> = {
 }
 
 export interface FlowOptions {
-  elements: Elements
+  id?: string
+  store?: FlowStore
+  elements?: Elements
   nodeTypes?: NodeTypes
   edgeTypes?: EdgeTypes
   connectionMode?: ConnectionMode
@@ -122,7 +125,5 @@ export interface FlowOptions {
   panOnScrollMode?: PanOnScrollMode
   zoomOnDoubleClick?: boolean
   edgeUpdaterRadius?: number
-  nodeTypesId?: string
-  edgeTypesId?: string
   storageKey?: string
 }