@genome-spy/core 0.73.0 → 0.75.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,13 @@ export default class InteractionController {
     #wheelInertia;
     /** @type {Point} */
     #mouseDownCoords;
-    /** @type {boolean} */
-    #tooltipUpdateRequested;
+    /** @type {Point | undefined} */
+    #lastPointerPoint;
+    #tooltipUpdateRequested = false;
+    #longPressPending = false;
+    #suppressTooltipUntilMouseMove = false;
+    #hoverTrackingSuspensionCount = 0;
+    #postRenderHoverRefreshRequested = false;
     /**
      * @param {object} options
      * @param {import("../view/view.js").default} options.viewRoot
@@ -63,6 +74,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,14 +87,72 @@ export default class InteractionController {
 
         /** @type {Point} */
         this.#mouseDownCoords = undefined;
-
-        this.#tooltipUpdateRequested = false;
+        this.#lastPointerPoint = undefined;
     }
 
     getCurrentHover() {
         return this.#currentHover;
     }
 
+    suspendHoverTracking() {
+        this.#hoverTrackingSuspensionCount++;
+        if (this.#longPressPending) {
+            return;
+        }
+
+        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;
 
@@ -93,17 +164,26 @@ export default class InteractionController {
         /**
          * @param {Point} point
          * @param {import("../utils/interactionEvent.js").InteractionUiEvent} uiEvent
-         * @returns {InteractionEvent}
+         * @returns {import("../utils/interaction.js").default}
          */
-        const dispatchInteractionEvent = (point, uiEvent) => {
-            const interactionEvent = new InteractionEvent(point, uiEvent);
-            this.#viewRoot.propagateInteractionEvent(interactionEvent);
+        const dispatchInteraction = (point, uiEvent) => {
+            const interaction = this.#interactionDispatcher.dispatch(
+                point,
+                uiEvent
+            );
 
-            if (!this.#tooltipUpdateRequested) {
+            if (!this.#tooltipUpdateRequested && !this.#longPressPending) {
                 this.#tooltip.clear();
             }
 
-            return interactionEvent;
+            if (uiEvent instanceof MouseEvent && uiEvent.type !== "mouseout") {
+                this.#cursorManager.update({
+                    target: interaction.target,
+                    hover: this.#currentHover,
+                });
+            }
+
+            return interaction;
         };
 
         /** @param {Event} event */
@@ -112,13 +192,22 @@ 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;
+                }
 
-                if (event.type == "mousemove" && !wheeling) {
+                const point = this.#toCanvasPoint(event);
+                this.#lastPointerPoint = point;
+
+                if (
+                    event.type == "mousemove" &&
+                    !wheeling &&
+                    this.#hoverTrackingSuspensionCount === 0
+                ) {
+                    this.#suppressTooltipUntilMouseMove = false;
                     this.#tooltip.handleMouseMove(event);
                     this.#tooltipUpdateRequested = false;
 
@@ -135,7 +224,7 @@ export default class InteractionController {
                  * @param {MouseEvent} dispatchedEvent
                  */
                 const dispatchEvent = (dispatchedEvent) => {
-                    dispatchInteractionEvent(point, dispatchedEvent);
+                    dispatchInteraction(point, dispatchedEvent);
                 };
 
                 if (event.type != "wheel") {
@@ -174,7 +263,7 @@ export default class InteractionController {
                         // 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 = dispatchInteractionEvent(point, {
+                        const probeEvent = dispatchInteraction(point, {
                             type: "wheelclaimprobe",
                         });
 
@@ -239,11 +328,97 @@ 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;
                 }
             }
         };
 
+        canvas.addEventListener("mousedown", (/** @type {MouseEvent} */ e) => {
+            this.#mouseDownCoords = Point.fromMouseEvent(e);
+            this.#longPressPending = false;
+            const hasModifier = e.shiftKey || e.ctrlKey || e.metaKey;
+
+            if (this.#tooltip.sticky) {
+                this.#tooltip.sticky = false;
+                this.#suppressTooltipUntilMouseMove = true;
+                this.#tooltip.clear();
+                // Dismiss the sticky tooltip before routing the press so the
+                // click only affects the tooltip state.
+                longPressTriggered = true;
+            } else {
+                longPressTriggered = false;
+            }
+
+            const disableTooltip = () => {
+                document.addEventListener(
+                    "mouseup",
+                    () => this.#tooltip.popEnabledState(),
+                    {
+                        once: true,
+                        capture: true,
+                    }
+                );
+                this.#tooltip.pushEnabledState(false);
+            };
+
+            // Right-click opens the context menu and disables tooltips.
+            // Left-button presses keep the current tooltip visible through the
+            // press; plain clicks may still promote it to sticky mode.
+            if (e.button == 2) {
+                disableTooltip();
+            } else if (e.button == 0 && this.#tooltip.visible) {
+                // Preserve the current tooltip through the press. Plain clicks
+                // may also escalate this state into a sticky tooltip.
+                this.#longPressPending = true;
+
+                /** @type {ReturnType<typeof setTimeout> | undefined} */
+                let timeout;
+                if (!hasModifier) {
+                    // Make tooltip sticky if the user long-presses
+                    timeout = setTimeout(() => {
+                        longPressTriggered = true;
+                        this.#longPressPending = false;
+                        this.#tooltip.sticky = true;
+                    }, 400);
+                }
+
+                /**
+                 * @param {boolean} clearTooltipOnMove
+                 */
+                const clear = (clearTooltipOnMove) => {
+                    clearTimeout(timeout);
+                    if (!this.#longPressPending) {
+                        return;
+                    }
+
+                    this.#longPressPending = false;
+                    if (
+                        clearTooltipOnMove &&
+                        this.#hoverTrackingSuspensionCount > 0
+                    ) {
+                        this.#tooltip.clear();
+                        this.#tooltipUpdateRequested = false;
+                    }
+                };
+                document.addEventListener("mouseup", () => clear(false), {
+                    once: true,
+                });
+                document.addEventListener("mousemove", () => clear(true), {
+                    once: true,
+                });
+            }
+        });
+
         [
             "mousedown",
             "mouseup",
@@ -313,7 +488,7 @@ export default class InteractionController {
             zDelta
         ) => {
             const point = toCanvasPoint(x, y);
-            dispatchInteractionEvent(point, {
+            dispatchInteraction(point, {
                 type: "touchgesture",
                 phase,
                 pointerCount,
@@ -412,54 +587,108 @@ export default class InteractionController {
             passive: false,
         });
 
-        canvas.addEventListener("mousedown", (/** @type {MouseEvent} */ e) => {
-            this.#mouseDownCoords = Point.fromMouseEvent(e);
-            if (this.#tooltip.sticky) {
-                this.#tooltip.sticky = false;
-                this.#tooltip.clear();
-                // A hack to prevent selection if the tooltip is sticky.
-                // Let the tooltip be destickified first.
-                longPressTriggered = true;
-            } else {
-                longPressTriggered = false;
-            }
+        // Prevent text selections etc while dragging
+        canvas.addEventListener("dragstart", (event) =>
+            event.stopPropagation()
+        );
 
-            const disableTooltip = () => {
-                document.addEventListener(
-                    "mouseup",
-                    () => this.#tooltip.popEnabledState(),
-                    { once: true }
-                );
-                this.#tooltip.pushEnabledState(false);
-            };
+        canvas.addEventListener("mouseout", (event) => {
+            if (this.#isInteractionFrozen()) {
+                return;
+            }
 
-            // Opening context menu or using modifier keys disables the tooltip
-            if (e.button == 2 || e.shiftKey || e.ctrlKey || e.metaKey) {
-                disableTooltip();
-            } else if (this.#tooltip.visible) {
-                // Make tooltip sticky if the user long-presses
-                const timeout = setTimeout(() => {
-                    longPressTriggered = true;
-                    this.#tooltip.sticky = true;
-                }, 400);
-
-                const clear = () => clearTimeout(timeout);
-                document.addEventListener("mouseup", clear, { once: true });
-                document.addEventListener("mousemove", clear, { once: true });
+            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;
         });
+    }
 
-        // Prevent text selections etc while dragging
-        canvas.addEventListener("dragstart", (event) =>
-            event.stopPropagation()
+    /**
+     * @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;
+            }
 
-        canvas.addEventListener("mouseout", () => {
             this.#tooltip.clear();
-            this.#currentHover = null;
+            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
@@ -520,7 +749,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) {
@@ -549,6 +778,10 @@ export default class InteractionController {
      * @template T
      */
     updateTooltip(datum, converter) {
+        if (this.#suppressTooltipUntilMouseMove) {
+            return;
+        }
+
         if (!this.#tooltipUpdateRequested || !datum) {
             this.#tooltip.updateWithDatum(datum, converter);
             this.#tooltipUpdateRequested = true;

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"}