43 lines
1,011 B
TypeScript
43 lines
1,011 B
TypeScript
import useHandleEvents from "hooks/useBoundsHandleEvents"
|
|
import styled from "styles"
|
|
import { Corner, Bounds } from "types"
|
|
|
|
export default function CornerHandle({
|
|
size,
|
|
corner,
|
|
bounds,
|
|
}: {
|
|
size: number
|
|
bounds: Bounds
|
|
corner: Corner
|
|
}) {
|
|
const events = useHandleEvents(corner)
|
|
|
|
const isTop = corner === Corner.TopLeft || corner === Corner.TopRight
|
|
const isLeft = corner === Corner.TopLeft || corner === Corner.BottomLeft
|
|
|
|
return (
|
|
<StyledCorner
|
|
corner={corner}
|
|
x={(isLeft ? 0 : bounds.width) - size / 2}
|
|
y={(isTop ? 0 : bounds.height) - size / 2}
|
|
width={size}
|
|
height={size}
|
|
{...events}
|
|
/>
|
|
)
|
|
}
|
|
|
|
const StyledCorner = styled("rect", {
|
|
stroke: "$bounds",
|
|
fill: "#fff",
|
|
zStrokeWidth: 2,
|
|
variants: {
|
|
corner: {
|
|
[Corner.TopLeft]: { cursor: "nwse-resize" },
|
|
[Corner.TopRight]: { cursor: "nesw-resize" },
|
|
[Corner.BottomRight]: { cursor: "nwse-resize" },
|
|
[Corner.BottomLeft]: { cursor: "nesw-resize" },
|
|
},
|
|
},
|
|
})
|