@oar-sh/oar 0.9.8 → 0.9.10

package/server/public/app/viewer-gestures.mjs

@@ -0,0 +1,105 @@
+// A swipe across the viewer: one pointer, moving mostly along one axis.
+//
+// The axis is decided once the pointer has moved a little, and stays: a
+// drag that started sideways is a sideways drag even if it wanders. Each
+// axis can be switched off for the moment (sideways while an image is
+// zoomed in, since that is a pan; downwards while text is scrolled). The
+// content follows the finger through `onMove`; on release the drag is a
+// swipe when it went far enough or fast enough, else it springs back.
+
+export const SWIPE_LOCK_PX = 12;
+export const SWIPE_THRESHOLD_PX = 80;
+export const SWIPE_FLICK_PX_PER_MS = 0.45;
+export const SWIPE_MIN_FLICK_PX = 30;
+
+export function createSwipeRecognizer({
+  onStart = () => {},
+  onMove = () => {},
+  onEnd = () => {},
+  canStart = () => true,
+  horizontalEnabled = () => true,
+  verticalEnabled = () => false,
+  lockPx = SWIPE_LOCK_PX,
+  thresholdPx = SWIPE_THRESHOLD_PX,
+  flickPxPerMs = SWIPE_FLICK_PX_PER_MS,
+  minFlickPx = SWIPE_MIN_FLICK_PX,
+} = {}) {
+  const state = { pointer: null, pointers: 0 };
+
+  const finish = (event, { cancelled = false } = {}) => {
+    const p = state.pointer;
+    state.pointer = null;
+    if (!p || !p.axis) return;
+    const dx = event ? event.clientX - p.x : 0;
+    const dy = event ? event.clientY - p.y : 0;
+    const along = p.axis === 'x' ? dx : dy;
+    // Velocity from the last two samples; a finger that paused before
+    // lifting has none.
+    const dt = event ? event.timeStamp - p.lastAt : Infinity;
+    const velocity = dt > 0 && dt < 100 && Number.isFinite(dt)
+      ? ((p.axis === 'x' ? event.clientX - p.lastX : event.clientY - p.lastY) / dt)
+      : 0;
+    const farEnough = Math.abs(along) > thresholdPx;
+    const flicked = Math.abs(along) > minFlickPx && Math.abs(velocity) > flickPxPerMs
+      && Math.sign(velocity) === Math.sign(along);
+    let swipe = null;
+    if (!cancelled && (farEnough || flicked)) {
+      swipe = p.axis === 'x' ? (along < 0 ? 'left' : 'right') : (along < 0 ? 'up' : 'down');
+    }
+    onEnd({ axis: p.axis, dx, dy, swipe, cancelled });
+  };
+
+  return {
+    handle(event) {
+      const type = String(event?.type || '');
+      if (type === 'pointerdown') {
+        state.pointers += 1;
+        if (state.pointers > 1) {
+          // A second finger: a pinch, not a swipe.
+          finish(null, { cancelled: true });
+          return;
+        }
+        if (!canStart(event)) return;
+        state.pointer = {
+          id: event.pointerId,
+          x: event.clientX, y: event.clientY,
+          lastX: event.clientX, lastY: event.clientY, lastAt: event.timeStamp,
+          axis: null,
+        };
+        return;
+      }
+      const p = state.pointer;
+      if (type === 'pointermove') {
+        if (!p || event.pointerId !== p.id) return;
+        const dx = event.clientX - p.x;
+        const dy = event.clientY - p.y;
+        if (!p.axis) {
+          if (Math.max(Math.abs(dx), Math.abs(dy)) < lockPx) return;
+          const axis = Math.abs(dx) >= Math.abs(dy) ? 'x' : 'y';
+          if ((axis === 'x' && !horizontalEnabled()) || (axis === 'y' && !verticalEnabled())) {
+            state.pointer = null;
+            return;
+          }
+          p.axis = axis;
+          onStart({ axis });
+        }
+        p.lastX = event.clientX;
+        p.lastY = event.clientY;
+        p.lastAt = event.timeStamp;
+        onMove({ axis: p.axis, dx, dy });
+        return;
+      }
+      if (type === 'pointerup' || type === 'pointercancel') {
+        state.pointers = Math.max(0, state.pointers - 1);
+        if (!p || event.pointerId !== p.id) return;
+        finish(event, { cancelled: type === 'pointercancel' });
+      }
+    },
+    /** True while a swipe is being tracked along an axis. */
+    get active() { return Boolean(state.pointer?.axis); },
+    cancel() {
+      finish(null, { cancelled: true });
+      state.pointers = 0;
+    },
+  };
+}

package/server/public/app/viewer-history.mjs

@@ -0,0 +1,45 @@
+// The system back gesture closes the viewer instead of leaving the app.
+//
+// Opening the viewer pushes one history entry marked as ours; back pops it
+// and the pop closes the viewer. Closing by any other means (the × button,
+// Escape, a swipe down) pops that entry itself so history is left as it
+// was, and the pop that follows is recognised as our own and ignored. The
+// address never changes: the entry carries only its state.
+
+export const VIEWER_HISTORY_MARK = 'oarFileViewer';
+const OWN_POP_WINDOW_MS = 1500;
+
+// `mark` names the viewer's entry: two viewers (the file viewer and the
+// sub-agent viewer) must never take each other's entry for their own.
+export function createViewerHistory({ history, onBack, now = () => Date.now(), mark = VIEWER_HISTORY_MARK } = {}) {
+  const state = { pushed: false, ownPopAt: 0 };
+  return {
+    get pushed() { return state.pushed; },
+    /** The viewer came up: one entry, however many files it then shows. */
+    opened() {
+      if (state.pushed) return;
+      history.pushState({ [mark]: true }, '');
+      state.pushed = true;
+    },
+    /** The viewer went away by itself: take its entry back out of history. */
+    closed() {
+      if (!state.pushed) return;
+      state.pushed = false;
+      if (history.state?.[mark]) {
+        state.ownPopAt = now();
+        history.back();
+      }
+    },
+    /** Feed every popstate here; the one answering our own back() is skipped. */
+    onPopState() {
+      if (state.ownPopAt && now() - state.ownPopAt < OWN_POP_WINDOW_MS) {
+        state.ownPopAt = 0;
+        return;
+      }
+      state.ownPopAt = 0;
+      if (!state.pushed) return;
+      state.pushed = false;
+      onBack?.();
+    },
+  };
+}

package/server/public/app/viewer-tap.mjs

@@ -0,0 +1,112 @@
+// Telling a tap from everything else that happens on the viewer's content.
+//
+// A tap is one pointer that goes down and comes up in place, quickly. A drag
+// (panning a zoomed image, selecting text), a pinch (a second pointer) and a
+// long press are not taps. Neither is the first half of a double tap: the
+// tap is reported only once the double-tap window has passed without a
+// second pointer going down, so a double tap zooms without first flipping
+// the controls. Taps on things that act by themselves (links, buttons, a
+// player's own controls) are left to them.
+
+export const TAP_MAX_MOVE_PX = 10;
+export const TAP_MAX_DURATION_MS = 500;
+export const DOUBLE_TAP_WINDOW_MS = 300;
+
+const INTERACTIVE_SELECTOR = 'a, button, input, textarea, select, summary, video, audio, [contenteditable], [data-no-viewer-tap]';
+
+/**
+ * Pure tap recognizer fed with pointer events of the shape
+ * `{ type, pointerId, clientX, clientY, timeStamp, target }`. Calls `onTap`
+ * with the final pointer position, `isInteractive(target)` says whether a
+ * target handles taps itself (defaults to the usual controls), and
+ * `hasSelection()` lets a text selection that ended under the pointer count
+ * as a drag rather than a tap.
+ */
+export function createTapRecognizer({
+  onTap,
+  isInteractive = defaultIsInteractive,
+  hasSelection = () => false,
+  setTimeoutImpl = setTimeout,
+  clearTimeoutImpl = clearTimeout,
+} = {}) {
+  const state = {
+    active: null,        // the pointer being watched: { id, x, y, at }
+    pointers: 0,         // pointers currently down
+    pending: null,       // timer holding a tap until the double-tap window passes
+    cancelled: false,    // a second pointer joined or the pointer moved too far
+  };
+
+  const dropPending = () => {
+    if (state.pending === null) return;
+    clearTimeoutImpl(state.pending);
+    state.pending = null;
+  };
+
+  return {
+    handle(event) {
+      const type = String(event?.type || '');
+      if (type === 'pointerdown') {
+        state.pointers += 1;
+        // A second pointer down while a tap waits to be reported: the start
+        // of a double tap (or a pinch); either way not a single tap.
+        if (state.pending !== null) {
+          dropPending();
+          state.cancelled = true;
+          state.active = null;
+          return;
+        }
+        if (state.pointers > 1) {
+          state.cancelled = true;
+          state.active = null;
+          return;
+        }
+        if (isInteractive(event.target)) {
+          state.active = null;
+          return;
+        }
+        state.cancelled = false;
+        state.active = { id: event.pointerId, x: event.clientX, y: event.clientY, at: event.timeStamp };
+        return;
+      }
+      if (type === 'pointermove') {
+        if (!state.active || event.pointerId !== state.active.id) return;
+        if (Math.hypot(event.clientX - state.active.x, event.clientY - state.active.y) > TAP_MAX_MOVE_PX) {
+          state.cancelled = true;
+          state.active = null;
+        }
+        return;
+      }
+      if (type === 'pointerup' || type === 'pointercancel') {
+        state.pointers = Math.max(0, state.pointers - 1);
+        const active = state.active;
+        if (!active || event.pointerId !== active.id) {
+          if (state.pointers === 0) state.cancelled = false;
+          return;
+        }
+        state.active = null;
+        if (type === 'pointercancel' || state.cancelled) { state.cancelled = false; return; }
+        if (event.timeStamp - active.at > TAP_MAX_DURATION_MS) return;
+        if (Math.hypot(event.clientX - active.x, event.clientY - active.y) > TAP_MAX_MOVE_PX) return;
+        if (hasSelection()) return;
+        const point = { clientX: event.clientX, clientY: event.clientY };
+        dropPending();
+        state.pending = setTimeoutImpl(() => {
+          state.pending = null;
+          onTap?.(point);
+        }, DOUBLE_TAP_WINDOW_MS);
+      }
+    },
+    /** Forget a tap in flight, e.g. when the content is replaced. */
+    cancel() {
+      dropPending();
+      state.active = null;
+      state.cancelled = false;
+      state.pointers = 0;
+    },
+  };
+}
+
+export function defaultIsInteractive(target) {
+  if (!target || typeof target.closest !== 'function') return false;
+  return Boolean(target.closest(INTERACTIVE_SELECTOR));
+}