@genome-spy/core 0.66.1 → 0.68.0

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

@@ -16,6 +16,7 @@ import LayerView from "../layerView.js";
 import UnitView from "../unitView.js";
 import { interactionToZoom } from "../zoom.js";
 import GridChild from "./gridChild.js";
+import SeparatorView, { resolveSeparatorProps } from "./separatorView.js";
 
 /**
  * Modeled after: https://vega.github.io/vega/docs/layout/
@@ -69,6 +70,9 @@ export default class GridView extends ContainerView {
 
     #childSerial = 0;
 
+    /** @type {Partial<Record<"horizontal" | "vertical", SeparatorView>>} */
+    #separatorViews = {};
+
     /**
      *
      * @param {import("../../spec/view.js").AnyConcatSpec} spec
@@ -97,6 +101,20 @@ export default class GridView extends ContainerView {
         this.#children = [];
 
         this.wrappingFacet = false;
+
+        const separatorProps = resolveSeparatorProps(spec.separator);
+        if (separatorProps) {
+            for (const direction of getSeparatorDirections(spec)) {
+                this.#separatorViews[direction] = new SeparatorView({
+                    direction,
+                    props: separatorProps,
+                    context: this.context,
+                    layoutParent: this,
+                    dataParent: this,
+                    getName: (prefix) => this.getNextAutoName(prefix),
+                });
+            }
+        }
     }
 
     /**
@@ -130,6 +148,7 @@ export default class GridView extends ContainerView {
         const gridChild = new GridChild(view, this, this.#childSerial);
         this.#childSerial++;
         this.#children.splice(index, 0, gridChild);
+        this.invalidateSizeCache();
         return gridChild;
     }
 
@@ -162,6 +181,7 @@ export default class GridView extends ContainerView {
         }
         this.#disposeGridChild(gridChild);
         this.#children.splice(index, 1);
+        this.invalidateSizeCache();
     }
 
     get #visibleChildren() {
@@ -188,6 +208,7 @@ export default class GridView extends ContainerView {
         for (const view of views) {
             this.appendChild(view);
         }
+        this.invalidateSizeCache();
     }
 
     /**
@@ -273,6 +294,10 @@ export default class GridView extends ContainerView {
             yield* gridChild.getChildren();
         }
 
+        for (const separatorView of Object.values(this.#separatorViews)) {
+            yield separatorView.view;
+        }
+
         for (const axisView of Object.values(this.#sharedAxes)) {
             yield axisView;
         }
@@ -519,8 +544,10 @@ export default class GridView extends ContainerView {
 
         context.pushView(this, coords);
 
+        const devicePixelRatio = context.getDevicePixelRatio();
+
         const flexOpts = {
-            devicePixelRatio: context.getDevicePixelRatio(),
+            devicePixelRatio,
         };
         const columnFlexCoords = mapToPixelCoords(
             this.#makeFlexItems("column"),
@@ -543,6 +570,10 @@ export default class GridView extends ContainerView {
         const round = (x) =>
             Math.round(x * devicePixelRatio) / devicePixelRatio;
 
+        // Two-phase render: compute layout once, then render backgrounds/separators
+        // before gridlines/axes/marks without recomputing per-child coords.
+        const renderItems = [];
+
         for (const [i, gridChild] of this.#visibleChildren.entries()) {
             const {
                 view,
@@ -619,10 +650,79 @@ export default class GridView extends ContainerView {
                 ? viewportCoords.intersect(options.clipRect)
                 : viewportCoords;
 
-            background?.render(context, clippedChildCoords, {
+            renderItems.push({
+                col,
+                row,
+                view,
+                axes,
+                gridLines,
+                background,
+                backgroundStroke,
+                title,
+                selectionRect,
+                viewportCoords,
+                viewCoords,
+                clippedChildCoords,
+                viewWidth,
+                viewHeight,
+                scrollable,
+                gridChild,
+            });
+        }
+
+        for (const item of renderItems) {
+            item.background?.render(context, item.clippedChildCoords, {
                 ...options,
                 clipRect: undefined,
             });
+        }
+
+        const gridOverhang = this.#getGridOverhang();
+
+        const verticalSeparator = this.#separatorViews.vertical;
+        if (verticalSeparator) {
+            verticalSeparator.update(
+                columnFlexCoords,
+                grid.nCols,
+                coords,
+                (direction, index) => this.#getViewSlot(direction, index),
+                this.wrappingFacet,
+                gridOverhang
+            );
+            verticalSeparator.render(context, coords, options);
+        }
+
+        const horizontalSeparator = this.#separatorViews.horizontal;
+        if (horizontalSeparator) {
+            horizontalSeparator.update(
+                rowFlexCoords,
+                grid.nRows,
+                coords,
+                (direction, index) => this.#getViewSlot(direction, index),
+                this.wrappingFacet,
+                gridOverhang
+            );
+            horizontalSeparator.render(context, coords, options);
+        }
+
+        for (const item of renderItems) {
+            const {
+                view,
+                axes,
+                gridLines,
+                backgroundStroke,
+                title,
+                selectionRect,
+                viewportCoords,
+                viewCoords,
+                clippedChildCoords,
+                viewWidth,
+                viewHeight,
+                scrollable,
+                gridChild,
+                col,
+                row,
+            } = item;
 
             for (const gridLineView of Object.values(gridLines)) {
                 gridLineView.render(context, viewportCoords, options);
@@ -889,6 +989,23 @@ export function isClippedChildren(view) {
     return clipped;
 }
 
+/**
+ * @param {import("../../spec/view.js").AnyConcatSpec} spec
+ * @returns {("horizontal" | "vertical")[]}
+ */
+function getSeparatorDirections(spec) {
+    // vconcat = horizontal separators, hconcat = vertical separators, concat = both
+    if ("vconcat" in spec) {
+        return ["horizontal"];
+    }
+
+    if ("hconcat" in spec) {
+        return ["vertical"];
+    }
+
+    return ["horizontal", "vertical"];
+}
+
 /**
  *
  * @param {import("../layout/rectangle.js").default} coords

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":"AAKA;;;;;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,EAwH/D;IAvID;;;;;;OAMG;IACH,uBAAmB;IAiDf;;;;MAAoB;IAiFxB,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;;;;;8BAlSY,YAAY,GAAG,UAAU;qBANjB,gBAAgB;sBADf,wBAAwB"}
+{"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,EA0H/D;IAzID;;;;;;OAMG;IACH,uBAAmB;IAmDf;;;;MAAoB;IAiFxB,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;;;;;8BApSY,YAAY,GAAG,UAAU;qBAPjB,gBAAgB;sBADf,wBAAwB"}

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

@@ -2,6 +2,7 @@ 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";
 
 /**
  * This class represents a scrollbar thumb that can be used within a grid view
@@ -77,6 +78,8 @@ export default class Scrollbar extends UnitView {
             }
         );
 
+        markViewAsNonAddressable(this, { skipSubtree: true });
+
         this.config = config;
         this.#scrollDirection = scrollDirection;
         this.#onViewportOffsetChange = options.onViewportOffsetChange;

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":"AAGA;IAYI;;;;OAIG;IACH,uBAJW,OAAO,gBAAgB,EAAE,OAAO,iBAChC,OAAO,qBAAqB,EAAE,eAAe,gBAC7C,OAAO,yBAAyB,EAAE,WAAW,EAqJvD;IAnKD;;;OAGG;IAEH,4DAA4D;IAC5D,gBADW,OAAO,qBAAqB,EAAE,eAAe,CACzC;IAEf,yBAAyB;IACzB,oBADW,MAAM,IAAI,CACF;CAmKtB;sBA/KqB,iBAAiB"}
+{"version":3,"file":"selectionRect.d.ts","sourceRoot":"","sources":["../../../../src/view/gridView/selectionRect.js"],"names":[],"mappings":"AAIA;IAYI;;;;OAIG;IACH,uBAJW,OAAO,gBAAgB,EAAE,OAAO,iBAChC,OAAO,qBAAqB,EAAE,eAAe,gBAC7C,OAAO,yBAAyB,EAAE,WAAW,EAmKvD;IAjLD;;;OAGG;IAEH,4DAA4D;IAC5D,gBADW,OAAO,qBAAqB,EAAE,eAAe,CACzC;IAEf,yBAAyB;IACzB,oBADW,MAAM,IAAI,CACF;CAiLtB;sBA9LqB,iBAAiB"}

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

@@ -1,5 +1,6 @@
 import { primaryPositionalChannels } from "../../encoder/encoder.js";
 import LayerView from "../layerView.js";
+import { markViewAsNonAddressable } from "../viewSelectors.js";
 
 export default class SelectionRect extends LayerView {
     /**
@@ -34,6 +35,7 @@ export default class SelectionRect extends LayerView {
         const layerSpec = {
             name: "selectionRect",
             configurableVisibility: false,
+            domainInert: true,
             resolve: {
                 scale: {
                     x: "forced",
@@ -46,12 +48,24 @@ export default class SelectionRect extends LayerView {
         };
 
         if (channels.includes("x")) {
-            layerSpec.encoding.x = { field: "_x", type: null, title: null };
-            layerSpec.encoding.x2 = { field: "_x2" };
+            layerSpec.encoding.x = {
+                field: "_x",
+                type: null,
+                title: null,
+            };
+            layerSpec.encoding.x2 = {
+                field: "_x2",
+            };
         }
         if (channels.includes("y")) {
-            layerSpec.encoding.y = { field: "_y", type: null, title: null };
-            layerSpec.encoding.y2 = { field: "_y2" };
+            layerSpec.encoding.y = {
+                field: "_y",
+                type: null,
+                title: null,
+            };
+            layerSpec.encoding.y2 = {
+                field: "_y2",
+            };
         }
 
         layerSpec.layer.push({
@@ -137,10 +151,11 @@ export default class SelectionRect extends LayerView {
             "selectionRect", // TODO: Serial
             {
                 blockEncodingInheritance: true,
-                contributesToScaleDomain: false,
             }
         );
 
+        markViewAsNonAddressable(this, { skipSubtree: true });
+
         /** @type {import("../paramMediator.js").ExprRefFunction} */
         this._selectionExpr = selectionExpr;
 

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

@@ -0,0 +1,51 @@
+/**
+ * @param {import("../../spec/view.js").SeparatorProps | boolean | undefined} separator
+ * @returns {import("../../spec/view.js").SeparatorProps | null}
+ */
+export function resolveSeparatorProps(separator: import("../../spec/view.js").SeparatorProps | boolean | undefined): import("../../spec/view.js").SeparatorProps | null;
+/**
+ * Draws separator rules for a single direction in a grid layout.
+ */
+export default class SeparatorView {
+    /**
+     * @param {{
+     *   direction: SeparatorDirection,
+     *   props: import("../../spec/view.js").SeparatorProps,
+     *   context: import("../../types/viewContext.js").default,
+     *   layoutParent: import("../containerView.js").default,
+     *   dataParent: import("../view.js").default,
+     *   getName: (prefix: string) => string
+     * }} options
+     */
+    constructor({ direction, props, context, layoutParent, dataParent, getName, }: {
+        direction: SeparatorDirection;
+        props: import("../../spec/view.js").SeparatorProps;
+        context: import("../../types/viewContext.js").default;
+        layoutParent: import("../containerView.js").default;
+        dataParent: import("../view.js").default;
+        getName: (prefix: string) => string;
+    });
+    /**
+     * @returns {UnitView}
+     */
+    get view(): UnitView;
+    /**
+     * @param {import("../layout/flexLayout.js").LocSize[]} flexCoords
+     * @param {number} count
+     * @param {import("../layout/rectangle.js").default} coords
+     * @param {(direction: "row" | "column", index: number) => number} getViewSlot
+     * @param {boolean} wrappingFacet
+     * @param {import("../layout/padding.js").default} overhang
+     */
+    update(flexCoords: import("../layout/flexLayout.js").LocSize[], count: number, coords: import("../layout/rectangle.js").default, getViewSlot: (direction: "row" | "column", index: number) => number, wrappingFacet: boolean, overhang: import("../layout/padding.js").default): void;
+    /**
+     * @param {import("../renderingContext/viewRenderingContext.js").default} context
+     * @param {import("../layout/rectangle.js").default} coords
+     * @param {import("../../types/rendering.js").RenderingOptions} options
+     */
+    render(context: import("../renderingContext/viewRenderingContext.js").default, coords: import("../layout/rectangle.js").default, options: import("../../types/rendering.js").RenderingOptions): void;
+    #private;
+}
+export type SeparatorDirection = "horizontal" | "vertical";
+import UnitView from "../unitView.js";
+//# sourceMappingURL=separatorView.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"separatorView.d.ts","sourceRoot":"","sources":["../../../../src/view/gridView/separatorView.js"],"names":[],"mappings":"AA2NA;;;GAGG;AACH,iDAHW,OAAO,oBAAoB,EAAE,cAAc,GAAG,OAAO,GAAG,SAAS,GAC/D,OAAO,oBAAoB,EAAE,cAAc,GAAG,IAAI,CAiB9D;AA/ND;;GAEG;AACH;IAsBI;;;;;;;;;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,EAqBH;IAED;;OAEG;IACH,YAFa,QAAQ,CAIpB;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;iCArNY,YAAY,GAAG,UAAU;qBAJjB,gBAAgB"}

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

@@ -0,0 +1,275 @@
+import UnitView from "../unitView.js";
+import { markViewAsNonAddressable } from "../viewSelectors.js";
+
+/**
+ * @typedef {"horizontal" | "vertical"} SeparatorDirection
+ */
+
+const DEFAULT_SEPARATOR_PROPS = Object.freeze({
+    size: 1,
+    color: "#ccc",
+    opacity: 1,
+    strokeDash: [4, 4],
+    strokeCap: "butt",
+});
+
+/**
+ * Draws separator rules for a single direction in a grid layout.
+ */
+export default class SeparatorView {
+    /** @type {SeparatorDirection} */
+    #direction;
+
+    /** @type {boolean} */
+    #includePlotMargin;
+
+    /** @type {UnitView} */
+    #view;
+
+    /** @type {import("../../data/flowNode.js").Datum[]} */
+    #data = [];
+
+    /** @type {number[]} */
+    #positions = [];
+
+    /** @type {{ x: number[]; y: number[] }} */
+    #domains = {
+        x: [0, 0],
+        y: [0, 0],
+    };
+
+    /**
+     * @param {{
+     *   direction: SeparatorDirection,
+     *   props: import("../../spec/view.js").SeparatorProps,
+     *   context: import("../../types/viewContext.js").default,
+     *   layoutParent: import("../containerView.js").default,
+     *   dataParent: import("../view.js").default,
+     *   getName: (prefix: string) => string
+     * }} options
+     */
+    constructor({
+        direction,
+        props,
+        context,
+        layoutParent,
+        dataParent,
+        getName,
+    }) {
+        this.#direction = direction;
+        this.#includePlotMargin = props.includePlotMargin ?? true;
+        const markProps = { ...props };
+        delete markProps.includePlotMargin;
+        this.#view = this.#createView(
+            markProps,
+            context,
+            layoutParent,
+            dataParent,
+            getName
+        );
+    }
+
+    /**
+     * @returns {UnitView}
+     */
+    get view() {
+        return this.#view;
+    }
+
+    /**
+     * @param {import("../layout/flexLayout.js").LocSize[]} flexCoords
+     * @param {number} count
+     * @param {import("../layout/rectangle.js").default} coords
+     * @param {(direction: "row" | "column", index: number) => number} getViewSlot
+     * @param {boolean} wrappingFacet
+     * @param {import("../layout/padding.js").default} overhang
+     */
+    update(flexCoords, count, coords, getViewSlot, wrappingFacet, overhang) {
+        this.#collectPositions(flexCoords, count, getViewSlot, wrappingFacet);
+        this.#updateDirection(coords, overhang);
+    }
+
+    /**
+     * @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) {
+        this.#view.render(context, coords, options);
+    }
+
+    /**
+     * @param {import("../layout/flexLayout.js").LocSize[]} flexCoords
+     * @param {number} count
+     * @param {(direction: "row" | "column", index: number) => number} getViewSlot
+     * @param {boolean} wrappingFacet
+     */
+    #collectPositions(flexCoords, count, getViewSlot, wrappingFacet) {
+        this.#positions.length = 0;
+
+        if (count < 2) {
+            return;
+        }
+
+        const axis = this.#direction === "vertical" ? "column" : "row";
+        const spacingOffset = wrappingFacet ? 3 : 2;
+
+        for (let index = 1; index < count; index++) {
+            const viewSlot = getViewSlot(axis, index);
+            const spacingSlot = viewSlot - spacingOffset;
+            const spacing = flexCoords[spacingSlot];
+            const location = spacing ? spacing.location : 0;
+            const size = spacing ? spacing.size : 0;
+            this.#positions.push(location + size / 2);
+        }
+    }
+
+    /**
+     * @param {import("../layout/rectangle.js").default} coords
+     * @param {import("../layout/padding.js").default} overhang
+     */
+    #updateDirection(coords, overhang) {
+        const xStart = this.#includePlotMargin ? 0 : overhang.left;
+        const xEnd = this.#includePlotMargin
+            ? coords.width
+            : coords.width - overhang.right;
+        const yStart = this.#includePlotMargin ? 0 : overhang.bottom;
+        const yEnd = this.#includePlotMargin
+            ? coords.height
+            : coords.height - overhang.top;
+
+        this.#data.length = this.#positions.length;
+
+        for (let i = 0; i < this.#positions.length; i++) {
+            const pos = this.#positions[i];
+            const entry = this.#data[i] ?? {};
+
+            if (this.#direction === "vertical") {
+                entry.x = pos;
+                entry.x2 = pos;
+                entry.y = yStart;
+                entry.y2 = yEnd;
+            } else {
+                const y = coords.height - pos;
+                entry.x = xStart;
+                entry.x2 = xEnd;
+                entry.y = y;
+                entry.y2 = y;
+            }
+
+            this.#data[i] = entry;
+        }
+
+        const dataSource =
+            /** @type {import("../../data/sources/inlineSource.js").default} */ (
+                this.#view.flowHandle?.dataSource
+            );
+
+        if (!dataSource) {
+            return;
+        }
+
+        dataSource.updateDynamicData(this.#data);
+
+        this.#domains.x[1] = coords.width;
+        this.#domains.y[1] = coords.height;
+
+        const xScale = this.#view.getScaleResolution("x")?.getScale();
+        if (xScale) {
+            xScale.domain(this.#domains.x);
+        }
+
+        const yScale = this.#view.getScaleResolution("y")?.getScale();
+        if (yScale) {
+            yScale.domain(this.#domains.y);
+        }
+    }
+
+    /**
+     * @param {Omit<import("../../spec/view.js").SeparatorProps, "includePlotMargin">} props
+     * @param {import("../../types/viewContext.js").default} context
+     * @param {import("../containerView.js").default} layoutParent
+     * @param {import("../view.js").default} dataParent
+     * @param {(prefix: string) => string} getName
+     * @returns {UnitView}
+     */
+    #createView(props, context, layoutParent, dataParent, getName) {
+        const spec = createSeparatorSpec(props);
+        const name =
+            this.#direction === "horizontal"
+                ? getName("separatorHorizontal")
+                : getName("separatorVertical");
+
+        const view = new UnitView(
+            spec,
+            context,
+            layoutParent,
+            dataParent,
+            name,
+            {
+                blockEncodingInheritance: true,
+            }
+        );
+
+        markViewAsNonAddressable(view, { skipSubtree: true });
+
+        return view;
+    }
+}
+
+/**
+ * @param {import("../../spec/view.js").SeparatorProps | boolean | undefined} separator
+ * @returns {import("../../spec/view.js").SeparatorProps | null}
+ */
+export function resolveSeparatorProps(separator) {
+    if (!separator) {
+        return null;
+    }
+
+    const props =
+        separator === true
+            ? { ...DEFAULT_SEPARATOR_PROPS }
+            : { ...DEFAULT_SEPARATOR_PROPS, ...separator };
+
+    if (props.strokeDash === DEFAULT_SEPARATOR_PROPS.strokeDash) {
+        props.strokeDash = DEFAULT_SEPARATOR_PROPS.strokeDash.slice();
+    }
+
+    return props;
+}
+
+/**
+ * @param {Omit<import("../../spec/view.js").SeparatorProps, "includePlotMargin">} props
+ * @returns {import("../../spec/view.js").UnitSpec}
+ */
+function createSeparatorSpec(props) {
+    return {
+        configurableVisibility: false,
+        domainInert: true,
+        data: { values: [] },
+        resolve: {
+            scale: { x: "excluded", y: "excluded" },
+            axis: { x: "excluded", y: "excluded" },
+        },
+        mark: {
+            ...props,
+            type: "rule",
+            clip: props.clip ?? false,
+            tooltip: null,
+        },
+        encoding: {
+            x: {
+                field: "x",
+                type: "quantitative",
+                scale: { nice: false, zero: false },
+            },
+            y: {
+                field: "y",
+                type: "quantitative",
+                scale: { nice: false, zero: false },
+            },
+            x2: { field: "x2" },
+            y2: { field: "y2" },
+        },
+    };
+}

package/dist/src/view/layerView.js

@@ -37,13 +37,13 @@ export default class LayerView extends ContainerView {
     async initializeChildren() {
         this.#children = await Promise.all(
             this.spec.layer.map(
-                (childSpec, i) =>
+                (childSpec) =>
                     /** @type {(Promise<LayerView | import("./unitView.js").default>)} */ (
                         this.context.createOrImportView(
                             childSpec,
                             this,
                             this,
-                            "grid" + i,
+                            this.getNextAutoName("layer"),
                             (importedSpec) => {
                                 if (
                                     !isLayerSpec(importedSpec) &&
@@ -123,7 +123,7 @@ export default class LayerView extends ContainerView {
                 view.disposeSubtree();
                 this.#children.splice(index, 1);
             },
-            defaultName: (index) => "layer" + index,
+            defaultName: () => this.getNextAutoName("layer"),
         });
     }
 

package/dist/src/view/layout/flexLayout.d.ts

@@ -70,36 +70,6 @@ export function isSizeDef(spec: any): spec is SizeDef;
  * @returns {SizeDef}
  */
 export function parseSizeDef(size: "container" | number | SizeDef | import("../../spec/view.js").Step): SizeDef;
-/**
- * Interpolates between two LocSizes
- *
- * @param {LocSize} from
- * @param {LocSize} to
- * @param {function():number} ratio
- * @returns {LocSize}
- */
-export function interpolateLocSizes(from: LocSize, to: LocSize, ratio: () => number): LocSize;
-/**
- * Wraps a LocSize and allows scrolling.
- *
- * @param {LocSize} locSize
- * @param {number | function():number} offset
- * @returns {LocSize}
- */
-export function translateLocSize(locSize: LocSize, offset: number | (() => number)): LocSize;
-/**
- * Wraps a LocSize and allows scaling.
- *
- * @param {LocSize} locSize
- * @param {number | function():number} factor
- * @returns {LocSize}
- */
-export function scaleLocSize(locSize: LocSize, factor: number | (() => number)): LocSize;
-/**
- * @param {LocSize} locSize
- * @param {number} value
- */
-export function locSizeEncloses(locSize: LocSize, value: number): boolean;
 export class FlexDimensions {
     /**
      *

package/dist/src/view/layout/flexLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"flexLayout.d.ts","sourceRoot":"","sources":["../../../../src/view/layout/flexLayout.js"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wCALW,OAAO,EAAE,iBACT,MAAM,mDACN,WAAW,GACT,OAAO,EAAE,CAqGrB;AAED;;;;;GAKG;AACH,sCAHW,QAAQ,CAAC,OAAO,CAAC,gBACjB,WAAW,UAQrB;AAED;;;GAGG;AACH,sCAHW,QAAQ,CAAC,OAAO,CAAC,GACf,OAAO,CAWnB;AAED;;;GAGG;AACH,oCAFW,OAAO,EAAE,WAInB;AAED;;;GAGG;AACH,sCAFW,OAAO,EAAE;;;EASnB;AA4ED;;;;GAIG;AACH,uCAFW,OAAO,WAIjB;AAWD;;;;GAIG;AACH,gCAHW,GAAC,GACC,IAAI,IAAI,OAAO,CAI3B;AAED;;;;GAIG;AACH,mCAHW,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,oBAAoB,EAAE,IAAI,GAChE,OAAO,CAiBnB;AAID;;;;;;;GAOG;AACH,0CALW,OAAO,MACP,OAAO,SACP,MAAW,MAAM,GACf,OAAO,CA4BnB;AAED;;;;;;GAMG;AACH,0CAJW,OAAO,UACP,MAAM,IAAG,MAAW,MAAM,CAAA,GACxB,OAAO,CAanB;AAED;;;;;;GAMG;AACH,sCAJW,OAAO,UACP,MAAM,IAAG,MAAW,MAAM,CAAA,GACxB,OAAO,CAanB;AAED;;;GAGG;AACH,yCAHW,OAAO,SACP,MAAM,WAIhB;AA/MD;IACI;;;;OAIG;IACH,mBAHW,OAAO,UACP,OAAO,EAQjB;IAJG,gBAAgB;IAChB,wBAAkB;IAClB,gBAAgB;IAChB,yBAAoB;IAGxB;;;;OAIG;IACH,oBAFW,OAAO,cAAc,EAAE,OAAO,kBAIxC;IAED;;;;OAIG;IACH,yBAFW,OAAO,cAAc,EAAE,OAAO,kBAIxC;IAmBD;;;;OAIG;IACH,aAFa,OAAO,CAInB;;CACJ;AAED;;;;GAIG;AACH,2BAFU,OAAO,CAKd;AAEH,iDAGE;;;;;;;;SAlPQ,MAAM;;;;WACN,MAAM;;;;;;cAGN,MAAM;UACN,MAAM;;;;;;;;;;;;;;cAGN,MAAM;;;;;uBACN,MAAM;;;;aAEN,MAAM;;;;cACN,OAAO"}
+{"version":3,"file":"flexLayout.d.ts","sourceRoot":"","sources":["../../../../src/view/layout/flexLayout.js"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wCALW,OAAO,EAAE,iBACT,MAAM,mDACN,WAAW,GACT,OAAO,EAAE,CAqGrB;AAED;;;;;GAKG;AACH,sCAHW,QAAQ,CAAC,OAAO,CAAC,gBACjB,WAAW,UAQrB;AAED;;;GAGG;AACH,sCAHW,QAAQ,CAAC,OAAO,CAAC,GACf,OAAO,CAWnB;AAED;;;GAGG;AACH,oCAFW,OAAO,EAAE,WAInB;AAED;;;GAGG;AACH,sCAFW,OAAO,EAAE;;;EASnB;AA4ED;;;;GAIG;AACH,uCAFW,OAAO,WAIjB;AAWD;;;;GAIG;AACH,gCAHW,GAAC,GACC,IAAI,IAAI,OAAO,CAI3B;AAED;;;;GAIG;AACH,mCAHW,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,oBAAoB,EAAE,IAAI,GAChE,OAAO,CAiBnB;AAzHD;IACI;;;;OAIG;IACH,mBAHW,OAAO,UACP,OAAO,EAQjB;IAJG,gBAAgB;IAChB,wBAAkB;IAClB,gBAAgB;IAChB,yBAAoB;IAGxB;;;;OAIG;IACH,oBAFW,OAAO,cAAc,EAAE,OAAO,kBAIxC;IAED;;;;OAIG;IACH,yBAFW,OAAO,cAAc,EAAE,OAAO,kBAIxC;IAmBD;;;;OAIG;IACH,aAFa,OAAO,CAInB;;CACJ;AAED;;;;GAIG;AACH,2BAFU,OAAO,CAKd;AAEH,iDAGE;;;;;;;;SAlPQ,MAAM;;;;WACN,MAAM;;;;;;cAGN,MAAM;UACN,MAAM;;;;;;;;;;;;;;cAGN,MAAM;;;;;uBACN,MAAM;;;;aAEN,MAAM;;;;cACN,OAAO"}