From 0dd5ed7836a465697840c29434e769eb31d4a777 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 22 Nov 2021 21:38:31 +0100
Subject: [PATCH] fix(types): edge text type

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 src/components/Edges/BezierEdge.vue     |  4 ++--
 src/components/Edges/EdgeText.vue       | 17 ++++++++---------
 src/components/Edges/SmoothStepEdge.vue |  4 ++--
 src/components/Edges/StepEdge.vue       |  4 ++--
 src/components/Edges/StraightEdge.vue   |  4 ++--
 src/composables/useHandle.ts            |  8 ++++----
 src/types/components.ts                 |  4 ++--
 src/types/edge.ts                       |  4 ++--
 8 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/src/components/Edges/BezierEdge.vue b/src/components/Edges/BezierEdge.vue
index 24ed4a6b..301ebd0c 100644
--- a/src/components/Edges/BezierEdge.vue
+++ b/src/components/Edges/BezierEdge.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { CSSProperties, DefineComponent } from 'vue'
+import { CSSProperties } from 'vue'
 import { ArrowHeadType, EdgeProps, EdgeTextProps, ElementId, Position } from '../../types'
 import { getCenter, getMarkerEnd, getBezierPath } from './utils'
 import EdgeText from './EdgeText.vue'
@@ -19,7 +19,7 @@ interface BezierEdgeProps extends EdgeProps {
   label?:
     | string
     | {
-        component: DefineComponent<EdgeTextProps>
+        component: any
         props?: EdgeTextProps
       }
   labelStyle?: CSSProperties
diff --git a/src/components/Edges/EdgeText.vue b/src/components/Edges/EdgeText.vue
index 22937124..0b610b64 100644
--- a/src/components/Edges/EdgeText.vue
+++ b/src/components/Edges/EdgeText.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { CSSProperties, DefineComponent } from 'vue'
+import { CSSProperties } from 'vue'
 
 interface EdgeTextProps {
   x: number
@@ -7,12 +7,12 @@ interface EdgeTextProps {
   label?:
     | string
     | {
-        component: DefineComponent
-        props?: Record<string, any>
+        component: any
+        props?: EdgeTextProps
       }
   labelStyle?: CSSProperties
   labelShowBg?: boolean
-  labelBgStyle?: any
+  labelBgStyle?: CSSProperties
   labelBgPadding?: [number, number]
   labelBgBorderRadius?: number
 }
@@ -28,7 +28,6 @@ const props = withDefaults(defineProps<EdgeTextProps>(), {
 const edgeRef = templateRef<SVGTextElement>('edge-text', null)
 const { width, height, x, y } = useElementBounding(edgeRef)
 const transform = computed(() => `translate(${props.x - width.value / 2 || 0} ${props.y - height.value / 2 || 0})`)
-const bgPadding = computed(() => [props.labelBgPadding[0], props.labelBgPadding[1]])
 </script>
 <script lang="ts">
 export default {
@@ -39,11 +38,11 @@ export default {
   <g :transform="transform" class="vue-flow__edge-textwrapper">
     <rect
       v-if="props.labelShowBg"
-      :width="width + 2 * bgPadding[0] + 'px'"
-      :height="height + 2 * bgPadding[1] + 'px'"
-      :x="-bgPadding[0]"
-      :y="-bgPadding[1]"
       class="vue-flow__edge-textbg"
+      :width="width + 2 * props.labelBgPadding[0] + 'px'"
+      :height="height + 2 * props.labelBgPadding[1] + 'px'"
+      :x="-props.labelBgPadding[0]"
+      :y="-props.labelBgPadding[1]"
       :style="props.labelBgStyle"
       :rx="props.labelBgBorderRadius"
       :ry="props.labelBgBorderRadius"
diff --git a/src/components/Edges/SmoothStepEdge.vue b/src/components/Edges/SmoothStepEdge.vue
index bf041d9f..c20ec850 100644
--- a/src/components/Edges/SmoothStepEdge.vue
+++ b/src/components/Edges/SmoothStepEdge.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { CSSProperties, DefineComponent } from 'vue'
+import { CSSProperties } from 'vue'
 import { ArrowHeadType, EdgeProps, EdgeTextProps, ElementId, Position } from '../../types'
 import EdgeText from './EdgeText.vue'
 import { getCenter, getMarkerEnd, getSmoothStepPath } from './utils'
@@ -19,7 +19,7 @@ interface SmoothStepEdgeProps extends EdgeProps {
   label?:
     | string
     | {
-        component: DefineComponent<EdgeTextProps>
+        component: any
         props?: EdgeTextProps
       }
   labelStyle?: CSSProperties
diff --git a/src/components/Edges/StepEdge.vue b/src/components/Edges/StepEdge.vue
index 3793f3ae..5d7bd8b0 100644
--- a/src/components/Edges/StepEdge.vue
+++ b/src/components/Edges/StepEdge.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { CSSProperties, DefineComponent } from 'vue'
+import { CSSProperties } from 'vue'
 import { ArrowHeadType, EdgeProps, EdgeTextProps, ElementId, Position } from '../../types'
 import SmoothStepEdge from './SmoothStepEdge.vue'
 
@@ -18,7 +18,7 @@ interface StepEdgeProps extends EdgeProps {
   label?:
     | string
     | {
-        component: DefineComponent<EdgeTextProps>
+        component: any
         props?: EdgeTextProps
       }
   labelStyle?: CSSProperties
diff --git a/src/components/Edges/StraightEdge.vue b/src/components/Edges/StraightEdge.vue
index c3595b2e..2f292bc4 100644
--- a/src/components/Edges/StraightEdge.vue
+++ b/src/components/Edges/StraightEdge.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { CSSProperties, DefineComponent } from 'vue'
+import { CSSProperties } from 'vue'
 import { ArrowHeadType, EdgeProps, EdgeTextProps, ElementId, Position } from '../../types'
 import EdgeText from './EdgeText.vue'
 import { getMarkerEnd, getBezierPath } from './utils'
@@ -19,7 +19,7 @@ interface StraightEdgeProps extends EdgeProps {
   label?:
     | string
     | {
-        component: DefineComponent<EdgeTextProps>
+        component: any
         props?: EdgeTextProps
       }
   labelStyle?: CSSProperties
diff --git a/src/composables/useHandle.ts b/src/composables/useHandle.ts
index 84c08db1..2294a3de 100644
--- a/src/composables/useHandle.ts
+++ b/src/composables/useHandle.ts
@@ -15,7 +15,7 @@ export const checkElementBelowIsValid = (
   connectionMode: ConnectionMode,
   isTarget: boolean,
   nodeId: ElementId,
-  handleId: ElementId | null,
+  handleId: ElementId,
   isValidConnection: ValidConnectionFunc,
   doc: Document,
 ) => {
@@ -26,7 +26,7 @@ export const checkElementBelowIsValid = (
   const result: Result = {
     elementBelow,
     isValid: false,
-    connection: { source: null, target: null, sourceHandle: null, targetHandle: null },
+    connection: { source: '', target: '', sourceHandle: '', targetHandle: '' },
     isHoveringHandle: false,
   }
 
@@ -38,8 +38,8 @@ export const checkElementBelowIsValid = (
       connectionMode === ConnectionMode.Strict ? (isTarget && elementBelowIsSource) || (!isTarget && elementBelowIsTarget) : true
 
     if (isValid) {
-      const elementBelowNodeId = elementBelow.getAttribute('data-nodeid')
-      const elementBelowHandleId = elementBelow.getAttribute('data-handleid')
+      const elementBelowNodeId = elementBelow.getAttribute('data-nodeid') ?? ''
+      const elementBelowHandleId = elementBelow.getAttribute('data-handleid') ?? ''
       const connection: Connection = isTarget
         ? {
             source: elementBelowNodeId,
diff --git a/src/types/components.ts b/src/types/components.ts
index fbbce184..b852e3c2 100644
--- a/src/types/components.ts
+++ b/src/types/components.ts
@@ -58,8 +58,8 @@ export interface MiniMapNodeProps {
 }
 
 export interface EdgeTextProps {
-  x?: number
-  y?: number
+  x: number
+  y: number
   label?:
     | string
     | {
diff --git a/src/types/edge.ts b/src/types/edge.ts
index 52922c96..f67435dc 100644
--- a/src/types/edge.ts
+++ b/src/types/edge.ts
@@ -15,8 +15,8 @@ export interface Edge<T = any> {
   label?:
     | string
     | {
-        component: DefineComponent<EdgeTextProps> | any
-        props?: EdgeTextProps | any
+        component: any
+        props?: EdgeTextProps
       }
   labelStyle?: any
   labelShowBg?: boolean