From 33255635af42424c6efef481f56a23e0ad1a5039 Mon Sep 17 00:00:00 2001 From: moklick Date: Fri, 26 Nov 2021 07:07:21 +0100 Subject: [PATCH] refactor(edge-renderer): cleanup --- src/components/Edges/wrapEdge.tsx | 2 +- src/container/EdgeRenderer/index.tsx | 62 ++++++++-------------------- src/container/EdgeRenderer/utils.ts | 35 +++++++++++++++- src/types/edges.ts | 1 - 4 files changed, 52 insertions(+), 48 deletions(-) diff --git a/src/components/Edges/wrapEdge.tsx b/src/components/Edges/wrapEdge.tsx index e0af3934..f249863c 100644 --- a/src/components/Edges/wrapEdge.tsx +++ b/src/components/Edges/wrapEdge.tsx @@ -45,7 +45,6 @@ export default (EdgeComponent: ComponentType) => { hidden, sourceHandleId, targetHandleId, - handleEdgeUpdate, onContextMenu, onMouseEnter, onMouseMove, @@ -66,6 +65,7 @@ export default (EdgeComponent: ComponentType) => { const [updating, setUpdating] = useState(false); const inactive = !elementsSelectable && !onClick; + const handleEdgeUpdate = typeof onEdgeUpdate !== 'undefined'; const edgeClasses = cc([ 'react-flow__edge', `react-flow__edge-${type}`, diff --git a/src/container/EdgeRenderer/index.tsx b/src/container/EdgeRenderer/index.tsx index 7ee45e5f..216c53d5 100644 --- a/src/container/EdgeRenderer/index.tsx +++ b/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 && } {edges.map((edge: Edge) => { - const sourceNode = nodeInternals.get(edge.source); - const targetNode = nodeInternals.get(edge.target); + const [sourceNodeRect, sourceHandleBounds, sourceIsValid] = getNodeData(nodeInternals, edge.source); + const [targetNodeRect, targetHandleBounds, targetIsValid] = getNodeData(nodeInternals, edge.target); - const sourceHandleId = edge.sourceHandle || null; - 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' - ) { + if (!sourceIsValid) { console.warn(`couldn't create edge for source id: ${edge.source}; edge id: ${edge.id}`); return null; } - if ( - !targetNodeWidth || - !targetNodeHeight || - typeof targetNodeX === 'undefined' || - typeof targetNodeY === 'undefined' - ) { + if (!targetIsValid) { 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 - : targetNodeHandleBounds.target || targetNodeHandleBounds.source; - const sourceHandle = getHandle(sourceNodeHandleBounds.source!, sourceHandleId); - const targetHandle = getHandle(targetNodeHandles!, targetHandleId); - const sourcePosition = sourceHandle ? sourceHandle.position : Position.Bottom; - const targetPosition = targetHandle ? targetHandle.position : Position.Top; + ? targetHandleBounds!.target + : targetHandleBounds!.target || targetHandleBounds!.source; + const sourceHandle = getHandle(sourceHandleBounds!.source!, edge.sourceHandle || null); + const targetHandle = getHandle(targetNodeHandles!, edge.targetHandle || null); + const sourcePosition = sourceHandle?.position || Position.Bottom; + 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} - targetHandleId={targetHandleId} + sourceHandleId={edge.sourceHandle} + 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} diff --git a/src/container/EdgeRenderer/utils.ts b/src/container/EdgeRenderer/utils.ts index 29a29425..234f1c07 100644 --- a/src/container/EdgeRenderer/utils.ts +++ b/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, + ]; +} diff --git a/src/types/edges.ts b/src/types/edges.ts index 6fbd9d07..a9fa6d29 100644 --- a/src/types/edges.ts +++ b/src/types/edges.ts @@ -89,7 +89,6 @@ export interface WrapEdgeProps { targetPosition: Position; elementsSelectable?: boolean; hidden?: boolean; - handleEdgeUpdate: boolean; onEdgeUpdate: OnEdgeUpdateFunc; onContextMenu?: EdgeMouseHandler; onMouseEnter?: EdgeMouseHandler;