@genome-spy/core 0.72.0 → 0.74.0

package/dist/src/view/gridView/gridChild.js

@@ -1,22 +1,29 @@
 import { isContinuous } from "vega-scale";
 import {
+    asEventConfig,
     asSelectionConfig,
     createIntervalSelection,
     isActiveIntervalSelection,
     isIntervalSelectionConfig,
     selectionContainsPoint,
 } from "../../selection/selection.js";
+import { createPrimitiveEventProxy } from "../../utils/interactionEvent.js";
 import AxisGridView from "../axisGridView.js";
 import AxisView, { CHANNEL_ORIENTS } from "../axisView.js";
 import LayerView from "../layerView.js";
 import Padding from "../layout/padding.js";
 import Point from "../layout/point.js";
 import Rectangle from "../layout/rectangle.js";
-import createTitle from "../title.js";
+import createTitle, { resolveTitleSpec } from "../title.js";
 import UnitView from "../unitView.js";
 import { markViewAsNonAddressable } from "../viewSelectors.js";
 import Scrollbar from "./scrollbar.js";
-import SelectionRect from "./selectionRect.js";
+import SelectionRect, { INTERVAL_DRAG_ACTIVE_PARAM } from "./selectionRect.js";
+import { normalizeIntervalForSelection } from "../../scales/selectionDomainUtils.js";
+import { zoomDomainByScaleType } from "../../scales/zoomDomainUtils.js";
+import { createEventFilterFunction } from "../../utils/expression.js";
+import { getConfiguredViewBackground } from "../../config/viewConfig.js";
+import { getConfiguredAxisDefaults } from "../../config/axisConfig.js";
 
 export default class GridChild {
     /**
@@ -58,12 +65,26 @@ export default class GridChild {
         /** @type {UnitView} */
         this.title = undefined;
 
+        /** @type {number} */
+        this.backgroundZindex = 0;
+
+        /** @type {number | undefined} */
+        this.backgroundStrokeZindex = undefined;
+
+        /** @type {number} */
+        this.titleZindex = 1;
+
         /** @type {Rectangle} */
         this.coords = Rectangle.ZERO;
 
         if (view.needsAxes.x || view.needsAxes.y) {
             const spec = view.spec;
-            const viewBackground = "view" in spec ? spec?.view : undefined;
+            const viewBackground = getConfiguredViewBackground(
+                view.getConfigScopes(),
+                "view" in spec ? spec.view : undefined
+            );
+            this.backgroundZindex = viewBackground?.zindex ?? 0;
+            this.backgroundStrokeZindex = viewBackground?.strokeZindex;
 
             const backgroundSpec = createBackground(viewBackground);
             if (backgroundSpec) {
@@ -99,7 +120,12 @@ export default class GridChild {
                 });
             }
 
-            const title = createTitle(view.spec.title);
+            const titleSpec = resolveTitleSpec(
+                view.spec.title,
+                view.getConfigScopes()
+            );
+            this.titleZindex = titleSpec?.zindex ?? 1;
+            const title = createTitle(titleSpec);
             if (title) {
                 const unitView = new UnitView(
                     title,
@@ -131,11 +157,6 @@ export default class GridChild {
     #setupIntervalSelection() {
         const view = this.view;
 
-        // TODO: Move to context
-        const setCursor = (/** @type {string} */ cursor) => {
-            this.view.context.glHelper.canvas.style.cursor = cursor;
-        };
-
         // TODO: If the child is a LayerView, selection params should be pulled from its children as well
         for (const [name, param] of view.paramRuntime.paramConfigs) {
             if (!("select" in param)) {
@@ -153,17 +174,53 @@ export default class GridChild {
             const scaleResolutions = Object.fromEntries(
                 channels.map((channel) => {
                     const resolution = this.view.getScaleResolution(channel);
-                    const scale = resolution?.getScale();
+                    const scaleType = resolution?.getResolvedScaleType();
 
-                    if (!scale || !isContinuous(scale.type)) {
+                    if (!resolution || !scaleType || !isContinuous(scaleType)) {
                         throw new Error(
-                            `No continuous scale found for interval selection param "${name}" on channel "${channel}"! Scale type is "${scale?.type ?? "none"}".`
+                            `No continuous scale found for interval selection param "${name}" on channel "${channel}"! Scale type is "${scaleType ?? "none"}".`
                         );
                     }
                     return [channel, resolution];
                 })
             );
 
+            const requiresShiftToBrush = channels.some((channel) =>
+                scaleResolutions[channel].isZoomable()
+            );
+
+            const eventConfig =
+                /** @type {import("../../spec/parameter.js").EventConfig} */ (
+                    select.on ??
+                        (requiresShiftToBrush
+                            ? {
+                                  type: "mousedown",
+                                  filter: "event.shiftKey",
+                              }
+                            : {
+                                  type: "mousedown",
+                              })
+                );
+
+            if (eventConfig.type !== "mousedown") {
+                throw new Error(
+                    `Interval selection param "${name}" currently supports only "mousedown" in "on".`
+                );
+            }
+
+            const eventPredicate = eventConfig.filter
+                ? createEventFilterFunction(eventConfig.filter)
+                : () => true;
+
+            const zoomEventConfig = resolveIntervalZoomEventConfig(
+                select.zoom,
+                requiresShiftToBrush,
+                name
+            );
+            const zoomEventPredicate = zoomEventConfig?.filter
+                ? createEventFilterFunction(zoomEventConfig.filter)
+                : () => true;
+
             if (this.selectionRect) {
                 throw new Error(
                     "Only one interval selection per container is currently allowed!"
@@ -213,7 +270,6 @@ export default class GridChild {
 
             const clearSelection = () => {
                 setter(createIntervalSelection(channels));
-                setCursor(null);
             };
 
             this.selectionRect = new SelectionRect(
@@ -221,6 +277,12 @@ export default class GridChild {
                 selectionExpr,
                 select.mark
             );
+            const setIntervalDragActive = (/** @type {boolean} */ active) => {
+                this.selectionRect.paramRuntime.setValue(
+                    INTERVAL_DRAG_ACTIVE_PARAM,
+                    active
+                );
+            };
 
             // WARNING! The following is an async method! Seems to work (by chance).
             // TODO: Should be called and awaited in a sensible place. Maybe provide some
@@ -277,7 +339,7 @@ export default class GridChild {
                 return Rectangle.create(a.x, a.y, b.x - a.x, b.y - a.y);
             };
 
-            view.addInteractionEventListener("mousedown", (coords, event) => {
+            view.addInteractionListener("mousedown", (event) => {
                 if (event.mouseEvent.button != 0) {
                     return;
                 }
@@ -291,7 +353,7 @@ export default class GridChild {
 
                 if (translatedRectangle) {
                     // Started dragging an existing selection
-                    setCursor("grabbing");
+                    setIntervalDragActive(true);
                     // Start of dragging should prevent click propagation so that
                     // no other selections or events are triggered.
                     preventNextClickPropagation = true;
@@ -304,7 +366,9 @@ export default class GridChild {
                         preventNextClickPropagation = true;
                     }
 
-                    const startSelection = event.mouseEvent.shiftKey;
+                    const startSelection = eventPredicate(
+                        event.proxiedMouseEvent
+                    );
 
                     if (startSelection) {
                         clearSelection();
@@ -312,12 +376,9 @@ export default class GridChild {
                     } else if (isActiveIntervalSelection(selectionExpr())) {
                         // If mouse button is released and there was a selection,
                         // it should be cleared unless the viewport was panned by dragging.
-                        /** @type {import("../view.js").InteractionEventListener} */
-                        const listener = (coords, event) => {
-                            view.removeInteractionEventListener(
-                                "mouseup",
-                                listener
-                            );
+                        /** @type {import("../view.js").InteractionListener} */
+                        const listener = (event) => {
+                            view.removeInteractionListener("mouseup", listener);
                             const mouseUpPoint = event.point;
 
                             // Retain selection if the viewport is panned by dragging
@@ -329,7 +390,7 @@ export default class GridChild {
                                 clearSelection();
                             }
                         };
-                        view.addInteractionEventListener("mouseup", listener);
+                        view.addInteractionListener("mouseup", listener);
                         return;
                     } else {
                         return;
@@ -338,6 +399,7 @@ export default class GridChild {
 
                 // Prevent panning interaction
                 event.stopPropagation();
+                view.context.suspendHoverTracking();
 
                 const start = event.point;
                 const viewOffset = Point.fromMouseEvent(
@@ -373,15 +435,9 @@ export default class GridChild {
 
                     for (const channel of channels) {
                         const scaleResolution = scaleResolutions[channel];
-                        const { zoomExtent, scale } = scaleResolution;
+                        const { zoomExtent } = scaleResolution;
                         const interval = intervals[channel];
 
-                        if (["index", "locus"].includes(scale.type)) {
-                            // These scales use integer values. Need to round them.
-                            interval[0] = Math.ceil(interval[0]);
-                            interval[1] = Math.ceil(interval[1]);
-                        }
-
                         if (translatedRectangle) {
                             // When dragging, clamp the interval so that the size stays the same and the interval doesn't exceed zoomExtent
                             const size = interval[1] - interval[0];
@@ -398,37 +454,47 @@ export default class GridChild {
                                 interval[1] = max;
                                 interval[0] = max - size;
                             }
+                        }
+
+                        const normalized = normalizeIntervalForChannel(
+                            scaleResolution,
+                            interval
+                        );
+
+                        if (!normalized) {
+                            interval[0] = zoomExtent[0];
+                            interval[1] = zoomExtent[0];
                         } else {
-                            interval[0] = Math.max(zoomExtent[0], interval[0]);
-                            interval[1] = Math.min(zoomExtent[1], interval[1]);
+                            interval[0] = normalized[0];
+                            interval[1] = normalized[1];
                         }
-                        interval[1] = Math.min(zoomExtent[1], interval[1]);
                     }
 
                     setter({ type: "interval", intervals });
                 };
 
-                const mouseUpListener = () => {
+                const mouseUpListener = (/** @type {MouseEvent} */ upEvent) => {
                     document.removeEventListener(
                         "mousemove",
                         mouseMoveListener
                     );
                     document.removeEventListener("mouseup", mouseUpListener);
 
+                    setIntervalDragActive(false);
                     nowBrushing = false;
                     if (translatedRectangle) {
-                        setCursor("move");
                         translatedRectangle = null;
                     }
+                    view.context.resumeHoverTracking(upEvent);
                 };
                 document.addEventListener("mousemove", mouseMoveListener);
 
                 document.addEventListener("mouseup", mouseUpListener);
             });
 
-            view.addInteractionEventListener(
+            view.addInteractionListener(
                 "click",
-                (coords, event) => {
+                (event) => {
                     if (event.mouseEvent.button == 0) {
                         if (preventNextClickPropagation) {
                             event.stopPropagation();
@@ -443,9 +509,9 @@ export default class GridChild {
                 selectionContainsPoint(selectionExpr(), invertPoint(point));
 
             // TODO: Make behavior configurable
-            view.addInteractionEventListener(
+            view.addInteractionListener(
                 "dblclick",
-                (coords, event) => {
+                (event) => {
                     if (isPointInsideSelection(event.point)) {
                         clearSelection();
                         event.stopPropagation();
@@ -454,22 +520,92 @@ export default class GridChild {
                 true
             );
 
+            view.addInteractionListener("wheel", (event) => {
+                const wheelEvent = event.wheelEvent;
+
+                if (
+                    !zoomEventConfig ||
+                    !zoomEventPredicate(createPrimitiveEventProxy(wheelEvent))
+                ) {
+                    return;
+                }
+
+                if (
+                    Math.abs(wheelEvent.deltaX) >= Math.abs(wheelEvent.deltaY)
+                ) {
+                    return;
+                }
+                if (!isPointInsideSelection(event.point)) {
+                    return;
+                }
+
+                const selection = selectionExpr();
+                if (!isActiveIntervalSelection(selection)) {
+                    return;
+                }
+
+                const wheelMultiplier = wheelEvent.deltaMode ? 120 : 1;
+                const scaleFactor =
+                    2 ** ((wheelEvent.deltaY * wheelMultiplier) / 300);
+
+                const anchor = invertPoint(event.point);
+                /** @type {typeof selection.intervals} */
+                const intervals = { ...selection.intervals };
+                let changed = false;
+
+                for (const channel of channels) {
+                    const currentInterval = intervals[channel];
+                    if (!currentInterval || currentInterval.length !== 2) {
+                        continue;
+                    }
+
+                    const scaleResolution = scaleResolutions[channel];
+                    const scale = scaleResolution.getScale();
+                    const zoomed = zoomDomainByScaleType(
+                        scale,
+                        /** @type {[number, number]} */ ([...currentInterval]),
+                        anchor[channel],
+                        scaleFactor,
+                        { onUnsupported: "identity" }
+                    );
+
+                    const normalized = normalizeIntervalForChannel(
+                        scaleResolution,
+                        zoomed
+                    );
+                    if (!normalized) {
+                        continue;
+                    }
+
+                    if (
+                        normalized[0] !== currentInterval[0] ||
+                        normalized[1] !== currentInterval[1]
+                    ) {
+                        intervals[channel] = normalized;
+                        changed = true;
+                    }
+                }
+
+                if (changed) {
+                    setter({
+                        ...selection,
+                        type: "interval",
+                        intervals,
+                    });
+                    wheelEvent.preventDefault();
+                    event.stopPropagation();
+                }
+            });
+
             // Handle mouse cursor changes
-            view.addInteractionEventListener("mousemove", (coords, event) => {
+            view.addInteractionListener("mousemove", (event) => {
                 if (isPointInsideSelection(event.point)) {
                     // Brushing and translating the existing brush are different actions.
                     if (!nowBrushing) {
                         mouseOver = true;
-                        // When translation is active, the cursor shows a grabbing hand.
-                        if (!translatedRectangle) {
-                            setCursor("move");
-                        }
                     }
                 } else {
                     mouseOver = false;
-                    if (!translatedRectangle) {
-                        setCursor(null);
-                    }
                 }
             });
         }
@@ -577,10 +713,29 @@ export default class GridChild {
          */
         const createAxisGrid = async (r, channel, axisParent) => {
             const props = getAxisPropsWithDefaults(r, channel);
+            if (!props) {
+                return;
+            }
+
+            const defaults = getConfiguredAxisDefaults(
+                axisParent.getConfigScopes(),
+                {
+                    channel,
+                    orient: props.orient,
+                    type: /** @type {import("../../spec/channel.js").Type} */ (
+                        r.scaleResolution.type
+                    ),
+                    style: props.style,
+                }
+            );
+            const effectiveProps = {
+                ...defaults,
+                ...props,
+            };
 
-            if (props && (props.grid || props.chromGrid)) {
+            if (effectiveProps.grid || effectiveProps.chromGrid) {
                 const axisGridView = new AxisGridView(
-                    props,
+                    effectiveProps,
                     r.scaleResolution.type,
                     this.layoutParent.context,
                     this.layoutParent,
@@ -711,6 +866,49 @@ export default class GridChild {
     }
 }
 
+/**
+ * @param {import("../../spec/parameter.js").IntervalSelectionConfig["zoom"]} zoom
+ * @param {boolean} hasZoomableChannel
+ * @param {string} paramName
+ * @returns {import("../../spec/parameter.js").EventConfig | undefined}
+ */
+export function resolveIntervalZoomEventConfig(
+    zoom,
+    hasZoomableChannel,
+    paramName
+) {
+    const defaultEnabled = !hasZoomableChannel;
+    const resolved = zoom === undefined ? defaultEnabled : zoom;
+    if (resolved === false) {
+        return;
+    }
+
+    if (resolved === true) {
+        return { type: "wheel" };
+    }
+
+    const eventConfig = asEventConfig(resolved);
+    if (eventConfig.type !== "wheel") {
+        throw new Error(
+            `Interval selection param "${paramName}" currently supports only "wheel" in "zoom".`
+        );
+    }
+
+    return eventConfig;
+}
+
+/**
+ * @param {import("../../scales/scaleResolution.js").default} scaleResolution
+ * @param {[number, number]} interval
+ * @returns {[number, number] | undefined}
+ */
+function normalizeIntervalForChannel(scaleResolution, interval) {
+    const scale = scaleResolution.getScale();
+    return normalizeIntervalForSelection(interval, scaleResolution.zoomExtent, {
+        roundToIntegers: scale.type === "index" || scale.type === "locus",
+    });
+}
+
 /**
  * @param {import("../../spec/view.js").ViewBackground} viewBackground
  * @returns {import("../../spec/view.js").UnitSpec}

package/dist/src/view/gridView/gridView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"gridView.d.ts","sourceRoot":"","sources":["../../../../src/view/gridView/gridView.js"],"names":[],"mappings":"AAu8BA;;GAEG;AACH,sHAUC;AAmBD;;;;;GAKG;AACH,4CAJW,OAAO,wBAAwB,EAAE,OAAO,UACxC,OAAO,oBAAoB,EAAE,UAAU,YACvC,QAAQ,aAmBlB;AAx+BD;;;;;;;;;;;;;;;;;;GAkBG;AACH,8BAH2D,KAAK,SAAnD,OAAQ,oBAAoB,EAAE,aAAc;IA6CrD;;;;;;;;;OASG;IACH,kBARW,KAAK,WACL,OAAO,4BAA4B,EAAE,OAAO,gBAC5C,aAAa,yFAEb,MAAM,WACN,MAAM,YACN,OAAO,YAAY,EAAE,WAAW,EAyC1C;IAtBG,uBAA0B;IAwB9B;;OAEG;IACH,6FAEC;IAED;;;;;;OAMG;IACH,4FAFa,SAAS,CAIrB;IAED;;;;;;;OAOG;IACH,oGAHW,MAAM,GACJ,SAAS,CASrB;IAED;;;;;OAKG;IACH,iGAQC;IAED;;;;;OAKG;IACH,qBAFW,MAAM,QAUhB;IAeD;;OAEG;IACH,mBAFW,qEAAM,QAWhB;IAYD;;OAEG;IACH,sFAEC;IAED,yBAEC;IAED;;OAEG;IACH,sCAKC;IAED;;;;OAIG;IACH,gCAqCC;;CAwpBJ;qBAz7B0D,gBAAgB;sBADrD,wBAAwB;0BAEpB,qBAAqB;sBAIzB,gBAAgB"}
+{"version":3,"file":"gridView.d.ts","sourceRoot":"","sources":["../../../../src/view/gridView/gridView.js"],"names":[],"mappings":"AAmmCA;;GAEG;AACH,sHAUC;AA4DD;;;;;GAKG;AACH,4CAJW,OAAO,wBAAwB,EAAE,OAAO,UACxC,OAAO,oBAAoB,EAAE,UAAU,YACvC,QAAQ,aAmBlB;AAtpCD;;;;;;;;;;;;;;;;;;GAkBG;AACH,8BAH2D,KAAK,SAAnD,OAAQ,oBAAoB,EAAE,aAAc;IA6CrD;;;;;;;;;OASG;IACH,kBARW,KAAK,WACL,OAAO,4BAA4B,EAAE,OAAO,gBAC5C,aAAa,yFAEb,MAAM,WACN,MAAM,YACN,OAAO,YAAY,EAAE,WAAW,EAyC1C;IAtBG,uBAA0B;IAwB9B;;OAEG;IACH,6FAEC;IAED;;;;;;OAMG;IACH,4FAFa,SAAS,CAIrB;IAED;;;;;;;OAOG;IACH,oGAHW,MAAM,GACJ,SAAS,CASrB;IAED;;;;;OAKG;IACH,iGAQC;IAED;;;;;OAKG;IACH,qBAFW,MAAM,QAUhB;IAeD;;OAEG;IACH,mBAFW,qEAAM,QAWhB;IAYD;;OAEG;IACH,sFAEC;IAED,yBAEC;IAED;;OAEG;IACH,sCAKC;IAED;;;;OAIG;IACH,gCAqCC;;CA6xBJ;qBAtlC0D,gBAAgB;sBADrD,wBAAwB;0BAEpB,qBAAqB;sBAQzB,gBAAgB"}