2021-06-15 11:58:51 +00:00
|
|
|
import useBoundsEvents from 'hooks/useBoundsEvents'
|
2021-05-30 13:39:53 +00:00
|
|
|
import styled from 'styles'
|
|
|
|
import { Corner, Bounds } from 'types'
|
2021-05-22 15:45:24 +00:00
|
|
|
|
|
|
|
export default function CornerHandle({
|
|
|
|
size,
|
|
|
|
corner,
|
|
|
|
bounds,
|
|
|
|
}: {
|
|
|
|
size: number
|
|
|
|
bounds: Bounds
|
|
|
|
corner: Corner
|
2021-06-21 21:35:28 +00:00
|
|
|
}): JSX.Element {
|
2021-06-15 11:58:51 +00:00
|
|
|
const events = useBoundsEvents(corner)
|
2021-05-22 15:45:24 +00:00
|
|
|
|
|
|
|
const isTop = corner === Corner.TopLeft || corner === Corner.TopRight
|
|
|
|
const isLeft = corner === Corner.TopLeft || corner === Corner.BottomLeft
|
|
|
|
|
|
|
|
return (
|
2021-05-30 13:39:53 +00:00
|
|
|
<g>
|
|
|
|
<StyledCorner
|
|
|
|
corner={corner}
|
2021-06-04 21:21:03 +00:00
|
|
|
x={(isLeft ? -1 : bounds.width + 1) - size}
|
|
|
|
y={(isTop ? -1 : bounds.height + 1) - size}
|
2021-05-30 13:39:53 +00:00
|
|
|
width={size * 2}
|
|
|
|
height={size * 2}
|
|
|
|
{...events}
|
|
|
|
/>
|
|
|
|
<StyledCornerInner
|
2021-06-04 21:21:03 +00:00
|
|
|
x={(isLeft ? -1 : bounds.width + 1) - size / 2}
|
|
|
|
y={(isTop ? -1 : bounds.height + 1) - size / 2}
|
2021-05-30 13:39:53 +00:00
|
|
|
width={size}
|
|
|
|
height={size}
|
|
|
|
pointerEvents="none"
|
|
|
|
/>
|
|
|
|
</g>
|
2021-05-22 15:45:24 +00:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2021-05-30 13:39:53 +00:00
|
|
|
const StyledCorner = styled('rect', {
|
|
|
|
stroke: 'none',
|
|
|
|
fill: 'transparent',
|
2021-05-22 15:45:24 +00:00
|
|
|
variants: {
|
|
|
|
corner: {
|
2021-05-30 13:39:53 +00:00
|
|
|
[Corner.TopLeft]: { cursor: 'nwse-resize' },
|
|
|
|
[Corner.TopRight]: { cursor: 'nesw-resize' },
|
|
|
|
[Corner.BottomRight]: { cursor: 'nwse-resize' },
|
|
|
|
[Corner.BottomLeft]: { cursor: 'nesw-resize' },
|
2021-05-22 15:45:24 +00:00
|
|
|
},
|
|
|
|
},
|
|
|
|
})
|
2021-05-30 13:39:53 +00:00
|
|
|
|
|
|
|
const StyledCornerInner = styled('rect', {
|
|
|
|
stroke: '$bounds',
|
2021-07-10 20:39:29 +00:00
|
|
|
fill: '$panel',
|
2021-06-15 11:58:51 +00:00
|
|
|
zStrokeWidth: 1.5,
|
2021-05-30 13:39:53 +00:00
|
|
|
})
|