Canvas Timeline
Function

useTimelineClipTrim

Headless pointer trimming for custom DOM or canvas clip edges. Capture the pointer on your element after a successful start; forward moves, pointer up, and cancellation to the corresponding commands. The hook captures start geometry once, delegates snapping and edit policy to Core, and cancels its preview on unmount. It has no DOM or per-frame state subscription. Compose with `useTimelineEditPreview` for live preview UI.

Signature

Type Definition
useTimelineClipTrim(): UseTimelineClipTrimResult

Returns

UseTimelineClipTrimResult

Trim gesture state and start, move, commit, and cancel commands.

Examples

tsx Example
const trim = useTimelineClipTrim();
return <button
  aria-label="Trim clip end"
  onPointerDown={(event) => {
    if (trim.startClipTrim({ clipId: 'clip', edge: 'end', clientX: event.clientX }).ok) {
      event.currentTarget.setPointerCapture(event.pointerId);
    }
  }}
  onPointerMove={(event) => { trim.moveClipTrim({ clientX: event.clientX }); }}
  onPointerUp={() => { trim.endClipTrim(); }}
  onPointerCancel={() => { trim.cancelClipTrim(); }}
  onLostPointerCapture={() => { trim.cancelClipTrim(); }}
/>;