react-msaview 9.1.1 → 9.3.0

package/src/useWheelScroll.ts

@@ -2,24 +2,71 @@ import { useEffect, useRef, useState } from 'react'
 
 import { WheelZoomSmoother } from './wheelZoom.ts'
 
+import type { MsaViewModel } from './model.ts'
+
 const zoomSettleMs = 150
 
+// a wheel event this soon after one the view took belongs to the same gesture,
+// so the view keeps it at an edge rather than handing the momentum to the page
+const wheelLatchMs = 150
+
+type Axes = 'x' | 'y' | 'xy'
+
+/**
+ * Whether a vertical wheel `delta` moves a view at `scrollY`. At the top or
+ * bottom, or when every row fits, the page scrolls instead, so an embedded
+ * viewer never traps the reader scrolling past it.
+ */
+export function canScrollY(model: MsaViewModel, delta: number) {
+  const { scrollY, maxScrollY } = model
+  return delta > 0 ? scrollY > maxScrollY : delta < 0 && scrollY < 0
+}
+
+// Safari reads a touch-action holding pinch-zoom as invalid and falls back to
+// auto, which hands every swipe to the page
+const pinchZoom =
+  typeof CSS !== 'undefined' && CSS.supports('touch-action', 'pinch-zoom')
+    ? 'pinch-zoom'
+    : undefined
+
+function withPinch(pan: string) {
+  return pinchZoom ? `${pan} ${pinchZoom}` : pan
+}
+
+/**
+ * The CSS touch-action for a pannable area: the browser keeps a touch pan
+ * along every axis the view cannot scroll, and pinch zoom on the page where it
+ * supports that value.
+ */
+export function panTouchAction(model: MsaViewModel, axes: Axes) {
+  const x = axes.includes('x') && model.maxScrollX < 0
+  const y = axes.includes('y') && model.maxScrollY < 0
+  return x && y
+    ? (pinchZoom ?? 'none')
+    : x
+      ? withPinch('pan-y')
+      : y
+        ? withPinch('pan-x')
+        : 'auto'
+}
+
+/**
+ * Wheel scrolling, wheel zoom and pointer-drag panning of `model` over `ref`,
+ * along `axes`. The returned `onPointerDown` starts a pan with a mouse, a pen
+ * or a finger; put `touchAction` on the same element.
+ */
 export function useWheelScroll({
   ref,
-  onScrollX,
-  onScrollY,
-  onZoom,
-  onZoomSettle,
+  model,
+  axes,
+  zoom,
   onWheelScroll,
-  scrollZoom,
 }: {
   ref: React.RefObject<HTMLDivElement | null>
-  onScrollX?: (delta: number) => void
-  onScrollY?: (delta: number) => void
-  onZoom?: (scaleFactor: number, offsetX: number, offsetY: number) => void
-  onZoomSettle?: () => void
+  model: MsaViewModel
+  axes: Axes
+  zoom?: boolean
   onWheelScroll?: (event: WheelEvent) => void
-  scrollZoom?: boolean
 }) {
   const scheduled = useRef(false)
   const zoomFrame = useRef<number | undefined>(undefined)
@@ -28,13 +75,18 @@ export function useWheelScroll({
   )
   const deltaX = useRef(0)
   const deltaY = useRef(0)
+  const lastTaken = useRef(Number.NEGATIVE_INFINITY)
   const zoomSmoother = useRef(new WheelZoomSmoother())
   const zoomX = useRef(0)
   const zoomY = useRef(0)
   const lastZoomTime = useRef<number | null>(null)
-  const prevX = useRef(0)
-  const prevY = useRef(0)
-  const [mouseDragging, setMouseDragging] = useState(false)
+  const prev = useRef({ x: 0, y: 0 })
+  const latest = useRef({ x: 0, y: 0 })
+  const panFrame = useRef(false)
+  // the pointer that started the pan; a second finger neither moves nor ends it
+  const [panPointer, setPanPointer] = useState<number>()
+  const x = axes.includes('x')
+  const y = axes.includes('y')
 
   useEffect(() => {
     const curr = ref.current
@@ -47,11 +99,10 @@ export function useWheelScroll({
       // shift is the escape hatch to pan instead.
       const isCtrlZoom = event.ctrlKey || event.metaKey
       const isScrollZoom =
-        scrollZoom &&
+        model.scrollZoom &&
         !event.shiftKey &&
         Math.abs(event.deltaY) >= Math.abs(event.deltaX)
-      if (onZoom && (isCtrlZoom || isScrollZoom)) {
-        const zoom = onZoom
+      if (zoom && (isCtrlZoom || isScrollZoom)) {
         const rect = curr!.getBoundingClientRect()
         zoomSmoother.current.add(event.deltaY, event.deltaMode, isCtrlZoom)
         zoomX.current = event.clientX - rect.left
@@ -62,14 +113,14 @@ export function useWheelScroll({
             const elapsed =
               lastZoomTime.current === null ? 16.67 : now - lastZoomTime.current
             lastZoomTime.current = now
-            zoom(
+            model.wheelZoomToPos(
               zoomSmoother.current.step(Math.min(100, elapsed)),
               zoomX.current,
               zoomY.current,
             )
             clearTimeout(zoomSettle.current)
             zoomSettle.current = setTimeout(() => {
-              onZoomSettle?.()
+              model.endWheelZoom()
             }, zoomSettleMs)
             zoomFrame.current = zoomSmoother.current.idle
               ? undefined
@@ -81,30 +132,30 @@ export function useWheelScroll({
         event.stopPropagation()
         return
       }
-      // only swallow the wheel event on an axis we actually handle, otherwise a
-      // vertical wheel over an x-only scroller (e.g. a Track) blocks page scroll
-      const consumeX = !!onScrollX && event.deltaX !== 0
-      const consumeY = !!onScrollY && event.deltaY !== 0
-      if (consumeX || consumeY) {
-        onWheelScroll?.(event)
-        if (onScrollX) {
-          deltaX.current += event.deltaX
+      // the dominant axis decides: a trackpad's vertical swipe carries a pixel
+      // or two of deltaX, which must not hold the page at the bottom row. A
+      // horizontal wheel stays taken at the edges, where the page would read
+      // it as a swipe back through history.
+      const { deltaX: dx, deltaY: dy } = event
+      const vertical = Math.abs(dy) >= Math.abs(dx)
+      const latched = event.timeStamp - lastTaken.current < wheelLatchMs
+      const takeY =
+        y && dy !== 0 && (latched || canScrollY(model, dy) || !vertical)
+      const takeX = x && dx !== 0 && (!vertical || takeY)
+      if (takeX || takeY) {
+        if (takeY && vertical) {
+          lastTaken.current = event.timeStamp
         }
-        if (onScrollY) {
-          deltaY.current += event.deltaY
-        }
-
+        onWheelScroll?.(event)
+        deltaX.current += takeX ? event.deltaX : 0
+        deltaY.current += takeY ? event.deltaY : 0
         if (!scheduled.current) {
           scheduled.current = true
           requestAnimationFrame(() => {
-            if (onScrollX) {
-              onScrollX(-deltaX.current)
-              deltaX.current = 0
-            }
-            if (onScrollY) {
-              onScrollY(-deltaY.current)
-              deltaY.current = 0
-            }
+            model.doScrollX(-deltaX.current)
+            model.doScrollY(-deltaY.current)
+            deltaX.current = 0
+            deltaY.current = 0
             scheduled.current = false
           })
         }
@@ -121,64 +172,53 @@ export function useWheelScroll({
       }
       clearTimeout(zoomSettle.current)
     }
-  }, [
-    ref,
-    onScrollX,
-    onScrollY,
-    onZoom,
-    onZoomSettle,
-    onWheelScroll,
-    scrollZoom,
-  ])
+  }, [ref, model, x, y, zoom, onWheelScroll])
 
   useEffect(() => {
-    if (!mouseDragging) {
+    if (panPointer === undefined) {
       return
     }
-    function globalMouseMove(event: MouseEvent) {
+    // a frame applies the distance from the last applied position to the
+    // newest one, so a move landing while a frame is pending is not dropped
+    function onMove(event: PointerEvent) {
+      if (event.pointerId !== panPointer) {
+        return
+      }
       event.preventDefault()
-      const distanceX = event.clientX - prevX.current
-      const distanceY = event.clientY - prevY.current
-      if ((distanceX && onScrollX) || (distanceY && onScrollY)) {
-        if (!scheduled.current) {
-          scheduled.current = true
-          requestAnimationFrame(() => {
-            onScrollX?.(distanceX)
-            onScrollY?.(distanceY)
-            scheduled.current = false
-            prevX.current = event.clientX
-            prevY.current = event.clientY
-          })
-        }
+      latest.current = { x: event.clientX, y: event.clientY }
+      if (!panFrame.current) {
+        panFrame.current = true
+        requestAnimationFrame(() => {
+          const to = latest.current
+          model.doScrollX(x ? to.x - prev.current.x : 0)
+          model.doScrollY(y ? to.y - prev.current.y : 0)
+          prev.current = to
+          panFrame.current = false
+        })
       }
     }
-
-    function globalMouseUp() {
-      prevX.current = 0
-      prevY.current = 0
-      setMouseDragging(false)
+    function onUp(event: PointerEvent) {
+      if (event.pointerId === panPointer) {
+        setPanPointer(undefined)
+      }
     }
-
-    window.addEventListener('mousemove', globalMouseMove, true)
-    window.addEventListener('mouseup', globalMouseUp, true)
+    window.addEventListener('pointermove', onMove, true)
+    window.addEventListener('pointerup', onUp, true)
+    window.addEventListener('pointercancel', onUp, true)
     return () => {
-      window.removeEventListener('mousemove', globalMouseMove, true)
-      window.removeEventListener('mouseup', globalMouseUp, true)
+      window.removeEventListener('pointermove', onMove, true)
+      window.removeEventListener('pointerup', onUp, true)
+      window.removeEventListener('pointercancel', onUp, true)
     }
-  }, [mouseDragging, onScrollX, onScrollY])
+  }, [panPointer, model, x, y])
 
-  function onMouseDown(event: React.MouseEvent) {
-    if (event.button === 0) {
-      prevX.current = event.clientX
-      prevY.current = event.clientY
-      setMouseDragging(true)
+  function onPointerDown(event: React.PointerEvent) {
+    if (event.button === 0 && event.isPrimary && panPointer === undefined) {
+      prev.current = { x: event.clientX, y: event.clientY }
+      latest.current = prev.current
+      setPanPointer(event.pointerId)
     }
   }
 
-  function onMouseUp(event: React.MouseEvent) {
-    event.preventDefault()
-    setMouseDragging(false)
-  }
-
-  return { onMouseDown, onMouseUp }
+  return { onPointerDown, touchAction: panTouchAction(model, axes) }
 }

package/src/version.ts

@@ -1 +1 @@
-export const version = '9.1.1'
+export const version = '9.3.0'

package/src/viewerSnapshot.ts

@@ -1,5 +1,7 @@
 import { createJBrowseTheme } from '@jbrowse/core/ui/theme'
 
+import { letterColors } from './scales.ts'
+
 import type { MSAViewerProps } from './components/MSAViewer.tsx'
 import type { ColorScheme, Highlight } from './types.ts'
 
@@ -7,7 +9,7 @@ export function colorSchemeSnapshot(scheme: ColorScheme | undefined) {
   return typeof scheme === 'string'
     ? { colorSchemeName: scheme }
     : scheme
-      ? { customColorScheme: scheme.map }
+      ? { customColorScheme: letterColors(scheme) }
       : {}
 }