update!: graphnode and node typing

* graphnode is a node containing internal Vue Flow data
* move util files to util directory
* move flow actions type into store file
* rename panel type file to zoom
* rename types file to flow
* Rename Node to NodeWrapper
* Rename Edge to EdgeWrapper

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

src/types/actions.ts

@@ -1,26 +0,0 @@
-import { Dimensions, Elements, XYPosition } from './types'
-import { NodeDiffUpdate, NodeDimensionUpdate, NodeExtent, NodePosUpdate, TranslateExtent } from './node'
-import { InitD3ZoomPayload } from './panel'
-import { SetConnectionId } from './connection'
-
-export interface FlowActions {
-  setElements: (elements: Elements) => void
-  updateNodeDimensions: (update: NodeDimensionUpdate) => void
-  updateNodePos: (payload: NodePosUpdate) => void
-  updateNodePosDiff: (payload: NodeDiffUpdate) => void
-  setUserSelection: (mousePos: XYPosition) => void
-  updateUserSelection: (mousePos: XYPosition) => void
-  unsetUserSelection: () => void
-  addSelectedElements: (elements: Elements) => void
-  initD3Zoom: (payload: InitD3ZoomPayload) => void
-  setMinZoom: (zoom: number) => void
-  setMaxZoom: (zoom: number) => void
-  setTranslateExtent: (translateExtent: TranslateExtent) => void
-  setNodeExtent: (nodeExtent: NodeExtent) => void
-  resetSelectedElements: () => void
-  unsetNodesSelection: () => void
-  updateSize: (size: Dimensions) => void
-  setConnectionNodeId: (payload: SetConnectionId) => void
-  setInteractive: (isInteractive: boolean) => void
-  addElements: (elements: Elements) => void
-}

src/types/connection.ts

@@ -1,4 +1,4 @@
-import { ElementId, Position } from './types'
+import { ElementId, Position } from './flow'
 import { HandleType } from './handle'
 
 export enum ConnectionLineType {

src/types/edge.ts

@@ -1,5 +1,5 @@
 import { Component, CSSProperties, DefineComponent } from 'vue'
-import { ArrowHeadType, ElementId, Position } from './types'
+import { ArrowHeadType, ElementId, Position } from './flow'
 
 export interface Edge<T = any> {
   id: ElementId

src/types/flow.ts

@@ -1,15 +1,18 @@
 import { CSSProperties } from 'vue'
 import { Edge, EdgeTypes } from './edge'
-import { Node, NodeExtent, NodeTypes, TranslateExtent } from './node'
+import { NodeExtent, GraphNode, NodeTypes, TranslateExtent, Node } from './node'
 import { ConnectionLineType, ConnectionMode } from './connection'
-import { KeyCode, PanOnScrollMode } from './panel'
+import { KeyCode, PanOnScrollMode } from './zoom'
 import { FlowStore } from './store'
 
 export type ElementId = string
-
-export type FlowElement<T = any> = Node<T> | Edge<T>
-
-export type Elements<T = any> = FlowElement<T>[]
+export type FlowElement<T = any> = GraphNode<T> | Edge<T>
+export type FlowElements<T = any> = FlowElement<T>[]
+export type Elements<T = any> = (Node<T> | Edge<T>)[]
+export type NextElements = {
+  nextNodes: GraphNode[]
+  nextEdges: Edge[]
+}
 
 export type Transform = [number, number, number]
 
@@ -63,7 +66,7 @@ export type FitViewParams = {
 }
 
 export type FlowExportObject<T = any> = {
-  elements: Elements<T>
+  elements: FlowElements<T>
   position: [number, number]
   zoom: number
 }
@@ -98,14 +101,13 @@ export type FlowInstance<T = any> = {
   zoomTo: (zoomLevel: number) => void
   fitView: FitViewFunc
   project: ProjectFunc
-  getElements: () => Elements<T>
+  getElements: () => FlowElements<T>
   setTransform: (transform: FlowTransform) => void
   toObject: ToObjectFunc<T>
 }
 
 export interface FlowOptions {
   id?: string
-  store?: FlowStore
   elements?: Elements
   nodeTypes?: NodeTypes
   edgeTypes?: EdgeTypes
@@ -142,4 +144,5 @@ export interface FlowOptions {
   storageKey?: string
   loading?: Loading
   worker?: boolean
+  store?: FlowStore
 }

src/types/handle.ts

@@ -1,5 +1,5 @@
-import { Dimensions, ElementId, Position, XYPosition } from './types'
-import { Connection } from '~/types/connection'
+import { Dimensions, ElementId, Position, XYPosition } from './flow'
+import { Connection } from './connection'
 
 export type HandleType = 'source' | 'target'
 

src/types/hooks.ts

@@ -1,5 +1,5 @@
 import { EventHook } from '@vueuse/core'
-import { Elements, FlowTransform, FlowInstance } from './types'
+import { FlowTransform, FlowInstance, FlowElements } from './flow'
 import { Edge } from './edge'
 import { Node } from './node'
 import { Connection, OnConnectStartParams } from './connection'
@@ -8,7 +8,7 @@ export type FlowHook<T = any> = EventHook<T>
 
 export interface FlowEvents {
   elementClick: { event: MouseEvent; element: Node | Edge }
-  elementsRemove: Elements
+  elementsRemove: FlowElements
   nodeDoubleClick: { event: MouseEvent; node: Node }
   nodeClick: { event: MouseEvent; node: Node }
   nodeMouseEnter: { event: MouseEvent; node: Node }
@@ -29,7 +29,7 @@ export interface FlowEvents {
   move: FlowTransform | undefined
   moveStart: FlowTransform | undefined
   moveEnd: FlowTransform | undefined
-  selectionChange: Elements | null
+  selectionChange: FlowElements | null
   selectionDragStart: { event: MouseEvent; nodes: Node[] }
   selectionDrag: { event: MouseEvent; nodes: Node[] }
   selectionDragStop: { event: MouseEvent; nodes: Node[] }

src/types/index.ts

@@ -1,9 +1,8 @@
-export * from './types'
-export * from './actions'
+export * from './flow'
 export * from './connection'
 export * from './edge'
 export * from './handle'
 export * from './node'
-export * from './panel'
+export * from './zoom'
 export * from './store'
 export * from './hooks'

src/types/node.ts

@@ -1,21 +1,22 @@
 import { Component, CSSProperties, DefineComponent } from 'vue'
-import { XYPosition, ElementId, Position } from './types'
-import { HandleElement } from '~/types/handle'
+import { XYPosition, ElementId, Position } from './flow'
+import { HandleElement } from './handle'
+
+interface VFInternals {
+  position: XYPosition
+  isDragging?: boolean
+  width: number
+  height: number
+  handleBounds: {
+    source: HandleElement[] | null
+    target: HandleElement[] | null
+  }
+}
 
 export interface Node<T = any> {
   id: ElementId
   position: XYPosition
   type?: string
-  __vf?: {
-    position: XYPosition
-    isDragging?: boolean
-    width: number
-    height: number
-    handleBounds?: {
-      source?: HandleElement[] | null
-      target?: HandleElement[] | null
-    }
-  }
   class?: string
   style?: CSSProperties
   data?: T
@@ -27,6 +28,10 @@ export interface Node<T = any> {
   connectable?: boolean
 }
 
+export interface GraphNode<T = any> extends Node<T> {
+  __vf: VFInternals
+}
+
 export type NodePosUpdate = {
   id: ElementId
   pos: XYPosition

src/types/store.ts

@@ -3,6 +3,7 @@ import {
   Dimensions,
   ElementId,
   Elements,
+  FlowElements,
   FlowInstance,
   FlowOptions,
   Rect,
@@ -10,20 +11,26 @@ import {
   SnapGrid,
   Transform,
   XYPosition,
-} from './types'
+} from './flow'
 import { HandleType } from './handle'
-import { ConnectionMode, OnConnectEndFunc, OnConnectFunc, OnConnectStartFunc, OnConnectStopFunc } from './connection'
+import {
+  ConnectionMode,
+  OnConnectEndFunc,
+  OnConnectFunc,
+  OnConnectStartFunc,
+  OnConnectStopFunc,
+  SetConnectionId,
+} from './connection'
 import { Edge, EdgeComponent } from './edge'
-import { Node, NodeComponent, NodeExtent, TranslateExtent } from './node'
-import { FlowActions } from './actions'
-import { D3Selection, D3Zoom, D3ZoomHandler } from './panel'
+import { NodeComponent, NodeDiffUpdate, NodeDimensionUpdate, NodeExtent, GraphNode, NodePosUpdate, TranslateExtent } from './node'
+import { D3Selection, D3Zoom, D3ZoomHandler, InitD3ZoomPayload } from './zoom'
 import { FlowHooks } from './hooks'
 
 export interface FlowState extends FlowOptions {
-  elements: Elements
-  nodes: Node[]
+  elements: FlowElements
+  nodes: GraphNode[]
   edges: Edge[]
-  selectedElements?: Elements
+  selectedElements?: FlowElements
   selectedNodesBbox: Rect
 
   d3Zoom?: D3Zoom
@@ -66,10 +73,32 @@ export interface FlowState extends FlowOptions {
   vueFlowVersion: string
 }
 
+export interface FlowActions {
+  setElements: (elements: Elements) => Promise<void>
+  updateNodeDimensions: (update: NodeDimensionUpdate) => void
+  updateNodePos: (payload: NodePosUpdate) => void
+  updateNodePosDiff: (payload: NodeDiffUpdate) => void
+  setUserSelection: (mousePos: XYPosition) => void
+  updateUserSelection: (mousePos: XYPosition) => void
+  unsetUserSelection: () => void
+  addSelectedElements: (elements: FlowElements) => void
+  initD3Zoom: (payload: InitD3ZoomPayload) => void
+  setMinZoom: (zoom: number) => void
+  setMaxZoom: (zoom: number) => void
+  setTranslateExtent: (translateExtent: TranslateExtent) => void
+  setNodeExtent: (nodeExtent: NodeExtent) => void
+  resetSelectedElements: () => void
+  unsetNodesSelection: () => void
+  updateSize: (size: Dimensions) => void
+  setConnectionNodeId: (payload: SetConnectionId) => void
+  setInteractive: (isInteractive: boolean) => void
+  addElements: (elements: Elements) => Promise<void>
+}
+
 export interface FlowGetters {
   getEdgeTypes: () => Record<string, EdgeComponent>
   getNodeTypes: () => Record<string, NodeComponent>
-  getNodes: () => Node[]
+  getNodes: () => GraphNode[]
   getEdges: () => Edge[]
 }
 

src/types/zoom.ts

@@ -1,5 +1,5 @@
 import { Selection, ZoomBehavior } from 'd3'
-import { FitViewFunc, FlowTransform, Rect, XYPosition } from './types'
+import { FitViewFunc, FlowTransform, Rect, XYPosition } from './flow'
 
 export type D3Zoom = ZoomBehavior<HTMLDivElement, unknown>
 export type D3Selection = Selection<HTMLDivElement, unknown, any, any>