fix(nodeOrigin): repair multi selection and fitView

packages/core/src/components/NodesSelection/index.tsx

@@ -24,12 +24,11 @@ export interface NodesSelectionProps {
 const selector = (s: ReactFlowState) => ({
   transformString: `translate(${s.transform[0]}px,${s.transform[1]}px) scale(${s.transform[2]})`,
   userSelectionActive: s.userSelectionActive,
-  ...getRectOfNodes(Array.from(s.nodeInternals.values()).filter((n) => n.selected)),
 });
 
 const bboxSelector = (s: ReactFlowState) => {
   const selectedNodes = Array.from(s.nodeInternals.values()).filter((n) => n.selected);
-  return getRectOfNodes(selectedNodes);
+  return getRectOfNodes(selectedNodes, s.nodeOrigin);
 };
 
 function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboardA11y }: NodesSelectionProps) {

packages/core/src/components/UserSelection/index.tsx

@@ -101,9 +101,9 @@ const UserSelection = memo(({ selectionKeyPressed }: UserSelectionProps) => {
       height: Math.abs(mousePos.y - startY),
     };
 
-    const { nodeInternals, edges, transform, onNodesChange, onEdgesChange } = store.getState();
+    const { nodeInternals, edges, transform, onNodesChange, onEdgesChange, nodeOrigin } = store.getState();
     const nodes = Array.from(nodeInternals.values());
-    const selectedNodes = getNodesInside(nodeInternals, nextUserSelectRect, transform, false, true);
+    const selectedNodes = getNodesInside(nodeInternals, nextUserSelectRect, transform, false, true, nodeOrigin);
     const selectedEdgeIds = getConnectedEdges(selectedNodes, edges).map((e) => e.id);
     const selectedNodeIds = selectedNodes.map((n) => n.id);
 

packages/core/src/store/utils.ts

@@ -100,8 +100,18 @@ type InternalFitViewOptions = {
 } & FitViewOptions;
 
 export function fitView(get: StoreApi<ReactFlowState>['getState'], options: InternalFitViewOptions = {}) {
-  const { nodeInternals, width, height, minZoom, maxZoom, d3Zoom, d3Selection, fitViewOnInitDone, fitViewOnInit } =
-    get();
+  const {
+    nodeInternals,
+    width,
+    height,
+    minZoom,
+    maxZoom,
+    d3Zoom,
+    d3Selection,
+    fitViewOnInitDone,
+    fitViewOnInit,
+    nodeOrigin,
+  } = get();
 
   if ((options.initial && !fitViewOnInitDone && fitViewOnInit) || !options.initial) {
     if (d3Zoom && d3Selection) {
@@ -112,7 +122,7 @@ export function fitView(get: StoreApi<ReactFlowState>['getState'], options: Inte
       const nodesInitialized = nodes.every((n) => n.width && n.height);
 
       if (nodes.length > 0 && nodesInitialized) {
-        const bounds = getRectOfNodes(nodes);
+        const bounds = getRectOfNodes(nodes, nodeOrigin);
         const [x, y, zoom] = getTransformForBounds(
           bounds,
           width,

packages/core/src/utils/graph.ts

@@ -2,7 +2,17 @@
 import type { Selection as D3Selection } from 'd3';
 
 import { boxToRect, clamp, devWarn, getBoundsOfBoxes, getOverlappingArea, rectToBox } from '../utils';
-import type { Node, Edge, Connection, EdgeMarkerType, Transform, XYPosition, Rect, NodeInternals } from '../types';
+import type {
+  Node,
+  Edge,
+  Connection,
+  EdgeMarkerType,
+  Transform,
+  XYPosition,
+  Rect,
+  NodeInternals,
+  NodeOrigin,
+} from '../types';
 
 export const isEdge = (element: Node | Connection | Edge): element is Edge =>
   'id' in element && 'source' in element && 'target' in element;
@@ -131,22 +141,26 @@ export const pointToRendererPoint = (
   return position;
 };
 
-export const getRectOfNodes = (nodes: Node[]): Rect => {
+export const getRectOfNodes = (nodes: Node[], nodeOrigin: NodeOrigin = [0, 0]): Rect => {
   if (nodes.length === 0) {
     return { x: 0, y: 0, width: 0, height: 0 };
   }
 
   const box = nodes.reduce(
-    (currBox, { positionAbsolute, position, width, height }) =>
-      getBoundsOfBoxes(
+    (currBox, { positionAbsolute, position, width, height }) => {
+      const nodeX = positionAbsolute ? positionAbsolute.x : position.x;
+      const nodeY = positionAbsolute ? positionAbsolute.y : position.y;
+
+      return getBoundsOfBoxes(
         currBox,
         rectToBox({
-          x: positionAbsolute ? positionAbsolute.x : position.x,
-          y: positionAbsolute ? positionAbsolute.y : position.y,
+          x: nodeX - nodeOrigin[0] * (width || 0),
+          y: nodeY - nodeOrigin[1] * (height || 0),
           width: width || 0,
           height: height || 0,
         })
-      ),
+      );
+    },
     { x: Infinity, y: Infinity, x2: -Infinity, y2: -Infinity }
   );
 
@@ -159,7 +173,8 @@ export const getNodesInside = (
   [tx, ty, tScale]: Transform = [0, 0, 1],
   partially = false,
   // set excludeNonSelectableNodes if you want to pay attention to the nodes "selectable" attribute
-  excludeNonSelectableNodes = false
+  excludeNonSelectableNodes = false,
+  nodeOrigin: NodeOrigin = [0, 0]
 ): Node[] => {
   const paneRect = {
     x: (rect.x - tx) / tScale,
@@ -171,13 +186,18 @@ export const getNodesInside = (
   const visibleNodes: Node[] = [];
 
   nodeInternals.forEach((node) => {
-    const { positionAbsolute = { x: 0, y: 0 }, width, height, selectable = true } = node;
+    const { width, height, selectable = true, positionAbsolute = { x: 0, y: 0 } } = node;
 
     if (excludeNonSelectableNodes && !selectable) {
       return false;
     }
 
-    const nodeRect = { ...positionAbsolute, width: width || 0, height: height || 0 };
+    const nodeRect = {
+      x: positionAbsolute.x - nodeOrigin[0] * (width || 0),
+      y: positionAbsolute.y - nodeOrigin[1] * (height || 0),
+      width: width || 0,
+      height: height || 0,
+    };
     const overlappingArea = getOverlappingArea(paneRect, nodeRect);
     const notInitialized =
       typeof width === 'undefined' || typeof height === 'undefined' || width === null || height === null;