From 864dc262c2d03be0a1f88ca8a738e315d79e340b Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Thu, 8 Jun 2023 12:27:06 +0200
Subject: [PATCH] refactor(react): simplify nodes selection

---
 .../react/src/components/NodesSelection/index.tsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/react/src/components/NodesSelection/index.tsx b/packages/react/src/components/NodesSelection/index.tsx
index 3765a2ca..125425c1 100644
--- a/packages/react/src/components/NodesSelection/index.tsx
+++ b/packages/react/src/components/NodesSelection/index.tsx
@@ -14,24 +14,27 @@ import { arrowKeyDiffs } from '../Nodes/wrapNode';
 import useUpdateNodePositions from '../../hooks/useUpdateNodePositions';
 import type { Node, ReactFlowState } from '../../types';
 
-export interface NodesSelectionProps {
+export type NodesSelectionProps = {
   onSelectionContextMenu?: (event: MouseEvent, nodes: Node[]) => void;
   noPanClassName?: string;
   disableKeyboardA11y: boolean;
-}
+};
 
 const selector = (s: ReactFlowState) => {
   const selectedNodes = s.getNodes().filter((n) => n.selected);
+  const { width, height, x, y } = getRectOfNodes(selectedNodes, s.nodeOrigin);
+
   return {
-    ...getRectOfNodes(selectedNodes, s.nodeOrigin),
-    transformString: `translate(${s.transform[0]}px,${s.transform[1]}px) scale(${s.transform[2]})`,
+    width,
+    height,
     userSelectionActive: s.userSelectionActive,
+    transformString: `translate(${s.transform[0]}px,${s.transform[1]}px) scale(${s.transform[2]}) translate(${x}px,${y}px)`,
   };
 };
 
 function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboardA11y }: NodesSelectionProps) {
   const store = useStoreApi();
-  const { width, height, x: left, y: top, transformString, userSelectionActive } = useStore(selector, shallow);
+  const { width, height, transformString, userSelectionActive } = useStore(selector, shallow);
   const updatePositions = useUpdateNodePositions();
 
   const nodeRef = useRef<HTMLDivElement>(null);
@@ -88,8 +91,6 @@ function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboar
         style={{
           width,
           height,
-          top,
-          left,
         }}
       />
     </div>