@genome-spy/core 0.47.0 → 0.48.0

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

@@ -1 +1 @@
-{"version":3,"file":"genomeSpy.d.ts","sourceRoot":"","sources":["../../src/genomeSpy.js"],"names":[],"mappings":"AA8CA;IACI;;;;;OAKG;IAEH;;;;;OAKG;IACH,uBAJW,WAAW,qDAEX,OAAO,qBAAqB,EAAE,YAAY,EA2FpD;IAxFG,uBAA0B;IAC1B,oDAAsB;IAItB,6BAA6B;IAC7B,uBADW,CAAC,MAAM,IAAI,CAAC,EAAE,CACM;IAE/B,sCAAsC;IACtC,wCAAgB;IAEhB,iCAA4C;IAC5C,yBAAoC;IAEpC,4CAA4C;IAC5C,oBADW,QAAU,MAAM,KAAE,MAAM,EAAE,CAAC,EAAE,CACZ;IAE5B,mBAAoD;IAEpD,0BAA0B;IAC1B,aADW,WAAW,CACM;IAE5B;;;;;OAKG;IACH,qEAF0B,OAAO,CAE8B;IAE/D,2CAA2C;IAC3C,mBADW,4BAA4B,CACL;IAClC,2CAA2C;IAC3C,iBADW,4BAA4B,CACP;IAEhC,oDAAoD;IACpD,6BAAgC;IAEhC;;;OAGG;IACH,eAFU;QAAE,IAAI,EAAE,OAAO,iBAAiB,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,OAAO,oBAAoB,EAAE,KAAK,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAEpF;IAE9B,uBAA+C;IAE/C;;;OAGG;IACH,oBAFU,IAAI,MAAM,EAAE,QAAU,aAAa,KAAE,IAAI,CAAC,EAAE,CAAC,CAEpB;IAEnC;;;;;;OAMG;IACH,yCAFkC,GAAG,KAAK,IAAI,GAEd;IAEhC;;;OAGG;IACH,kDAFkC,GAAG,KAAK,IAAI,GAEL;IAEzC,oFAAoF;IACpF,iBADW,OAAO,MAAM,EAAE,OAAO,6BAA6B,EAAE,cAAc,CAAC,CAK9E;IAED,mBAAmB;IACnB,2CAAyB;IAEzB;;;;OAIG;IACH;gBAF8B,OAAO,wBAAwB,EAAE,iBAAiB;iBAAW,MAAM;OAEnE;IAE9B;;OAEG;IACH,wBAFU,WAAW,CAEkB;IA2C3C;;;OAGG;IACH,2CAFkB,MAAM,KAAK,GAAG,EAAE,QAIjC;IAED;;OAEG;IACH,+BAFW,MAAM,YAShB;IAED;;;;OAIG;IACH,sBAHW,MAAM,QACN,GAAG,EAAE,QAaf;IAED;;;;;OAKG;IACH,gBAHW,kBAAkB,YAClB,GAAG,QAQb;IAED;;;OAGG;IACH,iCAqDC;IA0DG,uBAQC;IAGD,mCAGE;IAOF,sCAEE;IAGF,iBAAyC;IAW7C;;OAEG;IACH,gBAuBC;IAED,sCA8MC;IAED;;;OAGG;IACH,UAFa,QAAQ,OAAO,CAAC,CA6B5B;IAED,4BA+IC;IAxHe,iCAAoC;IA0HpD;;;OAGG;IACH,kBAHW,MAAM,KACN,MAAM,QAsEhB;IAED;;;;;;;OAOG;IACH,oDAHuB,QAAQ,MAAM,GAAG,WAAW,GAAG,OAAO,KAAK,EAAE,cAAc,CAAC,QAYlF;IAED,sBA6CC;IAED,kBAIC;IAED,iCAOC;IAED,iCASC;IAED,qFAWC;;CACJ;;;;iCAl7BY,eAAe,GAAG,YAAY,GAAG,QAAQ,GAAG,gBAAgB;4BAjC7C,uBAAuB;4BA2BP,uBAAuB;qBAZ9C,qBAAqB;wBAIlB,yBAAyB;yCARR,yDAAyD;oBAYvD,oBAAoB;wBAdvC,qBAAqB;oBAXzB,uBAAuB;qBAStB,oBAAoB"}
+{"version":3,"file":"genomeSpy.d.ts","sourceRoot":"","sources":["../../src/genomeSpy.js"],"names":[],"mappings":"AA+CA;IACI;;;;;OAKG;IAEH;;;;;OAKG;IACH,uBAJW,WAAW,qDAEX,OAAO,qBAAqB,EAAE,YAAY,EA2FpD;IAxFG,uBAA0B;IAC1B,oDAAsB;IAItB,6BAA6B;IAC7B,uBADW,CAAC,MAAM,IAAI,CAAC,EAAE,CACM;IAE/B,sCAAsC;IACtC,wCAAgB;IAEhB,iCAA4C;IAC5C,yBAAoC;IAEpC,4CAA4C;IAC5C,oBADW,QAAU,MAAM,KAAE,MAAM,EAAE,CAAC,EAAE,CACZ;IAE5B,mBAAoD;IAEpD,0BAA0B;IAC1B,aADW,WAAW,CACM;IAE5B;;;;;OAKG;IACH,qEAF0B,OAAO,CAE8B;IAE/D,2CAA2C;IAC3C,mBADW,4BAA4B,CACL;IAClC,2CAA2C;IAC3C,iBADW,4BAA4B,CACP;IAEhC,oDAAoD;IACpD,6BAAgC;IAEhC;;;OAGG;IACH,eAFU;QAAE,IAAI,EAAE,OAAO,iBAAiB,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,OAAO,oBAAoB,EAAE,KAAK,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAEpF;IAE9B,uBAA+C;IAE/C;;;OAGG;IACH,oBAFU,IAAI,MAAM,EAAE,QAAU,aAAa,KAAE,IAAI,CAAC,EAAE,CAAC,CAEpB;IAEnC;;;;;;OAMG;IACH,yCAFkC,GAAG,KAAK,IAAI,GAEd;IAEhC;;;OAGG;IACH,kDAFkC,GAAG,KAAK,IAAI,GAEL;IAEzC,oFAAoF;IACpF,iBADW,OAAO,MAAM,EAAE,OAAO,6BAA6B,EAAE,cAAc,CAAC,CAK9E;IAED,mBAAmB;IACnB,2CAAyB;IAEzB;;;;OAIG;IACH;gBAF8B,OAAO,wBAAwB,EAAE,iBAAiB;iBAAW,MAAM;OAEnE;IAE9B;;OAEG;IACH,wBAFU,WAAW,CAEkB;IA2C3C;;;OAGG;IACH,2CAFkB,MAAM,KAAK,GAAG,EAAE,QAIjC;IAED;;OAEG;IACH,+BAFW,MAAM,YAShB;IAED;;;;OAIG;IACH,sBAHW,MAAM,QACN,GAAG,EAAE,QAaf;IAED;;;;;OAKG;IACH,gBAHW,kBAAkB,YAClB,GAAG,QAQb;IAED;;;OAGG;IACH,iCAqDC;IA0DG,uBAQC;IAGD,mCAGE;IAOF,sCAEE;IAGF,iBAAyC;IAW7C;;OAEG;IACH,gBAuBC;IAED,sCA8MC;IAED;;;OAGG;IACH,UAFa,QAAQ,OAAO,CAAC,CA6B5B;IAED,4BAqJC;IA9He,iCAAoC;IAgIpD;;;OAGG;IACH,kBAHW,MAAM,KACN,MAAM,QAsEhB;IAED;;;;;;;OAOG;IACH,oDAHuB,QAAQ,MAAM,GAAG,WAAW,GAAG,OAAO,KAAK,EAAE,cAAc,CAAC,QAYlF;IAED,sBA6CC;IAED,kBAIC;IAED,iCAOC;IAED,iCASC;IAED,qFAWC;;CACJ;;;;iCAx7BY,eAAe,GAAG,YAAY,GAAG,QAAQ,GAAG,gBAAgB;4BAlC7C,uBAAuB;4BA2BP,uBAAuB;qBAZ9C,qBAAqB;wBAIlB,yBAAyB;yCARR,yDAAyD;oBAYvD,oBAAoB;wBAdvC,qBAAqB;oBAXzB,uBAAuB;qBAStB,oBAAoB"}

package/dist/src/genomeSpy.js

@@ -36,6 +36,7 @@ import { invalidatePrefix } from "./utils/propertyCacher.js";
 import { VIEW_ROOT_NAME, ViewFactory } from "./view/viewFactory.js";
 import { reconfigureScales } from "./view/scaleResolution.js";
 import createBindingInputs from "./utils/inputBinding.js";
+import { isStillZooming } from "./view/zoom.js";
 
 /**
  * Events that are broadcasted to all views.
@@ -687,8 +688,10 @@ export default class GenomeSpy {
                     this.tooltip.handleMouseMove(event);
                     this._tooltipUpdateRequested = false;
 
-                    if (event.buttons == 0) {
-                        // Disable during dragging
+                    // Disable picking during dragging. Also postpone picking until
+                    // the user has stopped zooming as reading pixels from the
+                    // picking buffer is slow and ruins smooth animations.
+                    if (event.buttons == 0 && !isStillZooming()) {
                         this.renderPickingFramebuffer();
                         this._handlePicking(point.x, point.y);
                     }
@@ -711,7 +714,11 @@ export default class GenomeSpy {
                     this._wheelInertia.cancel();
                 }
 
-                if (event.type == "mousedown" || event.type == "mouseup") {
+                if (
+                    (event.type == "mousedown" || event.type == "mouseup") &&
+                    !isStillZooming()
+                ) {
+                    // Actually, only needed when clicking on a mark
                     this.renderPickingFramebuffer();
                 } else if (event.type == "wheel") {
                     lastWheelEvent = now;

package/dist/src/utils/animator.d.ts

@@ -10,9 +10,11 @@
  * @param {number} halfLife Time until half of the value is reached, in milliseconds
  * @param {number} stopAt Stop animation when the value is within this distance from the target
  * @param {number} [initialValue] Initial value
- * @returns {(target: number) => void} Function that activates the transition with a new target value
+ * @returns {((target: number) => void) & { stop: () => void}} Function that activates the transition with a new target value
  */
-export function makeLerpSmoother(animator: import("../utils/animator.js").default, callback: (value: number) => void, halfLife: number, stopAt: number, initialValue?: number): (target: number) => void;
+export function makeLerpSmoother(animator: import("../utils/animator.js").default, callback: (value: number) => void, halfLife: number, stopAt: number, initialValue?: number): ((target: number) => void) & {
+    stop: () => void;
+};
 export default class Animator {
     /**
      *

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

@@ -1 +1 @@
-{"version":3,"file":"animator.d.ts","sourceRoot":"","sources":["../../../src/utils/animator.js"],"names":[],"mappings":"AAoFA;;;;;;;;;;;;;GAaG;AACH,2CAPW,OAAO,sBAAsB,EAAE,OAAO,oBAC9B,MAAM,KAAK,IAAI,YACvB,MAAM,UACN,MAAM,iBACN,MAAM,YACK,MAAM,KAAK,IAAI,CAoDpC;AAlJD;IACI;;;OAGG;IACH,mCAFoB,MAAM,KAAE,IAAI,EAS/B;IANG,wBAHgB,MAAM,KAAE,IAAI,CAGS;IACrC,0BAA6B;IAC7B,eAAkB;IAElB,wCAAwC;IACxC,aADW,QAAU,MAAM,KAAE,IAAI,CAAC,EAAE,CACf;IAGzB;;;;;;;;;OASG;IACH,mCAFoB,MAAM,KAAE,IAAI,QAM/B;IAED;;OAEG;IACH,kCAFoB,MAAM,KAAE,IAAI,QAO/B;IAED;;;;OAIG;IACH,sBAoBC;IAED;;;;;OAKG;IACH,oBAFW,OAAO,iBAAiB,EAAE,iBAAiB,gBAQrD;CACJ"}
+{"version":3,"file":"animator.d.ts","sourceRoot":"","sources":["../../../src/utils/animator.js"],"names":[],"mappings":"AAoFA;;;;;;;;;;;;;GAaG;AACH,2CAPW,OAAO,sBAAsB,EAAE,OAAO,oBAC9B,MAAM,KAAK,IAAI,YACvB,MAAM,UACN,MAAM,iBACN,MAAM,aACM,MAAM,KAAK,IAAI;UAAY,MAAM,IAAI;EA0D3D;AAxJD;IACI;;;OAGG;IACH,mCAFoB,MAAM,KAAE,IAAI,EAS/B;IANG,wBAHgB,MAAM,KAAE,IAAI,CAGS;IACrC,0BAA6B;IAC7B,eAAkB;IAElB,wCAAwC;IACxC,aADW,QAAU,MAAM,KAAE,IAAI,CAAC,EAAE,CACf;IAGzB;;;;;;;;;OASG;IACH,mCAFoB,MAAM,KAAE,IAAI,QAM/B;IAED;;OAEG;IACH,kCAFoB,MAAM,KAAE,IAAI,QAO/B;IAED;;;;OAIG;IACH,sBAoBC;IAED;;;;;OAKG;IACH,oBAFW,OAAO,iBAAiB,EAAE,iBAAiB,gBAQrD;CACJ"}

package/dist/src/utils/animator.js

@@ -94,7 +94,7 @@ export default class Animator {
  * @param {number} halfLife Time until half of the value is reached, in milliseconds
  * @param {number} stopAt Stop animation when the value is within this distance from the target
  * @param {number} [initialValue] Initial value
- * @returns {(target: number) => void} Function that activates the transition with a new target value
+ * @returns {((target: number) => void) & { stop: () => void}} Function that activates the transition with a new target value
  */
 export function makeLerpSmoother(
     animator,
@@ -113,15 +113,13 @@ export function makeLerpSmoother(
      * @param {number} [timestamp]
      */
     function smoothUpdate(timestamp) {
-        timestamp ??= +document.timeline.currentTime;
+        if (settled) {
+            return;
+        }
 
-        // If settled, the animation loop may have been stopped, so we need to
-        // wait until the next frame to get a proper time delta.
-        const tD = settled ? 0 : timestamp - lastTimeStamp;
+        const tD = timestamp - lastTimeStamp;
         lastTimeStamp = timestamp;
 
-        settled = false;
-
         // Lerp smoothing: https://twitter.com/FreyaHolmer/status/1757836988495847568
         current = target + (current - target) * Math.pow(2, -tD / halfLife);
 
@@ -140,10 +138,18 @@ export function makeLerpSmoother(
     /**
      * @param {number} value
      */
-    return function setTarget(value) {
+    function setTarget(value) {
         target = value;
         if (settled) {
-            smoothUpdate();
+            settled = false;
+            lastTimeStamp = +document.timeline.currentTime;
+            smoothUpdate(lastTimeStamp);
         }
+    }
+
+    setTarget.stop = () => {
+        settled = true;
     };
+
+    return setTarget;
 }

package/dist/src/utils/inertia.d.ts

@@ -19,7 +19,9 @@ export default class Inertia {
     callback: (arg0: number) => void;
     targetValue: number;
     lastValue: number;
-    smoother: (target: number) => void;
+    smoother: ((target: number) => void) & {
+        stop: () => void;
+    };
     cancel(): void;
     /**
      *

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

@@ -1 +1 @@
-{"version":3,"file":"inertia.d.ts","sourceRoot":"","sources":["../../../src/utils/inertia.js"],"names":[],"mappings":"AAmEA;;;GAGG;AACH,8EAiBC;AApFD;;GAEG;AACH;IACI;;;OAGG;IACH,sBAHW,OAAO,eAAe,EAAE,OAAO,aAC/B,OAAO,EAyBjB;IAtBG,0CAAwB;IACxB,kBAA0B;IAG1B,oBAAsB;IAEtB,oCAAoC;IACpC,iBADoB,MAAM,KAAE,IAAI,CACZ;IAEpB,oBAAoB;IACpB,kBAAkB;IAElB,mCASC;IAGL,eAIC;IAED;;;;OAIG;IACH,mBAHW,MAAM,mBACG,MAAM,KAAE,IAAI,QAkB/B;CACJ"}
+{"version":3,"file":"inertia.d.ts","sourceRoot":"","sources":["../../../src/utils/inertia.js"],"names":[],"mappings":"AAmEA;;;GAGG;AACH,8EAiBC;AApFD;;GAEG;AACH;IACI;;;OAGG;IACH,sBAHW,OAAO,eAAe,EAAE,OAAO,aAC/B,OAAO,EAyBjB;IAtBG,0CAAwB;IACxB,kBAA0B;IAG1B,oBAAsB;IAEtB,oCAAoC;IACpC,iBADoB,MAAM,KAAE,IAAI,CACZ;IAEpB,oBAAoB;IACpB,kBAAkB;IAElB;;MASC;IAGL,eAIC;IAED;;;;OAIG;IACH,mBAHW,MAAM,mBACG,MAAM,KAAE,IAAI,QAkB/B;CACJ"}

package/dist/src/utils/ringBuffer.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @template T
+ */
+export default class RingBuffer<T> {
+    /**
+     * @param {number} size
+     */
+    constructor(size: number);
+    /** @param {T} value */
+    push(value: T): void;
+    /**
+     * @returns {T[]}
+     */
+    get(): T[];
+    get size(): number;
+    get length(): number;
+    #private;
+}
+//# sourceMappingURL=ringBuffer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ringBuffer.d.ts","sourceRoot":"","sources":["../../../src/utils/ringBuffer.js"],"names":[],"mappings":"AAAA;;GAEG;AACH;IAQI;;OAEG;IACH,kBAFW,MAAM,EAIhB;IAED,uBAAuB;IACvB,YADY,CAAC,QAKZ;IAED;;OAEG;IACH,OAFa,CAAC,EAAE,CAOf;IAED,mBAEC;IAED,qBAEC;;CACJ"}

package/dist/src/utils/ringBuffer.js

@@ -0,0 +1,43 @@
+/**
+ * @template T
+ */
+export default class RingBuffer {
+    /** @type {T[]} */
+    #buffer;
+
+    #index = 0;
+
+    #length = 0;
+
+    /**
+     * @param {number} size
+     */
+    constructor(size) {
+        this.#buffer = new Array(size);
+    }
+
+    /** @param {T} value */
+    push(value) {
+        this.#buffer[this.#index] = value;
+        this.#index = (this.#index + 1) % this.size;
+        this.#length = Math.min(this.#length + 1, this.size);
+    }
+
+    /**
+     * @returns {T[]}
+     */
+    get() {
+        const b = this.#buffer;
+        return this.#length < this.size
+            ? b.slice(0, this.#length)
+            : b.slice(this.#index, this.size).concat(b.slice(0, this.#index));
+    }
+
+    get size() {
+        return this.#buffer.length;
+    }
+
+    get length() {
+        return this.#length;
+    }
+}

package/dist/src/utils/ringBuffer.test.js

@@ -0,0 +1,39 @@
+import { describe, expect, test } from "vitest";
+import RingBuffer from "./ringBuffer.js";
+
+describe("ringBuffer", () => {
+    test("Empty buffer", () => {
+        const buffer = new RingBuffer(10);
+        expect(buffer.length).toBe(0);
+        expect(buffer.get()).toEqual([]);
+    });
+
+    test("Partially filled buffer", () => {
+        const buffer = new RingBuffer(10);
+        buffer.push(1);
+        buffer.push(2);
+        buffer.push(3);
+        expect(buffer.length).toBe(3);
+        expect(buffer.get()).toEqual([1, 2, 3]);
+    });
+
+    test("Full buffer", () => {
+        const buffer = new RingBuffer(3);
+        buffer.push(1);
+        buffer.push(2);
+        buffer.push(3);
+        expect(buffer.length).toBe(3);
+        expect(buffer.get()).toEqual([1, 2, 3]);
+    });
+
+    test("Overfilled buffer", () => {
+        const buffer = new RingBuffer(3);
+        buffer.push(1);
+        buffer.push(2);
+        buffer.push(3);
+        buffer.push(4);
+        buffer.push(5);
+        expect(buffer.length).toBe(3);
+        expect(buffer.get()).toEqual([3, 4, 5]);
+    });
+});

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

@@ -122,7 +122,9 @@ declare class Scrollbar extends UnitView {
         scrollbarSize: number;
         scrollbarPadding: number;
     };
-    interpolateViewportOffset: (target: number) => void;
+    interpolateViewportOffset: ((target: number) => void) & {
+        stop: () => void;
+    };
     get scrollOffset(): number;
     /**
      *

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"gridView.d.ts","sourceRoot":"","sources":["../../../src/view/gridView.js"],"names":[],"mappings":"AAswBA;;;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;AA53BD;;;;;;;;;;;;;;;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;;CAoGJ;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;qBAlrC0D,eAAe;sBAFpD,uBAAuB;0BAGnB,oBAAoB;qBAGzB,eAAe;yBALX,mBAAmB;AAqrC5C;IAeI;;;OAGG;IACH,uBAHW,SAAS,8CA4FnB;IA/FD,uBAAmB;IAsCf;;;MAAoB;IAIpB;;MAQC;IA+CL,2BAKC;IAWD;;;;OAIG;IACH,gCAHW,SAAS,UACT,SAAS,QA8CnB;;CACJ;oBAv2CmB,qBAAqB"}

package/dist/src/view/gridView.js

@@ -16,7 +16,7 @@ import ContainerView from "./containerView.js";
 import LayerView from "./layerView.js";
 import createTitle from "./title.js";
 import UnitView from "./unitView.js";
-import interactionToZoom from "./zoom.js";
+import { interactionToZoom } from "./zoom.js";
 import clamp from "../utils/clamp.js";
 import { makeLerpSmoother } from "../utils/animator.js";
 
@@ -712,7 +712,8 @@ export default class GridView extends ContainerView {
                             pointedChild.view,
                             zoomEvent
                         ),
-                    this.context.getCurrentHover()
+                    this.context.getCurrentHover(),
+                    this.context.animator
                 );
             }
         }

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

@@ -1,4 +1,8 @@
 export default class Point {
+    /**
+     * @param {MouseEvent} event
+     */
+    static fromMouseEvent(event: MouseEvent): Point;
     /**
      *
      * @param {number} x
@@ -8,7 +12,19 @@ export default class Point {
     /** @readonly */ readonly x: number;
     /** @readonly */ readonly y: number;
     /**
-     *
+     * @param {Point} point
+     */
+    subtract(point: Point): Point;
+    /**
+     * @param {Point} point
+     */
+    add(point: Point): Point;
+    /**
+     * @param {number} scalar
+     */
+    multiply(scalar: number): Point;
+    get length(): number;
+    /**
      * @param {Point} point
      */
     equals(point: Point): boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"point.d.ts","sourceRoot":"","sources":["../../../../src/view/layout/point.js"],"names":[],"mappings":"AAAA;IACI;;;;OAIG;IACH,eAHW,MAAM,KACN,MAAM,EAKhB;IAFG,gBAAgB,CAAC,mBAAU;IAC3B,gBAAgB,CAAC,mBAAU;IAG/B;;;OAGG;IACH,cAFW,KAAK,WAQf;CACJ"}
+{"version":3,"file":"point.d.ts","sourceRoot":"","sources":["../../../../src/view/layout/point.js"],"names":[],"mappings":"AAIA;IACI;;OAEG;IACH,6BAFW,UAAU,SAIpB;IAED;;;;OAIG;IACH,eAHW,MAAM,KACN,MAAM,EAKhB;IAFG,gBAAgB,CAAC,mBAAU;IAC3B,gBAAgB,CAAC,mBAAU;IAG/B;;OAEG;IACH,gBAFW,KAAK,SAIf;IAED;;OAEG;IACH,WAFW,KAAK,SAIf;IAED;;OAEG;IACH,iBAFW,MAAM,SAIhB;IAED,qBAEC;IAED;;OAEG;IACH,cAFW,KAAK,WAQf;CACJ"}

package/dist/src/view/layout/point.js

@@ -1,4 +1,15 @@
+/*
+ * Hmm. This looks quite a bit like a two-dimensional vector.
+ * Maybe we should use a vector instead?
+ */
 export default class Point {
+    /**
+     * @param {MouseEvent} event
+     */
+    static fromMouseEvent(event) {
+        return new Point(event.clientX, event.clientY);
+    }
+
     /**
      *
      * @param {number} x
@@ -10,7 +21,31 @@ export default class Point {
     }
 
     /**
-     *
+     * @param {Point} point
+     */
+    subtract(point) {
+        return new Point(this.x - point.x, this.y - point.y);
+    }
+
+    /**
+     * @param {Point} point
+     */
+    add(point) {
+        return new Point(this.x - point.x, this.y - point.y);
+    }
+
+    /**
+     * @param {number} scalar
+     */
+    multiply(scalar) {
+        return new Point(this.x * scalar, this.y * scalar);
+    }
+
+    get length() {
+        return Math.sqrt(this.x ** 2 + this.y ** 2);
+    }
+
+    /**
      * @param {Point} point
      */
     equals(point) {

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("./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("./layout/rectangle.js").default, 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,uBAAuB,EAAE,OAAO,0BAC3B,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("./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.47.0",
+  "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": "4c4aabc561aa5c61a200b7c4eaaf0d2cbec623b6"
+  "gitHead": "64cd3335607b2608db3c85c74a4fb571302e77d0"
 }