@genome-spy/core 0.36.1 → 0.37.0

package/dist/src/gl/rect.fragment.glsl.js

@@ -0,0 +1,2 @@
+const shader = "#if defined(ROUNDED_CORNERS) || defined(STROKED)\nin vec2 vPosInPixels;\n#endif\nin vec2 vHalfSizeInPixels;in lowp vec4 vFillColor;in lowp vec4 vStrokeColor;in float vHalfStrokeWidth;in vec4 vCornerRadii;out lowp vec4 fragColor;float sdRoundedBox(vec2 p,vec2 b,vec4 r){r.xy=p.x>0.0 ? r.xy : r.zw;r.x=p.y>0.0 ? r.x  : r.y;vec2 q=abs(p)-b+r.x;return min(max(q.x,q.y),0.0)+length(max(q,0.0))-r.x;}float sdSharpBox(vec2 p,vec2 b){vec2 q=abs(p)-b;return max(q.x,q.y);}void main(void){\n#if defined(ROUNDED_CORNERS) || defined(STROKED)\n#ifdef ROUNDED_CORNERS\nfloat d=sdRoundedBox(vPosInPixels,vHalfSizeInPixels,vCornerRadii);\n#else\nfloat d=sdSharpBox(vPosInPixels,vHalfSizeInPixels);\n#endif\nfragColor=distanceToColor(d,vFillColor,vStrokeColor,vHalfStrokeWidth);if(fragColor.a==0.0){discard;}\n#else\nfragColor=vFillColor;\n#endif\nif(uPickingEnabled){fragColor=vPickingColor;}}";
+export default shader;

package/dist/src/gl/rect.vertex.glsl.js

@@ -0,0 +1,2 @@
+const shader = "/***The vertex position wrt the rectangle specified by(x,x2,y,y2).*[0,0]=[x,y],[1,1]=[x2,y2].*The x or y component may contain fractional values if the rectangle*have been tessellated.*/in vec2 frac;uniform vec2 uMinSize;uniform float uMinOpacity;uniform vec4 uCornerRadii;out lowp vec4 vFillColor;out lowp vec4 vStrokeColor;out float vHalfStrokeWidth;out vec4 vCornerRadii;\n#if defined(ROUNDED_CORNERS) || defined(STROKED)\nout vec2 vPosInPixels;\n#endif\nout vec2 vHalfSizeInPixels;/***Clamps the minimumSize and returns an opacity that reflects the amount of clamping.*/float clampMinSize(inout float pos,float frac,float size,float minSize){if(minSize>0.0&&abs(size)<minSize){pos+=(frac-0.5)*(minSize*sign(size)-size);return abs(size)/minSize;}return 1.0;}void sort(inout float a,inout float b){if(a>b){float tmp=b;b=a;a=tmp;}}void main(void){vec2 normalizedMinSize=uMinSize/uViewportSize;float x=getScaled_x();float x2=getScaled_x2();float y=getScaled_y();float y2=getScaled_y2();sort(x,x2);sort(y,y2);float clampMargin=1.0;vec2 pos1=vec2(clamp(x,0.0-clampMargin,1.0+clampMargin),y);vec2 pos2=vec2(clamp(x2,0.0-clampMargin,1.0+clampMargin),y2);vec2 size=pos2-pos1;if(size.x<=0.0||size.y<=0.0){gl_Position=vec4(0.0,0.0,0.0,1.0);return;}vec2 pos=pos1+frac*size;size.y*=getSampleFacetHeight(pos);float opaFactor=uViewOpacity*max(uMinOpacity,clampMinSize(pos.x,frac.x,size.x,normalizedMinSize.x)*clampMinSize(pos.y,frac.y,size.y,normalizedMinSize.y));pos=applySampleFacet(pos);\n#if defined(ROUNDED_CORNERS) || defined(STROKED)\nfloat aaPadding=1.0/uDevicePixelRatio;float strokeWidth=getScaled_strokeWidth();float strokeOpacity=getScaled_strokeOpacity()*opaFactor;vec2 centeredFrac=frac-0.5;vec2 expand=centeredFrac*(strokeWidth+aaPadding)/uViewportSize;pos+=expand;vec2 sizeInPixels=size*uViewportSize;vPosInPixels=(centeredFrac+expand/size)*sizeInPixels;vHalfSizeInPixels=sizeInPixels/2.0;vCornerRadii=min(uCornerRadii,min(vHalfSizeInPixels.x,vHalfSizeInPixels.y));vHalfStrokeWidth=strokeWidth/2.0;vStrokeColor=vec4(getScaled_stroke()*strokeOpacity,strokeOpacity);\n#endif\ngl_Position=unitToNdc(pos);float fillOpacity=getScaled_fillOpacity()*opaFactor;vFillColor=vec4(getScaled_fill()*fillOpacity,fillOpacity);setupPicking();}";
+export default shader;

package/dist/src/gl/rule.fragment.glsl.js

@@ -0,0 +1,2 @@
+const shader = "const int BUTT=0;const int SQUARE=1;const int ROUND=2;uniform sampler2D uDashTexture;uniform float uDashTextureSize;uniform float uStrokeDashOffset;uniform lowp int uStrokeCap;in vec4 vColor;in float vSize;in vec2 vPosInPixels;in float vNormalLengthInPixels;out lowp vec4 fragColor;void main(void){float dpr=uDevicePixelRatio;float distanceFromEnd=-min(vPosInPixels[0],vPosInPixels[1]);float distance;if(distanceFromEnd>0.0&&uStrokeCap==ROUND){distance=length(vec2(distanceFromEnd,vNormalLengthInPixels));}else{distance=abs(vNormalLengthInPixels);}float opacity=clamp(((vSize/2.0-distance)*dpr),-0.5,0.5)+0.5;if(uDashTextureSize>0.0){float pos=(vPosInPixels[0]+uStrokeDashOffset)*dpr;float floored=floor(pos);vec2 texelPositions=(floored+vec2(0.5,1.5))/dpr/uDashTextureSize;opacity*=mix(texture(uDashTexture,vec2(texelPositions[0],0)).r,texture(uDashTexture,vec2(texelPositions[1],0)).r,clamp((pos-floored),0.0,1.0));}fragColor=vColor*opacity;if(uPickingEnabled){fragColor=vPickingColor;}}";
+export default shader;

package/dist/src/gl/rule.vertex.glsl.js

@@ -0,0 +1,2 @@
+const shader = "const int BUTT=0;const int SQUARE=1;const int ROUND=2;in float pos;in float side;uniform float uMinLength;uniform mediump float uDashTextureSize;uniform lowp int uStrokeCap;out vec4 vColor;out float vSize;out float vNormalLengthInPixels;out highp vec2 vPosInPixels;void main(void){float pixelSize=1.0/uDevicePixelRatio;float size=getScaled_size();float opacity=getScaled_opacity()*uViewOpacity;if(size<pixelSize){opacity*=size/pixelSize;size=pixelSize;}vec2 a=applySampleFacet(vec2(getScaled_x(),getScaled_y()));vec2 b=applySampleFacet(vec2(getScaled_x2(),getScaled_y2()));vec2 tangent=b-a;float offset=0.0;float relativeDiff=0.0;if(uMinLength>0.0||uStrokeCap!=BUTT){float len=length(tangent*uViewportSize);float diff=max(0.0,uMinLength-len);if(uStrokeCap!=BUTT){diff+=size;}relativeDiff=diff/len;offset=relativeDiff*(pos-0.5);}vec2 p=pos<1.0? a+tangent*(pos+offset): b+tangent*offset;float aaPadding=pixelSize;vec2 normal=normalize(vec2(-tangent.y,tangent.x)/uViewportSize);p+=normal*side*(size+aaPadding)/uViewportSize;gl_Position=unitToNdc(p);vColor=vec4(getScaled_color()*opacity,opacity);vSize=size;vNormalLengthInPixels=side*(size+aaPadding);vPosInPixels=vec2(pos,(1.0-pos))*(1.0+relativeDiff)*length(tangent*uViewportSize)-vec2(uStrokeCap!=BUTT ? size/2.0 : 0.0);setupPicking();}";
+export default shader;

package/dist/src/gl/text.fragment.glsl.js

@@ -0,0 +1,2 @@
+const shader = "uniform sampler2D uTexture;uniform bool uLogoLetter;in vec2 vTexCoord;in float vEdgeFadeOpacity;in vec4 vColor;in float vSlope;out lowp vec4 fragColor;float median(float r,float g,float b){return max(min(r,g),min(max(r,g),b));}void main(){vec3 c=texture(uTexture,vTexCoord).rgb;float sigDist=1.0-median(c.r,c.g,c.b);float slope=uLogoLetter? 0.7/length(vec2(dFdy(sigDist),dFdx(sigDist))): vSlope;float opa=clamp((sigDist-0.5)*slope+0.5,0.0,1.0);opa*=pow(clamp(vEdgeFadeOpacity,0.0,1.0),2.2);fragColor=vColor*opa;if(uPickingEnabled){fragColor=vPickingColor;}}";
+export default shader;

package/dist/src/gl/text.vertex.glsl.js

@@ -0,0 +1,2 @@
+const shader = "uniform float uSdfNumerator;uniform vec2 uD;in mediump vec2 vertexCoord;in lowp vec2 textureCoord;uniform vec4 uViewportEdgeFadeWidth;uniform vec4 uViewportEdgeFadeDistance;uniform bool uSqueeze;uniform bool uLogoLetter;in float width;uniform ivec2 uAlign;\n#ifdef x2_DEFINED\nuniform float uPaddingX;uniform bool uFlushX;\n#endif\n#ifdef y2_DEFINED\nuniform float uPaddingY;uniform bool uFlushY;\n#endif\nout vec2 vTexCoord;out vec4 vColor;out float vSlope;out float vEdgeFadeOpacity;struct RangeResult{float pos;float scale;};float minValue(vec4 v){return min(min(v.x,v.y),min(v.z,v.w));}float maxValue(vec4 v){return max(max(v.x,v.y),max(v.z,v.w));}/***All measures are in[0,1]*/RangeResult positionInsideRange(float a,float b,float width,float padding,int align,bool flush){float span=b-a;float paddedWidth=width+2.0*padding;if(a>1.0||b<0.0){return RangeResult(0.0,0.0);}float extra=max(0.0,span-paddedWidth);float pos;if(align==0){float centre=a+b;if(flush){float leftOver=max(0.0,paddedWidth-centre);centre+=min(leftOver,extra);float rightOver=max(0.0,paddedWidth+centre-2.0);centre-=min(rightOver,extra);}pos=centre/2.0;}else if(align<0){float edge=a;if(flush){float over=max(0.0,-edge);edge+=min(over,extra);}pos=edge+padding;}else{float edge=b;if(flush){float over=max(0.0,edge-1.0);edge-=min(over,extra);}pos=edge-padding;}float scale=clamp((span-padding)/paddedWidth,0.0,1.0);return RangeResult(pos,scale);}vec2 calculateRotatedDimensions(float width,mat2 rotationMatrix){vec2 a=abs(rotationMatrix*vec2(width/2.0,0.5));vec2 b=abs(rotationMatrix*vec2(width/2.0,-0.5));return vec2(max(a.x,b.x),max(a.y,b.y))*2.0;}ivec2 fixAlignForAngle(ivec2 align,float angleInDegrees){float a=mod(angleInDegrees+45.0,360.0);int x=align.x;int y=-align.y;if(a<90.0){return ivec2(x,y);}else if(a<180.0){return ivec2(y,-x);}else if(a<270.0){return ivec2(-x,y);}else{return ivec2(-y,x);}}void main(void){float opacity=getScaled_opacity()*uViewOpacity;vec2 size=vec2(getScaled_size());float x=getScaled_x();float y=getScaled_y();float scale=1.0;float angleInDegrees=getScaled_angle();float angle=-angleInDegrees*PI/180.0;float sinTheta=sin(angle);float cosTheta=cos(angle);mat2 rotationMatrix=mat2(cosTheta,sinTheta,-sinTheta,cosTheta);vec2 flushSize=calculateRotatedDimensions(width,rotationMatrix);\n#if defined(x2_DEFINED) || defined(y2_DEFINED)\nivec2 align=fixAlignForAngle(uAlign,angleInDegrees);\n#else\nivec2 align=uAlign;\n#endif\n#ifdef x2_DEFINED\nfloat x2=getScaled_x2();if(uLogoLetter){size.x=(x2-x)*uViewportSize.x;x+=(x2-x)/2.0;}else{float x2=getScaled_x2();RangeResult result=positionInsideRange(min(x,x2),max(x,x2),size.x*scale*flushSize.x/uViewportSize.x,uPaddingX/uViewportSize.x,align.x,uFlushX);x=result.pos;scale*=result.scale;}\n#endif\nvec2 pos=applySampleFacet(vec2(x,y));\n#ifdef y2_DEFINED\nfloat y2=getScaled_y2();vec2 pos2=applySampleFacet(vec2(x,y2));if(uLogoLetter){size.y=(pos2.y-pos.y)*uViewportSize.y;pos.y+=(pos2.y-pos.y)/2.0;}else{RangeResult result=positionInsideRange(min(pos.y,pos2.y),max(pos.y,pos2.y),size.y*scale*flushSize.y/uViewportSize.y,uPaddingY/uViewportSize.y,align.y,uFlushY);pos.y=result.pos;scale*=result.scale;}\n#endif\nif(scale<1.0){if(uSqueeze){vec2 scaleFadeExtent=vec2(3.0,6.0)/size;if(scale<scaleFadeExtent[0]){gl_Position=vec4(0.0);return;}size*=scale;opacity*=linearstep(scaleFadeExtent[0],scaleFadeExtent[1],scale);}else if(scale<1.0){gl_Position=vec4(0.0);return;}}vec2 charPos=rotationMatrix*(vertexCoord*size+uD);vec2 unitPos=pos+charPos/uViewportSize;gl_Position=unitToNdc(unitPos);vSlope=max(1.0,min(size.x,size.y)/uSdfNumerator);vColor=vec4(getScaled_color()*opacity,opacity);vTexCoord=textureCoord;if(maxValue(uViewportEdgeFadeDistance)>-pow(10.0,10.0)){vEdgeFadeOpacity=minValue(((vec4(1.0,1.0,0.0,0.0)+vec4(-1.0,-1.0,1.0,1.0)*unitPos.yxyx)*uViewportSize.yxyx-uViewportEdgeFadeDistance)/uViewportEdgeFadeWidth);}else{vEdgeFadeOpacity=1.0;}setupPicking();}";
+export default shader;

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

@@ -0,0 +1,118 @@
+/**
+ * @param {WebGL2RenderingContext} gl
+ * @param {WebGLShader} vertexShader
+ * @param {WebGLShader} fragmentShader
+ */
+export function createProgram(gl: WebGL2RenderingContext, vertexShader: WebGLShader, fragmentShader: WebGLShader): {
+    program: WebGLProgram;
+    getProgramErrors: () => {
+        message: string;
+        detail: string;
+    };
+};
+/**
+ * @param {WebGLRenderingContext} gl
+ * @param {Omit<import("twgl.js").TextureOptions, "src">} options
+ * @param {number[] | ArrayBufferView} src
+ * @param {WebGLTexture} [texture]
+ */
+export function createOrUpdateTexture(gl: WebGLRenderingContext, options: Omit<import("twgl.js").TextureOptions, "src">, src: number[] | ArrayBufferView, texture?: WebGLTexture): WebGLTexture;
+export default class WebGLHelper {
+    /**
+     *
+     * @param {HTMLElement} container
+     * @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]
+     */
+    constructor(container: HTMLElement, sizeSource?: () => {
+        width: number;
+        height: number;
+    }, clearColor?: string);
+    _container: HTMLElement;
+    _sizeSource: () => {
+        width: number;
+        height: number;
+    };
+    /** @type {Map<string, WebGLShader>} */
+    _shaderCache: Map<string, WebGLShader>;
+    /** @type {{ type: string, listener: function}[]} */
+    _listeners: {
+        type: string;
+        listener: Function;
+    }[];
+    /** @type {WeakMap<import("../view/scaleResolution").default, WebGLTexture>} */
+    rangeTextures: WeakMap<import("../view/scaleResolution").default, WebGLTexture>;
+    canvas: HTMLCanvasElement;
+    gl: WebGL2RenderingContext;
+    /** @type {import("twgl.js").AttachmentOptions[]} */
+    _pickingAttachmentOptions: import("twgl.js").AttachmentOptions[];
+    _pickingBufferInfo: import("twgl.js").FramebufferInfo;
+    _resizeObserver: ResizeObserver;
+    /** @type {[number, number, number, number]} */
+    _clearColor: [number, number, number, number];
+    invalidateSize(): void;
+    _logicalCanvasSize: {
+        width: number;
+        height: number;
+    };
+    _updateDpr(): void;
+    dpr: number;
+    /**
+     * Compiles and caches a shader. The shader source is used as a cache key.
+     *
+     * @param {number} type gl.VERTEX_SHADER or gl.FRAGMENT_SHADER
+     * @param {string | string[]} glsl
+     */
+    compileShader(type: number, glsl: string | string[]): WebGLShader;
+    adjustGl(): void;
+    finalize(): void;
+    /**
+     * Returns the canvas size in true display pixels
+     *
+     * @param {{ width: number, height: number }} [logicalSize]
+     */
+    getPhysicalCanvasSize(logicalSize?: {
+        width: number;
+        height: number;
+    }): {
+        width: number;
+        height: number;
+    };
+    /**
+     * Returns the canvas size in logical pixels (without devicePixelRatio correction)
+     */
+    getLogicalCanvasSize(): {
+        width: number;
+        height: number;
+    };
+    /**
+     * @param {"render"|"resize"} eventType
+     * @param {function} listener
+     */
+    addEventListener(eventType: "render" | "resize", listener: Function): void;
+    /**
+     * @param {string} eventType
+     */
+    _emit(eventType: string): void;
+    /**
+     *
+     * @param {number} x
+     * @param {number} y
+     */
+    readPickingPixel(x: number, y: number): Uint8Array;
+    clearAll(): void;
+    /**
+     * Creates textures for color schemes and discrete/discretizing ranges.
+     * N.B. Discrete range textures need domain. Thus, this cannot be called
+     * before the final domains are resolved.
+     *
+     * TODO: This may be too specific to be included in WebGLHelper. Find a better place.
+     *
+     * @param {import("../view/scaleResolution").default} resolution
+     * @param {boolean} update Update the texture if it exists already.
+     */
+    createRangeTexture(resolution: import("../view/scaleResolution").default, update?: boolean): void;
+}
+//# sourceMappingURL=webGLHelper.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"webGLHelper.d.ts","sourceRoot":"","sources":["../../../src/gl/webGLHelper.js"],"names":[],"mappings":"AA6bA;;;;GAIG;AACH,kCAJW,sBAAsB,gBACtB,WAAW,kBACX,WAAW;;;;;;EA8CrB;AAED;;;;;GAKG;AACH,0CALW,qBAAqB,WACrB,KAAK,OAAO,SAAS,EAAE,cAAc,EAAE,KAAK,CAAC,OAC7C,MAAM,EAAE,GAAG,eAAe,YAC1B,YAAY,gBAYtB;AAleD;IACI;;;;;;;OAOG;IACH,uBANW,WAAW,eACX,MAAM;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAC,eAGrC,MAAM,EA2FhB;IAxFG,wBAA2B;IAC3B,mBAPa;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAC,CAOf;IAE7B,uCAAuC;IACvC,cADW,IAAI,MAAM,EAAE,WAAW,CAAC,CACN;IAE7B,oDAAoD;IACpD;cADmB,MAAM;;QACL;IAEpB,+EAA+E;IAC/E,eADW,QAAQ,OAAO,yBAAyB,EAAE,OAAO,EAAE,YAAY,CAAC,CACzC;IAuClC,0BAAoB;IACpB,2BAAY;IAGZ,oDAAoD;IACpD,2BADW,OAAO,SAAS,EAAE,iBAAiB,EAAE,CAQ/C;IACD,sDAGC;IAMD,gCAGE;IAQF,+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,iBAGC;IAED;;;;OAIG;IACH,oCAFW;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE;;;MAQ3C;IAED;;OAEG;IACH;;;MA0BC;IAED;;;OAGG;IACH,4BAHW,QAAQ,GAAC,QAAQ,4BAK3B;IAED;;OAEG;IACH,iBAFW,MAAM,QAQhB;IAED;;;;OAIG;IACH,oBAHW,MAAM,KACN,MAAM,cAwBhB;IAED,iBAOC;IAED;;;;;;;;;OASG;IACH,+BAHW,OAAO,yBAAyB,EAAE,OAAO,WACzC,OAAO,QA4GjB;CACJ"}

package/dist/src/gl/webGLHelper.js

@@ -0,0 +1,513 @@
+import {
+    addExtensionsToContext,
+    createFramebufferInfo,
+    createTexture,
+    getContext,
+    isWebGL2,
+    resizeFramebufferInfo,
+    setTextureFromArray,
+} from "twgl.js";
+import { isArray, isString } from "vega-util";
+
+import {
+    isContinuous,
+    isDiscrete,
+    isDiscretizing,
+    isInterpolating,
+} from "vega-scale";
+import {
+    createDiscreteColorTexture,
+    createDiscreteTexture,
+    createInterpolatedColorTexture,
+    createSchemeTexture,
+} from "../scale/colorUtils";
+import {
+    getDiscreteRangeMapper,
+    isColorChannel,
+    isDiscreteChannel,
+} from "../encoder/encoder";
+import { color } from "d3-color";
+
+export default class WebGLHelper {
+    /**
+     *
+     * @param {HTMLElement} container
+     * @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]
+     */
+    constructor(container, sizeSource, clearColor) {
+        this._container = container;
+        this._sizeSource = sizeSource;
+
+        /** @type {Map<string, WebGLShader>} */
+        this._shaderCache = new Map();
+
+        /** @type {{ type: string, listener: function}[]} */
+        this._listeners = [];
+
+        /** @type {WeakMap<import("../view/scaleResolution").default, WebGLTexture>} */
+        this.rangeTextures = new WeakMap();
+
+        // --------------------------------------------------------
+
+        const canvas = document.createElement("canvas");
+
+        container.appendChild(canvas);
+
+        // TODO: Consider using high-performance powerPreference:
+        // https://www.khronos.org/webgl/public-mailing-list/public_webgl/1912/msg00001.php
+
+        const gl = /** @type {WebGL2RenderingContext} */ (
+            getContext(canvas, {
+                antialias: true,
+                // Disable depth writes. We don't use depth testing.
+                depth: false,
+                premultipliedAlpha: true,
+            })
+        );
+
+        if (!gl) {
+            throw new Error(
+                "Unable to initialize WebGL. Your browser or machine may not support it."
+            );
+        }
+
+        if (!isWebGL2(gl)) {
+            throw new Error(
+                "Your web browser does not support WebGL 2.0. Chrome, Firefox, and Safari Tech Preview should work."
+            );
+        }
+
+        addExtensionsToContext(gl);
+
+        // TODO: view background: https://vega.github.io/vega-lite/docs/spec.html#view-background
+
+        // Always use pre-multiplied alpha
+        gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+
+        this.canvas = canvas;
+        this.gl = gl;
+
+        // Setup framebuffer for piccking
+        /** @type {import("twgl.js").AttachmentOptions[]} */
+        this._pickingAttachmentOptions = [
+            {
+                format: gl.RGBA,
+                type: gl.UNSIGNED_BYTE,
+                minMag: gl.LINEAR,
+                wrap: gl.CLAMP_TO_EDGE,
+            },
+        ];
+        this._pickingBufferInfo = createFramebufferInfo(
+            gl,
+            this._pickingAttachmentOptions
+        );
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+
+        this.adjustGl();
+
+        // TODO: Size should be observed only if the content is not absolutely sized
+        this._resizeObserver = new ResizeObserver((entries) => {
+            this.invalidateSize();
+            this._emit("resize");
+        });
+        this._resizeObserver.observe(this._container);
+
+        // TODO: Observe devicePixelRatio
+        // https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio#Monitoring_screen_resolution_or_zoom_level_changes
+
+        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.
+     *
+     * @param {number} type gl.VERTEX_SHADER or gl.FRAGMENT_SHADER
+     * @param {string | string[]} glsl
+     */
+    compileShader(type, glsl) {
+        const VERSION = "#version 300 es";
+        const PRECISION = "precision mediump float;";
+
+        if (isArray(glsl)) {
+            glsl = glsl.join("\n\n");
+        }
+
+        const gl = this.gl;
+        const cacheKey = glsl.replaceAll(/ {2,}|^\s*\/\/.*$/gm, "");
+
+        let shader = this._shaderCache.get(cacheKey);
+        if (!shader) {
+            const stitchedSource = [VERSION, PRECISION, glsl].join("\n\n");
+
+            shader = gl.createShader(type);
+            gl.shaderSource(shader, stitchedSource);
+            gl.compileShader(shader);
+
+            // Don't check errors here. Only check them if linking fails.
+
+            this._shaderCache.set(cacheKey, shader);
+        }
+
+        return shader;
+    }
+
+    adjustGl() {
+        const logicalSize = this.getLogicalCanvasSize();
+        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;
+
+        resizeFramebufferInfo(
+            this.gl,
+            this._pickingBufferInfo,
+            this._pickingAttachmentOptions
+        );
+    }
+
+    finalize() {
+        this._resizeObserver.unobserve(this._container);
+        this.canvas.remove();
+    }
+
+    /**
+     * Returns the canvas size in true display pixels
+     *
+     * @param {{ width: number, height: number }} [logicalSize]
+     */
+    getPhysicalCanvasSize(logicalSize) {
+        logicalSize = logicalSize || this.getLogicalCanvasSize();
+        return {
+            width: logicalSize.width * this.dpr,
+            height: logicalSize.height * this.dpr,
+        };
+    }
+
+    /**
+     * Returns the canvas size in logical pixels (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?.() ?? {
+            width: undefined,
+            height: undefined,
+        };
+
+        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;
+    }
+
+    /**
+     * @param {"render"|"resize"} eventType
+     * @param {function} listener
+     */
+    addEventListener(eventType, listener) {
+        this._listeners.push({ type: eventType, listener });
+    }
+
+    /**
+     * @param {string} eventType
+     */
+    _emit(eventType) {
+        for (const entry of this._listeners) {
+            if (entry.type === eventType) {
+                entry.listener();
+            }
+        }
+    }
+
+    /**
+     *
+     * @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
+     * before the final domains are resolved.
+     *
+     * TODO: This may be too specific to be included in WebGLHelper. Find a better place.
+     *
+     * @param {import("../view/scaleResolution").default} resolution
+     * @param {boolean} update Update the texture if it exists already.
+     */
+    createRangeTexture(resolution, update = false) {
+        const existingTexture = this.rangeTextures.get(resolution);
+        if (!update && existingTexture) {
+            return;
+        }
+
+        /**
+         * TODO: The count configuration logic etc should be combined
+         * with scale.js that configures d3 scales using vega specs
+         * @param {number} count
+         * @param {any} scale
+         * @returns {number}
+         */
+        function fixCount(count, scale) {
+            if (isDiscrete(scale.type)) {
+                return scale.domain().length;
+            } else if (scale.type == "threshold") {
+                return scale.domain().length + 1;
+            } else if (scale.type == "quantize") {
+                return count ?? 4;
+            } else if (scale.type == "quantile") {
+                return count ?? 4;
+            }
+            return count;
+        }
+
+        const channel = resolution.channel;
+
+        if (isColorChannel(channel)) {
+            const props = resolution.getScaleProps();
+
+            const scale = resolution.getScale();
+            const range = /** @type {any[]} */ (scale.range());
+
+            /** @type {WebGLTexture} */
+            let texture;
+
+            if (props.scheme) {
+                if (scale.type == "threshold" && range) {
+                    // Scale initialization may have configured the range. Let's use it.
+                    texture = createDiscreteColorTexture(
+                        range,
+                        this.gl,
+                        scale.domain().length,
+                        existingTexture
+                    );
+                } else {
+                    let count = isString(props.scheme)
+                        ? undefined
+                        : props.scheme.count;
+
+                    count = fixCount(count, scale);
+
+                    texture = createSchemeTexture(
+                        props.scheme,
+                        this.gl,
+                        count,
+                        existingTexture
+                    );
+                }
+            } else if (
+                // Interpolating
+                isInterpolating(scale.type) ||
+                // Or piecewise
+                (isContinuous(scale.type) && range.length > 2)
+            ) {
+                texture = createInterpolatedColorTexture(
+                    range,
+                    props.interpolate,
+                    this.gl,
+                    existingTexture
+                );
+            } else {
+                texture = createDiscreteColorTexture(
+                    range,
+                    this.gl,
+                    scale.domain().length,
+                    existingTexture
+                );
+            }
+
+            this.rangeTextures.set(resolution, texture);
+        } else {
+            const scale = resolution.getScale();
+
+            if (scale.type === "ordinal" || isDiscretizing(scale.type)) {
+                /** @type {function(any):number} Handle "shape" etc */
+                const mapper = isDiscreteChannel(channel)
+                    ? getDiscreteRangeMapper(channel)
+                    : (x) => x;
+
+                const range = /** @type {any[]} */ (
+                    resolution.getScale().range()
+                );
+
+                this.rangeTextures.set(
+                    resolution,
+                    createDiscreteTexture(
+                        range.map(mapper),
+                        this.gl,
+                        scale.domain().length,
+                        existingTexture
+                    )
+                );
+            }
+        }
+    }
+}
+
+/**
+ * Copy-pasted from twgl.js:
+ * https://github.com/greggman/twgl.js/blob/master/src/programs.js
+ * Copyright 2019 Gregg Tavares, MIT license
+ *
+ * @param {string} src
+ */
+function addLineNumbersWithError(src, log = "", lineOffset = 0) {
+    const errorRE = /ERROR:\s*\d+:(\d+)/gi;
+    // Note: Error message formats are not defined by any spec so this may or may not work.
+    const matches = [...log.matchAll(errorRE)];
+    const lineNoToErrorMap = new Map(
+        matches.map((m, ndx) => {
+            const lineNo = parseInt(m[1]);
+            const next = matches[ndx + 1];
+            const end = next ? next.index : log.length;
+            const msg = log.substring(m.index, end);
+            return [lineNo - 1, msg];
+        })
+    );
+    return src
+        .split("\n")
+        .map((line, lineNo) => {
+            const err = lineNoToErrorMap.get(lineNo);
+            return `${lineNo + 1 + lineOffset}: ${line}${
+                err ? `\n\n^^^ ${err}` : ""
+            }`;
+        })
+        .join("\n");
+}
+
+/**
+ * @param {WebGL2RenderingContext} gl
+ * @param {WebGLShader} vertexShader
+ * @param {WebGLShader} fragmentShader
+ */
+export function createProgram(gl, vertexShader, fragmentShader) {
+    const program = gl.createProgram();
+    gl.attachShader(program, vertexShader);
+    gl.attachShader(program, fragmentShader);
+    gl.linkProgram(program);
+
+    function getProgramErrors() {
+        /** @type {string} */
+        let errorMsg;
+        /** @type {string} */
+        let errorDetail;
+
+        const linked = gl.getProgramParameter(program, gl.LINK_STATUS);
+        if (!linked) {
+            errorMsg = gl.getProgramInfoLog(program);
+
+            for (const shader of [vertexShader, fragmentShader]) {
+                const compiled = gl.getShaderParameter(
+                    shader,
+                    gl.COMPILE_STATUS
+                );
+                if (!compiled) {
+                    errorMsg = gl.getShaderInfoLog(shader);
+                    errorDetail =
+                        addLineNumbersWithError(
+                            gl.getShaderSource(shader),
+                            errorMsg,
+                            0
+                        ) + `\nError compiling: ${errorMsg}`;
+                    gl.deleteShader(shader);
+                }
+            }
+            gl.deleteProgram(program);
+        }
+
+        if (errorMsg) {
+            return { message: errorMsg, detail: errorDetail };
+        }
+    }
+
+    return {
+        program,
+        getProgramErrors,
+    };
+}
+
+/**
+ * @param {WebGLRenderingContext} gl
+ * @param {Omit<import("twgl.js").TextureOptions, "src">} options
+ * @param {number[] | ArrayBufferView} src
+ * @param {WebGLTexture} [texture]
+ */
+export function createOrUpdateTexture(gl, options, src, texture) {
+    if (texture) {
+        setTextureFromArray(gl, texture, src, options);
+    } else {
+        texture = createTexture(gl, {
+            ...options,
+            src,
+        });
+    }
+    return texture;
+}

package/dist/src/img/bowtie.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5"><path d="M4.7 21.2s.4 2.3 1.3 3.6C7 26 9.8 28 9.8 28s3.4-2.6 6.4-8.5c0 0 1 .1 1.9-.4.9-.6.8-.4 1-1.2 0 0 2.9.5 6.6 0 2.1-.3 4.3-1 6.2-2.5 0 0-1.1-1.7-2.5-5.1-.5-1.3-2-1.8-4.6-4.6l-8.2 8.6-11.9 6.9z" fill-opacity=".1"/><path d="M12.7 14.8s-4-1.8-12 2.7c0 0 1 3.7 2.5 5.3 1.4 1.5 2.3 3.6 4.6 4.6 0 0 4.7-3 6.9-9.2l3-2s4.7 2.8 12.6-1.6c0 0-.6-3.3-3-6-2.6-3-3.8-4.7-3.8-4.7s-4.1 2.3-7.5 9.3l-3.3 1.6z" fill="#7fbbdd"/><path d="M12.4 15.5c-.7-.5-2.4-.8-4.4-.4-2 .4-4 1.3-4.8 1.8-.5.3-1.2 1-1.2 1.4 0 .7.3 1.8.8 2.4.3.3.7.5 1.4.6.8 0 2.5-1.4 3.5-2 1-.6 1.6-.8 2.7-1.2l-2.9 2.4c-1.3 1.2-2.2 1.5-2.4 2.3 0 .5 0 1.4.5 1.8.4.5.6.8 1.6.8.6 0 1 0 2.6-1.5.9-.9 2.3-3 2.7-3.7.6-1.1 1-2.2.7-3-.2-1-.4-1.4-.8-1.7zM17.4 14.2c-.3-.5-.9-1.2-.2-2.5l1.9-3c.5-.8 2-2.3 2.6-2.6.6-.4 1.5-.6 2-.2.6.4 1 1 1.3 1.5.4.6.7 1.3.2 2-.7 1-1.6.9-2.8 1.7-1.2.8-1.9 1.2-2.5 1.9l3.8-1.8c1.3-.6 2.7-1.1 3.4-.7.8.5.8.7 1 1.4.3 1-.2 1.9-.8 2.4-.5.6-1.5.9-2.6 1.2-1.4.4-4.5 1-5.8.5-1.3-.5-1.3-1.4-1.5-1.8z" fill="#fff"/><path d="M12.7 14.8s-4-1.8-12 2.7c0 0 1 3.7 2.5 5.3 1.4 1.5 2.3 3.6 4.6 4.6 0 0 4.7-3 6.9-9.2l3-2s4.7 2.8 12.6-1.6c0 0-.6-3.3-3-6-2.6-3-3.8-4.7-3.8-4.7s-4.1 2.3-7.5 9.3l-3.3 1.6z" fill="none" stroke="#000" stroke-width=".5"/><path d="M12.4 14.9s2.1-2 3-2c1.1 0 2.3 2.7 2.3 3.5 0 .8-2.1 2.4-3.1 2.3 0 0 0-1.2-.7-2.6-.8-1.3-1.5-1.2-1.5-1.2z" fill="#7fbbdd"/><path d="M13.8 15.3c.9.8.6 2 1.4 1.8 1-.2 1.4-.8 1.3-1.5 0-.7 0-.8-.4-1.6-.3-.7-1-1.1-2-.5-.7.5-1.4 1.3-1.4 1.3s.2-.3 1.1.5z" fill="#fff"/><path d="M12.4 14.9s2.1-2 3-2c1.1 0 2.3 2.7 2.3 3.5 0 .8-2.1 2.4-3.1 2.3 0 0 0-1.2-.7-2.6-.8-1.3-1.5-1.2-1.5-1.2z" fill="none" stroke="#000" stroke-width=".5"/></svg>