@genome-spy/core 0.46.1 → 0.48.0

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

@@ -1,18 +1,12 @@
-/**
- * @typedef {object} ZoomEvent
- * @prop {number} x
- * @prop {number} y
- * @prop {number} xDelta
- * @prop {number} yDelta
- * @prop {number} zDelta
- */
+export function isStillZooming(): boolean;
 /**
  * @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]
+ * @param {import("../utils/animator.js").default} [animator]
  */
-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 function interactionToZoom(event: import("../utils/interactionEvent.js").default, coords: import("./layout/rectangle.js").default, handleZoom: (zoomEvent: ZoomEvent) => void, hover?: import("../types/viewContext.js").Hover, animator?: import("../utils/animator.js").default): 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":"AAkBA,0CAGC;AAgBD;;;;;;GAMG;AACH,yCANW,OAAO,8BAA8B,EAAE,OAAO,UAC9C,OAAO,uBAAuB,EAAE,OAAO,0BAC3B,SAAS,KAAK,IAAI,UAC9B,OAAO,yBAAyB,EAAE,KAAK,aACvC,OAAO,sBAAsB,EAAE,OAAO,QA0IhD;;OAlLS,MAAM;OACN,MAAM;YACN,MAAM;YACN,MAAM;YACN,MAAM"}

package/dist/src/view/zoom.js

@@ -7,19 +7,54 @@
  * @prop {number} zDelta
  */
 
+import { makeLerpSmoother } from "../utils/animator.js";
+import RingBuffer from "../utils/ringBuffer.js";
+import Point from "./layout/point.js";
+
+/** @type {ReturnType<typeof makeLerpSmoother>} */
+let smoother;
+
+let lastTimestamp = 0;
+
+export function isStillZooming() {
+    const delta = performance.now() - lastTimestamp;
+    return delta < 50;
+}
+
+/**
+ *
+ * @param {T} fn
+ * @returns {T}
+ * @template {Function} T
+ */
+function recordTimeStamp(fn) {
+    // @ts-ignore
+    return function (...args) {
+        lastTimestamp = performance.now();
+        fn(...args);
+    };
+}
+
 /**
  * @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]
+ * @param {import("../utils/animator.js").default} [animator]
  */
-export default function interactionToZoom(event, coords, handleZoom, hover) {
+export function interactionToZoom(event, coords, handleZoom, hover, animator) {
+    handleZoom = recordTimeStamp(handleZoom);
+
     if (event.type == "wheel") {
         event.uiEvent.preventDefault(); // TODO: Only if there was something zoomable
 
         const wheelEvent = /** @type {WheelEvent} */ (event.uiEvent);
         const wheelMultiplier = wheelEvent.deltaMode ? 120 : 1;
 
+        if (wheelEvent.deltaX === 0 && wheelEvent.deltaY === 0) {
+            return;
+        }
+
         let { x, y } = event.point;
 
         // Snapping to the hovered item:
@@ -28,6 +63,9 @@ export default function interactionToZoom(event, coords, handleZoom, hover) {
         // This allows the user to rapidly zoom closer without having to
         // continuously adjust the cursor position.
 
+        // Stop drag-to-pan inertia
+        smoother?.stop();
+
         if (hover) {
             const e = hover.mark.encoders;
             if (e.x && !e.x2 && !e.x.constantValue) {
@@ -59,31 +97,110 @@ export default function interactionToZoom(event, coords, handleZoom, hover) {
         event.type == "mousedown" &&
         /** @type {MouseEvent} */ (event.uiEvent).button === 0
     ) {
+        if (smoother) {
+            smoother.stop();
+        }
+
+        /** @type {RingBuffer<{point: Point, timestamp: number}>} */
+        const buffer = new RingBuffer(30);
+
         const mouseEvent = /** @type {MouseEvent} */ (event.uiEvent);
         mouseEvent.preventDefault();
 
-        let prevMouseEvent = mouseEvent;
+        let prevPoint = Point.fromMouseEvent(mouseEvent);
 
         const onMousemove = /** @param {MouseEvent} moveEvent */ (
             moveEvent
         ) => {
+            const point = Point.fromMouseEvent(moveEvent);
+            buffer.push({ point, timestamp: performance.now() });
+
+            const delta = point.subtract(prevPoint);
+
             handleZoom({
-                x: prevMouseEvent.clientX,
-                y: prevMouseEvent.clientY,
-                xDelta: moveEvent.clientX - prevMouseEvent.clientX,
-                yDelta: moveEvent.clientY - prevMouseEvent.clientY,
+                x: prevPoint.x,
+                y: prevPoint.y,
+                xDelta: delta.x,
+                yDelta: delta.y,
                 zDelta: 0,
             });
 
-            prevMouseEvent = moveEvent;
+            prevPoint = point;
         };
 
-        const onMouseup = /** @param {MouseEvent} upEvent */ (upEvent) => {
+        const animateInertia = () => {
+            const lastMillisToInclude = 160;
+
+            const now = performance.now();
+            const arr = buffer
+                .get()
+                .filter((p) => now - p.timestamp < lastMillisToInclude);
+
+            if (arr.length < 5 || !animator || isDecelerating(arr)) {
+                return;
+            }
+
+            const a = arr.at(-1);
+            const b = arr[0];
+
+            const v = a.point
+                .subtract(b.point)
+                .multiply(1 / (a.timestamp - b.timestamp));
+
+            let x = prevPoint.x;
+
+            smoother = makeLerpSmoother(
+                animator,
+                (a) => {
+                    handleZoom({
+                        x: a,
+                        y: prevPoint.y,
+                        xDelta: x - a,
+                        yDelta: 0,
+                        zDelta: 0,
+                    });
+                    x = a;
+                },
+                150,
+                0.5,
+                x
+            );
+
+            smoother(prevPoint.x - v.x * 250);
+        };
+
+        const onMouseup = () => {
             document.removeEventListener("mousemove", onMousemove);
             document.removeEventListener("mouseup", onMouseup);
+            animateInertia();
         };
 
         document.addEventListener("mouseup", onMouseup, false);
         document.addEventListener("mousemove", onMousemove, false);
     }
 }
+
+/**
+ * Split the array into two vectors and compare their lengths to find out if
+ * the mouse movement is decelerating.
+ * @param {{point: Point, timestamp: number}[]} arr
+ */
+function isDecelerating(arr) {
+    const mid = arr[Math.floor(arr.length / 2)];
+
+    const ap = mid.point
+        .subtract(arr[0].point)
+        .multiply(mid.timestamp - arr[0].timestamp);
+    const bp = arr
+        .at(-1)
+        .point.subtract(mid.point)
+        .multiply(arr.at(-1).timestamp - mid.timestamp);
+
+    const a = ap.length;
+    const b = bp.length;
+
+    // Found by trial and error
+    const maxRatio = 0.4;
+
+    return b / a < maxRatio;
+}

package/package.json

@@ -7,7 +7,7 @@
   },
   "contributors": [],
   "license": "MIT",
-  "version": "0.46.1",
+  "version": "0.48.0",
   "jsdelivr": "dist/bundle/index.js",
   "unpkg": "dist/bundle/index.js",
   "browser": "dist/bundle/index.js",
@@ -64,5 +64,5 @@
     "vega-scale": "^7.3.1",
     "vega-util": "^1.17.2"
   },
-  "gitHead": "9e43f979e60032c4a6a3780b1eba429358917bd7"
+  "gitHead": "64cd3335607b2608db3c85c74a4fb571302e77d0"
 }

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

@@ -1,60 +0,0 @@
-/**
- * A Rendering context that doesn't render anything. It creates a hierarchy
- * of view coordinates, including faceted views that are repeated multiple times.
- * The coordinates can be used for mouse events / interactions, for example.
- *
- * @typedef {import("../view.js").default} View
- * @typedef {import("../layout/rectangle.js").default} Rectangle
- *
- */
-export default class LayoutRecorderViewRenderingContext extends ViewRenderingContext {
-    /** @type {ViewCoords} */
-    root: ViewCoords;
-    /** @type {ViewCoords[]} */
-    stack: ViewCoords[];
-    /** @type {ViewCoords} */
-    lastAddition: ViewCoords;
-    getLayout(): ViewCoords;
-}
-/**
- * A Rendering context that doesn't render anything. It creates a hierarchy
- * of view coordinates, including faceted views that are repeated multiple times.
- * The coordinates can be used for mouse events / interactions, for example.
- */
-export type View = import("../view.js").default;
-/**
- * A Rendering context that doesn't render anything. It creates a hierarchy
- * of view coordinates, including faceted views that are repeated multiple times.
- * The coordinates can be used for mouse events / interactions, for example.
- */
-export type Rectangle = import("../layout/rectangle.js").default;
-import ViewRenderingContext from "./viewRenderingContext.js";
-/**
- * Represents coordinates of view instances. Faceted views objects may have
- * been rendered at multiple locations.
- */
-declare class ViewCoords {
-    /**
-     * @param {View} view
-     * @param {Rectangle} coords
-     */
-    constructor(view: View, coords: Rectangle);
-    view: import("../view.js").default;
-    coords: import("../layout/rectangle.js").default;
-    /** @type {ViewCoords[]} */
-    children: ViewCoords[];
-    /**
-     *
-     * @param {ViewCoords} viewCoords
-     */
-    addChild(viewCoords: ViewCoords): void;
-    /**
-     * Broadcasts a message to views that include the given (x, y) point.
-     * This is mainly intended for mouse events.
-     *
-     * @param {import("../../utils/interactionEvent.js").default} event
-     */
-    dispatchInteractionEvent(event: import("../../utils/interactionEvent.js").default): void;
-}
-export {};
-//# sourceMappingURL=layoutRecorderViewRenderingContext.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"layoutRecorderViewRenderingContext.d.ts","sourceRoot":"","sources":["../../../../src/view/renderingContext/layoutRecorderViewRenderingContext.js"],"names":[],"mappings":"AAGA;;;;;;;;GAQG;AACH;IAOQ,yBAAyB;IACzB,MADW,UAAU,CACA;IAErB,2BAA2B;IAC3B,OADW,UAAU,EAAE,CACR;IAEf,yBAAyB;IACzB,cADW,UAAU,CACQ;IAgCjC,wBAEC;CACJ;;;;;;mBArDY,OAAO,YAAY,EAAE,OAAO;;;;;;wBAC5B,OAAO,wBAAwB,EAAE,OAAO;iCARpB,2BAA2B;AA8D5D;;;GAGG;AACH;IACI;;;OAGG;IACH,kBAHW,IAAI,UACJ,SAAS,EAOnB;IAJG,mCAAgB;IAChB,iDAAoB;IACpB,2BAA2B;IAC3B,UADW,UAAU,EAAE,CACL;IAGtB;;;OAGG;IACH,qBAFW,UAAU,QAcpB;IAED;;;;;OAKG;IACH,gCAFW,OAAO,iCAAiC,EAAE,OAAO,QAyB3D;CACJ"}

package/dist/src/view/renderingContext/layoutRecorderViewRenderingContext.js

@@ -1,128 +0,0 @@
-import { peek } from "../../utils/arrayUtils.js";
-import ViewRenderingContext from "./viewRenderingContext.js";
-
-/**
- * A Rendering context that doesn't render anything. It creates a hierarchy
- * of view coordinates, including faceted views that are repeated multiple times.
- * The coordinates can be used for mouse events / interactions, for example.
- *
- * @typedef {import("../view.js").default} View
- * @typedef {import("../layout/rectangle.js").default} Rectangle
- *
- */
-export default class LayoutRecorderViewRenderingContext extends ViewRenderingContext {
-    /**
-     * @param {import("../../types/rendering.js").GlobalRenderingOptions} globalOptions
-     */
-    constructor(globalOptions) {
-        super(globalOptions);
-
-        /** @type {ViewCoords} */
-        this.root = undefined;
-
-        /** @type {ViewCoords[]} */
-        this.stack = [];
-
-        /** @type {ViewCoords} */
-        this.lastAddition = undefined;
-    }
-
-    /**
-     * Must be called when a view's render() method is entered
-     *
-     * @param {View} view
-     * @param {Rectangle} coords View coordinates
-     *      inside the padding.
-     */
-    pushView(view, coords) {
-        // TODO: Facet id
-
-        const viewCoords = new ViewCoords(view, coords);
-
-        if (!this.root) {
-            this.root = viewCoords;
-        } else {
-            peek(this.stack).addChild(viewCoords);
-        }
-        this.stack.push(viewCoords);
-    }
-
-    /**
-     * Must be called when a view's render() method is being exited
-     *
-     * @param {View} view
-     */
-    popView(view) {
-        this.stack.pop();
-    }
-
-    getLayout() {
-        return this.root;
-    }
-}
-
-/**
- * Represents coordinates of view instances. Faceted views objects may have
- * been rendered at multiple locations.
- */
-class ViewCoords {
-    /**
-     * @param {View} view
-     * @param {Rectangle} coords
-     */
-    constructor(view, coords) {
-        this.view = view;
-        this.coords = coords;
-        /** @type {ViewCoords[]} */
-        this.children = [];
-    }
-
-    /**
-     *
-     * @param {ViewCoords} viewCoords
-     */
-    addChild(viewCoords) {
-        const last = peek(this.children);
-        if (
-            last &&
-            viewCoords.view === last.view &&
-            viewCoords.coords.equals(last.coords)
-        ) {
-            // Skip extra copies of sample facets. They all have the same coords.
-            return;
-        }
-
-        this.children.push(viewCoords);
-    }
-
-    /**
-     * Broadcasts a message to views that include the given (x, y) point.
-     * This is mainly intended for mouse events.
-     *
-     * @param {import("../../utils/interactionEvent.js").default} event
-     */
-    dispatchInteractionEvent(event) {
-        if (this.coords.containsPoint(event.point.x, event.point.y)) {
-            this.view.handleInteractionEvent(this.coords, event, true);
-            if (event.stopped) {
-                return;
-            }
-
-            if (this.children.length == 0) {
-                event.target = this.view;
-            } else {
-                for (const child of this.children) {
-                    child.dispatchInteractionEvent(event);
-                    if (event.target) {
-                        break;
-                    }
-                    if (event.stopped) {
-                        return;
-                    }
-                }
-            }
-
-            this.view.handleInteractionEvent(this.coords, event, false);
-        }
-    }
-}