refactor(types)!: Remove elements and replace with nodes and edges

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

src/types/components.ts

@@ -1,9 +1,8 @@
 import { Component, CSSProperties, DefineComponent } from 'vue'
-import { BackgroundVariant, Dimensions, Elements, FitViewParams, FlowOptions, Position, XYPosition } from './flow'
-import { Connection, ConnectionLineType, ConnectionMode } from './connection'
-import { GraphNode, Node, NodeProps, CoordinateExtent } from './node'
+import { BackgroundVariant, Dimensions, FitViewParams, Position, XYPosition } from './flow'
+import { Connection, ConnectionLineType } from './connection'
+import { GraphNode, Node, NodeProps } from './node'
 import { EdgeProps } from './edge'
-import { KeyCode, PanOnScrollMode } from './zoom'
 
 export type DefaultEdgeTypes = { [key in 'default' | 'straight' | 'smoothstep' | 'step']: Component<EdgeProps> }
 export type EdgeTypes = (keyof DefaultEdgeTypes | string)[]
@@ -63,10 +62,8 @@ export interface MiniMapProps {
 }
 
 export interface MiniMapNodeProps {
-  x?: number
-  y?: number
-  width?: number
-  height?: number
+  position: XYPosition
+  dimensions: Dimensions
   borderRadius?: number
   color?: string
   shapeRendering?: CSSProperties['shapeRendering']
@@ -103,43 +100,3 @@ export interface CustomConnectionLineProps {
   sourceNode: GraphNode
   sourceHandle: HandleElement
 }
-
-export interface FlowProps extends FlowOptions {
-  id?: string
-  modelValue?: Elements
-  nodeTypes?: NodeTypes
-  edgeTypes?: EdgeTypes
-  connectionMode?: ConnectionMode
-  connectionLineType?: ConnectionLineType
-  connectionLineStyle?: CSSProperties
-  deleteKeyCode?: KeyCode
-  selectionKeyCode?: KeyCode
-  multiSelectionKeyCode?: KeyCode
-  zoomActivationKeyCode?: KeyCode
-  preventScrolling?: boolean
-  snapToGrid?: boolean
-  snapGrid?: [number, number]
-  onlyRenderVisibleElements?: boolean
-  nodesDraggable?: boolean
-  nodesConnectable?: boolean
-  elementsSelectable?: boolean
-  selectNodesOnDrag?: boolean
-  paneMoveable?: boolean
-  minZoom?: number
-  maxZoom?: number
-  defaultZoom?: number
-  defaultPosition?: [number, number]
-  translateExtent?: CoordinateExtent
-  nodeExtent?: CoordinateExtent
-  arrowHeadColor?: string
-  markerEndId?: string
-  zoomOnScroll?: boolean
-  zoomOnPinch?: boolean
-  panOnScroll?: boolean
-  panOnScrollSpeed?: number
-  panOnScrollMode?: PanOnScrollMode
-  zoomOnDoubleClick?: boolean
-  edgeUpdaterRadius?: number
-  storageKey?: string
-  loading?: string
-}

src/types/flow.ts

@@ -1,6 +1,6 @@
 import { CSSProperties } from 'vue'
-import { Edge, GraphEdge } from './edge'
-import { GraphNode, Node, CoordinateExtent } from './node'
+import { GraphEdge, Edge } from './edge'
+import { GraphNode, CoordinateExtent, Node } from './node'
 import { ConnectionLineType, ConnectionMode } from './connection'
 import { KeyCode, PanOnScrollMode } from './zoom'
 import { EdgeTypes, NodeTypes } from './components'
@@ -82,8 +82,9 @@ export type FitViewParams = {
   nodes?: string[]
 }
 
-export type FlowExportObject<T = any> = {
-  elements: FlowElements<T>
+export type FlowExportObject<DataNode = any, DataEdge = DataNode> = {
+  nodes: GraphNode<DataNode>[]
+  edges: GraphEdge<DataEdge>[]
   position: [number, number]
   zoom: number
 }
@@ -96,21 +97,24 @@ export type FlowTransform = {
 
 export type FitViewFunc = (fitViewOptions?: FitViewParams) => void
 export type ProjectFunc = (position: XYPosition) => XYPosition
-export type ToObjectFunc<T = any> = () => FlowExportObject<T>
+export type ToObjectFunc<DataNode = any, DataEdge = DataNode> = () => FlowExportObject<DataNode, DataEdge>
 
-export type FlowInstance<T = any> = {
+export type FlowInstance<DataNode = any, DataEdge = DataNode> = {
   zoomIn: () => void
   zoomOut: () => void
   zoomTo: (zoomLevel: number) => void
   fitView: FitViewFunc
   project: ProjectFunc
-  getElements: () => FlowElements<T>
+  getNodes: () => GraphNode[]
+  getEdges: () => GraphEdge[]
   setTransform: (transform: FlowTransform) => void
-  toObject: ToObjectFunc<T>
+  toObject: ToObjectFunc<DataNode, DataEdge>
 }
 
-export interface FlowProps {
-  modelValue?: Elements
+export interface FlowProps<DataNode = any, DataEdge = DataNode> {
+  nodes: GraphNode<DataNode>[]
+  edges?: GraphEdge<DataEdge>[]
+  elements?: Elements
   id?: string
   nodeTypes?: NodeTypes
   edgeTypes?: EdgeTypes
@@ -150,6 +154,4 @@ export interface FlowProps {
   loading?: string
 }
 
-export interface FlowOptions extends Omit<FlowProps, 'modelValue'> {
-  elements?: Elements
-}
+export type FlowOptions = FlowProps

src/types/node.ts

@@ -1,5 +1,5 @@
 import { DraggableOptions } from '@braks/revue-draggable'
-import { XYPosition, Position, SnapGrid, Element, XYZPosition } from './flow'
+import { XYPosition, Position, SnapGrid, Element, XYZPosition, Dimensions } from './flow'
 import { HandleElement, ValidConnectionFunc } from './components'
 
 export type CoordinateExtent = [[number, number], [number, number]]
@@ -19,8 +19,7 @@ export interface Node<T = any> extends Element<T> {
   isValidSourcePos?: ValidConnectionFunc
   extent?: 'parent' | CoordinateExtent
   children?: Node[]
-  width?: number
-  height?: number
+  dimensions?: Dimensions
 }
 
 export interface GraphNode<T = any> extends Node<T> {
@@ -33,8 +32,7 @@ export interface GraphNode<T = any> extends Node<T> {
   computedPosition: XYZPosition
   selected?: boolean
   dragging?: boolean
-  width: number
-  height: number
+  dimensions: Dimensions
 }
 
 export interface NodeProps<T = any> extends GraphNode {
@@ -60,5 +58,5 @@ export interface NodeProps<T = any> extends GraphNode {
 export type NodeDimensionUpdate = {
   id: string
   nodeElement: HTMLDivElement
-  forceUpdate?: boolean
+  dimensions: Dimensions
 }

src/types/store.ts

@@ -23,7 +23,9 @@ export interface FlowState extends Omit<FlowOptions, 'elements' | 'id'> {
   hooks: FlowHooks
   instance?: FlowInstance
 
-  elements: FlowElements
+  elements: Elements
+  nodes: GraphNode[]
+  edges: GraphEdge[]
   nodeTypes: NodeTypes
   edgeTypes: EdgeTypes
 
@@ -83,7 +85,6 @@ export interface FlowState extends Omit<FlowOptions, 'elements' | 'id'> {
 }
 
 export interface FlowActions {
-  setElements: (elements: Elements, init?: boolean) => Promise<void>
   setUserSelection: (mousePos: XYPosition) => void
   updateUserSelection: (mousePos: XYPosition) => void
   unsetUserSelection: () => void
@@ -97,7 +98,6 @@ export interface FlowActions {
   updateSize: (size: Dimensions) => void
   setConnectionNodeId: (payload: SetConnectionId) => void
   setInteractive: (isInteractive: boolean) => void
-  addElements: (elements: Elements) => void
   setState: (state: Partial<FlowOptions>) => void
 }
 
@@ -106,6 +106,8 @@ export interface FlowGetters {
   getNodeTypes: ComputedRef<Record<string, NodeComponent>>
   getNodes: ComputedRef<GraphNode[]>
   getEdges: ComputedRef<GraphEdge[]>
+  getNode: ComputedRef<(id: string) => GraphNode | undefined>
+  getEdge: ComputedRef<(id: string) => GraphEdge | undefined>
   getSelectedNodes: ComputedRef<GraphNode[]>
 }