refactor(types)!: Remove ElementId type

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

examples/DragNDrop/DnD.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import Sidebar from './Sidebar.vue'
-import { VueFlow, addEdge, removeElements, Controls, FlowInstance, Elements, Connection, Edge, ElementId, Node } from '~/index'
+import { VueFlow, addEdge, removeElements, Controls, FlowInstance, Elements, Connection, Edge, Node } from '~/index'
 import './dnd.css'
 
 const flowInstance = ref<FlowInstance>()
@@ -14,7 +14,7 @@ const elements = ref<Elements>([
 ])
 
 let id = 0
-const getId = (): ElementId => `dndnode_${id++}`
+const getId = () => `dndnode_${id++}`
 
 const onDragOver = (event: DragEvent) => {
   event.preventDefault()

examples/EdgeTypes/utils.ts

@@ -1,4 +1,4 @@
-import { ElementId, Elements, Position } from '../../src'
+import { Elements, Position } from '../../src'
 
 const nodeWidth = 80
 const nodeGapWidth = nodeWidth * 2
@@ -49,7 +49,7 @@ const offsets = [
 ]
 
 let id = 0
-const getNodeId = (): ElementId => (id++).toString()
+const getNodeId = () => (id++).toString()
 
 export function getElements(): Elements {
   const initialElements = []

examples/EdgeWithButton/ButtonEdge.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { getEdgeCenter, getBezierPath, getMarkerEnd, ArrowHeadType, ElementId, Position, useVueFlow, EdgeProps } from '~/index'
+import { getEdgeCenter, getBezierPath, getMarkerEnd, ArrowHeadType, Position, useVueFlow, EdgeProps } from '~/index'
 
 interface CustomEdgeProps<T = any> extends EdgeProps<T> {
-  id: ElementId
+  id: string
   sourceX: number
   sourceY: number
   targetX: number

examples/Edges/CustomEdge.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
-import { ArrowHeadType, ElementId, getBezierPath, getMarkerEnd, Position, EdgeProps } from '~/index'
+import { ArrowHeadType, getBezierPath, getMarkerEnd, Position, EdgeProps } from '~/index'
 
 interface CustomEdgeProps<T = { text: string }> extends EdgeProps<T> {
-  source: ElementId
+  source: string
-  target: ElementId
+  target: string
-  sourceHandleId?: ElementId
+  sourceHandleId?: string
-  targetHandleId?: ElementId
+  targetHandleId?: string
-  id: ElementId
+  id: string
   sourceX: number
   sourceY: number
   targetX: number

examples/Edges/CustomEdge2.vue

@@ -1,13 +1,13 @@
 <script lang="ts" setup>
 import { getBezierPath, getMarkerEnd } from '~/components/Edges/utils'
-import { ArrowHeadType, ElementId, getEdgeCenter, Position, EdgeText, EdgeProps } from '~/index'
+import { ArrowHeadType, getEdgeCenter, Position, EdgeText, EdgeProps } from '~/index'
 
 interface CustomEdgeProps extends EdgeProps {
-  source: ElementId
+  source: string
-  target: ElementId
+  target: string
-  sourceHandleId?: ElementId
+  sourceHandleId?: string
-  targetHandleId?: ElementId
+  targetHandleId?: string
-  id: ElementId
+  id: string
   sourceX: number
   sourceY: number
   targetX: number

examples/Empty/EmptyExample.vue

@@ -8,7 +8,6 @@ import {
   BackgroundVariant,
   Connection,
   Edge,
-  ElementId,
   Elements,
   FlowElement,
   Node,
@@ -27,7 +26,7 @@ const onNodeDragStop = (node: Node) => console.log('drag stop', node)
 
 const buttonStyle: CSSProperties = { position: 'absolute', left: '10px', top: '10px', zIndex: 4 }
 const addRandomNode = () => {
-  const nodeId: ElementId = (elements.value.length + 1).toString()
+  const nodeId = (elements.value.length + 1).toString()
   const newNode: Node = {
     id: nodeId,
     data: { label: `Node: ${nodeId}` },

examples/Unidirectional/UnidirectionalExample.vue

@@ -7,7 +7,6 @@ import {
   Elements,
   Connection,
   Edge,
-  ElementId,
   Node,
   ConnectionLineType,
   ConnectionMode,
@@ -172,7 +171,7 @@ const initialElements: Elements = [
 ]
 
 let id = 4
-const getId = (): ElementId => `${id++}`
+const getId = () => `${id++}`
 
 const elements = ref(initialElements)
 const onConnect = (params: Connection | Edge) => (elements.value = addEdge({ ...params, type: 'smoothstep' }, elements.value))

examples/UpdateNodeInternals/UpdateNodeInternalsExample.vue

@@ -9,7 +9,6 @@ import {
   Elements,
   Connection,
   Edge,
-  ElementId,
   Position,
   isEdge,
   FlowInstance,
@@ -29,7 +28,7 @@ const initialElements: Elements = [
 const buttonWrapperStyles: CSSProperties = { position: 'absolute', right: 10, top: 10, zIndex: 10 }
 
 let id = 5
-const getId = (): ElementId => `${id++}`
+const getId = () => `${id++}`
 
 const elements = ref<Elements>(initialElements)
 const flowInstance = ref<FlowInstance>()

examples/ZoomPanHelper/ZoomPanHelperExample.vue

@@ -7,7 +7,6 @@ import {
   MiniMap,
   useZoomPanHelper,
   Elements,
-  ElementId,
   Connection,
   Edge,
   Node,
@@ -23,7 +22,7 @@ const initialElements: Elements = [
 ]
 
 let id = 5
-const getId = (): ElementId => `${id++}`
+const getId = () => `${id++}`
 
 const { project } = useZoomPanHelper()
 

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
+  connectionHandleId?: string
-  connectionNodeId?: ElementId
+  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
+  id: string
-  source: ElementId
+  source: string
-  target: ElementId
+  target: string
   sourceX: number
   sourceY: number
   targetX: number
@@ -16,12 +16,7 @@ interface BezierEdgeProps extends EdgeProps {
   animated?: boolean
   sourcePosition: Position
   targetPosition: Position
-  label?:
+  label?: string
-    | string
-    | {
-        component: any
-        props?: Record<string, any> & Partial<EdgeTextProps>
-      }
   labelStyle?: CSSProperties
   labelShowBg?: boolean
   labelBgStyle?: CSSProperties
@@ -29,8 +24,8 @@ interface BezierEdgeProps extends EdgeProps {
   labelBgBorderRadius?: number
   arrowHeadType?: ArrowHeadType
   markerEndId?: string
-  sourceHandleId?: ElementId
+  sourceHandleId?: string
-  targetHandleId?: ElementId
+  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?:
+  label?: string
-    | string
-    | {
-        component: any
-        props?: Record<string, any> & Partial<EdgeTextProps>
-      }
   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">
+      {{ props.label }}
-        <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>

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
+  id: string
-  source: ElementId
+  source: string
-  target: ElementId
+  target: string
   sourceX: number
   sourceY: number
   targetX: number
@@ -16,12 +16,7 @@ interface SmoothStepEdgeProps extends EdgeProps {
   animated?: boolean
   sourcePosition: Position
   targetPosition: Position
-  label?:
+  label?: string
-    | string
-    | {
-        component: any
-        props?: Record<string, any> & Partial<EdgeTextProps>
-      }
   labelStyle?: CSSProperties
   labelShowBg?: boolean
   labelBgStyle?: CSSProperties
@@ -30,8 +25,8 @@ interface SmoothStepEdgeProps extends EdgeProps {
   arrowHeadType?: ArrowHeadType
   markerEndId?: string
   borderRadius?: number
-  sourceHandleId?: ElementId | null
+  sourceHandleId?: string
-  targetHandleId?: ElementId | null
+  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
+  id: string
-  source: ElementId
+  source: string
-  target: ElementId
+  target: string
   sourceX: number
   sourceY: number
   targetX: number
@@ -15,12 +15,7 @@ interface StepEdgeProps extends EdgeProps {
   animated?: boolean
   sourcePosition: Position
   targetPosition: Position
-  label?:
+  label?: string
-    | string
-    | {
-        component: any
-        props?: Record<string, any> & Partial<EdgeTextProps>
-      }
   labelStyle?: CSSProperties
   labelShowBg?: boolean
   labelBgStyle?: CSSProperties
@@ -28,8 +23,8 @@ interface StepEdgeProps extends EdgeProps {
   labelBgBorderRadius?: number
   arrowHeadType?: ArrowHeadType
   markerEndId?: string
-  sourceHandleId?: ElementId | null
+  sourceHandleId?: string
-  targetHandleId?: ElementId | null
+  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
+  id: string
-  source: ElementId
+  source: string
-  target: ElementId
+  target: string
   sourceX: number
   sourceY: number
   targetX: number
@@ -16,12 +16,7 @@ interface StraightEdgeProps extends EdgeProps {
   animated?: boolean
   sourcePosition: Position
   targetPosition: Position
-  label?:
+  label?: string
-    | string
-    | {
-        component: any
-        props?: Record<string, any> & Partial<EdgeTextProps>
-      }
   labelStyle?: CSSProperties
   labelShowBg?: boolean
   labelBgStyle?: CSSProperties
@@ -29,8 +24,8 @@ interface StraightEdgeProps extends EdgeProps {
   labelBgBorderRadius?: number
   arrowHeadType?: ArrowHeadType
   markerEndId?: string
-  sourceHandleId?: ElementId | null
+  sourceHandleId?: string
-  targetHandleId?: ElementId | null
+  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 })

src/composables/useHandle.ts

@@ -1,6 +1,6 @@
 import useStore from './useStore'
 import { getHostForElement } from '~/utils'
-import { Connection, ConnectionMode, ElementId, HandleType, FlowStore, ValidConnectionFunc } from '~/types'
+import { Connection, ConnectionMode, HandleType, FlowStore, ValidConnectionFunc } from '~/types'
 
 type Result = {
   elementBelow: Element | null
@@ -14,8 +14,8 @@ export const checkElementBelowIsValid = (
   event: MouseEvent,
   connectionMode: ConnectionMode,
   isTarget: boolean,
-  nodeId: ElementId,
+  nodeId: string,
-  handleId: ElementId,
+  handleId: string,
   isValidConnection: ValidConnectionFunc,
   doc: Document,
 ) => {
@@ -70,8 +70,8 @@ const resetRecentHandle = (hoveredHandle: Element): void => {
 export default (store: FlowStore = useStore()) =>
   (
     event: MouseEvent,
-    handleId: ElementId,
+    handleId: string,
-    nodeId: ElementId,
+    nodeId: string,
     isTarget: boolean,
     isValidConnection?: ValidConnectionFunc,
     elementEdgeUpdaterType?: HandleType,

src/container/EdgeRenderer/EdgeRenderer.vue

@@ -5,7 +5,6 @@ import {
   ConnectionMode,
   Dimensions,
   EdgeComponent,
-  ElementId,
   GraphEdge,
   GraphNode,
   HandleType,
@@ -28,9 +27,9 @@ interface EdgeRendererProps {
   markerEndId?: string
   elementsSelectable?: boolean
   edgeUpdaterRadius?: number
-  connectionNodeId?: ElementId
+  connectionNodeId?: string
   connectionHandleType?: HandleType
-  connectionHandleId?: ElementId
+  connectionHandleId?: string
   connectionPosition?: XYPosition
   connectionMode: ConnectionMode
   nodesConnectable?: boolean

src/container/SelectionPane/SelectionPane.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ElementId, FlowElement, FlowElements, GraphEdge, KeyCode } from '../../types'
+import { FlowElement, FlowElements, GraphEdge, KeyCode } from '../../types'
 import { useStore, useKeyPress } from '../../composables'
 import { getConnectedEdges, isGraphNode } from '../../utils'
 import NodesSelection from '../../components/NodesSelection/NodesSelection.vue'
@@ -44,7 +44,7 @@ tryOnMounted(() => {
       const connectedEdges = getConnectedEdges(selectedNodes, props.edges)
       const elementsToRemove = [...props.selectedElements, ...connectedEdges].reduce(
         (res, item) => res.set(item.id, item),
-        new Map<ElementId, FlowElement>(),
+        new Map<string, FlowElement>(),
       )
 
       store.hooks.elementsRemove.trigger(Array.from(elementsToRemove.values()))

src/context/index.ts

@@ -1,5 +1,5 @@
 import { InjectionKey } from 'vue'
-import { ElementId, Store as TStore } from '~/types'
+import { Store as TStore } from '~/types'
 
 export const StoreSymbol: InjectionKey<TStore> = Symbol('store')
-export const NodeId: InjectionKey<ElementId> = Symbol('nodeId')
+export const NodeId: InjectionKey<string> = Symbol('nodeId')

src/types/components.ts

@@ -1,5 +1,5 @@
 import { Component, CSSProperties, DefineComponent } from 'vue'
-import { BackgroundVariant, Dimensions, ElementId, Elements, FitViewParams, FlowOptions, Position, XYPosition } from './flow'
+import { BackgroundVariant, Dimensions, Elements, FitViewParams, FlowOptions, Position, XYPosition } from './flow'
 import { Connection, ConnectionLineType, ConnectionMode } from './connection'
 import { GraphNode, Node, NodeProps, CoordinateExtent } from './node'
 import { EdgeProps } from './edge'
@@ -15,7 +15,7 @@ export type EdgeComponent = Component<EdgeProps> | DefineComponent<EdgeProps, an
 export type HandleType = 'source' | 'target'
 
 export interface HandleElement extends XYPosition, Dimensions {
-  id?: ElementId
+  id?: string
   position: Position
 }
 

src/types/connection.ts

@@ -1,4 +1,4 @@
-import { ElementId, Position } from './flow'
+import { Position } from './flow'
 import { HandleType } from './components'
 
 export enum ConnectionLineType {
@@ -9,10 +9,10 @@ export enum ConnectionLineType {
 }
 
 export interface Connection {
-  source: ElementId
+  source: string
-  target: ElementId
+  target: string
-  sourceHandle?: ElementId
+  sourceHandle?: string
-  targetHandle?: ElementId
+  targetHandle?: string
 }
 
 export type ConnectionLineProps = {
@@ -28,8 +28,8 @@ export type ConnectionLineProps = {
 
 export type OnConnectFunc = (connection: Connection) => void
 export type OnConnectStartParams = {
-  nodeId?: ElementId
+  nodeId?: string
-  handleId?: ElementId
+  handleId?: string
   handleType?: HandleType
 }
 
@@ -39,7 +39,7 @@ export enum ConnectionMode {
 }
 
 export type SetConnectionId = {
-  connectionNodeId: ElementId | undefined
+  connectionNodeId: string | undefined
-  connectionHandleId: ElementId | undefined
+  connectionHandleId: string | undefined
   connectionHandleType: HandleType | undefined
 }

src/types/edge.ts

@@ -1,11 +1,11 @@
-import { ArrowHeadType, ElementId, Position, Element } from './flow'
+import { ArrowHeadType, Position, Element } from './flow'
 import { GraphNode } from './node'
 
 export interface Edge<T = any> extends Element<T> {
-  source: ElementId
+  source: string
-  target: ElementId
+  target: string
-  sourceHandle?: ElementId
+  sourceHandle?: string
-  targetHandle?: ElementId
+  targetHandle?: string
   sourcePosition?: Position
   targetPosition?: Position
   labelStyle?: any
@@ -33,8 +33,8 @@ export interface EdgeProps<T = any> extends GraphEdge<T> {
   sourcePosition: Position
   targetPosition: Position
   markerEndId?: string
-  sourceHandleId?: ElementId | null
+  sourceHandleId?: string
-  targetHandleId?: ElementId | null
+  targetHandleId?: string
 }
 
 export interface EdgeSmoothStepProps<T = any> extends EdgeProps<T> {

src/types/flow.ts

@@ -5,11 +5,10 @@ import { ConnectionLineType, ConnectionMode } from './connection'
 import { KeyCode, PanOnScrollMode } from './zoom'
 import { EdgeTypes, NodeTypes } from './components'
 
-export type ElementId = string
 export type FlowElement<DataNode = any, DataEdge = any> = GraphNode<DataNode> | GraphEdge<DataEdge>
 export type FlowElements<DataNode = any, DataEdge = any> = FlowElement<DataNode, DataEdge>[]
 export interface Element<Data = any> {
-  id: ElementId
+  id: string
   label?: string
   type?: string
   data?: Data
@@ -78,7 +77,7 @@ export type FitViewParams = {
     y?: number
   }
   transitionDuration?: number
-  nodes?: ElementId[]
+  nodes?: string[]
 }
 
 export type FlowExportObject<T = any> = {

src/types/node.ts

@@ -1,7 +1,9 @@
 import { DraggableOptions } from '@braks/revue-draggable'
-import { XYPosition, ElementId, Position, SnapGrid, Element } from './flow'
+import { XYPosition, Position, SnapGrid, Element } from './flow'
 import { HandleElement, ValidConnectionFunc } from './components'
 
+export type CoordinateExtent = [[number, number], [number, number]]
+
 export interface VFInternals {
   isDragging?: boolean
   width: number
@@ -25,6 +27,8 @@ export interface Node<T = any> extends Element<T> {
   snapGrid?: SnapGrid
   isValidTargetPos?: ValidConnectionFunc
   isValidSourcePos?: ValidConnectionFunc
+  extent?: 'parent' | CoordinateExtent
+  parentNode?: string
 }
 
 export interface GraphNode<T = any> extends Node<T> {
@@ -32,7 +36,7 @@ export interface GraphNode<T = any> extends Node<T> {
 }
 
 export interface NodeProps<T = any> extends GraphNode {
-  id: ElementId
+  id: string
   position: XYPosition
   type?: string
   data?: T
@@ -46,10 +50,8 @@ export interface NodeProps<T = any> extends GraphNode {
   __vf: VFInternals
 }
 
-export type CoordinateExtent = [[number, number], [number, number]]
-
 export type NodeDimensionUpdate = {
-  id: ElementId
+  id: string
   nodeElement: HTMLDivElement
   forceUpdate?: boolean
 }

src/types/store.ts

@@ -2,7 +2,6 @@ import { ComputedRef, ToRefs } from 'vue'
 import { UnwrapNestedRefs } from '@vue/reactivity'
 import {
   Dimensions,
-  ElementId,
   Elements,
   FlowElements,
   FlowInstance,
@@ -52,8 +51,8 @@ export interface FlowState extends Omit<FlowOptions, 'elements' | 'id'> {
   multiSelectionKeyCode: KeyCode
   zoomActivationKeyCode: KeyCode
 
-  connectionNodeId?: ElementId
+  connectionNodeId?: string
-  connectionHandleId?: ElementId
+  connectionHandleId?: string
   connectionHandleType?: HandleType
   connectionPosition: XYPosition
   connectionMode: ConnectionMode

src/utils/edge.ts

@@ -1,16 +1,5 @@
 import { isGraphNode, rectToBox } from './graph'
-import {
+import { Edge, EdgePositions, GraphNode, HandleElement, Position, Transform, XYPosition, FlowElements, GraphEdge } from '~/types'
-  Edge,
-  EdgePositions,
-  ElementId,
-  GraphNode,
-  HandleElement,
-  Position,
-  Transform,
-  XYPosition,
-  FlowElements,
-  GraphEdge,
-} from '~/types'
 
 export function getHandlePosition(position: Position, node: GraphNode, handle?: HandleElement): XYPosition {
   const x = (handle?.x ?? 0) + node.position.x
@@ -42,7 +31,7 @@ export function getHandlePosition(position: Position, node: GraphNode, handle?:
   }
 }
 
-export function getHandle(bounds: HandleElement[], handleId?: ElementId): HandleElement | undefined {
+export function getHandle(bounds: HandleElement[], handleId?: string): HandleElement | undefined {
   if (!bounds) return undefined
 
   // there is no handleId when there are no multiple handles/ handles with ids

src/utils/graph.ts

@@ -1,6 +1,5 @@
 import { getSourceTargetNodes } from './edge'
 import {
-  ElementId,
   Node,
   Edge,
   Elements,
@@ -81,7 +80,7 @@ export const removeElements = (elementsToRemove: Elements, elements: Elements) =
   return elements.filter((element) => !shouldRemove(element))
 }
 
-const getEdgeId = ({ source, sourceHandle, target, targetHandle }: Connection): ElementId =>
+const getEdgeId = ({ source, sourceHandle, target, targetHandle }: Connection) =>
   `vueflow__edge-${source}${sourceHandle}-${target}${targetHandle}`
 
 const connectionExists = (edge: Edge, elements: Elements) => {