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
-  target: ElementId
-  sourceHandleId?: ElementId
-  targetHandleId?: ElementId
-  id: ElementId
+  source: string
+  target: string
+  sourceHandleId?: string
+  targetHandleId?: string
+  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
-  target: ElementId
-  sourceHandleId?: ElementId
-  targetHandleId?: ElementId
-  id: ElementId
+  source: string
+  target: string
+  sourceHandleId?: string
+  targetHandleId?: string
+  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()