节点缩放 (Node Resizer)

在很多业务场景中，用户可能需要手动调整某些节点（特别是分组节点或容器节点）的大小。yh-flow 提供了 NodeResizer 组件，它可以非常容易地嵌入到您的自定义节点中，为节点添加 8 个方向的缩放手柄。

节点缩放示例 (Node Resizer Example)

点击选中下方的节点，四周会出现蓝色的缩放手柄；拖拽手柄可实时调整节点尺寸。拖拽节点可移动位置。示例使用 v-model:nodes，使节点拖放与缩放后的数据同步到父组件。

可缩放节点

自定义节点缩放

API 概述 (API Reference)

属性 (Props)

参数名	类型	默认值	说明
nodeId	string	必填	目标节点的 ID。
selected	boolean	false	是否显示缩放手柄（通常绑定 node.selected）。
minWidth	number	50	允许缩放的最小宽度。
minHeight	number	30	允许缩放的最小高度。
handleStyle	CSSProperties	{}	自定义手柄的样式。

事件 (Events)

事件名	参数	说明
@resize	{ width, height, x, y }	缩放进行中。x 和 y 为从顶部/左侧方向推拉时带来的位置增量。
@resizeStart	MouseEvent	缩放开始。
@resizeEnd	MouseEvent	缩放结束。

IMPORTANT

由于 NodeResizer 采用绝对定位，您的自定义节点容器样式必须包含 position: relative 或 position: absolute。否则手柄将漂移到节点之外。