merge(connectionLine): wbkd/react-flow:main

src/components/Edges/BezierEdge.tsx

@@ -37,9 +37,9 @@ export function getBezierPath({
   if (leftAndRight.includes(sourcePosition) && leftAndRight.includes(targetPosition)) {
     path = `M${sourceX},${sourceY} C${cX},${sourceY} ${cX},${targetY} ${targetX},${targetY}`;
   } else if (leftAndRight.includes(targetPosition)) {
-    path = `M${sourceX},${sourceY} C${sourceX},${targetY} ${sourceX},${targetY} ${targetX},${targetY}`;
+    path = `M${sourceX},${sourceY} Q${sourceX},${targetY} ${targetX},${targetY}`;
   } else if (leftAndRight.includes(sourcePosition)) {
-    path = `M${sourceX},${sourceY} C${targetX},${sourceY} ${targetX},${sourceY} ${targetX},${targetY}`;
+    path = `M${sourceX},${sourceY} Q${targetX},${sourceY} ${targetX},${targetY}`;
   }
 
   return path;

src/components/Edges/wrapEdge.tsx

@@ -160,7 +160,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
           _onEdgeUpdate
         );
       },
-      [id, source, target, type, sourceHandleId, targetHandleId, setConnectionNodeId, setPosition, edgeElement]
+      [id, source, target, type, sourceHandleId, targetHandleId, setConnectionNodeId, setPosition, edgeElement, onConnectEdge]
     );
 
     const onEdgeUpdaterSourceMouseDown = useCallback(

src/components/Nodes/wrapNode.tsx

@@ -48,6 +48,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
     snapGrid,
     isDragging,
     resizeObserver,
+    dragHandle,
   }: WrapNodeProps) => {
     const updateNodeDimensions = useStoreActions((actions) => actions.updateNodeDimensions);
     const addSelectedElements = useStoreActions((actions) => actions.addSelectedElements);
@@ -241,6 +242,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
         nodeRef={nodeElement}
         grid={grid}
         enableUserSelectHack={false}
+        handle={dragHandle}
       >
         <div
           className={nodeClasses}
@@ -266,6 +268,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
               sourcePosition={sourcePosition}
               targetPosition={targetPosition}
               isDragging={isDragging}
+              dragHandle={dragHandle}
             />
           </Provider>
         </div>

src/components/SelectionListener/index.tsx

@@ -7,9 +7,7 @@ interface SelectionListenerProps {
   onSelectionChange: (elements: Elements | null) => void;
 }
 
-// This is just a helper component for calling the onSelectionChange listener.
-// As soon as easy-peasy has implemented the effectOn hook, we can remove this component
-// and use the hook instead. https://github.com/ctrlplusb/easy-peasy/pull/459
+// This is a helper component for calling the onSelectionChange listener
 
 export default ({ onSelectionChange }: SelectionListenerProps) => {
   const selectedElements = useStoreState((s) => s.selectedElements);