Better selection usability (#4379)

* use pointer capture for selection boxes

* fixed selection box behaviour

* promoted modifier listeners to window level

* selection should still happen when shift key is let go during selection

* ported changes to svelte flow

* review changes

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

@@ -70,8 +70,8 @@ function FlowRendererComponent<NodeType extends Node = Node>({
   isControlledViewport,
 }: FlowRendererProps<NodeType>) {
   const { nodesSelectionActive, userSelectionActive } = useStore(selector);
-  const selectionKeyPressed = useKeyPress(selectionKeyCode);
-  const panActivationKeyPressed = useKeyPress(panActivationKeyCode);
+  const selectionKeyPressed = useKeyPress(selectionKeyCode, { target: window });
+  const panActivationKeyPressed = useKeyPress(panActivationKeyCode, { target: window });
 
   const panOnDrag = panActivationKeyPressed || _panOnDrag;
   const panOnScroll = panActivationKeyPressed || _panOnScroll;
@@ -113,6 +113,7 @@ function FlowRendererComponent<NodeType extends Node = Node>({
         panOnDrag={panOnDrag}
         isSelecting={!!isSelecting}
         selectionMode={selectionMode}
+        selectionKeyPressed={selectionKeyPressed}
       >
         {children}
         {nodesSelectionActive && (