From d9e067538560acd8773b805c7f93c841ee21939f Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 12 Dec 2021 22:14:02 +0100
Subject: [PATCH] refactor(nodes, edges): Add slots to node/edge labels

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 src/components/Edges/EdgeText.vue    | 24 +++++++++++-------------
 src/components/Nodes/DefaultNode.vue |  3 ++-
 src/components/Nodes/InputNode.vue   |  3 ++-
 src/components/Nodes/OutputNode.vue  |  3 ++-
 src/composables/useElementState.ts   |  2 +-
 src/types/components.ts              |  9 +++++++--
 src/types/flow.ts                    |  7 ++++++-
 7 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/src/components/Edges/EdgeText.vue b/src/components/Edges/EdgeText.vue
index ed20ee1b..abe476e0 100644
--- a/src/components/Edges/EdgeText.vue
+++ b/src/components/Edges/EdgeText.vue
@@ -1,16 +1,5 @@
 <script lang="ts" setup>
-import { CSSProperties } from 'vue'
-
-interface EdgeTextProps {
-  x: number
-  y: number
-  label?: string
-  labelStyle?: CSSProperties
-  labelShowBg?: boolean
-  labelBgStyle?: CSSProperties
-  labelBgPadding?: [number, number]
-  labelBgBorderRadius?: number
-}
+import type { EdgeTextProps } from '../../types/components'
 
 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>
diff --git a/src/components/Nodes/DefaultNode.vue b/src/components/Nodes/DefaultNode.vue
index 2c3e9741..64a8a53d 100644
--- a/src/components/Nodes/DefaultNode.vue
+++ b/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"
diff --git a/src/components/Nodes/InputNode.vue b/src/components/Nodes/InputNode.vue
index f438bbdc..e6b5358e 100644
--- a/src/components/Nodes/InputNode.vue
+++ b/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"
diff --git a/src/components/Nodes/OutputNode.vue b/src/components/Nodes/OutputNode.vue
index 992914bd..11485aea 100644
--- a/src/components/Nodes/OutputNode.vue
+++ b/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"
diff --git a/src/composables/useElementState.ts b/src/composables/useElementState.ts
index f934c45a..09091fa7 100644
--- a/src/composables/useElementState.ts
+++ b/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,
diff --git a/src/types/components.ts b/src/types/components.ts
index 6729dc81..2949a206 100644
--- a/src/types/components.ts
+++ b/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
 }
diff --git a/src/types/flow.ts b/src/types/flow.ts
index 761904e4..57570aae 100644
--- a/src/types/flow.ts
+++ b/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