refactor(types)!: Remove ElementId type

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

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
-  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
 }

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> {

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
-  connectionHandleId?: ElementId
+  connectionNodeId?: string
+  connectionHandleId?: string
   connectionHandleType?: HandleType
   connectionPosition: XYPosition
   connectionMode: ConnectionMode