@genome-spy/core 0.73.0 → 0.74.0

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

@@ -1,4 +1,3 @@
-/* eslint-disable max-depth */
 import { primaryPositionalChannels } from "../../encoder/encoder.js";
 import {
     FlexDimensions,
@@ -12,6 +11,10 @@ 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 {
+    propagateInteraction,
+    propagateInteractionSurface,
+} from "../interactionRouting.js";
 import LayerView from "../layerView.js";
 import UnitView from "../unitView.js";
 import { interactionToZoom } from "../zoom.js";
@@ -20,6 +23,26 @@ import KeyboardZoomController from "./keyboardZoomController.js";
 import SeparatorView, { resolveSeparatorProps } from "./separatorView.js";
 import { getZoomableResolutions } from "./zoomNavigationUtils.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
+// decoration's zindex (underlay vs overlay relative to content), and these
+// values are only used as tie-break phases among decorations in the same batch.
+const DECORATION_ORDER = Object.freeze({
+    background: 0,
+    separator: 10,
+    grid: 20,
+    backgroundStroke: 30,
+    axis: 40,
+    selectionRect: 80,
+    scrollbar: 90,
+    title: 100,
+});
+
+// Default z-index for axes and view strokes when the content is clipped or
+// scrollable. This keeps guides above content-edge artifacts while still
+// letting an explicit user zindex override the default.
+const CLIPPED_DECORATION_ZINDEX = 10;
+
 /**
  * Modeled after: https://vega.github.io/vega/docs/layout/
  *
@@ -543,7 +566,6 @@ export default class GridView extends ContainerView {
      * @param {import("../layout/rectangle.js").default} coords
      * @param {import("../../types/rendering.js").RenderingOptions} [options]
      */
-    // eslint-disable-next-line complexity
     render(context, coords, options = {}) {
         super.render(context, coords, options);
 
@@ -585,8 +607,8 @@ 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.
+        // Compute layout once and then dispatch decorations around the content
+        // render pass without recomputing per-child coordinates.
         const renderItems = [];
 
         for (const [i, gridChild] of this.#visibleChildren.entries()) {
@@ -685,14 +707,62 @@ export default class GridView extends ContainerView {
             });
         }
 
-        for (const item of renderItems) {
-            item.background?.render(context, item.clippedChildCoords, {
-                ...options,
-                clipRect: undefined,
+        const gridOverhang = this.#getGridOverhang();
+
+        /** @type {{ zindex: number, order: number, sequence: number, render: () => void }[]} */
+        const underlays = [];
+        /** @type {{ zindex: number, order: number, sequence: number, render: () => void }[]} */
+        const overlays = [];
+        /** @type {(() => void)[]} */
+        const contents = [];
+        let sequence = 0;
+
+        const queueDecoration = (
+            /** @type {number} */ zindex,
+            /** @type {number} */ order,
+            /** @type {() => void} */ render
+        ) => {
+            const target = zindex > 0 ? overlays : underlays;
+            target.push({
+                zindex,
+                order,
+                sequence: sequence++,
+                render,
             });
-        }
+        };
 
-        const gridOverhang = this.#getGridOverhang();
+        const renderDecorations = (
+            /** @type {{ zindex: number, order: number, sequence: number, render: () => void }[]} */ items
+        ) => {
+            items.sort(
+                (a, b) =>
+                    a.zindex - b.zindex ||
+                    a.order - b.order ||
+                    a.sequence - b.sequence
+            );
+
+            for (const item of items) {
+                item.render();
+            }
+        };
+
+        for (const item of renderItems) {
+            if (item.background) {
+                queueDecoration(
+                    item.gridChild.backgroundZindex,
+                    DECORATION_ORDER.background,
+                    () =>
+                        item.background?.render(
+                            context,
+                            item.clippedChildCoords,
+                            {
+                                ...options,
+                                clipRect: undefined,
+                            }
+                        )
+                );
+            }
+        }
 
         const verticalSeparator = this.#separatorViews.vertical;
         if (verticalSeparator) {
@@ -704,7 +774,11 @@ export default class GridView extends ContainerView {
                 this.wrappingFacet,
                 gridOverhang
             );
-            verticalSeparator.render(context, coords, options);
+            queueDecoration(
+                verticalSeparator.getZindex(),
+                DECORATION_ORDER.separator,
+                () => verticalSeparator.render(context, coords, options)
+            );
         }
 
         const horizontalSeparator = this.#separatorViews.horizontal;
@@ -717,7 +791,11 @@ export default class GridView extends ContainerView {
                 this.wrappingFacet,
                 gridOverhang
             );
-            horizontalSeparator.render(context, coords, options);
+            queueDecoration(
+                horizontalSeparator.getZindex(),
+                DECORATION_ORDER.separator,
+                () => horizontalSeparator.render(context, coords, options)
+            );
         }
 
         for (const item of renderItems) {
@@ -739,24 +817,44 @@ export default class GridView extends ContainerView {
                 row,
             } = item;
 
+            const clipped = isClippedChildren(view) || scrollable;
+
             for (const gridLineView of Object.values(gridLines)) {
-                gridLineView.render(context, viewportCoords, options);
+                queueDecoration(
+                    gridLineView.axisProps.zindex ?? 0,
+                    DECORATION_ORDER.grid,
+                    () => gridLineView.render(context, viewportCoords, options)
+                );
             }
 
-            const clipped = isClippedChildren(view) || scrollable;
+            const renderContent = () =>
+                view.render(
+                    context,
+                    viewCoords,
+                    clipped
+                        ? {
+                              ...options,
+                              clipRect: clippedChildCoords,
+                          }
+                        : options
+                );
 
-            // If clipped, the axes should be drawn on top of the marks (because clipping may not be pixel-perfect)
-            if (clipped) {
-                view.render(context, viewCoords, {
-                    ...options,
-                    clipRect: clippedChildCoords,
-                });
-            }
+            contents.push(renderContent);
 
-            backgroundStroke?.render(context, clippedChildCoords, {
-                ...options,
-                clipRect: undefined,
-            });
+            if (backgroundStroke) {
+                queueDecoration(
+                    defaultBackgroundStrokeZindex(
+                        gridChild.backgroundStrokeZindex,
+                        clipped
+                    ),
+                    DECORATION_ORDER.backgroundStroke,
+                    () =>
+                        backgroundStroke?.render(context, clippedChildCoords, {
+                            ...options,
+                            clipRect: undefined,
+                        })
+                );
+            }
 
             // Independent axes
             for (const [orient, axisView] of Object.entries(axes)) {
@@ -811,10 +909,15 @@ export default class GridView extends ContainerView {
                     );
                 }
 
-                axisView.render(context, translatedCoords, {
-                    ...options,
-                    clipRect,
-                });
+                queueDecoration(
+                    defaultAxisZindex(axisView.axisProps.zindex, clipped),
+                    DECORATION_ORDER.axis,
+                    () =>
+                        axisView.render(context, translatedCoords, {
+                            ...options,
+                            clipRect,
+                        })
+                );
             }
 
             // Axes shared between children
@@ -829,109 +932,136 @@ export default class GridView extends ContainerView {
                     (orient == "top" && row == 0) ||
                     (orient == "bottom" && row == grid.nRows - 1)
                 ) {
-                    axisView.render(
-                        context,
-                        translateAxisCoords(
-                            viewportCoords.shrink(gridChild.view.getOverhang()),
-                            orient,
-                            axisView
-                        ),
-                        options
+                    queueDecoration(
+                        defaultAxisZindex(axisView.axisProps.zindex, clipped),
+                        DECORATION_ORDER.axis,
+                        () =>
+                            axisView.render(
+                                context,
+                                translateAxisCoords(
+                                    viewportCoords.shrink(
+                                        gridChild.view.getOverhang()
+                                    ),
+                                    orient,
+                                    axisView
+                                ),
+                                options
+                            )
                     );
                 }
             }
 
-            if (!clipped) {
-                view.render(context, viewCoords, options);
+            if (selectionRect) {
+                queueDecoration(
+                    selectionRect.getZindex(),
+                    DECORATION_ORDER.selectionRect,
+                    () => selectionRect?.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);
+                queueDecoration(1, DECORATION_ORDER.scrollbar, () => {
+                    scrollbar.updateScrollbar(viewportCoords, viewCoords);
+                    scrollbar.render(context, coords, options);
+                });
             }
 
-            title?.render(context, viewportCoords, options);
+            if (title) {
+                queueDecoration(
+                    gridChild.titleZindex,
+                    DECORATION_ORDER.title,
+                    () => title?.render(context, viewportCoords, options)
+                );
+            }
+        }
+
+        renderDecorations(underlays);
+
+        for (const renderContent of contents) {
+            renderContent();
         }
 
+        renderDecorations(overlays);
+
         context.popView(this);
     }
 
     /**
-     * @param {import("../../utils/interactionEvent.js").default} event
+     * @param {import("../../utils/interaction.js").default} event
      */
-    propagateInteractionEvent(event) {
-        this.handleInteractionEvent(undefined, event, true);
-
-        if (event.stopped) {
-            return;
-        }
+    propagateInteraction(event) {
+        propagateInteraction(this, event, () => {
+            const pointedChild = this.#visibleChildren.find((gridChild) =>
+                gridChild.coords.containsPoint(event.point.x, event.point.y)
+            );
+            const pointedView = pointedChild?.view;
 
-        const pointedChild = this.#visibleChildren.find((gridChild) =>
-            gridChild.coords.containsPoint(event.point.x, event.point.y)
-        );
-        const pointedView = pointedChild?.view;
+            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) {
+                    return;
+                }
 
-        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 (isZoomInteractionView(pointedView)) {
+                    if (hasZoomableResolutions(pointedView)) {
+                        event.claimWheel();
+                    }
+                } else {
+                    pointedView.propagateInteraction(event);
+                }
                 return;
             }
 
-            if (isZoomInteractionView(pointedView)) {
-                if (hasZoomableResolutions(pointedView)) {
-                    event.claimWheel();
-                }
-            } else {
-                pointedView.propagateInteractionEvent(event);
-            }
-            return;
-        }
+            this.#keyboardZoomController?.handlePointerEvent(
+                pointedChild,
+                event
+            );
 
-        this.#keyboardZoomController?.handlePointerEvent(pointedChild, event);
+            for (const scrollbar of Object.values(
+                pointedChild?.scrollbars ?? {}
+            )) {
+                propagateInteractionSurface(
+                    event,
+                    () =>
+                        scrollbar.coords.containsPoint(
+                            event.point.x,
+                            event.point.y
+                        ),
+                    () => scrollbar.propagateInteraction(event)
+                );
 
-        for (const scrollbar of Object.values(pointedChild?.scrollbars ?? {})) {
-            if (scrollbar.coords.containsPoint(event.point.x, event.point.y)) {
-                scrollbar.propagateInteractionEvent(event);
                 if (event.stopped) {
                     return;
                 }
             }
-        }
 
-        if (pointedView) {
-            pointedView.propagateInteractionEvent(event);
-
-            if (event.stopped) {
+            if (!pointedView) {
                 return;
             }
 
-            // Hmm, maybe this should be registered when needed and not include
-            // as a hardcoded interaction?
-            if (isZoomInteractionView(pointedView)) {
-                interactionToZoom(
-                    event,
-                    pointedChild.coords,
-                    (zoomEvent) =>
-                        this.#handleZoom(
-                            pointedChild.coords,
-                            pointedChild.view,
-                            zoomEvent
-                        ),
-                    this.context.getCurrentHover(),
-                    this.context.animator
-                );
-            }
-        }
-
-        if (event.stopped) {
-            return;
-        }
-
-        this.handleInteractionEvent(undefined, event, false);
+            propagateInteractionSurface(
+                event,
+                () => true,
+                () => pointedView.propagateInteraction(event),
+                isZoomInteractionView(pointedView)
+                    ? () =>
+                          interactionToZoom(
+                              event,
+                              pointedChild.coords,
+                              (zoomEvent) =>
+                                  this.#handleZoom(
+                                      pointedChild.coords,
+                                      pointedChild.view,
+                                      zoomEvent
+                                  ),
+                              this.context.getCurrentHover(),
+                              this.context.animator
+                          )
+                    : undefined
+            );
+        });
     }
 
     /**
@@ -1040,6 +1170,30 @@ function getSeparatorDirections(spec) {
     return ["horizontal", "vertical"];
 }
 
+/**
+ * Default z-index for axes. Clipped or scrollable content gets a higher
+ * default to keep guides above visible edge artifacts.
+ *
+ * @param {number | undefined} zindex
+ * @param {boolean} clipped
+ * @returns {number}
+ */
+function defaultAxisZindex(zindex, clipped) {
+    return zindex ?? (clipped ? CLIPPED_DECORATION_ZINDEX : 0);
+}
+
+/**
+ * Default z-index for view strokes. Clipped or scrollable content gets a
+ * higher default to keep the stroke above visible edge artifacts.
+ *
+ * @param {number | undefined} zindex
+ * @param {boolean} clipped
+ * @returns {number}
+ */
+function defaultBackgroundStrokeZindex(zindex, clipped) {
+    return zindex ?? (clipped ? CLIPPED_DECORATION_ZINDEX : 0);
+}
+
 /**
  *
  * @param {import("../layout/rectangle.js").default} coords

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

@@ -13,9 +13,9 @@ export default class KeyboardZoomController {
     });
     /**
      * @param {import("./gridChild.js").default | undefined} pointedChild
-     * @param {import("../../utils/interactionEvent.js").default} event
+     * @param {import("../../utils/interaction.js").default} event
      */
-    handlePointerEvent(pointedChild: import("./gridChild.js").default | undefined, event: import("../../utils/interactionEvent.js").default): void;
+    handlePointerEvent(pointedChild: import("./gridChild.js").default | undefined, event: import("../../utils/interaction.js").default): void;
     #private;
 }
 //# sourceMappingURL=keyboardZoomController.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"keyboardZoomController.d.ts","sourceRoot":"","sources":["../../../../src/view/gridView/keyboardZoomController.js"],"names":[],"mappings":"AAIA;;GAEG;AACH;IAuDI;;;;OAIG;IACH,mCAHG;QAA6D,OAAO,EAA5D,OAAO,4BAA4B,EAAE,OAAO;QACP,QAAQ,EAA7C,OAAO,YAAY,EAAE,OAAO;KACtC,EAKA;IAED;;;OAGG;IACH,iCAHW,OAAO,gBAAgB,EAAE,OAAO,GAAG,SAAS,SAC5C,OAAO,iCAAiC,EAAE,OAAO,QA0B3D;;CA4DJ"}
+{"version":3,"file":"keyboardZoomController.d.ts","sourceRoot":"","sources":["../../../../src/view/gridView/keyboardZoomController.js"],"names":[],"mappings":"AAIA;;GAEG;AACH;IAuDI;;;;OAIG;IACH,mCAHG;QAA6D,OAAO,EAA5D,OAAO,4BAA4B,EAAE,OAAO;QACP,QAAQ,EAA7C,OAAO,YAAY,EAAE,OAAO;KACtC,EAKA;IAED;;;OAGG;IACH,iCAHW,OAAO,gBAAgB,EAAE,OAAO,GAAG,SAAS,SAC5C,OAAO,4BAA4B,EAAE,OAAO,QA0BtD;;CA4DJ"}

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

@@ -73,7 +73,7 @@ export default class KeyboardZoomController {
 
     /**
      * @param {import("./gridChild.js").default | undefined} pointedChild
-     * @param {import("../../utils/interactionEvent.js").default} event
+     * @param {import("../../utils/interaction.js").default} event
      */
     handlePointerEvent(pointedChild, event) {
         if (!pointedChild) {

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,EAyH/D;IAxID;;;;;;OAMG;IACH,uBAAmB;IAkDf;;;;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;;;;;8BAnSY,YAAY,GAAG,UAAU;qBAPjB,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,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"}

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

@@ -112,7 +112,7 @@ export default class Scrollbar extends UnitView {
         // Smooth viewport offset updates
         this.#initViewportOffsetSmoother(this.viewportOffset);
 
-        this.addInteractionEventListener("mousedown", (coords, event) => {
+        this.addInteractionListener("mousedown", (event) => {
             event.stopPropagation();
 
             if (this.#getMaxScrollOffset() <= 0) {
@@ -125,6 +125,7 @@ export default class Scrollbar extends UnitView {
                     : mouseEvent.clientX;
 
             event.mouseEvent.preventDefault();
+            this.context.suspendHoverTracking();
 
             const initialScrollOffset = this.scrollOffset;
             const initialOffset = getMouseOffset(event.mouseEvent);
@@ -150,9 +151,10 @@ export default class Scrollbar extends UnitView {
                 });
             };
 
-            const onMouseup = () => {
+            const onMouseup = (/** @type {MouseEvent} */ upEvent) => {
                 document.removeEventListener("mousemove", onMousemove);
                 document.removeEventListener("mouseup", onMouseup);
+                this.context.resumeHoverTracking(upEvent);
             };
 
             document.addEventListener("mouseup", onMouseup, false);

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

@@ -1,3 +1,4 @@
+export const INTERVAL_DRAG_ACTIVE_PARAM: "intervalDragActive";
 export default class SelectionRect extends LayerView<import("../../spec/view.js").LayerSpec> {
     /**
      * @typedef {import("../../spec/channel.js").PrimaryPositionalChannel} PrimaryPositionalChannel
@@ -9,6 +10,9 @@ export default class SelectionRect extends LayerView<import("../../spec/view.js"
      * @param {import("../../spec/parameter.js").BrushConfig} [brushConfig]
      */
     constructor(gridChild: import("./gridChild.js").default, selectionExpr: import("../../paramRuntime/types.js").ExprRefFunction, brushConfig?: import("../../spec/parameter.js").BrushConfig);
+    /** @type {number} */
+    _zindex: number;
+    getZindex(): number;
 }
 import LayerView from "../layerView.js";
 //# sourceMappingURL=selectionRect.d.ts.map

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;IACI;;;OAGG;IAEH;;;;OAIG;IACH,uBAJW,OAAO,gBAAgB,EAAE,OAAO,iBAChC,OAAO,6BAA6B,EAAE,eAAe,gBACrD,OAAO,yBAAyB,EAAE,WAAW,EA+JvD;CACJ;sBA5KqB,iBAAiB"}
+{"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"}

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

@@ -2,6 +2,8 @@ import { primaryPositionalChannels } from "../../encoder/encoder.js";
 import LayerView from "../layerView.js";
 import { markViewAsNonAddressable } from "../viewSelectors.js";
 
+export const INTERVAL_DRAG_ACTIVE_PARAM = "intervalDragActive";
+
 export default class SelectionRect extends LayerView {
     /**
      * @typedef {import("../../spec/channel.js").PrimaryPositionalChannel} PrimaryPositionalChannel
@@ -18,6 +20,7 @@ export default class SelectionRect extends LayerView {
             selectionExpr()
         );
         const channels = Object.keys(initialSelection.intervals);
+        const { zindex = 1, ...brushMarkProps } = brushConfig;
 
         if (primaryPositionalChannels.every((c) => !channels.includes(c))) {
             throw new Error(
@@ -29,6 +32,12 @@ export default class SelectionRect extends LayerView {
         const layerSpec = {
             name: "selectionRect",
             domainInert: true,
+            params: [
+                {
+                    name: INTERVAL_DRAG_ACTIVE_PARAM,
+                    value: false,
+                },
+            ],
             resolve: {
                 scale: {
                     x: "forced",
@@ -72,7 +81,10 @@ export default class SelectionRect extends LayerView {
                     stroke: "black",
                     strokeWidth: 1,
                     strokeOpacity: 0.2,
-                    ...brushConfig,
+                    cursor: brushMarkProps.cursor ?? {
+                        expr: `${INTERVAL_DRAG_ACTIVE_PARAM} ? 'grabbing' : 'move'`,
+                    },
+                    ...brushMarkProps,
                 },
             },
         });
@@ -147,6 +159,9 @@ export default class SelectionRect extends LayerView {
             }
         );
 
+        /** @type {number} */
+        this._zindex = zindex;
+
         markViewAsNonAddressable(this, { skipSubtree: true });
 
         const selectionListener = () => {
@@ -171,6 +186,10 @@ export default class SelectionRect extends LayerView {
 
         this.registerDisposer(selectionExpr.subscribe(selectionListener));
     }
+
+    getZindex() {
+        return this._zindex;
+    }
 }
 
 /**

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

@@ -29,6 +29,7 @@ export default class SeparatorView {
      * @returns {UnitView}
      */
     get view(): UnitView;
+    getZindex(): number;
     /**
      * @param {import("../layout/flexLayout.js").LocSize[]} flexCoords
      * @param {number} count

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":"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"}
+{"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"}

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

@@ -26,6 +26,9 @@ export default class SeparatorView {
     /** @type {UnitView} */
     #view;
 
+    /** @type {number} */
+    #zindex;
+
     /** @type {import("../../data/flowNode.js").Datum[]} */
     #data = [];
 
@@ -58,8 +61,10 @@ export default class SeparatorView {
     }) {
         this.#direction = direction;
         this.#includePlotMargin = props.includePlotMargin ?? true;
+        this.#zindex = props.zindex ?? 0;
         const markProps = { ...props };
         delete markProps.includePlotMargin;
+        delete markProps.zindex;
         this.#view = this.#createView(
             markProps,
             context,
@@ -76,6 +81,10 @@ export default class SeparatorView {
         return this.#view;
     }
 
+    getZindex() {
+        return this.#zindex;
+    }
+
     /**
      * @param {import("../layout/flexLayout.js").LocSize[]} flexCoords
      * @param {number} count