Use Selection Gesture

Click, extend, brush, clear — one state machine.

Preview

About

Thirty-three components bind onPointerDown and between them implement about six ideas of what a drag means. Some select on down, some on up; some treat a 2px twitch during a click as a brush and select a one-pixel range; almost none release pointer capture on cancel, so a drag ending outside the window leaves the viewer stuck brushing. What a user expects isn't complicated, it just has to be written once: click replaces, shift-click extends, ⌘-click toggles, a drag past the threshold brushes with a live preview, Escape aborts a brush in flight or clears at rest. The threshold is the detail every hand-rolled version got wrong.

Usage

import { useSelectionGesture } from "@/components/ui/use-selection-gesture"

const gesture = useSelectionGesture({
  locate: (e) => Math.round(x.invert(e.clientX - rect.left)),
  onPick: (bp, mode) => select(bp, mode),
  onBrushEnd: (range) => selectRange(range),
})

<div {...gesture.props}>{gesture.brushing && <Brush {...gesture.brushing} />}</div>