@genome-spy/core 0.46.1 → 0.48.0

package/dist/src/utils/inertia.js

@@ -1,4 +1,6 @@
 import { lerp } from "vega-util";
+import { makeLerpSmoother } from "./animator.js";
+import clamp from "./clamp.js";
 
 /**
  * Creates some inertia, mainly for zooming with a mechanical mouse wheel
@@ -11,35 +13,32 @@ export default class Inertia {
     constructor(animator, disabled) {
         this.animator = animator;
         this.disabled = !!disabled;
-        this.damping = 0.015;
-        this.acceleration = 0.3; // per event
-        /** Use acceleration if the momentum step is greater than X */
-        this.accelerationThreshold = 100;
-        this.lowerLimit = 0.5; // When to stop updating
-        this.loop = false;
 
-        this.momentum = 0;
-        this.timestamp = 0;
+        // Limit the velocity by setting the maximum distance the value can travel
+        this.maxDistance = 500;
+
         /** @type {function(number):void} */
         this.callback = null;
 
-        this._transitionCallback = this.animate.bind(this);
-        this.clear();
-    }
-
-    clear() {
-        /** @type {number} */
-        this.momentum = 0;
-        this.timestamp = null;
-        this.loop = null;
-        this.callback = null;
+        this.targetValue = 0;
+        this.lastValue = 0;
+
+        this.smoother = makeLerpSmoother(
+            animator,
+            (value) => {
+                const delta = value - this.lastValue;
+                this.lastValue = value;
+                this.callback?.(delta);
+            },
+            40,
+            0.1
+        );
     }
 
     cancel() {
-        if (this.loop) {
-            this.animator.cancelTransition(this._transitionCallback);
-            this.clear();
-        }
+        // decelelerate rapidly
+        this.targetValue = lerp([this.lastValue, this.targetValue], 0.3);
+        this.smoother(this.targetValue);
     }
 
     /**
@@ -53,50 +52,16 @@ export default class Inertia {
             return;
         }
 
-        // This may have some use in the future to improve the behavior of
-        // a mechanical mouse wheel:
-        // https://github.com/w3c/uievents/issues/181
-
-        if (value * this.momentum < 0) {
-            this.momentum = 0; // Stop if the direction changes
-        } else if (Math.abs(value) > this.accelerationThreshold) {
-            this.momentum = lerp([this.momentum, value], this.acceleration);
-        } else {
-            this.momentum = value;
-        }
-
         this.callback = callback;
 
-        if (!this.loop) {
-            this.animate();
-        }
-    }
-
-    /**
-     *
-     * @param {number} [timestamp]
-     */
-    animate(timestamp) {
-        this.callback(this.momentum); // TODO: This is actually a delta, should take the elapsed time into account
+        const delta = clamp(
+            this.targetValue + value - this.lastValue,
+            -this.maxDistance,
+            this.maxDistance
+        );
+        this.targetValue = this.lastValue + delta;
 
-        const timeDelta = timestamp - this.timestamp || 0;
-        this.timestamp = timestamp;
-
-        const velocity = Math.abs(this.momentum);
-
-        this.momentum =
-            Math.sign(this.momentum) *
-            Math.max(
-                0,
-                velocity - ((velocity * this.damping) ** 1.5 + 0.04) * timeDelta
-            );
-
-        if (Math.abs(this.momentum) > this.lowerLimit) {
-            this.loop = true;
-            this.animator.requestTransition(this._transitionCallback);
-        } else {
-            this.clear();
-        }
+        this.smoother(this.targetValue);
     }
 }
 

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

@@ -1 +1 @@
-{"version":3,"file":"inputBinding.d.ts","sourceRoot":"","sources":["../../../src/utils/inputBinding.js"],"names":[],"mappings":"AAIA;;GAEG;AACH,sDAFW,OAAO,0BAA0B,EAAE,OAAO,8CA6GpD"}
+{"version":3,"file":"inputBinding.d.ts","sourceRoot":"","sources":["../../../src/utils/inputBinding.js"],"names":[],"mappings":"AAIA;;GAEG;AACH,sDAFW,OAAO,0BAA0B,EAAE,OAAO,8CAqIpD"}

package/dist/src/utils/inputBinding.js

@@ -32,7 +32,6 @@ export default function createBindingInputs(mediator) {
         const id = `${random}-param-${name}`;
 
         if (bind.input == "range") {
-            // TODO: Show the value next to the slider
             inputs.push(
                 html`<label for=${id}>${label}</label>
                     <div>
@@ -99,8 +98,33 @@ export default function createBindingInputs(mediator) {
                         )}
                     </select> `
             );
+        } else if (
+            bind.input == "text" ||
+            bind.input == "number" ||
+            bind.input == "color"
+        ) {
+            inputs.push(
+                html`<label for=${id}>${label}</label>
+                    <div>
+                        <input
+                            id=${id}
+                            type=${bind.input}
+                            placeholder=${bind.placeholder ?? ""}
+                            autocomplete=${bind.autocomplete ?? "off"}
+                            .value=${value}
+                            @focus=${(/** @type {any} */ e) =>
+                                e.target.select()}
+                            @input=${(/** @type {any} */ e) => {
+                                debouncedSetter(
+                                    bind.input == "number"
+                                        ? e.target.valueAsNumber
+                                        : e.target.value
+                                );
+                            }}
+                        />
+                    </div>`
+            );
         } else {
-            // TODO: Support other types: "text", "number", "color".
             throw new Error("Unsupported input type: " + bind.input);
         }
 

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

@@ -117,22 +117,22 @@ declare class Scrollbar extends UnitView {
      * @param {ScrollDirection} scrollDirection
      */
     constructor(gridChild: GridChild, scrollDirection: "vertical" | "horizontal");
+    viewportOffset: number;
     config: {
         scrollbarSize: number;
         scrollbarPadding: number;
     };
-    scrollDirection: "vertical" | "horizontal";
-    viewportOffset: number;
-    maxScrollOffset: number;
-    scrollbarCoords: Rectangle;
-    getScrollOffset(): number;
+    interpolateViewportOffset: ((target: number) => void) & {
+        stop: () => void;
+    };
+    get scrollOffset(): number;
     /**
      *
      * @param {Rectangle} viewportCoords
      * @param {Rectangle} coords
      */
     updateScrollbar(viewportCoords: Rectangle, coords: Rectangle): void;
-    maxViewportOffset: number;
+    #private;
 }
 import Padding from "./layout/padding.js";
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"gridView.d.ts","sourceRoot":"","sources":["../../../src/view/gridView.js"],"names":[],"mappings":"AAowBA;;;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;qBAhrC0D,eAAe;sBAFpD,uBAAuB;0BAGnB,oBAAoB;qBAGzB,eAAe;yBALX,mBAAmB;AAmrC5C;IACI;;;OAGG;IACH,uBAHW,SAAS,8CAyFnB;IAtDG;;;MAAoB;IACpB,2CAAsC;IAKtC,uBAAuB;IAEvB,wBAAwB;IACxB,2BAAqC;IA+CzC,0BAKC;IAWD;;;;OAIG;IACH,gCAHW,SAAS,UACT,SAAS,QA8CnB;IA7BG,0BAAsE;CA8B7E;oBAp1CmB,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,8 +16,9 @@ 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";
 
 /**
  * Modeled after: https://vega.github.io/vega/docs/layout/
@@ -711,7 +712,8 @@ export default class GridView extends ContainerView {
                             pointedChild.view,
                             zoomEvent
                         ),
-                    this.context.getCurrentHover()
+                    this.context.getCurrentHover(),
+                    this.context.animator
                 );
             }
         }
@@ -1214,6 +1216,20 @@ export class GridChild {
 }
 
 class Scrollbar extends UnitView {
+    /** @type {ScrollDirection} */
+    #scrollDirection;
+
+    #scrollbarCoords = Rectangle.ZERO;
+
+    #maxScrollOffset = 0;
+
+    #maxViewportOffset = 0;
+
+    // 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.
+    viewportOffset = 0;
+
     /**
      * @param {GridChild} gridChild
      * @param {ScrollDirection} scrollDirection
@@ -1251,20 +1267,23 @@ class Scrollbar extends UnitView {
         );
 
         this.config = config;
-        this.scrollDirection = scrollDirection;
+        this.#scrollDirection = scrollDirection;
 
-        // 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.
-        this.viewportOffset = 0;
-
-        this.maxScrollOffset = 0;
-        this.scrollbarCoords = Rectangle.ZERO;
+        // Make it smooth!
+        this.interpolateViewportOffset = makeLerpSmoother(
+            this.context.animator,
+            (value) => {
+                this.viewportOffset = value;
+            },
+            50,
+            0.4,
+            this.viewportOffset
+        );
 
         this.addInteractionEventListener("mousedown", (coords, event) => {
             event.stopPropagation();
 
-            if (this.maxScrollOffset <= 0) {
+            if (this.#maxScrollOffset <= 0) {
                 return;
             }
 
@@ -1276,7 +1295,7 @@ class Scrollbar extends UnitView {
             const mouseEvent = /** @type {MouseEvent} */ (event.uiEvent);
             mouseEvent.preventDefault();
 
-            const initialScrollOffset = this.getScrollOffset();
+            const initialScrollOffset = this.scrollOffset;
             const initialOffset = getMouseOffset(mouseEvent);
 
             const onMousemove = /** @param {MouseEvent} moveEvent */ (
@@ -1287,13 +1306,13 @@ class Scrollbar extends UnitView {
                         initialOffset +
                         initialScrollOffset,
                     0,
-                    this.maxScrollOffset
+                    this.#maxScrollOffset
                 );
 
-                this.viewportOffset =
-                    (scrollOffset / this.maxScrollOffset) *
-                    this.maxViewportOffset;
-                this.context.animator.requestRender();
+                this.interpolateViewportOffset(
+                    (scrollOffset / this.#maxScrollOffset) *
+                        this.#maxViewportOffset
+                );
             };
 
             const onMouseup = () => {
@@ -1306,10 +1325,10 @@ class Scrollbar extends UnitView {
         });
     }
 
-    getScrollOffset() {
+    get scrollOffset() {
         return (
-            (this.viewportOffset / this.maxViewportOffset) *
-            this.maxScrollOffset
+            (this.viewportOffset / this.#maxViewportOffset) *
+            this.#maxScrollOffset
         );
     }
 
@@ -1319,7 +1338,7 @@ class Scrollbar extends UnitView {
      * @param {import("../types/rendering.js").RenderingOptions} [options]
      */
     render(context, coords, options) {
-        super.render(context, this.scrollbarCoords, options);
+        super.render(context, this.#scrollbarCoords, options);
     }
 
     /**
@@ -1332,7 +1351,7 @@ class Scrollbar extends UnitView {
         const sSize = this.config.scrollbarSize;
 
         const dimension =
-            this.scrollDirection == "horizontal" ? "width" : "height";
+            this.#scrollDirection == "horizontal" ? "width" : "height";
 
         const visibleFraction = Math.min(
             1,
@@ -1341,28 +1360,28 @@ class Scrollbar extends UnitView {
         const maxScrollLength = viewportCoords[dimension] - 2 * sPad;
         const scrollLength = visibleFraction * maxScrollLength;
 
-        this.maxScrollOffset = maxScrollLength - scrollLength;
-        this.maxViewportOffset = coords[dimension] - viewportCoords[dimension];
+        this.#maxScrollOffset = maxScrollLength - scrollLength;
+        this.#maxViewportOffset = coords[dimension] - viewportCoords[dimension];
         this.viewportOffset = clamp(
             this.viewportOffset,
             0,
-            this.maxViewportOffset
+            this.#maxViewportOffset
         );
 
-        this.scrollbarCoords =
-            this.scrollDirection == "vertical"
+        this.#scrollbarCoords =
+            this.#scrollDirection == "vertical"
                 ? new Rectangle(
                       () =>
                           viewportCoords.x +
                           viewportCoords.width -
                           sSize -
                           sPad,
-                      () => viewportCoords.y + sPad + this.getScrollOffset(),
+                      () => viewportCoords.y + sPad + this.scrollOffset,
                       () => sSize,
                       () => scrollLength
                   )
                 : new Rectangle(
-                      () => viewportCoords.x + sPad + this.getScrollOffset(),
+                      () => viewportCoords.x + sPad + this.scrollOffset,
                       () =>
                           viewportCoords.y +
                           viewportCoords.height -

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/unitView.d.ts

@@ -6,15 +6,7 @@
 export const markTypes: {
     [x: string]: typeof import("../marks/mark.js").default;
 };
-export default class UnitView extends ContainerView {
-    /**
-     * @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
-     *
-     */
+export default class UnitView extends View {
     /**
      *
      * @param {import("../spec/view.js").UnitSpec} spec
@@ -51,10 +43,6 @@ export default class UnitView extends ContainerView {
      * Returns a collector that is associated with this view.
      */
     getCollector(): import("../data/collector.js").default;
-    /**
-     * @param {Channel} channel A primary channel
-     */
-    _validateDomainQuery(channel: import("../spec/channel.js").Channel): import("../spec/channel.js").MarkPropExprDef<import("../spec/channel.js").Type> | import("../spec/channel.js").MarkPropDatumDef<import("../spec/channel.js").Type> | import("../spec/channel.js").ChromPosDef | import("../spec/channel.js").PositionDatumDef | (import("../spec/channel.js").ChromPosDefBase & import("../spec/channel.js").TitleMixins & import("../spec/channel.js").PositionMixins & import("../spec/channel.js").TypeMixins<"locus"> & import("../spec/channel.js").ScaleMixins & import("../spec/channel.js").XIndexDef) | (import("../spec/channel.js").ScaleMixins & import("../spec/channel.js").DatumDefBase & import("../spec/channel.js").TitleMixins & import("../spec/channel.js").TypeMixins<import("../spec/channel.js").Type> & import("../spec/channel.js").PositionMixins & import("../spec/channel.js").XIndexDef) | import("../spec/channel.js").MarkPropDatumDef<import("../spec/channel.js").TypeForShape> | import("../spec/channel.js").MarkPropFieldDef<string, import("../spec/channel.js").Type> | import("../spec/channel.js").PositionFieldDef<string> | (import("../spec/channel.js").FieldDefBase<string> & import("../spec/channel.js").TitleMixins & import("../spec/channel.js").TypeMixins<import("../spec/channel.js").Type> & import("../spec/channel.js").ScaleMixins & import("../spec/channel.js").PositionMixins & import("../spec/channel.js").XIndexDef) | import("../spec/channel.js").MarkPropFieldDef<string, import("../spec/channel.js").TypeForShape>;
     /**
      * Returns the domain of the specified channel of this domain/mark.
      *
@@ -83,6 +71,7 @@ export default class UnitView extends ContainerView {
      * @returns {import("../spec/view.js").ResolutionBehavior}
      */
     getDefaultResolution(channel: string, resolutionType: import("../spec/view.js").ResolutionTarget): import("../spec/view.js").ResolutionBehavior;
+    #private;
 }
-import ContainerView from "./containerView.js";
+import View from "./view.js";
 //# sourceMappingURL=unitView.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"unitView.d.ts","sourceRoot":"","sources":["../../../src/view/unitView.js"],"names":[],"mappings":"AAqBA;;;;GAIG;AACH;QAHkB,MAAM,GAAE,cAAc,kBAAkB,EAAE,OAAO;EASjE;AAEF;IACI;;;;;;;OAOG;IACH;;;;;;;;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,EAkBzC;IAbG,yCAAgB;IAIZ,iDAAiD;IACjD,MADW,OAAO,kBAAkB,EAAE,OAAO,CACnB;IAUlC;;;;OAIG;IACH,gBAJW,OAAO,4CAA4C,EAAE,OAAO,UAC5D,OAAO,uBAAuB,EAAE,OAAO,YACvC,OAAO,uBAAuB,EAAE,gBAAgB,QAY1D;IAED,kDAIC;IAED;;;;;OAKG;IACH,iEAgFC;IAED;;;OAGG;IACH,mGASC;IAkBD;;OAEG;IACH,uDAEC;IAED;;OAEG;IACH,6/CAcC;IAED;;;;;OAKG;IACH,6BAHW,OAAO,oBAAoB,EAAE,gBAAgB,iDAkBvD;IAED;;;;;;;;;;;;OAYG;IACH,gHA2CC;IAED,uBAQC;IAgBD;;;;OAIG;IACH,8BAJW,MAAM,+DAEJ,OAAO,iBAAiB,EAAE,kBAAkB,CAKxD;CACJ;0BA1VyB,oBAAoB"}
+{"version":3,"file":"unitView.d.ts","sourceRoot":"","sources":["../../../src/view/unitView.js"],"names":[],"mappings":"AAqBA;;;;GAIG;AACH;QAHkB,MAAM,GAAE,cAAc,kBAAkB,EAAE,OAAO;EASjE;AAEF;IAcI;;;;;;;;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,EA+BzC;IA1BG,yCAAgB;IAIZ,iDAAiD;IACjD,MADW,OAAO,kBAAkB,EAAE,OAAO,CACnB;IAuBlC;;;;OAIG;IACH,gBAJW,OAAO,4CAA4C,EAAE,OAAO,UAC5D,OAAO,uBAAuB,EAAE,OAAO,YACvC,OAAO,uBAAuB,EAAE,gBAAgB,QAY1D;IAED,kDAIC;IAED;;;;;OAKG;IACH,iEAgFC;IAED;;;OAGG;IACH,mGASC;IAkBD;;OAEG;IACH,uDAEC;IAqBD;;;;;OAKG;IACH,6BAHW,OAAO,oBAAoB,EAAE,gBAAgB,iDAkBvD;IAED;;;;;;;;;;;;OAYG;IACH,gHA2CC;IAED,uBAQC;IAgBD;;;;OAIG;IACH,8BAJW,MAAM,+DAEJ,OAAO,iBAAiB,EAAE,kBAAkB,CAKxD;;CACJ;iBA/VgB,WAAW"}