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

@@ -1,12 +1,11 @@
 <script lang="ts" setup>
 import { useHandle, useStore } from '../../composables'
-import { ConnectionMode, Edge, EdgePositions, EdgeType, Position } from '../../types'
+import { ConnectionMode, Edge, EdgePositions, Position } from '../../types'
 import EdgeAnchor from './EdgeAnchor.vue'
 import { getEdgePositions, getHandle, getSourceTargetNodes, isEdgeVisible } from '~/container/EdgeRenderer/utils'
 import { isEdge } from '~/utils'
 
 interface EdgeProps {
-  type: EdgeType
   edge: Edge
   markerEndId?: string
   edgeUpdaterRadius?: number
@@ -16,6 +15,12 @@ const props = withDefaults(defineProps<EdgeProps>(), {})
 
 const store = useStore()
 
+const edgeType = props.edge.type || 'default'
+const type = store.getEdgeTypes[edgeType] || store.getEdgeTypes.default
+if (!store.getEdgeTypes[edgeType]) {
+  console.warn(`Edge type "${edgeType}" not found. Using fallback type "default".`)
+}
+
 const onEdgeClick = (event: MouseEvent) => {
   if (store.elementsSelectable) {
     store.unsetNodesSelection()
@@ -166,7 +171,8 @@ const elementsSelectable = computed(() => store.elementsSelectable)
       }"
     >
       <component
-        :is="props.type"
+        :is="type"
+        v-if="typeof type !== 'boolean'"
         v-bind="{
           id: props.edge.id,
           source: props.edge.source,

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) =>

src/components/Nodes/Node.vue

@@ -1,12 +1,11 @@
 <script lang="ts" setup>
 import { DraggableEventListener, DraggableCore } from '@braks/revue-draggable'
 import { useStore } from '../../composables'
-import { Node, NodeType, SnapGrid } from '../../types'
+import { Node, SnapGrid } from '../../types'
 import { NodeId } from '../../context'
 
 interface NodeProps {
   node: Node
-  type: NodeType
   selectNodesOnDrag?: boolean
   snapGrid?: SnapGrid
 }
@@ -21,6 +20,12 @@ provide(NodeId, props.node.id)
 
 const nodeElement = templateRef<HTMLDivElement>('node-element', null)
 
+const nodeType = props.node.type || 'default'
+const type = store.getNodeTypes[nodeType] || store.getNodeTypes.default
+if (!store.getNodeTypes[nodeType]) {
+  console.warn(`Node type "${nodeType}" not found. Using fallback type "default".`)
+}
+
 const selectable = computed(() =>
   typeof props.node.selectable === 'undefined' ? store.elementsSelectable : props.node.selectable,
 )
@@ -184,7 +189,8 @@ onMounted(() => {
           }"
         >
           <component
-            :is="props.type"
+            :is="type"
+            v-if="typeof type !== 'boolean'"
             v-bind="{
               id: props.node.id,
               data: props.node.data,