tldraw/components/canvas/bounds/corner-handle.tsx

58 lines
1.3 KiB
TypeScript
Raw Normal View History

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
2021-06-21 21:35:28 +00:00
}): 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}
2021-06-04 21:21:03 +00:00
x={(isLeft ? -1 : bounds.width + 1) - size}
y={(isTop ? -1 : bounds.height + 1) - size}
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}
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',
2021-07-10 20:39:29 +00:00
fill: '$panel',
zStrokeWidth: 1.5,
})