@genome-spy/core 0.62.1 → 0.63.0

package/dist/src/marks/mark.js

@@ -11,8 +11,8 @@ import {
 } from "twgl.js";
 import { isContinuous, isDiscrete } from "vega-scale";
 import createEncoders, {
+    findChannelDefWithScale,
     getSecondaryChannel,
-    isChannelDefWithScale,
     isChannelWithScale,
     isDatumDef,
     isExprDef,
@@ -795,9 +795,10 @@ export default class Mark {
             // Generate scale if needed -------------------------------
 
             if (scale) {
+                const channelDefWithScale = findChannelDefWithScale(channelDef);
                 const resolutionChannel =
-                    (isChannelDefWithScale(channelDef) &&
-                        channelDef.resolutionChannel) ||
+                    (channelDefWithScale &&
+                        channelDefWithScale.resolutionChannel) ||
                     channel;
 
                 // TODO: The event listener should be in the scale, not the resolution
@@ -1385,19 +1386,18 @@ export default class Mark {
     /**
      * Sets viewport, clipping, and uniforms related to scaling and translation
      *
+     * @param {{width: number, height: number}} canvasSize Size of the canvas in logical pixels
+     * @param {number} dpr Device pixel ratio
      * @param {import("../view/layout/rectangle.js").default} coords
      * @param {import("../view/layout/rectangle.js").default} [clipRect]
      * @returns {boolean} true if the viewport is renderable (size > 0)
      */
-    setViewport(coords, clipRect) {
+    setViewport(canvasSize, dpr, coords, clipRect) {
         coords = coords.flatten();
 
-        const dpr = this.unitView.context.devicePixelRatio;
         const gl = this.gl;
         const props = this.properties;
 
-        const logicalSize = this.glHelper.getLogicalCanvasSize();
-
         // Translate by half a pixel to place vertical / horizontal
         // rules inside pixels, not between pixels.
         const pixelOffset = 0.5;
@@ -1441,7 +1441,7 @@ export default class Mark {
 
             const physicalGlCoords = [
                 clippedCoords.x,
-                logicalSize.height - clippedCoords.y2,
+                canvasSize.height - clippedCoords.y2,
                 clippedCoords.width,
                 clippedCoords.height,
             ].map((x) => x * dpr);
@@ -1475,24 +1475,19 @@ export default class Mark {
             }
 
             // Viewport comprises the full canvas
-            gl.viewport(
-                0,
-                0,
-                logicalSize.width * dpr,
-                logicalSize.height * dpr
-            );
+            gl.viewport(0, 0, canvasSize.width * dpr, canvasSize.height * dpr);
             gl.disable(gl.SCISSOR_TEST);
 
             // Offset and scale all drawing to the view rectangle
             uniforms = {
                 uViewOffset: [
-                    (coords.x + xOffset) / logicalSize.width,
-                    (logicalSize.height - coords.y - yOffset - coords.height) /
-                        logicalSize.height,
+                    (coords.x + xOffset) / canvasSize.width,
+                    (canvasSize.height - coords.y - yOffset - coords.height) /
+                        canvasSize.height,
                 ],
                 uViewScale: [
-                    coords.width / logicalSize.width,
-                    coords.height / logicalSize.height,
+                    coords.width / canvasSize.width,
+                    coords.height / canvasSize.height,
                 ],
             };
         }

package/dist/src/marks/markUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"markUtils.d.ts","sourceRoot":"","sources":["../../../src/marks/markUtils.js"],"names":[],"mappings":"AAOA;;;;GAIG;AAEH;;;GAGG;AACH,wCAHW,QAAQ,WACR,OAAO,oBAAoB,EAAE,wBAAwB,QAoD/D;AAkBD;;;GAGG;AACH,oCAHW,OAAO,oBAAoB,EAAE,QAAQ,UACrC,OAAO,QAqBjB;AAED;;;GAGG;AACH,kCAHW,OAAO,oBAAoB,EAAE,QAAQ,UACrC,OAAO,QAsBjB;AAED;;;GAGG;AACH,oCAHW,OAAO,iBAAiB,EAAE,SAAS,GACjC,KAAK,IAAI,OAAO,iBAAiB,EAAE,UAAU,CAIzD;AAED;;;GAGG;AACH,mCAHW,OAAO,iBAAiB,EAAE,SAAS,GACjC,KAAK,IAAI,OAAO,iBAAiB,EAAE,SAAS,CAIxD;AAED;;;GAGG;AACH,mCAHW,OAAO,iBAAiB,EAAE,SAAS,GACjC,KAAK,IAAI,OAAO,iBAAiB,EAAE,SAAS,CAIxD;AAED;;;GAGG;AACH,mCAHW,OAAO,iBAAiB,EAAE,SAAS,GACjC,KAAK,IAAI,OAAO,iBAAiB,EAAE,SAAS,CAIxD;AAED;;;GAGG;AACH,mCAHW,OAAO,iBAAiB,EAAE,SAAS,GACjC,KAAK,IAAI,OAAO,iBAAiB,EAAE,SAAS,CAIxD;uBArKY,OAAO,oBAAoB,EAAE,QAAQ;sBACrC,OAAO,oBAAoB,EAAE,OAAO"}
+{"version":3,"file":"markUtils.d.ts","sourceRoot":"","sources":["../../../src/marks/markUtils.js"],"names":[],"mappings":"AAOA;;;;GAIG;AAEH;;;GAGG;AACH,wCAHW,QAAQ,WACR,OAAO,oBAAoB,EAAE,wBAAwB,QAoD/D;AAcD;;;GAGG;AACH,oCAHW,OAAO,oBAAoB,EAAE,QAAQ,UACrC,OAAO,QAqBjB;AAED;;;GAGG;AACH,kCAHW,OAAO,oBAAoB,EAAE,QAAQ,UACrC,OAAO,QAsBjB;AAED;;;GAGG;AACH,oCAHW,OAAO,iBAAiB,EAAE,SAAS,GACjC,KAAK,IAAI,OAAO,iBAAiB,EAAE,UAAU,CAIzD;AAED;;;GAGG;AACH,mCAHW,OAAO,iBAAiB,EAAE,SAAS,GACjC,KAAK,IAAI,OAAO,iBAAiB,EAAE,SAAS,CAIxD;AAED;;;GAGG;AACH,mCAHW,OAAO,iBAAiB,EAAE,SAAS,GACjC,KAAK,IAAI,OAAO,iBAAiB,EAAE,SAAS,CAIxD;AAED;;;GAGG;AACH,mCAHW,OAAO,iBAAiB,EAAE,SAAS,GACjC,KAAK,IAAI,OAAO,iBAAiB,EAAE,SAAS,CAIxD;AAED;;;GAGG;AACH,mCAHW,OAAO,iBAAiB,EAAE,SAAS,GACjC,KAAK,IAAI,OAAO,iBAAiB,EAAE,SAAS,CAIxD;uBAjKY,OAAO,oBAAoB,EAAE,QAAQ;sBACrC,OAAO,oBAAoB,EAAE,OAAO"}

package/dist/src/marks/markUtils.js

@@ -2,7 +2,7 @@ import {
     isValueDef,
     getSecondaryChannel,
     isChannelDefWithScale,
-    isValueDefWithCondition,
+    findChannelDefWithScale,
 } from "../encoder/encoder.js";
 
 /**
@@ -73,13 +73,9 @@ export function fixPositional(encoding, channel) {
  * @param {import("../spec/channel.js").ChannelWithScale} resolutionChannel
  */
 function setResolutionChannel(channelDef, resolutionChannel) {
-    if (isValueDefWithCondition(channelDef)) {
-        const condition = channelDef.condition;
-        if (!Array.isArray(condition) && isChannelDefWithScale(condition)) {
-            condition.resolutionChannel = resolutionChannel;
-        }
-    } else if (isChannelDefWithScale(channelDef)) {
-        channelDef.resolutionChannel = resolutionChannel;
+    const def = findChannelDefWithScale(channelDef);
+    if (def) {
+        def.resolutionChannel = resolutionChannel;
     }
 }
 

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

@@ -1,2 +1,2 @@
-const shader = "out lowp vec4 vFillColor;out lowp vec4 vStrokeColor;out float vHalfStrokeWidth;out vec4 vCornerRadii;\n#if defined(ROUNDED_CORNERS) || defined(STROKED) || defined(SHADOW)\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;}}/***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.*/vec2 getVertexPos(){int index=gl_VertexID % 6;return vec2(index==0||index==1||index==3 ? 0.0 : 1.0,index==0||index==1||index==2 ? 0.0 : 1.0);}void main(void){vec2 frac=getVertexPos();vec2 normalizedMinSize=vec2(uMinWidth,uMinHeight)/uViewportSize;vec4 cornerRadii=vec4(uCornerRadiusTopRight,uCornerRadiusBottomRight,uCornerRadiusTopLeft,uCornerRadiusBottomLeft);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) || defined(SHADOW)\nfloat aaPadding=1.0/uDevicePixelRatio;float shadowPadding=uShadowBlur+max(abs(uShadowOffsetX),abs(uShadowOffsetY));float strokeWidth=getScaled_strokeWidth();float strokeOpacity=getScaled_strokeOpacity()*opaFactor;vec2 centeredFrac=frac-0.5;vec2 expand=centeredFrac*(strokeWidth+aaPadding+shadowPadding*2.0)/uViewportSize;pos+=expand;vec2 sizeInPixels=size*uViewportSize;vPosInPixels=(centeredFrac+expand/size)*sizeInPixels;vHalfSizeInPixels=sizeInPixels/2.0;vCornerRadii=min(cornerRadii,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();}";
+const shader = "out lowp vec4 vFillColor;out lowp vec4 vStrokeColor;out float vHalfStrokeWidth;out vec4 vCornerRadii;\n#if defined(ROUNDED_CORNERS) || defined(STROKED) || defined(SHADOW)\nout vec2 vPosInPixels;\n#endif\nout vec2 vHalfSizeInPixels;/***Adjusts the vertex position to ensure that the rectangle is at least `minSpan`*wide or high. Returns a value that reflects the amount of clamping and can be*used to adjust the opacity of the rectangle.**pos: vertex position*frac: vertex position within the rectangle,[0,1]*size: width or height of the rectangle*minSize: minimum width or height of the rectangle*/float clampMinSize(inout float pos,float frac,float size,float minSize){if(minSize>0.0&&size<minSize){pos+=(frac-0.5)*(minSize-size);return size/minSize;}return 1.0;}void sort(inout float a,inout float b){if(a>b){float tmp=b;b=a;a=tmp;}}/***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.*/vec2 getVertexPos(){int index=gl_VertexID % 6;return vec2(index==0||index==1||index==3 ? 0.0 : 1.0,index==0||index==1||index==2 ? 0.0 : 1.0);}void main(void){vec2 frac=getVertexPos();vec2 normalizedMinSize=vec2(uMinWidth,uMinHeight)/uViewportSize;vec4 cornerRadii=vec4(uCornerRadiusTopRight,uCornerRadiusBottomRight,uCornerRadiusTopLeft,uCornerRadiusBottomLeft);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));size=max(size,normalizedMinSize);pos=applySampleFacet(pos);\n#if defined(ROUNDED_CORNERS) || defined(STROKED) || defined(SHADOW)\nfloat aaPadding=1.0/uDevicePixelRatio;float shadowPadding=uShadowBlur+max(abs(uShadowOffsetX),abs(uShadowOffsetY));float strokeWidth=getScaled_strokeWidth();float strokeOpacity=getScaled_strokeOpacity()*opaFactor;vec2 centeredFrac=frac-0.5;vec2 expand=centeredFrac*(strokeWidth+aaPadding+shadowPadding*2.0)/uViewportSize;pos+=expand;vec2 sizeInPixels=size*uViewportSize;vPosInPixels=(centeredFrac+expand/size)*sizeInPixels;vHalfSizeInPixels=sizeInPixels/2.0;vCornerRadii=min(cornerRadii,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/marks/text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/marks/text.js"],"names":[],"mappings":"AAgCA;;;;;;;;;GASG;AACH;IACI;;OAEG;IACH;;OAEG;IACH,sBAFW,OAAO,qBAAqB,EAAE,OAAO,EA8D/C;IAbG,oDAMmD;CA+M1D;iBAxSgB,WAAW"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/marks/text.js"],"names":[],"mappings":"AAgCA;;;;;;;;;GASG;AACH;IACI;;OAEG;IACH;;OAEG;IACH,sBAFW,OAAO,qBAAqB,EAAE,OAAO,EA8D/C;IAbG,oDAMmD;CAuM1D;iBAhSgB,WAAW"}

package/dist/src/marks/text.js

@@ -171,21 +171,11 @@ export default class TextMark extends Mark {
 
         const props = this.properties;
 
-        this.registerMarkUniformValue(
-            "uSdfNumerator",
-            /** @type {import("../spec/parameter.js").ExprRef | number} */
-            ({ expr: "devicePixelRatio" }),
-            (dpr) => {
-                let q = 0.35; // TODO: Ensure that this makes sense. Now chosen by trial & error
-                if (this.properties.logoLetters) {
-                    // Adjust to make stretched letters a bit less blurry
-                    // A proper solution would probably be to compute gradients in the fragment shader
-                    // to find a suitable divisor.
-                    q /= 2;
-                }
-                return this.font.metrics.common.base / (dpr / q);
-            }
-        );
+        // 0.35 is a magic number found by trial and error
+        const sdfNumerator =
+            this.font.metrics.common.base *
+            0.35 *
+            (this.properties.logoLetters ? 0.5 : 1);
 
         this.registerMarkUniformValue("uPaddingX", props.paddingX);
         this.registerMarkUniformValue("uPaddingY", props.paddingY);
@@ -200,6 +190,8 @@ export default class TextMark extends Mark {
 
             uLogoLetter: !!props.logoLetters,
 
+            uSdfNumerator: sdfNumerator,
+
             uViewportEdgeFadeWidth: [
                 props.viewportEdgeFadeWidthTop,
                 props.viewportEdgeFadeWidthRight,

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

@@ -1,2 +1,2 @@
-const shader = "in mediump vec2 vertexCoord;in lowp vec2 textureCoord;in float width;out vec2 vTexCoord;out vec4 vColor;out float vSlope;out float vEdgeFadeOpacity;out float vGamma;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);vec3 color=getScaled_color();vColor=vec4(color*opacity,opacity);vGamma=getGammaForColor(color);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();}";
+const shader = "in mediump vec2 vertexCoord;in lowp vec2 textureCoord;in float width;out vec2 vTexCoord;out vec4 vColor;out float vSlope;out float vEdgeFadeOpacity;out float vGamma;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*uDevicePixelRatio);vec3 color=getScaled_color();vColor=vec4(color*opacity,opacity);vGamma=getGammaForColor(color);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/types/embedApi.d.ts

@@ -77,4 +77,20 @@ export interface EmbedResult {
      * @param data new data. If left undefined, the data is retrieved from a provider.
      */
     updateNamedData: (name: string, data?: any[]) => void;
+
+    /**
+     * Returns a PNG data URL of the current canvas.
+     *
+     * @param {number} [logicalWidth] Custom width, defaults to canvas width
+     * @param {number} [logicalHeight] Custom height, defaults to canvas height
+     * @param {number} [devicePixelRatio] Defaults to window.devicePixelRatio
+     * @param {string} [clearColor] Background color. A CSS color, null for transparent
+     * @returns A PNG data URL
+     */
+    exportCanvas: (
+        logicalWidth: number,
+        logicalHeight: number,
+        devicePixelRatio: number,
+        clearColor: string
+    ) => string;
 }

package/dist/src/types/viewContext.d.ts

@@ -28,8 +28,6 @@ export default interface ViewContext {
     genomeStore?: GenomeStore;
     fontManager: BmFontManager;
 
-    devicePixelRatio: number;
-
     requestLayoutReflow: () => void;
 
     updateTooltip: <T>(

package/dist/src/view/gridView/gridView.js

@@ -449,7 +449,7 @@ export default class GridView extends ContainerView {
         context.pushView(this, coords);
 
         const flexOpts = {
-            devicePixelRatio: this.context.devicePixelRatio,
+            devicePixelRatio: context.getDevicePixelRatio(),
         };
         const columnFlexCoords = mapToPixelCoords(
             this.#makeFlexItems("column"),

package/dist/src/view/renderingContext/bufferedViewRenderingContext.d.ts

@@ -1,30 +1,45 @@
+/**
+ * @typedef {object} BufferedViewRenderingOptions
+ * @prop {import("../../gl/webGLHelper.js").default} webGLHelper
+ * @prop {{width: number, height: number}} canvasSize Size of the canvas in logical pixels.
+ * @prop {number} devicePixelRatio
+ * @prop {import("twgl.js").FramebufferInfo} [framebufferInfo]
+ * @prop {string} [clearColor] Clear color for the  WebGL context,
+ *      defaults to transparent black.
+ */
+/**
+ * View rendering context that buffers the actual WebGL rendering for
+ * efficient animation.
+ */
 export default class BufferedViewRenderingContext extends ViewRenderingContext {
     /**
      * @param {import("../../types/rendering.js").GlobalRenderingOptions} globalOptions
-     * @param {import("../../gl/webGLHelper.js").default} webGLHelper
+     * @param {BufferedViewRenderingOptions} bufferedOptions
      */
-    constructor(globalOptions: import("../../types/rendering.js").GlobalRenderingOptions, webGLHelper: import("../../gl/webGLHelper.js").default);
-    webGLHelper: import("../../gl/webGLHelper.js").default;
-    /**
-     * @type {import("../../types/rendering.js").BufferedRenderingRequest[]}
-     */
-    buffer: import("../../types/rendering.js").BufferedRenderingRequest[];
-    /** @type {import("../layout/rectangle.js").default} */
-    coords: import("../layout/rectangle.js").default;
-    /** @type {Set<import("../view.js").default>} */
-    views: Set<import("../view.js").default>;
+    constructor(globalOptions: import("../../types/rendering.js").GlobalRenderingOptions, bufferedOptions: BufferedViewRenderingOptions);
     /**
      * Renders marks in an optimized order, minimizing the number of WebGL state
      * changes.
      */
     render(): void;
-    _buildBatch(): void;
+    #private;
+}
+export type BufferedViewRenderingOptions = {
+    webGLHelper: import("../../gl/webGLHelper.js").default;
     /**
-     * Store the operations as a sequence of commands for cheap subsequent rendering.
-     *
-     * @type {(function():void)[]}
+     * Size of the canvas in logical pixels.
      */
-    batch: (() => void)[];
-}
+    canvasSize: {
+        width: number;
+        height: number;
+    };
+    devicePixelRatio: number;
+    framebufferInfo?: import("twgl.js").FramebufferInfo;
+    /**
+     * Clear color for the  WebGL context,
+     * defaults to transparent black.
+     */
+    clearColor?: string;
+};
 import ViewRenderingContext from "./viewRenderingContext.js";
 //# sourceMappingURL=bufferedViewRenderingContext.d.ts.map

package/dist/src/view/renderingContext/bufferedViewRenderingContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bufferedViewRenderingContext.d.ts","sourceRoot":"","sources":["../../../../src/view/renderingContext/bufferedViewRenderingContext.js"],"names":[],"mappings":"AAIA;IACI;;;OAGG;IACH,2BAHW,OAAO,0BAA0B,EAAE,sBAAsB,eACzD,OAAO,yBAAyB,EAAE,OAAO,EAiBnD;IAZG,uDAA8B;IAE9B;;OAEG;IACH,QAFU,OAAO,0BAA0B,EAAE,wBAAwB,EAAE,CAEvD;IAEhB,uDAAuD;IACvD,QADW,OAAO,wBAAwB,EAAE,OAAO,CAC5B;IAEvB,gDAAgD;IAChD,OADW,GAAG,CAAC,OAAO,YAAY,EAAE,OAAO,CAAC,CACtB;IAsC1B;;;OAGG;IACH,eA+BC;IAED,oBA2EC;IA1EG;;;;OAIG;IACH,OAFU,CAAC,MAAW,IAAI,CAAC,EAAE,CAEd;CAsEtB;iCA5KgC,2BAA2B"}
+{"version":3,"file":"bufferedViewRenderingContext.d.ts","sourceRoot":"","sources":["../../../../src/view/renderingContext/bufferedViewRenderingContext.js"],"names":[],"mappings":"AAKA;;;;;;;;GAQG;AAEH;;;GAGG;AACH;IA2BI;;;OAGG;IACH,2BAHW,OAAO,0BAA0B,EAAE,sBAAsB,mBACzD,4BAA4B,EActC;IAyCD;;;OAGG;IACH,eAmCC;;CA8EJ;;iBArNS,OAAO,yBAAyB,EAAE,OAAO;;;;gBACzC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAC;sBAC/B,MAAM;sBACN,OAAO,SAAS,EAAE,eAAe;;;;;iBACjC,MAAM;;iCATiB,2BAA2B"}

package/dist/src/view/renderingContext/bufferedViewRenderingContext.js

@@ -1,27 +1,69 @@
 import { group } from "d3-array";
 
 import ViewRenderingContext from "./viewRenderingContext.js";
-
+import { color } from "d3-color";
+
+/**
+ * @typedef {object} BufferedViewRenderingOptions
+ * @prop {import("../../gl/webGLHelper.js").default} webGLHelper
+ * @prop {{width: number, height: number}} canvasSize Size of the canvas in logical pixels.
+ * @prop {number} devicePixelRatio
+ * @prop {import("twgl.js").FramebufferInfo} [framebufferInfo]
+ * @prop {string} [clearColor] Clear color for the  WebGL context,
+ *      defaults to transparent black.
+ */
+
+/**
+ * View rendering context that buffers the actual WebGL rendering for
+ * efficient animation.
+ */
 export default class BufferedViewRenderingContext extends ViewRenderingContext {
+    /** @type {[number, number, number, number]} */
+    #clearColor = [0, 0, 0, 0];
+
+    /** @type {(() => void)[]} */
+    #batch;
+
+    /**
+     * @type {import("../../types/rendering.js").BufferedRenderingRequest[]}
+     */
+    #buffer = [];
+
+    /** @type {import("twgl.js").FramebufferInfo} */
+    #framebufferInfo;
+
+    /** @type {import("../../gl/webGLHelper.js").default} */
+    #webGLHelper;
+
+    /** @type {Set<import("../view.js").default>} */
+    #views = new Set();
+
+    /** @type {import("../layout/rectangle.js").default} */
+    #coords = undefined;
+
+    #dpr = 1;
+    #canvasSize = { width: 0, height: 0 };
+
     /**
      * @param {import("../../types/rendering.js").GlobalRenderingOptions} globalOptions
-     * @param {import("../../gl/webGLHelper.js").default} webGLHelper
+     * @param {BufferedViewRenderingOptions} bufferedOptions
      */
-    constructor(globalOptions, webGLHelper) {
+    constructor(globalOptions, bufferedOptions) {
         super(globalOptions);
 
-        this.webGLHelper = webGLHelper;
-
-        /**
-         * @type {import("../../types/rendering.js").BufferedRenderingRequest[]}
-         */
-        this.buffer = [];
+        this.#webGLHelper = bufferedOptions.webGLHelper;
+        this.#framebufferInfo = bufferedOptions.framebufferInfo;
+        this.#dpr = bufferedOptions.devicePixelRatio;
+        this.#canvasSize = bufferedOptions.canvasSize;
 
-        /** @type {import("../layout/rectangle.js").default} */
-        this.coords = undefined;
+        if (bufferedOptions.clearColor) {
+            const c = color(bufferedOptions.clearColor).rgb();
+            this.#clearColor = [c.r / 255, c.g / 255, c.b / 255, c.opacity];
+        }
+    }
 
-        /** @type {Set<import("../view.js").default>} */
-        this.views = new Set();
+    getDevicePixelRatio() {
+        return this.#dpr;
     }
 
     /**
@@ -33,8 +75,8 @@ export default class BufferedViewRenderingContext extends ViewRenderingContext {
      * @override
      */
     pushView(view, coords) {
-        this.views.add(view);
-        this.coords = coords;
+        this.#views.add(view);
+        this.#coords = coords;
     }
 
     /**
@@ -50,10 +92,10 @@ export default class BufferedViewRenderingContext extends ViewRenderingContext {
 
         const callback = mark.render(options);
         if (callback) {
-            this.buffer.push({
+            this.#buffer.push({
                 mark,
                 callback,
-                coords: this.coords,
+                coords: this.#coords,
                 clipRect: options.clipRect,
             });
         }
@@ -64,45 +106,47 @@ export default class BufferedViewRenderingContext extends ViewRenderingContext {
      * changes.
      */
     render() {
-        if (!this.batch) {
-            this._buildBatch();
+        if (!this.#batch) {
+            this.#buildBatch();
         }
 
-        if (this.batch.length == 0) {
+        if (this.#batch.length == 0) {
             return;
         }
 
-        const gl = this.webGLHelper.gl;
-        const picking = this.globalOptions.picking;
+        const gl = this.#webGLHelper.gl;
+        const fbi = this.#framebufferInfo;
 
-        gl.bindFramebuffer(
-            gl.FRAMEBUFFER,
-            picking ? this.webGLHelper._pickingBufferInfo.framebuffer : null
-        );
+        if (fbi) {
+            gl.bindFramebuffer(gl.FRAMEBUFFER, fbi.framebuffer);
+            gl.viewport(0, 0, fbi.width, fbi.height);
+        } else {
+            gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
+        }
 
-        this.webGLHelper.clearAll();
+        gl.disable(gl.SCISSOR_TEST);
+        gl.clearColor(...this.#clearColor);
+        gl.clear(gl.COLOR_BUFFER_BIT);
 
-        for (const view of this.views) {
+        for (const view of this.#views) {
             view.onBeforeRender();
         }
 
         // Execute the batch
-        for (const op of this.batch) {
+        for (const op of this.#batch) {
             op();
         }
 
-        if (picking) {
+        if (this.#framebufferInfo) {
             gl.bindFramebuffer(gl.FRAMEBUFFER, null);
         }
     }
 
-    _buildBatch() {
+    #buildBatch() {
         /**
          * Store the operations as a sequence of commands for cheap subsequent rendering.
-         *
-         * @type {(function():void)[]}
          */
-        this.batch = [];
+        this.#batch = [];
 
         /**
          * Is drawing enabled or not. As an optimization this is toggled off for invisible views.
@@ -129,7 +173,7 @@ export default class BufferedViewRenderingContext extends ViewRenderingContext {
         // Note: by reversing the buffer, we ensure ensure that the last instance
         // of a mark determines the order of the groups.
         const requestByMark = group(
-            this.buffer.reverse(),
+            this.#buffer.reverse(),
             (request) => request.mark
         );
 
@@ -140,11 +184,11 @@ export default class BufferedViewRenderingContext extends ViewRenderingContext {
             }
 
             // eslint-disable-next-line no-loop-func
-            this.batch.push(() => {
+            this.#batch.push(() => {
                 enabled = mark.unitView.getEffectiveOpacity() > 0;
             });
             // Change program, set common uniforms (mark properties, shared domains)
-            this.batch.push(
+            this.#batch.push(
                 ...mark
                     .prepareRender(this.globalOptions)
                     .map((op) => ifEnabled(op))
@@ -156,18 +200,20 @@ export default class BufferedViewRenderingContext extends ViewRenderingContext {
                 const coords = request.coords;
                 // Render each facet
                 if (!coords.equals(previousCoords)) {
-                    this.batch.push(
+                    this.#batch.push(
                         // eslint-disable-next-line no-loop-func
                         ifEnabled(() => {
                             // Suppress rendering if viewport is outside the clipRect
                             viewportVisible = mark.setViewport(
+                                this.#canvasSize,
+                                this.#dpr,
                                 coords,
                                 request.clipRect
                             );
                         })
                     );
                 }
-                this.batch.push(ifEnabledAndVisible(request.callback));
+                this.#batch.push(ifEnabledAndVisible(request.callback));
                 previousCoords = request.coords;
             }
         }

package/dist/src/view/renderingContext/simpleViewRenderingContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"simpleViewRenderingContext.d.ts","sourceRoot":"","sources":["../../../../src/view/renderingContext/simpleViewRenderingContext.js"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH;IAMQ,uDAAuD;IACvD,QADW,OAAO,wBAAwB,EAAE,OAAO,CAC5B;IAEvB,gDAAgD;IAChD,OADW,GAAG,CAAC,OAAO,YAAY,EAAE,OAAO,CAAC,CACtB;CA6C7B;;;;;mBAzDY,OAAO,YAAY,EAAE,OAAO;iCANR,2BAA2B"}
+{"version":3,"file":"simpleViewRenderingContext.d.ts","sourceRoot":"","sources":["../../../../src/view/renderingContext/simpleViewRenderingContext.js"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH;IAMQ,uDAAuD;IACvD,QADW,OAAO,wBAAwB,EAAE,OAAO,CAC5B;IAEvB,gDAAgD;IAChD,OADW,GAAG,CAAC,OAAO,YAAY,EAAE,OAAO,CAAC,CACtB;CAiD7B;;;;;mBA7DY,OAAO,YAAY,EAAE,OAAO;iCANR,2BAA2B"}

package/dist/src/view/renderingContext/simpleViewRenderingContext.js

@@ -58,7 +58,11 @@ export default class SimpleViewRenderingContext extends ViewRenderingContext {
         for (const op of mark.prepareRender(this.globalOptions)) {
             op();
         }
-        mark.setViewport(this.coords, options.clipRect);
+
+        const canvasSize = { width: 100, height: 100 }; // Placeholder, should be replaced with actual canvas size
+        const dpr = this.getDevicePixelRatio();
+
+        mark.setViewport(canvasSize, dpr, this.coords, options.clipRect);
         mark.render(options)();
     }
 }

package/dist/src/view/renderingContext/viewRenderingContext.d.ts

@@ -28,6 +28,7 @@ export default class ViewRenderingContext {
      * @param {import("../../types/rendering.js").RenderingOptions} options
      */
     renderMark(mark: import("../../marks/mark.js").default, options: import("../../types/rendering.js").RenderingOptions): void;
+    getDevicePixelRatio(): number;
 }
 export type View = import("../view.js").default;
 //# sourceMappingURL=viewRenderingContext.d.ts.map

package/dist/src/view/renderingContext/viewRenderingContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"viewRenderingContext.d.ts","sourceRoot":"","sources":["../../../../src/view/renderingContext/viewRenderingContext.js"],"names":[],"mappings":"AAAA;;GAEG;AACH;IACI;;;OAGG;IACH,2BAFW,OAAO,0BAA0B,EAAE,sBAAsB,EAInE;IADG,yEAAkC;IAGtC;;;;;;OAMG;IACH,eAJW,IAAI,UACJ,OAAO,wBAAwB,EAAE,OAAO,QAKlD;IAED;;;;OAIG;IACH,cAFW,IAAI,QAId;IAED;;;;OAIG;IACH,iBAHW,OAAO,qBAAqB,EAAE,OAAO,WACrC,OAAO,0BAA0B,EAAE,gBAAgB,QAI7D;CACJ;mBAvCY,OAAO,YAAY,EAAE,OAAO"}
+{"version":3,"file":"viewRenderingContext.d.ts","sourceRoot":"","sources":["../../../../src/view/renderingContext/viewRenderingContext.js"],"names":[],"mappings":"AAAA;;GAEG;AACH;IACI;;;OAGG;IACH,2BAFW,OAAO,0BAA0B,EAAE,sBAAsB,EAInE;IADG,yEAAkC;IAGtC;;;;;;OAMG;IACH,eAJW,IAAI,UACJ,OAAO,wBAAwB,EAAE,OAAO,QAKlD;IAED;;;;OAIG;IACH,cAFW,IAAI,QAId;IAED;;;;OAIG;IACH,iBAHW,OAAO,qBAAqB,EAAE,OAAO,WACrC,OAAO,0BAA0B,EAAE,gBAAgB,QAI7D;IAED,8BAEC;CACJ;mBA3CY,OAAO,YAAY,EAAE,OAAO"}

package/dist/src/view/renderingContext/viewRenderingContext.js

@@ -38,4 +38,8 @@ export default class ViewRenderingContext {
     renderMark(mark, options) {
         //
     }
+
+    getDevicePixelRatio() {
+        return 1;
+    }
 }

package/package.json

@@ -7,7 +7,7 @@
   },
   "contributors": [],
   "license": "MIT",
-  "version": "0.62.1",
+  "version": "0.63.0",
   "jsdelivr": "dist/bundle/index.js",
   "unpkg": "dist/bundle/index.js",
   "browser": "dist/bundle/index.js",
@@ -67,5 +67,5 @@
   "devDependencies": {
     "@types/long": "^4.0.1"
   },
-  "gitHead": "6224d0b26562632acb3f2b402362a8e2963246cc"
+  "gitHead": "61b7ba62f15827e617d5e8321e532e4c3a2efd75"
 }