Mobile Annotations
Touch-optimized annotation editing for phones and tablets. Resize annotation boundaries with touch-and-hold gestures. Linked endpoints keep adjacent annotations connected.
Loading...
Mobile Optimizations
This example uses the same touch optimizations as the multi-clip example:
- Touch delay (250ms) - Distinguishes scroll from drag
- Linked endpoints - Adjacent annotation boundaries move together
- Larger action buttons - 44px minimum touch targets
- Streamlined annotations - Fewer annotations for performance
Implementation
// Use touch-optimized sensors for annotation dragging
const sensors = useDragSensors({ touchOptimized: true });
// Pass sensors to DndContext
<DndContext
sensors={sensors}
onDragStart={onDragStart}
onDragMove={onDragMove}
onDragEnd={onDragEnd}
modifiers={[restrictToHorizontalAxis]}
>
<Waveform annotationControls={...} />
</DndContext>
