Merge branch 'next' into refactor/infer-node-types

packages/react/src/additional-components/MiniMap/MiniMap.tsx

@@ -49,9 +49,10 @@ function MiniMapComponent<NodeType extends Node = Node>({
   // We need to rename the prop to be `CapitalCase` so that JSX will render it as
   // a component properly.
   nodeComponent,
+  bgColor,
   maskColor,
-  maskStrokeColor = 'none',
-  maskStrokeWidth = 1,
+  maskStrokeColor,
+  maskStrokeWidth,
   position = 'bottom-right',
   onClick,
   onNodeClick,
@@ -130,7 +131,11 @@ function MiniMapComponent<NodeType extends Node = Node>({
       style={
         {
           ...style,
-          '--xy-minimap-mask-color-props': typeof maskColor === 'string' ? maskColor : undefined,
+          '--xy-minimap-background-color-props': typeof bgColor === 'string' ? bgColor : undefined,
+          '--xy-minimap-mask-background-color-props': typeof maskColor === 'string' ? maskColor : undefined,
+          '--xy-minimap-mask-stroke-color-props': typeof maskStrokeColor === 'string' ? maskStrokeColor : undefined,
+          '--xy-minimap-mask-stroke-width-props':
+            typeof maskStrokeWidth === 'number' ? maskStrokeWidth * viewScale : undefined,
           '--xy-minimap-node-background-color-props': typeof nodeColor === 'string' ? nodeColor : undefined,
           '--xy-minimap-node-stroke-color-props': typeof nodeStrokeColor === 'string' ? nodeStrokeColor : undefined,
           '--xy-minimap-node-stroke-width-props': typeof nodeStrokeWidth === 'string' ? nodeStrokeWidth : undefined,
@@ -143,6 +148,7 @@ function MiniMapComponent<NodeType extends Node = Node>({
         width={elementWidth}
         height={elementHeight}
         viewBox={`${x} ${y} ${width} ${height}`}
+        className="react-flow__minimap-svg"
         role="img"
         aria-labelledby={labelledBy}
         ref={svg}
@@ -163,8 +169,6 @@ function MiniMapComponent<NodeType extends Node = Node>({
           d={`M${x - offset},${y - offset}h${width + offset * 2}v${height + offset * 2}h${-width - offset * 2}z
         M${viewBB.x},${viewBB.y}h${viewBB.width}v${viewBB.height}h${-viewBB.width}z`}
           fillRule="evenodd"
-          stroke={maskStrokeColor}
-          strokeWidth={maskStrokeWidth}
           pointerEvents="none"
         />
       </svg>

packages/react/src/additional-components/MiniMap/types.ts

@@ -19,6 +19,8 @@ export type MiniMapProps<NodeType extends Node = Node> = Omit<HTMLAttributes<SVG
   nodeStrokeWidth?: number;
   /** Component used to render nodes on minimap */
   nodeComponent?: ComponentType<MiniMapNodeProps>;
+  /** Background color of minimap */
+  bgColor?: string;
   /** Color of mask representing viewport */
   maskColor?: string;
   /** Stroke color of mask representing viewport */

packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx

@@ -1,6 +1,12 @@
 import { useRef, useEffect, memo } from 'react';
 import cc from 'classcat';
-import { XYResizer, ResizeControlVariant, type XYResizerInstance, type XYResizerChange } from '@xyflow/system';
+import {
+  XYResizer,
+  ResizeControlVariant,
+  type XYResizerInstance,
+  type XYResizerChange,
+  XYResizerChildChange,
+} from '@xyflow/system';
 
 import { useStoreApi } from '../../hooks/useStore';
 import { useNodeId } from '../../contexts/NodeIdContext';
@@ -52,7 +58,7 @@ function ResizeControl({
             snapToGrid,
           };
         },
-        onChange: (change: XYResizerChange) => {
+        onChange: (change: XYResizerChange, childChanges: XYResizerChildChange[]) => {
           const { triggerNodeChanges } = store.getState();
 
           const changes: NodeChange[] = [];
@@ -83,6 +89,16 @@ function ResizeControl({
 
             changes.push(dimensionChange);
           }
+
+          for (const childChange of childChanges) {
+            const positionChange: NodePositionChange = {
+              ...childChange,
+              type: 'position',
+            };
+
+            changes.push(positionChange);
+          }
+
           triggerNodeChanges(changes);
         },
         onEnd: () => {