refactor(edge-renderer): cleanup

src/components/Edges/wrapEdge.tsx

@@ -45,7 +45,6 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
     hidden,
     sourceHandleId,
     targetHandleId,
-    handleEdgeUpdate,
     onContextMenu,
     onMouseEnter,
     onMouseMove,
@@ -66,6 +65,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
     const [updating, setUpdating] = useState<boolean>(false);
 
     const inactive = !elementsSelectable && !onClick;
+    const handleEdgeUpdate = typeof onEdgeUpdate !== 'undefined';
     const edgeClasses = cc([
       'react-flow__edge',
       `react-flow__edge-${type}`,

src/container/EdgeRenderer/index.tsx

@@ -5,7 +5,7 @@ import cc from 'classcat';
 import { useStore } from '../../store';
 import ConnectionLine from '../../components/ConnectionLine/index';
 import MarkerDefinitions from './MarkerDefinitions';
-import { getEdgePositions, getHandle } from './utils';
+import { getEdgePositions, getHandle, getNodeData } from './utils';
 import {
   Position,
   Edge,
@@ -85,42 +85,15 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
           {isMaxLevel && <MarkerDefinitions defaultColor={defaultMarkerColor} />}
           <g>
             {edges.map((edge: Edge) => {
-              const sourceNode = nodeInternals.get(edge.source);
+              const [sourceNodeRect, sourceHandleBounds, sourceIsValid] = getNodeData(nodeInternals, edge.source);
-              const targetNode = nodeInternals.get(edge.target);
+              const [targetNodeRect, targetHandleBounds, targetIsValid] = getNodeData(nodeInternals, edge.target);
 
-              const sourceHandleId = edge.sourceHandle || null;
+              if (!sourceIsValid) {
-              const targetHandleId = edge.targetHandle || null;
-
-              const sourceNodeX = sourceNode?.positionAbsolute?.x;
-              const sourceNodeY = sourceNode?.positionAbsolute?.y;
-              const sourceNodeHandleBounds = sourceNode?.handleBounds;
-              const targetNodeWidth = targetNode?.width;
-              const targetNodeHeight = targetNode?.height;
-              const targetNodeX = targetNode?.positionAbsolute?.x;
-              const targetNodeY = targetNode?.positionAbsolute?.y;
-              const targetNodeHandleBounds = targetNode?.handleBounds;
-
-              // source and target node need to be initialized
-              if (!sourceNodeHandleBounds || !targetNodeHandleBounds) {
-                return null;
-              }
-
-              if (
-                !sourceNode?.width ||
-                !sourceNode?.height ||
-                typeof sourceNodeX === 'undefined' ||
-                typeof sourceNodeY === 'undefined'
-              ) {
                 console.warn(`couldn't create edge for source id: ${edge.source}; edge id: ${edge.id}`);
                 return null;
               }
 
-              if (
+              if (!targetIsValid) {
-                !targetNodeWidth ||
-                !targetNodeHeight ||
-                typeof targetNodeX === 'undefined' ||
-                typeof targetNodeY === 'undefined'
-              ) {
                 console.warn(`couldn't create edge for target id: ${edge.target}; edge id: ${edge.id}`);
                 return null;
               }
@@ -130,28 +103,28 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
               // when connection type is loose we can define all handles as sources
               const targetNodeHandles =
                 connectionMode === ConnectionMode.Strict
-                  ? targetNodeHandleBounds.target
+                  ? targetHandleBounds!.target
-                  : targetNodeHandleBounds.target || targetNodeHandleBounds.source;
+                  : targetHandleBounds!.target || targetHandleBounds!.source;
-              const sourceHandle = getHandle(sourceNodeHandleBounds.source!, sourceHandleId);
+              const sourceHandle = getHandle(sourceHandleBounds!.source!, edge.sourceHandle || null);
-              const targetHandle = getHandle(targetNodeHandles!, targetHandleId);
+              const targetHandle = getHandle(targetNodeHandles!, edge.targetHandle || null);
-              const sourcePosition = sourceHandle ? sourceHandle.position : Position.Bottom;
+              const sourcePosition = sourceHandle?.position || Position.Bottom;
-              const targetPosition = targetHandle ? targetHandle.position : Position.Top;
+              const targetPosition = targetHandle?.position || Position.Top;
 
               if (!sourceHandle) {
-                console.warn(`couldn't create edge for source handle id: ${sourceHandleId}; edge id: ${edge.id}`);
+                console.warn(`couldn't create edge for source handle id: ${edge.sourceHandle}; edge id: ${edge.id}`);
                 return null;
               }
 
               if (!targetHandle) {
-                console.warn(`couldn't create edge for target handle id: ${targetHandleId}; edge id: ${edge.id}`);
+                console.warn(`couldn't create edge for target handle id: ${edge.targetHandle}; edge id: ${edge.id}`);
                 return null;
               }
 
               const { sourceX, sourceY, targetX, targetY } = getEdgePositions(
-                { x: sourceNodeX, y: sourceNodeY, width: sourceNode?.width, height: sourceNode?.height },
+                sourceNodeRect,
                 sourceHandle,
                 sourcePosition,
-                { x: targetNodeX, y: targetNodeY, width: targetNodeWidth, height: targetNodeHeight },
+                targetNodeRect,
                 targetHandle,
                 targetPosition
               );
@@ -175,8 +148,8 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
                   style={edge.style}
                   source={edge.source}
                   target={edge.target}
-                  sourceHandleId={sourceHandleId}
+                  sourceHandleId={edge.sourceHandle}
-                  targetHandleId={targetHandleId}
+                  targetHandleId={edge.targetHandle}
                   markerEnd={edge.markerEnd}
                   markerStart={edge.markerStart}
                   sourceX={sourceX}
@@ -186,7 +159,6 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
                   sourcePosition={sourcePosition}
                   targetPosition={targetPosition}
                   elementsSelectable={elementsSelectable}
-                  handleEdgeUpdate={typeof props.onEdgeUpdate !== 'undefined'}
                   onEdgeUpdate={props.onEdgeUpdate}
                   onContextMenu={props.onEdgeContextMenu}
                   onMouseEnter={props.onEdgeMouseEnter}

src/container/EdgeRenderer/utils.ts

@@ -4,7 +4,17 @@ import { BezierEdge, StepEdge, SmoothStepEdge, StraightEdge } from '../../compon
 import wrapEdge from '../../components/Edges/wrapEdge';
 import { rectToBox } from '../../utils';
 
-import { EdgeTypesType, EdgeProps, HandleElement, Position, XYPosition, Transform, Rect } from '../../types';
+import {
+  EdgeTypesType,
+  EdgeProps,
+  HandleElement,
+  Position,
+  XYPosition,
+  Transform,
+  Rect,
+  NodeInternals,
+  NodeHandleBounds,
+} from '../../types';
 
 export function createEdgeTypes(edgeTypes: EdgeTypesType): EdgeTypesType {
   const standardTypes: EdgeTypesType = {
@@ -153,3 +163,26 @@ export function isEdgeVisible({
 
   return overlappingArea > 0;
 }
+
+export function getNodeData(nodeInternals: NodeInternals, nodeId: string): [Rect, NodeHandleBounds | null, boolean] {
+  const node = nodeInternals.get(nodeId);
+  const handleBounds = node?.handleBounds;
+  const isInvalid =
+    !node ||
+    !node?.handleBounds ||
+    !node?.width ||
+    !node?.height ||
+    typeof node.positionAbsolute?.x === 'undefined' ||
+    typeof node.positionAbsolute?.y === 'undefined';
+
+  return [
+    {
+      x: node?.positionAbsolute?.x || 0,
+      y: node?.positionAbsolute?.y || 0,
+      width: node?.width || 0,
+      height: node?.height || 0,
+    },
+    handleBounds || null,
+    !isInvalid,
+  ];
+}

src/types/edges.ts

@@ -89,7 +89,6 @@ export interface WrapEdgeProps<T = any> {
   targetPosition: Position;
   elementsSelectable?: boolean;
   hidden?: boolean;
-  handleEdgeUpdate: boolean;
   onEdgeUpdate: OnEdgeUpdateFunc;
   onContextMenu?: EdgeMouseHandler;
   onMouseEnter?: EdgeMouseHandler;