MouseSelection.tsx 875 B

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