From ad3a803abbec1fb0bb5d255d0d92b2cec388b403 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Thu, 2 May 2024 18:02:38 +0200
Subject: [PATCH] fix(react): dont allow invalid selection rect

---
 .../react/src/examples/DefaultNodes/index.tsx | 22 +++++++++----------
 .../DevTools/DevTools/NodeInspector.tsx       |  8 +++----
 .../src/components/NodesSelection/index.tsx   |  6 ++---
 3 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/examples/react/src/examples/DefaultNodes/index.tsx b/examples/react/src/examples/DefaultNodes/index.tsx
index 46ef8e0c..354fa994 100644
--- a/examples/react/src/examples/DefaultNodes/index.tsx
+++ b/examples/react/src/examples/DefaultNodes/index.tsx
@@ -54,26 +54,24 @@ const DefaultNodes = () => {
 
   const updateNodePositions = () => {
     instance.setNodes((nodes) =>
-      nodes.map((node) => {
-        node.position = {
+      nodes.map((node) => ({
+        ...node,
+        position: {
           x: Math.random() * 400,
           y: Math.random() * 400,
-        };
-
-        return node;
-      })
+        },
+      }))
     );
   };
 
   const updateEdgeColors = () => {
     instance.setEdges((edges) =>
-      edges.map((edge) => {
-        edge.style = {
+      edges.map((edge) => ({
+        ...edge,
+        style: {
           stroke: '#ff5050',
-        };
-
-        return edge;
-      })
+        },
+      }))
     );
   };
 
diff --git a/examples/react/src/examples/DevTools/DevTools/NodeInspector.tsx b/examples/react/src/examples/DevTools/DevTools/NodeInspector.tsx
index 5d467514..e0897509 100644
--- a/examples/react/src/examples/DevTools/DevTools/NodeInspector.tsx
+++ b/examples/react/src/examples/DevTools/DevTools/NodeInspector.tsx
@@ -44,10 +44,10 @@ export default function NodeInspector() {
     <ViewportPortal>
       <div className="react-flow__devtools-nodeinspector">
         {nodes.map((node) => {
-          const x = node.computed?.positionAbsolute?.x || 0;
-          const y = node.computed?.positionAbsolute?.y || 0;
-          const width = node.computed?.width || 0;
-          const height = node.computed?.height || 0;
+          const x = node?.position?.x || 0;
+          const y = node?.position?.y || 0;
+          const width = node.measured?.width || 0;
+          const height = node.measured?.height || 0;
 
           return (
             <NodeInfo
diff --git a/packages/react/src/components/NodesSelection/index.tsx b/packages/react/src/components/NodesSelection/index.tsx
index ae0a84d1..fda3a8c9 100644
--- a/packages/react/src/components/NodesSelection/index.tsx
+++ b/packages/react/src/components/NodesSelection/index.tsx
@@ -5,7 +5,7 @@
 import { useRef, useEffect, type MouseEvent, type KeyboardEvent } from 'react';
 import cc from 'classcat';
 import { shallow } from 'zustand/shallow';
-import { getInternalNodesBounds } from '@xyflow/system';
+import { getInternalNodesBounds, isNumeric } from '@xyflow/system';
 
 import { useStore, useStoreApi } from '../../hooks/useStore';
 import { useDrag } from '../../hooks/useDrag';
@@ -26,8 +26,8 @@ const selector = (s: ReactFlowState) => {
   });
 
   return {
-    width,
-    height,
+    width: isNumeric(width) ? width : null,
+    height: isNumeric(height) ? height : null,
     userSelectionActive: s.userSelectionActive,
     transformString: `translate(${s.transform[0]}px,${s.transform[1]}px) scale(${s.transform[2]}) translate(${x}px,${y}px)`,
   };