@genome-spy/core 0.36.0 → 0.37.0

package/dist/src/utils/layout/rectangle.js

@@ -0,0 +1,296 @@
+/**
+ * @param {number} value
+ * @returns {Accessor}
+ */
+function constant(value) {
+    return () => value;
+}
+
+/**
+ * An immutable rectangle with a scene-graph -like hierarchy.
+ * Allows for implementing scrolling viewports etc.
+ *
+ * @typedef {("x" | "y" | "width" | "height")} Prop
+ * @typedef {import("./padding").default } Padding
+ * @typedef {() => number} Accessor
+ */
+export default class Rectangle {
+    /**
+     *
+     * @param {number} x
+     * @param {number} y
+     * @param {number} width
+     * @param {number} height
+     */
+    static create(x, y, width, height) {
+        return new Rectangle(
+            constant(x),
+            constant(y),
+            constant(width),
+            constant(height)
+        );
+    }
+
+    static ZERO = Rectangle.create(0, 0, 0, 0);
+
+    /**
+     * @param {Prop} prop
+     * @param {number | function():number} value
+     * @returns {Accessor}
+     */
+    _offset(prop, value) {
+        // @ts-ignore
+        const accessor = this["_" + prop];
+        if (value === 0) {
+            return accessor;
+        }
+
+        switch (typeof value) {
+            case "number":
+                return () => accessor() + value;
+            case "function":
+                return () => accessor() + value();
+            default:
+                throw new Error("Not a number of function");
+        }
+    }
+
+    /**
+     * @param {Prop} prop
+     */
+    _passThrough(prop) {
+        return this._offset(prop, 0);
+    }
+
+    /**
+     *
+     * @param {Accessor} x
+     * @param {Accessor} y
+     * @param {Accessor} width
+     * @param {Accessor} height
+     */
+    constructor(x, y, width, height) {
+        /** @readonly */ this._x = x;
+        /** @readonly */ this._y = y;
+        /** @readonly */ this._width = width;
+        /** @readonly */ this._height = height;
+    }
+
+    /**
+     * @returns {number}
+     */
+    get x() {
+        return this._x();
+    }
+
+    /**
+     * @returns {number}
+     */
+    get y() {
+        return this._y();
+    }
+
+    /**
+     * @returns {number}
+     */
+    get width() {
+        return this._width();
+    }
+
+    /**
+     * @returns {number}
+     */
+    get height() {
+        return this._height();
+    }
+
+    get x2() {
+        return this._x() + this._width();
+    }
+
+    get y2() {
+        return this._y() + this._height();
+    }
+
+    /**
+     * Returns true if the given rectangle is the same or equal rectangle.
+     *
+     * @param {Rectangle} rectangle
+     */
+    equals(rectangle) {
+        if (!rectangle) {
+            return false;
+        }
+
+        return (
+            this === rectangle ||
+            (this.x === rectangle.x &&
+                this.y === rectangle.y &&
+                this.width === rectangle.width &&
+                this.height === rectangle.height)
+        );
+    }
+
+    /**
+     *
+     * @param {Partial<Record<Prop, number | function():number>>} props
+     */
+    modify(props) {
+        if (!Object.keys(props).length) {
+            return this;
+        }
+
+        /** @param {Prop} prop */
+        const map = (prop) => {
+            const v = props[prop];
+            return typeof v == "number"
+                ? constant(v)
+                : typeof v == "function"
+                ? v
+                : this._passThrough(prop);
+        };
+
+        return new Rectangle(map("x"), map("y"), map("width"), map("height"));
+    }
+
+    /**
+     *
+     * @param {number | function():number} x
+     * @param {number | function():number} y
+     */
+    translate(x, y) {
+        if (x === 0 && y === 0) {
+            return this;
+        }
+
+        return new Rectangle(
+            this._offset("x", x),
+            this._offset("y", y),
+            this._passThrough("width"),
+            this._passThrough("height")
+        );
+    }
+
+    /**
+     * Returns a copy of this rectangle translated by the given rectangle.
+     *
+     * @param {Rectangle} rectangle
+     */
+    translateBy(rectangle) {
+        // TODO: Make dynamic
+        return this.translate(rectangle.x, rectangle.y);
+    }
+
+    /**
+     *
+     * @param {Padding} padding
+     */
+    expand(padding, direction = 1) {
+        if (
+            padding.left == 0 &&
+            padding.top == 0 &&
+            padding.right == 0 &&
+            padding.bottom == 0
+        ) {
+            return this;
+        }
+
+        return new Rectangle(
+            padding.left
+                ? this._offset("x", -padding.left * direction)
+                : this._passThrough("x"),
+            padding.top
+                ? this._offset("y", -padding.top * direction)
+                : this._passThrough("y"),
+            padding.width
+                ? this._offset("width", padding.width * direction)
+                : this._passThrough("width"),
+            padding.height
+                ? this._offset("height", padding.height * direction)
+                : this._passThrough("height")
+        );
+    }
+
+    /**
+     *
+     * @param {Padding} padding
+     */
+    shrink(padding) {
+        return this.expand(padding, -1);
+    }
+
+    /**
+     * Returns an intersection of this and the other rectangle.
+     *
+     * @param {Rectangle} rectangle
+     */
+    intersect(rectangle) {
+        if (this === rectangle) {
+            return this;
+        }
+
+        return new Rectangle(
+            () => Math.max(this.x, rectangle.x),
+            () => Math.max(this.y, rectangle.y),
+            () =>
+                Math.min(this.x2, rectangle.x2) - Math.max(this.x, rectangle.x),
+            () =>
+                Math.min(this.y2, rectangle.y2) - Math.max(this.y, rectangle.y)
+        );
+    }
+
+    /**
+     * Returns true if width and height are greater than equal to zero.
+     */
+    isDefined() {
+        return this.width >= 0 && this.height >= 0;
+    }
+
+    /**
+     * Returns a flattened rectangle, i.e., drops the hierarchy and materializes
+     * the parameters.
+     */
+    flatten() {
+        return new Rectangle(
+            constant(this.x),
+            constant(this.y),
+            constant(this.width),
+            constant(this.height)
+        );
+    }
+
+    /**
+     * Tests whether the rectangle contains the given point. Uses half open intervals.
+     *
+     * @param {number} x
+     * @param {number} y
+     */
+    containsPoint(x, y) {
+        return x >= this.x && x < this.x2 && y >= this.y && y < this.y2;
+    }
+
+    /**
+     * Normalizes a point with respect to this rectangle
+     *
+     * @param {number} x
+     * @param {number} y
+     */
+    normalizePoint(x, y) {
+        return {
+            x: (x - this.x) / this.width,
+            y: (y - this.y) / this.height,
+        };
+    }
+
+    toString() {
+        return `Rectangle: x: ${this.x}, y: ${this.y}, width: ${this.width}, height: ${this.height}`;
+    }
+
+    toRoundedString() {
+        return `Rectangle: x: ${Math.round(this.x)}, y: ${Math.round(
+            this.y
+        )}, width: ${Math.round(this.width)}, height: ${Math.round(
+            this.height
+        )}`;
+    }
+}

package/dist/src/utils/layout/rectangle.test.js

@@ -0,0 +1,172 @@
+import { expect, test } from "vitest";
+import Rectangle from "./rectangle";
+import Padding from "./padding";
+
+test("Rectangle creation", () => {
+    const r = Rectangle.create(1, 2, 3, 4);
+    expect(r.x).toEqual(1);
+    expect(r.y).toEqual(2);
+    expect(r.width).toEqual(3);
+    expect(r.height).toEqual(4);
+});
+
+test("equals", () => {
+    const r = Rectangle.create(1, 2, 3, 4);
+    expect(r.equals(r)).toBeTruthy();
+    expect(r.equals(Rectangle.create(1, 2, 3, 4))).toBeTruthy();
+    expect(r.equals(undefined)).toBeFalsy();
+});
+
+test("x2 and y2 calculation", () => {
+    const r = Rectangle.create(1, 2, 3, 4);
+    expect(r.x2).toEqual(4);
+    expect(r.y2).toEqual(6);
+});
+
+test("translate", () => {
+    const r = Rectangle.create(1, 2, 3, 4).translate(2, 3);
+    expect(r.x).toEqual(3);
+    expect(r.y).toEqual(5);
+    expect(r.width).toEqual(3);
+    expect(r.height).toEqual(4);
+});
+
+test("Dynamic translate", () => {
+    let tx = 0;
+    let ty = 0;
+
+    const r = Rectangle.create(1, 2, 3, 4)
+        .translate(
+            () => tx,
+            () => ty
+        )
+        .translate(2, 3);
+
+    expect(r.x).toEqual(3);
+    expect(r.y).toEqual(5);
+    expect(r.width).toEqual(3);
+    expect(r.height).toEqual(4);
+
+    tx = 1;
+    ty = 2;
+
+    expect(r.x).toEqual(4);
+    expect(r.y).toEqual(7);
+    expect(r.width).toEqual(3);
+    expect(r.height).toEqual(4);
+});
+
+test("expand", () => {
+    const r = Rectangle.create(1, 2, 3, 4).expand(
+        Padding.createFromRecord({ top: 2, right: 3, bottom: 4, left: 5 })
+    );
+
+    expect(r.x).toEqual(-4);
+    expect(r.width).toEqual(11);
+    expect(r.y).toEqual(0);
+    expect(r.height).toEqual(10);
+});
+
+test("shrink", () => {
+    const r = Rectangle.create(1, 2, 3, 4).shrink(
+        Padding.createUniformPadding(1)
+    );
+
+    expect(r.x).toEqual(2);
+    expect(r.width).toEqual(1);
+    expect(r.y).toEqual(3);
+    expect(r.height).toEqual(2);
+});
+
+test("modify", () => {
+    const r = Rectangle.create(1, 2, 3, 4);
+    const m = r.modify({ x: 5 });
+
+    expect(m.equals(r)).toBeFalsy();
+    expect(m.equals(Rectangle.create(5, 2, 3, 4))).toBeTruthy();
+});
+
+test("Dynamic modify", () => {
+    let x = 1;
+    const r = Rectangle.create(1, 2, 3, 4);
+    const m = r.modify({ x: () => x });
+
+    expect(m.equals(r)).toBeTruthy();
+    expect(m.equals(Rectangle.create(1, 2, 3, 4))).toBeTruthy();
+
+    x = 5;
+
+    expect(m.equals(r)).toBeFalsy();
+    expect(m.equals(Rectangle.create(5, 2, 3, 4))).toBeTruthy();
+});
+
+test("intersect", () => {
+    const a = Rectangle.create(1, 1, 6, 3);
+    const b = Rectangle.create(5, 2, 3, 4);
+    const c = Rectangle.create(5, 2, 2, 2);
+
+    expect(a.intersect(b).equals(c)).toBeTruthy();
+    expect(a.intersect(b).isDefined()).toBeTruthy();
+
+    const x = Rectangle.create(1, 1, 1, 1);
+    const y = Rectangle.create(3, 3, 1, 1);
+
+    expect(x.intersect(y).isDefined()).toBeFalsy();
+});
+
+test("isDefined", () => {
+    expect(Rectangle.create(0, 0, 1, 1).isDefined()).toBeTruthy();
+    expect(Rectangle.create(0, 0, 0, 0).isDefined()).toBeTruthy();
+
+    expect(Rectangle.create(0, 0, -1, 0).isDefined()).toBeFalsy();
+    expect(Rectangle.create(0, 0, 0, -1).isDefined()).toBeFalsy();
+});
+
+test("flatten", () => {
+    let tx = 0;
+    let ty = 0;
+
+    const r = Rectangle.create(1, 2, 3, 4).translate(
+        () => tx,
+        () => ty
+    );
+
+    const flattened = r.flatten();
+
+    tx = -1;
+    ty = -2;
+
+    expect(r.equals(Rectangle.create(0, 0, 3, 4)));
+    expect(flattened.equals(Rectangle.create(1, 2, 3, 4)));
+});
+
+test("containsPoint", () => {
+    const r = Rectangle.create(1, 2, 3, 4);
+
+    expect(r.containsPoint(0, 0)).toBeFalsy();
+    expect(r.containsPoint(0, 10)).toBeFalsy();
+    expect(r.containsPoint(10, 0)).toBeFalsy();
+    expect(r.containsPoint(10, 10)).toBeFalsy();
+
+    expect(r.containsPoint(2, 0)).toBeFalsy();
+    expect(r.containsPoint(2, 10)).toBeFalsy();
+    expect(r.containsPoint(0, 3)).toBeFalsy();
+    expect(r.containsPoint(10, 3)).toBeFalsy();
+
+    // Inclusive corner
+    expect(r.containsPoint(1, 2)).toBeTruthy();
+
+    // Inside
+    expect(r.containsPoint(2, 3)).toBeTruthy();
+
+    // Exclusive corner
+    expect(r.containsPoint(4, 6)).toBeFalsy();
+});
+
+test("normalizePoint", () => {
+    const r = Rectangle.create(1, 2, 6, 4);
+
+    expect(r.normalizePoint(1, 2)).toEqual({ x: 0, y: 0 });
+    expect(r.normalizePoint(7, 2)).toEqual({ x: 1, y: 0 });
+    expect(r.normalizePoint(4, 4)).toEqual({ x: 0.5, y: 0.5 });
+});

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

@@ -0,0 +1,15 @@
+/**
+ * Deep merge.
+ *
+ * A boolean true and an object are compatible. The object survives, the boolean is overwritten.
+ *
+ * TODO: Support arrays. Should accept identical arrays and complain about others.
+ *
+ * @param  {T[]} objects Objects to merge
+ * @param {string} propertyOf What are we merging? Used in warning messages
+ * @param {string[]} [skip] Fields to skip. TODO: Support nested fields.
+ * @returns {T}
+ * @template T
+ */
+export default function mergeObjects<T>(objects: T[], propertyOf: string, skip?: string[]): T;
+//# sourceMappingURL=mergeObjects.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mergeObjects.d.ts","sourceRoot":"","sources":["../../../src/utils/mergeObjects.js"],"names":[],"mappings":"AAGA;;;;;;;;;;;;GAYG;AACH,kEALW,MAAM,SACN,MAAM,EAAE,KA8ElB"}

package/dist/src/utils/mergeObjects.js

@@ -0,0 +1,99 @@
+/* eslint-disable max-depth */
+import { isObject } from "vega-util";
+
+/**
+ * Deep merge.
+ *
+ * A boolean true and an object are compatible. The object survives, the boolean is overwritten.
+ *
+ * TODO: Support arrays. Should accept identical arrays and complain about others.
+ *
+ * @param  {T[]} objects Objects to merge
+ * @param {string} propertyOf What are we merging? Used in warning messages
+ * @param {string[]} [skip] Fields to skip. TODO: Support nested fields.
+ * @returns {T}
+ * @template T
+ */
+export default function mergeObjects(objects, propertyOf, skip) {
+    skip = skip || [];
+
+    if (objects.some((d) => d === null)) {
+        if (objects.every((d) => d === null)) {
+            return null;
+        } else {
+            console.warn(objects);
+            throw new Error("Cannot merge objects with nulls!");
+        }
+    }
+
+    /** @type {any} */
+    const target = {};
+
+    /** @type {function(any, any):boolean} */
+    const compatible = (a, b) =>
+        a === b ||
+        (isPlainObject(a) && isPlainObject(b)) ||
+        (isPlainObject(a) && b === true) ||
+        (a === true && isObject(b));
+
+    /** @param {any} obj */
+    const merger = (obj) => {
+        // eslint-disable-next-line guard-for-in
+        for (let prop in obj) {
+            const sourceValue = obj[prop];
+            if (!skip.includes(prop) && sourceValue !== undefined) {
+                if (
+                    target[prop] !== undefined &&
+                    !compatible(target[prop], sourceValue)
+                ) {
+                    console.warn(
+                        `Conflicting property ${prop} of ${propertyOf}: (${JSON.stringify(
+                            target[prop]
+                        )} and ${JSON.stringify(
+                            obj[prop]
+                        )}). Using ${JSON.stringify(target[prop])}.`
+                    );
+                } else {
+                    const targetValue = target[prop];
+
+                    if (isPlainObject(targetValue)) {
+                        if (isPlainObject(sourceValue)) {
+                            // Object merged to object
+                            target[prop] = mergeObjects(
+                                [targetValue, sourceValue],
+                                prop
+                            );
+                        }
+                    } else if (isPlainObject(sourceValue)) {
+                        if (
+                            !(targetValue === true || targetValue === undefined)
+                        ) {
+                            throw new Error(
+                                "Bug in merge! Target is: " + targetValue
+                            );
+                        }
+                        // Object replaces "true"
+                        target[prop] = mergeObjects([{}, sourceValue], prop);
+                    } else {
+                        // Scalar
+                        target[prop] = sourceValue;
+                    }
+                }
+            }
+        }
+    };
+
+    for (const o of objects) {
+        merger(o);
+    }
+
+    return target;
+}
+
+/**
+ *
+ * @param {any} x
+ */
+function isPlainObject(x) {
+    return isObject(x) && !Array.isArray(x);
+}

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

@@ -0,0 +1,42 @@
+import { expect, test } from "vitest";
+import mergeObjects from "./mergeObjects";
+
+test("Merges non-conflicting properties", () => {
+    expect(mergeObjects([{ a: 1 }, { b: 2 }], "test")).toEqual({ a: 1, b: 2 });
+
+    expect(mergeObjects([{ a: [0, 1] }, { b: [2, 3] }], "test")).toEqual({
+        a: [0, 1],
+        b: [2, 3],
+    });
+});
+
+test("Skips conflicting properties", () => {
+    expect(
+        mergeObjects(
+            [
+                { a: 1, b: 2, c: 3 },
+                { b: 5, d: 4 },
+            ],
+            "test"
+        )
+    ).toEqual({ a: 1, b: 2, c: 3, d: 4 });
+});
+
+test("Null is handled correctly", () => {
+    expect(mergeObjects([null, null, null], "test")).toBeNull();
+    expect(() => mergeObjects([{ a: 1 }, null, { b: 2 }], "test")).toThrow();
+});
+
+test("Nested objects are merged", () => {
+    expect(
+        mergeObjects([{ nested: { a: 1 } }, { nested: { b: 2 } }], "test")
+    ).toEqual({ nested: { a: 1, b: 2 } });
+
+    expect(
+        mergeObjects([{ nested: { a: 1 } }, { nested: true }], "test")
+    ).toEqual({ nested: { a: 1 } });
+
+    expect(
+        mergeObjects([{ nested: true }, { nested: { a: 1 } }], "test")
+    ).toEqual({ nested: { a: 1 } });
+});

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

@@ -0,0 +1,9 @@
+/**
+ * Extract numbers from a delimited string. Does not do any error checking.
+ *
+ * This is roughly 25% faster than using String.split and parseInt (on Chrome).
+ *
+ * @param {string} string
+ */
+export default function numberExtractor(string: string, delimiter?: string): Generator<number, void, unknown>;
+//# sourceMappingURL=numberExtractor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"numberExtractor.d.ts","sourceRoot":"","sources":["../../../src/utils/numberExtractor.js"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,gDAFW,MAAM,wDAgBhB"}

package/dist/src/utils/numberExtractor.js

@@ -0,0 +1,24 @@
+const zero = "0".charCodeAt(0);
+
+/**
+ * Extract numbers from a delimited string. Does not do any error checking.
+ *
+ * This is roughly 25% faster than using String.split and parseInt (on Chrome).
+ *
+ * @param {string} string
+ */
+export default function* numberExtractor(string, delimiter = ",") {
+    const delCode = delimiter.charCodeAt(0);
+
+    let acc = 0;
+    for (let i = 0; i < string.length; i++) {
+        const charCode = string.charCodeAt(i);
+        if (charCode == delCode) {
+            yield acc;
+            acc = 0;
+        } else {
+            acc = acc * 10 + charCode - zero;
+        }
+    }
+    yield acc;
+}

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

@@ -0,0 +1,6 @@
+import { expect, test } from "vitest";
+import numberExtractor from "./numberExtractor";
+
+test("NumberExtractor parses delimited integers", () => {
+    expect([...numberExtractor("23,12345,2345")]).toEqual([23, 12345, 2345]);
+});

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

@@ -0,0 +1,9 @@
+/**
+ * Adapted from: https://github.com/d3/d3-selection/blob/master/src/point.js
+ *
+ * @param {HTMLElement} node
+ * @param {MouseEvent} event
+ * @returns {[number, number]}
+ */
+export default function _default(node: HTMLElement, event: MouseEvent): [number, number];
+//# sourceMappingURL=point.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"point.d.ts","sourceRoot":"","sources":["../../../src/utils/point.js"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,uCAJW,WAAW,SACX,UAAU,GACR,CAAC,MAAM,EAAE,MAAM,CAAC,CAQ5B"}

package/dist/src/utils/point.js

@@ -0,0 +1,14 @@
+/**
+ * Adapted from: https://github.com/d3/d3-selection/blob/master/src/point.js
+ *
+ * @param {HTMLElement} node
+ * @param {MouseEvent} event
+ * @returns {[number, number]}
+ */
+export default function (node, event) {
+    var rect = node.getBoundingClientRect();
+    return [
+        event.clientX - rect.left - node.clientLeft,
+        event.clientY - rect.top - node.clientTop,
+    ];
+}