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/store/flowStore.ts

@@ -1,7 +1,7 @@
 import { setActivePinia, createPinia, defineStore, StoreDefinition } from 'pinia'
 import diff from 'microdiff'
 import { parseElements } from './utils'
-import { FlowState, Node, FlowActions, Elements, NodeType, EdgeType, FlowGetters, Edge } from '~/types'
+import { FlowState, Node, FlowActions, Elements, FlowGetters, Edge, EdgeTypes, NodeTypes } from '~/types'
 import { clampPosition, getDimensions, getConnectedEdges, getNodesInside, getRectOfNodes, isNode } from '~/utils'
 import { getHandleBounds } from '~/components/Nodes/utils'
 import { defaultEdgeTypes, defaultNodeTypes } from '~/store/index'
@@ -23,10 +23,10 @@ export default function flowStore(
       ...preloadedState,
     }),
     getters: {
-      getEdgeTypes(): Record<string, EdgeType> {
+      getEdgeTypes(): EdgeTypes {
         return { ...defaultEdgeTypes, ...this.edgeTypes }
       },
-      getNodeTypes(): Record<string, NodeType> {
+      getNodeTypes(): NodeTypes {
         return { ...defaultNodeTypes, ...this.nodeTypes }
       },
       getNodes(): Node[] {

src/store/index.ts

@@ -1,19 +1,19 @@
-import { ConnectionMode, EdgeType, FlowState, NodeType } from '~/types'
+import { ConnectionMode, EdgeTypes, FlowState, NodeTypes } from '~/types'
 import { createHooks } from '~/composables'
 import { DefaultNode, InputNode, OutputNode } from '~/components/Nodes'
 import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '~/components/Edges'
 
-export const defaultNodeTypes: Record<string, NodeType> = {
-  input: InputNode as NodeType,
-  default: DefaultNode as NodeType,
-  output: OutputNode as NodeType,
+export const defaultNodeTypes: NodeTypes = {
+  input: markRaw(InputNode),
+  default: markRaw(DefaultNode),
+  output: markRaw(OutputNode),
 }
 
-export const defaultEdgeTypes: Record<string, EdgeType> = {
-  default: BezierEdge as EdgeType,
-  straight: StraightEdge as EdgeType,
-  step: StepEdge as EdgeType,
-  smoothstep: SmoothStepEdge as EdgeType,
+export const defaultEdgeTypes: EdgeTypes = {
+  default: markRaw(BezierEdge),
+  straight: markRaw(StraightEdge),
+  step: markRaw(StepEdge),
+  smoothstep: markRaw(SmoothStepEdge),
 }
 
 export const initialState = (): FlowState => ({