feat(types): Add GraphEdge type

* GraphEdges are edges that have been parsed and have a sourceTargetNode property

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

src/types/edge.ts

@@ -1,6 +1,7 @@
 import { Component, CSSProperties, DefineComponent } from 'vue'
 import { ArrowHeadType, ElementId, Position } from './flow'
 import { EdgeTextProps } from './components'
+import { SourceTargetNode } from './node'
 
 export interface Edge<T = any> {
   id: ElementId
@@ -32,6 +33,10 @@ export interface Edge<T = any> {
   isHidden?: boolean
 }
 
+export interface GraphEdge<T = any> extends Edge<T> {
+  sourceTargetNodes: SourceTargetNode
+}
+
 export interface EdgeProps<T = any> extends Edge<T> {
   sourceX: number
   sourceY: number

src/types/flow.ts

@@ -1,17 +1,17 @@
 import { CSSProperties } from 'vue'
-import { Edge, EdgeTypes } from './edge'
+import { Edge, EdgeTypes, GraphEdge } from './edge'
 import { NodeExtent, GraphNode, NodeTypes, TranslateExtent, Node } from './node'
 import { ConnectionLineType, ConnectionMode } from './connection'
 import { KeyCode, PanOnScrollMode } from './zoom'
 import { FlowStore } from './store'
 
 export type ElementId = string
-export type FlowElement<T = any> = GraphNode<T> | Edge<T>
+export type FlowElement<T = any> = GraphNode<T> | GraphEdge<T>
 export type FlowElements<T = any> = FlowElement<T>[]
 export type Elements<T = any> = (Node<T> | Edge<T>)[]
 export type NextElements = {
   nextNodes: GraphNode[]
-  nextEdges: Edge[]
+  nextEdges: GraphEdge[]
 }
 
 export type Transform = [number, number, number]

src/types/hooks.ts

@@ -1,13 +1,13 @@
 import { EventHook } from '@vueuse/core'
 import { FlowTransform, FlowInstance, FlowElements } from './flow'
-import { Edge } from './edge'
+import { GraphEdge } from './edge'
 import { Node } from './node'
 import { Connection, OnConnectStartParams } from './connection'
 
 export type FlowHook<T = any> = EventHook<T>
 
 export interface FlowEvents {
-  elementClick: { event: MouseEvent; element: Node | Edge }
+  elementClick: { event: MouseEvent; element: Node | GraphEdge }
   elementsRemove: FlowElements
   nodeDoubleClick: { event: MouseEvent; node: Node }
   nodeClick: { event: MouseEvent; node: Node }
@@ -37,14 +37,14 @@ export interface FlowEvents {
   paneScroll: WheelEvent | undefined
   paneClick: MouseEvent
   paneContextMenu: MouseEvent
-  edgeUpdate: { edge: Edge; connection: Connection }
-  edgeContextMenu: { event: MouseEvent; edge: Edge }
-  edgeMouseEnter: { event: MouseEvent; edge: Edge }
-  edgeMouseMove: { event: MouseEvent; edge: Edge }
-  edgeMouseLeave: { event: MouseEvent; edge: Edge }
-  edgeDoubleClick: { event: MouseEvent; edge: Edge }
-  edgeClick: { event: MouseEvent; edge: Edge }
-  edgeUpdateStart: { event: MouseEvent; edge: Edge }
+  edgeUpdate: { edge: GraphEdge; connection: Connection }
+  edgeContextMenu: { event: MouseEvent; edge: GraphEdge }
+  edgeMouseEnter: { event: MouseEvent; edge: GraphEdge }
+  edgeMouseMove: { event: MouseEvent; edge: GraphEdge }
+  edgeMouseLeave: { event: MouseEvent; edge: GraphEdge }
+  edgeDoubleClick: { event: MouseEvent; edge: GraphEdge }
+  edgeClick: { event: MouseEvent; edge: GraphEdge }
+  edgeUpdateStart: { event: MouseEvent; edge: GraphEdge }
   edgeUpdateEnd: MouseEvent
 }
 

src/types/store.ts

@@ -21,7 +21,7 @@ import {
   OnConnectStopFunc,
   SetConnectionId,
 } from './connection'
-import { Edge, EdgeComponent } from './edge'
+import { EdgeComponent, GraphEdge } from './edge'
 import { NodeComponent, NodeDiffUpdate, NodeDimensionUpdate, NodeExtent, GraphNode, NodePosUpdate, TranslateExtent } from './node'
 import { D3Selection, D3Zoom, D3ZoomHandler, InitD3ZoomPayload } from './zoom'
 import { FlowHooks } from './hooks'
@@ -29,7 +29,7 @@ import { FlowHooks } from './hooks'
 export interface FlowState extends FlowOptions {
   elements: FlowElements
   nodes: GraphNode[]
-  edges: Edge[]
+  edges: GraphEdge[]
   selectedElements?: FlowElements
   selectedNodesBbox: Rect
 
@@ -99,7 +99,7 @@ export interface FlowGetters {
   getEdgeTypes: () => Record<string, EdgeComponent>
   getNodeTypes: () => Record<string, NodeComponent>
   getNodes: () => GraphNode[]
-  getEdges: () => Edge[]
+  getEdges: () => GraphEdge[]
 }
 
 export type FlowStore = Store<string, FlowState, FlowGetters, FlowActions>