@genome-spy/core 0.62.2 → 0.64.0

package/dist/schema.json

@@ -1654,6 +1654,15 @@
         }
       ]
     },
+    "DomEventType": {
+      "enum": [
+        "click",
+        "dblclick",
+        "mouseover",
+        "pointerover"
+      ],
+      "type": "string"
+    },
     "DsvDataFormat": {
       "additionalProperties": false,
       "properties": {
@@ -2107,6 +2116,23 @@
       },
       "type": "object"
     },
+    "EventConfig": {
+      "additionalProperties": false,
+      "properties": {
+        "filter": {
+          "description": "An optional filter expression to further filter events of the specified type. The expression can only refer to the event object as `event`, and should evaluate to a boolean value indicating whether to include the event. No other data or parameters are in scope.",
+          "type": "string"
+        },
+        "type": {
+          "$ref": "#/definitions/DomEventType",
+          "description": "The type of event to listen to. For example, `\"click\"` or `\"mouseover\"`."
+        }
+      },
+      "required": [
+        "type"
+      ],
+      "type": "object"
+    },
     "ExprDef": {
       "additionalProperties": false,
       "properties": {
@@ -3715,6 +3741,23 @@
     "IntervalSelectionConfig": {
       "additionalProperties": false,
       "properties": {
+        "clear": {
+          "anyOf": [
+            {
+              "$ref": "#/definitions/DomEventType"
+            },
+            {
+              "$ref": "#/definitions/EventConfig"
+            },
+            {
+              "type": "string"
+            },
+            {
+              "type": "boolean"
+            }
+          ],
+          "description": "A string or object that defines the events that should clear the selection.\n\n__Default value:__ `\"dblclick\"`"
+        },
         "encodings": {
           "description": "An array of encoding channels that define the interval selection.",
           "items": {
@@ -3727,16 +3770,22 @@
           "description": "Interval selections display a rectangle mark to show the selected range. Use the `mark` property to adjust the appearance of this rectangle."
         },
         "on": {
-          "enum": [
-            "click",
-            "mouseover",
-            "pointerover"
+          "anyOf": [
+            {
+              "$ref": "#/definitions/DomEventType"
+            },
+            {
+              "$ref": "#/definitions/EventConfig"
+            },
+            {
+              "type": "string"
+            }
           ],
-          "type": "string"
+          "description": "A string or object that defines the events to which the selection should listen."
         },
         "type": {
           "const": "interval",
-          "description": "Determines the default event processing and data query for the selection. Vega-Lite currently supports two selection types:\n\n- `\"point\"` -- to select multiple discrete data values; the first value is selected on `click` and additional values toggled on shift-click.\n- `\"interval\"` -- to select a continuous range of data values on `drag`.",
+          "description": "The selection type.\n\n- `\"point\"` -- to select multiple discrete data values; the first value is selected on `click` and additional values toggled on shift-click.\n- `\"interval\"` -- to select a continuous range of data values on `drag`.",
           "type": "string"
         }
       },
@@ -4978,13 +5027,36 @@
     "PointSelectionConfig": {
       "additionalProperties": false,
       "properties": {
+        "clear": {
+          "anyOf": [
+            {
+              "$ref": "#/definitions/DomEventType"
+            },
+            {
+              "$ref": "#/definitions/EventConfig"
+            },
+            {
+              "type": "string"
+            },
+            {
+              "type": "boolean"
+            }
+          ],
+          "description": "A string or object that defines the events that should clear the selection.\n\n__Default value:__ `\"dblclick\"`"
+        },
         "on": {
-          "enum": [
-            "click",
-            "mouseover",
-            "pointerover"
+          "anyOf": [
+            {
+              "$ref": "#/definitions/DomEventType"
+            },
+            {
+              "$ref": "#/definitions/EventConfig"
+            },
+            {
+              "type": "string"
+            }
           ],
-          "type": "string"
+          "description": "A string or object that defines the events to which the selection should listen."
         },
         "toggle": {
           "description": "Controls whether data values should be toggled (inserted or removed from a point selection) when clicking with the shift key pressed.\n\n- `true` -- additional values can be selected by shift-clicking.\n- `false` -- only a single value can be selected at a time.\n\n__Default value:__ `true`",
@@ -4992,7 +5064,7 @@
         },
         "type": {
           "const": "point",
-          "description": "Determines the default event processing and data query for the selection. Vega-Lite currently supports two selection types:\n\n- `\"point\"` -- to select multiple discrete data values; the first value is selected on `click` and additional values toggled on shift-click.\n- `\"interval\"` -- to select a continuous range of data values on `drag`.",
+          "description": "The selection type.\n\n- `\"point\"` -- to select multiple discrete data values; the first value is selected on `click` and additional values toggled on shift-click.\n- `\"interval\"` -- to select a continuous range of data values on `drag`.",
           "type": "string"
         }
       },

package/dist/src/genomeSpy.d.ts

@@ -84,6 +84,7 @@ export default class GenomeSpy {
     _inputBindingContainer: HTMLElement;
     /** @type {Point} */
     _mouseDownCoords: Point;
+    dpr: number;
     /**
      *
      * @param {(name: string) => any[]} provider
@@ -141,6 +142,16 @@ export default class GenomeSpy {
      * @template T
      */
     updateTooltip<T>(datum: T, converter?: (arg0: T) => Promise<string | HTMLElement | import("lit").TemplateResult>): void;
+    /**
+     * Returns a PNG data URL of the current canvas.
+     *
+     * @param {number} [logicalWidth] defaults to canvas width
+     * @param {number} [logicalHeight] defaults to canvas height
+     * @param {number} [devicePixelRatio] defaults to window.devicePixelRatio
+     * @param {string} [clearColor] null for transparent
+     * @returns A PNG data Url
+     */
+    exportCanvas(logicalWidth?: number, logicalHeight?: number, devicePixelRatio?: number, clearColor?: string): string;
     computeLayout(): void;
     renderAll(): void;
     renderPickingFramebuffer(): void;

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

@@ -1 +1 @@
-{"version":3,"file":"genomeSpy.d.ts","sourceRoot":"","sources":["../../src/genomeSpy.js"],"names":[],"mappings":"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"}
+{"version":3,"file":"genomeSpy.d.ts","sourceRoot":"","sources":["../../src/genomeSpy.js"],"names":[],"mappings":"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"}

package/dist/src/genomeSpy.js

@@ -13,7 +13,10 @@ import {
 } from "./view/viewUtils.js";
 import UnitView from "./view/unitView.js";
 
-import WebGLHelper from "./gl/webGLHelper.js";
+import WebGLHelper, {
+    framebufferToDataUrl,
+    readPickingPixel,
+} from "./gl/webGLHelper.js";
 import Rectangle from "./view/layout/rectangle.js";
 import BufferedViewRenderingContext from "./view/renderingContext/bufferedViewRenderingContext.js";
 import CompositeViewRenderingContext from "./view/renderingContext/compositeViewRenderingContext.js";
@@ -35,6 +38,7 @@ import { VIEW_ROOT_NAME, ViewFactory } from "./view/viewFactory.js";
 import { reconfigureScales } from "./view/scaleResolution.js";
 import createBindingInputs from "./utils/inputBinding.js";
 import { isStillZooming } from "./view/zoom.js";
+import { createFramebufferInfo } from "twgl.js";
 
 /**
  * Events that are broadcasted to all views.
@@ -148,6 +152,8 @@ export default class GenomeSpy {
 
         /** @type {Point} */
         this._mouseDownCoords = undefined;
+
+        this.dpr = window.devicePixelRatio;
     }
 
     get #canvasWrapper() {
@@ -307,12 +313,13 @@ export default class GenomeSpy {
     #setupDpr() {
         const dprSetter = this.viewRoot.paramMediator.allocateSetter(
             "devicePixelRatio",
-            window.devicePixelRatio
+            this.dpr
         );
 
         const resizeCallback = () => {
             this._glHelper.invalidateSize();
-            dprSetter(window.devicePixelRatio);
+            this.dpr = window.devicePixelRatio;
+            dprSetter(this.dpr);
             this.computeLayout();
             // Render immediately, without RAF
             this.renderAll();
@@ -368,7 +375,6 @@ export default class GenomeSpy {
                 this.viewRoot
                     ? calculateCanvasSize(this.viewRoot)
                     : { width: undefined, height: undefined },
-            this.spec.background,
             { powerPreference: this.options.powerPreference ?? "default" }
         );
 
@@ -444,10 +450,6 @@ export default class GenomeSpy {
             genomeStore: this.genomeStore,
             fontManager: new BmFontManager(this._glHelper),
 
-            get devicePixelRatio() {
-                return self._glHelper.dpr;
-            },
-
             requestLayoutReflow: () => {
                 // placeholder
             },
@@ -877,13 +879,15 @@ export default class GenomeSpy {
      * @param {number} y
      */
     _handlePicking(x, y) {
-        const pixelValue = this._glHelper.readPickingPixel(x, y);
+        const dpr = this.dpr;
+        const pp = readPickingPixel(
+            this._glHelper.gl,
+            this._glHelper._pickingBufferInfo,
+            x * dpr,
+            y * dpr
+        );
 
-        const uniqueId =
-            pixelValue[0] |
-            (pixelValue[1] << 8) |
-            (pixelValue[2] << 16) |
-            (pixelValue[3] << 24);
+        const uniqueId = pp[0] | (pp[1] << 8) | (pp[2] << 16) | (pp[3] << 24);
 
         if (uniqueId == 0) {
             this._currentHover = null;
@@ -964,6 +968,72 @@ export default class GenomeSpy {
         }
     }
 
+    /**
+     * Returns a PNG data URL of the current canvas.
+     *
+     * @param {number} [logicalWidth] defaults to canvas width
+     * @param {number} [logicalHeight] defaults to canvas height
+     * @param {number} [devicePixelRatio] defaults to window.devicePixelRatio
+     * @param {string} [clearColor] null for transparent
+     * @returns A PNG data Url
+     */
+    exportCanvas(
+        logicalWidth,
+        logicalHeight,
+        devicePixelRatio,
+        clearColor = "white"
+    ) {
+        const helper = this._glHelper;
+
+        logicalWidth ??= helper.getLogicalCanvasSize().width;
+        logicalHeight ??= helper.getLogicalCanvasSize().height;
+        devicePixelRatio ??= window.devicePixelRatio ?? 1;
+
+        const gl = helper.gl;
+
+        const width = Math.floor(logicalWidth * devicePixelRatio);
+        const height = Math.floor(logicalHeight * devicePixelRatio);
+
+        const framebufferInfo = createFramebufferInfo(
+            gl,
+            [
+                {
+                    format: gl.RGBA,
+                    type: gl.UNSIGNED_BYTE,
+                    minMag: gl.LINEAR,
+                    wrap: gl.CLAMP_TO_EDGE,
+                },
+            ],
+            width,
+            height
+        );
+
+        const renderingContext = new BufferedViewRenderingContext(
+            { picking: false },
+            {
+                webGLHelper: this._glHelper,
+                canvasSize: { width: logicalWidth, height: logicalHeight },
+                devicePixelRatio,
+                clearColor,
+                framebufferInfo,
+            }
+        );
+
+        this.viewRoot.render(
+            renderingContext,
+            Rectangle.create(0, 0, logicalWidth, logicalHeight)
+        );
+        renderingContext.render();
+
+        const pngUrl = framebufferToDataUrl(gl, framebufferInfo, "image/png");
+
+        // Clean up
+        this.computeLayout();
+        this.renderAll();
+
+        return pngUrl;
+    }
+
     computeLayout() {
         const root = this.viewRoot;
         if (!root) {
@@ -982,17 +1052,25 @@ export default class GenomeSpy {
             return;
         }
 
+        const commonOptions = {
+            webGLHelper: this._glHelper,
+            canvasSize,
+            devicePixelRatio: window.devicePixelRatio ?? 1,
+        };
+
         this._renderingContext = new BufferedViewRenderingContext(
+            { picking: false },
             {
-                picking: false,
-            },
-            this._glHelper
+                ...commonOptions,
+                clearColor: this.spec.background,
+            }
         );
         this._pickingContext = new BufferedViewRenderingContext(
+            { picking: true },
             {
-                picking: true,
-            },
-            this._glHelper
+                ...commonOptions,
+                framebufferInfo: this._glHelper._pickingBufferInfo,
+            }
         );
 
         root.render(

package/dist/src/gl/includes/common.glsl.js

@@ -1,2 +1,2 @@
-const shader = "#define PI 3.141593\nuniform View{mediump vec2 uViewOffset;mediump vec2 uViewScale;mediump vec2 uViewportSize;lowp float uDevicePixelRatio;lowp float uViewOpacity;bool uPickingEnabled;};/***Maps a coordinate on the unit scale to a normalized device coordinate.*(0,0)is at the bottom left corner.*/vec4 unitToNdc(vec2 coord){return vec4((coord*uViewScale+uViewOffset)*2.0-1.0,0.0,1.0);}vec4 unitToNdc(float x,float y){return unitToNdc(vec2(x,y));}vec4 pixelsToNdc(vec2 coord){return unitToNdc(coord/uViewportSize);}vec4 pixelsToNdc(float x,float y){return pixelsToNdc(vec2(x,y));}float linearstep(float edge0,float edge1,float x){return clamp((x-edge0)/(edge1-edge0),0.0,1.0);}bool isEmptyBinarySearchTexture(highp usampler2D s){return textureSize(s,0).x==1&&texelFetch(s,ivec2(0,0),0).r==0u;}bool binarySearchTexture(highp usampler2D s,uint value){int texSize=textureSize(s,0).x;int left=0;int right=texSize-1;while(left<=right){int mid=left+(right-left)/2;uint midValue=texelFetch(s,ivec2(mid,0),0).r;if(midValue==value){return true;}if(midValue<value){left=mid+1;}else{right=mid-1;}}return false;}/***Calculates a gamma for antialiasing opacity based on the color.*/float getGammaForColor(vec3 rgb){return mix(1.25,0.75,smoothstep(0.0,1.0,dot(rgb,vec3(0.299,0.587,0.114))));}/***Specialized linearstep for doing antialiasing*/float distanceToRatio(float d){return clamp(d*uDevicePixelRatio+0.5,0.0,1.0);}vec4 distanceToColor(float d,vec4 fill,vec4 stroke,vec4 background,float halfStrokeWidth){if(halfStrokeWidth>0.0){float sd=abs(d)-halfStrokeWidth;return mix(stroke,d<=0.0 ? fill : background,distanceToRatio(sd));}else{return mix(background,fill,distanceToRatio(-d));}}";
+const shader = "#define PI 3.141593\nuniform View{mediump vec2 uViewOffset;mediump vec2 uViewScale;mediump vec2 uViewportSize;lowp float uDevicePixelRatio;lowp float uViewOpacity;bool uPickingEnabled;};/***Maps a coordinate on the unit scale to a normalized device coordinate.*(0,0)is at the bottom left corner.*/vec4 unitToNdc(vec2 coord){return vec4((coord*uViewScale+uViewOffset)*2.0-1.0,0.0,1.0);}vec4 unitToNdc(float x,float y){return unitToNdc(vec2(x,y));}vec4 pixelsToNdc(vec2 coord){return unitToNdc(coord/uViewportSize);}vec4 pixelsToNdc(float x,float y){return pixelsToNdc(vec2(x,y));}float linearstep(float edge0,float edge1,float x){return clamp((x-edge0)/(edge1-edge0),0.0,1.0);}bool isEmptyBinarySearchTexture(highp usampler2D s){return textureSize(s,0).x==1&&texelFetch(s,ivec2(0,0),0).r==0u;}bool binarySearchTexture(highp usampler2D s,uint value){int texSize=textureSize(s,0).x;if(texSize==1&&texelFetch(s,ivec2(0,0),0).r==0u){return false;}int left=0;int right=texSize-1;while(left<=right){int mid=left+(right-left)/2;uint midValue=texelFetch(s,ivec2(mid,0),0).r;if(midValue==value){return true;}if(midValue<value){left=mid+1;}else{right=mid-1;}}return false;}/***Calculates a gamma for antialiasing opacity based on the color.*/float getGammaForColor(vec3 rgb){return mix(1.25,0.75,smoothstep(0.0,1.0,dot(rgb,vec3(0.299,0.587,0.114))));}/***Specialized linearstep for doing antialiasing*/float distanceToRatio(float d){return clamp(d*uDevicePixelRatio+0.5,0.0,1.0);}vec4 distanceToColor(float d,vec4 fill,vec4 stroke,vec4 background,float halfStrokeWidth){if(halfStrokeWidth>0.0){float sd=abs(d)-halfStrokeWidth;return mix(stroke,d<=0.0 ? fill : background,distanceToRatio(sd));}else{return mix(background,fill,distanceToRatio(-d));}}";
 export default shader;

package/dist/src/gl/webGLHelper.d.ts

@@ -17,6 +17,21 @@ export function createProgram(gl: WebGL2RenderingContext, vertexShader: WebGLSha
  * @param {WebGLTexture} [texture]
  */
 export function createOrUpdateTexture(gl: WebGLRenderingContext, options: Omit<import("twgl.js").TextureOptions, "src">, src: number[] | ArrayBufferView, texture?: WebGLTexture): WebGLTexture;
+/**
+ *
+ * @param {WebGL2RenderingContext} gl
+ * @param {import("twgl.js").FramebufferInfo} framebufferInfo
+ * @param {number} x
+ * @param {number} y
+ */
+export function readPickingPixel(gl: WebGL2RenderingContext, framebufferInfo: import("twgl.js").FramebufferInfo, x: number, y: number): Uint8Array<ArrayBuffer>;
+/**
+ *
+ * @param {WebGL2RenderingContext} gl
+ * @param {import("twgl.js").FramebufferInfo} framebufferInfo
+ * @param {string} [type]
+ */
+export function framebufferToDataUrl(gl: WebGL2RenderingContext, framebufferInfo: import("twgl.js").FramebufferInfo, type?: string): string;
 export default class WebGLHelper {
     /**
      *
@@ -24,13 +39,12 @@ export default class WebGLHelper {
      * @param {() => {width: number, height: number}} [sizeSource]
      *      A function that returns the content size. If a dimension is undefined,
      *      the canvas fills the container, otherwise the canvas is adjusted to the content size.
-     * @param {string} [clearColor]
      * @param {WebGLContextAttributes} [webglContextAttributes]
      */
     constructor(container: HTMLElement, sizeSource?: () => {
         width: number;
         height: number;
-    }, clearColor?: string, webglContextAttributes?: WebGLContextAttributes);
+    }, webglContextAttributes?: WebGLContextAttributes);
     _container: HTMLElement;
     _sizeSource: () => {
         width: any;
@@ -49,15 +63,11 @@ export default class WebGLHelper {
     /** @type {import("twgl.js").AttachmentOptions[]} */
     _pickingAttachmentOptions: import("twgl.js").AttachmentOptions[];
     _pickingBufferInfo: import("twgl.js").FramebufferInfo;
-    /** @type {[number, number, number, number]} */
-    _clearColor: [number, number, number, number];
     invalidateSize(): void;
     _logicalCanvasSize: {
         width: any;
         height: any;
     };
-    _updateDpr(): void;
-    dpr: number;
     /**
      * Compiles and caches a shader. The shader source is used as a cache key.
      *
@@ -80,19 +90,13 @@ export default class WebGLHelper {
         height: number;
     };
     /**
-     * Returns the canvas size in logical pixels (without devicePixelRatio correction)
+     * Returns the size of the canvas canvas container size in logical pixels,
+     * without devicePixelRatio correction.
      */
     getLogicalCanvasSize(): {
         width: any;
         height: any;
     };
-    /**
-     *
-     * @param {number} x
-     * @param {number} y
-     */
-    readPickingPixel(x: number, y: number): Uint8Array<ArrayBuffer>;
-    clearAll(): void;
     /**
      * Creates textures for color schemes and discrete/discretizing ranges.
      * N.B. Discrete range textures need domain. Thus, this cannot be called

package/dist/src/gl/webGLHelper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"webGLHelper.d.ts","sourceRoot":"","sources":["../../../src/gl/webGLHelper.js"],"names":[],"mappings":"AA2cA;;;;GAIG;AACH,kCAJW,sBAAsB,gBACtB,WAAW,kBACX,WAAW;;;;;;EA8CrB;AAED;;;;;GAKG;AACH,0CALW,qBAAqB,WACrB,IAAI,CAAC,OAAO,SAAS,EAAE,cAAc,EAAE,KAAK,CAAC,OAC7C,MAAM,EAAE,GAAG,eAAe,YAC1B,YAAY,gBAYtB;AA/eD;IACI;;;;;;;;OAQG;IACH,uBAPW,WAAW,eACX,MAAM;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAC,eAGrC,MAAM,2BACN,sBAAsB,EA8FhC;IAtFG,wBAA2B;IAC3B;;;MAKO;IAEP,uCAAuC;IACvC,cADW,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,CACN;IAE7B,6EAA6E;IAC7E,eADW,OAAO,CAAC,OAAO,qBAAqB,EAAE,SAAS,EAAE,YAAY,CAAC,CACvC;IAElC;;OAEG;IACH,mBAFU,OAAO,CAAC,OAAO,4BAA4B,EAAE,mBAAmB,EAAE,YAAY,CAAC,CAEnD;IAwCtC,0BAAoB;IACpB,2BAAY;IAGZ,oDAAoD;IACpD,2BADW,OAAO,SAAS,EAAE,iBAAiB,EAAE,CAQ/C;IACD,sDAGC;IAOD,+CAA+C;IAC/C,aADW,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CACZ;IAOnC,uBAIC;IAHG;;;MAAmC;IAKvC,mBAEC;IADG,YAAkC;IAGtC;;;;;OAKG;IACH,oBAHW,MAAM,QACN,MAAM,GAAG,MAAM,EAAE,eA2B3B;IAED,iBAcC;IAED,iBAEC;IAED;;;;OAIG;IACH,oCAFW;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE;;;MAQ3C;IAED;;OAEG;IACH;;;MAuBC;IAED;;;;OAIG;IACH,oBAHW,MAAM,KACN,MAAM,2BAwBhB;IAED,iBAOC;IAED;;;;;;;;;OASG;IACH,+BAHW,OAAO,4BAA4B,EAAE,OAAO,WAC5C,OAAO,QA0GjB;IAED;;OAEG;IACH,kCAFW,OAAO,4BAA4B,EAAE,mBAAmB,0BA+BlE;CACJ"}
+{"version":3,"file":"webGLHelper.d.ts","sourceRoot":"","sources":["../../../src/gl/webGLHelper.js"],"names":[],"mappings":"AAwZA;;;;GAIG;AACH,kCAJW,sBAAsB,gBACtB,WAAW,kBACX,WAAW;;;;;;EA8CrB;AAED;;;;;GAKG;AACH,0CALW,qBAAqB,WACrB,IAAI,CAAC,OAAO,SAAS,EAAE,cAAc,EAAE,KAAK,CAAC,OAC7C,MAAM,EAAE,GAAG,eAAe,YAC1B,YAAY,gBAYtB;AAED;;;;;;GAMG;AACH,qCALW,sBAAsB,mBACtB,OAAO,SAAS,EAAE,eAAe,KACjC,MAAM,KACN,MAAM,2BAWhB;AAED;;;;;GAKG;AACH,yCAJW,sBAAsB,mBACtB,OAAO,SAAS,EAAE,eAAe,SACjC,MAAM,UA4BhB;AAjfD;IACI;;;;;;;OAOG;IACH,uBANW,WAAW,eACX,MAAM;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAC,2BAGrC,sBAAsB,EAsFhC;IAnFG,wBAA2B;IAC3B;;;MAKO;IAEP,uCAAuC;IACvC,cADW,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,CACN;IAE7B,6EAA6E;IAC7E,eADW,OAAO,CAAC,OAAO,qBAAqB,EAAE,SAAS,EAAE,YAAY,CAAC,CACvC;IAElC;;OAEG;IACH,mBAFU,OAAO,CAAC,OAAO,4BAA4B,EAAE,mBAAmB,EAAE,YAAY,CAAC,CAEnD;IA8CtC,0BAAoB;IACpB,2BAAY;IAGZ,oDAAoD;IACpD,2BADW,OAAO,SAAS,EAAE,iBAAiB,EAAE,CAQ/C;IACD,sDAGC;IAML,uBAGC;IAFG;;;MAAmC;IAIvC;;;;;OAKG;IACH,oBAHW,MAAM,QACN,MAAM,GAAG,MAAM,EAAE,eA2B3B;IAED,iBAcC;IAED,iBAEC;IAED;;;;OAIG;IACH,oCAFW;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE;;;MAS3C;IAED;;;OAGG;IACH;;;MAuBC;IAED;;;;;;;;;OASG;IACH,+BAHW,OAAO,4BAA4B,EAAE,OAAO,WAC5C,OAAO,QA0GjB;IAED;;OAEG;IACH,kCAFW,OAAO,4BAA4B,EAAE,mBAAmB,0BA+BlE;CACJ"}

package/dist/src/gl/webGLHelper.js

@@ -26,7 +26,6 @@ import {
     isColorChannel,
     isDiscreteChannel,
 } from "../encoder/encoder.js";
-import { color } from "d3-color";
 import { isMultiPointSelection } from "../selection/selection.js";
 
 export default class WebGLHelper {
@@ -36,15 +35,9 @@ export default class WebGLHelper {
      * @param {() => {width: number, height: number}} [sizeSource]
      *      A function that returns the content size. If a dimension is undefined,
      *      the canvas fills the container, otherwise the canvas is adjusted to the content size.
-     * @param {string} [clearColor]
      * @param {WebGLContextAttributes} [webglContextAttributes]
      */
-    constructor(
-        container,
-        sizeSource,
-        clearColor,
-        webglContextAttributes = {}
-    ) {
+    constructor(container, sizeSource, webglContextAttributes = {}) {
         this._container = container;
         this._sizeSource =
             sizeSource ??
@@ -97,7 +90,13 @@ export default class WebGLHelper {
 
         addExtensionsToContext(gl);
 
-        // TODO: view background: https://vega.github.io/vega-lite/docs/spec.html#view-background
+        // Make flat shading fast. All flat vertices have the same values, so
+        // it doesn't matter which one is the provoking vertex.
+        // https://registry.khronos.org/webgl/extensions/WEBGL_provoking_vertex/
+        const epv = gl.getExtension("WEBGL_provoking_vertex");
+        if (epv) {
+            epv.provokingVertexWEBGL(epv.FIRST_VERTEX_CONVENTION_WEBGL);
+        }
 
         // Always use pre-multiplied alpha
         gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
@@ -122,27 +121,13 @@ export default class WebGLHelper {
         gl.bindFramebuffer(gl.FRAMEBUFFER, null);
 
         this.adjustGl();
-
-        this._updateDpr();
-
-        /** @type {[number, number, number, number]} */
-        this._clearColor = [0, 0, 0, 0];
-        if (clearColor) {
-            const c = color(clearColor).rgb();
-            this._clearColor = [c.r / 255, c.g / 255, c.b / 255, c.opacity];
-        }
     }
 
     invalidateSize() {
         this._logicalCanvasSize = undefined;
-        this._updateDpr();
         this.adjustGl();
     }
 
-    _updateDpr() {
-        this.dpr = window.devicePixelRatio;
-    }
-
     /**
      * Compiles and caches a shader. The shader source is used as a cache key.
      *
@@ -202,15 +187,17 @@ 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 * this.dpr,
-            height: logicalSize.height * this.dpr,
+            width: logicalSize.width * dpr,
+            height: logicalSize.height * dpr,
         };
     }
 
     /**
-     * Returns the canvas size in logical pixels (without devicePixelRatio correction)
+     * Returns the size of the canvas canvas container size in logical pixels,
+     * without devicePixelRatio correction.
      */
     getLogicalCanvasSize() {
         if (this._logicalCanvasSize) {
@@ -237,44 +224,6 @@ export default class WebGLHelper {
         return this._logicalCanvasSize;
     }
 
-    /**
-     *
-     * @param {number} x
-     * @param {number} y
-     */
-    readPickingPixel(x, y) {
-        const gl = this.gl;
-
-        x *= this.dpr;
-        y *= this.dpr;
-
-        const height = this.getPhysicalCanvasSize().height;
-
-        const pixel = new Uint8Array(4);
-        gl.bindFramebuffer(gl.FRAMEBUFFER, this._pickingBufferInfo.framebuffer);
-        gl.readPixels(
-            x,
-            height - y - 1,
-            1,
-            1,
-            gl.RGBA,
-            gl.UNSIGNED_BYTE,
-            pixel
-        );
-        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-
-        return pixel;
-    }
-
-    clearAll() {
-        const gl = this.gl;
-        const { width, height } = this.getPhysicalCanvasSize();
-        gl.viewport(0, 0, width, height);
-        gl.disable(gl.SCISSOR_TEST);
-        gl.clearColor(...this._clearColor);
-        gl.clear(gl.COLOR_BUFFER_BIT);
-    }
-
     /**
      * Creates textures for color schemes and discrete/discretizing ranges.
      * N.B. Discrete range textures need domain. Thus, this cannot be called
@@ -525,3 +474,55 @@ export function createOrUpdateTexture(gl, options, src, texture) {
     }
     return texture;
 }
+
+/**
+ *
+ * @param {WebGL2RenderingContext} gl
+ * @param {import("twgl.js").FramebufferInfo} framebufferInfo
+ * @param {number} x
+ * @param {number} y
+ */
+export function readPickingPixel(gl, framebufferInfo, x, y) {
+    const { height, framebuffer } = framebufferInfo;
+
+    const pixel = new Uint8Array(4);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+    gl.readPixels(x, height - y - 1, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixel);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+
+    return pixel;
+}
+
+/**
+ *
+ * @param {WebGL2RenderingContext} gl
+ * @param {import("twgl.js").FramebufferInfo} framebufferInfo
+ * @param {string} [type]
+ */
+export function framebufferToDataUrl(gl, framebufferInfo, type = "image/png") {
+    const { width, height } = framebufferInfo;
+    const pixels = new Uint8Array(width * height * 4);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, framebufferInfo.framebuffer);
+    gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+
+    const exportCanvas = document.createElement("canvas");
+    exportCanvas.width = width;
+    exportCanvas.height = height;
+    const ctx = exportCanvas.getContext("2d");
+    const imageData = ctx.createImageData(width, height);
+
+    // Flip Y axis (WebGL's origin is bottom-left, canvas is top-left)
+    for (let y = 0; y < height; y++) {
+        const srcStart = (height - 1 - y) * width * 4;
+        const destStart = y * width * 4;
+        imageData.data.set(
+            pixels.subarray(srcStart, srcStart + width * 4),
+            destStart
+        );
+    }
+
+    ctx.putImageData(imageData, 0, 0);
+
+    return exportCanvas.toDataURL(type);
+}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.js"],"names":[],"mappings":";AAwGA;;;;;GAKG;AACH,8BAFW,MAAM,gBAuBhB;sBAhIqB,gBAAgB;qBAFjB,KAAK;iBAGT,kBAAkB;oBACf,6BAA6B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.js"],"names":[],"mappings":";AAyGA;;;;;GAKG;AACH,8BAFW,MAAM,gBAuBhB;sBAjIqB,gBAAgB;qBAFjB,KAAK;iBAGT,kBAAkB;oBACf,6BAA6B"}

package/dist/src/index.js

@@ -88,6 +88,7 @@ export async function embed(el, spec, options = {}) {
         },
 
         updateNamedData: genomeSpy.updateNamedData.bind(genomeSpy),
+        exportCanvas: genomeSpy.exportCanvas.bind(genomeSpy),
     };
 }
 

package/dist/src/marks/link.fragment.glsl.js

@@ -1,2 +1,2 @@
-const shader = "in vec4 vColor;in float vSize;in float vNormalLengthInPixels;in float vGamma;out lowp vec4 fragColor;void main(void){float dpr=uDevicePixelRatio;float distance=abs(vNormalLengthInPixels);float opacity=clamp(((vSize/2.0-distance)*dpr),0.0,1.0);opacity=pow(opacity,vGamma);fragColor=vColor*opacity;if(uPickingEnabled){fragColor=vPickingColor;}}";
+const shader = "flat in vec4 vColor;flat in float vSize;in float vNormalLengthInPixels;flat in float vGamma;out lowp vec4 fragColor;void main(void){float dpr=uDevicePixelRatio;float distance=abs(vNormalLengthInPixels);float opacity=clamp(((vSize/2.0-distance)*dpr),0.0,1.0);opacity=pow(opacity,vGamma);fragColor=vColor*opacity;if(uPickingEnabled){fragColor=vPickingColor;}}";
 export default shader;