@genome-spy/core 0.73.0 → 0.74.0

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

@@ -14,14 +14,16 @@ 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 {
     /**
@@ -63,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) {
@@ -104,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,
@@ -136,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)) {
@@ -158,11 +174,11 @@ 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];
@@ -254,7 +270,6 @@ export default class GridChild {
 
             const clearSelection = () => {
                 setter(createIntervalSelection(channels));
-                setCursor(null);
             };
 
             this.selectionRect = new SelectionRect(
@@ -262,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
@@ -318,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;
                 }
@@ -332,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;
@@ -355,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
@@ -372,7 +390,7 @@ export default class GridChild {
                                 clearSelection();
                             }
                         };
-                        view.addInteractionEventListener("mouseup", listener);
+                        view.addInteractionListener("mouseup", listener);
                         return;
                     } else {
                         return;
@@ -381,6 +399,7 @@ export default class GridChild {
 
                 // Prevent panning interaction
                 event.stopPropagation();
+                view.context.suspendHoverTracking();
 
                 const start = event.point;
                 const viewOffset = Point.fromMouseEvent(
@@ -454,27 +473,28 @@ export default class GridChild {
                     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();
@@ -489,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();
@@ -500,11 +520,8 @@ export default class GridChild {
                 true
             );
 
-            view.addInteractionEventListener("wheel", (coords, event) => {
-                const wheelEvent = event.uiEvent;
-                if (!(wheelEvent instanceof WheelEvent)) {
-                    return;
-                }
+            view.addInteractionListener("wheel", (event) => {
+                const wheelEvent = event.wheelEvent;
 
                 if (
                     !zoomEventConfig ||
@@ -581,21 +598,14 @@ export default class GridChild {
             });
 
             // 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);
-                    }
                 }
             });
         }
@@ -703,10 +713,29 @@ export default class GridChild {
          */
         const createAxisGrid = async (r, channel, axisParent) => {
             const props = getAxisPropsWithDefaults(r, channel);
+            if (!props) {
+                return;
+            }
 
-            if (props && (props.grid || props.chromGrid)) {
+            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 (effectiveProps.grid || effectiveProps.chromGrid) {
                 const axisGridView = new AxisGridView(
-                    props,
+                    effectiveProps,
                     r.scaleResolution.type,
                     this.layoutParent.context,
                     this.layoutParent,

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":"AAi+BA;;GAEG;AACH,sHAUC;AAoCD;;;;;GAKG;AACH,4CAJW,OAAO,wBAAwB,EAAE,OAAO,UACxC,OAAO,oBAAoB,EAAE,UAAU,YACvC,QAAQ,aAmBlB;AAnhCD;;;;;;;;;;;;;;;;;;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;;CAkrBJ;qBAn9B0D,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"}