59 lines
1.8 KiB
TypeScript
59 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef } from "react";
|
|
|
|
interface SelectionBoxProps {
|
|
startPos: { x: number; y: number } | null;
|
|
currentPos: { x: number; y: number } | null;
|
|
containerRef: React.RefObject<HTMLElement>;
|
|
isActive: boolean;
|
|
}
|
|
|
|
export function SelectionBox({
|
|
startPos,
|
|
currentPos,
|
|
containerRef,
|
|
isActive,
|
|
}: SelectionBoxProps) {
|
|
const selectionBoxRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (!isActive || !startPos || !currentPos || !containerRef.current) return;
|
|
|
|
const container = containerRef.current;
|
|
const containerRect = container.getBoundingClientRect();
|
|
|
|
// Calculate relative positions within the container
|
|
const startX = startPos.x - containerRect.left;
|
|
const startY = startPos.y - containerRect.top;
|
|
const currentX = currentPos.x - containerRect.left;
|
|
const currentY = currentPos.y - containerRect.top;
|
|
|
|
// Calculate the selection rectangle bounds
|
|
const left = Math.min(startX, currentX);
|
|
const top = Math.min(startY, currentY);
|
|
const width = Math.abs(currentX - startX);
|
|
const height = Math.abs(currentY - startY);
|
|
|
|
// Update the selection box position and size
|
|
if (selectionBoxRef.current) {
|
|
selectionBoxRef.current.style.left = `${left}px`;
|
|
selectionBoxRef.current.style.top = `${top}px`;
|
|
selectionBoxRef.current.style.width = `${width}px`;
|
|
selectionBoxRef.current.style.height = `${height}px`;
|
|
}
|
|
}, [startPos, currentPos, isActive, containerRef]);
|
|
|
|
if (!isActive || !startPos || !currentPos) return null;
|
|
|
|
return (
|
|
<div
|
|
ref={selectionBoxRef}
|
|
className="absolute pointer-events-none z-50"
|
|
style={{
|
|
backgroundColor: "hsl(var(--foreground) / 0.1)",
|
|
}}
|
|
/>
|
|
);
|
|
}
|