@genome-spy/core 0.58.1 → 0.60.0

package/dist/src/view/{gridView.js → gridView/gridView.js}

@@ -1,24 +1,21 @@
 /* eslint-disable max-depth */
-import { primaryPositionalChannels } from "../encoder/encoder.js";
+import { primaryPositionalChannels } from "../../encoder/encoder.js";
 import {
     FlexDimensions,
     getLargestSize,
     mapToPixelCoords,
     parseSizeDef,
     ZERO_SIZEDEF,
-} from "./layout/flexLayout.js";
-import Grid from "./layout/grid.js";
-import Padding from "./layout/padding.js";
-import Rectangle from "./layout/rectangle.js";
-import AxisGridView from "./axisGridView.js";
-import AxisView, { CHANNEL_ORIENTS, ORIENT_CHANNELS } from "./axisView.js";
-import ContainerView from "./containerView.js";
-import LayerView from "./layerView.js";
-import createTitle from "./title.js";
-import UnitView from "./unitView.js";
-import { interactionToZoom } from "./zoom.js";
-import clamp from "../utils/clamp.js";
-import { makeLerpSmoother } from "../utils/animator.js";
+} from "../layout/flexLayout.js";
+import Grid from "../layout/grid.js";
+import Padding from "../layout/padding.js";
+import Rectangle from "../layout/rectangle.js";
+import AxisView, { CHANNEL_ORIENTS, ORIENT_CHANNELS } from "../axisView.js";
+import ContainerView from "../containerView.js";
+import LayerView from "../layerView.js";
+import UnitView from "../unitView.js";
+import { interactionToZoom } from "../zoom.js";
+import GridChild from "./gridChild.js";
 
 /**
  * Modeled after: https://vega.github.io/vega/docs/layout/
@@ -41,7 +38,7 @@ export default class GridView extends ContainerView {
      * @typedef {"row" | "column"} Direction
      * @typedef {"horizontal" | "vertical"} ScrollDirection
      *
-     * @typedef {import("./view.js").default} View
+     * @typedef {import("../view.js").default} View
      */
 
     /** */
@@ -59,7 +56,7 @@ export default class GridView extends ContainerView {
      * toggleable view visibilities. For example, if the bottom view is suddenly hidden,
      * the axis should be shown in the view that takes its place as the new bottom view.
      *
-     * @type { Partial<Record<import("../spec/channel.js").PrimaryPositionalChannel, AxisView>> } }
+     * @type { Partial<Record<import("../../spec/channel.js").PrimaryPositionalChannel, AxisView>> } }
      */
     #sharedAxes = {};
 
@@ -67,13 +64,13 @@ export default class GridView extends ContainerView {
 
     /**
      *
-     * @param {import("../spec/view.js").AnyConcatSpec} spec
-     * @param {import("../types/viewContext.js").default} context
+     * @param {import("../../spec/view.js").AnyConcatSpec} spec
+     * @param {import("../../types/viewContext.js").default} context
      * @param {ContainerView} layoutParent
      * @param {View} dataParent
      * @param {string} name
      * @param {number} columns
-     * @param {import("./view.js").ViewOptions} [options]
+     * @param {import("../view.js").ViewOptions} [options]
      */
     constructor(
         spec,
@@ -274,7 +271,7 @@ export default class GridView extends ContainerView {
     #makeFlexItems(direction) {
         const sizes = this.#getSizes(direction);
 
-        /** @type {import("./layout/flexLayout.js").SizeDef[]} */
+        /** @type {import("../layout/flexLayout.js").SizeDef[]} */
         const items = [];
 
         // Title
@@ -311,7 +308,7 @@ export default class GridView extends ContainerView {
 
     /**
      * @param {Direction} direction
-     * @return {import("./layout/flexLayout.js").SizeDef}
+     * @return {import("../layout/flexLayout.js").SizeDef}
      */
     #getFlexSize(direction) {
         let grow = 0;
@@ -394,7 +391,7 @@ export default class GridView extends ContainerView {
 
     #getSharedAxisOverhang() {
         /**
-         * @param {import("../spec/axis.js").AxisOrient} orient
+         * @param {import("../../spec/axis.js").AxisOrient} orient
          */
         const getSharedAxisSize = (orient) => {
             const channel = ORIENT_CHANNELS[orient];
@@ -431,9 +428,9 @@ export default class GridView extends ContainerView {
     }
 
     /**
-     * @param {import("./renderingContext/viewRenderingContext.js").default} context
-     * @param {import("./layout/rectangle.js").default} coords
-     * @param {import("../types/rendering.js").RenderingOptions} [options]
+     * @param {import("../renderingContext/viewRenderingContext.js").default} context
+     * @param {import("../layout/rectangle.js").default} coords
+     * @param {import("../../types/rendering.js").RenderingOptions} [options]
      */
     // eslint-disable-next-line complexity
     render(context, coords, options = {}) {
@@ -483,6 +480,7 @@ export default class GridView extends ContainerView {
                 background,
                 backgroundStroke,
                 title,
+                selectionRect,
             } = gridChild;
 
             const [col, row] = grid.getCellCoords(i);
@@ -661,6 +659,8 @@ export default class GridView extends ContainerView {
                 view.render(context, viewCoords, options);
             }
 
+            selectionRect?.render(context, viewCoords, options);
+
             for (const scrollbar of Object.values(gridChild.scrollbars)) {
                 scrollbar.updateScrollbar(viewportCoords, viewCoords);
                 scrollbar.render(context, coords, options);
@@ -673,7 +673,7 @@ export default class GridView extends ContainerView {
     }
 
     /**
-     * @param {import("../utils/interactionEvent.js").default} event
+     * @param {import("../../utils/interactionEvent.js").default} event
      */
     propagateInteractionEvent(event) {
         this.handleInteractionEvent(undefined, event, true);
@@ -699,6 +699,12 @@ export default class GridView extends ContainerView {
         if (pointedView) {
             pointedView.propagateInteractionEvent(event);
 
+            if (event.stopped) {
+                return;
+            }
+
+            // Hmm, maybe this should be registered when needed and not include
+            // as a hardcoded interaction?
             if (
                 pointedView instanceof UnitView ||
                 pointedView instanceof LayerView
@@ -727,9 +733,9 @@ export default class GridView extends ContainerView {
 
     /**
      *
-     * @param {import("./layout/rectangle.js").default} coords Coordinates
+     * @param {import("../layout/rectangle.js").default} coords Coordinates
      * @param {View} view
-     * @param {import("./zoom.js").ZoomEvent} zoomEvent
+     * @param {import("../zoom.js").ZoomEvent} zoomEvent
      */
     #handleZoom(coords, view, zoomEvent) {
         for (const [channel, resolutionSet] of Object.entries(
@@ -763,99 +769,22 @@ export default class GridView extends ContainerView {
     }
 
     /**
-     * @param {import("../spec/channel.js").Channel} channel
-     * @param {import("../spec/view.js").ResolutionTarget} resolutionType
-     * @returns {import("../spec/view.js").ResolutionBehavior}
+     * @param {import("../../spec/channel.js").Channel} channel
+     * @param {import("../../spec/view.js").ResolutionTarget} resolutionType
+     * @returns {import("../../spec/view.js").ResolutionBehavior}
      */
     getDefaultResolution(channel, resolutionType) {
         return "independent";
     }
 }
 
-/**
- * @param {import("../spec/view.js").ViewBackground} viewBackground
- * @returns {import("../spec/view.js").UnitSpec}
- */
-export function createBackground(viewBackground) {
-    if (
-        !viewBackground ||
-        !viewBackground.fill ||
-        viewBackground.fillOpacity === 0
-    ) {
-        return;
-    }
-
-    return {
-        configurableVisibility: false,
-        data: { values: [{}] },
-        mark: {
-            color: viewBackground.fill,
-            opacity: viewBackground.fillOpacity ?? 1.0,
-            type: "rect",
-            clip: false, // Shouldn't be needed
-            tooltip: null,
-            minHeight: 1,
-            minOpacity: 0,
-        },
-    };
-}
-
-/**
- * @param {import("../spec/view.js").ViewBackground} viewBackground
- * @returns {import("../spec/view.js").UnitSpec}
- */
-export function createBackgroundStroke(viewBackground) {
-    if (
-        !viewBackground ||
-        !viewBackground.stroke ||
-        viewBackground.strokeWidth === 0 ||
-        viewBackground.strokeOpacity === 0
-    ) {
-        return;
-    }
-
-    // Using rules to draw a non-filled rectangle.
-    // We are not using a rect mark because it is not optimized for outlines.
-    // TODO: Implement "hollow" mesh for non-filled rectangles
-    return {
-        configurableVisibility: false,
-        resolve: {
-            scale: { x: "excluded", y: "excluded" },
-            axis: { x: "excluded", y: "excluded" },
-        },
-        data: {
-            values: [
-                { x: 0, y: 0, x2: 1, y2: 0 },
-                { x: 1, y: 0, x2: 1, y2: 1 },
-                { x: 1, y: 1, x2: 0, y2: 1 },
-                { x: 0, y: 1, x2: 0, y2: 0 },
-            ],
-        },
-        mark: {
-            size: viewBackground.strokeWidth ?? 1.0,
-            color: viewBackground.stroke ?? "lightgray",
-            strokeCap: "square",
-            opacity: viewBackground.strokeOpacity ?? 1.0,
-            type: "rule",
-            clip: false,
-            tooltip: null,
-        },
-        encoding: {
-            x: { field: "x", type: "quantitative", scale: null },
-            y: { field: "y", type: "quantitative", scale: null },
-            x2: { field: "x2" },
-            y2: { field: "y2" },
-        },
-    };
-}
-
 /**
  *
  * @param {View} view
  * @returns
  */
 function getZoomableResolutions(view) {
-    /** @type {Record<import("../spec/channel.js").PrimaryPositionalChannel, Set<import("./scaleResolution.js").default>>} */
+    /** @type {Record<import("../../spec/channel.js").PrimaryPositionalChannel, Set<import("../scaleResolution.js").default>>} */
     const resolutions = {
         x: new Set(),
         y: new Set(),
@@ -891,8 +820,8 @@ export function isClippedChildren(view) {
 
 /**
  *
- * @param {import("./layout/rectangle.js").default} coords
- * @param {import("../spec/axis.js").AxisOrient} orient
+ * @param {import("../layout/rectangle.js").default} coords
+ * @param {import("../../spec/axis.js").AxisOrient} orient
  * @param {AxisView} axisView
  */
 export function translateAxisCoords(coords, orient, axisView) {
@@ -913,487 +842,3 @@ export function translateAxisCoords(coords, orient, axisView) {
             .modify({ width: ps });
     }
 }
-
-export class GridChild {
-    /**
-     * @param {View} view
-     * @param {ContainerView} layoutParent
-     * @param {number} serial
-     */
-    constructor(view, layoutParent, serial) {
-        this.layoutParent = layoutParent;
-        this.view = view;
-        this.serial = serial;
-
-        /** @type {UnitView} */
-        this.background = undefined;
-
-        /** @type {UnitView} */
-        this.backgroundStroke = undefined;
-
-        /** @type {Partial<Record<import("../spec/axis.js").AxisOrient, AxisView>>} axes */
-        this.axes = {};
-
-        /** @type {Partial<Record<import("../spec/axis.js").AxisOrient, AxisGridView>>} gridLines */
-        this.gridLines = {};
-
-        /** @type {Partial<Record<ScrollDirection, Scrollbar>>} */
-        this.scrollbars = {};
-
-        /** @type {UnitView} */
-        this.title = undefined;
-
-        /** @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 backgroundSpec = createBackground(viewBackground);
-            if (backgroundSpec) {
-                this.background = new UnitView(
-                    backgroundSpec,
-                    layoutParent.context,
-                    layoutParent,
-                    view,
-                    "background" + serial,
-                    {
-                        blockEncodingInheritance: true,
-                    }
-                );
-            }
-
-            const backgroundStrokeSpec = createBackgroundStroke(viewBackground);
-            if (backgroundStrokeSpec) {
-                this.backgroundStroke = new UnitView(
-                    backgroundStrokeSpec,
-                    layoutParent.context,
-                    layoutParent,
-                    view,
-                    "backgroundStroke" + serial,
-                    {
-                        blockEncodingInheritance: true,
-                    }
-                );
-            }
-
-            const title = createTitle(view.spec.title);
-            if (title) {
-                const unitView = new UnitView(
-                    title,
-                    layoutParent.context,
-                    layoutParent,
-                    view,
-                    "title" + serial,
-                    {
-                        blockEncodingInheritance: true,
-                    }
-                );
-                this.title = unitView;
-            }
-        }
-
-        // TODO: More specific getter for this
-        if (view.spec.viewportWidth != null) {
-            this.scrollbars.horizontal = new Scrollbar(this, "horizontal");
-        }
-
-        if (view.spec.viewportHeight != null) {
-            this.scrollbars.vertical = new Scrollbar(this, "vertical");
-        }
-    }
-
-    *getChildren() {
-        if (this.background) {
-            yield this.background;
-        }
-        if (this.backgroundStroke) {
-            yield this.backgroundStroke;
-        }
-        if (this.title) {
-            yield this.title;
-        }
-        yield* Object.values(this.axes);
-        yield* Object.values(this.gridLines);
-        yield this.view;
-        yield* Object.values(this.scrollbars);
-    }
-
-    /**
-     * Create view decorations, grid lines, axes, etc.
-     */
-    async createAxes() {
-        const { view, axes, gridLines } = this;
-
-        /**
-         * @param {import("./axisResolution.js").default} r
-         * @param {import("../spec/channel.js").PrimaryPositionalChannel} channel
-         */
-        const getAxisPropsWithDefaults = (r, channel) => {
-            const propsWithoutDefaults = r.getAxisProps();
-            if (propsWithoutDefaults === null) {
-                return;
-            }
-
-            const props = propsWithoutDefaults
-                ? { ...propsWithoutDefaults }
-                : {};
-
-            // Pick a default orient based on what is available.
-            // This logic is needed for layer views that have independent axes.
-            if (!props.orient) {
-                for (const orient of CHANNEL_ORIENTS[channel]) {
-                    if (!axes[orient]) {
-                        props.orient = orient;
-                        break;
-                    }
-                }
-                if (!props.orient) {
-                    throw new Error(
-                        "No slots available for an axis! Perhaps a LayerView has more than two children?"
-                    );
-                }
-            }
-
-            props.title ??= r.getTitle();
-
-            if (!CHANNEL_ORIENTS[channel].includes(props.orient)) {
-                throw new Error(
-                    `Invalid axis orientation "${props.orient}" on channel "${channel}"!`
-                );
-            }
-
-            return props;
-        };
-
-        /**
-         * @param {import("./axisResolution.js").default} r
-         * @param {import("../spec/channel.js").PrimaryPositionalChannel} channel
-         * @param {View} axisParent
-         */
-        const createAxis = async (r, channel, axisParent) => {
-            const props = getAxisPropsWithDefaults(r, channel);
-
-            if (props) {
-                if (axes[props.orient]) {
-                    throw new Error(
-                        `An axis with the orient "${props.orient}" already exists!`
-                    );
-                }
-
-                const axisView = new AxisView(
-                    props,
-                    r.scaleResolution.type,
-                    this.layoutParent.context,
-                    this.layoutParent,
-                    axisParent
-                );
-                axes[props.orient] = axisView;
-                await axisView.initializeChildren();
-            }
-        };
-
-        /**
-         * @param {import("./axisResolution.js").default} r
-         * @param {import("../spec/channel.js").PrimaryPositionalChannel} channel
-         * @param {View} axisParent
-         */
-        const createAxisGrid = async (r, channel, axisParent) => {
-            const props = getAxisPropsWithDefaults(r, channel);
-
-            if (props && (props.grid || props.chromGrid)) {
-                const axisGridView = new AxisGridView(
-                    props,
-                    r.scaleResolution.type,
-                    this.layoutParent.context,
-                    this.layoutParent,
-                    axisParent
-                );
-                gridLines[props.orient] = axisGridView;
-                await axisGridView.initializeChildren();
-            }
-        };
-
-        // Handle children that have caught axis resolutions. Create axes for them.
-        for (const channel of /** @type {import("../spec/channel.js").PrimaryPositionalChannel[]} */ ([
-            "x",
-            "y",
-        ])) {
-            if (view.needsAxes[channel]) {
-                const r = view.resolutions.axis[channel];
-                if (!r) {
-                    continue;
-                }
-
-                await createAxis(r, channel, view);
-            }
-        }
-
-        // Handle gridlines of children. Note: children's axis resolution may be caught by
-        // this view or some of this view's ancestors.
-        for (const channel of /** @type {import("../spec/channel.js").PrimaryPositionalChannel[]} */ ([
-            "x",
-            "y",
-        ])) {
-            if (
-                view.needsAxes[channel] &&
-                // Handle a special case where the child view has an excluded resolution
-                // but no scale or axis, e.g., when only values are used on a channel.
-                view.getConfiguredOrDefaultResolution(channel, "axis") !=
-                    "excluded"
-            ) {
-                const r = view.getAxisResolution(channel);
-                if (!r) {
-                    continue;
-                }
-
-                await createAxisGrid(r, channel, view);
-            }
-        }
-
-        // Handle LayerView's possible independent axes
-        if (view instanceof LayerView) {
-            // First create axes that have an orient preference
-            for (const layerChild of view) {
-                for (const [channel, r] of Object.entries(
-                    layerChild.resolutions.axis
-                )) {
-                    const props = r.getAxisProps();
-                    if (props && props.orient) {
-                        await createAxis(r, channel, layerChild);
-                    }
-                }
-            }
-
-            // Then create axes in a priority order
-            for (const layerChild of view) {
-                for (const [channel, r] of Object.entries(
-                    layerChild.resolutions.axis
-                )) {
-                    const props = r.getAxisProps();
-                    if (props && !props.orient) {
-                        await createAxis(r, channel, layerChild);
-                    }
-                }
-            }
-
-            // TODO: Axis grid
-        }
-
-        // Axes are created after scales are resolved, so we need to resolve possible new scales here
-        [...Object.values(axes), ...Object.values(gridLines)].forEach((v) =>
-            v.visit((view) => {
-                if (view instanceof UnitView) {
-                    view.resolve("scale");
-                }
-            })
-        );
-    }
-
-    getOverhang() {
-        const calculate = (
-            /** @type {import("../spec/axis.js").AxisOrient} */ orient
-        ) => {
-            const axisView = this.axes[orient];
-            return axisView
-                ? Math.max(
-                      axisView.getPerpendicularSize() +
-                          (axisView.axisProps.offset ?? 0),
-                      0
-                  )
-                : 0;
-        };
-
-        // Axes and overhang should be mutually exclusive, so we can just add them together
-        return new Padding(
-            calculate("top"),
-            calculate("right"),
-            calculate("bottom"),
-            calculate("left")
-        ).add(this.view.getOverhang());
-    }
-
-    getOverhangAndPadding() {
-        return this.getOverhang().add(this.view.getPadding());
-    }
-}
-
-class Scrollbar extends UnitView {
-    /** @type {ScrollDirection} */
-    #scrollDirection;
-
-    #scrollbarCoords = Rectangle.ZERO;
-
-    #maxScrollOffset = 0;
-
-    #maxViewportOffset = 0;
-
-    // This is the actual state of the scrollbar. It's better to keep track of
-    // the viewport offset rather than the scrollbar offset because the former
-    // is more stable when the viewport size changes.
-    viewportOffset = 0;
-
-    /**
-     * @param {GridChild} gridChild
-     * @param {ScrollDirection} scrollDirection
-     */
-    constructor(gridChild, scrollDirection) {
-        // TODO: Configurable
-        const config = {
-            scrollbarSize: 8,
-            scrollbarPadding: 2,
-            // TODO: inside/outside view
-        };
-
-        super(
-            {
-                data: { values: [{}] },
-                mark: {
-                    type: "rect",
-                    fill: "#b0b0b0",
-                    fillOpacity: 0.6,
-                    stroke: "white",
-                    strokeWidth: 1,
-                    strokeOpacity: 1,
-                    cornerRadius: 5,
-                    clip: false,
-                },
-                configurableVisibility: false,
-            },
-            gridChild.layoutParent.context,
-            gridChild.layoutParent,
-            gridChild.view,
-            "scrollbar-" + scrollDirection, // TODO: Serial
-            {
-                blockEncodingInheritance: true,
-            }
-        );
-
-        this.config = config;
-        this.#scrollDirection = scrollDirection;
-
-        // Make it smooth!
-        this.interpolateViewportOffset = makeLerpSmoother(
-            this.context.animator,
-            (value) => {
-                this.viewportOffset = value.x;
-            },
-            50,
-            0.4,
-            { x: this.viewportOffset }
-        );
-
-        this.addInteractionEventListener("mousedown", (coords, event) => {
-            event.stopPropagation();
-
-            if (this.#maxScrollOffset <= 0) {
-                return;
-            }
-
-            const getMouseOffset = (/** @type {MouseEvent} */ mouseEvent) =>
-                scrollDirection == "vertical"
-                    ? mouseEvent.clientY
-                    : mouseEvent.clientX;
-
-            const mouseEvent = /** @type {MouseEvent} */ (event.uiEvent);
-            mouseEvent.preventDefault();
-
-            const initialScrollOffset = this.scrollOffset;
-            const initialOffset = getMouseOffset(mouseEvent);
-
-            const onMousemove = /** @param {MouseEvent} moveEvent */ (
-                moveEvent
-            ) => {
-                const scrollOffset = clamp(
-                    getMouseOffset(moveEvent) -
-                        initialOffset +
-                        initialScrollOffset,
-                    0,
-                    this.#maxScrollOffset
-                );
-
-                this.interpolateViewportOffset({
-                    x:
-                        (scrollOffset / this.#maxScrollOffset) *
-                        this.#maxViewportOffset,
-                });
-            };
-
-            const onMouseup = () => {
-                document.removeEventListener("mousemove", onMousemove);
-                document.removeEventListener("mouseup", onMouseup);
-            };
-
-            document.addEventListener("mouseup", onMouseup, false);
-            document.addEventListener("mousemove", onMousemove, false);
-        });
-    }
-
-    get scrollOffset() {
-        return (
-            (this.viewportOffset / this.#maxViewportOffset) *
-            this.#maxScrollOffset
-        );
-    }
-
-    /**
-     * @param {import("./renderingContext/viewRenderingContext.js").default} context
-     * @param {import("./layout/rectangle.js").default} coords
-     * @param {import("../types/rendering.js").RenderingOptions} [options]
-     */
-    render(context, coords, options) {
-        super.render(context, this.#scrollbarCoords, options);
-    }
-
-    /**
-     *
-     * @param {Rectangle} viewportCoords
-     * @param {Rectangle} coords
-     */
-    updateScrollbar(viewportCoords, coords) {
-        const sPad = this.config.scrollbarPadding;
-        const sSize = this.config.scrollbarSize;
-
-        const dimension =
-            this.#scrollDirection == "horizontal" ? "width" : "height";
-
-        const visibleFraction = Math.min(
-            1,
-            viewportCoords[dimension] / coords[dimension]
-        );
-        const maxScrollLength = viewportCoords[dimension] - 2 * sPad;
-        const scrollLength = visibleFraction * maxScrollLength;
-
-        this.#maxScrollOffset = maxScrollLength - scrollLength;
-        this.#maxViewportOffset = coords[dimension] - viewportCoords[dimension];
-        this.viewportOffset = clamp(
-            this.viewportOffset,
-            0,
-            this.#maxViewportOffset
-        );
-
-        this.#scrollbarCoords =
-            this.#scrollDirection == "vertical"
-                ? new Rectangle(
-                      () =>
-                          viewportCoords.x +
-                          viewportCoords.width -
-                          sSize -
-                          sPad,
-                      () => viewportCoords.y + sPad + this.scrollOffset,
-                      () => sSize,
-                      () => scrollLength
-                  )
-                : new Rectangle(
-                      () => viewportCoords.x + sPad + this.scrollOffset,
-                      () =>
-                          viewportCoords.y +
-                          viewportCoords.height -
-                          sSize -
-                          sPad,
-                      () => scrollLength,
-                      () => sSize
-                  );
-    }
-}