feat(types): Add NodeTypes and EdgeTypes

* Interface for passing an object of NodeTypes/EdgeTypes
* Object needs to be passed with components markedRaw

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

src/types/edge.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, DefineComponent } from 'vue'
+import { Component, CSSProperties, DefineComponent } from 'vue'
 import { ArrowHeadType, ElementId, Position } from './types'
 
 export interface Edge<T = any> {
@@ -48,7 +48,8 @@ export interface EdgeSmoothStepProps<T = any> extends EdgeProps<T> {
   borderRadius?: number
 }
 
-export type EdgeType = DefineComponent<EdgeSmoothStepProps, any, any, any, any, any> | boolean
+export type EdgeType = Component<EdgeProps> | DefineComponent<EdgeSmoothStepProps, any, any, any, any, any> | boolean
+export type EdgeTypes = Record<string, EdgeType>
 
 export interface EdgePositions {
   sourceX: number

src/types/node.ts

@@ -1,4 +1,4 @@
-import { DefineComponent } from 'vue'
+import { Component, DefineComponent } from 'vue'
 import { XYPosition, ElementId, Position } from './types'
 
 export interface Node<T = any> {
@@ -58,4 +58,5 @@ export interface NodeProps<T = any> {
   dragging?: boolean
 }
 
-export type NodeType = DefineComponent<NodeProps, any, any, any, any> | boolean
+export type NodeType = Component<NodeProps> | DefineComponent<NodeProps, any, any, any, any> | boolean
+export type NodeTypes = Record<string, NodeType>

src/types/store.ts

@@ -13,8 +13,8 @@ import {
 } from './types'
 import { HandleType } from './handle'
 import { ConnectionMode, OnConnectEndFunc, OnConnectFunc, OnConnectStartFunc, OnConnectStopFunc } from './connection'
-import { Edge, EdgeType } from './edge'
-import { Node, NodeExtent, NodeType, TranslateExtent } from './node'
+import { Edge, EdgeTypes } from './edge'
+import { Node, NodeExtent, NodeTypes, TranslateExtent } from './node'
 import { FlowActions } from './actions'
 import { D3Selection, D3Zoom, D3ZoomHandler } from './panel'
 import { FlowHooks } from './hooks'
@@ -24,9 +24,9 @@ export interface FlowState extends FlowOptions {
   transform: Transform
   elements: Elements
   nodes: Node[]
-  nodeTypes: Record<string, NodeType>
+  nodeTypes: NodeTypes
   edges: Edge[]
-  edgeTypes: Record<string, EdgeType>
+  edgeTypes: EdgeTypes
   selectedElements?: Elements
   selectedNodesBbox: Rect
 
@@ -72,8 +72,8 @@ export interface FlowState extends FlowOptions {
 }
 
 export interface FlowGetters {
-  getEdgeTypes: () => Record<string, EdgeType>
-  getNodeTypes: () => Record<string, NodeType>
+  getEdgeTypes: () => EdgeTypes
+  getNodeTypes: () => NodeTypes
   getNodes: () => Node[]
   getEdges: () => Edge[]
 }

src/types/types.ts

@@ -1,6 +1,6 @@
-import { CSSProperties, HTMLAttributes } from 'vue'
-import { Edge, EdgeType } from './edge'
-import { Node, NodeExtent, NodeType, TranslateExtent } from './node'
+import { CSSProperties } from 'vue'
+import { Edge, EdgeTypes } from './edge'
+import { Node, NodeExtent, NodeTypes, TranslateExtent } from './node'
 import { ConnectionLineType, ConnectionMode } from './connection'
 import { KeyCode, PanOnScrollMode } from './panel'
 
@@ -88,10 +88,10 @@ export type FlowInstance<T = any> = {
   toObject: ToObjectFunc<T>
 }
 
-export interface FlowOptions extends Omit<HTMLAttributes, 'onLoad'> {
+export interface FlowOptions {
   elements: Elements
-  nodeTypes?: Record<string, NodeType>
-  edgeTypes?: Record<string, EdgeType>
+  nodeTypes?: NodeTypes
+  edgeTypes?: EdgeTypes
   connectionMode?: ConnectionMode
   connectionLineType?: ConnectionLineType
   connectionLineStyle?: CSSProperties