Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | 2x | import type { PointerEvent } from "react";
import type { ResizeHandle } from "@/lib/geometry";
interface ResizeHandleConfig {
handle: ResizeHandle;
className: string;
cursorClassName: string;
}
export const RESIZE_HANDLES: ReadonlyArray<ResizeHandleConfig> = [
{ handle: "nw", className: "-left-1 -top-1", cursorClassName: "cursor-nwse-resize" },
{
handle: "n",
className: "left-1/2 -top-1 -translate-x-1/2",
cursorClassName: "cursor-ns-resize",
},
{ handle: "ne", className: "-right-1 -top-1", cursorClassName: "cursor-nesw-resize" },
{
handle: "e",
className: "-right-1 top-1/2 -translate-y-1/2",
cursorClassName: "cursor-ew-resize",
},
{ handle: "se", className: "-bottom-1 -right-1", cursorClassName: "cursor-nwse-resize" },
{
handle: "s",
className: "-bottom-1 left-1/2 -translate-x-1/2",
cursorClassName: "cursor-ns-resize",
},
{ handle: "sw", className: "-bottom-1 -left-1", cursorClassName: "cursor-nesw-resize" },
{
handle: "w",
className: "-left-1 top-1/2 -translate-y-1/2",
cursorClassName: "cursor-ew-resize",
},
];
interface ResizeHandlesProps {
isSelected: boolean;
componentType: string;
onHandlePointerDown: (event: PointerEvent<HTMLButtonElement>, handle: ResizeHandle) => void;
}
export function ResizeHandles({
isSelected,
componentType,
onHandlePointerDown,
}: ResizeHandlesProps) {
if (!isSelected) {
return null;
}
return RESIZE_HANDLES.map(({ handle, className, cursorClassName }) => (
<button
key={handle}
type="button"
aria-label={`Resize ${componentType} ${handle}`}
onPointerDown={(event) => onHandlePointerDown(event, handle)}
className={`canvas-selection-handle ${className} ${cursorClassName}`}
/>
));
}
|