@genome-spy/core 0.46.1 → 0.47.0

package/dist/src/utils/inertia.js

@@ -1,4 +1,6 @@
 import { lerp } from "vega-util";
+import { makeLerpSmoother } from "./animator.js";
+import clamp from "./clamp.js";
 
 /**
  * Creates some inertia, mainly for zooming with a mechanical mouse wheel
@@ -11,35 +13,32 @@ export default class Inertia {
     constructor(animator, disabled) {
         this.animator = animator;
         this.disabled = !!disabled;
-        this.damping = 0.015;
-        this.acceleration = 0.3; // per event
-        /** Use acceleration if the momentum step is greater than X */
-        this.accelerationThreshold = 100;
-        this.lowerLimit = 0.5; // When to stop updating
-        this.loop = false;
 
-        this.momentum = 0;
-        this.timestamp = 0;
+        // Limit the velocity by setting the maximum distance the value can travel
+        this.maxDistance = 500;
+
         /** @type {function(number):void} */
         this.callback = null;
 
-        this._transitionCallback = this.animate.bind(this);
-        this.clear();
-    }
-
-    clear() {
-        /** @type {number} */
-        this.momentum = 0;
-        this.timestamp = null;
-        this.loop = null;
-        this.callback = null;
+        this.targetValue = 0;
+        this.lastValue = 0;
+
+        this.smoother = makeLerpSmoother(
+            animator,
+            (value) => {
+                const delta = value - this.lastValue;
+                this.lastValue = value;
+                this.callback?.(delta);
+            },
+            40,
+            0.1
+        );
     }
 
     cancel() {
-        if (this.loop) {
-            this.animator.cancelTransition(this._transitionCallback);
-            this.clear();
-        }
+        // decelelerate rapidly
+        this.targetValue = lerp([this.lastValue, this.targetValue], 0.3);
+        this.smoother(this.targetValue);
     }
 
     /**
@@ -53,50 +52,16 @@ export default class Inertia {
             return;
         }
 
-        // This may have some use in the future to improve the behavior of
-        // a mechanical mouse wheel:
-        // https://github.com/w3c/uievents/issues/181
-
-        if (value * this.momentum < 0) {
-            this.momentum = 0; // Stop if the direction changes
-        } else if (Math.abs(value) > this.accelerationThreshold) {
-            this.momentum = lerp([this.momentum, value], this.acceleration);
-        } else {
-            this.momentum = value;
-        }
-
         this.callback = callback;
 
-        if (!this.loop) {
-            this.animate();
-        }
-    }
-
-    /**
-     *
-     * @param {number} [timestamp]
-     */
-    animate(timestamp) {
-        this.callback(this.momentum); // TODO: This is actually a delta, should take the elapsed time into account
+        const delta = clamp(
+            this.targetValue + value - this.lastValue,
+            -this.maxDistance,
+            this.maxDistance
+        );
+        this.targetValue = this.lastValue + delta;
 
-        const timeDelta = timestamp - this.timestamp || 0;
-        this.timestamp = timestamp;
-
-        const velocity = Math.abs(this.momentum);
-
-        this.momentum =
-            Math.sign(this.momentum) *
-            Math.max(
-                0,
-                velocity - ((velocity * this.damping) ** 1.5 + 0.04) * timeDelta
-            );
-
-        if (Math.abs(this.momentum) > this.lowerLimit) {
-            this.loop = true;
-            this.animator.requestTransition(this._transitionCallback);
-        } else {
-            this.clear();
-        }
+        this.smoother(this.targetValue);
     }
 }
 

package/dist/src/utils/inputBinding.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inputBinding.d.ts","sourceRoot":"","sources":["../../../src/utils/inputBinding.js"],"names":[],"mappings":"AAIA;;GAEG;AACH,sDAFW,OAAO,0BAA0B,EAAE,OAAO,8CA6GpD"}
+{"version":3,"file":"inputBinding.d.ts","sourceRoot":"","sources":["../../../src/utils/inputBinding.js"],"names":[],"mappings":"AAIA;;GAEG;AACH,sDAFW,OAAO,0BAA0B,EAAE,OAAO,8CAqIpD"}

package/dist/src/utils/inputBinding.js

@@ -32,7 +32,6 @@ export default function createBindingInputs(mediator) {
         const id = `${random}-param-${name}`;
 
         if (bind.input == "range") {
-            // TODO: Show the value next to the slider
             inputs.push(
                 html`<label for=${id}>${label}</label>
                     <div>
@@ -99,8 +98,33 @@ export default function createBindingInputs(mediator) {
                         )}
                     </select> `
             );
+        } else if (
+            bind.input == "text" ||
+            bind.input == "number" ||
+            bind.input == "color"
+        ) {
+            inputs.push(
+                html`<label for=${id}>${label}</label>
+                    <div>
+                        <input
+                            id=${id}
+                            type=${bind.input}
+                            placeholder=${bind.placeholder ?? ""}
+                            autocomplete=${bind.autocomplete ?? "off"}
+                            .value=${value}
+                            @focus=${(/** @type {any} */ e) =>
+                                e.target.select()}
+                            @input=${(/** @type {any} */ e) => {
+                                debouncedSetter(
+                                    bind.input == "number"
+                                        ? e.target.valueAsNumber
+                                        : e.target.value
+                                );
+                            }}
+                        />
+                    </div>`
+            );
         } else {
-            // TODO: Support other types: "text", "number", "color".
             throw new Error("Unsupported input type: " + bind.input);
         }
 

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

@@ -117,22 +117,20 @@ declare class Scrollbar extends UnitView {
      * @param {ScrollDirection} scrollDirection
      */
     constructor(gridChild: GridChild, scrollDirection: "vertical" | "horizontal");
+    viewportOffset: number;
     config: {
         scrollbarSize: number;
         scrollbarPadding: number;
     };
-    scrollDirection: "vertical" | "horizontal";
-    viewportOffset: number;
-    maxScrollOffset: number;
-    scrollbarCoords: Rectangle;
-    getScrollOffset(): number;
+    interpolateViewportOffset: (target: number) => void;
+    get scrollOffset(): number;
     /**
      *
      * @param {Rectangle} viewportCoords
      * @param {Rectangle} coords
      */
     updateScrollbar(viewportCoords: Rectangle, coords: Rectangle): void;
-    maxViewportOffset: number;
+    #private;
 }
 import Padding from "./layout/padding.js";
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"gridView.d.ts","sourceRoot":"","sources":["../../../src/view/gridView.js"],"names":[],"mappings":"AAowBA;;;GAGG;AACH,iDAHW,OAAO,iBAAiB,EAAE,cAAc,GACtC,OAAO,iBAAiB,EAAE,QAAQ,CAwB9C;AAED;;;GAGG;AACH,uDAHW,OAAO,iBAAiB,EAAE,cAAc,GACtC,OAAO,iBAAiB,EAAE,QAAQ,CA6C9C;AA2BD;;GAEG;AACH,8EAUC;AAED;;;;;GAKG;AACH,4CAJW,OAAO,uBAAuB,EAAE,OAAO,UACvC,OAAO,iBAAiB,EAAE,UAAU,YACpC,QAAQ,aAmBlB;AA33BD;;;;;;;;;;;;;;;GAeG;AACH;IA6BI;;;;;;;;;OASG;IACH,kBARW,OAAO,iBAAiB,EAAE,aAAa,WACvC,OAAO,yBAAyB,EAAE,OAAO,gBACzC,aAAa,iDAEb,MAAM,WACN,MAAM,YACN,OAAO,WAAW,EAAE,WAAW,EAoBzC;IARG,8CAAgB;IAOhB,uBAA0B;IAG9B;;OAEG;IACH,qDAIC;IAeD;;OAEG;IACH,wDAKC;IAqBD;;OAEG;IACH,8CAEC;IAED,yBAEC;IAED;;OAEG;IACH,wCAmCC;IA2OD;;;;OAIG;IAEH,gBALW,OAAO,4CAA4C,EAAE,OAAO,UAC5D,OAAO,uBAAuB,EAAE,OAAO,YACvC,OAAO,uBAAuB,EAAE,gBAAgB,QA6O1D;;CAmGJ;AAgJD;IACI;;;;OAIG;IACH,6DAHW,aAAa,UACb,MAAM,EAoFhB;IAjFG,4BAAgC;IAChC,kCAAgB;IAChB,eAAoB;IAEpB,uBAAuB;IACvB,YADW,QAAQ,CACQ;IAE3B,uBAAuB;IACvB,kBADW,QAAQ,CACc;IAEjC,mFAAmF;IACnF,MADW,QAAQ,OAAO,OAAO,iBAAiB,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC,CAC5D;IAEd,4FAA4F;IAC5F,WADW,QAAQ,OAAO,OAAO,iBAAiB,EAAE,UAAU,EAAE,YAAY,CAAC,CAAC,CAC3D;IAEnB,0DAA0D;IAC1D,kEAAoB;IAEpB,uBAAuB;IACvB,OADW,QAAQ,CACG;IAEtB,wBAAwB;IACxB,QADW,SAAS,CACQ;IA4DhC,uEAcC;IAED;;OAEG;IACH,4BAkKC;IAED,uBAqBC;IAED,iCAEC;CACJ;qBAhrC0D,eAAe;sBAFpD,uBAAuB;0BAGnB,oBAAoB;qBAGzB,eAAe;yBALX,mBAAmB;AAmrC5C;IACI;;;OAGG;IACH,uBAHW,SAAS,8CAyFnB;IAtDG;;;MAAoB;IACpB,2CAAsC;IAKtC,uBAAuB;IAEvB,wBAAwB;IACxB,2BAAqC;IA+CzC,0BAKC;IAWD;;;;OAIG;IACH,gCAHW,SAAS,UACT,SAAS,QA8CnB;IA7BG,0BAAsE;CA8B7E;oBAp1CmB,qBAAqB"}
+{"version":3,"file":"gridView.d.ts","sourceRoot":"","sources":["../../../src/view/gridView.js"],"names":[],"mappings":"AAqwBA;;;GAGG;AACH,iDAHW,OAAO,iBAAiB,EAAE,cAAc,GACtC,OAAO,iBAAiB,EAAE,QAAQ,CAwB9C;AAED;;;GAGG;AACH,uDAHW,OAAO,iBAAiB,EAAE,cAAc,GACtC,OAAO,iBAAiB,EAAE,QAAQ,CA6C9C;AA2BD;;GAEG;AACH,8EAUC;AAED;;;;;GAKG;AACH,4CAJW,OAAO,uBAAuB,EAAE,OAAO,UACvC,OAAO,iBAAiB,EAAE,UAAU,YACpC,QAAQ,aAmBlB;AA33BD;;;;;;;;;;;;;;;GAeG;AACH;IA6BI;;;;;;;;;OASG;IACH,kBARW,OAAO,iBAAiB,EAAE,aAAa,WACvC,OAAO,yBAAyB,EAAE,OAAO,gBACzC,aAAa,iDAEb,MAAM,WACN,MAAM,YACN,OAAO,WAAW,EAAE,WAAW,EAoBzC;IARG,8CAAgB;IAOhB,uBAA0B;IAG9B;;OAEG;IACH,qDAIC;IAeD;;OAEG;IACH,wDAKC;IAqBD;;OAEG;IACH,8CAEC;IAED,yBAEC;IAED;;OAEG;IACH,wCAmCC;IA2OD;;;;OAIG;IAEH,gBALW,OAAO,4CAA4C,EAAE,OAAO,UAC5D,OAAO,uBAAuB,EAAE,OAAO,YACvC,OAAO,uBAAuB,EAAE,gBAAgB,QA6O1D;;CAmGJ;AAgJD;IACI;;;;OAIG;IACH,6DAHW,aAAa,UACb,MAAM,EAoFhB;IAjFG,4BAAgC;IAChC,kCAAgB;IAChB,eAAoB;IAEpB,uBAAuB;IACvB,YADW,QAAQ,CACQ;IAE3B,uBAAuB;IACvB,kBADW,QAAQ,CACc;IAEjC,mFAAmF;IACnF,MADW,QAAQ,OAAO,OAAO,iBAAiB,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC,CAC5D;IAEd,4FAA4F;IAC5F,WADW,QAAQ,OAAO,OAAO,iBAAiB,EAAE,UAAU,EAAE,YAAY,CAAC,CAAC,CAC3D;IAEnB,0DAA0D;IAC1D,kEAAoB;IAEpB,uBAAuB;IACvB,OADW,QAAQ,CACG;IAEtB,wBAAwB;IACxB,QADW,SAAS,CACQ;IA4DhC,uEAcC;IAED;;OAEG;IACH,4BAkKC;IAED,uBAqBC;IAED,iCAEC;CACJ;qBAjrC0D,eAAe;sBAFpD,uBAAuB;0BAGnB,oBAAoB;qBAGzB,eAAe;yBALX,mBAAmB;AAorC5C;IAeI;;;OAGG;IACH,uBAHW,SAAS,8CA4FnB;IA/FD,uBAAmB;IAsCf;;;MAAoB;IAIpB,oDAQC;IA+CL,2BAKC;IAWD;;;;OAIG;IACH,gCAHW,SAAS,UACT,SAAS,QA8CnB;;CACJ;oBAt2CmB,qBAAqB"}

package/dist/src/view/gridView.js

@@ -18,6 +18,7 @@ import createTitle from "./title.js";
 import UnitView from "./unitView.js";
 import interactionToZoom from "./zoom.js";
 import clamp from "../utils/clamp.js";
+import { makeLerpSmoother } from "../utils/animator.js";
 
 /**
  * Modeled after: https://vega.github.io/vega/docs/layout/
@@ -1214,6 +1215,20 @@ export class GridChild {
 }
 
 class Scrollbar extends UnitView {
+    /** @type {ScrollDirection} */
+    #scrollDirection;
+
+    #scrollbarCoords = Rectangle.ZERO;
+
+    #maxScrollOffset = 0;
+
+    #maxViewportOffset = 0;
+
+    // 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.
+    viewportOffset = 0;
+
     /**
      * @param {GridChild} gridChild
      * @param {ScrollDirection} scrollDirection
@@ -1251,20 +1266,23 @@ class Scrollbar extends UnitView {
         );
 
         this.config = config;
-        this.scrollDirection = scrollDirection;
+        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;
+        // Make it smooth!
+        this.interpolateViewportOffset = makeLerpSmoother(
+            this.context.animator,
+            (value) => {
+                this.viewportOffset = value;
+            },
+            50,
+            0.4,
+            this.viewportOffset
+        );
 
         this.addInteractionEventListener("mousedown", (coords, event) => {
             event.stopPropagation();
 
-            if (this.maxScrollOffset <= 0) {
+            if (this.#maxScrollOffset <= 0) {
                 return;
             }
 
@@ -1276,7 +1294,7 @@ class Scrollbar extends UnitView {
             const mouseEvent = /** @type {MouseEvent} */ (event.uiEvent);
             mouseEvent.preventDefault();
 
-            const initialScrollOffset = this.getScrollOffset();
+            const initialScrollOffset = this.scrollOffset;
             const initialOffset = getMouseOffset(mouseEvent);
 
             const onMousemove = /** @param {MouseEvent} moveEvent */ (
@@ -1287,13 +1305,13 @@ class Scrollbar extends UnitView {
                         initialOffset +
                         initialScrollOffset,
                     0,
-                    this.maxScrollOffset
+                    this.#maxScrollOffset
                 );
 
-                this.viewportOffset =
-                    (scrollOffset / this.maxScrollOffset) *
-                    this.maxViewportOffset;
-                this.context.animator.requestRender();
+                this.interpolateViewportOffset(
+                    (scrollOffset / this.#maxScrollOffset) *
+                        this.#maxViewportOffset
+                );
             };
 
             const onMouseup = () => {
@@ -1306,10 +1324,10 @@ class Scrollbar extends UnitView {
         });
     }
 
-    getScrollOffset() {
+    get scrollOffset() {
         return (
-            (this.viewportOffset / this.maxViewportOffset) *
-            this.maxScrollOffset
+            (this.viewportOffset / this.#maxViewportOffset) *
+            this.#maxScrollOffset
         );
     }
 
@@ -1319,7 +1337,7 @@ class Scrollbar extends UnitView {
      * @param {import("../types/rendering.js").RenderingOptions} [options]
      */
     render(context, coords, options) {
-        super.render(context, this.scrollbarCoords, options);
+        super.render(context, this.#scrollbarCoords, options);
     }
 
     /**
@@ -1332,7 +1350,7 @@ class Scrollbar extends UnitView {
         const sSize = this.config.scrollbarSize;
 
         const dimension =
-            this.scrollDirection == "horizontal" ? "width" : "height";
+            this.#scrollDirection == "horizontal" ? "width" : "height";
 
         const visibleFraction = Math.min(
             1,
@@ -1341,28 +1359,28 @@ class Scrollbar extends UnitView {
         const maxScrollLength = viewportCoords[dimension] - 2 * sPad;
         const scrollLength = visibleFraction * maxScrollLength;
 
-        this.maxScrollOffset = maxScrollLength - scrollLength;
-        this.maxViewportOffset = coords[dimension] - viewportCoords[dimension];
+        this.#maxScrollOffset = maxScrollLength - scrollLength;
+        this.#maxViewportOffset = coords[dimension] - viewportCoords[dimension];
         this.viewportOffset = clamp(
             this.viewportOffset,
             0,
-            this.maxViewportOffset
+            this.#maxViewportOffset
         );
 
-        this.scrollbarCoords =
-            this.scrollDirection == "vertical"
+        this.#scrollbarCoords =
+            this.#scrollDirection == "vertical"
                 ? new Rectangle(
                       () =>
                           viewportCoords.x +
                           viewportCoords.width -
                           sSize -
                           sPad,
-                      () => viewportCoords.y + sPad + this.getScrollOffset(),
+                      () => viewportCoords.y + sPad + this.scrollOffset,
                       () => sSize,
                       () => scrollLength
                   )
                 : new Rectangle(
-                      () => viewportCoords.x + sPad + this.getScrollOffset(),
+                      () => viewportCoords.x + sPad + this.scrollOffset,
                       () =>
                           viewportCoords.y +
                           viewportCoords.height -

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

@@ -6,15 +6,7 @@
 export const markTypes: {
     [x: string]: typeof import("../marks/mark.js").default;
 };
-export default class UnitView extends ContainerView {
-    /**
-     * @typedef {import("../spec/channel.js").Channel} Channel
-     * @typedef {import("./view.js").default} View
-     * @typedef {import("./layerView.js").default} LayerView
-     * @typedef {import("../utils/domainArray.js").DomainArray} DomainArray
-     * @typedef {import("../spec/view.js").ResolutionTarget} ResolutionTarget
-     *
-     */
+export default class UnitView extends View {
     /**
      *
      * @param {import("../spec/view.js").UnitSpec} spec
@@ -51,10 +43,6 @@ export default class UnitView extends ContainerView {
      * Returns a collector that is associated with this view.
      */
     getCollector(): import("../data/collector.js").default;
-    /**
-     * @param {Channel} channel A primary channel
-     */
-    _validateDomainQuery(channel: import("../spec/channel.js").Channel): import("../spec/channel.js").MarkPropExprDef<import("../spec/channel.js").Type> | import("../spec/channel.js").MarkPropDatumDef<import("../spec/channel.js").Type> | import("../spec/channel.js").ChromPosDef | import("../spec/channel.js").PositionDatumDef | (import("../spec/channel.js").ChromPosDefBase & import("../spec/channel.js").TitleMixins & import("../spec/channel.js").PositionMixins & import("../spec/channel.js").TypeMixins<"locus"> & import("../spec/channel.js").ScaleMixins & import("../spec/channel.js").XIndexDef) | (import("../spec/channel.js").ScaleMixins & import("../spec/channel.js").DatumDefBase & import("../spec/channel.js").TitleMixins & import("../spec/channel.js").TypeMixins<import("../spec/channel.js").Type> & import("../spec/channel.js").PositionMixins & import("../spec/channel.js").XIndexDef) | import("../spec/channel.js").MarkPropDatumDef<import("../spec/channel.js").TypeForShape> | import("../spec/channel.js").MarkPropFieldDef<string, import("../spec/channel.js").Type> | import("../spec/channel.js").PositionFieldDef<string> | (import("../spec/channel.js").FieldDefBase<string> & import("../spec/channel.js").TitleMixins & import("../spec/channel.js").TypeMixins<import("../spec/channel.js").Type> & import("../spec/channel.js").ScaleMixins & import("../spec/channel.js").PositionMixins & import("../spec/channel.js").XIndexDef) | import("../spec/channel.js").MarkPropFieldDef<string, import("../spec/channel.js").TypeForShape>;
     /**
      * Returns the domain of the specified channel of this domain/mark.
      *
@@ -83,6 +71,7 @@ export default class UnitView extends ContainerView {
      * @returns {import("../spec/view.js").ResolutionBehavior}
      */
     getDefaultResolution(channel: string, resolutionType: import("../spec/view.js").ResolutionTarget): import("../spec/view.js").ResolutionBehavior;
+    #private;
 }
-import ContainerView from "./containerView.js";
+import View from "./view.js";
 //# sourceMappingURL=unitView.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"unitView.d.ts","sourceRoot":"","sources":["../../../src/view/unitView.js"],"names":[],"mappings":"AAqBA;;;;GAIG;AACH;QAHkB,MAAM,GAAE,cAAc,kBAAkB,EAAE,OAAO;EASjE;AAEF;IACI;;;;;;;OAOG;IACH;;;;;;;;OAQG;IACH,kBAPW,OAAO,iBAAiB,EAAE,QAAQ,WAClC,OAAO,yBAAyB,EAAE,OAAO,gBACzC,OAAO,oBAAoB,EAAE,OAAO,cACpC,OAAO,WAAW,EAAE,OAAO,QAC3B,MAAM,YACN,OAAO,WAAW,EAAE,WAAW,EAkBzC;IAbG,yCAAgB;IAIZ,iDAAiD;IACjD,MADW,OAAO,kBAAkB,EAAE,OAAO,CACnB;IAUlC;;;;OAIG;IACH,gBAJW,OAAO,4CAA4C,EAAE,OAAO,UAC5D,OAAO,uBAAuB,EAAE,OAAO,YACvC,OAAO,uBAAuB,EAAE,gBAAgB,QAY1D;IAED,kDAIC;IAED;;;;;OAKG;IACH,iEAgFC;IAED;;;OAGG;IACH,mGASC;IAkBD;;OAEG;IACH,uDAEC;IAED;;OAEG;IACH,6/CAcC;IAED;;;;;OAKG;IACH,6BAHW,OAAO,oBAAoB,EAAE,gBAAgB,iDAkBvD;IAED;;;;;;;;;;;;OAYG;IACH,gHA2CC;IAED,uBAQC;IAgBD;;;;OAIG;IACH,8BAJW,MAAM,+DAEJ,OAAO,iBAAiB,EAAE,kBAAkB,CAKxD;CACJ;0BA1VyB,oBAAoB"}
+{"version":3,"file":"unitView.d.ts","sourceRoot":"","sources":["../../../src/view/unitView.js"],"names":[],"mappings":"AAqBA;;;;GAIG;AACH;QAHkB,MAAM,GAAE,cAAc,kBAAkB,EAAE,OAAO;EASjE;AAEF;IAcI;;;;;;;;OAQG;IACH,kBAPW,OAAO,iBAAiB,EAAE,QAAQ,WAClC,OAAO,yBAAyB,EAAE,OAAO,gBACzC,OAAO,oBAAoB,EAAE,OAAO,cACpC,OAAO,WAAW,EAAE,OAAO,QAC3B,MAAM,YACN,OAAO,WAAW,EAAE,WAAW,EA+BzC;IA1BG,yCAAgB;IAIZ,iDAAiD;IACjD,MADW,OAAO,kBAAkB,EAAE,OAAO,CACnB;IAuBlC;;;;OAIG;IACH,gBAJW,OAAO,4CAA4C,EAAE,OAAO,UAC5D,OAAO,uBAAuB,EAAE,OAAO,YACvC,OAAO,uBAAuB,EAAE,gBAAgB,QAY1D;IAED,kDAIC;IAED;;;;;OAKG;IACH,iEAgFC;IAED;;;OAGG;IACH,mGASC;IAkBD;;OAEG;IACH,uDAEC;IAqBD;;;;;OAKG;IACH,6BAHW,OAAO,oBAAoB,EAAE,gBAAgB,iDAkBvD;IAED;;;;;;;;;;;;OAYG;IACH,gHA2CC;IAED,uBAQC;IAgBD;;;;OAIG;IACH,8BAJW,MAAM,+DAEJ,OAAO,iBAAiB,EAAE,kBAAkB,CAKxD;;CACJ;iBA/VgB,WAAW"}

package/dist/src/view/unitView.js

@@ -4,7 +4,6 @@ import RuleMark from "../marks/rule.js";
 import LinkMark from "../marks/link.js";
 import TextMark from "../marks/text.js";
 
-import ContainerView from "./containerView.js";
 import ScaleResolution from "./scaleResolution.js";
 import {
     isSecondaryChannel,
@@ -18,6 +17,7 @@ import {
 } from "../encoder/encoder.js";
 import createDomain from "../utils/domainArray.js";
 import AxisResolution from "./axisResolution.js";
+import View from "./view.js";
 
 /**
  *
@@ -32,15 +32,20 @@ export const markTypes = {
     text: TextMark,
 };
 
-export default class UnitView extends ContainerView {
+export default class UnitView extends View {
     /**
      * @typedef {import("../spec/channel.js").Channel} Channel
-     * @typedef {import("./view.js").default} View
-     * @typedef {import("./layerView.js").default} LayerView
      * @typedef {import("../utils/domainArray.js").DomainArray} DomainArray
      * @typedef {import("../spec/view.js").ResolutionTarget} ResolutionTarget
      *
      */
+
+    /**
+     * Sets the zoom level parameter.
+     * @type {(zoomLevel: number) => void}
+     */
+    #zoomLevelSetter;
+
     /**
      *
      * @param {import("../spec/view.js").UnitSpec} spec
@@ -65,6 +70,19 @@ export default class UnitView extends ContainerView {
 
         this.resolve();
 
+        this.#zoomLevelSetter = this.paramMediator.allocateSetter(
+            "zoomLevel",
+            1.0
+        );
+        /** @type {import("../spec/channel.js").ChannelWithScale[]} */ ([
+            "x",
+            "y",
+        ]).forEach((channel) =>
+            this.getScaleResolution(channel)?.addEventListener("domain", () =>
+                this.#zoomLevelSetter(Math.sqrt(this.getZoomLevel()))
+            )
+        );
+
         this.needsAxes = { x: true, y: true };
     }
 
@@ -129,7 +147,7 @@ export default class UnitView extends ContainerView {
             while (
                 (view.getConfiguredOrDefaultResolution(targetChannel, type) ==
                     "forced" ||
-                    (view.dataParent instanceof ContainerView &&
+                    (view.dataParent &&
                         ["shared", "excluded", "forced"].includes(
                             view.dataParent.getConfiguredOrDefaultResolution(
                                 targetChannel,
@@ -220,7 +238,7 @@ export default class UnitView extends ContainerView {
     /**
      * @param {Channel} channel A primary channel
      */
-    _validateDomainQuery(channel) {
+    #validateDomainQuery(channel) {
         if (isSecondaryChannel(channel)) {
             throw new Error(
                 `getDomain(${channel}), must only be called for primary channels!`
@@ -243,7 +261,7 @@ export default class UnitView extends ContainerView {
      * @returns {DomainArray}
      */
     getConfiguredDomain(channel) {
-        const channelDef = this._validateDomainQuery(channel);
+        const channelDef = this.#validateDomainQuery(channel);
 
         const specDomain =
             channelDef && channelDef.scale && channelDef.scale.domain;
@@ -273,7 +291,7 @@ export default class UnitView extends ContainerView {
      * @returns {DomainArray}
      */
     extractDataDomain(channel) {
-        const channelDef = this._validateDomainQuery(channel);
+        const channelDef = this.#validateDomainQuery(channel);
         const type = channelDef.type ?? "nominal"; // TODO: Should check that this is a channel without scale
 
         /** @param {Channel} channel */

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

@@ -47,11 +47,12 @@ export default class View {
      */
     opacityFunction: (arg0: number) => number;
     /**
-     * Not nice! Inconsistent when faceting!
-     * TODO: Something. Maybe store only width/height
-     * @type {import("./layout/rectangle.js").default}
+     * Coords of the view for each facet, recorded during the last layout rendering pass.
+     * Most views have only one facet, so the map is usually of size 1.
+     *
+     * @type {Map<any, import("./layout/rectangle.js").default>}
      */
-    coords: import("./layout/rectangle.js").default;
+    facetCoords: Map<any, import("./layout/rectangle.js").default>;
     context: import("../types/viewContext.js").default;
     layoutParent: import("./containerView.js").default;
     dataParent: View;
@@ -86,6 +87,13 @@ export default class View {
     needsAxes: Record<import("../spec/channel.js").PrimaryPositionalChannel, boolean>;
     /** @type {ParamMediator} */
     paramMediator: ParamMediator;
+    /**
+     * Returns the coords of the view. If view has been faceted, returns the coords
+     * of an arbitrary facet. If all or specific facet coords are needed, use `facetCoords`.
+     *
+     * @returns {import("./layout/rectangle.js").default}
+     */
+    get coords(): import("./layout/rectangle.js").default;
     getPadding(): Padding;
     /**
      * Returns a padding that indicates how much axes and titles extend over the plot area.
@@ -160,8 +168,9 @@ export default class View {
      *      Coordinates of the view
      * @param {import("../utils/interactionEvent.js").default} event
      * @param {boolean} capturing
+     * @protected
      */
-    handleInteractionEvent(coords: import("./layout/rectangle.js").default, event: import("../utils/interactionEvent.js").default, capturing: boolean): void;
+    protected handleInteractionEvent(coords: import("./layout/rectangle.js").default, event: import("../utils/interactionEvent.js").default, capturing: boolean): void;
     /**
      * Add an "interaction" event listener that mimics DOM's event model inside
      * the view hierarchy.

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

@@ -1 +1 @@
-{"version":3,"file":"view.d.ts","sourceRoot":"","sources":["../../../src/view/view.js"],"names":[],"mappings":"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"}
+{"version":3,"file":"view.d.ts","sourceRoot":"","sources":["../../../src/view/view.js"],"names":[],"mappings":"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"}

package/dist/src/view/view.js

@@ -17,6 +17,7 @@ import { isDiscrete, bandSpace } from "vega-scale";
 import { peek } from "../utils/arrayUtils.js";
 import ViewError from "./viewError.js";
 import ParamMediator, { isExprRef } from "./paramMediator.js";
+import { InternMap } from "internmap";
 
 // TODO: View classes have too many responsibilities. Come up with a way
 // to separate the concerns. However, most concerns are tightly tied to
@@ -75,11 +76,12 @@ export default class View {
     opacityFunction = defaultOpacityFunction;
 
     /**
-     * Not nice! Inconsistent when faceting!
-     * TODO: Something. Maybe store only width/height
-     * @type {import("./layout/rectangle.js").default}
+     * Coords of the view for each facet, recorded during the last layout rendering pass.
+     * Most views have only one facet, so the map is usually of size 1.
+     *
+     * @type {Map<any, import("./layout/rectangle.js").default>}
      */
-    coords;
+    facetCoords = new InternMap([], JSON.stringify);
 
     /**
      *
@@ -141,6 +143,16 @@ export default class View {
         }
     }
 
+    /**
+     * Returns the coords of the view. If view has been faceted, returns the coords
+     * of an arbitrary facet. If all or specific facet coords are needed, use `facetCoords`.
+     *
+     * @returns {import("./layout/rectangle.js").default}
+     */
+    get coords() {
+        return this.facetCoords.values().next().value;
+    }
+
     getPadding() {
         return this._cache("size/padding", () =>
             Padding.createFromConfig(this.spec.padding)
@@ -379,6 +391,7 @@ export default class View {
      *      Coordinates of the view
      * @param {import("../utils/interactionEvent.js").default} event
      * @param {boolean} capturing
+     * @protected
      */
     handleInteractionEvent(coords, event, capturing) {
         const listenersByType = capturing
@@ -480,9 +493,15 @@ export default class View {
      * @type {import("../types/rendering.js").RenderMethod}
      */
     render(context, coords, options = {}) {
-        this.coords = options.clipRect
-            ? coords.intersect(options.clipRect)
-            : coords;
+        // TODO: When using sample faceting, all facets have the same coords.
+        // It would be better to save only single coords with an `undefined` facetId.
+        if (options.firstFacet) {
+            this.facetCoords.clear();
+        }
+        this.facetCoords.set(
+            options.facetId,
+            options.clipRect ? coords.intersect(options.clipRect) : coords
+        );
 
         // override
     }

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

@@ -8,11 +8,11 @@
  */
 /**
  * @param {import("../utils/interactionEvent.js").default} event
- * @param {import("./renderingContext/layoutRecorderViewRenderingContext.js").Rectangle} coords The plot area
+ * @param {import("./layout/rectangle.js").default} coords
  * @param {(zoomEvent: ZoomEvent) => void} handleZoom
  * @param {import("../types/viewContext.js").Hover} [hover]
  */
-export default function interactionToZoom(event: import("../utils/interactionEvent.js").default, coords: import("./renderingContext/layoutRecorderViewRenderingContext.js").Rectangle, handleZoom: (zoomEvent: ZoomEvent) => void, hover?: import("../types/viewContext.js").Hover): void;
+export default function interactionToZoom(event: import("../utils/interactionEvent.js").default, coords: import("./layout/rectangle.js").default, handleZoom: (zoomEvent: ZoomEvent) => void, hover?: import("../types/viewContext.js").Hover): void;
 export type ZoomEvent = {
     x: number;
     y: number;

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

@@ -1 +1 @@
-{"version":3,"file":"zoom.d.ts","sourceRoot":"","sources":["../../../src/view/zoom.js"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH;;;;;GAKG;AACH,iDALW,OAAO,8BAA8B,EAAE,OAAO,UAC9C,OAAO,0DAA0D,EAAE,SAAS,0BAChE,SAAS,KAAK,IAAI,UAC9B,OAAO,yBAAyB,EAAE,KAAK,QA2EjD;;OAtFS,MAAM;OACN,MAAM;YACN,MAAM;YACN,MAAM;YACN,MAAM"}
+{"version":3,"file":"zoom.d.ts","sourceRoot":"","sources":["../../../src/view/zoom.js"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH;;;;;GAKG;AACH,iDALW,OAAO,8BAA8B,EAAE,OAAO,UAC9C,OAAO,uBAAuB,EAAE,OAAO,0BAC3B,SAAS,KAAK,IAAI,UAC9B,OAAO,yBAAyB,EAAE,KAAK,QA2EjD;;OAtFS,MAAM;OACN,MAAM;YACN,MAAM;YACN,MAAM;YACN,MAAM"}