57 lines
1.3 KiB
TypeScript
57 lines
1.3 KiB
TypeScript
import useBoundsEvents from 'hooks/useBoundsEvents'
|
|
import styled from 'styles'
|
|
import { Corner, Bounds } from 'types'
|
|
|
|
export default function CornerHandle({
|
|
size,
|
|
corner,
|
|
bounds,
|
|
}: {
|
|
size: number
|
|
bounds: Bounds
|
|
corner: Corner
|
|
}): JSX.Element {
|
|
const events = useBoundsEvents(corner)
|
|
|
|
const isTop = corner === Corner.TopLeft || corner === Corner.TopRight
|
|
const isLeft = corner === Corner.TopLeft || corner === Corner.BottomLeft
|
|
|
|
return (
|
|
<g>
|
|
<StyledCorner
|
|
corner={corner}
|
|
x={(isLeft ? -1 : bounds.width + 1) - size}
|
|
y={(isTop ? -1 : bounds.height + 1) - size}
|
|
width={size * 2}
|
|
height={size * 2}
|
|
{...events}
|
|
/>
|
|
<StyledCornerInner
|
|
x={(isLeft ? -1 : bounds.width + 1) - size / 2}
|
|
y={(isTop ? -1 : bounds.height + 1) - size / 2}
|
|
width={size}
|
|
height={size}
|
|
pointerEvents="none"
|
|
/>
|
|
</g>
|
|
)
|
|
}
|
|
|
|
const StyledCorner = styled('rect', {
|
|
stroke: 'none',
|
|
fill: 'transparent',
|
|
variants: {
|
|
corner: {
|
|
[Corner.TopLeft]: { cursor: 'nwse-resize' },
|
|
[Corner.TopRight]: { cursor: 'nesw-resize' },
|
|
[Corner.BottomRight]: { cursor: 'nwse-resize' },
|
|
[Corner.BottomLeft]: { cursor: 'nesw-resize' },
|
|
},
|
|
},
|
|
})
|
|
|
|
const StyledCornerInner = styled('rect', {
|
|
stroke: '$bounds',
|
|
fill: '$canvas',
|
|
zStrokeWidth: 1.5,
|
|
})
|