pnpm dlx shadcn@latest add @audio-ui/use-marquee-selection
import { useMarquee } from "@/hooks/use-marquee-selection";| Files | hooks/use-marquee-selection.ts |
|---|---|
| Depends on | Nothing |
| npm | Nothing |
| Used by | arrangement-editor, arrangement-view, block-timeline |
| Export | Kind | What it is |
|---|---|---|
Marquee | interface | |
useMarquee | function | A marquee for the clips: Shift and drag across bare lane draws a rectangle, and the clips it touches join the selection. |
Usage
A marquee for the clips of a timeline: Shift and drag across bare lane draws a rectangle, and the clips it touches join the selection. Spread its handlers on the timeline's viewport and draw rect.
import { useMarquee } from "@/hooks/use-marquee-selection";
const marquee = useMarquee(selectedIds, select, multi);
<TimelineViewport {...marquee.handlers}>
{/* lanes */}
{marquee.rect ? <div className="absolute border border-primary bg-primary/10" style={marquee.rect} /> : null}
</TimelineViewport>;It is told the selection when the drag began, to add to it with multi, and reports the clips it touches as it grows.