refactor(connection-line): add from, to props and cleanup closes #2031

example/src/CustomConnectionLine/ConnectionLine.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { ConnectionLineComponentProps } from 'react-flow-renderer';
 
-const ConnectionLine: FC<ConnectionLineComponentProps> = ({ sourceX, sourceY, targetX, targetY }) => {
+const ConnectionLine: FC<ConnectionLineComponentProps> = ({ sourceX, sourceY, targetX, targetY, toX, toY }) => {
   return (
     <g>
       <path
@@ -11,7 +11,7 @@ const ConnectionLine: FC<ConnectionLineComponentProps> = ({ sourceX, sourceY, ta
         className="animated"
         d={`M${sourceX},${sourceY} C ${sourceX} ${targetY} ${sourceX} ${targetY} ${targetX},${targetY}`}
       />
-      <circle cx={targetX} cy={targetY} fill="#fff" r={3} stroke="#222" strokeWidth={1.5} />
+      <circle cx={toX} cy={toY} fill="#fff" r={3} stroke="#222" strokeWidth={1.5} />
     </g>
   );
 };

example/src/CustomConnectionLine/index.tsx

@@ -1,3 +1,4 @@
+import { useCallback } from 'react';
 import ReactFlow, {
   Node,
   addEdge,
@@ -11,13 +12,13 @@ import ReactFlow, {
 
 import ConnectionLine from './ConnectionLine';
 
-const initialNodes: Node[] = [{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } }];
+const initialNodes: Node[] = [{ id: '1', type: 'default', data: { label: 'Node 1' }, position: { x: 250, y: 5 } }];
 const initialEdges: Edge[] = [];
 
 const ConnectionLineFlow = () => {
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-  const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));
+  const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
 
   return (
     <ReactFlow

src/components/ConnectionLine/index.tsx

@@ -8,14 +8,21 @@ import { ConnectionLineType, ConnectionLineComponent, HandleType, Position } fro
 import { getSimpleBezierPath } from '../Edges/SimpleBezierEdge';
 import { internalsSymbol } from '../../utils';
 
-interface ConnectionLineProps {
+type ConnectionLineProps = {
   connectionNodeId: string;
   connectionHandleType: HandleType;
   connectionLineType: ConnectionLineType;
   isConnectable: boolean;
   connectionLineStyle?: CSSProperties;
   CustomConnectionLineComponent?: ConnectionLineComponent;
-}
+};
+
+const oppositePosition = {
+  [Position.Left]: Position.Right,
+  [Position.Right]: Position.Left,
+  [Position.Top]: Position.Bottom,
+  [Position.Bottom]: Position.Top,
+};
 
 export default ({
   connectionNodeId,
@@ -43,8 +50,8 @@ export default ({
     return null;
   }
 
-  const handleBound = fromHandleBounds[connectionHandleType];
+  const handleBound = fromHandleBounds[connectionHandleType]!;
-  const fromHandle = handleId ? handleBound?.find((d) => d.id === handleId) : handleBound?.[0];
+  const fromHandle = handleId ? handleBound.find((d) => d.id === handleId) : handleBound[0];
   const fromHandleX = fromHandle ? fromHandle.x + fromHandle.width / 2 : (fromNode?.width ?? 0) / 2;
   const fromHandleY = fromHandle ? fromHandle.y + fromHandle.height / 2 : fromNode?.height ?? 0;
   const fromX = (fromNode?.positionAbsolute?.x || 0) + fromHandleX;
@@ -52,22 +59,12 @@ export default ({
 
   const fromPosition = fromHandle?.position;
 
-  let toPosition: Position | undefined;
+  if (!fromPosition) {
-  switch (fromPosition) {
+    return null;
-    case Position.Left:
-      toPosition = Position.Right;
-      break;
-    case Position.Right:
-      toPosition = Position.Left;
-      break;
-    case Position.Top:
-      toPosition = Position.Bottom;
-      break;
-    case Position.Bottom:
-      toPosition = Position.Top;
-      break;
   }
 
+  let toPosition: Position = oppositePosition[fromPosition];
+
   let sourceX: number,
     sourceY: number,
     sourcePosition: Position | undefined,
@@ -102,19 +99,25 @@ export default ({
     return (
       <g className="react-flow__connection">
         <CustomConnectionLineComponent
-          sourceX={sourceX}
-          sourceY={sourceY}
-          sourcePosition={sourcePosition}
-          targetX={targetX}
-          targetY={targetY}
-          targetPosition={targetPosition}
           connectionLineType={connectionLineType}
           connectionLineStyle={connectionLineStyle}
           fromNode={fromNode}
           fromHandle={fromHandle}
-          // backward compatibility, mark as deprecated?
+          fromX={fromX}
+          fromY={fromY}
+          toX={toX}
+          toY={toY}
+          fromPosition={fromPosition}
+          toPosition={toPosition}
+          // remove in v11
+          sourcePosition={sourcePosition}
+          targetPosition={targetPosition}
           sourceNode={fromNode}
           sourceHandle={fromHandle}
+          targetX={targetX}
+          targetY={targetY}
+          sourceX={sourceX}
+          sourceY={sourceY}
         />
       </g>
     );

src/types/edges.ts

@@ -148,17 +148,23 @@ export enum ConnectionLineType {
 }
 
 export type ConnectionLineComponentProps = {
+  connectionLineStyle?: CSSProperties;
+  connectionLineType: ConnectionLineType;
+  fromNode?: Node;
+  fromHandle?: HandleElement;
+  fromX: number;
+  fromY: number;
+  toX: number;
+  toY: number;
+  fromPosition: Position;
+  toPosition: Position;
+  // remove in v11
   sourceX: number;
   sourceY: number;
   sourcePosition?: Position;
   targetX: number;
   targetY: number;
   targetPosition?: Position;
-  connectionLineStyle?: CSSProperties;
-  connectionLineType: ConnectionLineType;
-  fromNode?: Node;
-  fromHandle?: HandleElement;
-  // backward compatibility, mark as deprecated?
   sourceNode?: Node;
   sourceHandle?: HandleElement;
 };