useTimeSelection

bunnpmpnpmyarn
Copy
pnpm dlx shadcn@latest add @audio-ui/use-time-selection

Copy
import { useTimeSelection } from "@/hooks/use-time-selection";

Usage

useTimeSelection is a stretch of time on some tracks and what the keyboard does with it. Tell it where a press on bare lane began, give its onSelectionChange to the lanes, and draw the overlay on the tracks it spans:

Copy
import { TimelineTimeSelection } from "@/components/audio-ui/time-selection";
import { useTimeSelection } from "@/hooks/use-time-selection";

const selection = useTimeSelection({
  bar,
  clips,
  copyOf,
  dispatch,
  getPosition: () => engine.position.getSnapshot(),
  selectedIds,
  selectedTracks,
  tracks,
});

<TimelineLane
  data-track={track.id}
  onPointerDown={() => selection.pressLane(track.id)}
  onSelectionChange={selection.onSelectionChange}
>
  {selection.time?.tracks.includes(track.id) ? (
    <TimelineTimeSelection range={selection.time.range} />
  ) : null}
</TimelineLane>;

handleKey takes a key press, native or React's, and says whether it was one of its own, so a host's other keys can follow: Cmd/Ctrl + C and X copy and cut (the selected clips when no time is selected), V pastes at the cursor and I opens silence there; with a time selection, D duplicates it after itself, J makes one clip per track of it, L loops it and Delete empties it. With Shift too, X, V, D and Delete work on the time itself, on every track, and Cmd/Ctrl + Alt + F makes fades from it. Each is one step of undo.

It is one of the parts the Arrangement composes.

API