File size: 862 Bytes
f56a29b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
export interface MouseSelectionProps {
readonly top: number;
readonly left: number;
readonly width: number;
readonly height: number;
readonly quadrant: number;
readonly canvasScale: number;
}
/**
* Mouse selection component
* Displays selection rectangle during mouse drag selection
*/
export function MouseSelection({
top,
left,
width,
height,
quadrant,
canvasScale,
}: MouseSelectionProps) {
const selectionStyle = {
left: `${(quadrant === 2 || quadrant === 3 ? left - width : left) * canvasScale}px`,
top: `${(quadrant === 2 || quadrant === 1 ? top - height : top) * canvasScale}px`,
width: `${width * canvasScale}px`,
height: `${height * canvasScale}px`,
};
return (
<div
className="mouse-selection absolute border-2 border-primary border-dashed z-41"
style={selectionStyle}
/>
);
}
|