Merge pull request #2600 from wbkd/next-release

Next release

.changeset/neat-fishes-burn.md

@@ -0,0 +1,6 @@
+---
+'@reactflow/core': patch
+'@reactflow/minimap': patch
+---
+
+Fix and improve the behaviour when using nodeOrigin in combination with subflows

.changeset/perfect-spiders-own.md

@@ -0,0 +1,5 @@
+---
+'@reactflow/core': patch
+---
+
+Wrapper: dont use try catch for checking if provider is available

.changeset/silver-dots-try.md

@@ -0,0 +1,5 @@
+---
+'@reactflow/core': patch
+---
+
+fix isRectObject function

.changeset/six-dolls-search.md

@@ -0,0 +1,5 @@
+---
+'@reactflow/node-toolbar': patch
+---
+
+Allow multiple node ids to be passed to the node toolbar for enabling multi selection toolbars

examples/vite-app/src/examples/NodeToolbar/SelectedNodesToolbar.tsx

@@ -0,0 +1,17 @@
+import { NodeToolbar, ReactFlowState, useStore } from 'reactflow';
+
+const selectedNodesSelector = (state: ReactFlowState) =>
+  Array.from(state.nodeInternals.values())
+    .filter((node) => node.selected)
+    .map((node) => node.id);
+
+export default function SelectedNodesToolbar() {
+  const selectedNodeIds = useStore(selectedNodesSelector);
+  const isVisible = selectedNodeIds.length > 1;
+
+  return (
+    <NodeToolbar nodeId={selectedNodeIds} isVisible={isVisible}>
+      <button>Selection action</button>
+    </NodeToolbar>
+  );
+}

examples/vite-app/src/examples/NodeToolbar/index.tsx

@@ -11,6 +11,7 @@ import ReactFlow, {
 } from 'reactflow';
 
 import CustomNode from './CustomNode';
+import SelectedNodesToolbar from './SelectedNodesToolbar';
 
 const nodeTypes: NodeTypes = {
   custom: CustomNode,
@@ -79,6 +80,7 @@ export default function NodeToolbarExample() {
       <Background variant={BackgroundVariant.Dots} />
       <MiniMap />
       <Controls />
+      <SelectedNodesToolbar />
     </ReactFlow>
   );
 }

examples/vite-app/src/examples/Subflow/index.tsx

@@ -11,6 +11,7 @@ import ReactFlow, {
   Controls,
   MiniMap,
   Background,
+  NodeOrigin,
 } from 'reactflow';
 
 import DebugNode from './DebugNode';
@@ -90,7 +91,7 @@ const initialNodes: Node[] = [
   {
     id: '5a',
     data: { label: 'Node 5a' },
-    position: { x: 25, y: 50 },
+    position: { x: 0, y: 0 },
     className: 'light',
     parentNode: '5',
     extent: 'parent',

packages/core/src/container/ReactFlow/Wrapper.tsx

@@ -1,16 +1,11 @@
+import { useContext } from 'react';
 import type { FC, PropsWithChildren } from 'react';
 
-import { useStoreApi } from '../../hooks/useStore';
+import StoreContext from '../../contexts/RFStoreContext';
 import ReactFlowProvider from '../../components/ReactFlowProvider';
 
 const Wrapper: FC<PropsWithChildren> = ({ children }) => {
-  let isWrapped = true;
+  const isWrapped = useContext(StoreContext);
-
-  try {
-    useStoreApi();
-  } catch (e) {
-    isWrapped = false;
-  }
 
   if (isWrapped) {
     // we need to wrap it with a fragment because it's not allowed for children to be a ReactNode

packages/core/src/hooks/useDrag/index.ts

@@ -114,6 +114,7 @@ function useDrag({
               onSelectionDrag,
               snapGrid,
               snapToGrid,
+              nodeOrigin,
             } = store.getState();
             const pointerPos = getPointerPosition(event);
             // skip events without movement
@@ -133,7 +134,7 @@ function useDrag({
                   nextPosition.y = snapGrid[1] * Math.round(nextPosition.y / snapGrid[1]);
                 }
 
-                const updatedPos = calcNextPosition(n, nextPosition, nodeInternals, nodeExtent);
+                const updatedPos = calcNextPosition(n, nextPosition, nodeInternals, nodeExtent, nodeOrigin);
 
                 n.position = updatedPos.position;
                 n.positionAbsolute = updatedPos.positionAbsolute;

packages/core/src/hooks/useDrag/utils.ts

@@ -1,7 +1,8 @@
 import type { RefObject } from 'react';
 
 import { clampPosition, devWarn } from '../../utils';
-import type { CoordinateExtent, Node, NodeDragItem, NodeInternals, XYPosition } from '../../types';
+import type { CoordinateExtent, Node, NodeDragItem, NodeInternals, NodeOrigin, XYPosition } from '../../types';
+import { getNodePositionWithOrigin } from '../../utils/graph';
 
 export function isParentSelected(node: Node, nodeInternals: NodeInternals): boolean {
   if (!node.parentNode) {
@@ -60,20 +61,25 @@ export function calcNextPosition(
   node: NodeDragItem | Node,
   nextPosition: XYPosition,
   nodeInternals: NodeInternals,
-  nodeExtent?: CoordinateExtent
+  nodeExtent?: CoordinateExtent,
+  nodeOrigin: NodeOrigin = [0, 0]
 ): { position: XYPosition; positionAbsolute: XYPosition } {
   let currentExtent = node.extent || nodeExtent;
 
   if (node.extent === 'parent') {
     if (node.parentNode && node.width && node.height) {
       const parent = nodeInternals.get(node.parentNode);
+      const parentPosition = getNodePositionWithOrigin(parent, nodeOrigin);
       currentExtent =
-        parent?.positionAbsolute && parent?.width && parent?.height
+        parentPosition.positionAbsolute && parent?.width && parent?.height
           ? [
-              [parent.positionAbsolute.x, parent.positionAbsolute.y],
               [
-                parent.positionAbsolute.x + parent.width - node.width,
+                parentPosition.positionAbsolute.x + node.width * nodeOrigin[0],
-                parent.positionAbsolute.y + parent.height - node.height,
+                parentPosition.positionAbsolute.y + node.height * nodeOrigin[1],
+              ],
+              [
+                parentPosition.positionAbsolute.x + parent.width - node.width + node.width * nodeOrigin[0],
+                parentPosition.positionAbsolute.y + parent.height - node.height + node.height * nodeOrigin[1],
               ],
             ]
           : currentExtent;
@@ -84,8 +90,8 @@ export function calcNextPosition(
     }
   } else if (node.extent && node.parentNode) {
     const parent = nodeInternals.get(node.parentNode);
-    const parentX = parent?.positionAbsolute?.x ?? 0;
+    const parentPosition = getNodePositionWithOrigin(parent, nodeOrigin);
-    const parentY = parent?.positionAbsolute?.y ?? 0;
+    const { x: parentX, y: parentY } = parentPosition.positionAbsolute;
     currentExtent = [
       [node.extent[0][0] + parentX, node.extent[0][1] + parentY],
       [node.extent[1][0] + parentX, node.extent[1][1] + parentY],
@@ -96,7 +102,7 @@ export function calcNextPosition(
 
   if (node.parentNode) {
     const parentNode = nodeInternals.get(node.parentNode);
-    parentPosition = { x: parentNode?.positionAbsolute?.x ?? 0, y: parentNode?.positionAbsolute?.y ?? 0 };
+    parentPosition = getNodePositionWithOrigin(parentNode, nodeOrigin).positionAbsolute;
   }
 
   const positionAbsolute = currentExtent

packages/core/src/index.ts

@@ -19,6 +19,7 @@ export {
   updateEdge,
   getTransformForBounds,
   getRectOfNodes,
+  getNodePositionWithOrigin,
 } from './utils/graph';
 export { applyNodeChanges, applyEdgeChanges } from './utils/changes';
 export { getMarkerEnd } from './components/Edges/utils';

packages/core/src/store/index.ts

@@ -23,7 +23,8 @@ const createRFStore = () =>
   createStore<ReactFlowState>((set, get) => ({
     ...initialState,
     setNodes: (nodes: Node[]) => {
-      set({ nodeInternals: createNodeInternals(nodes, get().nodeInternals) });
+      const { nodeInternals, nodeOrigin } = get();
+      set({ nodeInternals: createNodeInternals(nodes, nodeInternals, nodeOrigin) });
     },
     setEdges: (edges: Edge[]) => {
       const { defaultEdgeOptions = {} } = get();
@@ -33,7 +34,7 @@ const createRFStore = () =>
       const hasDefaultNodes = typeof nodes !== 'undefined';
       const hasDefaultEdges = typeof edges !== 'undefined';
 
-      const nodeInternals = hasDefaultNodes ? createNodeInternals(nodes, new Map()) : new Map();
+      const nodeInternals = hasDefaultNodes ? createNodeInternals(nodes, new Map(), get().nodeOrigin) : new Map();
       const nextEdges = hasDefaultEdges ? edges : [];
 
       set({ nodeInternals, edges: nextEdges, hasDefaultNodes, hasDefaultEdges });
@@ -102,7 +103,7 @@ const createRFStore = () =>
       }
     },
     updateNodePositions: (nodeDragItems: NodeDragItem[] | Node[], positionChanged = true, dragging = false) => {
-      const { onNodesChange, nodeInternals, hasDefaultNodes } = get();
+      const { onNodesChange, nodeInternals, hasDefaultNodes, nodeOrigin } = get();
 
       if (hasDefaultNodes || onNodesChange) {
         const changes = nodeDragItems.map((node) => {
@@ -123,7 +124,7 @@ const createRFStore = () =>
         if (changes?.length) {
           if (hasDefaultNodes) {
             const nodes = applyNodeChanges(changes, Array.from(nodeInternals.values()));
-            const nextNodeInternals = createNodeInternals(nodes, nodeInternals);
+            const nextNodeInternals = createNodeInternals(nodes, nodeInternals, nodeOrigin);
             set({ nodeInternals: nextNodeInternals });
           }
 

packages/core/src/store/utils.ts

@@ -2,7 +2,7 @@ import { zoomIdentity } from 'd3-zoom';
 import type { StoreApi } from 'zustand';
 
 import { internalsSymbol, isNumeric } from '../utils';
-import { getD3Transition, getRectOfNodes, getTransformForBounds } from '../utils/graph';
+import { getD3Transition, getRectOfNodes, getTransformForBounds, getNodePositionWithOrigin } from '../utils/graph';
 import type {
   Edge,
   EdgeSelectionChange,
@@ -12,6 +12,7 @@ import type {
   ReactFlowState,
   XYZPosition,
   FitViewOptions,
+  NodeOrigin,
 } from '../types';
 
 type ParentNodes = Record<string, boolean>;
@@ -20,21 +21,33 @@ function calculateXYZPosition(
   node: Node,
   nodeInternals: NodeInternals,
   parentNodes: ParentNodes,
-  result: XYZPosition
+  result: XYZPosition,
+  nodeOrigin: NodeOrigin
 ): XYZPosition {
   if (!node.parentNode) {
     return result;
   }
   const parentNode = nodeInternals.get(node.parentNode)!;
+  const parentNodePosition = getNodePositionWithOrigin(parentNode, nodeOrigin);
 
-  return calculateXYZPosition(parentNode, nodeInternals, parentNodes, {
+  return calculateXYZPosition(
-    x: (result.x ?? 0) + (parentNode.position?.x ?? 0),
+    parentNode,
-    y: (result.y ?? 0) + (parentNode.position?.y ?? 0),
+    nodeInternals,
-    z: (parentNode[internalsSymbol]?.z ?? 0) > (result.z ?? 0) ? parentNode[internalsSymbol]?.z ?? 0 : result.z ?? 0,
+    parentNodes,
-  });
+    {
+      x: (result.x ?? 0) + parentNodePosition.x,
+      y: (result.y ?? 0) + parentNodePosition.y,
+      z: (parentNode[internalsSymbol]?.z ?? 0) > (result.z ?? 0) ? parentNode[internalsSymbol]?.z ?? 0 : result.z ?? 0,
+    },
+    nodeOrigin
+  );
 }
 
-export function createNodeInternals(nodes: Node[], nodeInternals: NodeInternals): NodeInternals {
+export function createNodeInternals(
+  nodes: Node[],
+  nodeInternals: NodeInternals,
+  nodeOrigin: NodeOrigin
+): NodeInternals {
   const nextNodeInternals = new Map<string, Node>();
   const parentNodes: ParentNodes = {};
 
@@ -74,10 +87,16 @@ export function createNodeInternals(nodes: Node[], nodeInternals: NodeInternals)
     }
 
     if (node.parentNode || parentNodes[node.id]) {
-      const { x, y, z } = calculateXYZPosition(node, nextNodeInternals, parentNodes, {
+      const { x, y, z } = calculateXYZPosition(
-        ...node.position,
+        node,
-        z: node[internalsSymbol]?.z ?? 0,
+        nextNodeInternals,
-      });
+        parentNodes,
+        {
+          ...node.position,
+          z: node[internalsSymbol]?.z ?? 0,
+        },
+        nodeOrigin
+      );
 
       node.positionAbsolute = {
         x,

packages/core/src/utils/graph.ts

@@ -141,23 +141,54 @@ export const pointToRendererPoint = (
   return position;
 };
 
+export const getNodePositionWithOrigin = (
+  node: Node | undefined,
+  nodeOrigin: NodeOrigin = [0, 0]
+): XYPosition & { positionAbsolute: XYPosition } => {
+  if (!node) {
+    return {
+      x: 0,
+      y: 0,
+      positionAbsolute: {
+        x: 0,
+        y: 0,
+      },
+    };
+  }
+
+  const offset: XYPosition = {
+    x: (node.width ?? 0) * nodeOrigin[0],
+    y: (node.height ?? 0) * nodeOrigin[1],
+  };
+
+  return {
+    x: node.position.x - offset.x,
+    y: node.position.y - offset.y,
+    positionAbsolute: {
+      x: (node.positionAbsolute?.x ?? 0) - offset.x,
+      y: (node.positionAbsolute?.y ?? 0) - offset.y,
+    },
+  };
+};
+
 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 }) => {
+    (currBox, node) => {
+      const { positionAbsolute, ...position } = getNodePositionWithOrigin(node, nodeOrigin);
       const nodeX = positionAbsolute ? positionAbsolute.x : position.x;
       const nodeY = positionAbsolute ? positionAbsolute.y : position.y;
 
       return getBoundsOfBoxes(
         currBox,
         rectToBox({
-          x: nodeX - nodeOrigin[0] * (width || 0),
+          x: nodeX,
-          y: nodeY - nodeOrigin[1] * (height || 0),
+          y: nodeY,
-          width: width || 0,
+          width: node.width || 0,
-          height: height || 0,
+          height: node.height || 0,
         })
       );
     },
@@ -186,15 +217,17 @@ export const getNodesInside = (
   const visibleNodes: Node[] = [];
 
   nodeInternals.forEach((node) => {
-    const { width, height, selectable = true, positionAbsolute = { x: 0, y: 0 } } = node;
+    const { width, height, selectable = true } = node;
 
     if (excludeNonSelectableNodes && !selectable) {
       return false;
     }
 
+    const { positionAbsolute } = getNodePositionWithOrigin(node, nodeOrigin);
+
     const nodeRect = {
-      x: positionAbsolute.x - nodeOrigin[0] * (width || 0),
+      x: positionAbsolute.x,
-      y: positionAbsolute.y - nodeOrigin[1] * (height || 0),
+      y: positionAbsolute.y,
       width: width || 0,
       height: height || 0,
     };
@@ -243,4 +276,3 @@ export const getTransformForBounds = (
 export const getD3Transition = (selection: D3Selection<Element, unknown, null, undefined>, duration = 0) => {
   return selection.transition().duration(duration);
 };
-

packages/core/src/utils/index.ts

@@ -53,7 +53,8 @@ export const getOverlappingArea = (rectA: Rect, rectB: Rect): number => {
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const isRectObject = (obj: any): obj is Rect => !!obj.width && !!obj.height && !!obj.x && !!obj.y;
+export const isRectObject = (obj: any): obj is Rect =>
+  isNumeric(obj.width) && isNumeric(obj.height) && isNumeric(obj.x) && isNumeric(obj.y);
 
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export const isNumeric = (n: any): n is number => !isNaN(n) && isFinite(n);

packages/minimap/src/MiniMap.tsx

@@ -7,7 +7,14 @@ import shallow from 'zustand/shallow';
 import { zoom, zoomIdentity } from 'd3-zoom';
 import type { D3ZoomEvent } from 'd3-zoom';
 import { select, pointer } from 'd3-selection';
-import { useStore, getRectOfNodes, Panel, getBoundsOfRects, useStoreApi } from '@reactflow/core';
+import {
+  useStore,
+  getRectOfNodes,
+  Panel,
+  getBoundsOfRects,
+  useStoreApi,
+  getNodePositionWithOrigin,
+} from '@reactflow/core';
 import type { ReactFlowState, Rect } from '@reactflow/core';
 
 import MiniMapNode from './MiniMapNode';
@@ -159,24 +166,28 @@ function MiniMap({
         onClick={onSvgClick}
       >
         {ariaLabel && <title id={labelledBy}>{ariaLabel}</title>}
-        {nodes.map((node) => (
+        {nodes.map((node) => {
-          <MiniMapNode
+          const { positionAbsolute } = getNodePositionWithOrigin(node, nodeOrigin);
-            key={node.id}
+
-            x={(node.positionAbsolute?.x ?? 0) - nodeOrigin[0] * (node.width ?? 0)}
+          return (
-            y={(node.positionAbsolute?.y ?? 0) - nodeOrigin[1] * (node.height ?? 0)}
+            <MiniMapNode
-            width={node.width!}
+              key={node.id}
-            height={node.height!}
+              x={positionAbsolute.x}
-            style={node.style}
+              y={positionAbsolute.x}
-            className={nodeClassNameFunc(node)}
+              width={node.width!}
-            color={nodeColorFunc(node)}
+              height={node.height!}
-            borderRadius={nodeBorderRadius}
+              style={node.style}
-            strokeColor={nodeStrokeColorFunc(node)}
+              className={nodeClassNameFunc(node)}
-            strokeWidth={nodeStrokeWidth}
+              color={nodeColorFunc(node)}
-            shapeRendering={shapeRendering}
+              borderRadius={nodeBorderRadius}
-            onClick={onSvgNodeClick}
+              strokeColor={nodeStrokeColorFunc(node)}
-            id={node.id}
+              strokeWidth={nodeStrokeWidth}
-          />
+              shapeRendering={shapeRendering}
-        ))}
+              onClick={onSvgNodeClick}
+              id={node.id}
+            />
+          );
+        })}
         <path
           className="react-flow__minimap-mask"
           d={`M${x - offset},${y - offset}h${width + offset * 2}v${height + offset * 2}h${-width - offset * 2}z

packages/node-toolbar/src/NodeToolbar.tsx

@@ -15,9 +15,7 @@ import shallow from 'zustand/shallow';
 import NodeToolbarPortal from './NodeToolbarPortal';
 import { NodeToolbarProps } from './types';
 
-type SelectedNode = Node | undefined;
+const nodeEqualityFn = (a: Node | undefined, b: Node | undefined) =>
-
-const nodeEqualityFn = (a: SelectedNode, b: SelectedNode) =>
   a?.positionAbsolute?.x === b?.positionAbsolute?.x &&
   a?.positionAbsolute?.y === b?.positionAbsolute?.y &&
   a?.width === b?.width &&
@@ -25,6 +23,10 @@ const nodeEqualityFn = (a: SelectedNode, b: SelectedNode) =>
   a?.selected === b?.selected &&
   a?.[internalsSymbol]?.z === b?.[internalsSymbol]?.z;
 
+const nodesEqualityFn = (a: Node[], b: Node[]) => {
+  return a.length === b.length && a.every((node, i) => nodeEqualityFn(node, b[i]));
+};
+
 const storeSelector = (state: ReactFlowState) => ({
   transform: state.transform,
   nodeOrigin: state.nodeOrigin,
@@ -70,21 +72,36 @@ function NodeToolbar({
   offset = 10,
   ...rest
 }: NodeToolbarProps) {
-  const nodeSelector = useCallback((state: ReactFlowState): SelectedNode => state.nodeInternals.get(nodeId), [nodeId]);
+  const nodesSelector = useCallback(
-  const node = useStore(nodeSelector, nodeEqualityFn);
+    (state: ReactFlowState): Node[] => {
-  const { transform, nodeOrigin, selectedNodesCount } = useStore(storeSelector, shallow);
+      const nodeIds: string[] = typeof nodeId === 'string' ? [nodeId] : nodeId;
-  const isActive = typeof isVisible === 'boolean' ? isVisible : node?.selected && selectedNodesCount === 1;
 
-  if (!isActive || !node) {
+      return nodeIds.reduce<Node[]>((acc, id) => {
+        const node = state.nodeInternals.get(id);
+        if (node) {
+          acc.push(node);
+        }
+        return acc;
+      }, [] as Node[]);
+    },
+    [nodeId]
+  );
+  const nodes = useStore(nodesSelector, nodesEqualityFn);
+  const { transform, nodeOrigin, selectedNodesCount } = useStore(storeSelector, shallow);
+  const isActive =
+    typeof isVisible === 'boolean' ? isVisible : nodes.length === 1 && nodes[0].selected && selectedNodesCount === 1;
+
+  if (!isActive || !nodes.length) {
     return null;
   }
 
-  const nodeRect: Rect = getRectOfNodes([node], nodeOrigin);
+  const nodeRect: Rect = getRectOfNodes(nodes, nodeOrigin);
+  const zIndex: number = Math.max(...nodes.map((node) => (node[internalsSymbol]?.z || 1) + 1));
 
   const wrapperStyle: CSSProperties = {
     position: 'absolute',
     transform: getTransform(nodeRect, transform, position, offset),
-    zIndex: (node[internalsSymbol]?.z || 1) + 1,
+    zIndex,
     ...style,
   };
 

packages/node-toolbar/src/types.ts

@@ -2,7 +2,7 @@ import { Position } from '@reactflow/core';
 import type { HTMLAttributes } from 'react';
 
 export type NodeToolbarProps = HTMLAttributes<HTMLDivElement> & {
-  nodeId: string;
+  nodeId: string | string[];
   isVisible?: boolean;
   position?: Position;
   offset?: number;