react-native-livechart 3.11.0 → 4.0.0

package/src/hooks/usePanScroll.ts

@@ -0,0 +1,253 @@
+import { Gesture } from "react-native-gesture-handler";
+import {
+  cancelAnimation,
+  useSharedValue,
+  withDecay,
+  type SharedValue,
+} from "react-native-reanimated";
+
+import type { ChartPadding } from "../draw/line";
+
+/** Minimum height (px) of the bottom "grab the time ruler" band in axis-drag mode. */
+export const AXIS_GRAB_MIN_PX = 44;
+/** Horizontal travel (px) before a one-finger drag commits to scrolling vs. falling through. */
+const AXIS_ACTIVATE_PX = 6;
+/** Vertical travel (px) that fails the one-finger scroll so a parent vertical scroll wins. */
+const HOLD_SCRUB_FAIL_Y_PX = 12;
+
+/** Which gesture activates a time-scroll. */
+export type PanScrollGestureMode = "holdToScrub" | "axisDrag";
+
+/** Engine SharedValues the pan-scroll gesture reads/writes (subset of the engine state). */
+export interface PanScrollEngineRefs {
+  /** Absolute right-edge time to freeze at, or `null` to follow the live edge. */
+  viewEnd: SharedValue<number | null>;
+  /** Right-edge time the engine would use if following live (advances each frame). */
+  liveEdge: SharedValue<number>;
+  /** Animating visible window width in seconds. */
+  displayWindow: SharedValue<number>;
+  /** Canvas width in px. */
+  canvasWidth: SharedValue<number>;
+  /** Canvas height in px (for the axis-drag band hit-test). */
+  canvasHeight: SharedValue<number>;
+}
+
+export interface UsePanScrollOptions {
+  engine: PanScrollEngineRefs;
+  padding: ChartPadding;
+  /**
+   * Earliest selectable time (unix seconds) — typically the first data point /
+   * candle. Clamps how far back the window can pan. When there's no scrollable
+   * history this should equal (or exceed) the live edge so panning is a no-op.
+   */
+  minTime: SharedValue<number>;
+  /** Master switch. When false the gesture is disabled and the chart follows live. */
+  enabled: boolean;
+  /**
+   * Activation model:
+   *  - `"holdToScrub"` (default): a one-finger drag anywhere scrolls; scrub moves
+   *    to press-and-hold (Rainbow-style). The caller must give the scrub gesture
+   *    a long-press delay so a quick drag falls through to this one.
+   *  - `"axisDrag"`: a one-finger drag starting in the bottom X-axis band ("grab
+   *    the time ruler"); one-finger plot scrub untouched.
+   */
+  mode?: PanScrollGestureMode;
+  /**
+   * Worklet fired when a scroll drag activates — e.g. to clear the crosshair so
+   * a stray scrub doesn't linger behind the pan.
+   */
+  onScrollStart?: () => void;
+}
+
+/**
+ * Smallest valid right-edge time: keeps the window's left edge
+ * (`rightEdge - window`) from passing `minTime`, and never exceeds the live edge
+ * so the `[lo, liveEdge]` clamp range stays valid when history is short.
+ */
+export function panLowerBound(
+  minTime: number,
+  windowSecs: number,
+  liveEdge: number,
+): number {
+  "worklet";
+  return Math.min(minTime + windowSecs, liveEdge);
+}
+
+/**
+ * Next right-edge time after dragging `changeX` px (drag right ⇒ reveal earlier
+ * time ⇒ smaller right edge), clamped to `[lo, liveEdge]`. Returns `null` once
+ * the drag reaches the live edge — the signal to resume following.
+ */
+export function nextViewEnd(
+  cur: number,
+  changeX: number,
+  chartW: number,
+  windowSecs: number,
+  liveEdge: number,
+  lo: number,
+): number | null {
+  "worklet";
+  let next = cur - (changeX / chartW) * windowSecs;
+  if (next < lo) next = lo;
+  if (next > liveEdge) next = liveEdge;
+  return next >= liveEdge ? null : next;
+}
+
+/** Pan velocity (px/s) → time-seconds/s for `withDecay` (drag right ⇒ earlier). */
+export function flingVelocity(
+  velocityX: number,
+  chartW: number,
+  windowSecs: number,
+): number {
+  "worklet";
+  return -(velocityX / chartW) * windowSecs;
+}
+
+/**
+ * Top y (px) of the axis-drag grab band — a touch at or below this row starts a
+ * scroll. The band is the bottom padding (where the time labels sit), widened to
+ * a comfortable touch target.
+ */
+export function axisBandTop(canvasHeight: number, padBottom: number): number {
+  "worklet";
+  return canvasHeight - Math.max(padBottom, AXIS_GRAB_MIN_PX);
+}
+
+/**
+ * Horizontal pan that scrolls the chart back through time. Pick the activation
+ * with `mode`:
+ *  - `"holdToScrub"` — a one-finger drag anywhere (activates on horizontal
+ *    travel; vertical falls through). Scrub must be press-and-hold so a quick
+ *    drag races past it (compose with `Gesture.Race`).
+ *  - `"axisDrag"` — a one-finger drag starting in the bottom X-axis band, gated
+ *    via `manualActivation` (compose with `Gesture.Exclusive`, this gesture
+ *    first: outside the band it fails instantly so scrub runs).
+ *
+ * Writes `engine.viewEnd`: a number freezes the window at that absolute right
+ * edge; `null` means "follow live". Dragging (or flinging) back to the live edge
+ * resumes following.
+ */
+export function usePanScroll({
+  engine,
+  padding,
+  minTime,
+  enabled,
+  mode = "holdToScrub",
+  onScrollStart,
+}: UsePanScrollOptions): ReturnType<typeof Gesture.Pan> {
+  const { viewEnd, liveEdge, displayWindow, canvasWidth, canvasHeight } = engine;
+  const padLeft = padding.left;
+  const padRight = padding.right;
+  const padBottom = padding.bottom;
+
+  // Axis-drag activation tracking (manualActivation). Created unconditionally so
+  // the hook order is stable; unused in hold-to-scrub mode.
+  const startX = useSharedValue(0);
+  const startY = useSharedValue(0);
+  const armed = useSharedValue(false);
+
+  const onStart =
+    /* istanbul ignore next -- gesture worklet runs on the UI thread, not in Jest */
+    () => {
+      "worklet";
+      cancelAnimation(viewEnd);
+      // Anchor at the current right edge so the first delta is relative to where
+      // the window sits (the live edge when we were following).
+      if (viewEnd.get() == null) viewEnd.set(liveEdge.get());
+      onScrollStart?.();
+    };
+
+  const onChange =
+    /* istanbul ignore next -- gesture worklet runs on the UI thread, not in Jest */
+    (e: { changeX: number }) => {
+      "worklet";
+      const win = displayWindow.get();
+      const chartW = canvasWidth.get() - padLeft - padRight;
+      if (chartW <= 0) return;
+      const edge = liveEdge.get();
+      const cur = viewEnd.get() ?? edge;
+      const lo = panLowerBound(minTime.get(), win, edge);
+      viewEnd.set(nextViewEnd(cur, e.changeX, chartW, win, edge, lo));
+    };
+
+  const onEnd =
+    /* istanbul ignore next -- gesture worklet runs on the UI thread, not in Jest */
+    (e: { velocityX: number }) => {
+      "worklet";
+      if (viewEnd.get() == null) return;
+      const win = displayWindow.get();
+      const chartW = canvasWidth.get() - padLeft - padRight;
+      if (chartW <= 0) return;
+      const edge = liveEdge.get();
+      const lo = panLowerBound(minTime.get(), win, edge);
+      const velocity = flingVelocity(e.velocityX, chartW, win);
+      cancelAnimation(viewEnd);
+      viewEnd.set(
+        withDecay({ velocity, clamp: [lo, edge] }, (finished) => {
+          "worklet";
+          // Landed on the live-edge clamp → resume following; stopped short →
+          // stay frozen where inertia died.
+          if (finished && (viewEnd.get() ?? edge) >= edge - 1e-3) {
+            viewEnd.set(null);
+          }
+        }),
+      );
+    };
+
+  if (mode === "axisDrag") {
+    return Gesture.Pan()
+      .enabled(enabled)
+      .maxPointers(1)
+      // Position-gate a one-finger pan: only a drag that starts in the bottom
+      // axis band scrolls; everything else fails fast so scrub/parent gestures run.
+      .manualActivation(true)
+      .onTouchesDown(
+        /* istanbul ignore next -- gesture worklet runs on the UI thread, not in Jest */
+        (e, manager) => {
+          "worklet";
+          const t = e.changedTouches[0];
+          if (!t) return;
+          if (t.y < axisBandTop(canvasHeight.get(), padBottom)) {
+            armed.set(false);
+            manager.fail();
+            return;
+          }
+          armed.set(true);
+          startX.set(t.x);
+          startY.set(t.y);
+        },
+      )
+      .onTouchesMove(
+        /* istanbul ignore next -- gesture worklet runs on the UI thread, not in Jest */
+        (e, manager) => {
+          "worklet";
+          if (!armed.get()) return;
+          const t = e.allTouches[0];
+          if (!t) return;
+          const dx = Math.abs(t.x - startX.get());
+          const dy = Math.abs(t.y - startY.get());
+          if (dx > AXIS_ACTIVATE_PX && dx >= dy) {
+            manager.activate(); // horizontal intent → take the gesture
+          } else if (dy > AXIS_ACTIVATE_PX) {
+            manager.fail(); // vertical intent → release to parent/scroll
+          }
+        },
+      )
+      .onStart(onStart)
+      .onChange(onChange)
+      .onEnd(onEnd);
+  }
+
+  // holdToScrub (default): a one-finger drag anywhere scrolls. Activate on
+  // horizontal travel so a quick one-finger drag scrolls; a still press-hold
+  // crosses no offset and falls through to the scrub gesture (which owns the
+  // long-press). Vertical travel fails it so a parent vertical scroll wins.
+  return Gesture.Pan()
+    .enabled(enabled)
+    .maxPointers(1)
+    .activeOffsetX([-AXIS_ACTIVATE_PX, AXIS_ACTIVATE_PX])
+    .failOffsetY([-HOLD_SCRUB_FAIL_Y_PX, HOLD_SCRUB_FAIL_Y_PX])
+    .onStart(onStart)
+    .onChange(onChange)
+    .onEnd(onEnd);
+}

package/src/hooks/usePinchZoom.ts

@@ -0,0 +1,189 @@
+import { Gesture } from "react-native-gesture-handler";
+import {
+  cancelAnimation,
+  useSharedValue,
+  type SharedValue,
+} from "react-native-reanimated";
+
+import type { ChartPadding } from "../draw/line";
+import { panLowerBound } from "./usePanScroll";
+
+/** Engine SharedValues the pinch-zoom gesture reads/writes. */
+export interface PinchZoomEngineRefs {
+  /** Visible-window width override in seconds, or `null` to follow `timeWindow`. */
+  viewWindow: SharedValue<number | null>;
+  /** Absolute right-edge time, or `null` to follow the live edge (shared with pan). */
+  viewEnd: SharedValue<number | null>;
+  /** Right-edge time the engine would use if following live (advances each frame). */
+  liveEdge: SharedValue<number>;
+  /**
+   * Animating visible window width in seconds. Written directly during a pinch so
+   * the displayed window tracks the fingers 1:1 (the frame-loop lerp toward
+   * `timeWindow` would otherwise lag a fast pinch and the focal anchor would drift).
+   */
+  displayWindow: SharedValue<number>;
+  /** Canvas width in px. */
+  canvasWidth: SharedValue<number>;
+}
+
+export interface UsePinchZoomOptions {
+  engine: PinchZoomEngineRefs;
+  padding: ChartPadding;
+  /**
+   * Earliest selectable time (unix seconds) — typically the first data point /
+   * candle. Caps how far the (now wider) window can pan back when zooming out.
+   */
+  minTime: SharedValue<number>;
+  /** The configured `timeWindow` prop (seconds) — the anchor for the zoom bounds. */
+  timeWindow: number;
+  /** Master switch. When false the gesture is disabled. */
+  enabled: boolean;
+  /** Tightest window (max zoom-in), seconds. Default `timeWindow / 8`. */
+  minTimeWindow?: number;
+  /** Widest window (max zoom-out), seconds. Default: the full data span, ≥ `timeWindow`. */
+  maxTimeWindow?: number;
+  /** Worklet fired when a pinch activates — e.g. to clear a lingering crosshair. */
+  onZoomStart?: () => void;
+}
+
+/** Clamp a window width to `[minWin, maxWin]`. */
+export function clampWindow(
+  win: number,
+  minWin: number,
+  maxWin: number,
+): number {
+  "worklet";
+  if (win < minWin) return minWin;
+  if (win > maxWin) return maxWin;
+  return win;
+}
+
+/**
+ * Resolve the zoom bounds for a gesture. `maxWin` defaults to the data span but
+ * never goes below the configured window (so you can always zoom back out to the
+ * starting view); `minWin` defaults to an 8× zoom-in of the configured window.
+ * Guards against an inverted range (min ≤ max).
+ */
+export function zoomWindowBounds(
+  configWindow: number,
+  span: number,
+  minCfg: number | undefined,
+  maxCfg: number | undefined,
+): [number, number] {
+  "worklet";
+  const maxWin = Math.max(maxCfg ?? span, configWindow);
+  let minWin = minCfg ?? configWindow / 8;
+  if (minWin > maxWin) minWin = maxWin;
+  return [minWin, maxWin];
+}
+
+/**
+ * Absolute time under a pixel x, given the visible window. Inverse of the chart's
+ * time→x projection: `x = chartLeft + (t - winStart)/window * chartW`.
+ */
+export function focalTime(
+  focalX: number,
+  chartLeft: number,
+  chartW: number,
+  winStart: number,
+  windowSecs: number,
+): number {
+  "worklet";
+  return winStart + ((focalX - chartLeft) / chartW) * windowSecs;
+}
+
+/**
+ * The new right-edge time that keeps `focalT` pinned under `focalX` after the
+ * window width changes to `newWindow` — i.e. zoom around the focal point. Derived
+ * from the projection above by solving for the right edge (`winStart + window`):
+ * the right edge sits `(fraction of the window to the right of the focal)` past
+ * `focalT`.
+ */
+export function zoomViewEnd(
+  focalT: number,
+  focalX: number,
+  chartLeft: number,
+  chartW: number,
+  newWindow: number,
+): number {
+  "worklet";
+  const rightFraction = (chartLeft + chartW - focalX) / chartW;
+  return focalT + rightFraction * newWindow;
+}
+
+/**
+ * Pinch-to-zoom the visible time window, anchored at the focal point between the
+ * two fingers (the time under your fingers stays put). Writes `engine.viewWindow`
+ * (the window width) and `engine.viewEnd` (the right edge, so the focal anchor
+ * holds) — the symmetric counterpart of {@link usePanScroll}, which only moves the
+ * right edge. Pinch is two-finger, so it composes with the one-finger pan/scrub
+ * via `Gesture.Simultaneous`.
+ *
+ * Reaching the live edge resumes following (`viewEnd → null`); the zoom level
+ * (`viewWindow`) is independent of scroll position and persists.
+ */
+export function usePinchZoom({
+  engine,
+  padding,
+  minTime,
+  timeWindow,
+  enabled,
+  minTimeWindow,
+  maxTimeWindow,
+  onZoomStart,
+}: UsePinchZoomOptions): ReturnType<typeof Gesture.Pinch> {
+  const { viewWindow, viewEnd, liveEdge, displayWindow, canvasWidth } = engine;
+  const padLeft = padding.left;
+  const padRight = padding.right;
+
+  // Snapshot at gesture start so the cumulative `scale`/`focalX` map from a fixed
+  // origin (no compounding drift while pinching).
+  const startWindow = useSharedValue(timeWindow);
+  const startViewEnd = useSharedValue(0);
+
+  const onStart =
+    /* istanbul ignore next -- gesture worklet runs on the UI thread, not in Jest */
+    () => {
+      "worklet";
+      cancelAnimation(viewEnd);
+      cancelAnimation(viewWindow);
+      const edge = liveEdge.get();
+      startWindow.set(viewWindow.get() ?? timeWindow);
+      startViewEnd.set(viewEnd.get() ?? edge);
+      onZoomStart?.();
+    };
+
+  const onChange =
+    /* istanbul ignore next -- gesture worklet runs on the UI thread, not in Jest */
+    (e: { scale: number; focalX: number }) => {
+      "worklet";
+      const chartW = canvasWidth.get() - padLeft - padRight;
+      if (chartW <= 0 || e.scale <= 0) return;
+      const edge = liveEdge.get();
+      const sWin = startWindow.get();
+      const sEnd = startViewEnd.get();
+      const span = edge - minTime.get();
+      const [minWin, maxWin] = zoomWindowBounds(
+        timeWindow,
+        span,
+        minTimeWindow,
+        maxTimeWindow,
+      );
+      // Pinch out (scale > 1) ⇒ narrower window ⇒ zoom in.
+      const newWin = clampWindow(sWin / e.scale, minWin, maxWin);
+      // Time under the fingers, mapped through the START window so the anchor
+      // doesn't compound; the right edge then keeps it under the (live) focal.
+      const focalT = focalTime(e.focalX, padLeft, chartW, sEnd - sWin, sWin);
+      let newEnd = zoomViewEnd(focalT, e.focalX, padLeft, chartW, newWin);
+      const lo = panLowerBound(minTime.get(), newWin, edge);
+      if (newEnd < lo) newEnd = lo;
+      if (newEnd > edge) newEnd = edge;
+      viewWindow.set(newWin);
+      // Track the displayed window 1:1 (bypass the frame-loop lerp lag) so the
+      // focal anchor is pixel-accurate during the gesture.
+      displayWindow.set(newWin);
+      viewEnd.set(newEnd >= edge ? null : newEnd);
+    };
+
+  return Gesture.Pinch().enabled(enabled).onStart(onStart).onChange(onChange);
+}

package/src/hooks/useReferenceDrag.ts

@@ -0,0 +1,254 @@
+import { Gesture } from "react-native-gesture-handler";
+import {
+  useAnimatedReaction,
+  useDerivedValue,
+  useSharedValue,
+  type SharedValue,
+} from "react-native-reanimated";
+import { scheduleOnRN } from "react-native-worklets";
+
+import type { ChartEngineLayout } from "../core/useLiveChartEngine";
+import type { ChartPadding } from "../draw/line";
+import {
+  clampToBounds,
+  nearestDraggableIndex,
+  referenceValueOut,
+} from "../math/referenceDrag";
+import { referenceLineForm } from "../math/referenceLines";
+import type { ReferenceLine } from "../types";
+import {
+  computeScrubDotY,
+  computeValueAtY,
+  snapPrice,
+} from "./crosshairShared";
+
+/** Vertical reach (px) around a line within which a touch grabs it. */
+const GRAB_SLOP = 14;
+/** Travel (px) that resolves drag (vertical) vs. fall-through (horizontal) intent. */
+const DRAG_ACTIVATE_PX = 4;
+
+/** Stable empty array so the handle / out-state worklets stay referentially stable
+ *  (and the onDragIn/Out reaction never fires) when the feature is unused. */
+const EMPTY: never[] = [];
+
+/**
+ * Builds the per-line **drag** gesture for draggable Form-A reference lines: grab a
+ * line near its value-Y and drag vertically to set a new value, with optional
+ * `snap` + `bounds` clamp. Mirrors the order-ticket reticle in {@link useCrosshair}
+ * (value↔Y via `computeValueAtY` / `computeScrubDotY`, frozen value re-projected
+ * each frame) but per line, writing into the shared `dragValues` array the layout
+ * and overlays read.
+ *
+ * The pan uses `manualActivation`: it grabs only when a touch starts within
+ * {@link GRAB_SLOP} of a draggable line **and** the motion is vertical — a
+ * horizontal drag (scrub) or a touch off every line fails fast so the chart's other
+ * gestures run (compose this ahead of them via `Gesture.Exclusive`).
+ *
+ * Also fires the per-line drag callbacks: `onChange` (de-duped during drag),
+ * `onCommit` (on release), and `onDragIn` / `onDragOut` (value crossing the visible
+ * range or a `bounds`, from a drag or the axis rescaling — edge-detected each frame).
+ */
+export function useReferenceDrag(
+  engine: ChartEngineLayout,
+  padding: ChartPadding,
+  lines: ReferenceLine[],
+  dragValues: SharedValue<number[]>,
+  dragActive: SharedValue<boolean[]>,
+  enabled: boolean,
+): ReturnType<typeof Gesture.Pan> {
+  const anyDraggable =
+    enabled &&
+    lines.some((l) => l.draggable && referenceLineForm(l) === "line");
+  const anyDragInOut = lines.some(
+    (l) =>
+      referenceLineForm(l) === "line" &&
+      (l.onDragIn != null || l.onDragOut != null),
+  );
+
+  // Per-line handle Y (canvas px), index-aligned with `lines`; -1 when the line
+  // isn't draggable or the canvas isn't laid out. Off-screen lines pin to the
+  // nearest plot edge so they stay grabbable. Recomputed each frame (UI thread).
+  /* istanbul ignore next -- worklet runs on the UI thread, not in Jest */
+  const handleYs = useDerivedValue<number[]>(() => {
+    if (!anyDraggable) return EMPTY;
+    const ch = engine.canvasHeight.get();
+    const dMin = engine.displayMin.get();
+    const dMax = engine.displayMax.get();
+    const top = padding.top;
+    const bottom = ch - padding.bottom;
+    const out: number[] = [];
+    for (let i = 0; i < lines.length; i++) {
+      const l = lines[i];
+      if (
+        !l.draggable ||
+        referenceLineForm(l) !== "line" ||
+        l.value === undefined
+      ) {
+        out.push(-1);
+        continue;
+      }
+      const v = dragValues.get()[i] ?? l.value;
+      const y = computeScrubDotY(v, dMin, dMax, ch, top, padding.bottom);
+      out.push(y < 0 ? -1 : Math.min(bottom, Math.max(top, y)));
+    }
+    return out;
+  });
+
+  const dragIndex = useSharedValue(-1);
+  const startX = useSharedValue(0);
+  const startY = useSharedValue(0);
+  const activated = useSharedValue(false);
+  const lastChange = useSharedValue(0);
+
+  // JS-thread callback dispatch — closes over the latest `lines` each render.
+  /* istanbul ignore next -- runs via scheduleOnRN from the UI-thread gesture */
+  function emitChange(i: number, v: number) {
+    lines[i]?.onChange?.(v);
+  }
+  /* istanbul ignore next -- runs via scheduleOnRN from the UI-thread gesture */
+  function emitCommit(i: number, v: number) {
+    lines[i]?.onCommit?.(v);
+  }
+  /* istanbul ignore next -- runs via scheduleOnRN from the UI-thread reaction */
+  function emitDragOut(i: number, v: number) {
+    lines[i]?.onDragOut?.(v);
+  }
+  /* istanbul ignore next -- runs via scheduleOnRN from the UI-thread reaction */
+  function emitDragIn(i: number, v: number) {
+    lines[i]?.onDragIn?.(v);
+  }
+
+  // onDragIn / onDragOut — edge-detect each line's "out of the watched interval"
+  // state (from a drag or the axis rescaling under a fixed value).
+  useAnimatedReaction(
+    /* istanbul ignore next -- worklet runs on the UI thread, not in Jest */
+    () => {
+      if (!anyDragInOut) return EMPTY as boolean[];
+      const dMin = engine.displayMin.get();
+      const dMax = engine.displayMax.get();
+      const out: boolean[] = [];
+      for (let i = 0; i < lines.length; i++) {
+        const l = lines[i];
+        if (
+          referenceLineForm(l) !== "line" ||
+          l.value === undefined ||
+          (l.onDragIn == null && l.onDragOut == null)
+        ) {
+          out.push(false);
+          continue;
+        }
+        const v = dragValues.get()[i] ?? l.value;
+        out.push(referenceValueOut(v, dMin, dMax, l.bounds));
+      }
+      return out;
+    },
+    /* istanbul ignore next -- worklet runs on the UI thread, not in Jest */
+    (curr, prev) => {
+      if (!prev || curr === prev) return;
+      for (let i = 0; i < curr.length; i++) {
+        if (prev[i] === undefined || curr[i] === prev[i]) continue;
+        const l = lines[i];
+        const v = dragValues.get()[i] ?? l.value ?? 0;
+        if (curr[i]) scheduleOnRN(emitDragOut, i, v);
+        else scheduleOnRN(emitDragIn, i, v);
+      }
+    },
+    [lines, anyDragInOut],
+  );
+
+  // ── Gesture callbacks (UI-thread worklets — excluded from Jest coverage) ──────
+  /* istanbul ignore next -- gesture worklet runs on the UI thread, not in Jest */
+  const onTouchesDown = (
+    e: { changedTouches: { x: number; y: number }[] },
+    manager: { fail: () => void },
+  ) => {
+    "worklet";
+    const t = e.changedTouches[0];
+    if (!t) return;
+    const i = nearestDraggableIndex(handleYs.get(), t.y, GRAB_SLOP);
+    if (i < 0) {
+      manager.fail();
+      return;
+    }
+    dragIndex.set(i);
+    startX.set(t.x);
+    startY.set(t.y);
+  };
+
+  /* istanbul ignore next -- gesture worklet runs on the UI thread, not in Jest */
+  const onTouchesMove = (
+    e: { allTouches: { x: number; y: number }[] },
+    manager: { activate: () => void; fail: () => void },
+  ) => {
+    "worklet";
+    if (dragIndex.get() < 0) return;
+    const t = e.allTouches[0];
+    if (!t) return;
+    const dx = Math.abs(t.x - startX.get());
+    const dy = Math.abs(t.y - startY.get());
+    if (dy > DRAG_ACTIVATE_PX && dy >= dx) manager.activate();
+    else if (dx > DRAG_ACTIVATE_PX) manager.fail();
+  };
+
+  /* istanbul ignore next -- gesture worklet runs on the UI thread, not in Jest */
+  const onStart = () => {
+    "worklet";
+    const i = dragIndex.get();
+    if (i < 0) return;
+    activated.set(true);
+    const arr = dragActive.get().slice();
+    arr[i] = true;
+    dragActive.set(arr);
+    lastChange.set(dragValues.get()[i] ?? lines[i].value ?? 0);
+  };
+
+  /* istanbul ignore next -- gesture worklet runs on the UI thread, not in Jest */
+  const onUpdate = (e: { y: number }) => {
+    "worklet";
+    const i = dragIndex.get();
+    if (i < 0) return;
+    const l = lines[i];
+    const raw = computeValueAtY(
+      e.y,
+      engine.displayMin.get(),
+      engine.displayMax.get(),
+      engine.canvasHeight.get(),
+      padding.top,
+      padding.bottom,
+    );
+    if (raw === null) return;
+    const v = clampToBounds(snapPrice(raw, l.snap), l.bounds);
+    const arr = dragValues.get().slice();
+    arr[i] = v;
+    dragValues.set(arr);
+    if (v !== lastChange.get()) {
+      lastChange.set(v);
+      if (l.onChange) scheduleOnRN(emitChange, i, v);
+    }
+  };
+
+  /* istanbul ignore next -- gesture worklet runs on the UI thread, not in Jest */
+  const onFinalize = () => {
+    "worklet";
+    const i = dragIndex.get();
+    if (i >= 0 && activated.get()) {
+      const v = dragValues.get()[i] ?? lines[i].value ?? 0;
+      const arr = dragActive.get().slice();
+      arr[i] = false;
+      dragActive.set(arr);
+      if (lines[i].onCommit) scheduleOnRN(emitCommit, i, v);
+    }
+    dragIndex.set(-1);
+    activated.set(false);
+  };
+
+  return Gesture.Pan()
+    .enabled(anyDraggable)
+    .maxPointers(1)
+    .manualActivation(true)
+    .onTouchesDown(onTouchesDown)
+    .onTouchesMove(onTouchesMove)
+    .onStart(onStart)
+    .onUpdate(onUpdate)
+    .onFinalize(onFinalize);
+}