refactor(connectionLine): cleanup props #2300

examples/nextjs/pages/CustomConnectionLine/ConnectionLine.tsx

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

packages/core/src/components/ConnectionLine/index.tsx

@@ -65,36 +65,6 @@ export default ({
 
   let toPosition: Position = oppositePosition[fromPosition];
 
-  let sourceX: number,
-    sourceY: number,
-    sourcePosition: Position | undefined,
-    targetX: number,
-    targetY: number,
-    targetPosition: Position | undefined;
-
-  switch (connectionHandleType) {
-    case 'source':
-      {
-        sourceX = fromX;
-        sourceY = fromY;
-        sourcePosition = fromPosition;
-        targetX = toX;
-        targetY = toY;
-        targetPosition = toPosition;
-      }
-      break;
-    case 'target':
-      {
-        sourceX = toX;
-        sourceY = toY;
-        sourcePosition = toPosition;
-        targetX = fromX;
-        targetY = fromY;
-        targetPosition = fromPosition;
-      }
-      break;
-  }
-
   if (CustomConnectionLineComponent) {
     return (
       <g className="react-flow__connection">
@@ -109,15 +79,6 @@ export default ({
           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>
     );
@@ -126,12 +87,12 @@ export default ({
   let dAttr: string = '';
 
   const pathParams = {
-    sourceX,
+    sourceX: fromX,
-    sourceY,
+    sourceY: fromY,
-    sourcePosition,
+    sourcePosition: fromPosition,
-    targetX,
+    targetX: toX,
-    targetY,
+    targetY: toY,
-    targetPosition,
+    targetPosition: toPosition,
   };
 
   if (connectionLineType === ConnectionLineType.Bezier) {
@@ -147,7 +108,7 @@ export default ({
   } else if (connectionLineType === ConnectionLineType.SimpleBezier) {
     dAttr = getSimpleBezierPath(pathParams);
   } else {
-    dAttr = `M${sourceX},${sourceY} ${targetX},${targetY}`;
+    dAttr = `M${fromX},${fromY} ${toX},${toY}`;
   }
 
   return (

packages/core/src/types/edges.ts

@@ -158,15 +158,6 @@ export type ConnectionLineComponentProps = {
   toY: number;
   fromPosition: Position;
   toPosition: Position;
-  // remove in v11
-  sourceX: number;
-  sourceY: number;
-  sourcePosition?: Position;
-  targetX: number;
-  targetY: number;
-  targetPosition?: Position;
-  sourceNode?: Node;
-  sourceHandle?: HandleElement;
 };
 
 export type ConnectionLineComponent = ComponentType<ConnectionLineComponentProps>;