42 lines
1 KiB
TypeScript
42 lines
1 KiB
TypeScript
import useHandleEvents from "hooks/useBoundsHandleEvents"
|
|
import styled from "styles"
|
|
import { Edge, Bounds } from "types"
|
|
|
|
export default function EdgeHandle({
|
|
size,
|
|
bounds,
|
|
edge,
|
|
}: {
|
|
size: number
|
|
bounds: Bounds
|
|
edge: Edge
|
|
}) {
|
|
const events = useHandleEvents(edge)
|
|
|
|
const isHorizontal = edge === Edge.Top || edge === Edge.Bottom
|
|
const isFarEdge = edge === Edge.Right || edge === Edge.Bottom
|
|
|
|
return (
|
|
<StyledEdge
|
|
edge={edge}
|
|
x={isHorizontal ? size / 2 : (isFarEdge ? bounds.width : 0) - size / 2}
|
|
y={isHorizontal ? (isFarEdge ? bounds.height : 0) - size / 2 : size / 2}
|
|
width={isHorizontal ? Math.max(0, bounds.width - size) : size}
|
|
height={isHorizontal ? size : Math.max(0, bounds.height - size)}
|
|
{...events}
|
|
/>
|
|
)
|
|
}
|
|
|
|
const StyledEdge = styled("rect", {
|
|
stroke: "none",
|
|
fill: "none",
|
|
variants: {
|
|
edge: {
|
|
[Edge.Top]: { cursor: "ns-resize" },
|
|
[Edge.Right]: { cursor: "ew-resize" },
|
|
[Edge.Bottom]: { cursor: "ns-resize" },
|
|
[Edge.Left]: { cursor: "ew-resize" },
|
|
},
|
|
},
|
|
})
|