feat(xy-resizer): add resize direction #2986

examples/react/src/examples/NodeResizer/BottomRightResizer.tsx

@@ -0,0 +1,21 @@
+import { memo, FC } from 'react';
+import { Handle, Position, NodeProps, NodeResizeControl, ResizeControlVariant } from '@xyflow/react';
+
+const CustomResizerNode: FC<NodeProps> = ({ data }) => {
+  return (
+    <>
+      <NodeResizeControl
+        variant={ResizeControlVariant.Handle}
+        position="bottom-right"
+        resizeDirection="horizontal"
+        minWidth={100}
+        maxWidth={500}
+      />
+      <Handle type="target" position={Position.Left} />
+      <div>{data.label}</div>
+      <Handle type="source" position={Position.Right} />
+    </>
+  );
+};
+
+export default memo(CustomResizerNode);

examples/react/src/examples/NodeResizer/index.tsx

@@ -15,12 +15,14 @@ import DefaultResizer from './DefaultResizer';
 import CustomResizer from './CustomResizer';
 import VerticalResizer from './VerticalResizer';
 import HorizontalResizer from './HorizontalResizer';
+import BottomRightResizer from './BottomRightResizer';
 
 const nodeTypes = {
   defaultResizer: DefaultResizer,
   customResizer: CustomResizer,
   verticalResizer: VerticalResizer,
   horizontalResizer: HorizontalResizer,
+  bottomRightResizer: BottomRightResizer,
 };
 
 const nodeStyle = {
@@ -166,6 +168,13 @@ const initialNodes: Node[] = [
     expandParent: true,
     style: { ...nodeStyle },
   },
+  {
+    id: '6',
+    type: 'bottomRightResizer',
+    data: { label: 'Bottom Right with horizontal direction' },
+    position: { x: 500, y: 500 },
+    style: { ...nodeStyle },
+  },
 ];
 
 const CustomNodeFlow = () => {

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

@@ -32,6 +32,7 @@ function ResizeControl({
   maxWidth = Number.MAX_VALUE,
   maxHeight = Number.MAX_VALUE,
   keepAspectRatio = false,
+  resizeDirection,
   shouldResize,
   onResizeStart,
   onResize,
@@ -166,6 +167,7 @@ function ResizeControl({
         maxHeight,
       },
       keepAspectRatio,
+      resizeDirection,
       onResizeStart,
       onResize,
       onResizeEnd,

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

@@ -3,6 +3,7 @@ import type {
   ControlPosition,
   ControlLinePosition,
   ResizeControlVariant,
+  ResizeControlDirection,
   ShouldResize,
   OnResizeStart,
   OnResize,
@@ -97,6 +98,11 @@ export type ResizeControlProps = Pick<
    * @example ResizeControlVariant.Handle, ResizeControlVariant.Line
    */
   variant?: ResizeControlVariant;
+  /**
+   * The direction the user can resize the node.
+   * If not provided, the user can resize in any direction.
+   */
+  resizeDirection?: ResizeControlDirection;
   className?: string;
   style?: CSSProperties;
   children?: ReactNode;

packages/system/src/xyresizer/XYResizer.ts

@@ -12,7 +12,15 @@ import type {
   Transform,
   XYPosition,
 } from '../types';
-import type { OnResize, OnResizeEnd, OnResizeStart, ResizeDragEvent, ShouldResize, ControlPosition } from './types';
+import type {
+  OnResize,
+  OnResizeEnd,
+  OnResizeStart,
+  ResizeDragEvent,
+  ShouldResize,
+  ControlPosition,
+  ResizeControlDirection,
+} from './types';
 
 const initPrevValues = { width: 0, height: 0, x: 0, y: 0 };
 
@@ -60,6 +68,7 @@ type XYResizerUpdateParams = {
     maxHeight: number;
   };
   keepAspectRatio: boolean;
+  resizeDirection?: ResizeControlDirection;
   onResizeStart: OnResizeStart | undefined;
   onResize: OnResize | undefined;
   onResizeEnd: OnResizeEnd | undefined;
@@ -99,6 +108,7 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }: X
     controlPosition,
     boundaries,
     keepAspectRatio,
+    resizeDirection,
     onResizeStart,
     onResize,
     onResizeEnd,
@@ -251,8 +261,10 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }: X
         }
 
         if (isWidthChange || isHeightChange) {
-          change.width = isWidthChange ? width : prevValues.width;
-          change.height = isHeightChange ? height : prevValues.height;
+          change.width =
+            isWidthChange && (!resizeDirection || resizeDirection === 'horizontal') ? width : prevValues.width;
+          change.height =
+            isHeightChange && (!resizeDirection || resizeDirection === 'vertical') ? height : prevValues.height;
           prevValues.width = change.width;
           prevValues.height = change.height;
         }

packages/system/src/xyresizer/types.ts

@@ -35,6 +35,12 @@ export enum ResizeControlVariant {
   Handle = 'handle',
 }
 
+/**
+ * The direction the user can resize the node.
+ * @public
+ */
+export type ResizeControlDirection = 'horizontal' | 'vertical';
+
 export const XY_RESIZER_HANDLE_POSITIONS: ControlPosition[] = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
 export const XY_RESIZER_LINE_POSITIONS: ControlLinePosition[] = ['top', 'right', 'bottom', 'left'];