tldraw/components/canvas/bounds/bounds-bg.tsx

86 lines
2.3 KiB
TypeScript

import { useRef } from 'react'
import state, { useSelector } from 'state'
import inputs from 'state/inputs'
import styled from 'styles'
import { getPage } from 'utils'
function handlePointerDown(e: React.PointerEvent<SVGRectElement>) {
if (!inputs.canAccept(e.pointerId)) return
e.stopPropagation()
e.currentTarget.setPointerCapture(e.pointerId)
const info = inputs.pointerDown(e, 'bounds')
if (e.button === 0) {
state.send('POINTED_BOUNDS', info)
} else if (e.button === 2) {
state.send('RIGHT_POINTED', info)
}
}
function handlePointerUp(e: React.PointerEvent<SVGRectElement>) {
if (!inputs.canAccept(e.pointerId)) return
e.stopPropagation()
e.currentTarget.releasePointerCapture(e.pointerId)
state.send('STOPPED_POINTING', inputs.pointerUp(e, 'bounds'))
}
export default function BoundsBg(): JSX.Element {
const rBounds = useRef<SVGRectElement>(null)
const bounds = useSelector((state) => state.values.selectedBounds)
const isSelecting = useSelector((s) => s.isIn('selecting'))
const rotation = useSelector((s) => {
const selectedIds = s.values.selectedIds
if (selectedIds.length === 1) {
const selected = selectedIds[0]
const page = getPage(s.data)
return page.shapes[selected]?.rotation
} else {
return 0
}
})
const isAllHandles = useSelector((s) => {
const selectedIds = s.values.selectedIds
if (selectedIds.length === 1) {
const page = getPage(s.data)
const selected = selectedIds[0]
return (
selectedIds.length === 1 && page.shapes[selected]?.handles !== undefined
)
}
})
if (isAllHandles) return null
if (!bounds) return null
if (!isSelecting) return null
const { width, height } = bounds
return (
<StyledBoundsBg
ref={rBounds}
width={Math.max(1, width)}
height={Math.max(1, height)}
transform={`
rotate(${rotation * (180 / Math.PI)},
${(bounds.minX + bounds.maxX) / 2},
${(bounds.minY + bounds.maxY) / 2})
translate(${bounds.minX},${bounds.minY})
rotate(${(bounds.rotation || 0) * (180 / Math.PI)}, 0, 0)`}
onPointerDown={handlePointerDown}
onPointerUp={handlePointerUp}
pointerEvents="all"
/>
)
}
const StyledBoundsBg = styled('rect', {
fill: '$boundsBg',
})