Node Resizer

In many diagramming scenarios, users need to manually adjust the dimensions of nodes, especially container nodes or text-heavy blocks. yh-flow provides a dedicated NodeResizer component that can be easily embedded into your custom node templates, providing 8-directional scaling handles.

Node Resizer Example

Select the node below; blue resize handles will appear around it. Drag the handles to resize, or drag the node to move it. The demo uses v-model:nodes so that node drag and resize stay in sync with the parent.

Resizable Node

Custom Node Resizing

API Reference

Props

Name	Type	Default	Description
nodeId	string	Required	The ID of the node being resized.
selected	boolean	false	Whether to display the handles (usually bound to node.selected).
minWidth	number	50	Minimum width allowed.
minHeight	number	30	Minimum height allowed.
handleStyle	CSSProperties	{}	Custom CSS for the grab handles.

Events

Event	Params	Detail
@resize	{ width, height, x, y }	Fired continuously during dragging. x and y represent coordinate deltas when scaling from top/left borders.
@resizeStart	MouseEvent	Fired when the user starts dragging a handle.
@resizeEnd	MouseEvent	Fired when the resizing is completed.

IMPORTANT

Because NodeResizer utilizes absolute positioning, your custom node container must have position: relative or position: absolute defined in its styles. Otherwise, the handles will float incorrectly outside the node boundaries.