color-kitnext

@pbroom/color-kit/driverDrag controller

createPointerDragController

Creates a framework-agnostic pointer drag controller. start() and end() commit immediately; move() inputs are coalesced to at most one commit per frame, skipped when within dragEpsilon of the current point, and capped at maxUpdateHz (a rate-limited point is retried next frame, never dropped). normalize maps raw input to a point; inputs it rejects are ignored.

functionimport { createPointerDragController } from '@pbroom/color-kit/driver';drag-controller.ts:208
function createPointerDragController<TInput>(
  initialConfig: PointerDragControllerConfig<TInput>,
  scheduler?: DragFrameScheduler,
): PointerDragController<TInput>;

Parameters

initialConfigPointerDragControllerConfig<TInput>
scheduler?DragFrameScheduler
Frame scheduler and clock; inject one for tests.

Returns

PointerDragController<TInput>

Example

TypeScript
import { createPointerDragController, normalizeColorAreaPointer } from '@pbroom/color-kit/driver';

const rect = { left: 0, top: 0, width: 200, height: 100 };
const drag = createPointerDragController<{ clientX: number; clientY: number }>({
  normalize: (e) => normalizeColorAreaPointer(e.clientX, e.clientY, rect),
  commit: (point, info) => console.log(point, info.forced),
});
drag.start({ clientX: 50, clientY: 50 }); // logs { x: 0.25, y: 0.5 } true
drag.move({ clientX: 150, clientY: 25 }); // queued for the next frame
drag.end(); // flushes the queued move: logs { x: 0.75, y: 0.25 } true

See also

normalizeColorAreaPointer