fix(react): dont allow invalid selection rect

examples/react/src/examples/DefaultNodes/index.tsx

@@ -54,26 +54,24 @@ const DefaultNodes = () => {
 
   const updateNodePositions = () => {
     instance.setNodes((nodes) =>
-      nodes.map((node) => {
+      nodes.map((node) => ({
-        node.position = {
+        ...node,
+        position: {
           x: Math.random() * 400,
           y: Math.random() * 400,
-        };
+        },
-
+      }))
-        return node;
-      })
     );
   };
 
   const updateEdgeColors = () => {
     instance.setEdges((edges) =>
-      edges.map((edge) => {
+      edges.map((edge) => ({
-        edge.style = {
+        ...edge,
+        style: {
           stroke: '#ff5050',
-        };
+        },
-
+      }))
-        return edge;
-      })
     );
   };
 

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 x = node?.position?.x || 0;
-          const y = node.computed?.positionAbsolute?.y || 0;
+          const y = node?.position?.y || 0;
-          const width = node.computed?.width || 0;
+          const width = node.measured?.width || 0;
-          const height = node.computed?.height || 0;
+          const height = node.measured?.height || 0;
 
           return (
             <NodeInfo

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,
+    width: isNumeric(width) ? width : null,
-    height,
+    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)`,
   };