fix(types): edge text type

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

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

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"

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

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

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

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,

src/types/components.ts

@@ -58,8 +58,8 @@ export interface MiniMapNodeProps {
 }
 
 export interface EdgeTextProps {
-  x?: number
-  y?: number
+  x: number
+  y: number
   label?:
     | string
     | {

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