diff --git a/examples/react/src/examples/NodeResizer/BottomRightResizer.tsx b/examples/react/src/examples/NodeResizer/BottomRightResizer.tsx new file mode 100644 index 00000000..ca860fdf --- /dev/null +++ b/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 = ({ data }) => { + return ( + <> + + +
{data.label}
+ + + ); +}; + +export default memo(CustomResizerNode); diff --git a/examples/react/src/examples/NodeResizer/index.tsx b/examples/react/src/examples/NodeResizer/index.tsx index 397c1f22..ce6faf3b 100644 --- a/examples/react/src/examples/NodeResizer/index.tsx +++ b/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 = () => { diff --git a/packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx b/packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx index 0748ffa6..1b6393c6 100644 --- a/packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx +++ b/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, diff --git a/packages/react/src/additional-components/NodeResizer/types.ts b/packages/react/src/additional-components/NodeResizer/types.ts index e34329b1..6ca29494 100644 --- a/packages/react/src/additional-components/NodeResizer/types.ts +++ b/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; diff --git a/packages/system/src/xyresizer/XYResizer.ts b/packages/system/src/xyresizer/XYResizer.ts index f4cd150b..03a0675e 100644 --- a/packages/system/src/xyresizer/XYResizer.ts +++ b/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; } diff --git a/packages/system/src/xyresizer/types.ts b/packages/system/src/xyresizer/types.ts index 34cad9e8..1d16eb3a 100644 --- a/packages/system/src/xyresizer/types.ts +++ b/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'];