33 lines
1.2 KiB
TypeScript
33 lines
1.2 KiB
TypeScript
"use client"
|
||
import { NodeResizeControl } from "@xyflow/react"
|
||
|
||
/** 节点右边缘 resize 把手：高度跟随节点，宽度可拖（240–1200px）。平时透明，hover 显紫色细条。 */
|
||
export function ResizeRight({ minWidth = 240, maxWidth = 1200 }: { minWidth?: number; maxWidth?: number }) {
|
||
return (
|
||
<NodeResizeControl
|
||
position="right"
|
||
minWidth={minWidth}
|
||
maxWidth={maxWidth}
|
||
style={{
|
||
background: "transparent",
|
||
border: "none",
|
||
width: 10,
|
||
height: "calc(100% - 24px)", // 留出顶部 source Handle 圆点的 hover 空间
|
||
right: 0, // hit area 完全在节点内侧右边 10px（ReactFlow wrapper 不允许外溢）
|
||
top: 12,
|
||
transform: "none",
|
||
zIndex: 20, // 高于 ReactFlow handle 默认 z-index
|
||
}}
|
||
>
|
||
<div
|
||
className="absolute right-0 top-0 h-full w-1 hover:w-1.5 bg-transparent hover:bg-violet-400/70 active:bg-violet-400 transition-all rounded-r"
|
||
style={{ cursor: "ew-resize" }}
|
||
/>
|
||
<div
|
||
className="w-full h-full"
|
||
style={{ cursor: "ew-resize" }}
|
||
/>
|
||
</NodeResizeControl>
|
||
)
|
||
}
|