Tldraw/components/canvas/bounds/rotate-handle.tsx

39 wiersze
723 B
TypeScript
Czysty Zwykły widok Historia

2021-06-03 21:17:10 +00:00
import useHandleEvents from 'hooks/useBoundsHandleEvents'
import styled from 'styles'
import { Bounds } from 'types'
export default function Rotate({
bounds,
size,
}: {
bounds: Bounds
size: number
}) {
2021-06-03 21:17:10 +00:00
const events = useHandleEvents('rotate')
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-06-03 21:17:10 +00:00
const StyledRotateHandle = styled('circle', {
stroke: '$bounds',
fill: '#fff',
zStrokeWidth: 2,
2021-06-03 21:17:10 +00:00
cursor: 'grab',
})