Fixes rotation handle size

This commit is contained in:
Steve Ruiz 2021-06-03 22:17:10 +01:00
parent 5f45aed6a5
commit bf16a6e292

View file

@ -1,6 +1,6 @@
import useHandleEvents from "hooks/useBoundsHandleEvents" import useHandleEvents from 'hooks/useBoundsHandleEvents'
import styled from "styles" import styled from 'styles'
import { Bounds } from "types" import { Bounds } from 'types'
export default function Rotate({ export default function Rotate({
bounds, bounds,
@ -9,22 +9,30 @@ export default function Rotate({
bounds: Bounds bounds: Bounds
size: number size: number
}) { }) {
const events = useHandleEvents("rotate") const events = useHandleEvents('rotate')
return ( return (
<StyledRotateHandle <g cursor="grab" {...events}>
cursor="grab" <circle
cx={bounds.width / 2} cx={bounds.width / 2}
cy={size * -2} cy={size * -2}
r={size / 2} r={size * 2}
{...events} fill="transparent"
/> stroke="none"
/>
<StyledRotateHandle
cx={bounds.width / 2}
cy={size * -2}
r={size / 2}
pointerEvents="none"
/>
</g>
) )
} }
const StyledRotateHandle = styled("circle", { const StyledRotateHandle = styled('circle', {
stroke: "$bounds", stroke: '$bounds',
fill: "#fff", fill: '#fff',
zStrokeWidth: 2, zStrokeWidth: 2,
cursor: "grab", cursor: 'grab',
}) })