@genome-spy/core 0.47.0 → 0.48.1

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,QAkJhD;;OA1LS,MAAM;OACN,MAAM;YACN,MAAM;YACN,MAAM;YACN,MAAM"}

package/dist/src/view/zoom.js

@@ -7,19 +7,60 @@
  * @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") {
+        // TODO: Wheel-zoom inertia should probably be moved here and the faked wheel
+        // events in genomeSpy.js and inertia.js should be retired.
+
         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 && !wheelEvent.deltaY) {
+            return;
+        }
+
+        // Stop drag-to-pan inertia
+        smoother?.stop();
+
         let { x, y } = event.point;
 
         // Snapping to the hovered item:
@@ -59,31 +100,115 @@ 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 eventBuffer = 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);
+            eventBuffer.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 = eventBuffer
+                .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;
+            let y = prevPoint.y;
+
+            smoother = makeLerpSmoother(
+                animator,
+                (p) => {
+                    handleZoom({
+                        x: p.x,
+                        y: p.y,
+                        xDelta: x - p.x,
+                        yDelta: y - p.y,
+                        zDelta: 0,
+                    });
+                    x = p.x;
+                    y = p.y;
+                },
+                150,
+                0.5,
+                { x, y }
+            );
+
+            smoother({
+                x: prevPoint.x - v.x * 250,
+                y: prevPoint.y - v.y * 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.1",
   "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": "f2e023ce43cf18091cb81140f5be1f59887271df"
 }