@genome-spy/core 0.62.2 → 0.63.0

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.2",
+  "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": "74d02e7425143681fec5fda16d539d94bfdfe034"
+  "gitHead": "61b7ba62f15827e617d5e8321e532e4c3a2efd75"
 }