@genome-spy/core 0.75.0 → 0.77.0

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

@@ -22,6 +22,7 @@ import GridChild from "./gridChild.js";
 import KeyboardZoomController from "./keyboardZoomController.js";
 import SeparatorView, { resolveSeparatorProps } from "./separatorView.js";
 import { getZoomableResolutions } from "./zoomNavigationUtils.js";
+import { isHConcatSpec, isVConcatSpec } from "../viewSpecGuards.js";
 
 // Secondary ordering within a z-index bucket for GridView-owned decorations.
 // These are not z-indices themselves: actual layering is decided first by the
@@ -995,12 +996,18 @@ export default class GridView extends ContainerView {
                 gridChild.coords.containsPoint(event.point.x, event.point.y)
             );
             const pointedView = pointedChild?.view;
+            const gapZoomTarget = !pointedChild
+                ? this.#getGapZoomTarget(event.point)
+                : undefined;
 
             if (event.type === "wheelclaimprobe") {
                 // Probe path: claim wheel ownership without executing regular wheel
                 // behavior. InteractionController uses this to decide whether native
                 // wheel should be preventDefault()'ed before inertia kicks in.
                 if (!pointedView) {
+                    if (gapZoomTarget) {
+                        event.claimWheel();
+                    }
                     return;
                 }
 
@@ -1038,6 +1045,9 @@ export default class GridView extends ContainerView {
             }
 
             if (!pointedView) {
+                if (gapZoomTarget) {
+                    this.#propagateGapZoomInteraction(event, gapZoomTarget);
+                }
                 return;
             }
 
@@ -1065,50 +1075,147 @@ export default class GridView extends ContainerView {
     }
 
     /**
-     *
-     * @param {import("../layout/rectangle.js").default} coords Coordinates
-     * @param {View} view
-     * @param {import("../zoom.js").ZoomEvent} zoomEvent
-     * @returns {boolean} `true` when there was at least one zoomable resolution
+     * @param {import("../layout/point.js").default} point
+     * @returns {{ coords: Rectangle, zoomableResolutions: ReturnType<typeof getZoomableResolutionSet> } | undefined}
      */
-    #handleZoom(coords, view, zoomEvent) {
-        let zoomable = false;
-        let changed = false;
+    #getGapZoomTarget(point) {
+        const channel = this.#getGapZoomChannel();
+        if (!channel) {
+            return;
+        }
 
-        const p = coords.normalizePoint(zoomEvent.x, zoomEvent.y);
-        const tp = coords.normalizePoint(
-            zoomEvent.x + zoomEvent.xDelta,
-            zoomEvent.y + zoomEvent.yDelta
-        );
-        const delta = {
-            x: tp.x - p.x,
-            y: tp.y - p.y,
+        const resolution = this.getScaleResolution(channel);
+        if (!resolution || !resolution.isZoomable()) {
+            return;
+        }
+
+        const coords = this.#getGapZoomCoords(channel);
+        if (!coords) {
+            return;
+        }
+
+        if (!coords.containsPoint(point.x, point.y)) {
+            return;
+        }
+
+        return {
+            coords,
+            zoomableResolutions: getZoomableResolutionSet(channel, resolution),
         };
+    }
 
-        for (const [channel, resolutionSet] of Object.entries(
-            getZoomableResolutions(view)
-        )) {
-            if (resolutionSet.size <= 0) {
-                continue;
+    /**
+     * @returns {import("../../spec/channel.js").PrimaryPositionalChannel | undefined}
+     */
+    #getGapZoomChannel() {
+        if (isVConcatSpec(this.spec)) {
+            return "x";
+        } else if (isHConcatSpec(this.spec)) {
+            return "y";
+        }
+    }
+
+    /**
+     * @param {import("../../spec/channel.js").PrimaryPositionalChannel} channel
+     * @returns {Rectangle | undefined}
+     */
+    #getGapZoomCoords(channel) {
+        const firstChild = this.#visibleChildren[0];
+        if (!firstChild) {
+            return;
+        }
+
+        const firstViewportCoords = firstChild.coords;
+        const firstExpandedCoords = firstChild.coords.expand(
+            firstChild.getOverhang()
+        );
+
+        let minX = firstViewportCoords.x;
+        let minY = firstExpandedCoords.y;
+        let maxX = firstViewportCoords.x2;
+        let maxY = firstExpandedCoords.y2;
+
+        for (const gridChild of this.#visibleChildren.slice(1)) {
+            const viewportCoords = gridChild.coords;
+            const expandedCoords = gridChild.coords.expand(
+                gridChild.getOverhang()
+            );
+
+            if (channel == "x") {
+                minX = Math.max(minX, viewportCoords.x);
+                maxX = Math.min(maxX, viewportCoords.x2);
+                minY = Math.min(minY, expandedCoords.y);
+                maxY = Math.max(maxY, expandedCoords.y2);
+            } else {
+                minX = Math.min(minX, expandedCoords.x);
+                maxX = Math.max(maxX, expandedCoords.x2);
+                minY = Math.max(minY, viewportCoords.y);
+                maxY = Math.min(maxY, viewportCoords.y2);
             }
+        }
 
-            zoomable = true;
+        for (const axisView of Object.values(this.#sharedAxes)) {
+            const axisCoords = axisView.coords;
+            if (!axisCoords) {
+                continue;
+            }
 
-            for (const resolution of resolutionSet) {
-                const resolutionChanged = resolution.zoom(
-                    2 ** zoomEvent.zDelta,
-                    channel == "y" ? 1 - p[channel] : p[channel],
-                    channel == "x" ? delta.x : -delta.y
-                );
-                changed = resolutionChanged || changed;
+            const orient = axisView.axisProps.orient;
+            if (channel == "x" && (orient == "top" || orient == "bottom")) {
+                minY = Math.min(minY, axisCoords.y);
+                maxY = Math.max(maxY, axisCoords.y2);
+            } else if (
+                channel == "y" &&
+                (orient == "left" || orient == "right")
+            ) {
+                minX = Math.min(minX, axisCoords.x);
+                maxX = Math.max(maxX, axisCoords.x2);
             }
         }
 
-        if (changed) {
-            this.context.animator.requestRender();
+        if (minX >= maxX || minY >= maxY) {
+            return;
         }
 
-        return zoomable;
+        return Rectangle.create(minX, minY, maxX - minX, maxY - minY);
+    }
+
+    /**
+     * @param {import("../../utils/interaction.js").default} event
+     * @param {{ coords: Rectangle, zoomableResolutions: ReturnType<typeof getZoomableResolutionSet> }} gapZoomTarget
+     */
+    #propagateGapZoomInteraction(event, gapZoomTarget) {
+        event.target = this;
+
+        interactionToZoom(
+            event,
+            gapZoomTarget.coords,
+            (zoomEvent) =>
+                zoomResolutions(
+                    gapZoomTarget.coords,
+                    zoomEvent,
+                    gapZoomTarget.zoomableResolutions,
+                    this.context.animator
+                ),
+            this.context.getCurrentHover(),
+            this.context.animator
+        );
+    }
+
+    /**
+     *
+     * @param {import("../layout/rectangle.js").default} coords Coordinates
+     * @param {View} view
+     * @param {import("../zoom.js").ZoomEvent} zoomEvent
+     * @returns {boolean} `true` when there was at least one zoomable resolution
+     */
+    #handleZoom(coords, view, zoomEvent) {
+        return zoomResolutions(
+            coords,
+            zoomEvent,
+            getZoomableResolutions(view),
+            this.context.animator
+        );
     }
 
     /**
@@ -1121,6 +1228,65 @@ export default class GridView extends ContainerView {
     }
 }
 
+/**
+ * @param {import("../../spec/channel.js").PrimaryPositionalChannel} channel
+ * @param {import("../../scales/scaleResolution.js").default} resolution
+ */
+function getZoomableResolutionSet(channel, resolution) {
+    const zoomableResolutions = {
+        x: new Set(),
+        y: new Set(),
+    };
+    zoomableResolutions[channel].add(resolution);
+    return zoomableResolutions;
+}
+
+/**
+ * @param {Rectangle} coords
+ * @param {import("../zoom.js").ZoomEvent} zoomEvent
+ * @param {ReturnType<typeof getZoomableResolutions>} zoomableResolutions
+ * @param {import("../../utils/animator.js").default} animator
+ */
+function zoomResolutions(coords, zoomEvent, zoomableResolutions, animator) {
+    let zoomable = false;
+    let changed = false;
+
+    const p = coords.normalizePoint(zoomEvent.x, zoomEvent.y);
+    const tp = coords.normalizePoint(
+        zoomEvent.x + zoomEvent.xDelta,
+        zoomEvent.y + zoomEvent.yDelta
+    );
+    const delta = {
+        x: tp.x - p.x,
+        y: tp.y - p.y,
+    };
+
+    for (const [channel, resolutionSet] of Object.entries(
+        zoomableResolutions
+    )) {
+        if (resolutionSet.size <= 0) {
+            continue;
+        }
+
+        zoomable = true;
+
+        for (const resolution of resolutionSet) {
+            const resolutionChanged = resolution.zoom(
+                2 ** zoomEvent.zDelta,
+                channel == "y" ? 1 - p[channel] : p[channel],
+                channel == "x" ? delta.x : -delta.y
+            );
+            changed = resolutionChanged || changed;
+        }
+    }
+
+    if (changed) {
+        animator.requestRender();
+    }
+
+    return zoomable;
+}
+
 /**
  * @param {View} view
  */

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

@@ -1 +1 @@
-{"version":3,"file":"scrollbar.d.ts","sourceRoot":"","sources":["../../../../src/view/gridView/scrollbar.js"],"names":[],"mappings":"AAMA;;;;;GAKG;AACH;IAwBI;;;;OAIG;IACH,uBAJW,OAAO,gBAAgB,EAAE,OAAO,mBAChC,eAAe,YACf;QAAE,sBAAsB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;KAAE,EA2H/D;IA1ID;;;;;;OAMG;IACH,uBAAmB;IAkDf;;;;MAAoB;IAmFxB,2BAEC;IAED;;;OAGG;IACH,yBAHW,MAAM,6BACN;QAAE,MAAM,CAAC,EAAE,OAAO,CAAC;QAAC,YAAY,CAAC,EAAE,OAAO,CAAA;KAAE,QAYtD;IAqFD;;;;;;;;;OASG;IACH,gCAHW,SAAS,iBACT,SAAS,QASnB;IAMG;;;;MAWC;;CAER;;;;;8BArSY,YAAY,GAAG,UAAU;qBAPjB,gBAAgB;sBADf,wBAAwB"}
+{"version":3,"file":"scrollbar.d.ts","sourceRoot":"","sources":["../../../../src/view/gridView/scrollbar.js"],"names":[],"mappings":"AASA;;;;;GAKG;AACH;IAwBI;;;;OAIG;IACH,uBAJW,OAAO,gBAAgB,EAAE,OAAO,mBAChC,eAAe,YACf;QAAE,sBAAsB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;KAAE,EA4H/D;IA3ID;;;;;;OAMG;IACH,uBAAmB;IAmDf;;;;MAAoB;IAmFxB,2BAEC;IAED;;;OAGG;IACH,yBAHW,MAAM,6BACN;QAAE,MAAM,CAAC,EAAE,OAAO,CAAC;QAAC,YAAY,CAAC,EAAE,OAAO,CAAA;KAAE,QAYtD;IAqFD;;;;;;;;;OASG;IACH,gCAHW,SAAS,iBACT,SAAS,QASnB;IAMG;;;;MAWC;;CAER;;;;;8BAtSY,YAAY,GAAG,UAAU;qBAVjB,gBAAgB;sBADf,wBAAwB"}

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

@@ -2,7 +2,10 @@ import clamp from "../../utils/clamp.js";
 import { makeLerpSmoother } from "../../utils/animator.js";
 import Rectangle from "../layout/rectangle.js";
 import UnitView from "../unitView.js";
-import { markViewAsNonAddressable } from "../viewSelectors.js";
+import {
+    markViewAsChrome,
+    markViewAsNonAddressable,
+} from "../viewSelectors.js";
 
 /**
  * This class represents a scrollbar thumb that can be used within a grid view
@@ -78,6 +81,7 @@ export default class Scrollbar extends UnitView {
         );
 
         markViewAsNonAddressable(this, { skipSubtree: true });
+        markViewAsChrome(this, { skipSubtree: true });
 
         this.config = config;
         this.#scrollDirection = scrollDirection;

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

@@ -1 +1 @@
-{"version":3,"file":"selectionRect.d.ts","sourceRoot":"","sources":["../../../../src/view/gridView/selectionRect.js"],"names":[],"mappings":"AAIA,yCAA0C,oBAAoB,CAAC;AAE/D;IACI;;;OAGG;IAEH;;;;OAIG;IACH,uBAJW,OAAO,gBAAgB,EAAE,OAAO,iBAChC,OAAO,6BAA6B,EAAE,eAAe,gBACrD,OAAO,yBAAyB,EAAE,WAAW,EA4KvD;IA1BG,qBAAqB;IACrB,SADW,MAAM,CACI;IA2BzB,oBAEC;CACJ;sBA/LqB,iBAAiB"}
+{"version":3,"file":"selectionRect.d.ts","sourceRoot":"","sources":["../../../../src/view/gridView/selectionRect.js"],"names":[],"mappings":"AAOA,yCAA0C,oBAAoB,CAAC;AAE/D;IACI;;;OAGG;IAEH;;;;OAIG;IACH,uBAJW,OAAO,gBAAgB,EAAE,OAAO,iBAChC,OAAO,6BAA6B,EAAE,eAAe,gBACrD,OAAO,yBAAyB,EAAE,WAAW,EA6KvD;IA3BG,qBAAqB;IACrB,SADW,MAAM,CACI;IA4BzB,oBAEC;CACJ;sBAnMqB,iBAAiB"}

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

@@ -1,6 +1,9 @@
 import { primaryPositionalChannels } from "../../encoder/encoder.js";
 import LayerView from "../layerView.js";
-import { markViewAsNonAddressable } from "../viewSelectors.js";
+import {
+    markViewAsChrome,
+    markViewAsNonAddressable,
+} from "../viewSelectors.js";
 
 export const INTERVAL_DRAG_ACTIVE_PARAM = "intervalDragActive";
 
@@ -163,6 +166,7 @@ export default class SelectionRect extends LayerView {
         this._zindex = zindex;
 
         markViewAsNonAddressable(this, { skipSubtree: true });
+        markViewAsChrome(this, { skipSubtree: true });
 
         const selectionListener = () => {
             const selection =

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

@@ -1 +1 @@
-{"version":3,"file":"separatorView.d.ts","sourceRoot":"","sources":["../../../../src/view/gridView/separatorView.js"],"names":[],"mappings":"AAoOA;;;GAGG;AACH,iDAHW,OAAO,oBAAoB,EAAE,cAAc,GAAG,OAAO,GAAG,SAAS,GAC/D,OAAO,oBAAoB,EAAE,cAAc,GAAG,IAAI,CAiB9D;AAxOD;;GAEG;AACH;IAyBI;;;;;;;;;OASG;IACH,+EATW;QACN,SAAS,EAAE,kBAAkB,CAAC;QAC9B,KAAK,EAAE,OAAO,oBAAoB,EAAE,cAAc,CAAC;QACnD,OAAO,EAAE,OAAO,4BAA4B,EAAE,OAAO,CAAC;QACtD,YAAY,EAAE,OAAO,qBAAqB,EAAE,OAAO,CAAC;QACpD,UAAU,EAAE,OAAO,YAAY,EAAE,OAAO,CAAC;QACzC,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAA;KACpC,EAuBH;IAED;;OAEG;IACH,YAFa,QAAQ,CAIpB;IAED,oBAEC;IAED;;;;;;;OAOG;IACH,mBAPW,OAAO,yBAAyB,EAAE,OAAO,EAAE,SAC3C,MAAM,UACN,OAAO,wBAAwB,EAAE,OAAO,eACxC,CAAC,SAAS,EAAE,KAAK,GAAG,QAAQ,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,iBACtD,OAAO,YACP,OAAO,sBAAsB,EAAE,OAAO,QAKhD;IAED;;;;OAIG;IACH,gBAJW,OAAO,6CAA6C,EAAE,OAAO,UAC7D,OAAO,wBAAwB,EAAE,OAAO,WACxC,OAAO,0BAA0B,EAAE,gBAAgB,QAI7D;;CAuHJ;iCA9NY,YAAY,GAAG,UAAU;qBAJjB,gBAAgB"}
+{"version":3,"file":"separatorView.d.ts","sourceRoot":"","sources":["../../../../src/view/gridView/separatorView.js"],"names":[],"mappings":"AAwOA;;;GAGG;AACH,iDAHW,OAAO,oBAAoB,EAAE,cAAc,GAAG,OAAO,GAAG,SAAS,GAC/D,OAAO,oBAAoB,EAAE,cAAc,GAAG,IAAI,CAiB9D;AAzOD;;GAEG;AACH;IAyBI;;;;;;;;;OASG;IACH,+EATW;QACN,SAAS,EAAE,kBAAkB,CAAC;QAC9B,KAAK,EAAE,OAAO,oBAAoB,EAAE,cAAc,CAAC;QACnD,OAAO,EAAE,OAAO,4BAA4B,EAAE,OAAO,CAAC;QACtD,YAAY,EAAE,OAAO,qBAAqB,EAAE,OAAO,CAAC;QACpD,UAAU,EAAE,OAAO,YAAY,EAAE,OAAO,CAAC;QACzC,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAA;KACpC,EAuBH;IAED;;OAEG;IACH,YAFa,QAAQ,CAIpB;IAED,oBAEC;IAED;;;;;;;OAOG;IACH,mBAPW,OAAO,yBAAyB,EAAE,OAAO,EAAE,SAC3C,MAAM,UACN,OAAO,wBAAwB,EAAE,OAAO,eACxC,CAAC,SAAS,EAAE,KAAK,GAAG,QAAQ,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,iBACtD,OAAO,YACP,OAAO,sBAAsB,EAAE,OAAO,QAKhD;IAED;;;;OAIG;IACH,gBAJW,OAAO,6CAA6C,EAAE,OAAO,UAC7D,OAAO,wBAAwB,EAAE,OAAO,WACxC,OAAO,0BAA0B,EAAE,gBAAgB,QAI7D;;CAwHJ;iCA/NY,YAAY,GAAG,UAAU;qBAPjB,gBAAgB"}

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

@@ -1,5 +1,8 @@
 import UnitView from "../unitView.js";
-import { markViewAsNonAddressable } from "../viewSelectors.js";
+import {
+    markViewAsChrome,
+    markViewAsNonAddressable,
+} from "../viewSelectors.js";
 
 /**
  * @typedef {"horizontal" | "vertical"} SeparatorDirection
@@ -221,6 +224,7 @@ export default class SeparatorView {
         );
 
         markViewAsNonAddressable(view, { skipSubtree: true });
+        markViewAsChrome(view, { skipSubtree: true });
 
         return view;
     }

package/dist/src/view/testUtils.d.ts

@@ -17,23 +17,50 @@ export function createAndInitialize<V extends import("./view.js").default>(spec:
     noData: boolean;
     implicitRoot: boolean;
 }): Promise<V>;
+/**
+ * Renders a view hierarchy into a debugging layout tree that records the
+ * rendered view coordinates.
+ *
+ * @param {View} view
+ * @param {import("./layout/rectangle.js").default} [coords]
+ */
+export function renderToLayout(view: View, coords?: import("./layout/rectangle.js").default): {
+    viewName: string;
+    coords: string;
+    children: /*elided*/ any[];
+    addChild(viewCoords: /*elided*/ any): void;
+};
+/**
+ * Creates a wrapped view hierarchy and renders it into a debugging layout tree.
+ *
+ * @param {RootSpec} spec
+ * @param {import("./viewFactory.js").ViewFactoryOptions} [viewFactoryOptions]
+ * @param {import("./layout/rectangle.js").default} [coords]
+ */
+export function specToLayout(spec: RootSpec, viewFactoryOptions?: import("./viewFactory.js").ViewFactoryOptions, coords?: import("./layout/rectangle.js").default): Promise<{
+    viewName: string;
+    coords: string;
+    children: /*elided*/ any[];
+    addChild(viewCoords: /*elided*/ any): void;
+}>;
 export { createHeadlessEngine };
 /**
- * Utils for Jest tests
+ * Utils for tests
  * TODO: Find a better place and convention
  */
 export type RootSpec = import("../spec/root.js").RootSpec;
 /**
- * Utils for Jest tests
+ * Utils for tests
  * TODO: Find a better place and convention
  */
 export type ViewContext = import("../types/viewContext.js").default;
 /**
- * Utils for Jest tests
+ * Utils for tests
  * TODO: Find a better place and convention
  */
 export type BroadcastingViewContext = ViewContext & {
     emitBroadcast: (root: import("./view.js").default, type: import("../genomeSpy.js").BroadcastEventType, payload?: any) => void;
 };
+import View from "./view.js";
 import { createHeadlessEngine } from "../genomeSpy/headlessBootstrap.js";
 //# sourceMappingURL=testUtils.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"testUtils.d.ts","sourceRoot":"","sources":["../../../src/view/testUtils.js"],"names":[],"mappings":"AA4BA;;;GAGG;AACH,2DAHW,OAAO,kBAAkB,EAAE,kBAAkB,6CAOvD;AAED;;;GAGG;AACH,uEAHW,OAAO,kBAAkB,EAAE,kBAAkB,GAC3C,uBAAuB,CAmCnC;AAGS,uBAAC,CAAC,SAAS,OAAO,WAAW,EAAE,OAAO,QAAQ,QAAQ,aAAa;IAAE,KAAI,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,CAAC,CAAA;CAAE,uBAAuB,OAAO,kBAAkB,EAAE,kBAAkB,GAAK,OAAO,CAAC,CAAC,CAAC,CAAA;AAqBhL,oCAAC,CAAC,SAAS,OAAO,WAAW,EAAE,OAAO,QAAQ,QAAQ,aAAa;IAAE,KAAI,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,CAAC,CAAA;CAAE,YAAY,WAAW,YAAY;IAAC,MAAM,EAAE,OAAO,CAAC;IAAC,YAAY,EAAE,OAAO,CAAA;CAAC,GAAK,OAAO,CAAC,CAAC,CAAC,CAAA;;;;;;uBA/FpL,OAAO,iBAAiB,EAAE,QAAQ;;;;;0BAClC,OAAO,yBAAyB,EAAE,OAAO;;;;;sCACzC,WAAW,GAAG;IACtB,aAAa,EAAE,CACb,IAAI,EAAE,OAAO,WAAW,EAAE,OAAO,EACjC,IAAI,EAAE,OAAO,iBAAiB,EAAE,kBAAkB,EAClD,OAAO,CAAC,EAAE,GAAG,KACV,IAAI,CAAA;CACV;qCAcG,mCAAmC"}
+{"version":3,"file":"testUtils.d.ts","sourceRoot":"","sources":["../../../src/view/testUtils.js"],"names":[],"mappings":"AAkCA;;;GAGG;AACH,2DAHW,OAAO,kBAAkB,EAAE,kBAAkB,6CAOvD;AAED;;;GAGG;AACH,uEAHW,OAAO,kBAAkB,EAAE,kBAAkB,GAC3C,uBAAuB,CAmCnC;AAGS,uBAAC,CAAC,SAAS,OAAO,WAAW,EAAE,OAAO,QAAQ,QAAQ,aAAa;IAAE,KAAI,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,CAAC,CAAA;CAAE,uBAAuB,OAAO,kBAAkB,EAAE,kBAAkB,GAAK,OAAO,CAAC,CAAC,CAAC,CAAA;AAqBhL,oCAAC,CAAC,SAAS,OAAO,WAAW,EAAE,OAAO,QAAQ,QAAQ,aAAa;IAAE,KAAI,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,CAAC,CAAA;CAAE,YAAY,WAAW,YAAY;IAAC,MAAM,EAAE,OAAO,CAAC;IAAC,YAAY,EAAE,OAAO,CAAA;CAAC,GAAK,OAAO,CAAC,CAAC,CAAC,CAAA;AAqBjM;;;;;;GAMG;AACH,qCAHW,IAAI,WACJ,OAAO,uBAAuB,EAAE,OAAO;;;;;EAoBjD;AAED;;;;;;GAMG;AACH,mCAJW,QAAQ,uBACR,OAAO,kBAAkB,EAAE,kBAAkB,WAC7C,OAAO,uBAAuB,EAAE,OAAO;;;;;GASjD;;;;;;uBAnKY,OAAO,iBAAiB,EAAE,QAAQ;;;;;0BAClC,OAAO,yBAAyB,EAAE,OAAO;;;;;sCACzC,WAAW,GAAG;IACtB,aAAa,EAAE,CACb,IAAI,EAAE,OAAO,WAAW,EAAE,OAAO,EACjC,IAAI,EAAE,OAAO,iBAAiB,EAAE,kBAAkB,EAClD,OAAO,CAAC,EAAE,GAAG,KACV,IAAI,CAAA;CACV;iBAca,WAAW;qCAMrB,mCAAmC"}

package/dist/src/view/testUtils.js

@@ -1,5 +1,5 @@
 /**
- * Utils for Jest tests
+ * Utils for tests
  * TODO: Find a better place and convention
  *
  * @typedef {import("../spec/root.js").RootSpec} RootSpec
@@ -13,7 +13,10 @@
  * }} BroadcastingViewContext
  */
 
-import { checkForDuplicateScaleNames } from "./viewUtils.js";
+import {
+    calculateCanvasSize,
+    checkForDuplicateScaleNames,
+} from "./viewUtils.js";
 import {
     initializeViewSubtree,
     loadViewSubtreeData,
@@ -21,6 +24,9 @@ import {
 import { VIEW_ROOT_NAME } from "./viewFactory.js";
 import UnitView from "./unitView.js";
 import ContainerView from "./containerView.js";
+import View from "./view.js";
+import Rectangle from "./layout/rectangle.js";
+import DebugginViewRenderingContext from "./renderingContext/debuggingViewRenderingContext.js";
 import {
     createHeadlessEngine,
     createHeadlessViewContext,
@@ -118,4 +124,47 @@ export async function createAndInitialize(spec, viewClass) {
     return view;
 }
 
+/**
+ * Renders a view hierarchy into a debugging layout tree that records the
+ * rendered view coordinates.
+ *
+ * @param {View} view
+ * @param {import("./layout/rectangle.js").default} [coords]
+ */
+export function renderToLayout(view, coords) {
+    const renderingContext = new DebugginViewRenderingContext({});
+
+    const canvasSize = calculateCanvasSize(view);
+    const rect =
+        coords ??
+        Rectangle.create(
+            0,
+            0,
+            canvasSize.width ?? 1500,
+            canvasSize.height ?? 1000
+        );
+
+    view.render(renderingContext, rect, {
+        firstFacet: true,
+    });
+
+    return renderingContext.getLayout();
+}
+
+/**
+ * Creates a wrapped view hierarchy and renders it into a debugging layout tree.
+ *
+ * @param {RootSpec} spec
+ * @param {import("./viewFactory.js").ViewFactoryOptions} [viewFactoryOptions]
+ * @param {import("./layout/rectangle.js").default} [coords]
+ */
+export async function specToLayout(spec, viewFactoryOptions = {}, coords) {
+    const view = await create(/** @type {any} */ (spec), View, {
+        wrapRoot: true,
+        ...viewFactoryOptions,
+    });
+
+    return renderToLayout(view, coords);
+}
+
 export { createHeadlessEngine };

package/dist/src/view/viewSelectors.d.ts

@@ -19,6 +19,20 @@ export function getImportScopeInfo(view: import("./view.js").default): ImportSco
  * @param {AddressableOptions} [options]
  */
 export function markViewAsNonAddressable(view: import("./view.js").default, options?: AddressableOptions): void;
+/**
+ * Marks a view as decorative chrome.
+ *
+ * @param {import("./view.js").default} view
+ * @param {ChromeOptions} [options]
+ */
+export function markViewAsChrome(view: import("./view.js").default, options?: ChromeOptions): void;
+/**
+ * Returns whether a view has been marked as decorative chrome.
+ *
+ * @param {import("./view.js").default} view
+ * @returns {boolean}
+ */
+export function isChromeView(view: import("./view.js").default): boolean;
 /**
  * Returns the import scope chain for a view, using named import instances.
  *
@@ -55,6 +69,20 @@ export function makeParamSelectorKey(selector: ParamSelector): string;
  * @returns {import("./view.js").default[]}
  */
 export function getAddressableViews(root: import("./view.js").default): import("./view.js").default[];
+/**
+ * Visits all non-chrome views in the hierarchy.
+ *
+ * @param {import("./view.js").default} root
+ * @param {import("./view.js").Visitor} visitor
+ */
+export function visitNonChromeViews(root: import("./view.js").default, visitor: import("./view.js").Visitor): void;
+/**
+ * Returns non-chrome views in the hierarchy.
+ *
+ * @param {import("./view.js").default} root
+ * @returns {import("./view.js").default[]}
+ */
+export function getNonChromeViews(root: import("./view.js").default): import("./view.js").default[];
 /**
  * Visits all addressable views in the hierarchy.
  *
@@ -107,24 +135,20 @@ export function validateSelectorConstraints(root: import("./view.js").default):
  * names or runtime-only nodes.
  */
 /**
- * @typedef {{ scope: string[], view: string }} ViewSelector
- * @typedef {{ scope: string[], param: string }} ParamSelector
+ * @typedef {import("./viewUtilTypes.d.ts").ViewSelector} ViewSelector
+ * @typedef {import("./viewUtilTypes.d.ts").ParamSelector} ParamSelector
  * @typedef {{ view: import("./view.js").default, param: import("../spec/parameter.js").Parameter, selector: ParamSelector }} BookmarkableParamEntry
  * @typedef {{ message: string, scope: string[] }} SelectorValidationIssue
  * @typedef {{ name: string | null }} ImportScopeInfo
  * @typedef {"exclude" | "excludeSubtree"} AddressableOverride
+ * @typedef {"exclude" | "excludeSubtree"} ChromeOverride
  * @typedef {{ skipSubtree?: boolean }} AddressableOptions
+ * @typedef {{ skipSubtree?: boolean }} ChromeOptions
  * @typedef {{ view: import("./view.js").default, param: import("../spec/parameter.js").Parameter }} ResolvedParam
  */
 export const PARAM_SELECTOR_KEY_PREFIX: "p:";
-export type ViewSelector = {
-    scope: string[];
-    view: string;
-};
-export type ParamSelector = {
-    scope: string[];
-    param: string;
-};
+export type ViewSelector = import("./viewUtilTypes.d.ts").ViewSelector;
+export type ParamSelector = import("./viewUtilTypes.d.ts").ParamSelector;
 export type BookmarkableParamEntry = {
     view: import("./view.js").default;
     param: import("../spec/parameter.js").Parameter;
@@ -138,9 +162,13 @@ export type ImportScopeInfo = {
     name: string | null;
 };
 export type AddressableOverride = "exclude" | "excludeSubtree";
+export type ChromeOverride = "exclude" | "excludeSubtree";
 export type AddressableOptions = {
     skipSubtree?: boolean;
 };
+export type ChromeOptions = {
+    skipSubtree?: boolean;
+};
 export type ResolvedParam = {
     view: import("./view.js").default;
     param: import("../spec/parameter.js").Parameter;

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

@@ -1 +1 @@
-{"version":3,"file":"viewSelectors.d.ts","sourceRoot":"","sources":["../../../src/view/viewSelectors.js"],"names":[],"mappings":"AAiCA;;;;;GAKG;AACH,6CAHW,OAAO,WAAW,EAAE,OAAO,aAC3B,MAAM,GAAG,IAAI,QAQvB;AAED;;;;;GAKG;AACH,yCAHW,OAAO,WAAW,EAAE,OAAO,GACzB,eAAe,GAAG,SAAS,CAIvC;AAED;;;;;GAKG;AACH,+CAHW,OAAO,WAAW,EAAE,OAAO,YAC3B,kBAAkB,QAM5B;AAED;;;;;GAKG;AACH,wCAHW,OAAO,WAAW,EAAE,OAAO,GACzB,MAAM,EAAE,CAgBpB;AAED;;;;;GAKG;AACH,sCAHW,OAAO,WAAW,EAAE,OAAO,GACzB,YAAY,CAYxB;AAED;;;;;;GAMG;AACH,uCAJW,OAAO,WAAW,EAAE,OAAO,aAC3B,MAAM,GACJ,aAAa,CAazB;AAED;;;;;GAKG;AACH,+CAHW,aAAa,GACX,MAAM,CAQlB;AAED;;;;;GAKG;AACH,0CAHW,OAAO,WAAW,EAAE,OAAO,GACzB,OAAO,WAAW,EAAE,OAAO,EAAE,CAWzC;AAED;;;;;GAKG;AACH,4CAHW,OAAO,WAAW,EAAE,OAAO,WAC3B,OAAO,WAAW,EAAE,OAAO,QAerC;AAED;;;;;;GAMG;AACH,0CAJW,OAAO,WAAW,EAAE,OAAO,YAC3B,YAAY,GACV,OAAO,WAAW,EAAE,OAAO,GAAG,SAAS,CAoCnD;AAED;;;;;;GAMG;AACH,2CAJW,OAAO,WAAW,EAAE,OAAO,YAC3B,aAAa,GACX,aAAa,GAAG,SAAS,CAuCrC;AAED;;;;;GAKG;AACH,8CAHW,OAAO,WAAW,EAAE,OAAO,WAC3B,CAAC,KAAK,EAAE,sBAAsB,KAAK,IAAI,QAyBjD;AAED;;;;;GAKG;AACH,4CAHW,OAAO,WAAW,EAAE,OAAO,GACzB,sBAAsB,EAAE,CAOpC;AAED;;;;;GAKG;AACH,kDAHW,OAAO,WAAW,EAAE,OAAO,GACzB,uBAAuB,EAAE,CAarC;AArUD;;;;;;GAMG;AAEH;;;;;;;;;GASG;AAEH,wCAAyC,IAAI,CAAC;2BAVjC;IAAE,KAAK,EAAE,MAAM,EAAE,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE;4BACjC;IAAE,KAAK,EAAE,MAAM,EAAE,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE;qCAClC;IAAE,IAAI,EAAE,OAAO,WAAW,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,OAAO,sBAAsB,EAAE,SAAS,CAAC;IAAC,QAAQ,EAAE,aAAa,CAAA;CAAE;sCAC/G;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,EAAE,CAAA;CAAE;8BACpC;IAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE;kCACvB,SAAS,GAAG,gBAAgB;iCAC5B;IAAE,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE;4BACzB;IAAE,IAAI,EAAE,OAAO,WAAW,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,OAAO,sBAAsB,EAAE,SAAS,CAAA;CAAE"}
+{"version":3,"file":"viewSelectors.d.ts","sourceRoot":"","sources":["../../../src/view/viewSelectors.js"],"names":[],"mappings":"AAsCA;;;;;GAKG;AACH,6CAHW,OAAO,WAAW,EAAE,OAAO,aAC3B,MAAM,GAAG,IAAI,QAQvB;AAED;;;;;GAKG;AACH,yCAHW,OAAO,WAAW,EAAE,OAAO,GACzB,eAAe,GAAG,SAAS,CAIvC;AAED;;;;;GAKG;AACH,+CAHW,OAAO,WAAW,EAAE,OAAO,YAC3B,kBAAkB,QAM5B;AAED;;;;;GAKG;AACH,uCAHW,OAAO,WAAW,EAAE,OAAO,YAC3B,aAAa,QAMvB;AAED;;;;;GAKG;AACH,mCAHW,OAAO,WAAW,EAAE,OAAO,GACzB,OAAO,CAInB;AAED;;;;;GAKG;AACH,wCAHW,OAAO,WAAW,EAAE,OAAO,GACzB,MAAM,EAAE,CAgBpB;AAED;;;;;GAKG;AACH,sCAHW,OAAO,WAAW,EAAE,OAAO,GACzB,YAAY,CAYxB;AAED;;;;;;GAMG;AACH,uCAJW,OAAO,WAAW,EAAE,OAAO,aAC3B,MAAM,GACJ,aAAa,CAazB;AAED;;;;;GAKG;AACH,+CAHW,aAAa,GACX,MAAM,CAQlB;AAED;;;;;GAKG;AACH,0CAHW,OAAO,WAAW,EAAE,OAAO,GACzB,OAAO,WAAW,EAAE,OAAO,EAAE,CAWzC;AAED;;;;;GAKG;AACH,0CAHW,OAAO,WAAW,EAAE,OAAO,WAC3B,OAAO,WAAW,EAAE,OAAO,QAerC;AAED;;;;;GAKG;AACH,wCAHW,OAAO,WAAW,EAAE,OAAO,GACzB,OAAO,WAAW,EAAE,OAAO,EAAE,CAWzC;AAED;;;;;GAKG;AACH,4CAHW,OAAO,WAAW,EAAE,OAAO,WAC3B,OAAO,WAAW,EAAE,OAAO,QAerC;AAED;;;;;;GAMG;AACH,0CAJW,OAAO,WAAW,EAAE,OAAO,YAC3B,YAAY,GACV,OAAO,WAAW,EAAE,OAAO,GAAG,SAAS,CAoCnD;AAED;;;;;;GAMG;AACH,2CAJW,OAAO,WAAW,EAAE,OAAO,YAC3B,aAAa,GACX,aAAa,GAAG,SAAS,CAuCrC;AAED;;;;;GAKG;AACH,8CAHW,OAAO,WAAW,EAAE,OAAO,WAC3B,CAAC,KAAK,EAAE,sBAAsB,KAAK,IAAI,QAyBjD;AAED;;;;;GAKG;AACH,4CAHW,OAAO,WAAW,EAAE,OAAO,GACzB,sBAAsB,EAAE,CAOpC;AAED;;;;;GAKG;AACH,kDAHW,OAAO,WAAW,EAAE,OAAO,GACzB,uBAAuB,EAAE,CAarC;AAtYD;;;;;;GAMG;AAEH;;;;;;;;;;;GAWG;AAEH,wCAAyC,IAAI,CAAC;2BAZjC,OAAO,sBAAsB,EAAE,YAAY;4BAC3C,OAAO,sBAAsB,EAAE,aAAa;qCAC5C;IAAE,IAAI,EAAE,OAAO,WAAW,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,OAAO,sBAAsB,EAAE,SAAS,CAAC;IAAC,QAAQ,EAAE,aAAa,CAAA;CAAE;sCAC/G;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,EAAE,CAAA;CAAE;8BACpC;IAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE;kCACvB,SAAS,GAAG,gBAAgB;6BAC5B,SAAS,GAAG,gBAAgB;iCAC5B;IAAE,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE;4BACzB;IAAE,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE;4BACzB;IAAE,IAAI,EAAE,OAAO,WAAW,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,OAAO,sBAAsB,EAAE,SAAS,CAAA;CAAE"}