44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
import useBoundsEvents from 'hooks/useBoundsEvents'
|
|
import styled from 'styles'
|
|
import { Edge, Bounds } from 'types'
|
|
|
|
export default function EdgeHandle({
|
|
size,
|
|
bounds,
|
|
edge,
|
|
}: {
|
|
size: number
|
|
bounds: Bounds
|
|
edge: Edge
|
|
}): JSX.Element {
|
|
const events = useBoundsEvents(edge)
|
|
|
|
const isHorizontal = edge === Edge.Top || edge === Edge.Bottom
|
|
const isFarEdge = edge === Edge.Right || edge === Edge.Bottom
|
|
|
|
const { height, width } = bounds
|
|
|
|
return (
|
|
<StyledEdge
|
|
edge={edge}
|
|
x={isHorizontal ? size / 2 : (isFarEdge ? width + 1 : -1) - size / 2}
|
|
y={isHorizontal ? (isFarEdge ? height + 1 : -1) - size / 2 : size / 2}
|
|
width={isHorizontal ? Math.max(0, width + 1 - size) : size}
|
|
height={isHorizontal ? size : Math.max(0, height + 1 - 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' },
|
|
},
|
|
},
|
|
})
|