From 8e3fef504cc0fe802ded4c0b2edac8ed4060bacd Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 8 Apr 2022 20:59:14 +0200
Subject: [PATCH] refactor(nodes,edges,types!): Change label-type to string |
 VNode | Object

---
 .../components/ConnectionLine/ConnectionLine.vue  |  2 ++
 package/src/components/Edges/EdgeText.vue         |  6 +-----
 package/src/components/Nodes/DefaultNode.vue      |  2 +-
 package/src/components/Nodes/InputNode.vue        |  2 +-
 package/src/components/Nodes/OutputNode.vue       |  2 +-
 package/src/types/components.ts                   |  9 ++-------
 package/src/types/flow.ts                         |  9 ++-------
 package/src/types/node.ts                         | 15 ++++++++-------
 8 files changed, 18 insertions(+), 29 deletions(-)

diff --git a/package/src/components/ConnectionLine/ConnectionLine.vue b/package/src/components/ConnectionLine/ConnectionLine.vue
index fd5fabcb..1133aa0b 100644
--- a/package/src/components/ConnectionLine/ConnectionLine.vue
+++ b/package/src/components/ConnectionLine/ConnectionLine.vue
@@ -17,8 +17,10 @@ const sourceHandle =
   store.connectionHandleId && store.connectionHandleType
     ? props.sourceNode.handleBounds[store.connectionHandleType]?.find((d: HandleElement) => d.id === store.connectionHandleId)
     : store.connectionHandleType && props.sourceNode.handleBounds[store.connectionHandleType ?? 'source']?.[0]
+
 const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : props.sourceNode.dimensions.width / 2
 const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : props.sourceNode.dimensions.height
+
 const sourceX = props.sourceNode.computedPosition.x + sourceHandleX
 const sourceY = props.sourceNode.computedPosition.y + sourceHandleY
 
diff --git a/package/src/components/Edges/EdgeText.vue b/package/src/components/Edges/EdgeText.vue
index 754b4f6b..a03005f6 100644
--- a/package/src/components/Edges/EdgeText.vue
+++ b/package/src/components/Edges/EdgeText.vue
@@ -39,11 +39,7 @@ export default {
     />
     <text ref="edge-text" class="vue-flow__edge-text" :y="edgeRefBbox.height / 2" dy="0.3em" :style="props.labelStyle">
       <slot v-bind="props">
-        <component
-          :is="props.label?.component"
-          v-if="typeof props.label !== 'string' && typeof props.label?.component !== 'undefined'"
-          v-bind="props.label?.props"
-        />
+        <component :is="props.label" v-if="typeof props.label !== 'string' && typeof props.label" />
         <template v-else v-html="props.label">
           {{ props.label }}
         </template>
diff --git a/package/src/components/Nodes/DefaultNode.vue b/package/src/components/Nodes/DefaultNode.vue
index e062fc16..20a95a18 100644
--- a/package/src/components/Nodes/DefaultNode.vue
+++ b/package/src/components/Nodes/DefaultNode.vue
@@ -21,7 +21,7 @@ export default {
     :is-connectable="props.connectable"
     :is-valid-connection="props.isValidTargetPos"
   />
-  <component :is="props.label.component" v-bind="props.label.props" v-if="typeof props.label !== 'string' && props.label" />
+  <component :is="props.label" v-if="typeof props.label !== 'string' && props.label" />
   <span v-else v-html="props.label" />
   <Handle
     type="source"
diff --git a/package/src/components/Nodes/InputNode.vue b/package/src/components/Nodes/InputNode.vue
index 2a3668f4..19f28085 100644
--- a/package/src/components/Nodes/InputNode.vue
+++ b/package/src/components/Nodes/InputNode.vue
@@ -14,7 +14,7 @@ export default {
 }
 </script>
 <template>
-  <component :is="props.label.component" v-bind="props.label.props" v-if="typeof props.label !== 'string' && props.label" />
+  <component :is="props.label" v-if="typeof props.label !== 'string' && props.label" />
   <span v-else v-html="props.label" />
   <Handle
     type="source"
diff --git a/package/src/components/Nodes/OutputNode.vue b/package/src/components/Nodes/OutputNode.vue
index 92d6d361..62833340 100644
--- a/package/src/components/Nodes/OutputNode.vue
+++ b/package/src/components/Nodes/OutputNode.vue
@@ -14,7 +14,7 @@ export default {
 }
 </script>
 <template>
-  <component :is="props.label.component" v-bind="props.label.props" v-if="typeof props.label !== 'string' && props.label" />
+  <component :is="props.label" v-bind="props.label" v-if="typeof props.label !== 'string' && props.label" />
   <span v-else v-html="props.label" />
   <Handle
     type="source"
diff --git a/package/src/types/components.ts b/package/src/types/components.ts
index 0f03f8f2..23573b97 100644
--- a/package/src/types/components.ts
+++ b/package/src/types/components.ts
@@ -1,4 +1,4 @@
-import { Component, CSSProperties, DefineComponent, HTMLAttributes } from 'vue'
+import { Component, CSSProperties, DefineComponent, HTMLAttributes, VNode } from 'vue'
 import { BackgroundVariant, Dimensions, ElementData, XYPosition } from './flow'
 import { GraphNode, Node, NodeProps } from './node'
 import { EdgeProps } from './edge'
@@ -99,12 +99,7 @@ export interface MiniMapNodeProps {
 export interface EdgeTextProps extends HTMLAttributes {
   x: number
   y: number
-  label?:
-    | string
-    | {
-        component: any
-        props?: any
-      }
+  label?: string | VNode | Object
   labelStyle?: CSSProperties
   labelShowBg?: boolean
   labelBgStyle?: CSSProperties
diff --git a/package/src/types/flow.ts b/package/src/types/flow.ts
index 13268c1d..2a1f34ec 100644
--- a/package/src/types/flow.ts
+++ b/package/src/types/flow.ts
@@ -1,4 +1,4 @@
-import { CSSProperties } from 'vue'
+import { CSSProperties, VNode } from 'vue'
 import { GraphEdge, Edge, DefaultEdgeOptions } from './edge'
 import { GraphNode, CoordinateExtent, Node } from './node'
 import { ConnectionLineType, ConnectionMode } from './connection'
@@ -27,12 +27,7 @@ export type StyleFunc<Data = ElementData> = (element: FlowElement<Data>) => Styl
 /** base element props */
 export interface Element<Data extends ElementData = ElementData> {
   id: string
-  label?:
-    | string
-    | {
-        props?: any
-        component: any
-      }
+  label?: string | VNode
   type?: string
   data?: Data
   class?: string | ClassFunc<Data>
diff --git a/package/src/types/node.ts b/package/src/types/node.ts
index 73eec86a..8eeb6a69 100644
--- a/package/src/types/node.ts
+++ b/package/src/types/node.ts
@@ -1,3 +1,4 @@
+import { VNode } from 'vue'
 import { XYPosition, Position, SnapGrid, Element, XYZPosition, Dimensions, ElementData } from './flow'
 import { DefaultNodeTypes } from './components'
 import { HandleElement, ValidConnectionFunc } from './handle'
@@ -79,16 +80,16 @@ export interface NodeProps<Data = ElementData> {
   connectable: boolean
   /** absolute position in relation to parent elements + z-index */
   computedPosition: XYZPosition
-  /** x, y position */
+  /** node x, y (relative) position on graph */
   position: XYPosition
   /** dom element dimensions (width, height) */
   dimensions: Dimensions
-  label?:
-    | string
-    | {
-        props?: any
-        component: any
-      }
+  /**
+   * node label, either pass a string or a VNode
+   * For example like this: `h('div', props, children)`)
+   * Object is just a type-hack for Vue, ignore that
+   */
+  label?: string | VNode | Object
   /** called when used as target for new connection */
   isValidTargetPos?: ValidConnectionFunc
   /** called when used as source for new connection */