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

src/additional-components/Controls/index.tsx

@@ -26,7 +26,7 @@ export interface ControlProps extends HTMLAttributes<HTMLDivElement> {
 export interface ControlButtonProps extends HTMLAttributes<HTMLButtonElement> {}
 
 export const ControlButton: FC<ControlButtonProps> = ({ children, className, ...rest }) => (
-  <button className={cc(['react-flow__controls-button', className])} {...rest}>
+  <button type="button" className={cc(['react-flow__controls-button', className])} {...rest}>
     {children}
   </button>
 );

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);

src/container/EdgeRenderer/index.tsx

@@ -72,7 +72,7 @@ const Edge = ({
     (connection: Connection) => {
       props.onEdgeUpdate?.(edge, connection);
     },
-    [edge]
+    [edge, props.onEdgeUpdate]
   );
 
   if (!sourceNode) {

src/container/NodeRenderer/index.tsx

@@ -104,6 +104,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
             isSelectable={isSelectable}
             isConnectable={isConnectable}
             resizeObserver={resizeObserver}
+            dragHandle={node.dragHandle}
           />
         );
       })}

src/types/index.ts

@@ -49,6 +49,7 @@ export interface Node<T = any> {
   draggable?: boolean;
   selectable?: boolean;
   connectable?: boolean;
+  dragHandle?: string;
 }
 
 export enum ArrowHeadType {
@@ -186,6 +187,7 @@ export interface NodeProps<T = any> {
   targetPosition?: Position;
   sourcePosition?: Position;
   isDragging?: boolean;
+  dragHandle?: string;
 }
 
 export interface NodeComponentProps<T = any> {
@@ -210,6 +212,7 @@ export interface NodeComponentProps<T = any> {
   onNodeDragStop?: (node: Node) => void;
   style?: CSSProperties;
   isDragging?: boolean;
+  dragHandle?: string;
 }
 
 export interface WrapNodeProps<T = any> {
@@ -243,6 +246,7 @@ export interface WrapNodeProps<T = any> {
   snapGrid?: SnapGrid;
   isDragging?: boolean;
   resizeObserver: ResizeObserver | null;
+  dragHandle?: string;
 }
 
 export type FitViewParams = {