diff --git a/packages/core/src/container/EdgeRenderer/index.tsx b/packages/core/src/container/EdgeRenderer/index.tsx
index 4cca8057..aacf72eb 100644
--- a/packages/core/src/container/EdgeRenderer/index.tsx
+++ b/packages/core/src/container/EdgeRenderer/index.tsx
@@ -1,47 +1,44 @@
-import { memo, CSSProperties } from 'react';
+import { memo } from 'react';
import shallow from 'zustand/shallow';
import cc from 'classcat';
import { useStore } from '../../hooks/useStore';
+import useVisibleEdges from '../../hooks/useVisibleEdges';
import ConnectionLine from '../../components/ConnectionLine/index';
import MarkerDefinitions from './MarkerDefinitions';
import { getEdgePositions, getHandle, getNodeData } from './utils';
-import useVisibleEdges from '../../hooks/useVisibleEdges';
-import {
- Position,
- Edge,
- ConnectionLineType,
- ConnectionLineComponent,
- ConnectionMode,
- OnEdgeUpdateFunc,
- HandleType,
- ReactFlowState,
- EdgeTypesWrapped,
-} from '../../types';
+import { Position, Edge, ConnectionMode, ReactFlowState } from '../../types';
+import { GraphViewProps } from '../GraphView';
-interface EdgeRendererProps {
- edgeTypes: EdgeTypesWrapped;
- connectionLineType: ConnectionLineType;
- connectionLineStyle?: CSSProperties;
- connectionLineComponent?: ConnectionLineComponent;
- connectionLineContainerStyle?: CSSProperties;
- onEdgeClick?: (event: React.MouseEvent, node: Edge) => void;
- onEdgeDoubleClick?: (event: React.MouseEvent, edge: Edge) => void;
- defaultMarkerColor: string;
- onlyRenderVisibleElements: boolean;
- onEdgeUpdate?: OnEdgeUpdateFunc;
- onEdgeContextMenu?: (event: React.MouseEvent, edge: Edge) => void;
- onEdgeMouseEnter?: (event: React.MouseEvent, edge: Edge) => void;
- onEdgeMouseMove?: (event: React.MouseEvent, edge: Edge) => void;
- onEdgeMouseLeave?: (event: React.MouseEvent, edge: Edge) => void;
- onEdgeUpdateStart?: (event: React.MouseEvent, edge: Edge, handleType: HandleType) => void;
- onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge, handleType: HandleType) => void;
- edgeUpdaterRadius?: number;
- noPanClassName?: string;
+interface EdgeRendererProps
+ extends Pick<
+ GraphViewProps,
+ | 'edgeTypes'
+ | 'connectionLineType'
+ | 'connectionLineType'
+ | 'connectionLineStyle'
+ | 'connectionLineComponent'
+ | 'connectionLineContainerStyle'
+ | 'connectionLineContainerStyle'
+ | 'onEdgeClick'
+ | 'onEdgeDoubleClick'
+ | 'defaultMarkerColor'
+ | 'onlyRenderVisibleElements'
+ | 'onEdgeUpdate'
+ | 'onEdgeContextMenu'
+ | 'onEdgeMouseEnter'
+ | 'onEdgeMouseMove'
+ | 'onEdgeMouseLeave'
+ | 'onEdgeUpdateStart'
+ | 'onEdgeUpdateEnd'
+ | 'edgeUpdaterRadius'
+ | 'noPanClassName'
+ | 'elevateEdgesOnSelect'
+ | 'rfId'
+ | 'disableKeyboardA11y'
+ > {
elevateEdgesOnSelect: boolean;
- rfId: string;
- disableKeyboardA11y: boolean;
}
const selector = (s: ReactFlowState) => ({
@@ -94,8 +91,8 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
{isMaxLevel && }
{edges.map((edge: Edge) => {
- const [sourceNodeRect, sourceHandleBounds, sourceIsValid] = getNodeData(nodeInternals, edge.source);
- const [targetNodeRect, targetHandleBounds, targetIsValid] = getNodeData(nodeInternals, edge.target);
+ const [sourceNodeRect, sourceHandleBounds, sourceIsValid] = getNodeData(nodeInternals.get(edge.source)!);
+ const [targetNodeRect, targetHandleBounds, targetIsValid] = getNodeData(nodeInternals.get(edge.target)!);
if (!sourceIsValid || !targetIsValid) {
return null;
@@ -113,19 +110,12 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
const sourcePosition = sourceHandle?.position || Position.Bottom;
const targetPosition = targetHandle?.position || Position.Top;
- if (!sourceHandle) {
+ if (!sourceHandle || !targetHandle) {
if (process.env.NODE_ENV === 'development') {
+ const handleType = !sourceHandle ? 'source' : 'target';
+ const handleId = !sourceHandle ? edge.sourceHandle : edge.targetHandle;
console.warn(
- `[React Flow]: Couldn't create edge for source handle id: ${edge.sourceHandle}; edge id: ${edge.id}. Help: https://reactflow.dev/error#800`
- );
- }
- return null;
- }
-
- if (!targetHandle) {
- if (process.env.NODE_ENV === 'development') {
- console.warn(
- `[React Flow]: Couldn't create edge for target handle id: ${edge.targetHandle}; edge id: ${edge.id}. Help: https://reactflow.dev/error#800`
+ `[React Flow]: Couldn't create edge for ${handleType} handle id: ${handleId}; edge id: ${edge.id}. Help: https://reactflow.dev/error#800`
);
}
return null;
diff --git a/packages/core/src/container/EdgeRenderer/utils.ts b/packages/core/src/container/EdgeRenderer/utils.ts
index 9d902cfe..a246816b 100644
--- a/packages/core/src/container/EdgeRenderer/utils.ts
+++ b/packages/core/src/container/EdgeRenderer/utils.ts
@@ -7,7 +7,7 @@ import {
EdgeTypesWrapped,
HandleElement,
NodeHandleBounds,
- NodeInternals,
+ Node,
Position,
Rect,
Transform,
@@ -166,8 +166,7 @@ export function isEdgeVisible({
return overlappingArea > 0;
}
-export function getNodeData(nodeInternals: NodeInternals, nodeId: string): [Rect, NodeHandleBounds | null, boolean] {
- const node = nodeInternals.get(nodeId);
+export function getNodeData(node: Node): [Rect, NodeHandleBounds | null, boolean] {
const handleBounds = node?.[internalsSymbol]?.handleBounds || null;
const isInvalid =