fix(edges): edges not reacting to hidden nodes

* Change getEdges to parse edges with source & target nodes and filter if one of them is missing
* add new type for Edges w sourceTargetNode called GraphEdge which is the return type of getEdges
*

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

src/utils/edge.ts

@@ -9,6 +9,8 @@ import {
   SourceTargetNode,
   Transform,
   XYPosition,
+  Elements,
+  FlowElements,
 } from '~/types'
 
 export function getHandlePosition(position: Position, node: GraphNode, handle: any | null = null): XYPosition {
@@ -113,15 +115,15 @@ export function isEdgeVisible({ sourcePos, targetPos, width, height, transform }
   return overlappingArea > 0
 }
 
-export const getSourceTargetNodes = (edge: Edge, nodes: GraphNode[]): SourceTargetNode => {
+export const getSourceTargetNodes = (edge: Edge, elements: FlowElements | Elements): SourceTargetNode => {
   let { sourceNode, targetNode }: any = {
     sourceNode: null,
     targetNode: null,
   }
-  for (const node of nodes) {
+  for (const el of elements) {
     if (!sourceNode || !targetNode) {
-      if (node.id === edge.source) sourceNode = node
-      if (node.id === edge.target) targetNode = node
+      if (el.id === edge.source) sourceNode = el
+      if (el.id === edge.target) targetNode = el
     } else {
       break
     }

src/utils/graph.ts

@@ -15,6 +15,7 @@ import {
   GraphNode,
   FlowElements,
   FlowElement,
+  GraphEdge,
 } from '~/types'
 import { useWindow } from '~/composables'
 
@@ -48,14 +49,15 @@ export const getHostForElement = (element: HTMLElement): Document => {
   else return window.document
 }
 
-export const isEdge = (element: Node | FlowElement | Connection): element is Edge =>
+export const isEdge = (element: Node | Edge | Connection): element is Edge =>
   'id' in element && 'source' in element && 'target' in element
 
-export const isNode = (element: Node | FlowElement | Connection): element is Node =>
+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 =>
-  isNode(element) && '__vf' in element
+export const isGraphNode = (element: FlowElement | Connection): element is GraphNode => isNode(element) && '__vf' in element
+export const isGraphEdge = (element: FlowElement | Connection): element is GraphEdge =>
+  isEdge(element) && 'sourceTargetNodes' in element
 
 const getConnectedElements = (node: GraphNode, elements: Elements, dir: 'source' | 'target') => {
   if (!isNode(node)) return []

src/utils/store.ts

@@ -2,7 +2,6 @@ import { Component } from 'vue'
 import { isEdge, isNode, parseEdge, parseNode } from './graph'
 import {
   ConnectionMode,
-  Edge,
   EdgeProps,
   Elements,
   FlowState,
@@ -11,6 +10,8 @@ import {
   GraphNode,
   NodeProps,
   PanOnScrollMode,
+  Node,
+  Edge,
 } from '~/types'
 import { DefaultNode, InputNode, OutputNode, BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '~/components'
 import { createHooks } from '~/composables'
@@ -100,9 +101,9 @@ export const initialState = (): FlowState => ({
   vueFlowVersion: typeof __VUE_FLOW_VERSION__ !== 'undefined' ? __VUE_FLOW_VERSION__ : '-',
 })
 
-export const parseElements = async (elements: Elements, nodes: GraphNode[], edges: Edge[], nodeExtent: NodeExtent) =>
+export const parseElements = async (elements: Elements, nodes: Node[], edges: Edge[], nodeExtent: NodeExtent) =>
   new Promise<NextElements>((resolve) => {
-    const nextElements: NextElements = {
+    const { nextEdges, nextNodes }: NextElements = {
       nextNodes: [],
       nextEdges: [],
     }
@@ -111,10 +112,10 @@ export const parseElements = async (elements: Elements, nodes: GraphNode[], edge
         const storeNode = nodes[nodes.map((x) => x.id).indexOf(element.id)]
 
         if (storeNode) {
-          const updatedNode: GraphNode = {
+          const updatedNode = {
             ...storeNode,
             ...element,
-          }
+          } as GraphNode
           updatedNode.__vf!.position = element.position
 
           if (typeof element.type !== 'undefined' && element.type !== storeNode.type) {
@@ -123,24 +124,24 @@ export const parseElements = async (elements: Elements, nodes: GraphNode[], edge
             updatedNode.__vf!.width = 0
           }
 
-          nextElements.nextNodes.push(updatedNode)
+          nextNodes.push(updatedNode)
         } else {
-          nextElements.nextNodes.push(parseNode(element, nodeExtent))
+          nextNodes.push(parseNode(element, nodeExtent))
         }
       } else if (isEdge(element)) {
         const storeEdge = edges[edges.map((x) => x.id).indexOf(element.id)]
 
         if (storeEdge) {
-          nextElements.nextEdges.push({
+          nextEdges.push({
             ...storeEdge,
             ...element,
           })
         } else {
-          nextElements.nextEdges.push(parseEdge(element))
+          nextEdges.push(parseEdge(element))
         }
       }
     }
-    resolve(nextElements)
+    resolve({ nextEdges, nextNodes })
   })
 
 const isObject = (val: any) => val !== null && typeof val === 'object'