fix!: props and composable not merging together properly

* Add getter for node/edge types
* change nodeTypes prop type to only Record<string, NodeType> - same for edges
* Add rgb example
* remove v-model for elements

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

src/types/store.ts

@@ -13,9 +13,9 @@ export interface FlowState extends FlowOptions {
   transform: Transform
   elements: Elements
   nodes: Node[]
-  nodeTypes: Record<string, NodeType> | string[]
+  nodeTypes: Record<string, NodeType>
   edges: Edge[]
-  edgeTypes: Record<string, EdgeType> | string[]
+  edgeTypes: Record<string, EdgeType>
   selectedElements?: Elements
   selectedNodesBbox: Rect
 
@@ -59,4 +59,11 @@ export interface FlowState extends FlowOptions {
   storageKey?: string
 }
 
-export type FlowStore = Store<string, FlowState, any, FlowActions>
+export interface FlowGetters {
+  getEdgeTypes: () => Record<string, EdgeType>
+  getNodeTypes: () => Record<string, NodeType>
+  getNodes: () => Node[]
+  getEdges: () => Edge[]
+}
+
+export type FlowStore = Store<string, FlowState, FlowGetters, FlowActions>

src/types/types.ts

@@ -90,8 +90,8 @@ export type FlowInstance<T = any> = {
 
 export interface FlowOptions extends Omit<HTMLAttributes, 'onLoad'> {
   elements: Elements
-  nodeTypes?: Record<string, NodeType> | string[]
-  edgeTypes?: Record<string, EdgeType> | string[]
+  nodeTypes?: Record<string, NodeType>
+  edgeTypes?: Record<string, EdgeType>
   connectionMode?: ConnectionMode
   connectionLineType?: ConnectionLineType
   connectionLineStyle?: CSSProperties