feat: condense user selection into pane.

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

@@ -18,6 +18,10 @@ type SelectionRect = Rect & {
 
 type UserSelectionProps = {
   selectionKeyPressed: boolean;
+  onClick?: (e: React.MouseEvent) => void;
+  onContextMenu?: (e: React.MouseEvent) => void;
+  onWheel?: (e: React.WheelEvent) => void;
+  children: React.ReactNode;
 };
 
 function getMousePosition(event: React.MouseEvent, containerBounds: DOMRect): XYPosition {
@@ -42,7 +46,7 @@ const initialRect: SelectionRect = {
   draw: false,
 };
 
-const UserSelection = memo(({ selectionKeyPressed }: UserSelectionProps) => {
+const UserSelection = memo(({ selectionKeyPressed, onClick, onContextMenu, onWheel, children }: UserSelectionProps) => {
   const store = useStoreApi();
   const prevSelectedNodesCount = useRef<number>(0);
   const prevSelectedEdgesCount = useRef<number>(0);
@@ -80,8 +84,6 @@ const UserSelection = memo(({ selectionKeyPressed }: UserSelectionProps) => {
       y: mousePos.y,
       draw: true,
     });
-
-    store.setState({ userSelectionActive: true, nodesSelectionActive: false });
   };
 
   const onMouseMove = (event: React.MouseEvent): void => {
@@ -89,6 +91,8 @@ const UserSelection = memo(({ selectionKeyPressed }: UserSelectionProps) => {
       return;
     }
 
+    store.setState({ userSelectionActive: true, nodesSelectionActive: false });
+
     const mousePos = getMousePosition(event, containerBounds.current!);
     const startX = userSelectionRect.startX ?? 0;
     const startY = userSelectionRect.startY ?? 0;
@@ -138,12 +142,16 @@ const UserSelection = memo(({ selectionKeyPressed }: UserSelectionProps) => {
 
   return (
     <div
-      className="react-flow__selectionpane react-flow__container"
+      className="react-flow__pane react-flow__container"
       onMouseDown={onMouseDown}
       onMouseMove={onMouseMove}
       onMouseUp={onMouseUp}
       onMouseLeave={onMouseLeave}
+      onClick={onClick}
+      onContextMenu={onContextMenu}
+      onWheel={onWheel}
     >
+      {children}
       {userSelectionRect.draw && (
         <div
           className="react-flow__selection react-flow__container"

packages/core/src/container/FlowRenderer/index.tsx

@@ -101,9 +101,17 @@ const FlowRenderer = ({
       preventScrolling={preventScrolling}
       noWheelClassName={noWheelClassName}
       noPanClassName={noPanClassName}
+    >
+      <UserSelection
+        onClick={onClick}
+        onMouseEnter={onPaneMouseEnter}
+        onMouseMove={onPaneMouseMove}
+        onMouseLeave={onPaneMouseLeave}
+        onContextMenu={onContextMenu}
+        onWheel={onWheel}
+        selectionKeyPressed={selectionKeyPressed || (selectBoxOnDrag && !panOnDrag)}
       >
         {children}
-      <UserSelection selectionKeyPressed={selectionKeyPressed || (selectBoxOnDrag && !panOnDrag)} />
         {nodesSelectionActive && (
           <NodesSelection
             onSelectionContextMenu={onSelectionContextMenu}
@@ -111,14 +119,7 @@ const FlowRenderer = ({
             disableKeyboardA11y={disableKeyboardA11y}
           />
         )}
-      <Pane
+      </UserSelection>
-        onClick={onClick}
-        onMouseEnter={onPaneMouseEnter}
-        onMouseMove={onPaneMouseMove}
-        onMouseLeave={onPaneMouseLeave}
-        onContextMenu={onContextMenu}
-        onWheel={onWheel}
-      />
     </ZoomPane>
   );
 };