diff --git a/packages/cursorless-vscode/resources/font_measurements.js b/packages/cursorless-vscode/resources/font_measurements.js new file mode 100644 index 0000000000..7c040118a8 --- /dev/null +++ b/packages/cursorless-vscode/resources/font_measurements.js @@ -0,0 +1,12 @@ +const letter = document.querySelector("#letter"); +const container = document.querySelector("#container"); +const baselineHeight = + letter.offsetTop + + letter.offsetHeight - + container.offsetHeight - + container.offsetTop; +const vscode = acquireVsCodeApi(); +vscode.postMessage({ + widthRatio: letter.offsetWidth / 1000, + heightRatio: (letter.offsetHeight - baselineHeight) / 1000, +}); diff --git a/packages/cursorless-vscode/src/ide/vscode/hats/FontMeasurementsImpl.ts b/packages/cursorless-vscode/src/ide/vscode/hats/FontMeasurementsImpl.ts index 66f4329fd6..25c5262c9a 100644 --- a/packages/cursorless-vscode/src/ide/vscode/hats/FontMeasurementsImpl.ts +++ b/packages/cursorless-vscode/src/ide/vscode/hats/FontMeasurementsImpl.ts @@ -34,7 +34,7 @@ export class FontMeasurementsImpl implements FontMeasurements { }>("fontRatios"); if (fontRatiosCache == null || fontRatiosCache.fontFamily !== fontFamily) { - const fontRatios = await getFontRatios(); + const fontRatios = await getFontRatios(this.extensionContext); this.extensionContext.globalState.update("fontRatios", { ...fontRatios, fontFamily, @@ -57,7 +57,7 @@ export class FontMeasurementsImpl implements FontMeasurements { * * @returns The width and height ratios of the font */ -function getFontRatios() { +function getFontRatios(extensionContext: vscode.ExtensionContext) { const panel = vscode.window.createWebviewPanel( "cursorless.loading", "Cursorless", @@ -70,7 +70,14 @@ function getFontRatios() { }, ); - panel.webview.html = getWebviewContent(); + const font_measurement_js = panel.webview.asWebviewUri( + vscode.Uri.joinPath( + extensionContext.extensionUri, + "resources", + "font_measurements.js", + ), + ); + panel.webview.html = getWebviewContent(panel.webview, font_measurement_js); interface FontRatios { /** @@ -103,25 +110,23 @@ function getFontFamily() { return config.get("fontFamily")!; } -function getWebviewContent() { +function getWebviewContent( + webview: vscode.Webview, + font_measurement_js: vscode.Uri, +) { // baseline adjustment based on https://stackoverflow.com/a/27295528 return ` + + + +

Loading Cursorless...

- + `; } diff --git a/packages/cursorless-vscode/src/scripts/populateDist/assets.ts b/packages/cursorless-vscode/src/scripts/populateDist/assets.ts index 8331b75715..8f0b1cbde8 100644 --- a/packages/cursorless-vscode/src/scripts/populateDist/assets.ts +++ b/packages/cursorless-vscode/src/scripts/populateDist/assets.ts @@ -26,6 +26,10 @@ export const assets: Asset[] = [ { source: "../../images/hats", destination: "images/hats" }, { source: "./images/logo.png", destination: "images/logo.png" }, { source: "../../images/logo.svg", destination: "images/logo.svg" }, + { + source: "resources/font_measurements.js", + destination: "resources/font_measurements.js", + }, { source: "../../schemas", destination: "schemas" }, { source: "../../third-party-licenses.csv",