@genome-spy/core 0.14.0

package/src/utils/layout/padding.js

@@ -0,0 +1,107 @@
+/**
+ * A class for handing paddings, borders, margins, etc.
+ *
+ * @typedef {import("../../spec/view").Paddings} Paddings
+ * @typedef {import("../../spec/view").PaddingConfig} PaddingConfig
+ */
+export default class Padding {
+    /**
+     * @param {number} top
+     * @param {number} right
+     * @param {number} bottom
+     * @param {number} left
+     */
+    constructor(top, right, bottom, left) {
+        /** @readonly */ this.top = top || 0;
+        /** @readonly */ this.right = right || 0;
+        /** @readonly */ this.bottom = bottom || 0;
+        /** @readonly */ this.left = left || 0;
+    }
+
+    /**
+     * Returns the sum of left and right
+     */
+    get width() {
+        return this.left + this.right;
+    }
+
+    /**
+     * Returns the sum of top and bottom
+     */
+    get height() {
+        return this.top + this.bottom;
+    }
+
+    /**
+     * @param {number} amount In pixels
+     */
+    expand(amount) {
+        if (amount <= 0) {
+            return this;
+        }
+
+        return new Padding(
+            this.top + amount,
+            this.right + amount,
+            this.bottom + amount,
+            this.left + amount
+        );
+    }
+
+    /**
+     *
+     * @param {Padding} padding padding to add
+     */
+    add(padding) {
+        return new Padding(
+            this.top + padding.top,
+            this.right + padding.right,
+            this.bottom + padding.bottom,
+            this.left + padding.left
+        );
+    }
+
+    /**
+     *
+     * @param {PaddingConfig} config
+     */
+    static createFromConfig(config) {
+        if (typeof config == "number") {
+            return this.createUniformPadding(config);
+        } else if (config) {
+            return this.createFromRecord(config);
+        } else {
+            return zeroPadding;
+        }
+    }
+
+    /**
+     * @param {Paddings} paddings
+     */
+    static createFromRecord(paddings) {
+        return new Padding(
+            paddings.top,
+            paddings.right,
+            paddings.bottom,
+            paddings.left
+        );
+    }
+
+    /**
+     * Returns a zeroed padding.
+     */
+    static zero() {
+        return zeroPadding;
+    }
+
+    /**
+     *
+     * @param {number} value
+     */
+    static createUniformPadding(value) {
+        return new Padding(value, value, value, value);
+    }
+}
+
+const zeroPadding = Padding.createUniformPadding(0);
+Object.freeze(zeroPadding);

package/src/utils/layout/point.js

@@ -0,0 +1,23 @@
+export default class Point {
+    /**
+     *
+     * @param {number} x
+     * @param {number} y
+     */
+    constructor(x, y) {
+        /** @readonly */ this.x = x;
+        /** @readonly */ this.y = y;
+    }
+
+    /**
+     *
+     * @param {Point} point
+     */
+    equals(point) {
+        if (!point) {
+            return false;
+        }
+
+        return point === this || (point.x === this.x && point.y === this.y);
+    }
+}

package/src/utils/layout/rectangle.js

@@ -0,0 +1,282 @@
+/**
+ * @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)
+        );
+    }
+
+    /**
+     * @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,
+        };
+    }
+}

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

@@ -0,0 +1,171 @@
+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/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);
+}