@genome-spy/core 0.37.3 → 0.38.0

package/dist/src/view/gridView.js

@@ -6,10 +6,10 @@ import {
     mapToPixelCoords,
     parseSizeDef,
     ZERO_SIZEDEF,
-} from "../utils/layout/flexLayout.js";
-import Grid from "../utils/layout/grid.js";
-import Padding from "../utils/layout/padding.js";
-import Rectangle from "../utils/layout/rectangle.js";
+} 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";
@@ -17,6 +17,7 @@ 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";
 
 /**
  * Modeled after: https://vega.github.io/vega/docs/layout/
@@ -31,13 +32,15 @@ import interactionToZoom from "./zoom.js";
  * - Facet (column / row) titles
  * - Header / footer
  * - Zoom / pan
+ * - Scrollable viewports (with scrollbars)
  * - And later on, brushing, legend(?)
  */
 export default class GridView extends ContainerView {
     /**
      * @typedef {"row" | "column"} Direction
+     * @typedef {"horizontal" | "vertical"} ScrollDirection
      *
-     * @typedef {import("./view").default} View
+     * @typedef {import("./view.js").default} View
      */
 
     /** */
@@ -55,7 +58,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").PrimaryPositionalChannel, AxisView>> } }
+     * @type { Partial<Record<import("../spec/channel.js").PrimaryPositionalChannel, AxisView>> } }
      */
     #sharedAxes = {};
 
@@ -63,15 +66,24 @@ export default class GridView extends ContainerView {
 
     /**
      *
-     * @param {import("../spec/view").AnyConcatSpec} spec
-     * @param {import("../types/viewContext").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]
      */
-    constructor(spec, context, layoutParent, dataParent, name, columns) {
-        super(spec, context, layoutParent, dataParent, name);
+    constructor(
+        spec,
+        context,
+        layoutParent,
+        dataParent,
+        name,
+        columns,
+        options
+    ) {
+        super(spec, context, layoutParent, dataParent, name, options);
         this.spec = spec;
 
         this.#spacing = spec.spacing ?? 10;
@@ -80,15 +92,6 @@ export default class GridView extends ContainerView {
         this.#children = [];
 
         this.wrappingFacet = false;
-
-        this._createChildren();
-    }
-
-    /**
-     * @protected
-     */
-    _createChildren() {
-        // Override
     }
 
     /**
@@ -153,13 +156,13 @@ export default class GridView extends ContainerView {
         return this.#children.length;
     }
 
-    onScalesResolved() {
-        super.onScalesResolved();
-
-        this.#createAxes();
-    }
+    /**
+     * @protected
+     */
+    async createAxes() {
+        /** @type {Promise<void>[]} */
+        const promises = [];
 
-    #createAxes() {
         // Axis ticks, labels, etc. They should be created only if this view has caught
         // the scale resolution for the channel.
         for (const channel of primaryPositionalChannels) {
@@ -180,22 +183,17 @@ export default class GridView extends ContainerView {
                         this,
                         this
                     );
+                    promises.push(v.initializeChildren());
                     this.#sharedAxes[channel] = v;
-
-                    // Axes are created after scales are resolved, so we need to resolve possible new scales here
-                    v.visit((view) => {
-                        if (view instanceof UnitView) {
-                            view.resolve("scale");
-                        }
-                    });
                 }
             }
         }
 
         // Create view decorations, grid lines, and independent axes for each child
-        for (const gridChild of this.#children) {
-            gridChild.createAxes();
-        }
+        return Promise.all([
+            ...promises,
+            ...this.#children.map((gridChild) => gridChild.createAxes()),
+        ]);
     }
 
     /**
@@ -244,9 +242,9 @@ export default class GridView extends ContainerView {
                     view: getLargestSize(
                         col.map(
                             (rowIndex) =>
-                                this.#visibleChildren[rowIndex].view.getSize()[
-                                    dim
-                                ]
+                                this.#visibleChildren[
+                                    rowIndex
+                                ].view.getViewportSize()[dim]
                         )
                     ),
                 })
@@ -275,7 +273,7 @@ export default class GridView extends ContainerView {
     #makeFlexItems(direction) {
         const sizes = this.#getSizes(direction);
 
-        /** @type {import("../utils/layout/flexLayout").SizeDef[]} */
+        /** @type {import("./layout/flexLayout.js").SizeDef[]} */
         const items = [];
 
         // Title
@@ -312,15 +310,14 @@ export default class GridView extends ContainerView {
 
     /**
      * @param {Direction} direction
-     * @return {import("../utils/layout/flexLayout").SizeDef}
+     * @return {import("./layout/flexLayout.js").SizeDef}
      */
     #getFlexSize(direction) {
         let grow = 0;
         let px = 0;
 
         const explicitSize =
-            (direction == "row" && this.spec.height) ??
-            (direction == "column" && this.spec.width);
+            direction == "row" ? this.spec.height : this.spec.width;
         if (explicitSize || explicitSize === 0) {
             return parseSizeDef(explicitSize);
         }
@@ -396,7 +393,7 @@ export default class GridView extends ContainerView {
 
     #getSharedAxisOverhang() {
         /**
-         * @param {import("../spec/axis").AxisOrient} orient
+         * @param {import("../spec/axis.js").AxisOrient} orient
          */
         const getSharedAxisSize = (orient) => {
             const channel = ORIENT_CHANNELS[orient];
@@ -433,9 +430,9 @@ export default class GridView extends ContainerView {
     }
 
     /**
-     * @param {import("./renderingContext/viewRenderingContext").default} context
-     * @param {import("../utils/layout/rectangle").default} coords
-     * @param {import("../types/rendering").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 = {}) {
@@ -471,6 +468,10 @@ export default class GridView extends ContainerView {
             this.#columns ?? Infinity
         );
 
+        /** @param {number} x */
+        const round = (x) =>
+            Math.round(x * devicePixelRatio) / devicePixelRatio;
+
         for (const [i, gridChild] of this.#visibleChildren.entries()) {
             const {
                 view,
@@ -486,31 +487,65 @@ export default class GridView extends ContainerView {
                 columnFlexCoords[this.#getViewSlot("column", col)];
             const rowLocSize = rowFlexCoords[this.#getViewSlot("row", row)];
 
-            const size = view.getSize();
+            const viewportSize = view.getViewportSize();
+            const viewSize = view.getSize();
+
             const overhang = view.getOverhang();
 
             const x = colLocSize.location - overhang.left;
             const y = rowLocSize.location - overhang.top;
 
-            const width =
-                (size.width.grow ? colLocSize.size : size.width.px) +
-                overhang.width;
-            const height =
-                (size.height.grow ? rowLocSize.size : size.height.px) +
-                overhang.height;
+            // TODO: Optimize for cases where viewportSize and viewSize have equal identity
+
+            /**
+             * @param {FlexDimensions} size
+             * @param {"width" | "height"} dimension
+             */
+            const getLen = (size, dimension) =>
+                (size[dimension].grow
+                    ? (dimension == "width" ? colLocSize : rowLocSize).size
+                    : size[dimension].px) + overhang[dimension];
 
-            const childCoords = new Rectangle(
+            const viewportWidth = getLen(viewportSize, "width");
+            const viewportHeight = getLen(viewportSize, "height");
+            const viewWidth = getLen(viewSize, "width");
+            const viewHeight = getLen(viewSize, "height");
+
+            const hScrollbar = gridChild.scrollbars.horizontal;
+            const vScrollbar = gridChild.scrollbars.vertical;
+
+            const getHScrollOffset = hScrollbar
+                ? () => round(hScrollbar.viewportOffset)
+                : () => 0;
+            const getVScrollOffset = vScrollbar
+                ? () => round(vScrollbar.viewportOffset)
+                : () => 0;
+
+            // TODO: Part of the following rendering logic could be moved to GridChild
+
+            const viewportCoords = new Rectangle(
                 () => coords.x + x,
                 () => coords.y + y,
-                () => width,
-                () => height
+                () => viewportWidth,
+                () => viewportHeight
             );
 
-            gridChild.coords = childCoords;
+            const scrollable = view.isScrollable();
+
+            const viewCoords = scrollable
+                ? new Rectangle(
+                      () => coords.x + x - getHScrollOffset(),
+                      () => coords.y + y - getVScrollOffset(),
+                      () => viewWidth,
+                      () => viewHeight
+                  )
+                : viewportCoords;
+
+            gridChild.coords = viewportCoords;
 
             const clippedChildCoords = options.clipRect
-                ? childCoords.intersect(options.clipRect)
-                : childCoords;
+                ? viewportCoords.intersect(options.clipRect)
+                : viewportCoords;
 
             background?.render(context, clippedChildCoords, {
                 ...options,
@@ -518,13 +553,17 @@ export default class GridView extends ContainerView {
             });
 
             for (const gridLineView of Object.values(gridLines)) {
-                gridLineView.render(context, childCoords, options);
+                gridLineView.render(context, viewportCoords, options);
             }
 
+            const clipped = isClippedChildren(view) || scrollable;
+
             // If clipped, the axes should be drawn on top of the marks (because clipping may not be pixel-perfect)
-            const clipped = isClippedChildren(view);
             if (clipped) {
-                view.render(context, childCoords, options);
+                view.render(context, viewCoords, {
+                    ...options,
+                    clipRect: clippedChildCoords,
+                });
             }
 
             backgroundStroke?.render(context, clippedChildCoords, {
@@ -534,14 +573,66 @@ export default class GridView extends ContainerView {
 
             // Independent axes
             for (const [orient, axisView] of Object.entries(axes)) {
-                axisView.render(
-                    context,
-                    translateAxisCoords(childCoords, orient, axisView),
-                    options
+                const direction =
+                    orient == "left" || orient == "right"
+                        ? "vertical"
+                        : "horizontal";
+
+                const scrollable = gridChild.scrollbars[direction];
+
+                // Axes should stick to the viewport edge but move with the view
+                // when scrolling.
+                const coords = scrollable
+                    ? viewportCoords.modify(
+                          direction == "vertical"
+                              ? {
+                                    y: () => viewCoords.y,
+                                    height: viewHeight,
+                                }
+                              : {
+                                    x: () => viewCoords.x,
+                                    width: viewWidth,
+                                }
+                      )
+                    : viewportCoords;
+
+                const translatedCoords = translateAxisCoords(
+                    coords,
+                    orient,
+                    axisView
                 );
+
+                let clipRect = options.clipRect;
+
+                // Scrollable axes must be clipped along the scroll direction.
+                if (scrollable) {
+                    clipRect = translatedCoords.intersect(clipRect).intersect(
+                        scrollable
+                            ? viewportCoords.modify(
+                                  // Ugly hack. Need to implement intersectX and intersectY.
+                                  direction == "vertical"
+                                      ? {
+                                            x: -100000,
+                                            width: 200000,
+                                        }
+                                      : {
+                                            y: -100000,
+                                            height: 200000,
+                                        }
+                              )
+                            : undefined
+                    );
+                }
+
+                axisView.render(context, translatedCoords, {
+                    ...options,
+                    clipRect,
+                });
             }
 
             // Axes shared between children
+            // TODO: What if some have scrollable viewports?
+            // Should throw an error because cannot have shared axes in such cases.
             for (const axisView of Object.values(this.#sharedAxes)) {
                 const props = axisView.axisProps;
                 const orient = props.orient;
@@ -554,7 +645,7 @@ export default class GridView extends ContainerView {
                     axisView.render(
                         context,
                         translateAxisCoords(
-                            childCoords.shrink(gridChild.view.getOverhang()),
+                            viewportCoords.shrink(gridChild.view.getOverhang()),
                             orient,
                             axisView
                         ),
@@ -564,17 +655,22 @@ export default class GridView extends ContainerView {
             }
 
             if (!clipped) {
-                view.render(context, childCoords, options);
+                view.render(context, viewCoords, options);
+            }
+
+            for (const scrollbar of Object.values(gridChild.scrollbars)) {
+                scrollbar.updateScrollbar(viewportCoords, viewCoords);
+                scrollbar.render(context, coords, options);
             }
 
-            title?.render(context, childCoords, options);
+            title?.render(context, viewportCoords, options);
         }
 
         context.popView(this);
     }
 
     /**
-     * @param {import("../utils/interactionEvent").default} event
+     * @param {import("../utils/interactionEvent.js").default} event
      */
     propagateInteractionEvent(event) {
         this.handleInteractionEvent(undefined, event, true);
@@ -586,6 +682,16 @@ export default class GridView extends ContainerView {
         const pointedChild = this.#visibleChildren.find((gridChild) =>
             gridChild.coords.containsPoint(event.point.x, event.point.y)
         );
+
+        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;
+                }
+            }
+        }
+
         const pointedView = pointedChild?.view;
         if (pointedView) {
             pointedView.propagateInteractionEvent(event);
@@ -617,9 +723,9 @@ export default class GridView extends ContainerView {
 
     /**
      *
-     * @param {import("../utils/layout/rectangle").default} coords Coordinates
+     * @param {import("./layout/rectangle.js").default} coords Coordinates
      * @param {View} view
-     * @param {import("./zoom").ZoomEvent} zoomEvent
+     * @param {import("./zoom.js").ZoomEvent} zoomEvent
      */
     #handleZoom(coords, view, zoomEvent) {
         for (const [channel, resolutionSet] of Object.entries(
@@ -653,9 +759,9 @@ export default class GridView extends ContainerView {
     }
 
     /**
-     * @param {import("../spec/channel").Channel} channel
-     * @param {import("../spec/view").ResolutionTarget} resolutionType
-     * @returns {import("../spec/view").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";
@@ -663,8 +769,8 @@ export default class GridView extends ContainerView {
 }
 
 /**
- * @param {import("../spec/view").ViewBackground} viewBackground
- * @returns {import("../spec/view").UnitSpec}
+ * @param {import("../spec/view.js").ViewBackground} viewBackground
+ * @returns {import("../spec/view.js").UnitSpec}
  */
 export function createBackground(viewBackground) {
     if (
@@ -691,8 +797,8 @@ export function createBackground(viewBackground) {
 }
 
 /**
- * @param {import("../spec/view").ViewBackground} viewBackground
- * @returns {import("../spec/view").UnitSpec}
+ * @param {import("../spec/view.js").ViewBackground} viewBackground
+ * @returns {import("../spec/view.js").UnitSpec}
  */
 export function createBackgroundStroke(viewBackground) {
     if (
@@ -745,7 +851,7 @@ export function createBackgroundStroke(viewBackground) {
  * @returns
  */
 function getZoomableResolutions(view) {
-    /** @type {Record<import("../spec/channel").PrimaryPositionalChannel, Set<import("./scaleResolution").default>>} */
+    /** @type {Record<import("../spec/channel.js").PrimaryPositionalChannel, Set<import("./scaleResolution.js").default>>} */
     const resolutions = {
         x: new Set(),
         y: new Set(),
@@ -781,8 +887,8 @@ export function isClippedChildren(view) {
 
 /**
  *
- * @param {import("../utils/layout/rectangle").default} coords
- * @param {import("../spec/axis").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) {
@@ -821,12 +927,15 @@ export class GridChild {
         /** @type {UnitView} */
         this.backgroundStroke = undefined;
 
-        /** @type {Partial<Record<import("../spec/axis").AxisOrient, AxisView>>} axes */
+        /** @type {Partial<Record<import("../spec/axis.js").AxisOrient, AxisView>>} axes */
         this.axes = {};
 
-        /** @type {Partial<Record<import("../spec/axis").AxisOrient, AxisGridView>>} gridLines */
+        /** @type {Partial<Record<import("../spec/axis.js").AxisOrient, AxisGridView>>} gridLines */
         this.gridLines = {};
 
+        /** @type {Partial<Record<ScrollDirection, Scrollbar>>} */
+        this.scrollbars = {};
+
         /** @type {UnitView} */
         this.title = undefined;
 
@@ -844,10 +953,11 @@ export class GridChild {
                     layoutParent.context,
                     layoutParent,
                     view,
-                    "background" + serial
+                    "background" + serial,
+                    {
+                        blockEncodingInheritance: true,
+                    }
                 );
-                // TODO: Make configurable through spec:
-                this.background.blockEncodingInheritance = true;
             }
 
             const backgroundStrokeSpec = createBackgroundStroke(viewBackground);
@@ -857,10 +967,11 @@ export class GridChild {
                     layoutParent.context,
                     layoutParent,
                     view,
-                    "backgroundStroke" + serial
+                    "backgroundStroke" + serial,
+                    {
+                        blockEncodingInheritance: true,
+                    }
                 );
-                // TODO: Make configurable through spec:
-                this.backgroundStroke.blockEncodingInheritance = true;
             }
 
             const title = createTitle(view.spec.title);
@@ -870,13 +981,23 @@ export class GridChild {
                     layoutParent.context,
                     layoutParent,
                     view,
-                    "title" + serial
+                    "title" + serial,
+                    {
+                        blockEncodingInheritance: true,
+                    }
                 );
-                // TODO: Make configurable through spec:
-                unitView.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() {
@@ -892,17 +1013,18 @@ export class GridChild {
         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.
      */
-    createAxes() {
+    async createAxes() {
         const { view, axes, gridLines } = this;
 
         /**
-         * @param {import("./axisResolution").default} r
-         * @param {import("../spec/channel").PrimaryPositionalChannel} channel
+         * @param {import("./axisResolution.js").default} r
+         * @param {import("../spec/channel.js").PrimaryPositionalChannel} channel
          */
         const getAxisPropsWithDefaults = (r, channel) => {
             const propsWithoutDefaults = r.getAxisProps();
@@ -942,11 +1064,11 @@ export class GridChild {
         };
 
         /**
-         * @param {import("./axisResolution").default} r
-         * @param {import("../spec/channel").PrimaryPositionalChannel} channel
+         * @param {import("./axisResolution.js").default} r
+         * @param {import("../spec/channel.js").PrimaryPositionalChannel} channel
          * @param {View} axisParent
          */
-        const createAxis = (r, channel, axisParent) => {
+        const createAxis = async (r, channel, axisParent) => {
             const props = getAxisPropsWithDefaults(r, channel);
 
             if (props) {
@@ -956,37 +1078,41 @@ export class GridChild {
                     );
                 }
 
-                axes[props.orient] = new AxisView(
+                const axisView = new AxisView(
                     props,
                     r.scaleResolution.type,
                     this.layoutParent.context,
                     this.layoutParent,
                     axisParent
                 );
+                axes[props.orient] = axisView;
+                await axisView.initializeChildren();
             }
         };
 
         /**
-         * @param {import("./axisResolution").default} r
-         * @param {import("../spec/channel").PrimaryPositionalChannel} channel
+         * @param {import("./axisResolution.js").default} r
+         * @param {import("../spec/channel.js").PrimaryPositionalChannel} channel
          * @param {View} axisParent
          */
-        const createAxisGrid = (r, channel, axisParent) => {
+        const createAxisGrid = async (r, channel, axisParent) => {
             const props = getAxisPropsWithDefaults(r, channel);
 
             if (props && (props.grid || props.chromGrid)) {
-                gridLines[props.orient] = new AxisGridView(
+                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").PrimaryPositionalChannel[]} */ ([
+        for (const channel of /** @type {import("../spec/channel.js").PrimaryPositionalChannel[]} */ ([
             "x",
             "y",
         ])) {
@@ -996,13 +1122,13 @@ export class GridChild {
                     continue;
                 }
 
-                createAxis(r, channel, view);
+                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").PrimaryPositionalChannel[]} */ ([
+        for (const channel of /** @type {import("../spec/channel.js").PrimaryPositionalChannel[]} */ ([
             "x",
             "y",
         ])) {
@@ -1014,32 +1140,32 @@ export class GridChild {
 
                 // TODO: Optimization: the same grid view could be reused for all children
                 // because they share the axis and scale resolutions anyway.
-                createAxisGrid(r, channel, view);
+                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.children) {
+            for (const layerChild of view) {
                 for (const [channel, r] of Object.entries(
                     layerChild.resolutions.axis
                 )) {
                     const props = r.getAxisProps();
                     if (props && props.orient) {
-                        createAxis(r, channel, layerChild);
+                        await createAxis(r, channel, layerChild);
                     }
                 }
             }
 
             // Then create axes in a priority order
-            for (const layerChild of view.children) {
+            for (const layerChild of view) {
                 for (const [channel, r] of Object.entries(
                     layerChild.resolutions.axis
                 )) {
                     const props = r.getAxisProps();
                     if (props && !props.orient) {
-                        createAxis(r, channel, layerChild);
+                        await createAxis(r, channel, layerChild);
                     }
                 }
             }
@@ -1059,7 +1185,7 @@ export class GridChild {
 
     getOverhang() {
         const calculate = (
-            /** @type {import("../spec/axis").AxisOrient} */ orient
+            /** @type {import("../spec/axis.js").AxisOrient} */ orient
         ) => {
             const axisView = this.axes[orient];
             return axisView
@@ -1084,3 +1210,164 @@ export class GridChild {
         return this.getOverhang().add(this.view.getPadding());
     }
 }
+
+class Scrollbar extends UnitView {
+    /**
+     * @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;
+
+        // 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.
+        this.viewportOffset = 0;
+
+        this.maxScrollOffset = 0;
+        this.scrollbarCoords = Rectangle.ZERO;
+
+        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.getScrollOffset();
+            const initialOffset = getMouseOffset(mouseEvent);
+
+            const onMousemove = /** @param {MouseEvent} moveEvent */ (
+                moveEvent
+            ) => {
+                const scrollOffset = clamp(
+                    getMouseOffset(moveEvent) -
+                        initialOffset +
+                        initialScrollOffset,
+                    0,
+                    this.maxScrollOffset
+                );
+
+                this.viewportOffset =
+                    (scrollOffset / this.maxScrollOffset) *
+                    this.maxViewportOffset;
+                this.context.animator.requestRender();
+            };
+
+            const onMouseup = () => {
+                document.removeEventListener("mousemove", onMousemove);
+                document.removeEventListener("mouseup", onMouseup);
+            };
+
+            document.addEventListener("mouseup", onMouseup, false);
+            document.addEventListener("mousemove", onMousemove, false);
+        });
+    }
+
+    getScrollOffset() {
+        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.getScrollOffset(),
+                      () => sSize,
+                      () => scrollLength
+                  )
+                : new Rectangle(
+                      () => viewportCoords.x + sPad + this.getScrollOffset(),
+                      () =>
+                          viewportCoords.y +
+                          viewportCoords.height -
+                          sSize -
+                          sPad,
+                      () => scrollLength,
+                      () => sSize
+                  );
+    }
+}