@genome-spy/core 0.65.0 → 0.66.1

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

@@ -4,37 +4,57 @@ import Rectangle from "../layout/rectangle.js";
 import UnitView from "../unitView.js";
 
 /**
+ * This class represents a scrollbar thumb that can be used within a grid view
+ * to provide scrolling functionality for overflowing content.
+ *
  * @typedef {"horizontal" | "vertical"} ScrollDirection
  */
 export default class Scrollbar extends UnitView {
     /** @type {ScrollDirection} */
     #scrollDirection;
 
+    // NOTE: Keep this Rectangle instance stable. Buffered rendering caches
+    // a reference to coords; replacing it breaks dynamic updates.
     #scrollbarCoords = Rectangle.ZERO;
 
-    #maxScrollOffset = 0;
+    #viewportCoords = Rectangle.ZERO;
 
-    #maxViewportOffset = 0;
+    #contentCoords = Rectangle.ZERO;
 
-    // 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.
+    /**
+     * 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;
 
+    /** @type {(offset: number) => void} */
+    #onViewportOffsetChange;
+
     /**
      * @param {import("./gridChild.js").default} gridChild
      * @param {ScrollDirection} scrollDirection
+     * @param {{ onViewportOffsetChange?: (offset: number) => void }} [options]
      */
-    constructor(gridChild, scrollDirection) {
-        // TODO: Configurable
+    constructor(gridChild, scrollDirection, options = {}) {
+        // TODO: Configurable per view
         const config = {
             scrollbarSize: 8,
             scrollbarPadding: 2,
-            // TODO: inside/outside view
+            scrollbarMinLength: 20,
         };
 
         super(
             {
+                params: [
+                    {
+                        name: "scrollbarOpacity",
+                        value: 1,
+                    },
+                ],
+                opacity: { expr: "scrollbarOpacity" },
                 data: { values: [{}] },
                 mark: {
                     type: "rect",
@@ -59,22 +79,41 @@ export default class Scrollbar extends UnitView {
 
         this.config = config;
         this.#scrollDirection = scrollDirection;
+        this.#onViewportOffsetChange = options.onViewportOffsetChange;
 
-        // Make it smooth!
-        this.interpolateViewportOffset = makeLerpSmoother(
-            this.context.animator,
-            (value) => {
-                this.viewportOffset = value.x;
-            },
-            50,
-            0.4,
-            { x: this.viewportOffset }
-        );
+        const sPad = this.config.scrollbarPadding;
+        const sSize = this.config.scrollbarSize;
+
+        this.#scrollbarCoords =
+            this.#scrollDirection == "vertical"
+                ? new Rectangle(
+                      () =>
+                          this.#viewportCoords.x +
+                          this.#viewportCoords.width -
+                          sSize -
+                          sPad,
+                      () => this.#viewportCoords.y + sPad + this.scrollOffset,
+                      () => sSize,
+                      () => this.#getScrollLength()
+                  )
+                : new Rectangle(
+                      () => this.#viewportCoords.x + sPad + this.scrollOffset,
+                      () =>
+                          this.#viewportCoords.y +
+                          this.#viewportCoords.height -
+                          sSize -
+                          sPad,
+                      () => this.#getScrollLength(),
+                      () => sSize
+                  );
+
+        // Smooth viewport offset updates
+        this.#initViewportOffsetSmoother(this.viewportOffset);
 
         this.addInteractionEventListener("mousedown", (coords, event) => {
             event.stopPropagation();
 
-            if (this.#maxScrollOffset <= 0) {
+            if (this.#getMaxScrollOffset() <= 0) {
                 return;
             }
 
@@ -91,18 +130,21 @@ export default class Scrollbar extends UnitView {
             const onMousemove = /** @param {MouseEvent} moveEvent */ (
                 moveEvent
             ) => {
+                const maxScrollOffset = this.#getMaxScrollOffset();
+                if (maxScrollOffset <= 0) {
+                    return;
+                }
+
                 const scrollOffset = clamp(
                     getMouseOffset(moveEvent) -
                         initialOffset +
                         initialScrollOffset,
                     0,
-                    this.#maxScrollOffset
+                    maxScrollOffset
                 );
 
                 this.interpolateViewportOffset({
-                    x:
-                        (scrollOffset / this.#maxScrollOffset) *
-                        this.#maxViewportOffset,
+                    x: this.#getViewportOffsetFromScrollOffset(scrollOffset),
                 });
             };
 
@@ -117,9 +159,95 @@ export default class Scrollbar extends UnitView {
     }
 
     get scrollOffset() {
-        return (
-            (this.viewportOffset / this.#maxViewportOffset) *
-            this.#maxScrollOffset
+        return this.#getScrollOffsetFromViewportOffset(this.viewportOffset);
+    }
+
+    /**
+     * @param {number} value
+     * @param {{ notify?: boolean, syncSmoother?: boolean }} [options]
+     */
+    setViewportOffset(value, { notify = true, syncSmoother = false } = {}) {
+        this.viewportOffset = clamp(value, 0, this.#getMaxViewportOffset());
+
+        if (syncSmoother) {
+            this.#initViewportOffsetSmoother(this.viewportOffset);
+        }
+
+        if (notify && this.#onViewportOffsetChange) {
+            this.#onViewportOffsetChange(this.viewportOffset);
+        }
+    }
+
+    #getVisibleFraction() {
+        const dimension =
+            this.#scrollDirection == "horizontal" ? "width" : "height";
+
+        const viewportSize = this.#viewportCoords[dimension];
+        const contentSize = this.#contentCoords[dimension];
+
+        return contentSize > 0 ? Math.min(1, viewportSize / contentSize) : 1;
+    }
+
+    #getMaxScrollLength() {
+        const dimension =
+            this.#scrollDirection == "horizontal" ? "width" : "height";
+
+        return Math.max(
+            0,
+            this.#viewportCoords[dimension] - 2 * this.config.scrollbarPadding
+        );
+    }
+
+    #getScrollLength() {
+        const maxScrollLength = this.#getMaxScrollLength();
+        const scrollLength = this.#getVisibleFraction() * maxScrollLength;
+        const minLength = this.config.scrollbarMinLength;
+
+        return Math.min(maxScrollLength, Math.max(minLength, scrollLength));
+    }
+
+    #getMaxScrollOffset() {
+        return Math.max(
+            0,
+            this.#getMaxScrollLength() - this.#getScrollLength()
+        );
+    }
+
+    /**
+     * @param {number} viewportOffset
+     */
+    #getScrollOffsetFromViewportOffset(viewportOffset) {
+        const maxViewportOffset = this.#getMaxViewportOffset();
+        const maxScrollOffset = this.#getMaxScrollOffset();
+
+        if (maxViewportOffset <= 0 || maxScrollOffset <= 0) {
+            return 0;
+        }
+
+        return (viewportOffset / maxViewportOffset) * maxScrollOffset;
+    }
+
+    /**
+     * @param {number} scrollOffset
+     */
+    #getViewportOffsetFromScrollOffset(scrollOffset) {
+        const maxViewportOffset = this.#getMaxViewportOffset();
+        const maxScrollOffset = this.#getMaxScrollOffset();
+
+        if (maxViewportOffset <= 0 || maxScrollOffset <= 0) {
+            return 0;
+        }
+
+        return (scrollOffset / maxScrollOffset) * maxViewportOffset;
+    }
+
+    #getMaxViewportOffset() {
+        const dimension =
+            this.#scrollDirection == "horizontal" ? "width" : "height";
+
+        return Math.max(
+            0,
+            this.#contentCoords[dimension] - this.#viewportCoords[dimension]
         );
     }
 
@@ -129,57 +257,44 @@ export default class Scrollbar extends UnitView {
      * @param {import("../../types/rendering.js").RenderingOptions} [options]
      */
     render(context, coords, options) {
+        // NOTE: This only records layout coordinates for buffered rendering.
         super.render(context, this.#scrollbarCoords, options);
     }
 
     /**
+     * Updates the scrollbar with the latest viewport and content rectangles.
+     *
+     * Viewport coords are flattened to stay stable between layout passes, while
+     * content coords may be dynamic (e.g., peek transitions) and are evaluated
+     * on demand via accessors.
      *
      * @param {Rectangle} viewportCoords
-     * @param {Rectangle} coords
+     * @param {Rectangle} contentCoords
      */
-    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;
+    updateScrollbar(viewportCoords, contentCoords) {
+        this.#viewportCoords = viewportCoords.flatten();
+        this.#contentCoords = contentCoords;
+        this.setViewportOffset(this.viewportOffset, {
+            notify: false,
+            syncSmoother: true,
+        });
+    }
 
-        this.#maxScrollOffset = maxScrollLength - scrollLength;
-        this.#maxViewportOffset = coords[dimension] - viewportCoords[dimension];
-        this.viewportOffset = clamp(
-            this.viewportOffset,
-            0,
-            this.#maxViewportOffset
+    /**
+     * @param {number} value
+     */
+    #initViewportOffsetSmoother(value) {
+        this.interpolateViewportOffset = makeLerpSmoother(
+            this.context.animator,
+            (current) => {
+                this.setViewportOffset(current.x, {
+                    notify: true,
+                    syncSmoother: false,
+                });
+            },
+            35,
+            0.4,
+            { x: value }
         );
-
-        this.#scrollbarCoords =
-            this.#scrollDirection == "vertical"
-                ? new Rectangle(
-                      () =>
-                          viewportCoords.x +
-                          viewportCoords.width -
-                          sSize -
-                          sPad,
-                      () => viewportCoords.y + sPad + this.scrollOffset,
-                      () => sSize,
-                      () => scrollLength
-                  )
-                : new Rectangle(
-                      () => viewportCoords.x + sPad + this.scrollOffset,
-                      () =>
-                          viewportCoords.y +
-                          viewportCoords.height -
-                          sSize -
-                          sPad,
-                      () => scrollLength,
-                      () => sSize
-                  );
     }
 }

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

@@ -10,6 +10,20 @@ export default class LayerView extends ContainerView {
      */
     constructor(spec: import("../spec/view.js").LayerSpec, context: import("../types/viewContext.js").default, layoutParent: ContainerView, dataParent: import("./view.js").default, name: string, options?: import("./view.js").ViewOptions);
     spec: import("../spec/view.js").LayerSpec;
+    /**
+     * Adds a child spec dynamically. Intended for post-initialization updates.
+     *
+     * @param {import("../spec/view.js").LayerSpec | import("../spec/view.js").UnitSpec | import("../spec/view.js").ImportSpec} childSpec
+     * @param {number} [index]
+     * @returns {Promise<LayerView | import("./unitView.js").default>}
+     */
+    addChildSpec(childSpec: import("../spec/view.js").LayerSpec | import("../spec/view.js").UnitSpec | import("../spec/view.js").ImportSpec, index?: number): Promise<LayerView | import("./unitView.js").default>;
+    /**
+     * Removes a child by index. Intended for post-initialization updates.
+     *
+     * @param {number} index
+     */
+    removeChildAt(index: number): Promise<void>;
     get children(): (import("./unitView.js").default | LayerView)[];
     #private;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"layerView.d.ts","sourceRoot":"","sources":["../../../src/view/layerView.js"],"names":[],"mappings":"AAIA;IAQI;;;;;;;;OAQG;IACH,kBAPW,OAAO,iBAAiB,EAAE,SAAS,WACnC,OAAO,yBAAyB,EAAE,OAAO,gBACzC,aAAa,cACb,OAAO,WAAW,EAAE,OAAO,QAC3B,MAAM,YACN,OAAO,WAAW,EAAE,WAAW,EAWzC;IAHG,0CAAgB;IAoCpB,gEAEC;;CA6CJ;0BA7GyB,oBAAoB"}
+{"version":3,"file":"layerView.d.ts","sourceRoot":"","sources":["../../../src/view/layerView.js"],"names":[],"mappings":"AAKA;IAQI;;;;;;;;OAQG;IACH,kBAPW,OAAO,iBAAiB,EAAE,SAAS,WACnC,OAAO,yBAAyB,EAAE,OAAO,gBACzC,aAAa,cACb,OAAO,WAAW,EAAE,OAAO,QAC3B,MAAM,YACN,OAAO,WAAW,EAAE,WAAW,EAWzC;IAHG,0CAAgB;IAoCpB;;;;;;OAMG;IACH,wBAJW,OAAO,iBAAiB,EAAE,SAAS,GAAG,OAAO,iBAAiB,EAAE,QAAQ,GAAG,OAAO,iBAAiB,EAAE,UAAU,UAC/G,MAAM,GACJ,OAAO,CAAC,SAAS,GAAG,OAAO,eAAe,EAAE,OAAO,CAAC,CAMhE;IAED;;;;OAIG;IACH,qBAFW,MAAM,iBAIhB;IA6CD,gEAEC;;CA6CJ;0BA/KyB,oBAAoB"}

package/dist/src/view/layerView.js

@@ -1,6 +1,7 @@
 import { isLayerSpec, isUnitSpec } from "./viewFactory.js";
 import ContainerView from "./containerView.js";
 import ViewError from "./viewError.js";
+import ContainerMutationHelper from "./containerMutationHelper.js";
 
 export default class LayerView extends ContainerView {
     /**
@@ -61,6 +62,71 @@ export default class LayerView extends ContainerView {
         );
     }
 
+    /**
+     * Adds a child spec dynamically. Intended for post-initialization updates.
+     *
+     * @param {import("../spec/view.js").LayerSpec | import("../spec/view.js").UnitSpec | import("../spec/view.js").ImportSpec} childSpec
+     * @param {number} [index]
+     * @returns {Promise<LayerView | import("./unitView.js").default>}
+     */
+    async addChildSpec(childSpec, index) {
+        return /** @type {Promise<LayerView | import("./unitView.js").default>} */ (
+            this.#getMutationHelper().addChildSpec(childSpec, index)
+        );
+    }
+
+    /**
+     * Removes a child by index. Intended for post-initialization updates.
+     *
+     * @param {number} index
+     */
+    async removeChildAt(index) {
+        await this.#getMutationHelper().removeChildAt(index);
+    }
+
+    /**
+     * @returns {ContainerMutationHelper}
+     */
+    #getMutationHelper() {
+        return new ContainerMutationHelper(this, {
+            getChildSpecs: () => ({
+                specs: this.spec.layer,
+                insertAt: (index, spec) => {
+                    this.spec.layer.splice(
+                        index,
+                        0,
+                        /** @type {import("../spec/view.js").LayerSpec | import("../spec/view.js").UnitSpec | import("../spec/view.js").ImportSpec} */ (
+                            spec
+                        )
+                    );
+                },
+                removeAt: (index) => {
+                    this.spec.layer.splice(index, 1);
+                },
+            }),
+            insertView: (view, index) => {
+                view.layoutParent ??= this;
+                this.#children.splice(
+                    index,
+                    0,
+                    /** @type {LayerView | import("./unitView.js").default} */ (
+                        view
+                    )
+                );
+                return view;
+            },
+            removeView: (index) => {
+                const view = this.#children[index];
+                if (!view) {
+                    throw new Error("Child index out of range!");
+                }
+                view.disposeSubtree();
+                this.#children.splice(index, 1);
+            },
+            defaultName: (index) => "layer" + index,
+        });
+    }
+
     get children() {
         return this.#children.slice();
     }

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=layerView.test.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"layerView.test.d.ts","sourceRoot":"","sources":["../../../src/view/layerView.test.js"],"names":[],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"testUtils.d.ts","sourceRoot":"","sources":["../../../src/view/testUtils.js"],"names":[],"mappings":"AAoBA;;;GAGG;AACH,2DAHW,OAAO,kBAAkB,EAAE,kBAAkB,6CAwDvD;AAGS,uBAAC,CAAC,SAAS,OAAO,WAAW,EAAE,OAAO,QAAQ,QAAQ,aAAa;IAAE,KAAI,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,CAAC,CAAA;CAAE,uBAAuB,OAAO,kBAAkB,EAAE,kBAAkB,GAAK,OAAO,CAAC,CAAC,CAAC,CAAA;AAgBhL,oCAAC,CAAC,SAAS,OAAO,WAAW,EAAE,OAAO,QAAQ,QAAQ,aAAa;IAAE,KAAI,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,CAAC,CAAA;CAAE,YAAY,WAAW,YAAY;IAAC,MAAM,EAAE,OAAO,CAAC;IAAC,YAAY,EAAE,OAAO,CAAA;CAAC,GAAK,OAAO,CAAC,CAAC,CAAC,CAAA;;;;;uBA5FpL,OAAO,iBAAiB,EAAE,QAAQ;;;;;0BAClC,OAAO,yBAAyB,EAAE,OAAO"}
+{"version":3,"file":"testUtils.d.ts","sourceRoot":"","sources":["../../../src/view/testUtils.js"],"names":[],"mappings":"AAoBA;;;GAGG;AACH,2DAHW,OAAO,kBAAkB,EAAE,kBAAkB,6CA0DvD;AAGS,uBAAC,CAAC,SAAS,OAAO,WAAW,EAAE,OAAO,QAAQ,QAAQ,aAAa;IAAE,KAAI,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,CAAC,CAAA;CAAE,uBAAuB,OAAO,kBAAkB,EAAE,kBAAkB,GAAK,OAAO,CAAC,CAAC,CAAC,CAAA;AAgBhL,oCAAC,CAAC,SAAS,OAAO,WAAW,EAAE,OAAO,QAAQ,QAAQ,aAAa;IAAE,KAAI,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,CAAC,CAAA;CAAE,YAAY,WAAW,YAAY;IAAC,MAAM,EAAE,OAAO,CAAC;IAAC,YAAY,EAAE,OAAO,CAAA;CAAC,GAAK,OAAO,CAAC,CAAC,CAAC,CAAA;;;;;uBA9FpL,OAAO,iBAAiB,EAAE,QAAQ;;;;;0BAClC,OAAO,yBAAyB,EAAE,OAAO"}

package/dist/src/view/testUtils.js

@@ -69,6 +69,8 @@ export function createTestViewContext(viewFactoryOptions = {}) {
             })
         ),
 
+        requestLayoutReflow: () => undefined,
+
         isViewConfiguredVisible: () => true,
 
         //...partialContext,
@@ -100,7 +102,6 @@ export async function createAndInitialize(spec, viewClass) {
     const view = await create(spec, viewClass);
 
     checkForDuplicateScaleNames(view);
-
     if (view instanceof UnitView) {
         view.mark.initializeEncoders();
     } else if (view instanceof ContainerView) {

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

@@ -1 +1 @@
-{"version":3,"file":"unitView.d.ts","sourceRoot":"","sources":["../../../src/view/unitView.js"],"names":[],"mappings":"AA6BA;;;;GAIG;AACH,wBAHU,MAAM,CAAC,OAAO,iBAAiB,EAAE,QAAQ,EAAE,cAAc,kBAAkB,EAAE,OAAO,CAAC,CAc7F;AAEF;IAeI;;;;;;;;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,EAyCzC;IApCG,yCAAgB;IAIZ,iDAAiD;IACjD,MADW,OAAO,kBAAkB,EAAE,OAAO,CACnB;IAoKlC,2DAIC;IAgBD;;;;;OAKG;IAEH,iEAsHC;IAwCD;;;;;OAKG;IACH,4IAMC;IAkBD;;OAEG;IACH,uDAEC;IAED;;;;;;;;;;;;;OAaG;IACH,uEAHW,OAAO,oBAAoB,EAAE,IAAI,iDAqB3C;IAED,uBAQC;IAgBD;;;;OAIG;IACH,8BAJW,MAAM,+DAEJ,OAAO,iBAAiB,EAAE,kBAAkB,CAKxD;;CACJ;iBAlgBgB,WAAW"}
+{"version":3,"file":"unitView.d.ts","sourceRoot":"","sources":["../../../src/view/unitView.js"],"names":[],"mappings":"AA6BA;;;;GAIG;AACH,wBAHU,MAAM,CAAC,OAAO,iBAAiB,EAAE,QAAQ,EAAE,cAAc,kBAAkB,EAAE,OAAO,CAAC,CAc7F;AAEF;IAeI;;;;;;;;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,EAyCzC;IApCG,yCAAgB;IAIZ,iDAAiD;IACjD,MADW,OAAO,kBAAkB,EAAE,OAAO,CACnB;IAoKlC,2DAIC;IAgBD;;;;;OAKG;IAEH,iEA0IC;IAUD;;;;;OAKG;IACH,4IAMC;IAkBD;;OAEG;IACH,uDAEC;IAED;;;;;;;;;;;;;OAaG;IACH,uEAHW,OAAO,oBAAoB,EAAE,IAAI,iDAqB3C;IAED,uBAQC;IAgBD;;;;OAIG;IACH,8BAJW,MAAM,+DAEJ,OAAO,iBAAiB,EAAE,kBAAkB,CAKxD;;CACJ;iBAxfgB,WAAW"}

package/dist/src/view/unitView.js

@@ -4,7 +4,7 @@ import RuleMark from "../marks/rule.js";
 import LinkMark from "../marks/link.js";
 import TextMark from "../marks/text.js";
 
-import ScaleResolution from "./scaleResolution.js";
+import ScaleResolution from "../scales/scaleResolution.js";
 import {
     isPositionalChannel,
     isChannelDefWithScale,
@@ -15,7 +15,7 @@ import {
     isValueDefWithCondition,
 } from "../encoder/encoder.js";
 import createDomain from "../utils/domainArray.js";
-import AxisResolution from "./axisResolution.js";
+import AxisResolution from "../scales/axisResolution.js";
 import View from "./view.js";
 import {
     asSelectionConfig,
@@ -348,11 +348,21 @@ export default class UnitView extends View {
                         targetChannel
                     );
                 }
-                view.resolutions[type][targetChannel].addMember({
+                const resolution = view.resolutions[type][targetChannel];
+                const unregister = resolution.registerMember({
                     view: this,
                     channel,
                     channelDef: channelDefWithScale,
                 });
+                this.registerDisposer(() => {
+                    // Unregister returns true when it removed the last member.
+                    if (
+                        unregister() &&
+                        view.resolutions[type][targetChannel] === resolution
+                    ) {
+                        delete view.resolutions[type][targetChannel];
+                    }
+                });
             } else if (type == "scale" && isChannelWithScale(channel)) {
                 if (!view.resolutions[type][targetChannel]) {
                     const resolution = new ScaleResolution(targetChannel);
@@ -378,12 +388,22 @@ export default class UnitView extends View {
                         ? undefined
                         : this.extractDataDomain.bind(this);
 
-                view.resolutions[type][targetChannel].addMember({
+                const resolution = view.resolutions[type][targetChannel];
+                const unregister = resolution.registerMember({
                     view: this,
                     channel,
                     channelDef: channelDefWithScale,
                     dataDomainSource,
                 });
+                this.registerDisposer(() => {
+                    // Unregister returns true when it removed the last member.
+                    if (
+                        unregister() &&
+                        view.resolutions[type][targetChannel] === resolution
+                    ) {
+                        delete view.resolutions[type][targetChannel];
+                    }
+                });
             }
         }
     }
@@ -393,39 +413,9 @@ export default class UnitView extends View {
      */
     dispose() {
         super.dispose();
-
-        this.#unresolve();
         this.mark.dispose();
     }
 
-    #unresolve() {
-        for (const view of this.getDataAncestors()) {
-            for (const [channel, resolution] of Object.entries(
-                view.resolutions.scale
-            )) {
-                if (
-                    resolution &&
-                    resolution.removeMembersByView(this) &&
-                    resolution.members.length === 0
-                ) {
-                    delete view.resolutions.scale[channel];
-                }
-            }
-
-            for (const [channel, resolution] of Object.entries(
-                view.resolutions.axis
-            )) {
-                if (
-                    resolution &&
-                    resolution.removeMembersByView(this) &&
-                    resolution.members.length === 0
-                ) {
-                    delete view.resolutions.axis[channel];
-                }
-            }
-        }
-    }
-
     /**
      * Returns an accessor that accesses a field or an evaluated expression,
      * if there is one.

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

@@ -65,14 +65,14 @@ export default class View {
     resolutions: {
         /**
          * Channel-specific scale resolutions
-         * @type {Partial<Record<import("../spec/channel.js").ChannelWithScale, import("./scaleResolution.js").default>>}
+         * @type {Partial<Record<import("../spec/channel.js").ChannelWithScale, import("../scales/scaleResolution.js").default>>}
          */
-        scale: Partial<Record<import("../spec/channel.js").ChannelWithScale, import("./scaleResolution.js").default>>;
+        scale: Partial<Record<import("../spec/channel.js").ChannelWithScale, import("../scales/scaleResolution.js").default>>;
         /**
          * Channel-specific axis resolutions
-         * @type {Partial<Record<import("../spec/channel.js").PrimaryPositionalChannel, import("./axisResolution.js").default>>}
+         * @type {Partial<Record<import("../spec/channel.js").PrimaryPositionalChannel, import("../scales/axisResolution.js").default>>}
          */
-        axis: Partial<Record<import("../spec/channel.js").PrimaryPositionalChannel, import("./axisResolution.js").default>>;
+        axis: Partial<Record<import("../spec/channel.js").PrimaryPositionalChannel, import("../scales/axisResolution.js").default>>;
     };
     options: {
         /**
@@ -280,11 +280,11 @@ export default class View {
     /**
      * @param {import("../spec/channel.js").ChannelWithScale} channel
      */
-    getScaleResolution(channel: import("../spec/channel.js").ChannelWithScale): import("./scaleResolution.js").default;
+    getScaleResolution(channel: import("../spec/channel.js").ChannelWithScale): import("../scales/scaleResolution.js").default;
     /**
      * @param {import("../spec/channel.js").PositionalChannel} channel
      */
-    getAxisResolution(channel: import("../spec/channel.js").PositionalChannel): import("./axisResolution.js").default;
+    getAxisResolution(channel: import("../spec/channel.js").PositionalChannel): import("../scales/axisResolution.js").default;
     /**
      * @param {import("../spec/channel.js").Channel | "default"} channel
      * @param {import("../spec/view.js").ResolutionTarget} resolutionType

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":"AA2BA,oBAAoB;AACpB,yBAA0B,YAAY,CAAC;AACvC,0BAA0B;AAC1B,yBAA0B,YAAY,CAAC;AAKvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH;IAkCI;;;;;;;;;OASG;IACH,kBARW,OAAO,iBAAiB,EAAE,QAAQ,WAClC,OAAO,yBAAyB,EAAE,OAAO,gBACzC,OAAO,oBAAoB,EAAE,OAAO,cACpC,OAAO,WAAW,EAAE,OAAO,QAC3B,MAAM,YACN,WAAW,EAuErB;IAhGD;;OAEG;IACH,iBAFU,CAAS,IAAM,EAAN,MAAM,KAAE,MAAM,CAEQ;IAOzC;;;;;OAKG;IACH,aAFU,GAAG,CAAC,GAAG,EAAE,OAAO,uBAAuB,EAAE,OAAO,CAAC,CAEX;IAiB5C,mDAAsB;IACtB,mDAAgC;IAChC,iBAA4B;IAC5B,aAA6B;IAC7B,yCAAgB;IAEhB;QACI;;;WAGG;eADO,OAAO,CAAC,MAAM,CAAC,OAAO,oBAAoB,EAAE,gBAAgB,EAAE,OAAO,8BAA8B,EAAE,OAAO,CAAC,CAAC;QAGxH;;;WAGG;cADO,OAAO,CAAC,MAAM,CAAC,OAAO,oBAAoB,EAAE,wBAAwB,EAAE,OAAO,6BAA6B,EAAE,OAAO,CAAC,CAAC;MAGlI;IAID;;;;kCA/EE,OAAO;;;;;kCAEP,OAAO;;;;;yBAGP,OAAO;MA8ER;IAED;;OAEG;IACH,YAFU,OAAO,uBAAuB,EAAE,UAAU,GAAG,SAAS,CAErC;IAE3B;;;;OAIG;IACH,WAFU,MAAM,CAAC,OAAO,oBAAoB,EAAE,wBAAwB,EAAE,OAAO,CAAC,CAEzC;IAEvC,4BAA4B;IAC5B,eADW,aAAa,CAGvB;IAuBL;;;;;OAKG;IACH,cAFa,OAAO,uBAAuB,EAAE,OAAO,CAInD;IAED,sBAIC;IAED;;;;OAIG;IACH,eAFa,OAAO,CAInB;IAED;;;;;OAKG;IACH,gBAFa,OAAO,CAMnB;IAED;;;;;OAKG;IACH,WAFa,cAAc,CAW1B;IAED;;OAEG;IACH,mBAFa,cAAc,CAkB1B;IAoED,+BAEC;IAED,2BAEC;IAED;;;;;;;;OAQG;IACH,aAFa,OAAO,CAMnB;IAED;;;;;;;OAOG;IACH,uBAFa,MAAM,CAMlB;IAED,wBAKC;IAkBD;;OAEG;IACH,6BAEC;IAED;;OAEG;IACH,2BAEC;IAED;;;;OAIG;IACH,yBAFW,gBAAgB,QAO1B;IAED;;;;OAIG;IACH,2BAHW,MAAM,WACN,CAAS,IAAgB,EAAhB,gBAAgB,KAAE,IAAI,QASzC;IAED;;;;;;;;OAQG;IACH,yCANW,OAAO,uBAAuB,EAAE,OAAO,SAEvC,OAAO,8BAA8B,EAAE,OAAO,aAC9C,OAAO,QAUjB;IAED;;;;;;;;;;OAUG;IACH,kCAJW,MAAM,YACN,wBAAwB,eACxB,OAAO,QAajB;IAED;;;;OAIG;IACH,qCAJW,MAAM,YACN,wBAAwB,eACxB,OAAO,QAajB;IAED;;;;;;;OAOG;IACH,eAJW,OAAO,GACL,WAAW,CAmBvB;IAED;;OAEG;IACH,yBAOC;IAED;;OAEG;IACH,gBAsBC;IAED;;OAEG;IACH,2BAFW,MAAM,IAAI,QAIpB;IAED;;OAEG;IACH,uBAOC;IAED;;OAEG;IACH,6BASC;IAED;;;OAGG;IACH,uBAEC;;IAyBD;;;;;;OAMG;IACH,eAFY,OAAO,oBAAoB,EAAE,QAAQ,CAuBhD;IAED;;;;OAIG;IACH,+BAJW,IAAI,GAEH,CAAS,IAAM,EAAN,MAAM,KAAE,GAAG,CAM/B;IAED;;;;;OAKG;IACH,6BAHW,IAAI,GACF,MAAM,EAAE,CASpB;IAED;;;;;;;;;;;;;;;OAeG;IACH,yBAFY,YAAY,CAIvB;IAED;;OAEG;IACH,4BAFW,OAAO,oBAAoB,EAAE,gBAAgB,kDAWvD;IAED;;OAEG;IACH,2BAFW,OAAO,oBAAoB,EAAE,iBAAiB,iDAWxD;IAED;;;;OAIG;IACH,iCAJW,OAAO,oBAAoB,EAAE,OAAO,GAAG,SAAS,kBAChD,OAAO,iBAAiB,EAAE,gBAAgB,GACxC,OAAO,iBAAiB,EAAE,kBAAkB,CAIxD;IAED;;;;OAIG;IACH,0CAJW,OAAO,oBAAoB,EAAE,OAAO,kBACpC,OAAO,iBAAiB,EAAE,gBAAgB,GACxC,OAAO,iBAAiB,EAAE,kBAAkB,CAQxD;IAED;;;;OAIG;IACH,8BAJW,OAAO,oBAAoB,EAAE,OAAO,kBACpC,OAAO,iBAAiB,EAAE,gBAAgB,GACxC,OAAO,iBAAiB,EAAE,kBAAkB,CAIxD;IAED;;OAEG;IACH,cAFa,MAAM,CAOlB;IAED;;OAEG;IACH,8BAEC;IAED,oBASC;IAED;;;;;;OAMG;IACH,iBAHa,CAAC,OAHH,GAAG,YACH,CAAS,IAAI,EAAJ,UAAI,KAAE,CAAC,GACd,CAAC,CAMb;IAED;;;;OAIG;IACH,8BAHW,MAAM,cACN,MAAM,GAAG,SAAS,GAAG,WAAW,QAiB1C;IAED,4BAEC;IAED;;;;;OAKG;IACH,iCAFW,OAAO,8BAA8B,EAAE,OAAO,QAIxD;;CACJ;AAoEM,iCAHI,GAAG,GACF,IAAI,IAAI,OAAO,iBAAiB,EAAE,IAAI,CAEF;0BAp1BnC,8BAAsB,IAAI;qCAG5B,IAAI,KACF,WAAW;sBAEX,eAAe,GAAG;IACvB,SAAS,CAAC,EAAE,CAAS,IAAI,EAAJ,IAAI,KAAE,IAAI,CAAC;IAChC,cAAc,CAAC,EAAE,CAAS,IAAI,EAAJ,IAAI,KAAE,IAAI,CAAC;IACrC,aAAa,CAAC,EAAE,CAAS,IAAI,EAAJ,IAAI,KAAE,IAAI,CAAA;CAAC;;;;;UAIlC,OAAO,iBAAiB,EAAE,kBAAkB;;;;cAC5C,GAAG;;gDAGF,OAAO,uBAAuB,EAAE,OAAO,SAEvC,OAAO,8BAA8B,EAAE,OAAO;;;;;+BAG/C,OAAO;;;;;+BAEP,OAAO;;;;;qBAGP,OAAO;;0BA7CwB,oBAAoB;oBAbzC,qBAAqB;+BADlC,wBAAwB"}

package/dist/src/view/view.js

@@ -123,12 +123,12 @@ export default class View {
         this.resolutions = {
             /**
              * Channel-specific scale resolutions
-             * @type {Partial<Record<import("../spec/channel.js").ChannelWithScale, import("./scaleResolution.js").default>>}
+             * @type {Partial<Record<import("../spec/channel.js").ChannelWithScale, import("../scales/scaleResolution.js").default>>}
              */
             scale: {},
             /**
              * Channel-specific axis resolutions
-             * @type {Partial<Record<import("../spec/channel.js").PrimaryPositionalChannel, import("./axisResolution.js").default>>}
+             * @type {Partial<Record<import("../spec/channel.js").PrimaryPositionalChannel, import("../scales/axisResolution.js").default>>}
              */
             axis: {},
         };
@@ -276,7 +276,7 @@ export default class View {
 
             const scale = this.getScaleResolution(
                 dimension == "width" ? "x" : "y"
-            )?.scale;
+            )?.getScale();
 
             if (scale) {
                 // Note: this and all ancestral views need to be refreshed when the domain is changed.
@@ -843,7 +843,7 @@ function createViewOpacityFunction(view) {
         } else if (isDynamicOpacity(opacityDef)) {
             /** @type {(channel: import("../spec/channel.js").ChannelWithScale) => any} */
             const getScale = (channel) => {
-                const scale = view.getScaleResolution(channel)?.scale;
+                const scale = view.getScaleResolution(channel)?.getScale();
                 // Only works on linear scales
                 if (["linear", "index", "locus"].includes(scale?.type)) {
                     return scale;