@genome-spy/core 0.72.0 → 0.74.0

package/dist/src/gl/webGLHelper.js

@@ -31,6 +31,7 @@ import {
     buildHashTableSet,
     computeHashTextureDimensions,
 } from "./hashTable.js";
+import CanvasSizeHelper from "./canvasSizeHelper.js";
 
 export default class WebGLHelper {
     /**
@@ -42,14 +43,23 @@ export default class WebGLHelper {
      * @param {WebGLContextAttributes} [webglContextAttributes]
      */
     constructor(container, sizeSource, webglContextAttributes = {}) {
-        this._container = container;
-        this._sizeSource =
+        const resolvedSizeSource =
             sizeSource ??
             (() => ({
                 width: undefined,
                 height: undefined,
             }));
 
+        /**
+         * @type {CanvasSizeHelper}
+         */
+        this._canvasSizeHelper = undefined;
+
+        /**
+         * @type {{ logicalWidth: number, logicalHeight: number, physicalWidth: number, physicalHeight: number } | undefined}
+         */
+        this._appliedCanvasSize = undefined;
+
         /** @type {Map<string, WebGLShader>} */
         this._shaderCache = new Map();
 
@@ -124,11 +134,18 @@ export default class WebGLHelper {
         );
         gl.bindFramebuffer(gl.FRAMEBUFFER, null);
 
+        this._canvasSizeHelper = new CanvasSizeHelper(
+            container,
+            canvas,
+            resolvedSizeSource,
+            () => this.adjustGl()
+        );
+
         this.adjustGl();
     }
 
     invalidateSize() {
-        this._logicalCanvasSize = undefined;
+        this._canvasSizeHelper.invalidate();
         this.adjustGl();
     }
 
@@ -167,10 +184,21 @@ export default class WebGLHelper {
 
     adjustGl() {
         const logicalSize = this.getLogicalCanvasSize();
+        const physicalSize = this.getPhysicalCanvasSize(logicalSize);
+
+        if (
+            this._appliedCanvasSize &&
+            this._appliedCanvasSize.logicalWidth == logicalSize.width &&
+            this._appliedCanvasSize.logicalHeight == logicalSize.height &&
+            this._appliedCanvasSize.physicalWidth == physicalSize.width &&
+            this._appliedCanvasSize.physicalHeight == physicalSize.height
+        ) {
+            return;
+        }
+
         this.canvas.style.width = `${logicalSize.width}px`;
         this.canvas.style.height = `${logicalSize.height}px`;
 
-        const physicalSize = this.getPhysicalCanvasSize(logicalSize);
         this.canvas.width = physicalSize.width;
         this.canvas.height = physicalSize.height;
 
@@ -179,9 +207,17 @@ export default class WebGLHelper {
             this._pickingBufferInfo,
             this._pickingAttachmentOptions
         );
+
+        this._appliedCanvasSize = {
+            logicalWidth: logicalSize.width,
+            logicalHeight: logicalSize.height,
+            physicalWidth: physicalSize.width,
+            physicalHeight: physicalSize.height,
+        };
     }
 
     finalize() {
+        this._canvasSizeHelper.finalize();
         this.canvas.remove();
     }
 
@@ -191,12 +227,16 @@ export default class WebGLHelper {
      * @param {{ width: number, height: number }} [logicalSize]
      */
     getPhysicalCanvasSize(logicalSize) {
-        const dpr = window.devicePixelRatio ?? 1;
-        logicalSize = logicalSize || this.getLogicalCanvasSize();
-        return {
-            width: logicalSize.width * dpr,
-            height: logicalSize.height * dpr,
-        };
+        return this._canvasSizeHelper.getPhysicalCanvasSize(logicalSize);
+    }
+
+    /**
+     * Returns the ratio between true display pixels and logical pixels.
+     *
+     * @param {{ width: number, height: number }} [logicalSize]
+     */
+    getDevicePixelRatio(logicalSize) {
+        return this._canvasSizeHelper.getDevicePixelRatio(logicalSize);
     }
 
     /**
@@ -204,28 +244,7 @@ export default class WebGLHelper {
      * without devicePixelRatio correction.
      */
     getLogicalCanvasSize() {
-        if (this._logicalCanvasSize) {
-            return this._logicalCanvasSize;
-        }
-
-        // TODO: The size should never be smaller than the minimum content size!
-        const contentSize = this._sizeSource();
-
-        const cs = window.getComputedStyle(this._container, null);
-        const width =
-            contentSize.width ??
-            this._container.clientWidth -
-                parseFloat(cs.paddingLeft) -
-                parseFloat(cs.paddingRight);
-
-        const height =
-            contentSize.height ??
-            this._container.clientHeight -
-                parseFloat(cs.paddingTop) -
-                parseFloat(cs.paddingBottom);
-
-        this._logicalCanvasSize = { width, height };
-        return this._logicalCanvasSize;
+        return this._canvasSizeHelper.getLogicalCanvasSize();
     }
 
     /**
@@ -367,8 +386,11 @@ export default class WebGLHelper {
         const texture = createOrUpdateTexture(
             this.gl,
             {
+                // Hash textures are point-lookups and must remain single-level.
+                auto: false,
                 level: 0,
-                minMag: gl.NEAREST,
+                min: gl.NEAREST,
+                mag: gl.NEAREST,
                 format: gl.RED_INTEGER,
                 internalFormat: gl.R32UI,
                 width,
@@ -377,6 +399,10 @@ export default class WebGLHelper {
             table,
             update ? existingTexture : false
         );
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_BASE_LEVEL, 0);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAX_LEVEL, 0);
+        gl.bindTexture(gl.TEXTURE_2D, null);
 
         this.selectionTextures.set(selection, texture);
     }

package/dist/src/index.d.ts

@@ -1,14 +1,8 @@
-export function embed(el: HTMLElement | string, spec: import("./spec/root.js").RootSpec | string, options?: import("./types/embedApi.js").EmbedOptions): import("./types/embedApi.js").EmbedResult;
-/**
- * Loads the spec from the given url and sets the baseUrl if it is not
- * defined in the spec.
- *
- * @param {string} url
- */
-export function loadSpec(url: string): Promise<any>;
+export const embed: (el: HTMLElement | string, spec: import("./spec/root.js").RootSpec | string, options?: import("./types/embedApi.js").EmbedOptions) => Promise<import("./types/embedApi.js").EmbedResult>;
 import GenomeSpy from "./genomeSpy.js";
 import { html } from "lit";
 import icon from "./img/bowtie.svg";
 import favIcon from "./img/genomespy-favicon.svg";
-export { GenomeSpy, html, icon, favIcon };
+import { loadSpec } from "./embedFactory.js";
+export { GenomeSpy, html, icon, favIcon, loadSpec };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.js"],"names":[],"mappings":";AAgGA;;;;;GAKG;AACH,8BAFW,MAAM,gBAmBhB;sBApHqB,gBAAgB;qBAFjB,KAAK;iBAGT,kBAAkB;oBACf,6BAA6B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.js"],"names":[],"mappings":"AAWA,6MAA4C;sBAPtB,gBAAgB;qBAJjB,KAAK;iBAKT,kBAAkB;oBACf,6BAA6B;yBACX,mBAAmB"}

package/dist/src/index.js

@@ -1,120 +1,14 @@
-import { isObject, isString } from "vega-util";
 import { html } from "lit";
 
+// Default core entry point: imports the fat GenomeSpy runtime with built-in
+// eager and lazy format registrations.
 import GenomeSpy from "./genomeSpy.js";
 import icon from "./img/bowtie.svg";
 import favIcon from "./img/genomespy-favicon.svg";
-import { fetchJson } from "./utils/fetchUtils.js";
+import { createEmbed, loadSpec } from "./embedFactory.js";
 
 export { GenomeSpy, html, icon, favIcon };
 
-/**
- * Embeds GenomeSpy into the DOM
- *
- * @type {import("./types/embedApi.js").EmbedFunction}
- * @returns {Promise<import("./types/embedApi.js").EmbedResult>}
- */
-export async function embed(el, spec, options = {}) {
-    /** @type {HTMLElement} */
-    let element;
+export const embed = createEmbed(GenomeSpy);
 
-    if (isString(el)) {
-        element = document.querySelector(el);
-        if (!element) {
-            throw new Error(`No such element: ${el}`);
-        }
-    } else if (el instanceof HTMLElement) {
-        element = el;
-    } else {
-        throw new Error(`Invalid element: ${el}`);
-    }
-
-    /** @type {GenomeSpy} */
-    let genomeSpy;
-
-    try {
-        const specObject = isObject(spec) ? spec : await loadSpec(spec);
-
-        specObject.baseUrl ??= "";
-        specObject.width ??= "container";
-        specObject.padding ??= 10;
-
-        if (element == document.body) {
-            // Need to add a wrapper to make sizing behavior more stable
-            const wrapper = document.createElement("div");
-            wrapper.style.position = "fixed";
-            wrapper.style.inset = "0";
-            wrapper.style.overflow = "hidden";
-            element.appendChild(wrapper);
-            element = wrapper;
-        }
-
-        genomeSpy = new GenomeSpy(element, specObject, options);
-        applyOptions(genomeSpy, options);
-        await genomeSpy.launch();
-    } catch (e) {
-        // eslint-disable-next-line require-atomic-updates
-        element.innerText = e.toString();
-        console.error(e);
-    }
-
-    return {
-        finalize() {
-            genomeSpy.destroy();
-            while (element.firstChild) {
-                element.firstChild.remove();
-            }
-        },
-
-        addEventListener(type, listener) {
-            genomeSpy.addEventListener(type, listener);
-        },
-
-        removeEventListener(type, listener) {
-            genomeSpy.removeEventListener(type, listener);
-        },
-
-        getScaleResolutionByName(name) {
-            return genomeSpy.getNamedScaleResolutions().get(name);
-        },
-
-        updateNamedData: genomeSpy.updateNamedData.bind(genomeSpy),
-        exportCanvas: genomeSpy.exportCanvas.bind(genomeSpy),
-    };
-}
-
-/**
- *
- * @param {import("./genomeSpy.js").default} genomeSpy
- * @param {import("./types/embedApi.js").EmbedOptions} options options
- */
-function applyOptions(genomeSpy, options) {
-    if (options.namedDataProvider) {
-        genomeSpy.registerNamedDataProvider(options.namedDataProvider);
-    }
-}
-
-/**
- * Loads the spec from the given url and sets the baseUrl if it is not
- * defined in the spec.
- *
- * @param {string} url
- */
-export async function loadSpec(url) {
-    let spec;
-
-    try {
-        spec = /** @type {any} */ (await fetchJson(url));
-    } catch (e) {
-        throw new Error(
-            `Could not load or parse configuration: ${url}, reason: ${e.message}`
-        );
-    }
-
-    if (!spec.baseUrl) {
-        const m = url.match(/^[^?#]*\//);
-        spec.baseUrl = (m && m[0]) || "./";
-    }
-
-    return spec;
-}
+export { loadSpec };