From f00f34d84b68a974e110506b88745dcad6d135b5 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 10 Dec 2021 18:09:13 +0100
Subject: [PATCH] refactor(types)!: Remove ElementId type

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 examples/DragNDrop/DnD.vue                    |  4 ++--
 examples/EdgeTypes/utils.ts                   |  4 ++--
 examples/EdgeWithButton/ButtonEdge.vue        |  4 ++--
 examples/Edges/CustomEdge.vue                 | 12 ++++++------
 examples/Edges/CustomEdge2.vue                | 12 ++++++------
 examples/Empty/EmptyExample.vue               |  3 +--
 .../Unidirectional/UnidirectionalExample.vue  |  3 +--
 .../UpdateNodeInternalsExample.vue            |  3 +--
 .../ZoomPanHelper/ZoomPanHelperExample.vue    |  3 +--
 .../ConnectionLine/ConnectionLine.vue         |  5 ++---
 src/components/Edges/BezierEdge.vue           | 19 +++++++------------
 src/components/Edges/EdgeText.vue             | 18 ++----------------
 src/components/Edges/SmoothStepEdge.vue       | 19 +++++++------------
 src/components/Edges/StepEdge.vue             | 19 +++++++------------
 src/components/Edges/StraightEdge.vue         | 19 +++++++------------
 src/components/Nodes/NodeWrapper.vue          |  3 ++-
 src/composables/useHandle.ts                  | 10 +++++-----
 src/container/EdgeRenderer/EdgeRenderer.vue   |  5 ++---
 src/container/SelectionPane/SelectionPane.vue |  4 ++--
 src/context/index.ts                          |  4 ++--
 src/types/components.ts                       |  4 ++--
 src/types/connection.ts                       | 18 +++++++++---------
 src/types/edge.ts                             | 14 +++++++-------
 src/types/flow.ts                             |  5 ++---
 src/types/node.ts                             | 12 +++++++-----
 src/types/store.ts                            |  5 ++---
 src/utils/edge.ts                             | 15 ++-------------
 src/utils/graph.ts                            |  3 +--
 28 files changed, 99 insertions(+), 150 deletions(-)

diff --git a/examples/DragNDrop/DnD.vue b/examples/DragNDrop/DnD.vue
index e3b8f289..917bd1e7 100644
--- a/examples/DragNDrop/DnD.vue
+++ b/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()
diff --git a/examples/EdgeTypes/utils.ts b/examples/EdgeTypes/utils.ts
index 1a37e8da..d19a23d1 100644
--- a/examples/EdgeTypes/utils.ts
+++ b/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 = []
diff --git a/examples/EdgeWithButton/ButtonEdge.vue b/examples/EdgeWithButton/ButtonEdge.vue
index 1d67efe6..879092ea 100644
--- a/examples/EdgeWithButton/ButtonEdge.vue
+++ b/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
diff --git a/examples/Edges/CustomEdge.vue b/examples/Edges/CustomEdge.vue
index 93dd561c..6b59e987 100644
--- a/examples/Edges/CustomEdge.vue
+++ b/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
-  target: ElementId
-  sourceHandleId?: ElementId
-  targetHandleId?: ElementId
-  id: ElementId
+  source: string
+  target: string
+  sourceHandleId?: string
+  targetHandleId?: string
+  id: string
   sourceX: number
   sourceY: number
   targetX: number
diff --git a/examples/Edges/CustomEdge2.vue b/examples/Edges/CustomEdge2.vue
index 8513d7a9..61e79cc0 100644
--- a/examples/Edges/CustomEdge2.vue
+++ b/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
-  target: ElementId
-  sourceHandleId?: ElementId
-  targetHandleId?: ElementId
-  id: ElementId
+  source: string
+  target: string
+  sourceHandleId?: string
+  targetHandleId?: string
+  id: string
   sourceX: number
   sourceY: number
   targetX: number
diff --git a/examples/Empty/EmptyExample.vue b/examples/Empty/EmptyExample.vue
index 064c9aca..5d5ce58a 100644
--- a/examples/Empty/EmptyExample.vue
+++ b/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}` },
diff --git a/examples/Unidirectional/UnidirectionalExample.vue b/examples/Unidirectional/UnidirectionalExample.vue
index 4c54de2c..57e05cec 100644
--- a/examples/Unidirectional/UnidirectionalExample.vue
+++ b/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))
diff --git a/examples/UpdateNodeInternals/UpdateNodeInternalsExample.vue b/examples/UpdateNodeInternals/UpdateNodeInternalsExample.vue
index 245a67c9..35dd6e96 100644
--- a/examples/UpdateNodeInternals/UpdateNodeInternalsExample.vue
+++ b/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>()
diff --git a/examples/ZoomPanHelper/ZoomPanHelperExample.vue b/examples/ZoomPanHelper/ZoomPanHelperExample.vue
index 3ec54463..04780fee 100644
--- a/examples/ZoomPanHelper/ZoomPanHelperExample.vue
+++ b/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()
 
diff --git a/src/components/ConnectionLine/ConnectionLine.vue b/src/components/ConnectionLine/ConnectionLine.vue
index 4b957235..23fe8b6b 100644
--- a/src/components/ConnectionLine/ConnectionLine.vue
+++ b/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
diff --git a/src/components/Edges/BezierEdge.vue b/src/components/Edges/BezierEdge.vue
index 6402a329..29f4c585 100644
--- a/src/components/Edges/BezierEdge.vue
+++ b/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>(), {
diff --git a/src/components/Edges/EdgeText.vue b/src/components/Edges/EdgeText.vue
index 00608649..ed20ee1b 100644
--- a/src/components/Edges/EdgeText.vue
+++ b/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>
diff --git a/src/components/Edges/SmoothStepEdge.vue b/src/components/Edges/SmoothStepEdge.vue
index a95f0b56..2c30529b 100644
--- a/src/components/Edges/SmoothStepEdge.vue
+++ b/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>(), {
diff --git a/src/components/Edges/StepEdge.vue b/src/components/Edges/StepEdge.vue
index 2cfca600..de19dfa6 100644
--- a/src/components/Edges/StepEdge.vue
+++ b/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>(), {
diff --git a/src/components/Edges/StraightEdge.vue b/src/components/Edges/StraightEdge.vue
index fd516cf8..c13748ea 100644
--- a/src/components/Edges/StraightEdge.vue
+++ b/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>(), {
diff --git a/src/components/Nodes/NodeWrapper.vue b/src/components/Nodes/NodeWrapper.vue
index 71b566c4..b19ce637 100644
--- a/src/components/Nodes/NodeWrapper.vue
+++ b/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 })
diff --git a/src/composables/useHandle.ts b/src/composables/useHandle.ts
index cf681b4b..9b89c7db 100644
--- a/src/composables/useHandle.ts
+++ b/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,
-  handleId: ElementId,
+  nodeId: string,
+  handleId: string,
   isValidConnection: ValidConnectionFunc,
   doc: Document,
 ) => {
@@ -70,8 +70,8 @@ const resetRecentHandle = (hoveredHandle: Element): void => {
 export default (store: FlowStore = useStore()) =>
   (
     event: MouseEvent,
-    handleId: ElementId,
-    nodeId: ElementId,
+    handleId: string,
+    nodeId: string,
     isTarget: boolean,
     isValidConnection?: ValidConnectionFunc,
     elementEdgeUpdaterType?: HandleType,
diff --git a/src/container/EdgeRenderer/EdgeRenderer.vue b/src/container/EdgeRenderer/EdgeRenderer.vue
index 23227d1a..38346e49 100644
--- a/src/container/EdgeRenderer/EdgeRenderer.vue
+++ b/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
diff --git a/src/container/SelectionPane/SelectionPane.vue b/src/container/SelectionPane/SelectionPane.vue
index 43b48ebf..b1ae608e 100644
--- a/src/container/SelectionPane/SelectionPane.vue
+++ b/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()))
diff --git a/src/context/index.ts b/src/context/index.ts
index e55a254d..0c034e88 100644
--- a/src/context/index.ts
+++ b/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')
diff --git a/src/types/components.ts b/src/types/components.ts
index 819148f4..e07fc772 100644
--- a/src/types/components.ts
+++ b/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
 }
 
diff --git a/src/types/connection.ts b/src/types/connection.ts
index 2e74a558..45a38db1 100644
--- a/src/types/connection.ts
+++ b/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
-  target: ElementId
-  sourceHandle?: ElementId
-  targetHandle?: ElementId
+  source: string
+  target: string
+  sourceHandle?: string
+  targetHandle?: string
 }
 
 export type ConnectionLineProps = {
@@ -28,8 +28,8 @@ export type ConnectionLineProps = {
 
 export type OnConnectFunc = (connection: Connection) => void
 export type OnConnectStartParams = {
-  nodeId?: ElementId
-  handleId?: ElementId
+  nodeId?: string
+  handleId?: string
   handleType?: HandleType
 }
 
@@ -39,7 +39,7 @@ export enum ConnectionMode {
 }
 
 export type SetConnectionId = {
-  connectionNodeId: ElementId | undefined
-  connectionHandleId: ElementId | undefined
+  connectionNodeId: string | undefined
+  connectionHandleId: string | undefined
   connectionHandleType: HandleType | undefined
 }
diff --git a/src/types/edge.ts b/src/types/edge.ts
index da03004b..1165d792 100644
--- a/src/types/edge.ts
+++ b/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
-  target: ElementId
-  sourceHandle?: ElementId
-  targetHandle?: ElementId
+  source: string
+  target: string
+  sourceHandle?: string
+  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
-  targetHandleId?: ElementId | null
+  sourceHandleId?: string
+  targetHandleId?: string
 }
 
 export interface EdgeSmoothStepProps<T = any> extends EdgeProps<T> {
diff --git a/src/types/flow.ts b/src/types/flow.ts
index 7500a9b7..ceabc081 100644
--- a/src/types/flow.ts
+++ b/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> = {
diff --git a/src/types/node.ts b/src/types/node.ts
index 9b30047e..432a9014 100644
--- a/src/types/node.ts
+++ b/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
 }
diff --git a/src/types/store.ts b/src/types/store.ts
index 80a82ee4..5156082c 100644
--- a/src/types/store.ts
+++ b/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
-  connectionHandleId?: ElementId
+  connectionNodeId?: string
+  connectionHandleId?: string
   connectionHandleType?: HandleType
   connectionPosition: XYPosition
   connectionMode: ConnectionMode
diff --git a/src/utils/edge.ts b/src/utils/edge.ts
index ccbec3f8..65b1b71d 100644
--- a/src/utils/edge.ts
+++ b/src/utils/edge.ts
@@ -1,16 +1,5 @@
 import { isGraphNode, rectToBox } from './graph'
-import {
-  Edge,
-  EdgePositions,
-  ElementId,
-  GraphNode,
-  HandleElement,
-  Position,
-  Transform,
-  XYPosition,
-  FlowElements,
-  GraphEdge,
-} from '~/types'
+import { Edge, EdgePositions, 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
diff --git a/src/utils/graph.ts b/src/utils/graph.ts
index 6a53e396..6b226787 100644
--- a/src/utils/graph.ts
+++ b/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) => {