refactor(types)!: Remove ElementId type

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

src/components/ConnectionLine/ConnectionLine.vue

@@ -5,7 +5,6 @@ import {
   ConnectionLineType,
   HandleElement,
   Position,
-  ElementId,
   HandleType,
   XYPosition,
   ConnectionMode,
@@ -17,8 +16,8 @@ interface ConnectionLineProps {
   sourceNode: GraphNode
   connectionLineType?: ConnectionLineType
   connectionLineStyle?: CSSProperties
-  connectionHandleId?: ElementId
-  connectionNodeId?: ElementId
+  connectionHandleId?: string
+  connectionNodeId?: string
   connectionHandleType?: HandleType
   connectionPosition?: XYPosition
   connectionMode: ConnectionMode

src/components/Edges/BezierEdge.vue

@@ -1,13 +1,13 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import { ArrowHeadType, EdgeProps, EdgeTextProps, ElementId, Position } from '../../types'
+import { ArrowHeadType, EdgeProps, Position } from '../../types'
 import { getCenter, getMarkerEnd, getBezierPath } from './utils'
 import EdgeText from './EdgeText.vue'
 
 interface BezierEdgeProps extends EdgeProps {
-  id: ElementId
-  source: ElementId
-  target: ElementId
+  id: string
+  source: string
+  target: string
   sourceX: number
   sourceY: number
   targetX: number
@@ -16,12 +16,7 @@ interface BezierEdgeProps extends EdgeProps {
   animated?: boolean
   sourcePosition: Position
   targetPosition: Position
-  label?:
-    | string
-    | {
-        component: any
-        props?: Record<string, any> & Partial<EdgeTextProps>
-      }
+  label?: string
   labelStyle?: CSSProperties
   labelShowBg?: boolean
   labelBgStyle?: CSSProperties
@@ -29,8 +24,8 @@ interface BezierEdgeProps extends EdgeProps {
   labelBgBorderRadius?: number
   arrowHeadType?: ArrowHeadType
   markerEndId?: string
-  sourceHandleId?: ElementId
-  targetHandleId?: ElementId
+  sourceHandleId?: string
+  targetHandleId?: string
 }
 
 const props = withDefaults(defineProps<BezierEdgeProps>(), {

src/components/Edges/EdgeText.vue

@@ -4,12 +4,7 @@ import { CSSProperties } from 'vue'
 interface EdgeTextProps {
   x: number
   y: number
-  label?:
-    | string
-    | {
-        component: any
-        props?: Record<string, any> & Partial<EdgeTextProps>
-      }
+  label?: string
   labelStyle?: CSSProperties
   labelShowBg?: boolean
   labelBgStyle?: CSSProperties
@@ -48,16 +43,7 @@ export default {
       :ry="props.labelBgBorderRadius"
     />
     <text ref="edge-text" class="vue-flow__edge-text" :y="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, ...props.label?.props, width, height, x, y }"
-        />
-        <template v-else v-html="props.label">
-          {{ props.label }}
-        </template>
-      </slot>
+      {{ props.label }}
     </text>
   </g>
 </template>

src/components/Edges/SmoothStepEdge.vue

@@ -1,13 +1,13 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import { ArrowHeadType, EdgeProps, EdgeTextProps, ElementId, Position } from '../../types'
+import { ArrowHeadType, EdgeProps, EdgeTextProps, Position } from '../../types'
 import EdgeText from './EdgeText.vue'
 import { getCenter, getMarkerEnd, getSmoothStepPath } from './utils'
 
 interface SmoothStepEdgeProps extends EdgeProps {
-  id: ElementId
-  source: ElementId
-  target: ElementId
+  id: string
+  source: string
+  target: string
   sourceX: number
   sourceY: number
   targetX: number
@@ -16,12 +16,7 @@ interface SmoothStepEdgeProps extends EdgeProps {
   animated?: boolean
   sourcePosition: Position
   targetPosition: Position
-  label?:
-    | string
-    | {
-        component: any
-        props?: Record<string, any> & Partial<EdgeTextProps>
-      }
+  label?: string
   labelStyle?: CSSProperties
   labelShowBg?: boolean
   labelBgStyle?: CSSProperties
@@ -30,8 +25,8 @@ interface SmoothStepEdgeProps extends EdgeProps {
   arrowHeadType?: ArrowHeadType
   markerEndId?: string
   borderRadius?: number
-  sourceHandleId?: ElementId | null
-  targetHandleId?: ElementId | null
+  sourceHandleId?: string
+  targetHandleId?: string
 }
 
 const props = withDefaults(defineProps<SmoothStepEdgeProps>(), {

src/components/Edges/StepEdge.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import { ArrowHeadType, EdgeProps, EdgeTextProps, ElementId, Position } from '../../types'
+import { ArrowHeadType, EdgeProps, Position } from '../../types'
 import SmoothStepEdge from './SmoothStepEdge.vue'
 
 interface StepEdgeProps extends EdgeProps {
-  id: ElementId
-  source: ElementId
-  target: ElementId
+  id: string
+  source: string
+  target: string
   sourceX: number
   sourceY: number
   targetX: number
@@ -15,12 +15,7 @@ interface StepEdgeProps extends EdgeProps {
   animated?: boolean
   sourcePosition: Position
   targetPosition: Position
-  label?:
-    | string
-    | {
-        component: any
-        props?: Record<string, any> & Partial<EdgeTextProps>
-      }
+  label?: string
   labelStyle?: CSSProperties
   labelShowBg?: boolean
   labelBgStyle?: CSSProperties
@@ -28,8 +23,8 @@ interface StepEdgeProps extends EdgeProps {
   labelBgBorderRadius?: number
   arrowHeadType?: ArrowHeadType
   markerEndId?: string
-  sourceHandleId?: ElementId | null
-  targetHandleId?: ElementId | null
+  sourceHandleId?: string
+  targetHandleId?: string
 }
 
 const props = withDefaults(defineProps<StepEdgeProps>(), {

src/components/Edges/StraightEdge.vue

@@ -1,13 +1,13 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import { ArrowHeadType, EdgeProps, EdgeTextProps, ElementId, Position } from '../../types'
+import { ArrowHeadType, EdgeProps, Position } from '../../types'
 import EdgeText from './EdgeText.vue'
 import { getMarkerEnd, getBezierPath } from './utils'
 
 interface StraightEdgeProps extends EdgeProps {
-  id: ElementId
-  source: ElementId
-  target: ElementId
+  id: string
+  source: string
+  target: string
   sourceX: number
   sourceY: number
   targetX: number
@@ -16,12 +16,7 @@ interface StraightEdgeProps extends EdgeProps {
   animated?: boolean
   sourcePosition: Position
   targetPosition: Position
-  label?:
-    | string
-    | {
-        component: any
-        props?: Record<string, any> & Partial<EdgeTextProps>
-      }
+  label?: string
   labelStyle?: CSSProperties
   labelShowBg?: boolean
   labelBgStyle?: CSSProperties
@@ -29,8 +24,8 @@ interface StraightEdgeProps extends EdgeProps {
   labelBgBorderRadius?: number
   arrowHeadType?: ArrowHeadType
   markerEndId?: string
-  sourceHandleId?: ElementId | null
-  targetHandleId?: ElementId | null
+  sourceHandleId?: string
+  targetHandleId?: string
 }
 
 const props = withDefaults(defineProps<StraightEdgeProps>(), {

src/components/Nodes/NodeWrapper.vue

@@ -61,12 +61,13 @@ const onDragStart: DraggableEventListener = ({ event }) => {
   }
 }
 const onDrag: DraggableEventListener = ({ event, data: { deltaY, deltaX } }) => {
+  const extent = node.value.extent ?? store.nodeExtent
   node.value.position = clampPosition(
     {
       x: (node.value.position.x += deltaX),
       y: (node.value.position.y += deltaY),
     },
-    store.nodeExtent,
+    extent,
   )
   node.value.__vf.isDragging = true
   store.hooks.nodeDrag.trigger({ event, node: props.node })