diff --git a/addons/xterm-addon-webgl/test/WebglRenderer.api.ts b/addons/xterm-addon-webgl/test/WebglRenderer.api.ts index 53073092..b8c4f028 100644 --- a/addons/xterm-addon-webgl/test/WebglRenderer.api.ts +++ b/addons/xterm-addon-webgl/test/WebglRenderer.api.ts @@ -992,8 +992,8 @@ async function getCellColor(col: number, row: number): Promise { window.result = new Uint8Array(4); window.d = window.term._core._renderService.dimensions; window.gl.readPixels( - Math.floor((${col - 0.5}) * window.d.scaledCellWidth), - Math.floor(window.gl.drawingBufferHeight - 1 - (${row - 0.5}) * window.d.scaledCellHeight), + Math.floor((${col - 0.5}) * window.d.canvas.cell.width), + Math.floor(window.gl.drawingBufferHeight - 1 - (${row - 0.5}) * window.d.canvas.cell.height), 1, 1, window.gl.RGBA, window.gl.UNSIGNED_BYTE, window.result ); `); @@ -1003,12 +1003,12 @@ async function getCellColor(col: number, row: number): Promise { async function getCellPixels(col: number, row: number): Promise { await page.evaluate(` window.gl = window.term._core._renderService._renderer._gl; - window.result = new Uint8Array(window.d.scaledCellWidth * window.d.scaledCellHeight * 4); + window.result = new Uint8Array(window.d.canvas.cell.width * window.d.canvas.cell.height * 4); window.d = window.term._core._renderService.dimensions; window.gl.readPixels( - Math.floor(${col - 1} * window.d.scaledCellWidth), - Math.floor(window.gl.drawingBufferHeight - ${row} * window.d.scaledCellHeight), - window.d.scaledCellWidth, window.d.scaledCellHeight, window.gl.RGBA, window.gl.UNSIGNED_BYTE, window.result + Math.floor(${col - 1} * window.d.canvas.cell.width), + Math.floor(window.gl.drawingBufferHeight - ${row} * window.d.canvas.cell.height), + window.d.canvas.cell.width, window.d.canvas.cell.height, window.gl.RGBA, window.gl.UNSIGNED_BYTE, window.result ); `); return await page.evaluate(`Array.from(window.result)`); diff --git a/src/browser/renderer/shared/CharAtlasCache.ts b/src/browser/renderer/shared/CharAtlasCache.ts index e953dc46..48368a16 100644 --- a/src/browser/renderer/shared/CharAtlasCache.ts +++ b/src/browser/renderer/shared/CharAtlasCache.ts @@ -28,13 +28,13 @@ const charAtlasCache: ITextureAtlasCacheEntry[] = []; export function acquireTextureAtlas( terminal: Terminal, colors: ReadonlyColorSet, - scaledCellWidth: number, - scaledCellHeight: number, - scaledCharWidth: number, - scaledCharHeight: number, + deviceCellWidth: number, + deviceCellHeight: number, + deviceCharWidth: number, + deviceCharHeight: number, devicePixelRatio: number ): ITextureAtlas { - const newConfig = generateConfig(scaledCellWidth, scaledCellHeight, scaledCharWidth, scaledCharHeight, terminal, colors, devicePixelRatio); + const newConfig = generateConfig(deviceCellWidth, deviceCellHeight, deviceCharWidth, deviceCharHeight, terminal, colors, devicePixelRatio); // Check to see if the terminal already owns this config for (let i = 0; i < charAtlasCache.length; i++) { diff --git a/src/browser/renderer/shared/CharAtlasUtils.ts b/src/browser/renderer/shared/CharAtlasUtils.ts index e443168e..e69b476a 100644 --- a/src/browser/renderer/shared/CharAtlasUtils.ts +++ b/src/browser/renderer/shared/CharAtlasUtils.ts @@ -9,7 +9,7 @@ import { Terminal } from 'xterm'; import { IColorSet, ReadonlyColorSet } from 'browser/Types'; import { NULL_COLOR } from 'common/Color'; -export function generateConfig(scaledCellWidth: number, scaledCellHeight: number, scaledCharWidth: number, scaledCharHeight: number, terminal: Terminal, colors: ReadonlyColorSet, devicePixelRatio: number): ICharAtlasConfig { +export function generateConfig(deviceCellWidth: number, deviceCellHeight: number, deviceCharWidth: number, deviceCharHeight: number, terminal: Terminal, colors: ReadonlyColorSet, devicePixelRatio: number): ICharAtlasConfig { // null out some fields that don't matter const clonedColors: IColorSet = { foreground: colors.foreground, @@ -31,10 +31,10 @@ export function generateConfig(scaledCellWidth: number, scaledCellHeight: number devicePixelRatio, letterSpacing: terminal.options.letterSpacing, lineHeight: terminal.options.lineHeight, - scaledCellWidth, - scaledCellHeight, - scaledCharWidth, - scaledCharHeight, + deviceCellWidth: deviceCellWidth, + deviceCellHeight: deviceCellHeight, + deviceCharWidth: deviceCharWidth, + deviceCharHeight: deviceCharHeight, fontFamily: terminal.options.fontFamily, fontSize: terminal.options.fontSize, fontWeight: terminal.options.fontWeight, @@ -61,8 +61,8 @@ export function configEquals(a: ICharAtlasConfig, b: ICharAtlasConfig): boolean a.fontWeight === b.fontWeight && a.fontWeightBold === b.fontWeightBold && a.allowTransparency === b.allowTransparency && - a.scaledCharWidth === b.scaledCharWidth && - a.scaledCharHeight === b.scaledCharHeight && + a.deviceCharWidth === b.deviceCharWidth && + a.deviceCharHeight === b.deviceCharHeight && a.drawBoldTextInBrightColors === b.drawBoldTextInBrightColors && a.minimumContrastRatio === b.minimumContrastRatio && a.colors.foreground.rgba === b.colors.foreground.rgba && diff --git a/src/browser/renderer/shared/CustomGlyphs.ts b/src/browser/renderer/shared/CustomGlyphs.ts index b8725685..fd56376b 100644 --- a/src/browser/renderer/shared/CustomGlyphs.ts +++ b/src/browser/renderer/shared/CustomGlyphs.ts @@ -381,32 +381,32 @@ export function tryDrawCustomChar( c: string, xOffset: number, yOffset: number, - scaledCellWidth: number, - scaledCellHeight: number, + deviceCellWidth: number, + deviceCellHeight: number, fontSize: number, devicePixelRatio: number ): boolean { const blockElementDefinition = blockElementDefinitions[c]; if (blockElementDefinition) { - drawBlockElementChar(ctx, blockElementDefinition, xOffset, yOffset, scaledCellWidth, scaledCellHeight); + drawBlockElementChar(ctx, blockElementDefinition, xOffset, yOffset, deviceCellWidth, deviceCellHeight); return true; } const patternDefinition = patternCharacterDefinitions[c]; if (patternDefinition) { - drawPatternChar(ctx, patternDefinition, xOffset, yOffset, scaledCellWidth, scaledCellHeight); + drawPatternChar(ctx, patternDefinition, xOffset, yOffset, deviceCellWidth, deviceCellHeight); return true; } const boxDrawingDefinition = boxDrawingDefinitions[c]; if (boxDrawingDefinition) { - drawBoxDrawingChar(ctx, boxDrawingDefinition, xOffset, yOffset, scaledCellWidth, scaledCellHeight, devicePixelRatio); + drawBoxDrawingChar(ctx, boxDrawingDefinition, xOffset, yOffset, deviceCellWidth, deviceCellHeight, devicePixelRatio); return true; } const powerlineDefinition = powerlineDefinitions[c]; if (powerlineDefinition) { - drawPowerlineChar(ctx, powerlineDefinition, xOffset, yOffset, scaledCellWidth, scaledCellHeight, fontSize, devicePixelRatio); + drawPowerlineChar(ctx, powerlineDefinition, xOffset, yOffset, deviceCellWidth, deviceCellHeight, fontSize, devicePixelRatio); return true; } @@ -418,13 +418,13 @@ function drawBlockElementChar( charDefinition: IBlockVector[], xOffset: number, yOffset: number, - scaledCellWidth: number, - scaledCellHeight: number + deviceCellWidth: number, + deviceCellHeight: number ): void { for (let i = 0; i < charDefinition.length; i++) { const box = charDefinition[i]; - const xEighth = scaledCellWidth / 8; - const yEighth = scaledCellHeight / 8; + const xEighth = deviceCellWidth / 8; + const yEighth = deviceCellHeight / 8; ctx.fillRect( xOffset + box.x * xEighth, yOffset + box.y * yEighth, @@ -441,8 +441,8 @@ function drawPatternChar( charDefinition: number[][], xOffset: number, yOffset: number, - scaledCellWidth: number, - scaledCellHeight: number + deviceCellWidth: number, + deviceCellHeight: number ): void { let patternSet = cachedPatterns.get(charDefinition); if (!patternSet) { @@ -492,7 +492,7 @@ function drawPatternChar( patternSet.set(fillStyle, pattern); } ctx.fillStyle = pattern; - ctx.fillRect(xOffset, yOffset, scaledCellWidth, scaledCellHeight); + ctx.fillRect(xOffset, yOffset, deviceCellWidth, deviceCellHeight); } /** @@ -540,8 +540,8 @@ function drawBoxDrawingChar( charDefinition: { [fontWeight: number]: string | ((xp: number, yp: number) => string) }, xOffset: number, yOffset: number, - scaledCellWidth: number, - scaledCellHeight: number, + deviceCellWidth: number, + deviceCellHeight: number, devicePixelRatio: number ): void { ctx.strokeStyle = ctx.fillStyle; @@ -551,7 +551,7 @@ function drawBoxDrawingChar( let actualInstructions: string; if (typeof instructions === 'function') { const xp = .15; - const yp = .15 / scaledCellHeight * scaledCellWidth; + const yp = .15 / deviceCellHeight * deviceCellWidth; actualInstructions = instructions(xp, yp); } else { actualInstructions = instructions; @@ -567,7 +567,7 @@ function drawBoxDrawingChar( if (!args[0] || !args[1]) { continue; } - f(ctx, translateArgs(args, scaledCellWidth, scaledCellHeight, xOffset, yOffset, true, devicePixelRatio)); + f(ctx, translateArgs(args, deviceCellWidth, deviceCellHeight, xOffset, yOffset, true, devicePixelRatio)); } ctx.stroke(); ctx.closePath(); @@ -579,8 +579,8 @@ function drawPowerlineChar( charDefinition: IVectorShape, xOffset: number, yOffset: number, - scaledCellWidth: number, - scaledCellHeight: number, + deviceCellWidth: number, + deviceCellHeight: number, fontSize: number, devicePixelRatio: number ): void { @@ -601,8 +601,8 @@ function drawPowerlineChar( } f(ctx, translateArgs( args, - scaledCellWidth, - scaledCellHeight, + deviceCellWidth, + deviceCellHeight, xOffset, yOffset, false, diff --git a/src/browser/renderer/shared/TextureAtlas.ts b/src/browser/renderer/shared/TextureAtlas.ts index 162c7bdf..23deb8a3 100644 --- a/src/browser/renderer/shared/TextureAtlas.ts +++ b/src/browser/renderer/shared/TextureAtlas.ts @@ -98,8 +98,8 @@ export class TextureAtlas implements ITextureAtlas { this._cacheCtx = throwIfFalsy(this.cacheCanvas.getContext('2d', { alpha: true })); this._tmpCanvas = document.createElement('canvas'); - this._tmpCanvas.width = this._config.scaledCellWidth * 4 + TMP_CANVAS_GLYPH_PADDING * 2; - this._tmpCanvas.height = this._config.scaledCellHeight + TMP_CANVAS_GLYPH_PADDING * 2; + this._tmpCanvas.width = this._config.deviceCellWidth * 4 + TMP_CANVAS_GLYPH_PADDING * 2; + this._tmpCanvas.height = this._config.deviceCellHeight + TMP_CANVAS_GLYPH_PADDING * 2; this._tmpCtx = throwIfFalsy(this._tmpCanvas.getContext('2d', { alpha: this._config.allowTransparency, willReadFrequently: true @@ -345,12 +345,12 @@ export class TextureAtlas implements ITextureAtlas { // Allow 1 cell width per character, with a minimum of 2 (CJK), plus some padding. This is used // to draw the glyph to the canvas as well as to restrict the bounding box search to ensure // giant ligatures (eg. =====>) don't impact overall performance. - const allowedWidth = this._config.scaledCellWidth * Math.max(chars.length, 2) + TMP_CANVAS_GLYPH_PADDING * 2; + const allowedWidth = this._config.deviceCellWidth * Math.max(chars.length, 2) + TMP_CANVAS_GLYPH_PADDING * 2; if (this._tmpCanvas.width < allowedWidth) { this._tmpCanvas.width = allowedWidth; } // Include line height when drawing glyphs - const allowedHeight = this._config.scaledCellHeight + TMP_CANVAS_GLYPH_PADDING * 4; + const allowedHeight = this._config.deviceCellHeight + TMP_CANVAS_GLYPH_PADDING * 4; if (this._tmpCanvas.height < allowedHeight) { this._tmpCanvas.height = allowedHeight; } @@ -411,7 +411,7 @@ export class TextureAtlas implements ITextureAtlas { // Draw custom characters if applicable let customGlyph = false; if (this._config.customGlyphs !== false) { - customGlyph = tryDrawCustomChar(this._tmpCtx, chars, padding, padding, this._config.scaledCellWidth, this._config.scaledCellHeight, this._config.fontSize, this._config.devicePixelRatio); + customGlyph = tryDrawCustomChar(this._tmpCtx, chars, padding, padding, this._config.deviceCellWidth, this._config.deviceCellHeight, this._config.fontSize, this._config.devicePixelRatio); } // Whether to clear pixels based on a threshold difference between the glyph color and the @@ -452,15 +452,15 @@ export class TextureAtlas implements ITextureAtlas { // Underline style/stroke this._tmpCtx.beginPath(); const xLeft = padding; - const yTop = Math.ceil(padding + this._config.scaledCharHeight) - yOffset; - const yMid = padding + this._config.scaledCharHeight + lineWidth - yOffset; - const yBot = Math.ceil(padding + this._config.scaledCharHeight + lineWidth * 2) - yOffset; + const yTop = Math.ceil(padding + this._config.deviceCharHeight) - yOffset; + const yMid = padding + this._config.deviceCharHeight + lineWidth - yOffset; + const yBot = Math.ceil(padding + this._config.deviceCharHeight + lineWidth * 2) - yOffset; for (let i = 0; i < chWidth; i++) { this._tmpCtx.save(); - const xChLeft = xLeft + i * this._config.scaledCellWidth; - const xChRight = xLeft + (i + 1) * this._config.scaledCellWidth; - const xChMid = xChLeft + this._config.scaledCellWidth / 2; + const xChLeft = xLeft + i * this._config.deviceCellWidth; + const xChRight = xLeft + (i + 1) * this._config.deviceCellWidth; + const xChMid = xChLeft + this._config.deviceCellWidth / 2; switch (this._workAttributeData.extended.underlineStyle) { case UnderlineStyle.DOUBLE: this._tmpCtx.moveTo(xChLeft, yTop); @@ -471,18 +471,18 @@ export class TextureAtlas implements ITextureAtlas { case UnderlineStyle.CURLY: // Choose the bezier top and bottom based on the device pixel ratio, the curly line is // made taller when the line width is as otherwise it's not very clear otherwise. - const yCurlyBot = lineWidth <= 1 ? yBot : Math.ceil(padding + this._config.scaledCharHeight - lineWidth / 2) - yOffset; - const yCurlyTop = lineWidth <= 1 ? yTop : Math.ceil(padding + this._config.scaledCharHeight + lineWidth / 2) - yOffset; + const yCurlyBot = lineWidth <= 1 ? yBot : Math.ceil(padding + this._config.deviceCharHeight - lineWidth / 2) - yOffset; + const yCurlyTop = lineWidth <= 1 ? yTop : Math.ceil(padding + this._config.deviceCharHeight + lineWidth / 2) - yOffset; // Clip the left and right edges of the underline such that it can be drawn just outside // the edge of the cell to ensure a continuous stroke when there are multiple underlined // glyphs adjacent to one another. const clipRegion = new Path2D(); - clipRegion.rect(xChLeft, yTop, this._config.scaledCellWidth, yBot - yTop); + clipRegion.rect(xChLeft, yTop, this._config.deviceCellWidth, yBot - yTop); this._tmpCtx.clip(clipRegion); // Start 1/2 cell before and end 1/2 cells after to ensure a smooth curve with other cells - this._tmpCtx.moveTo(xChLeft - this._config.scaledCellWidth / 2, yMid); + this._tmpCtx.moveTo(xChLeft - this._config.deviceCellWidth / 2, yMid); this._tmpCtx.bezierCurveTo( - xChLeft - this._config.scaledCellWidth / 2, yCurlyTop, + xChLeft - this._config.deviceCellWidth / 2, yCurlyTop, xChLeft, yCurlyTop, xChLeft, yMid ); @@ -498,8 +498,8 @@ export class TextureAtlas implements ITextureAtlas { ); this._tmpCtx.bezierCurveTo( xChRight, yCurlyBot, - xChRight + this._config.scaledCellWidth / 2, yCurlyBot, - xChRight + this._config.scaledCellWidth / 2, yMid + xChRight + this._config.deviceCellWidth / 2, yCurlyBot, + xChRight + this._config.deviceCellWidth / 2, yMid ); break; case UnderlineStyle.DOTTED: @@ -543,11 +543,11 @@ export class TextureAtlas implements ITextureAtlas { // outline around the whole glyph, as well as additional pixels in the glyph at the top // which would increase GPU memory demands const clipRegion = new Path2D(); - clipRegion.rect(xLeft, yTop - Math.ceil(lineWidth / 2), this._config.scaledCellWidth, yBot - yTop + Math.ceil(lineWidth / 2)); + clipRegion.rect(xLeft, yTop - Math.ceil(lineWidth / 2), this._config.deviceCellWidth, yBot - yTop + Math.ceil(lineWidth / 2)); this._tmpCtx.clip(clipRegion); this._tmpCtx.lineWidth = this._config.devicePixelRatio * 3; this._tmpCtx.strokeStyle = backgroundColor.css; - this._tmpCtx.strokeText(chars, padding, padding + this._config.scaledCharHeight); + this._tmpCtx.strokeText(chars, padding, padding + this._config.deviceCharHeight); this._tmpCtx.restore(); } } @@ -556,21 +556,21 @@ export class TextureAtlas implements ITextureAtlas { // Draw the character if (!customGlyph) { - this._tmpCtx.fillText(chars, padding, padding + this._config.scaledCharHeight); + this._tmpCtx.fillText(chars, padding, padding + this._config.deviceCharHeight); } // If this charcater is underscore and beyond the cell bounds, shift it up until it is visible // even on the bottom row, try for a maximum of 5 pixels. if (chars === '_' && !this._config.allowTransparency) { - let isBeyondCellBounds = clearColor(this._tmpCtx.getImageData(padding, padding, this._config.scaledCellWidth, this._config.scaledCellHeight), backgroundColor, foregroundColor, enableClearThresholdCheck); + let isBeyondCellBounds = clearColor(this._tmpCtx.getImageData(padding, padding, this._config.deviceCellWidth, this._config.deviceCellHeight), backgroundColor, foregroundColor, enableClearThresholdCheck); if (isBeyondCellBounds) { for (let offset = 1; offset <= 5; offset++) { this._tmpCtx.save(); this._tmpCtx.fillStyle = backgroundColor.css; this._tmpCtx.fillRect(0, 0, this._tmpCanvas.width, this._tmpCanvas.height); this._tmpCtx.restore(); - this._tmpCtx.fillText(chars, padding, padding + this._config.scaledCharHeight - offset); - isBeyondCellBounds = clearColor(this._tmpCtx.getImageData(padding, padding, this._config.scaledCellWidth, this._config.scaledCellHeight), backgroundColor, foregroundColor, enableClearThresholdCheck); + this._tmpCtx.fillText(chars, padding, padding + this._config.deviceCharHeight - offset); + isBeyondCellBounds = clearColor(this._tmpCtx.getImageData(padding, padding, this._config.deviceCellWidth, this._config.deviceCellHeight), backgroundColor, foregroundColor, enableClearThresholdCheck); if (!isBeyondCellBounds) { break; } @@ -585,8 +585,8 @@ export class TextureAtlas implements ITextureAtlas { this._tmpCtx.lineWidth = lineWidth; this._tmpCtx.strokeStyle = this._tmpCtx.fillStyle; this._tmpCtx.beginPath(); - this._tmpCtx.moveTo(padding, padding + Math.floor(this._config.scaledCharHeight / 2) - yOffset); - this._tmpCtx.lineTo(padding + this._config.scaledCharWidth * chWidth, padding + Math.floor(this._config.scaledCharHeight / 2) - yOffset); + this._tmpCtx.moveTo(padding, padding + Math.floor(this._config.deviceCharHeight / 2) - yOffset); + this._tmpCtx.lineTo(padding + this._config.deviceCharWidth * chWidth, padding + Math.floor(this._config.deviceCharHeight / 2) - yOffset); this._tmpCtx.stroke(); } @@ -697,8 +697,8 @@ export class TextureAtlas implements ITextureAtlas { */ private _findGlyphBoundingBox(imageData: ImageData, boundingBox: IBoundingBox, allowedWidth: number, restrictedGlyph: boolean, customGlyph: boolean, padding: number): IRasterizedGlyph { boundingBox.top = 0; - const height = restrictedGlyph ? this._config.scaledCellHeight : this._tmpCanvas.height; - const width = restrictedGlyph ? this._config.scaledCellWidth : allowedWidth; + const height = restrictedGlyph ? this._config.deviceCellHeight : this._tmpCanvas.height; + const width = restrictedGlyph ? this._config.deviceCellWidth : allowedWidth; let found = false; for (let y = 0; y < height; y++) { for (let x = 0; x < width; x++) { @@ -770,8 +770,8 @@ export class TextureAtlas implements ITextureAtlas { y: (boundingBox.bottom - boundingBox.top + 1) / TEXTURE_HEIGHT }, offset: { - x: -boundingBox.left + padding + ((restrictedGlyph || customGlyph) ? Math.floor((this._config.scaledCellWidth - this._config.scaledCharWidth) / 2) : 0), - y: -boundingBox.top + padding + ((restrictedGlyph || customGlyph) ? this._config.lineHeight === 1 ? 0 : Math.round((this._config.scaledCellHeight - this._config.scaledCharHeight) / 2) : 0) + x: -boundingBox.left + padding + ((restrictedGlyph || customGlyph) ? Math.floor((this._config.deviceCellWidth - this._config.deviceCharWidth) / 2) : 0), + y: -boundingBox.top + padding + ((restrictedGlyph || customGlyph) ? this._config.lineHeight === 1 ? 0 : Math.round((this._config.deviceCellHeight - this._config.deviceCharHeight) / 2) : 0) } }; } diff --git a/src/browser/renderer/shared/Types.d.ts b/src/browser/renderer/shared/Types.d.ts index 4da1d8d2..1185e4aa 100644 --- a/src/browser/renderer/shared/Types.d.ts +++ b/src/browser/renderer/shared/Types.d.ts @@ -4,7 +4,7 @@ */ import { FontWeight, Terminal } from 'xterm'; -import { IColorSet, ReadonlyColorSet } from 'browser/Types'; +import { IColorSet } from 'browser/Types'; import { IDisposable } from 'common/Types'; import { IEvent } from 'common/EventEmitter'; @@ -17,10 +17,10 @@ export interface ICharAtlasConfig { fontFamily: string; fontWeight: FontWeight; fontWeightBold: FontWeight; - scaledCellWidth: number; - scaledCellHeight: number; - scaledCharWidth: number; - scaledCharHeight: number; + deviceCellWidth: number; + deviceCellHeight: number; + deviceCharWidth: number; + deviceCharHeight: number; allowTransparency: boolean; drawBoldTextInBrightColors: boolean; minimumContrastRatio: number; diff --git a/test/api/Terminal.api.ts b/test/api/Terminal.api.ts index 27fb51a7..8564cbfa 100644 --- a/test/api/Terminal.api.ts +++ b/test/api/Terminal.api.ts @@ -7,6 +7,7 @@ import { assert } from 'chai'; import { pollFor, timeout, writeSync, openTerminal, launchBrowser } from './TestUtils'; import { Browser, Page } from 'playwright'; import { fail } from 'assert'; +import { IRenderDimensions } from 'browser/renderer/shared/Types'; const APP = 'http://127.0.0.1:3001/test'; @@ -1032,21 +1033,6 @@ interface IDimensions { renderDimensions: IRenderDimensions; } -interface IRenderDimensions { - scaledCharWidth: number; - scaledCharHeight: number; - scaledCellWidth: number; - scaledCellHeight: number; - scaledCharLeft: number; - scaledCharTop: number; - scaledCanvasWidth: number; - scaledCanvasHeight: number; - canvasWidth: number; - canvasHeight: number; - actualCellWidth: number; - actualCellHeight: number; -} - async function getDimensions(): Promise { return await page.evaluate(` (function() { @@ -1062,8 +1048,8 @@ async function getDimensions(): Promise { async function getCellCoordinates(dimensions: IDimensions, col: number, row: number): Promise<{ x: number, y: number }> { return { - x: dimensions.left + dimensions.renderDimensions.scaledCellWidth * (col - 0.5), - y: dimensions.top + dimensions.renderDimensions.scaledCellHeight * (row - 0.5) + x: dimensions.left + dimensions.renderDimensions.device.cell.width * (col - 0.5), + y: dimensions.top + dimensions.renderDimensions.device.cell.height * (row - 0.5) }; }