@genome-spy/core 0.72.0 → 0.73.0

package/dist/src/view/zoom.js

@@ -9,13 +9,27 @@
 
 import { makeLerpSmoother } from "../utils/animator.js";
 import RingBuffer from "../utils/ringBuffer.js";
+import { isTouchGestureEvent } from "../utils/interactionEvent.js";
 import Point from "./layout/point.js";
 
-/** @type {ReturnType<typeof makeLerpSmoother>} */
-let smoother;
+/**
+ * @typedef {object} ZoomInteractionState
+ * @prop {ReturnType<typeof makeLerpSmoother>} smoother
+ * @prop {RingBuffer<{point: Point, timestamp: number}>} touchPanEventBuffer
+ * @prop {Point | undefined} touchPanLastPoint
+ * @prop {0 | 1 | 2} touchPanPointerCount
+ */
 
 let lastTimestamp = 0;
 
+/** @type {WeakMap<import("../utils/animator.js").default, ZoomInteractionState>} */
+const zoomInteractionStates = new WeakMap();
+
+/** @type {ZoomInteractionState} */
+const fallbackInteractionState = createInteractionState();
+
+const MIN_LINK_ENDPOINT_SNAP_DISTANCE = 6;
+
 export function markZoomActivity() {
     lastTimestamp = performance.now();
 }
@@ -35,26 +49,25 @@ function recordTimeStamp(fn) {
     // @ts-ignore
     return function (...args) {
         markZoomActivity();
-        fn(...args);
+        return fn(...args);
     };
 }
 
 /**
  * @param {import("../utils/interactionEvent.js").default} event
  * @param {import("./layout/rectangle.js").default} coords
- * @param {(zoomEvent: ZoomEvent) => void} handleZoom
+ * @param {(zoomEvent: ZoomEvent) => boolean | void} handleZoom
  * @param {import("../types/viewContext.js").Hover} [hover]
  * @param {import("../utils/animator.js").default} [animator]
  */
 export function interactionToZoom(event, coords, handleZoom, hover, animator) {
     handleZoom = recordTimeStamp(handleZoom);
+    const interactionState = getInteractionState(animator);
 
     if (event.type == "wheel") {
         // TODO: Wheel-zoom inertia should probably be moved here and the faked wheel
         // events in genomeSpy.js and inertia.js should be retired.
 
-        event.uiEvent.preventDefault(); // TODO: Only if there was something zoomable
-
         const wheelEvent = /** @type {WheelEvent} */ (event.uiEvent);
         const wheelMultiplier = wheelEvent.deltaMode ? 120 : 1;
 
@@ -63,46 +76,73 @@ export function interactionToZoom(event, coords, handleZoom, hover, animator) {
         }
 
         // Stop drag-to-pan inertia
-        smoother?.stop();
+        interactionState.smoother?.stop();
 
         let { x, y } = event.point;
 
         // Snapping to the hovered item:
-        // We find the currently hovered object and move the pointed coordinates
-        // to its center if the mark has only primary positional channels.
-        // This allows the user to rapidly zoom closer without having to
-        // continuously adjust the cursor position.
+        // - Link marks: snap to the nearest endpoint when cursor is near one.
+        // - Other marks: snap to the center if only primary positional channels exist.
+        // This allows rapid zooming without constantly adjusting cursor position.
 
         if (hover) {
-            const e = hover.mark.encoders;
-            if (e.x && !e.x2 && !e.x.constant) {
-                x = +e.x(hover.datum) * coords.width + coords.x;
-            }
-            if (e.y && !e.y2 && !e.y.constant) {
-                y = (1 - +e.y(hover.datum)) * coords.height + coords.y;
+            const linkEndpoint = getLinkEndpointSnapPoint(
+                event.point,
+                coords,
+                hover
+            );
+
+            if (linkEndpoint) {
+                if (linkEndpoint.x !== undefined) {
+                    x = linkEndpoint.x;
+                }
+                if (linkEndpoint.y !== undefined) {
+                    y = linkEndpoint.y;
+                }
+            } else {
+                const e = hover.mark.encoders;
+                if (e.x && !e.x2 && !e.x.constant) {
+                    x =
+                        getEncoderUnitPosition(e.x, hover.datum) *
+                            coords.width +
+                        coords.x;
+                }
+                if (e.y && !e.y2 && !e.y.constant) {
+                    y =
+                        (1 - getEncoderUnitPosition(e.y, hover.datum)) *
+                            coords.height +
+                        coords.y;
+                }
             }
         }
 
+        let handled = false;
         if (Math.abs(wheelEvent.deltaX) < Math.abs(wheelEvent.deltaY)) {
-            handleZoom({
-                x,
-                y,
-                xDelta: 0,
-                yDelta: 0,
-                zDelta: (wheelEvent.deltaY * wheelMultiplier) / 300,
-            });
+            handled =
+                handleZoom({
+                    x,
+                    y,
+                    xDelta: 0,
+                    yDelta: 0,
+                    zDelta: (wheelEvent.deltaY * wheelMultiplier) / 300,
+                }) === true;
         } else {
-            handleZoom({
-                x,
-                y,
-                xDelta: -wheelEvent.deltaX * wheelMultiplier,
-                yDelta: 0,
-                zDelta: 0,
-            });
+            handled =
+                handleZoom({
+                    x,
+                    y,
+                    xDelta: -wheelEvent.deltaX * wheelMultiplier,
+                    yDelta: 0,
+                    zDelta: 0,
+                }) === true;
+        }
+
+        if (handled) {
+            wheelEvent.preventDefault();
         }
     } else if (event.type == "mousedown" && event.mouseEvent.button === 0) {
-        if (smoother) {
-            smoother.stop();
+        if (interactionState.smoother) {
+            interactionState.smoother.stop();
         }
 
         /** @type {RingBuffer<{point: Point, timestamp: number}>} */
@@ -132,63 +172,320 @@ export function interactionToZoom(event, coords, handleZoom, hover, animator) {
             prevPoint = point;
         };
 
-        const animateInertia = () => {
-            const lastMillisToInclude = 160;
+        const onMouseup = () => {
+            document.removeEventListener("mousemove", onMousemove);
+            document.removeEventListener("mouseup", onMouseup);
+            startPanInertia(
+                interactionState,
+                eventBuffer,
+                prevPoint,
+                handleZoom,
+                animator,
+                { minSampleCount: 5 }
+            );
+        };
 
-            const now = performance.now();
-            const arr = eventBuffer
-                .get()
-                .filter((p) => now - p.timestamp < lastMillisToInclude);
+        document.addEventListener("mouseup", onMouseup, false);
+        document.addEventListener("mousemove", onMousemove, false);
+    } else if (event.type == "touchgesture") {
+        if (!isTouchGestureEvent(event.uiEvent)) {
+            return;
+        }
 
-            if (arr.length < 5 || !animator || isDecelerating(arr)) {
-                return;
+        const touchGesture = event.uiEvent;
+        const { xDelta, yDelta, zDelta } = touchGesture;
+
+        if (touchGesture.phase === "end") {
+            if (touchGesture.pointerCount === 1) {
+                startPanInertia(
+                    interactionState,
+                    interactionState.touchPanEventBuffer,
+                    interactionState.touchPanLastPoint,
+                    handleZoom,
+                    animator,
+                    {
+                        minSampleCount: 2,
+                        minVelocityPxPerMs: 0.03,
+                    }
+                );
             }
+            resetTouchPanState(interactionState);
+            return;
+        }
+
+        if (
+            interactionState.touchPanPointerCount !== touchGesture.pointerCount
+        ) {
+            resetTouchPanState(interactionState);
+            interactionState.touchPanPointerCount = touchGesture.pointerCount;
+        }
 
-            const a = arr.at(-1);
-            const b = arr[0];
+        const currentPoint = new Point(
+            event.point.x + xDelta,
+            event.point.y + yDelta
+        );
+        interactionState.touchPanLastPoint = currentPoint;
 
-            const v = a.point
-                .subtract(b.point)
-                .multiply(1 / (a.timestamp - b.timestamp));
+        if (touchGesture.pointerCount === 1 && (xDelta !== 0 || yDelta !== 0)) {
+            interactionState.touchPanEventBuffer.push({
+                point: currentPoint,
+                timestamp: performance.now(),
+            });
+        }
 
-            let x = prevPoint.x;
-            let y = prevPoint.y;
+        if (xDelta === 0 && yDelta === 0 && zDelta === 0) {
+            return;
+        }
 
-            smoother = makeLerpSmoother(
-                animator,
-                (p) => {
-                    handleZoom({
-                        x: p.x,
-                        y: p.y,
-                        xDelta: x - p.x,
-                        yDelta: y - p.y,
-                        zDelta: 0,
-                    });
-                    x = p.x;
-                    y = p.y;
-                },
-                150,
-                0.5,
-                { x, y }
-            );
+        // Stop drag-to-pan inertia when touch gestures take over.
+        interactionState.smoother?.stop();
 
-            smoother({
-                x: prevPoint.x - v.x * 250,
-                y: prevPoint.y - v.y * 250,
-            });
-        };
+        handleZoom({
+            x: event.point.x,
+            y: event.point.y,
+            xDelta,
+            yDelta,
+            zDelta,
+        });
+    }
+}
 
-        const onMouseup = () => {
-            document.removeEventListener("mousemove", onMousemove);
-            document.removeEventListener("mouseup", onMouseup);
-            animateInertia();
+/**
+ * @param {Point} point
+ * @param {import("./layout/rectangle.js").default} coords
+ * @param {import("../types/viewContext.js").Hover} hover
+ */
+function getLinkEndpointSnapPoint(point, coords, hover) {
+    if (hover.mark.getType() !== "link") {
+        return undefined;
+    }
+
+    const e = hover.mark.encoders;
+    if (!(e.x && e.y && e.x2 && e.y2)) {
+        return undefined;
+    }
+
+    const snapX = !e.x.constant && !e.x2.constant;
+    const snapY = !e.y.constant && !e.y2.constant;
+
+    if (!snapX && !snapY) {
+        return undefined;
+    }
+
+    const x1 =
+        getEncoderUnitPosition(e.x, hover.datum) * coords.width + coords.x;
+    const y1 =
+        (1 - getEncoderUnitPosition(e.y, hover.datum)) * coords.height +
+        coords.y;
+    const x2 =
+        getEncoderUnitPosition(e.x2, hover.datum) * coords.width + coords.x;
+    const y2 =
+        (1 - getEncoderUnitPosition(e.y2, hover.datum)) * coords.height +
+        coords.y;
+
+    let d1Squared = 0;
+    let d2Squared = 0;
+
+    if (snapX) {
+        d1Squared += (point.x - x1) ** 2;
+        d2Squared += (point.x - x2) ** 2;
+    }
+
+    if (snapY) {
+        d1Squared += (point.y - y1) ** 2;
+        d2Squared += (point.y - y2) ** 2;
+    }
+
+    const size = e.size ? +e.size(hover.datum) : 0;
+    const snapDistance = Number.isFinite(size)
+        ? Math.max(size, MIN_LINK_ENDPOINT_SNAP_DISTANCE)
+        : MIN_LINK_ENDPOINT_SNAP_DISTANCE;
+    const snapDistanceSquared = snapDistance * snapDistance;
+
+    if (Math.min(d1Squared, d2Squared) > snapDistanceSquared) {
+        return undefined;
+    }
+
+    if (d1Squared <= d2Squared) {
+        return {
+            x: snapX ? x1 : undefined,
+            y: snapY ? y1 : undefined,
+        };
+    } else {
+        return {
+            x: snapX ? x2 : undefined,
+            y: snapY ? y2 : undefined,
         };
+    }
+}
 
-        document.addEventListener("mouseup", onMouseup, false);
-        document.addEventListener("mousemove", onMousemove, false);
+/**
+ * Returns channel position in unit coordinates using the same band placement
+ * convention as mark rendering.
+ *
+ * @param {import("../types/encoder.js").Encoder} encoder
+ * @param {import("../data/flowNode.js").Datum} datum
+ */
+function getEncoderUnitPosition(encoder, datum) {
+    const basePosition = +encoder(datum);
+    const scale = encoder.scale;
+
+    if (!scale) {
+        return basePosition;
+    }
+
+    const band = resolveBandPosition(encoder.channelDef);
+
+    if (scale.type === "band" || scale.type === "point") {
+        if (!Number.isFinite(band)) {
+            return basePosition;
+        }
+
+        const typedScale = /** @type {{ bandwidth: () => number }} */ (
+            /** @type {any} */ (scale)
+        );
+        return basePosition + typedScale.bandwidth() * band;
+    } else if (scale.type === "index" || scale.type === "locus") {
+        if (!Number.isFinite(band)) {
+            return basePosition;
+        }
+
+        const typedScale =
+            /** @type {{ step: () => number, align: () => number }} */ (
+                /** @type {any} */ (scale)
+            );
+        return basePosition + typedScale.step() * (band - typedScale.align());
+    } else {
+        return basePosition;
     }
 }
 
+/**
+ * @param {import("../spec/channel.js").ChannelDef} channelDef
+ */
+function resolveBandPosition(channelDef) {
+    if (channelDef && "band" in channelDef) {
+        return channelDef.band ?? 0.5;
+    } else {
+        return 0.5;
+    }
+}
+
+/**
+ * @returns {ZoomInteractionState}
+ */
+function createInteractionState() {
+    return {
+        smoother: undefined,
+        touchPanEventBuffer: new RingBuffer(30),
+        touchPanLastPoint: undefined,
+        touchPanPointerCount: 0,
+    };
+}
+
+/**
+ * @param {import("../utils/animator.js").default} [animator]
+ */
+function getInteractionState(animator) {
+    if (!animator) {
+        return fallbackInteractionState;
+    }
+
+    let state = zoomInteractionStates.get(animator);
+    if (!state) {
+        state = createInteractionState();
+        zoomInteractionStates.set(animator, state);
+    }
+
+    return state;
+}
+
+/**
+ * @param {ZoomInteractionState} interactionState
+ */
+function resetTouchPanState(interactionState) {
+    interactionState.touchPanEventBuffer = new RingBuffer(30);
+    interactionState.touchPanLastPoint = undefined;
+    interactionState.touchPanPointerCount = 0;
+}
+
+/**
+ * @param {ZoomInteractionState} interactionState
+ * @param {RingBuffer<{point: Point, timestamp: number}>} eventBuffer
+ * @param {Point | undefined} lastPoint
+ * @param {(zoomEvent: ZoomEvent) => void} handleZoom
+ * @param {import("../utils/animator.js").default} [animator]
+ * @param {{minSampleCount?: number, minVelocityPxPerMs?: number}} [options]
+ */
+function startPanInertia(
+    interactionState,
+    eventBuffer,
+    lastPoint,
+    handleZoom,
+    animator,
+    options = {}
+) {
+    if (!animator || !lastPoint) {
+        return;
+    }
+
+    const minSampleCount = options.minSampleCount ?? 5;
+    const minVelocityPxPerMs = options.minVelocityPxPerMs ?? 0;
+    const lastMillisToInclude = 160;
+    const now = performance.now();
+    const arr = eventBuffer
+        .get()
+        .filter((point) => now - point.timestamp < lastMillisToInclude);
+
+    if (arr.length < minSampleCount) {
+        return;
+    }
+
+    if (arr.length >= 5 && isDecelerating(arr)) {
+        return;
+    }
+
+    const a = arr.at(-1);
+    const b = arr[0];
+    const v = a.point
+        .subtract(b.point)
+        .multiply(1 / (a.timestamp - b.timestamp));
+
+    if (!Number.isFinite(v.x) || !Number.isFinite(v.y)) {
+        return;
+    }
+
+    if (v.length < minVelocityPxPerMs) {
+        return;
+    }
+
+    let x = lastPoint.x;
+    let y = lastPoint.y;
+
+    interactionState.smoother = makeLerpSmoother(
+        animator,
+        (point) => {
+            handleZoom({
+                x: point.x,
+                y: point.y,
+                xDelta: x - point.x,
+                yDelta: y - point.y,
+                zDelta: 0,
+            });
+            x = point.x;
+            y = point.y;
+        },
+        150,
+        0.5,
+        { x, y }
+    );
+
+    interactionState.smoother({
+        x: lastPoint.x - v.x * 250,
+        y: lastPoint.y - v.y * 250,
+    });
+}
+
 /**
  * Split the array into two vectors and compare their lengths to find out if
  * the mouse movement is decelerating.

package/package.json

@@ -7,7 +7,7 @@
   },
   "contributors": [],
   "license": "MIT",
-  "version": "0.72.0",
+  "version": "0.73.0",
   "jsdelivr": "dist/bundle/index.js",
   "unpkg": "dist/bundle/index.js",
   "browser": "dist/bundle/index.js",
@@ -27,6 +27,7 @@
   },
   "scripts": {
     "dev": "node dev-server.mjs",
+    "capture:screenshots": "node scripts/captureScreenshots.mjs",
     "build": "rm -rf dist && mkdir -p dist && node scripts/build.mjs && vite build && npm run build:schema && npm run build:typings",
     "prepublishOnly": "npm run build",
     "test:tsc": "tsc -p tsconfig.json --noEmit",
@@ -50,6 +51,7 @@
     "@types/d3-scale": "^4.0.9",
     "d3-array": "^3.2.4",
     "d3-color": "^3.1.0",
+    "d3-dsv": "^3.0.1",
     "d3-ease": "^3.0.1",
     "d3-format": "^3.1.0",
     "events": "^3.3.0",
@@ -68,5 +70,5 @@
   "devDependencies": {
     "@types/long": "^4.0.1"
   },
-  "gitHead": "504e1d0f7c45c2324bb6b0ff7b9230829d60518e"
+  "gitHead": "925d6b740d4bbb3d28a8e6f4a869cfca60c58449"
 }