Release 0.4.0: exact board size from tsquare's measureBoardLayout

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 0.4.0
+
+- **Needs tsquare 0.13.2 or later** (it was 0.12.1). Boards get tsquare's renderer fixes from 0.12.3 to 0.13.2.
+- **A board's image size and its viewer's screen chips are exact** on boards with notes: they come from tsquare's `measureBoardLayout`, which measures notes as drawn. `boardLayout`'s estimate could be a line or more off for a note that wraps differently than its length suggests, so the image was scaled into a slightly wrong box and the chips zoomed to the wrong place.
+
 ## 0.3.1
 
 - **Works with tsquare 0.13** as well as 0.12 (from 0.12.1). An app that installs tsquare 0.13 now shares one copy with this package instead of getting a second one. Nothing else changed; the tests pass on both 0.12.1 and 0.13.0.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsquare-js/react",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "React component for tsquare wireframes: render wireframe text, or the ```tsquare blocks in react-markdown, including while a model's reply is still streaming in.",
   "keywords": [
     "tsquare",
@@ -51,7 +51,7 @@
     "prepare": "npm run build"
   },
   "dependencies": {
-    "tsquare": "^0.12.1 || ^0.13.0"
+    "tsquare": "^0.13.2"
   },
   "peerDependencies": {
     "react": ">=18"

src/use-board.ts

@@ -5,7 +5,7 @@
  * board in as it goes (waiting for a pause would draw nothing until the stream ends).
  */
 import { useEffect, useRef, useState } from "react";
-import { boardLayout, compileWireframe, renderWireframeSvg } from "tsquare";
+import { compileWireframe, measureBoardLayout, renderWireframeSvg } from "tsquare";
 import type { BoardItem } from "tsquare/viewer";
 
 export interface Problem {
@@ -78,8 +78,8 @@ export function useBoard(source: string, streaming: boolean, onProblems?: (probl
         return;
       }
       try {
-        const svg = await renderWireframeSvg(spec, { skipValidation: true });
-        const { width, height, items } = boardLayout(spec);
+        // the exact layout (notes measured as drawn), so the image's size and the screen chips match the SVG
+        const [svg, { width, height, items }] = await Promise.all([renderWireframeSvg(spec, { skipValidation: true }), measureBoardLayout(spec)]);
         const title = (spec.elements[spec.root]?.props as { title?: string } | undefined)?.title;
         apply(() => ({ board: { svg, width, height, items, title }, problems: [], pending: false }), []);
       } catch (err) {

test/react.test.tsx

@@ -92,6 +92,21 @@ test("Wireframe: the board as an image of its SVG, with its size and title", asy
   await view.unmount();
 });
 
+test("Wireframe: the image's size is the SVG's, even when notes wrap differently than their length suggests", async () => {
+  // a notes-only row in a grid: tsquare's boardLayout estimates note heights, measureBoardLayout measures them
+  const wide = "WARNING: MANDATORY REVIEW WINDOW MUST MATCH WORKFLOW WWW MMM QA APPROVAL ".repeat(3).trim();
+  const text = ["board layout=grid columns=2", '  screen phone "Top"', `  note "${wide}"`, `  note "${wide}"`, '  note "Short"', '  screen phone "Below"'].join("\n");
+  const { h, lib, tsquare } = await load();
+  const view = await mount(h(lib.Wireframe, { source: text }));
+  await until(() => !!view.$("img"), "the board");
+  const img = view.$("img") as HTMLImageElement;
+  const svg = svgOf(img.getAttribute("src")!);
+  const [, w, hh] = svg.match(/^<svg width="(\d+)" height="(\d+)"/)!;
+  assert.deepEqual([img.getAttribute("width"), img.getAttribute("height")], [w, hh]);
+  assert.notEqual(String(tsquare.boardLayout(tsquare.compileWireframe(text).spec!).height), hh, "the estimate is off for this board");
+  await view.unmount();
+});
+
 test("Wireframe: problems listed by line, with class names to style; showProblems={false} hides them", async () => {
   const { h, lib } = await load();
   const view = await mount(h(lib.Wireframe, { source: BROKEN }));