feat(core): publish view width and height as parameters

TODO: Docs

packages/app/src/sampleView/sampleView.js

@@ -99,19 +99,14 @@ export default class SampleView extends ContainerView {
         this.childCoords = Rectangle.ZERO;
         this.sidebarCoords = Rectangle.ZERO;
 
-        this.#sampleHeightParam = this.paramMediator.allocateSetter(
-            "height",
-            0
-        );
-
         this.locationManager = new LocationManager({
             getSampleHierarchy: () => this.sampleHierarchy,
             getHeight: () => this.childCoords.height,
             getSummaryHeight: () =>
                 this.#gridChild.summaryViews.getSize().height.px,
             onLocationUpdate: ({ sampleHeight }) => {
                 this.groupPanel.updateGroups();
-                this.#sampleHeightParam(sampleHeight);
+                this.#sampleHeightParam?.(sampleHeight);
             },
             viewContext: this.context,
             isStickySummaries: () => this.#stickySummaries,
@@ -244,18 +239,25 @@ export default class SampleView extends ContainerView {
     }
 
     async initializeChildren() {
+        const childSpec = structuredClone(this.spec.spec);
+        childSpec.params ??= [];
+        childSpec.params.push({
+            name: "height",
+            value: 0,
+        });
+
         this.#gridChild = new SampleGridChild(
-            this.context.createView(
-                this.spec.spec,
-                this,
-                this,
-                "sample-facets"
-            ),
+            this.context.createView(childSpec, this, this, "sample-facets"),
             this,
             0,
             this.spec.view
         );
 
+        this.#sampleHeightParam =
+            this.#gridChild.view.paramMediator.getSetter("height");
+
+        // TODO: Hack the sample height to sidebar as well.
+
         /**
          * Container for group markers and metadata.
          * @type {ConcatView}

packages/core/examples/layout/size_expr.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "https://unpkg.com/@genome-spy/core/dist/schema.json",
+
+  "description": "Displaying view dimensions.",
+
+  "data": { "values": [{}] },
+
+  "hconcat": [
+    {
+      "width": { "grow": 1 },
+      "view": { "stroke": "lightgray" },
+      "mark": {
+        "type": "text",
+        "size": 20,
+        "text": { "expr": "'' + width + ' x ' + height" }
+      }
+    },
+    {
+      "width": { "grow": 2 },
+      "view": { "stroke": "lightgray" },
+      "mark": {
+        "type": "text",
+        "size": 20,
+        "text": { "expr": "'' + width + ' x ' + height" }
+      }
+    }
+  ]
+}

packages/core/src/view/layerView.js

@@ -20,7 +20,10 @@ export default class LayerView extends ContainerView {
      * @param {import("./view.js").ViewOptions} [options]
      */
     constructor(spec, context, layoutParent, dataParent, name, options) {
-        super(spec, context, layoutParent, dataParent, name, options);
+        super(spec, context, layoutParent, dataParent, name, {
+            layersChildren: true,
+            ...options,
+        });
 
         this.spec = spec;
 

packages/core/src/view/paramMediator.js

@@ -193,7 +193,6 @@ export default class ParamMediator {
      *
      * @param {string} paramName
      * @returns {ParamMediator}
-     * @protected
      */
     findMediatorForParam(paramName) {
         if (this.#paramValues.has(paramName)) {

packages/core/src/view/view.js

@@ -58,7 +58,11 @@ const defaultOpacityFunction = (parentOpacity) => parentOpacity;
  * @prop {boolean} [blockEncodingInheritance]
  *      Don't inherit encodings from parent. Default: false.
  * @prop {boolean} [contributesToScaleDomain]
- *      Whether ScaleResolution should include this view or its children in the domain. Default: true
+ *      Whether ScaleResolution should include this view or its children in the
+ *      domain. Default: true
+ * @prop {boolean} [layersChildren]
+ *      View's children are layered on top of each other and they have the same
+ *      coordinates as their parent.
  */
 export default class View {
     /** @type {Record<string, (function(BroadcastMessage):void)[]>} */
@@ -70,6 +74,12 @@ export default class View {
     /** @type {Record<string, InteractionEventListener[]>} */
     #nonCapturingInteractionEventListeners = {};
 
+    /** @type {(value: number) => void} */
+    #widthSetter;
+
+    /** @type {(value: number) => void} */
+    #heightSetter;
+
     /**
      * @type {function(number):number}
      */
@@ -127,6 +137,7 @@ export default class View {
 
         /**
          * Whether GridView or equivalent should draw axis and grid lines for this view.
+         * TODO: Use view options for this.
          * @type {Record<import("../spec/channel.js").PrimaryPositionalChannel, boolean>}
          */
         this.needsAxes = { x: false, y: false };
@@ -141,6 +152,19 @@ export default class View {
                 this.paramMediator.registerParam(param);
             }
         }
+
+        // All descendants of a layer view have the same coordinates - no need to redefine.
+        if (!this.layoutParent?.options.layeredChildren) {
+            // Width and height can be overriden by the view spec. Typically it
+            // doesn't make much sense, but it's used in the App's SampleView
+            // to set the height to sample facets' height.
+            const allocateIfFree = (/** @type {string} */ name) =>
+                this.paramMediator.findMediatorForParam(name)
+                    ? undefined
+                    : this.paramMediator.allocateSetter(name, 0);
+            this.#heightSetter = allocateIfFree("height");
+            this.#widthSetter = allocateIfFree("width");
+        }
     }
 
     /**
@@ -503,6 +527,9 @@ export default class View {
             options.clipRect ? coords.intersect(options.clipRect) : coords
         );
 
+        this.#widthSetter?.(coords.width);
+        this.#heightSetter?.(coords.height);
+
         // override
     }