@genome-spy/core 0.65.0 → 0.67.0

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

@@ -1 +1 @@
-{"version":3,"file":"scrollbar.d.ts","sourceRoot":"","sources":["../../../../src/view/gridView/scrollbar.js"],"names":[],"mappings":"AAKA;;GAEG;AACH;IAeI;;;OAGG;IACH,uBAHW,OAAO,gBAAgB,EAAE,OAAO,mBAChC,eAAe,EA2FzB;IA/FD,uBAAmB;IAsCf;;;MAAoB;IAIpB;;;;MAQC;IA+CL,2BAKC;IAWD;;;;OAIG;IACH,gCAHW,SAAS,UACT,SAAS,QA8CnB;;CACJ;8BAlLY,YAAY,GAAG,UAAU;qBAHjB,gBAAgB;sBADf,wBAAwB"}
+{"version":3,"file":"scrollbar.d.ts","sourceRoot":"","sources":["../../../../src/view/gridView/scrollbar.js"],"names":[],"mappings":"AAKA;;;;;GAKG;AACH;IAwBI;;;;OAIG;IACH,uBAJW,OAAO,gBAAgB,EAAE,OAAO,mBAChC,eAAe,YACf;QAAE,sBAAsB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;KAAE,EAwH/D;IAvID;;;;;;OAMG;IACH,uBAAmB;IAiDf;;;;MAAoB;IAiFxB,2BAEC;IAED;;;OAGG;IACH,yBAHW,MAAM,6BACN;QAAE,MAAM,CAAC,EAAE,OAAO,CAAC;QAAC,YAAY,CAAC,EAAE,OAAO,CAAA;KAAE,QAYtD;IAqFD;;;;;;;;;OASG;IACH,gCAHW,SAAS,iBACT,SAAS,QASnB;IAMG;;;;MAWC;;CAER;;;;;8BAlSY,YAAY,GAAG,UAAU;qBANjB,gBAAgB;sBADf,wBAAwB"}

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,6CA+DvD;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;;;;;uBAnGpL,OAAO,iBAAiB,EAAE,QAAQ;;;;;0BAClC,OAAO,yBAAyB,EAAE,OAAO"}

package/dist/src/view/testUtils.js

@@ -66,9 +66,16 @@ export function createTestViewContext(viewFactoryOptions = {}) {
                     /** @type {(callback: () => void) => void} */ (
                         (callback) => callback()
                     ),
+                transition: (/** @type {any} */ options) => {
+                    const to = typeof options.to === "number" ? options.to : 1;
+                    options.onUpdate(to);
+                    return Promise.resolve();
+                },
             })
         ),
 
+        requestLayoutReflow: () => undefined,
+
         isViewConfiguredVisible: () => true,
 
         //...partialContext,
@@ -100,7 +107,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,iEAyJC;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;iBAvgBgB,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,22 +348,47 @@ 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);
                     view.resolutions[type][targetChannel] = resolution;
 
-                    resolution.addEventListener("range", (event) => {
-                        // Create if WebGLHelper is available, i.e., if not running in headless mode
+                    const updateRangeTexture = (
+                        /** @type {import("../types/scaleResolutionApi.js").ScaleResolutionEvent} */ event
+                    ) => {
+                        // Create if WebGLHelper is available, i.e., if not running in headless mode.
+                        // Domain changes can alter discrete texture sizes as well.
                         this.context.glHelper?.createRangeTexture(
                             event.scaleResolution,
                             true
                         );
+                    };
+                    resolution.addEventListener("range", updateRangeTexture);
+                    resolution.addEventListener("domain", updateRangeTexture);
+                    this.registerDisposer(() => {
+                        resolution.removeEventListener(
+                            "range",
+                            updateRangeTexture
+                        );
+                        resolution.removeEventListener(
+                            "domain",
+                            updateRangeTexture
+                        );
                     });
                 }
 
@@ -378,12 +403,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 +428,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.