refactor(nodes, edges): Add slots to node/edge labels

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

src/components/Edges/EdgeText.vue

@@ -1,16 +1,5 @@
 <script lang="ts" setup>
-import { CSSProperties } from 'vue'
+import type { EdgeTextProps } from '../../types/components'
-
-interface EdgeTextProps {
-  x: number
-  y: number
-  label?: string
-  labelStyle?: CSSProperties
-  labelShowBg?: boolean
-  labelBgStyle?: CSSProperties
-  labelBgPadding?: [number, number]
-  labelBgBorderRadius?: number
-}
 
 const props = withDefaults(defineProps<EdgeTextProps>(), {
   labelStyle: () => ({}),
@@ -43,7 +32,16 @@ export default {
       :ry="props.labelBgBorderRadius"
     />
     <text ref="edge-text" class="vue-flow__edge-text" :y="height / 2" dy="0.3em" :style="props.labelStyle">
-      {{ props.label }}
+      <slot v-bind="props">
+        <component
+          :is="props.label?.component"
+          v-if="typeof props.label !== 'string' && typeof props.label?.component !== 'undefined'"
+          v-bind="{ ...props, ...props.label?.props, width, height, x, y }"
+        />
+        <template v-else v-html="props.label">
+          {{ props.label }}
+        </template>
+      </slot>
     </text>
   </g>
 </template>

src/components/Nodes/DefaultNode.vue

@@ -24,7 +24,8 @@ export default {
     :is-valid-connection="props.isValidTargetPos"
   />
   <slot v-bind="props">
-    <span v-if="props.label" v-html="props.label" />
+    <component :is="props.label" v-if="typeof props.label !== 'string'" />
+    <span v-else v-html="props.label"></span>
   </slot>
   <Handle
     type="source"

src/components/Nodes/InputNode.vue

@@ -17,7 +17,8 @@ export default {
 </script>
 <template>
   <slot v-bind="props">
-    <span v-if="props.label" v-html="props.label" />
+    <component :is="props.label" v-if="typeof props.label !== 'string'" />
+    <span v-else v-html="props.label"></span>
   </slot>
   <Handle
     type="source"

src/components/Nodes/OutputNode.vue

@@ -17,7 +17,8 @@ export default {
 </script>
 <template>
   <slot v-bind="props">
-    <span v-if="props.label" v-html="props.label" />
+    <component :is="props.label" v-if="typeof props.label !== 'string'" />
+    <span v-else v-html="props.label"></span>
   </slot>
   <Handle
     type="source"

src/composables/useElementState.ts

@@ -108,7 +108,7 @@ export const useNodesState = (
           parseChildren(node, undefined, children, extent ?? store.nodeExtent, store.getNode)
           return children
         })
-        store.nodes.concat(parsed)
+        store.nodes.push(...parsed)
         return store.nodes
       },
       OnNodesChange: store.hooksOn.OnNodesChange,

src/types/components.ts

@@ -74,10 +74,15 @@ export interface MiniMapNodeProps {
 export interface EdgeTextProps {
   x: number
   y: number
-  label?: string
+  label?:
+    | string
+    | {
+        component: any
+        props?: any
+      }
   labelStyle?: CSSProperties
   labelShowBg?: boolean
-  labelBgStyle?: any
+  labelBgStyle?: CSSProperties
   labelBgPadding?: [number, number]
   labelBgBorderRadius?: number
 }

src/types/flow.ts

@@ -10,7 +10,12 @@ export type FlowElement<N = any, E = any> = GraphNode<N> | GraphEdge<E>
 export type FlowElements<N = any, E = any> = FlowElement<N, E>[]
 export interface Element<Data = any> {
   id: string
-  label?: string
+  label?:
+    | string
+    | {
+        props?: any
+        component: any
+      }
   type?: string
   data?: Data
   class?: string