refactor(types): Remove SourceTargetNode-type

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

src/components/Edges/EdgeWrapper.vue

@@ -60,26 +60,23 @@ const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
 }
 
 // when connection type is loose we can define all handles as sources
-const targetNodeHandles = controlledComputed(
+const targetNodeHandles = computed(() =>
-  () => props.edge.sourceTargetNodes,
+  store.connectionMode === ConnectionMode.Strict
-  () =>
+    ? props.edge.targetNode.__vf.handleBounds.target
-    store.connectionMode === ConnectionMode.Strict
+    : props.edge.targetNode.__vf.handleBounds.target ?? props.edge.targetNode.__vf.handleBounds.source,
-      ? props.edge.sourceTargetNodes.targetNode.__vf.handleBounds.target
-      : props.edge.sourceTargetNodes.targetNode.__vf.handleBounds.target ??
-        props.edge.sourceTargetNodes.targetNode.__vf.handleBounds.source,
 )
 
 const sourceHandle = controlledComputed(
-  () => props.edge.sourceTargetNodes,
+  () => props.edge,
   () => {
-    if (props.edge.sourceTargetNodes.sourceNode && props.edge.sourceTargetNodes.sourceNode.__vf.handleBounds.source)
+    if (props.edge.sourceNode && props.edge.sourceNode.__vf.handleBounds.source)
-      return getHandle(props.edge.sourceTargetNodes.sourceNode.__vf.handleBounds.source, props.edge.sourceHandle)
+      return getHandle(props.edge.sourceNode.__vf.handleBounds.source, props.edge.sourceHandle)
-    else return null
+    else return undefined
   },
 )
 const targetHandle = computed(() => {
   if (targetNodeHandles.value) return getHandle(targetNodeHandles.value, props.edge.targetHandle)
-  else return null
+  else return undefined
 })
 const sourcePosition = eagerComputed(() => (sourceHandle.value ? sourceHandle.value.position : Position.Bottom))
 const targetPosition = eagerComputed(() => (targetHandle.value ? targetHandle.value.position : Position.Top))
@@ -90,10 +87,10 @@ const isSelected = controlledComputed(
 )
 const edgePos = computed(() =>
   getEdgePositions(
-    props.edge.sourceTargetNodes.sourceNode,
+    props.edge.sourceNode,
     sourceHandle.value,
     sourcePosition.value,
-    props.edge.sourceTargetNodes.targetNode,
+    props.edge.targetNode,
     targetHandle.value,
     targetPosition.value,
   ),
@@ -140,7 +137,8 @@ export default {
       v-if="edgePos.sourceX && edgePos.sourceY && edgePos.targetX && edgePos.targetY"
       v-bind="{
         id: props.edge.id,
-        sourceTargetNodes: props.edge.sourceTargetNodes,
+        sourceNode: props.edge.sourceNode,
+        targetNode: props.edge.targetNode,
         source: props.edge.source,
         target: props.edge.target,
         selected: isSelected,
@@ -169,7 +167,8 @@ export default {
         :is="props.component ?? props.edge.type"
         v-bind="{
           id: props.edge.id,
-          sourceTargetNodes: props.edge.sourceTargetNodes,
+          sourceNode: props.edge.sourceNode,
+          targetNode: props.edge.targetNode,
           source: props.edge.source,
           target: props.edge.target,
           selected: isSelected,

src/store/stateStore.ts

@@ -70,13 +70,11 @@ export default (id: string, preloadedState: FlowState) => {
 
                 return {
                   ...edge,
-                  sourceTargetNodes: {
+                  sourceNode,
-                    sourceNode,
+                  targetNode,
-                    targetNode,
-                  },
                 }
               })
-              .filter(({ sourceTargetNodes: { sourceNode, targetNode } }) => !!(sourceNode && targetNode)) ?? []
+              .filter(({ sourceNode, targetNode }) => !!(sourceNode && targetNode)) ?? []
           )
         }
         return []

src/types/edge.ts

@@ -1,7 +1,7 @@
 import { Component, CSSProperties, DefineComponent } from 'vue'
 import { ArrowHeadType, ElementId, Position } from './flow'
 import { EdgeTextProps } from './components'
-import { SourceTargetNode } from './node'
+import { GraphNode } from './node'
 
 // eslint-disable-next-line no-use-before-define
 export type DefaultEdgeTypes = { [key in 'default' | 'straight' | 'smoothstep' | 'step']: Component<EdgeProps> }
@@ -38,7 +38,8 @@ export interface Edge<T = any> {
 }
 
 export interface GraphEdge<T = any> extends Edge<T> {
-  sourceTargetNodes: SourceTargetNode
+  sourceNode: GraphNode
+  targetNode: GraphNode
 }
 
 export interface EdgeProps<T = any> extends Edge<T> {

src/types/flow.ts

@@ -1,11 +1,11 @@
 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'
 
 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>)[]
 

src/types/node.ts

@@ -8,7 +8,7 @@ export interface VFInternals {
   width: number
   height: number
   handleBounds: {
-    source?: HandleElement[]
+    source: HandleElement[]
     target?: HandleElement[]
   }
 }
@@ -52,11 +52,6 @@ export interface GraphNode<T = any> extends Node<T> {
   __vf: VFInternals
 }
 
-export type SourceTargetNode = {
-  sourceNode: GraphNode
-  targetNode: GraphNode
-}
-
 export type TranslateExtent = [[number, number], [number, number]]
 export type NodeExtent = TranslateExtent
 

src/types/store.ts

@@ -26,7 +26,7 @@ import { NodeComponent, NodeExtent, GraphNode, TranslateExtent } from './node'
 import { D3Selection, D3Zoom, D3ZoomHandler, InitD3ZoomPayload } from './zoom'
 import { FlowHooks } from './hooks'
 
-export interface FlowState extends FlowOptions {
+export interface FlowState extends Omit<FlowOptions, 'elements'> {
   hooks: FlowHooks
   instance?: FlowInstance
 

src/utils/edge.ts

@@ -1,4 +1,4 @@
-import { rectToBox } from './graph'
+import { isGraphNode, rectToBox } from './graph'
 import {
   Edge,
   EdgePositions,
@@ -6,11 +6,10 @@ import {
   GraphNode,
   HandleElement,
   Position,
-  SourceTargetNode,
   Transform,
   XYPosition,
-  Elements,
   FlowElements,
+  GraphEdge,
 } from '~/types'
 
 export function getHandlePosition(position: Position, node: GraphNode, handle?: HandleElement): XYPosition {
@@ -115,18 +114,17 @@ export function isEdgeVisible({ sourcePos, targetPos, width, height, transform }
   return overlappingArea > 0
 }
 
-export const getSourceTargetNodes = (edge: Edge, elements: FlowElements | Elements): SourceTargetNode => {
+export const getSourceTargetNodes = (edge: GraphEdge | Edge, elements: FlowElements) => {
-  let { sourceNode, targetNode }: any = {
+  const nodes: GraphNode[] = []
-    sourceNode: null,
-    targetNode: null,
-  }
   for (const el of elements) {
-    if (!sourceNode || !targetNode) {
+    if (!nodes[0] || !nodes[1]) {
-      if (el.id === edge.source) sourceNode = el
+      if (isGraphNode(el)) {
-      if (el.id === edge.target) targetNode = el
+        if (el.id === edge.source) nodes[0] = el
+        if (el.id === edge.target) nodes[1] = el
+      }
     } else {
       break
     }
   }
-  return { sourceNode, targetNode }
+  return { sourceNode: nodes[0], targetNode: nodes[1] }
 }

src/utils/graph.ts

@@ -14,7 +14,6 @@ import {
   FlowStore,
   GraphNode,
   FlowElements,
-  FlowElement,
   GraphEdge,
 } from '~/types'
 import { useWindow } from '~/composables'
@@ -55,10 +54,8 @@ export const isEdge = (element: Node | Edge | Connection): element is Edge =>
 export const isNode = (element: Node | Edge | Connection): element is Node =>
   'id' in element && !('source' in element) && !('target' in element)
 
-export const isGraphNode = (element: Node | FlowElement | Connection): element is GraphNode =>
+export const isGraphNode = (element: any): element is GraphNode => isNode(element) && '__vf' in element
-  isNode(element) && '__vf' in element
+export const isGraphEdge = (element: any): element is GraphEdge => isEdge(element) && 'sourceTargetNodes' in element
-export const isGraphEdge = (element: Edge | FlowElement | Connection): element is GraphEdge =>
-  isEdge(element) && 'sourceTargetNodes' in element
 
 const getConnectedElements = (node: GraphNode, elements: Elements, dir: 'source' | 'target') => {
   if (!isNode(node)) return []
@@ -173,15 +170,15 @@ export const parseNode = (node: Node, nodeExtent: NodeExtent): GraphNode => ({
     width: 0,
     height: 0,
     handleBounds: {
-      source: undefined,
+      source: [],
-      target: undefined,
+      target: [],
     },
     isDragging: false,
   },
   position: clampPosition(node.position, nodeExtent),
 })
 
-export const parseEdge = (edge: Edge): Edge => ({
+export const parseEdge = (edge: Edge): GraphEdge => ({
   ...edge,
   source: edge.source.toString(),
   target: edge.target.toString(),
@@ -189,6 +186,8 @@ export const parseEdge = (edge: Edge): Edge => ({
   targetHandle: edge.targetHandle ? edge.targetHandle.toString() : undefined,
   id: edge.id.toString(),
   type: edge.type ?? 'default',
+  sourceNode: {} as any,
+  targetNode: {} as any,
 })
 
 const getBoundsOfBoxes = (box1: Box, box2: Box): Box => ({
@@ -270,7 +269,7 @@ export const getNodesInside = (nodes: GraphNode[], rect: Rect, [tx, ty, tScale]:
   })
 }
 
-export const getConnectedEdges = (nodes: GraphNode[], edges: Edge[]) => {
+export const getConnectedEdges = (nodes: GraphNode[], edges: GraphEdge[]) => {
   const nodeIds = nodes.map((node) => node.id)
   return edges.filter((edge) => nodeIds.includes(edge.source) || nodeIds.includes(edge.target))
 }

src/utils/store.ts

@@ -8,7 +8,7 @@ import {
   PanOnScrollMode,
   DefaultNodeTypes,
   DefaultEdgeTypes,
-  Edge,
+  GraphEdge,
 } from '~/types'
 import { DefaultNode, InputNode, OutputNode, BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '~/components'
 import { createHooks } from '~/composables'
@@ -96,7 +96,7 @@ export const initialState = (): FlowState => ({
   vueFlowVersion: typeof __VUE_FLOW_VERSION__ !== 'undefined' ? __VUE_FLOW_VERSION__ : '-',
 })
 
-export const parseElements = (elements: Elements, nodes: GraphNode[], edges: Edge[], nodeExtent: NodeExtent) => {
+export const parseElements = (elements: Elements, nodes: GraphNode[], edges: GraphEdge[], nodeExtent: NodeExtent) => {
   const parsedElements = []
   for (const element of elements) {
     if (isNode(element)) {
@@ -125,7 +125,7 @@ export const parseElements = (elements: Elements, nodes: GraphNode[], edges: Edg
         parsedElements.push({
           ...storeEdge,
           ...element,
-        })
+        } as GraphEdge)
       } else {
         parsedElements.push(parseEdge(element))
       }