46 lines
1.8 KiB
TypeScript
46 lines
1.8 KiB
TypeScript
import * as React from 'react'
|
|
import { Edge, Corner } from 'types'
|
|
import { useSelector } from 'state'
|
|
import { getSelectedShapes, isMobile } from 'utils/utils'
|
|
|
|
import CenterHandle from './center-handle'
|
|
import CornerHandle from './corner-handle'
|
|
import EdgeHandle from './edge-handle'
|
|
import RotateHandle from './rotate-handle'
|
|
|
|
export default function Bounds() {
|
|
const isBrushing = useSelector((s) => s.isIn('brushSelecting'))
|
|
const isSelecting = useSelector((s) => s.isIn('selecting'))
|
|
const zoom = useSelector((s) => s.data.camera.zoom)
|
|
const bounds = useSelector((s) => s.values.selectedBounds)
|
|
const rotation = useSelector(({ data }) =>
|
|
data.selectedIds.size === 1 ? getSelectedShapes(data)[0].rotation : 0
|
|
)
|
|
|
|
if (!bounds) return null
|
|
if (!isSelecting) return null
|
|
|
|
const size = (isMobile().any ? 12 : 8) / zoom // Touch target size
|
|
|
|
return (
|
|
<g
|
|
pointerEvents={isBrushing ? 'none' : 'all'}
|
|
transform={`
|
|
rotate(${rotation * (180 / Math.PI)},
|
|
${(bounds.minX + bounds.maxX) / 2},
|
|
${(bounds.minY + bounds.maxY) / 2})
|
|
translate(${bounds.minX},${bounds.minY})`}
|
|
>
|
|
<CenterHandle bounds={bounds} />
|
|
<EdgeHandle size={size} bounds={bounds} edge={Edge.Top} />
|
|
<EdgeHandle size={size} bounds={bounds} edge={Edge.Right} />
|
|
<EdgeHandle size={size} bounds={bounds} edge={Edge.Bottom} />
|
|
<EdgeHandle size={size} bounds={bounds} edge={Edge.Left} />
|
|
<CornerHandle size={size} bounds={bounds} corner={Corner.TopLeft} />
|
|
<CornerHandle size={size} bounds={bounds} corner={Corner.TopRight} />
|
|
<CornerHandle size={size} bounds={bounds} corner={Corner.BottomRight} />
|
|
<CornerHandle size={size} bounds={bounds} corner={Corner.BottomLeft} />
|
|
<RotateHandle size={size} bounds={bounds} />
|
|
</g>
|
|
)
|
|
}
|