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

@@ -102,23 +102,24 @@ const FlowRenderer = ({
       noWheelClassName={noWheelClassName}
       noPanClassName={noPanClassName}
     >
-      {children}
+      <UserSelection
-      <UserSelection selectionKeyPressed={selectionKeyPressed || (selectBoxOnDrag && !panOnDrag)} />
-      {nodesSelectionActive && (
-        <NodesSelection
-          onSelectionContextMenu={onSelectionContextMenu}
-          noPanClassName={noPanClassName}
-          disableKeyboardA11y={disableKeyboardA11y}
-        />
-      )}
-      <Pane
         onClick={onClick}
         onMouseEnter={onPaneMouseEnter}
         onMouseMove={onPaneMouseMove}
         onMouseLeave={onPaneMouseLeave}
         onContextMenu={onContextMenu}
         onWheel={onWheel}
-      />
+        selectionKeyPressed={selectionKeyPressed || (selectBoxOnDrag && !panOnDrag)}
+      >
+        {children}
+        {nodesSelectionActive && (
+          <NodesSelection
+            onSelectionContextMenu={onSelectionContextMenu}
+            noPanClassName={noPanClassName}
+            disableKeyboardA11y={disableKeyboardA11y}
+          />
+        )}
+      </UserSelection>
     </ZoomPane>
   );
 };