kopia lustrzana https://github.com/Tldraw/Tldraw
48 wiersze
1.3 KiB
TypeScript
48 wiersze
1.3 KiB
TypeScript
import { useRef } from "react"
|
|
import state, { useSelector } from "state"
|
|
import inputs from "state/inputs"
|
|
import styled from "styles"
|
|
|
|
export default function BoundsBg() {
|
|
const rBounds = useRef<SVGRectElement>(null)
|
|
const bounds = useSelector((state) => state.values.selectedBounds)
|
|
const isSelecting = useSelector((s) => s.isIn("selecting"))
|
|
const rotation = useSelector((s) => {
|
|
if (s.data.selectedIds.size === 1) {
|
|
const { shapes } = s.data.document.pages[s.data.currentPageId]
|
|
const selected = Array.from(s.data.selectedIds.values())[0]
|
|
return shapes[selected].rotation
|
|
} else {
|
|
return 0
|
|
}
|
|
})
|
|
|
|
if (!bounds) return null
|
|
if (!isSelecting) return null
|
|
|
|
const { minX, minY, width, height } = bounds
|
|
|
|
return (
|
|
<StyledBoundsBg
|
|
ref={rBounds}
|
|
x={minX}
|
|
y={minY}
|
|
width={Math.max(1, width)}
|
|
height={Math.max(1, height)}
|
|
onPointerDown={(e) => {
|
|
if (e.buttons !== 1) return
|
|
e.stopPropagation()
|
|
rBounds.current.setPointerCapture(e.pointerId)
|
|
state.send("POINTED_BOUNDS", inputs.pointerDown(e, "bounds"))
|
|
}}
|
|
transform={`rotate(${rotation * (180 / Math.PI)},${minX + width / 2}, ${
|
|
minY + height / 2
|
|
})`}
|
|
/>
|
|
)
|
|
}
|
|
|
|
const StyledBoundsBg = styled("rect", {
|
|
fill: "$boundsBg",
|
|
})
|