<NodeResizeControl />

Source on GitHub

To create your own resizing UI, you can use the NodeResizeControl component where you can pass children (such as icons).

Props

For TypeScript users, the props type for the <NodeResizeControl /> component is exported as ResizeControlProps.

  • nodeId?: string Id of the node it is resizing.
  • color?: string Color of the resize handle.
  • minWidth?: number Minimum width of node.
  • minHeight?: number Minimum height of node.
  • maxWidth?: number Maximum width of node.
  • maxHeight?: number Maximum height of node.
  • keepAspectRatio?: boolean Keep aspect ratio when resizing.
  • shouldResize?: (event: ResizeDragEvent, params: ResizeParamsWithDirection) => boolean Callback to determine if node should resize.
  • autoScale?: boolean Scale the controls with the zoom level.
  • onResizeStart?: OnResizeStart Callback called when resizing starts.
  • onResize?: OnResize Callback called when resizing.
  • onResizeEnd?: OnResizeEnd Callback called when resizing ends.
  • position?: ControlLinePosition | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' Position of the control.
  • variant?: ResizeControlVariant Variant of the control.
  • resizeDirection?: 'horizontal' | 'vertical' The direction the user can resize the node. If not provided, the user can resize in any direction.
  • className?: string
  • style?: CSSProperties
  • children?: ReactNode