2021-06-03 21:17:10 +00:00
|
|
|
import useHandleEvents from 'hooks/useBoundsHandleEvents'
|
|
|
|
import styled from 'styles'
|
|
|
|
import { Bounds } from 'types'
|
2021-05-22 15:45:24 +00:00
|
|
|
|
|
|
|
export default function Rotate({
|
|
|
|
bounds,
|
|
|
|
size,
|
|
|
|
}: {
|
|
|
|
bounds: Bounds
|
|
|
|
size: number
|
|
|
|
}) {
|
2021-06-03 21:17:10 +00:00
|
|
|
const events = useHandleEvents('rotate')
|
2021-05-22 15:45:24 +00:00
|
|
|
|
|
|
|
return (
|
2021-06-03 21:17:10 +00:00
|
|
|
<g cursor="grab" {...events}>
|
|
|
|
<circle
|
|
|
|
cx={bounds.width / 2}
|
|
|
|
cy={size * -2}
|
|
|
|
r={size * 2}
|
|
|
|
fill="transparent"
|
|
|
|
stroke="none"
|
|
|
|
/>
|
|
|
|
<StyledRotateHandle
|
|
|
|
cx={bounds.width / 2}
|
|
|
|
cy={size * -2}
|
|
|
|
r={size / 2}
|
|
|
|
pointerEvents="none"
|
|
|
|
/>
|
|
|
|
</g>
|
2021-05-22 15:45:24 +00:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2021-06-03 21:17:10 +00:00
|
|
|
const StyledRotateHandle = styled('circle', {
|
|
|
|
stroke: '$bounds',
|
|
|
|
fill: '#fff',
|
2021-05-22 15:45:24 +00:00
|
|
|
zStrokeWidth: 2,
|
2021-06-03 21:17:10 +00:00
|
|
|
cursor: 'grab',
|
2021-05-22 15:45:24 +00:00
|
|
|
})
|