@genome-spy/core 0.72.0 → 0.74.0

package/dist/src/genomeSpy/interactionController.js

@@ -1,11 +1,13 @@
 import UnitView from "../view/unitView.js";
 import { VISIT_STOP } from "../view/view.js";
 import { readPickingPixel } from "../gl/webGLHelper.js";
-import InteractionEvent from "../utils/interactionEvent.js";
 import Inertia, { makeEventTemplate } from "../utils/inertia.js";
 import Point from "../view/layout/point.js";
 import { isStillZooming } from "../view/zoom.js";
 import createTooltipContext from "../tooltip/tooltipContext.js";
+import { FREEZE_INTERACTION_CLASS_NAME } from "../utils/ui/tooltip.js";
+import InteractionDispatcher from "./interactionDispatcher.js";
+import CursorManager from "./cursorManager.js";
 
 export default class InteractionController {
     /** @type {import("../view/view.js").default} */
@@ -24,6 +26,10 @@ export default class InteractionController {
     #renderPickingFramebuffer;
     /** @type {() => number} */
     #getDevicePixelRatio;
+    /** @type {InteractionDispatcher} */
+    #interactionDispatcher;
+    /** @type {CursorManager} */
+    #cursorManager;
     /**
      * @type {{ mark: import("../marks/mark.js").default, datum: import("../data/flowNode.js").Datum, uniqueId: number }}
      */
@@ -32,8 +38,14 @@ export default class InteractionController {
     #wheelInertia;
     /** @type {Point} */
     #mouseDownCoords;
+    /** @type {Point | undefined} */
+    #lastPointerPoint;
     /** @type {boolean} */
     #tooltipUpdateRequested;
+    /** @type {number} */
+    #hoverTrackingSuspensionCount;
+    /** @type {boolean} */
+    #postRenderHoverRefreshRequested;
     /**
      * @param {object} options
      * @param {import("../view/view.js").default} options.viewRoot
@@ -63,6 +75,8 @@ export default class InteractionController {
         this.#tooltipHandlers = tooltipHandlers;
         this.#renderPickingFramebuffer = renderPickingFramebuffer;
         this.#getDevicePixelRatio = getDevicePixelRatio;
+        this.#interactionDispatcher = new InteractionDispatcher({ viewRoot });
+        this.#cursorManager = new CursorManager({ canvas: glHelper.canvas });
 
         /**
          * Currently hovered mark and datum
@@ -74,19 +88,104 @@ export default class InteractionController {
 
         /** @type {Point} */
         this.#mouseDownCoords = undefined;
+        this.#lastPointerPoint = undefined;
 
         this.#tooltipUpdateRequested = false;
+        this.#hoverTrackingSuspensionCount = 0;
+        this.#postRenderHoverRefreshRequested = false;
     }
 
     getCurrentHover() {
         return this.#currentHover;
     }
 
-    registerMouseEvents() {
+    suspendHoverTracking() {
+        this.#hoverTrackingSuspensionCount++;
+        this.#tooltip.clear();
+        this.#tooltipUpdateRequested = false;
+    }
+
+    /**
+     * @param {MouseEvent} [mouseEvent]
+     */
+    resumeHoverTracking(mouseEvent) {
+        if (this.#hoverTrackingSuspensionCount <= 0) {
+            return;
+        }
+
+        this.#hoverTrackingSuspensionCount--;
+        if (this.#hoverTrackingSuspensionCount > 0) {
+            return;
+        }
+
+        this.#tooltip.clear();
+        this.#tooltipUpdateRequested = false;
+
+        if (this.#isInteractionFrozen()) {
+            return;
+        }
+
+        if (mouseEvent) {
+            const point = this.#toCanvasPoint(mouseEvent);
+            this.#lastPointerPoint = point;
+            if (this.#isInsideCanvas(point)) {
+                this.#refreshHover(point);
+                this.#cursorManager.update({
+                    target: this.#interactionDispatcher.getCurrentTarget(),
+                    hover: this.#currentHover,
+                });
+                return;
+            }
+
+            this.#interactionDispatcher.handlePointerLeave(mouseEvent);
+        } else if (
+            this.#lastPointerPoint &&
+            this.#isInsideCanvas(this.#lastPointerPoint)
+        ) {
+            this.#refreshHover(this.#lastPointerPoint);
+            this.#cursorManager.update({
+                target: this.#interactionDispatcher.getCurrentTarget(),
+                hover: this.#currentHover,
+            });
+            return;
+        }
+
+        this.#currentHover = null;
+        this.#cursorManager.clear();
+    }
+
+    registerInteractionEvents() {
         const canvas = this.#glHelper.canvas;
 
         let lastWheelEvent = performance.now();
         let longPressTriggered = false;
+        /** @type {{ pointerCount: 1 | 2, centerX: number, centerY: number, distance: number } | undefined} */
+        let previousTouchGesture;
+
+        /**
+         * @param {Point} point
+         * @param {import("../utils/interactionEvent.js").InteractionUiEvent} uiEvent
+         * @returns {import("../utils/interaction.js").default}
+         */
+        const dispatchInteraction = (point, uiEvent) => {
+            const interaction = this.#interactionDispatcher.dispatch(
+                point,
+                uiEvent
+            );
+
+            if (!this.#tooltipUpdateRequested) {
+                this.#tooltip.clear();
+            }
+
+            if (uiEvent instanceof MouseEvent && uiEvent.type !== "mouseout") {
+                this.#cursorManager.update({
+                    target: interaction.target,
+                    hover: this.#currentHover,
+                });
+            }
+
+            return interaction;
+        };
 
         /** @param {Event} event */
         const listener = (event) => {
@@ -94,13 +193,21 @@ export default class InteractionController {
             const wheeling = now - lastWheelEvent < 200;
 
             if (event instanceof MouseEvent) {
-                const rect = canvas.getBoundingClientRect();
-                const point = new Point(
-                    event.clientX - rect.left - canvas.clientLeft,
-                    event.clientY - rect.top - canvas.clientTop
-                );
+                if (
+                    event.type !== "contextmenu" &&
+                    this.#isInteractionFrozen()
+                ) {
+                    return;
+                }
+
+                const point = this.#toCanvasPoint(event);
+                this.#lastPointerPoint = point;
 
-                if (event.type == "mousemove" && !wheeling) {
+                if (
+                    event.type == "mousemove" &&
+                    !wheeling &&
+                    this.#hoverTrackingSuspensionCount === 0
+                ) {
                     this.#tooltip.handleMouseMove(event);
                     this.#tooltipUpdateRequested = false;
 
@@ -117,13 +224,7 @@ export default class InteractionController {
                  * @param {MouseEvent} dispatchedEvent
                  */
                 const dispatchEvent = (dispatchedEvent) => {
-                    this.#viewRoot.propagateInteractionEvent(
-                        new InteractionEvent(point, dispatchedEvent)
-                    );
-
-                    if (!this.#tooltipUpdateRequested) {
-                        this.#tooltip.clear();
-                    }
+                    dispatchInteraction(point, dispatchedEvent);
                 };
 
                 if (event.type != "wheel") {
@@ -156,26 +257,41 @@ export default class InteractionController {
 
                         this.#wheelInertia.cancel();
                     } else {
-                        // Vertical wheeling zooms.
-                        // We use inertia to generate fake wheel events for smoother zooming
-
-                        const template = makeEventTemplate(wheelEvent);
-
-                        this.#wheelInertia.setMomentum(
-                            wheelEvent.deltaY * (wheelEvent.deltaMode ? 80 : 1),
-                            (delta) => {
-                                const e = new WheelEvent("wheel", {
-                                    ...template,
-                                    deltaMode: 0,
-                                    deltaX: 0,
-                                    deltaY: delta,
-                                });
-                                dispatchEvent(e);
-                            }
-                        );
-
-                        wheelEvent.preventDefault();
-                        return;
+                        // We must decide on the native wheel event whether to
+                        // call preventDefault() (to block page scrolling).
+                        // This probe asks the pointed view hierarchy to claim
+                        // wheel ownership without running real wheel side
+                        // effects first. Inertia is layered on top of that
+                        // decision and is not the reason for the probe.
+                        const probeEvent = dispatchInteraction(point, {
+                            type: "wheelclaimprobe",
+                        });
+
+                        if (probeEvent.wheelClaimed) {
+                            // Vertical wheeling zooms.
+                            // We use inertia to generate fake wheel events for smoother zooming
+
+                            const template = makeEventTemplate(wheelEvent);
+
+                            this.#wheelInertia.setMomentum(
+                                wheelEvent.deltaY *
+                                    (wheelEvent.deltaMode ? 80 : 1),
+                                (delta) => {
+                                    const e = new WheelEvent("wheel", {
+                                        ...template,
+                                        deltaMode: 0,
+                                        deltaX: 0,
+                                        deltaY: delta,
+                                    });
+                                    dispatchEvent(e);
+                                }
+                            );
+
+                            wheelEvent.preventDefault();
+                            return;
+                        } else {
+                            this.#wheelInertia.cancel();
+                        }
                     }
                 }
 
@@ -212,7 +328,17 @@ export default class InteractionController {
                     this.#mouseDownCoords?.subtract(Point.fromMouseEvent(event))
                         .length < 3
                 ) {
-                    dispatchEvent(event);
+                    const interaction = dispatchInteraction(point, event);
+
+                    if (
+                        event.type == "dblclick" &&
+                        this.#hoverTrackingSuspensionCount === 0 &&
+                        this.#isInsideCanvas(point)
+                    ) {
+                        this.#scheduleHoverRefreshAfterRender();
+                    }
+
+                    return interaction;
                 }
             }
         };
@@ -223,11 +349,168 @@ export default class InteractionController {
             "wheel",
             "click",
             "mousemove",
-            "gesturechange",
             "contextmenu",
             "dblclick",
         ].forEach((type) => canvas.addEventListener(type, listener));
 
+        /**
+         * @param {number} clientX
+         * @param {number} clientY
+         */
+        const toCanvasPoint = (clientX, clientY) => {
+            const rect = canvas.getBoundingClientRect();
+            return new Point(
+                clientX - rect.left - canvas.clientLeft,
+                clientY - rect.top - canvas.clientTop
+            );
+        };
+
+        /**
+         * @param {TouchList} touches
+         */
+        const readTouchGesture = (touches) => {
+            if (touches.length <= 0) {
+                return;
+            }
+
+            const first = touches[0];
+
+            if (touches.length === 1) {
+                return {
+                    pointerCount: /** @type {1} */ (1),
+                    centerX: first.clientX,
+                    centerY: first.clientY,
+                    distance: 0,
+                };
+            }
+
+            const second = touches[1];
+            return {
+                pointerCount: /** @type {2} */ (2),
+                centerX: (first.clientX + second.clientX) / 2,
+                centerY: (first.clientY + second.clientY) / 2,
+                distance: getClientDistance(first, second),
+            };
+        };
+
+        /**
+         * @param {number} x
+         * @param {number} y
+         * @param {"move" | "end"} phase
+         * @param {1 | 2} pointerCount
+         * @param {number} xDelta
+         * @param {number} yDelta
+         * @param {number} zDelta
+         */
+        const dispatchTouchGestureEvent = (
+            x,
+            y,
+            phase,
+            pointerCount,
+            xDelta,
+            yDelta,
+            zDelta
+        ) => {
+            const point = toCanvasPoint(x, y);
+            dispatchInteraction(point, {
+                type: "touchgesture",
+                phase,
+                pointerCount,
+                xDelta,
+                yDelta,
+                zDelta,
+            });
+        };
+
+        /**
+         * @param {TouchEvent} touchEvent
+         */
+        const handleTouchStartOrMove = (touchEvent) => {
+            touchEvent.preventDefault();
+            this.#wheelInertia.cancel();
+            this.#tooltipUpdateRequested = false;
+
+            const currentGesture = readTouchGesture(touchEvent.touches);
+            if (!currentGesture) {
+                previousTouchGesture = undefined;
+                return;
+            }
+
+            if (
+                !previousTouchGesture ||
+                previousTouchGesture.pointerCount !==
+                    currentGesture.pointerCount
+            ) {
+                previousTouchGesture = currentGesture;
+                return;
+            }
+
+            const xDelta =
+                currentGesture.centerX - previousTouchGesture.centerX;
+            const yDelta =
+                currentGesture.centerY - previousTouchGesture.centerY;
+            const zDelta =
+                currentGesture.pointerCount === 2
+                    ? pinchDistanceToZoomDelta(
+                          previousTouchGesture.distance,
+                          currentGesture.distance
+                      )
+                    : 0;
+
+            if (
+                (xDelta !== 0 || yDelta !== 0 || zDelta !== 0) &&
+                Number.isFinite(xDelta) &&
+                Number.isFinite(yDelta) &&
+                Number.isFinite(zDelta)
+            ) {
+                dispatchTouchGestureEvent(
+                    previousTouchGesture.centerX,
+                    previousTouchGesture.centerY,
+                    "move",
+                    currentGesture.pointerCount,
+                    xDelta,
+                    yDelta,
+                    zDelta
+                );
+            }
+
+            previousTouchGesture = currentGesture;
+        };
+
+        /**
+         * @param {TouchEvent} touchEvent
+         */
+        const handleTouchEndOrCancel = (touchEvent) => {
+            touchEvent.preventDefault();
+            this.#tooltipUpdateRequested = false;
+            if (previousTouchGesture && touchEvent.touches.length === 0) {
+                dispatchTouchGestureEvent(
+                    previousTouchGesture.centerX,
+                    previousTouchGesture.centerY,
+                    "end",
+                    previousTouchGesture.pointerCount,
+                    0,
+                    0,
+                    0
+                );
+            }
+
+            previousTouchGesture = readTouchGesture(touchEvent.touches);
+        };
+
+        canvas.addEventListener("touchstart", handleTouchStartOrMove, {
+            passive: false,
+        });
+        canvas.addEventListener("touchmove", handleTouchStartOrMove, {
+            passive: false,
+        });
+        canvas.addEventListener("touchend", handleTouchEndOrCancel, {
+            passive: false,
+        });
+        canvas.addEventListener("touchcancel", handleTouchEndOrCancel, {
+            passive: false,
+        });
+
         canvas.addEventListener("mousedown", (/** @type {MouseEvent} */ e) => {
             this.#mouseDownCoords = Point.fromMouseEvent(e);
             if (this.#tooltip.sticky) {
@@ -244,7 +527,10 @@ export default class InteractionController {
                 document.addEventListener(
                     "mouseup",
                     () => this.#tooltip.popEnabledState(),
-                    { once: true }
+                    {
+                        once: true,
+                        capture: true,
+                    }
                 );
                 this.#tooltip.pushEnabledState(false);
             };
@@ -270,12 +556,103 @@ export default class InteractionController {
             event.stopPropagation()
         );
 
-        canvas.addEventListener("mouseout", () => {
+        canvas.addEventListener("mouseout", (event) => {
+            if (this.#isInteractionFrozen()) {
+                return;
+            }
+
+            if (this.#hoverTrackingSuspensionCount > 0) {
+                this.#tooltip.clear();
+                this.#tooltipUpdateRequested = false;
+                return;
+            }
+
+            this.#interactionDispatcher.handlePointerLeave(
+                /** @type {MouseEvent} */ (event)
+            );
+            this.#cursorManager.clear();
             this.#tooltip.clear();
             this.#currentHover = null;
         });
     }
 
+    /**
+     * @param {MouseEvent} event
+     */
+    #toCanvasPoint(event) {
+        const canvas = this.#glHelper.canvas;
+        const rect = canvas.getBoundingClientRect();
+        return new Point(
+            event.clientX - rect.left - canvas.clientLeft,
+            event.clientY - rect.top - canvas.clientTop
+        );
+    }
+
+    /**
+     * @param {Point} point
+     */
+    #isInsideCanvas(point) {
+        const canvas = this.#glHelper.canvas;
+        return (
+            point.x >= 0 &&
+            point.y >= 0 &&
+            point.x <= canvas.clientWidth &&
+            point.y <= canvas.clientHeight
+        );
+    }
+
+    /**
+     * @param {Point} point
+     */
+    #refreshHover(point) {
+        if (!isStillZooming()) {
+            this.#renderPickingFramebuffer();
+            this.#handlePicking(point.x, point.y);
+        }
+    }
+
+    #scheduleHoverRefreshAfterRender() {
+        if (this.#postRenderHoverRefreshRequested) {
+            return;
+        }
+
+        this.#postRenderHoverRefreshRequested = true;
+        this.#animator.requestRender();
+        window.requestAnimationFrame(() => {
+            this.#postRenderHoverRefreshRequested = false;
+
+            if (
+                this.#hoverTrackingSuspensionCount > 0 ||
+                this.#isInteractionFrozen()
+            ) {
+                return;
+            }
+
+            const point = this.#lastPointerPoint;
+            if (!point || !this.#isInsideCanvas(point)) {
+                this.#currentHover = null;
+                this.#cursorManager.clear();
+                return;
+            }
+
+            this.#tooltip.clear();
+            this.#tooltipUpdateRequested = false;
+            this.#refreshHover(point);
+            this.#cursorManager.update({
+                target: this.#interactionDispatcher.getCurrentTarget(),
+                hover: this.#currentHover,
+            });
+        });
+    }
+
+    #isInteractionFrozen() {
+        return (
+            typeof document !== "undefined" &&
+            !!document.body &&
+            document.body.classList.contains(FREEZE_INTERACTION_CLASS_NAME)
+        );
+    }
+
     /**
      * @param {number} x
      * @param {number} y
@@ -336,7 +713,7 @@ export default class InteractionController {
 
                 const tooltipProps = mark.properties.tooltip;
 
-                if (tooltipProps !== null) {
+                if (tooltipProps !== null && tooltipProps !== false) {
                     const handlerName = tooltipProps?.handler ?? "default";
                     const handler = this.#tooltipHandlers[handlerName];
                     if (!handler) {
@@ -375,3 +752,34 @@ export default class InteractionController {
         }
     }
 }
+
+/**
+ * @typedef {{clientX: number, clientY: number}} ClientPointLike
+ */
+
+/**
+ * Returns euclidean distance between two client-space points.
+ *
+ * @param {ClientPointLike} a
+ * @param {ClientPointLike} b
+ */
+function getClientDistance(a, b) {
+    const dx = b.clientX - a.clientX;
+    const dy = b.clientY - a.clientY;
+    return Math.hypot(dx, dy);
+}
+
+/**
+ * Converts a pinch distance ratio to a zDelta used by interactionToZoom:
+ * scaleFactor = 2 ** zDelta.
+ *
+ * @param {number} previousDistance
+ * @param {number} currentDistance
+ */
+function pinchDistanceToZoomDelta(previousDistance, currentDistance) {
+    if (previousDistance <= 0 || currentDistance <= 0) {
+        return 0;
+    }
+
+    return Math.log2(previousDistance / currentDistance);
+}

package/dist/src/genomeSpy/interactionDispatcher.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Dispatches `Interaction` objects through the view hierarchy and synthesizes
+ * subtree-level pointer transition events.
+ *
+ * The dispatcher keeps track of the previously hovered target path and
+ * compares it with the current one on every `mousemove`. From that diff it
+ * emits:
+ * - `mouseleave` for views that are no longer in the pointed subtree
+ * - `mouseenter` for views that have newly entered the pointed subtree
+ *
+ * This is intentionally closer to `mouseenter` / `mouseleave` semantics than
+ * DOM `mouseover` / `mouseout`. Moving between descendants inside the same
+ * subtree does not cause the ancestor to leave and re-enter.
+ *
+ * `dispatch()` handles ordinary event propagation and updates the current
+ * pointed target. `handlePointerLeave()` is used when the pointer leaves the
+ * canvas entirely, in which case the dispatcher emits `mouseleave` for the
+ * whole previously hovered path and clears its tracked state.
+ *
+ * The dispatcher does not do hit testing itself. It relies on views to route
+ * the incoming interaction and set `interaction.target` during propagation.
+ */
+export default class InteractionDispatcher {
+    /**
+     * @param {object} options
+     * @param {import("../view/view.js").default} options.viewRoot
+     */
+    constructor({ viewRoot }: {
+        viewRoot: import("../view/view.js").default;
+    });
+    /**
+     * Dispatches an interaction through the view tree and updates the tracked
+     * hover path for transition synthesis.
+     *
+     * @param {import("../view/layout/point.js").default} point
+     * @param {import("../utils/interactionEvent.js").InteractionUiEvent} uiEvent
+     * @returns {Interaction}
+     */
+    dispatch(point: import("../view/layout/point.js").default, uiEvent: import("../utils/interactionEvent.js").InteractionUiEvent): Interaction;
+    /**
+     * Dispatches mouseleave transitions when the pointer leaves the canvas.
+     *
+     * @param {import("../utils/interactionEvent.js").InteractionUiEvent} uiEvent
+     */
+    handlePointerLeave(uiEvent: import("../utils/interactionEvent.js").InteractionUiEvent): void;
+    getCurrentTarget(): import("../view/view.js").default<import("../spec/view.js").ViewSpec>;
+    #private;
+}
+import Interaction from "../utils/interaction.js";
+//# sourceMappingURL=interactionDispatcher.d.ts.map

package/dist/src/genomeSpy/interactionDispatcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interactionDispatcher.d.ts","sourceRoot":"","sources":["../../../src/genomeSpy/interactionDispatcher.js"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH;IAUI;;;OAGG;IACH,0BAFG;QAAmD,QAAQ,EAAnD,OAAO,iBAAiB,EAAE,OAAO;KAC3C,EAGA;IAED;;;;;;;OAOG;IACH,gBAJW,OAAO,yBAAyB,EAAE,OAAO,WACzC,OAAO,8BAA8B,EAAE,kBAAkB,GACvD,WAAW,CAavB;IAED;;;;OAIG;IACH,4BAFW,OAAO,8BAA8B,EAAE,kBAAkB,QAiBnE;IAED,0FAEC;;CAmHJ;wBA1MuB,yBAAyB"}