From 9b8b7f5e19502bfd1d61e13cab94fa1e40226a65 Mon Sep 17 00:00:00 2001
From: Severin Ibarluzea <seve700@gmail.com>
Date: Fri, 27 Jun 2025 11:26:16 -0700
Subject: [PATCH 1/3] feat: scale text size and improve bounds

---
 lib/constants.ts                       |  2 ++
 lib/drawGraphicsToCanvas.ts            | 13 +++++++++++--
 lib/getSvgFromGraphicsObject.ts        | 13 +++++++++++--
 lib/index.ts                           |  1 +
 tests/SVGRenderer.test.tsx             |  2 +-
 tests/__snapshots__/texts.snap.svg     |  8 ++++----
 tests/getBounds.test.ts                | 17 +++++++++++++++++
 tests/getSvgFromGraphicsObject.test.ts |  4 +++-
 8 files changed, 50 insertions(+), 10 deletions(-)
 create mode 100644 lib/constants.ts
 create mode 100644 tests/getBounds.test.ts

diff --git a/lib/constants.ts b/lib/constants.ts
new file mode 100644
index 0000000..1a001d0
--- /dev/null
+++ b/lib/constants.ts
@@ -0,0 +1,2 @@
+export const FONT_SIZE_WIDTH_RATIO = 0.6
+export const FONT_SIZE_HEIGHT_RATIO = 1
diff --git a/lib/drawGraphicsToCanvas.ts b/lib/drawGraphicsToCanvas.ts
index 628837b..381810a 100644
--- a/lib/drawGraphicsToCanvas.ts
+++ b/lib/drawGraphicsToCanvas.ts
@@ -12,6 +12,7 @@ import type {
   TransformOptions,
 } from "./types"
 import { defaultColors } from "site/components/InteractiveGraphics/defaultColors"
+import { FONT_SIZE_WIDTH_RATIO, FONT_SIZE_HEIGHT_RATIO } from "./constants"
 
 /**
  * Computes a transformation matrix based on a provided viewbox
@@ -79,7 +80,15 @@ export function getBounds(graphics: GraphicsObject): Viewbox {
       { x: circle.center.x, y: circle.center.y - circle.radius }, // top
       { x: circle.center.x, y: circle.center.y + circle.radius }, // bottom
     ]),
-    ...(graphics.texts || []).map((text) => ({ x: text.x, y: text.y })),
+    ...(graphics.texts || []).flatMap((text) => {
+      const fontSize = text.fontSize ?? 12
+      const width = text.text.length * fontSize * FONT_SIZE_WIDTH_RATIO
+      const height = fontSize * FONT_SIZE_HEIGHT_RATIO
+      return [
+        { x: text.x, y: text.y },
+        { x: text.x + width, y: text.y + height },
+      ]
+    }),
   ]
 
   if (points.length === 0) {
@@ -296,7 +305,7 @@ export function drawGraphicsToCanvas(
     graphics.texts.forEach((text) => {
       const projected = applyToPoint(matrix, { x: text.x, y: text.y })
       ctx.fillStyle = text.color || "black"
-      ctx.font = `${text.fontSize ?? 12}px sans-serif`
+      ctx.font = `${(text.fontSize ?? 12) * Math.abs(matrix.a)}px sans-serif`
 
       const anchor = text.anchorSide ?? "center"
       const alignMap: Record<string, CanvasTextAlign> = {
diff --git a/lib/getSvgFromGraphicsObject.ts b/lib/getSvgFromGraphicsObject.ts
index d0b94eb..6575e77 100644
--- a/lib/getSvgFromGraphicsObject.ts
+++ b/lib/getSvgFromGraphicsObject.ts
@@ -10,6 +10,7 @@ import {
 import type { GraphicsObject, Point } from "./types"
 import { stringify } from "svgson"
 import pretty from "pretty"
+import { FONT_SIZE_WIDTH_RATIO, FONT_SIZE_HEIGHT_RATIO } from "./constants"
 
 const DEFAULT_SVG_SIZE = 640
 const PADDING = 40
@@ -41,7 +42,15 @@ function getBounds(graphics: GraphicsObject): Bounds {
       { x: circle.center.x, y: circle.center.y - circle.radius }, // top
       { x: circle.center.x, y: circle.center.y + circle.radius }, // bottom
     ]),
-    ...(graphics.texts || []).map((t) => ({ x: t.x, y: t.y })),
+    ...(graphics.texts || []).flatMap((t) => {
+      const fontSize = t.fontSize ?? 12
+      const width = t.text.length * fontSize * FONT_SIZE_WIDTH_RATIO
+      const height = fontSize * FONT_SIZE_HEIGHT_RATIO
+      return [
+        { x: t.x, y: t.y },
+        { x: t.x + width, y: t.y + height },
+      ]
+    }),
   ]
 
   if (points.length === 0) {
@@ -337,7 +346,7 @@ export function getSvgFromGraphicsObject(
             x: projected.x.toString(),
             y: projected.y.toString(),
             fill: txt.color || "black",
-            "font-size": (txt.fontSize ?? 12).toString(),
+            "font-size": ((txt.fontSize ?? 12) * Math.abs(matrix.a)).toString(),
             "font-family": "sans-serif",
             "text-anchor": alignMap[anchor],
             "dominant-baseline": baselineMap[anchor],
diff --git a/lib/index.ts b/lib/index.ts
index 28925df..c5613b3 100644
--- a/lib/index.ts
+++ b/lib/index.ts
@@ -29,6 +29,7 @@ export {
 } from "./drawGraphicsToCanvas"
 export { translateGraphics } from "./translateGraphics"
 export { mergeGraphics } from "./mergeGraphics"
+export { FONT_SIZE_WIDTH_RATIO, FONT_SIZE_HEIGHT_RATIO } from "./constants"
 
 export function getSvgFromLogString(logString: string): string {
   const objects = getGraphicsObjectsFromLogString(logString)
diff --git a/tests/SVGRenderer.test.tsx b/tests/SVGRenderer.test.tsx
index f9536a2..5216b15 100644
--- a/tests/SVGRenderer.test.tsx
+++ b/tests/SVGRenderer.test.tsx
@@ -56,7 +56,7 @@ describe("SVGRenderer", () => {
           document.body.removeChild(container)
           throw error
         }
-      }, 0)
+      }, 50)
     })
   })
 })
diff --git a/tests/__snapshots__/texts.snap.svg b/tests/__snapshots__/texts.snap.svg
index dc58b2b..cdce728 100644
--- a/tests/__snapshots__/texts.snap.svg
+++ b/tests/__snapshots__/texts.snap.svg
@@ -1,4 +1,4 @@
-<svg width="640" height="640" viewBox="0 0 640 640" xmlns="http://www.w3.org/2000/svg"><text data-type="text" data-label="Hello" data-x="0" data-y="0" x="40" y="600" fill="green" font-size="16" font-family="sans-serif" text-anchor="middle" dominant-baseline="central">Hello</text>
+<svg width="640" height="640" viewBox="0 0 640 640" xmlns="http://www.w3.org/2000/svg"><text data-type="text" data-label="Hello" data-x="0" data-y="0" x="40" y="413.3333333333333" fill="green" font-size="186.66666666666666" font-family="sans-serif" text-anchor="middle" dominant-baseline="central">Hello</text>
   <g id="crosshair" style="display: none">
     <line id="crosshair-h" y1="0" y2="640" stroke="#666" stroke-width="0.5" />
     <line id="crosshair-v" x1="0" x2="640" stroke="#666" stroke-width="0.5" /><text id="coordinates" font-family="monospace" font-size="12" fill="#666"></text>
@@ -27,12 +27,12 @@
 
       // Calculate real coordinates using inverse transformation
       const matrix = {
-        "a": 560,
+        "a": 11.666666666666666,
         "c": 0,
         "e": 40,
         "b": 0,
-        "d": -560,
-        "f": 600
+        "d": -11.666666666666666,
+        "f": 413.3333333333333
       };
       // Manually invert and apply the affine transform
       // Since we only use translate and scale, we can directly compute:
diff --git a/tests/getBounds.test.ts b/tests/getBounds.test.ts
new file mode 100644
index 0000000..f8e6f2f
--- /dev/null
+++ b/tests/getBounds.test.ts
@@ -0,0 +1,17 @@
+import { describe, expect, test } from "bun:test"
+import {
+  getBounds,
+  FONT_SIZE_WIDTH_RATIO,
+  FONT_SIZE_HEIGHT_RATIO,
+} from "../lib"
+
+describe("getBounds with text", () => {
+  test("calculates text bounds using font size", () => {
+    const graphics = {
+      texts: [{ x: 0, y: 0, text: "hello", fontSize: 10 }],
+    }
+    const bounds = getBounds(graphics)
+    expect(bounds.maxX).toBeCloseTo("hello".length * 10 * FONT_SIZE_WIDTH_RATIO)
+    expect(bounds.maxY).toBeCloseTo(10 * FONT_SIZE_HEIGHT_RATIO)
+  })
+})
diff --git a/tests/getSvgFromGraphicsObject.test.ts b/tests/getSvgFromGraphicsObject.test.ts
index 39a025c..dfde354 100644
--- a/tests/getSvgFromGraphicsObject.test.ts
+++ b/tests/getSvgFromGraphicsObject.test.ts
@@ -113,7 +113,9 @@ describe("getSvgFromGraphicsObject", () => {
     const svg = getSvgFromGraphicsObject(input)
     expect(svg).toBeString()
     expect(svg).toContain("Hello")
-    expect(svg).toContain('font-size="16"')
+    const match = svg.match(/font-size="([0-9.]+)"/)
+    expect(match).toBeTruthy()
+    expect(parseFloat(match![1])).toBeGreaterThan(16)
     expect(svg).toMatchSvgSnapshot(import.meta.path, "texts")
   })
 

From 89a529d7e362dc88713f74e4230190b351484edb Mon Sep 17 00:00:00 2001
From: Severin Ibarluzea <seve700@gmail.com>
Date: Fri, 27 Jun 2025 11:41:38 -0700
Subject: [PATCH 2/3] account for text anchors in bounds

---
 lib/drawGraphicsToCanvas.ts            | 19 +++++++++++++++++--
 lib/getSvgFromGraphicsObject.ts        | 19 +++++++++++++++++--
 tests/__snapshots__/texts.snap.svg     |  6 +++---
 tests/getBounds.test.ts                | 25 ++++++++++++++++++++++---
 tests/getSvgFromGraphicsObject.test.ts | 17 +++++++++++++++++
 5 files changed, 76 insertions(+), 10 deletions(-)

diff --git a/lib/drawGraphicsToCanvas.ts b/lib/drawGraphicsToCanvas.ts
index 381810a..82896a4 100644
--- a/lib/drawGraphicsToCanvas.ts
+++ b/lib/drawGraphicsToCanvas.ts
@@ -84,9 +84,24 @@ export function getBounds(graphics: GraphicsObject): Viewbox {
       const fontSize = text.fontSize ?? 12
       const width = text.text.length * fontSize * FONT_SIZE_WIDTH_RATIO
       const height = fontSize * FONT_SIZE_HEIGHT_RATIO
+      const anchor = text.anchorSide ?? "center"
+      const offsetMap: Record<string, { dx: number; dy: number }> = {
+        top_left: { dx: 0, dy: 0 },
+        top_center: { dx: -width / 2, dy: 0 },
+        top_right: { dx: -width, dy: 0 },
+        center_left: { dx: 0, dy: -height / 2 },
+        center: { dx: -width / 2, dy: -height / 2 },
+        center_right: { dx: -width, dy: -height / 2 },
+        bottom_left: { dx: 0, dy: -height },
+        bottom_center: { dx: -width / 2, dy: -height },
+        bottom_right: { dx: -width, dy: -height },
+      }
+      const { dx, dy } = offsetMap[anchor]
+      const x0 = text.x + dx
+      const y0 = text.y + dy
       return [
-        { x: text.x, y: text.y },
-        { x: text.x + width, y: text.y + height },
+        { x: x0, y: y0 },
+        { x: x0 + width, y: y0 + height },
       ]
     }),
   ]
diff --git a/lib/getSvgFromGraphicsObject.ts b/lib/getSvgFromGraphicsObject.ts
index 6575e77..826738f 100644
--- a/lib/getSvgFromGraphicsObject.ts
+++ b/lib/getSvgFromGraphicsObject.ts
@@ -46,9 +46,24 @@ function getBounds(graphics: GraphicsObject): Bounds {
       const fontSize = t.fontSize ?? 12
       const width = t.text.length * fontSize * FONT_SIZE_WIDTH_RATIO
       const height = fontSize * FONT_SIZE_HEIGHT_RATIO
+      const anchor = t.anchorSide ?? "center"
+      const offsetMap: Record<string, { dx: number; dy: number }> = {
+        top_left: { dx: 0, dy: 0 },
+        top_center: { dx: -width / 2, dy: 0 },
+        top_right: { dx: -width, dy: 0 },
+        center_left: { dx: 0, dy: -height / 2 },
+        center: { dx: -width / 2, dy: -height / 2 },
+        center_right: { dx: -width, dy: -height / 2 },
+        bottom_left: { dx: 0, dy: -height },
+        bottom_center: { dx: -width / 2, dy: -height },
+        bottom_right: { dx: -width, dy: -height },
+      }
+      const { dx, dy } = offsetMap[anchor]
+      const x0 = t.x + dx
+      const y0 = t.y + dy
       return [
-        { x: t.x, y: t.y },
-        { x: t.x + width, y: t.y + height },
+        { x: x0, y: y0 },
+        { x: x0 + width, y: y0 + height },
       ]
     }),
   ]
diff --git a/tests/__snapshots__/texts.snap.svg b/tests/__snapshots__/texts.snap.svg
index cdce728..afa565e 100644
--- a/tests/__snapshots__/texts.snap.svg
+++ b/tests/__snapshots__/texts.snap.svg
@@ -1,4 +1,4 @@
-<svg width="640" height="640" viewBox="0 0 640 640" xmlns="http://www.w3.org/2000/svg"><text data-type="text" data-label="Hello" data-x="0" data-y="0" x="40" y="413.3333333333333" fill="green" font-size="186.66666666666666" font-family="sans-serif" text-anchor="middle" dominant-baseline="central">Hello</text>
+<svg width="640" height="640" viewBox="0 0 640 640" xmlns="http://www.w3.org/2000/svg"><text data-type="text" data-label="Hello" data-x="0" data-y="0" x="320" y="320" fill="green" font-size="186.66666666666666" font-family="sans-serif" text-anchor="middle" dominant-baseline="central">Hello</text>
   <g id="crosshair" style="display: none">
     <line id="crosshair-h" y1="0" y2="640" stroke="#666" stroke-width="0.5" />
     <line id="crosshair-v" x1="0" x2="640" stroke="#666" stroke-width="0.5" /><text id="coordinates" font-family="monospace" font-size="12" fill="#666"></text>
@@ -29,10 +29,10 @@
       const matrix = {
         "a": 11.666666666666666,
         "c": 0,
-        "e": 40,
+        "e": 320,
         "b": 0,
         "d": -11.666666666666666,
-        "f": 413.3333333333333
+        "f": 320
       };
       // Manually invert and apply the affine transform
       // Since we only use translate and scale, we can directly compute:
diff --git a/tests/getBounds.test.ts b/tests/getBounds.test.ts
index f8e6f2f..6c7b4b6 100644
--- a/tests/getBounds.test.ts
+++ b/tests/getBounds.test.ts
@@ -6,12 +6,31 @@ import {
 } from "../lib"
 
 describe("getBounds with text", () => {
-  test("calculates text bounds using font size", () => {
+  test("calculates text bounds using font size and default anchor", () => {
     const graphics = {
       texts: [{ x: 0, y: 0, text: "hello", fontSize: 10 }],
     }
     const bounds = getBounds(graphics)
-    expect(bounds.maxX).toBeCloseTo("hello".length * 10 * FONT_SIZE_WIDTH_RATIO)
-    expect(bounds.maxY).toBeCloseTo(10 * FONT_SIZE_HEIGHT_RATIO)
+    const width = "hello".length * 10 * FONT_SIZE_WIDTH_RATIO
+    const height = 10 * FONT_SIZE_HEIGHT_RATIO
+    expect(bounds.maxX).toBeCloseTo(width / 2)
+    expect(bounds.minX).toBeCloseTo(-width / 2)
+    expect(bounds.maxY).toBeCloseTo(height / 2)
+    expect(bounds.minY).toBeCloseTo(-height / 2)
+  })
+
+  test("accounts for anchorSide", () => {
+    const graphics = {
+      texts: [
+        { x: 0, y: 0, text: "hi", fontSize: 8, anchorSide: "bottom_right" },
+      ],
+    }
+    const bounds = getBounds(graphics)
+    const width = "hi".length * 8 * FONT_SIZE_WIDTH_RATIO
+    const height = 8 * FONT_SIZE_HEIGHT_RATIO
+    expect(bounds.maxX).toBeCloseTo(0)
+    expect(bounds.minX).toBeCloseTo(-width)
+    expect(bounds.maxY).toBeCloseTo(0)
+    expect(bounds.minY).toBeCloseTo(-height)
   })
 })
diff --git a/tests/getSvgFromGraphicsObject.test.ts b/tests/getSvgFromGraphicsObject.test.ts
index dfde354..2c4bce8 100644
--- a/tests/getSvgFromGraphicsObject.test.ts
+++ b/tests/getSvgFromGraphicsObject.test.ts
@@ -119,6 +119,23 @@ describe("getSvgFromGraphicsObject", () => {
     expect(svg).toMatchSvgSnapshot(import.meta.path, "texts")
   })
 
+  test("respects text anchorSide", () => {
+    const input: GraphicsObject = {
+      texts: [
+        {
+          x: 0,
+          y: 0,
+          text: "A",
+          anchorSide: "top_right",
+        },
+      ],
+    }
+
+    const svg = getSvgFromGraphicsObject(input)
+    expect(svg).toContain('text-anchor="end"')
+    expect(svg).toContain('dominant-baseline="text-before-edge"')
+  })
+
   test("should handle cartesian coordinates correctly", () => {
     const input: GraphicsObject = {
       coordinateSystem: "cartesian",

From d78ad707a8f90d3f9d98ea449b81f05a57282039 Mon Sep 17 00:00:00 2001
From: Severin Ibarluzea <seve700@gmail.com>
Date: Fri, 27 Jun 2025 11:49:43 -0700
Subject: [PATCH 3/3] Fix type inference in bounds tests

---
 tests/getBounds.test.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/tests/getBounds.test.ts b/tests/getBounds.test.ts
index 6c7b4b6..cc02fad 100644
--- a/tests/getBounds.test.ts
+++ b/tests/getBounds.test.ts
@@ -4,10 +4,11 @@ import {
   FONT_SIZE_WIDTH_RATIO,
   FONT_SIZE_HEIGHT_RATIO,
 } from "../lib"
+import type { GraphicsObject } from "../lib/types"
 
 describe("getBounds with text", () => {
   test("calculates text bounds using font size and default anchor", () => {
-    const graphics = {
+    const graphics: GraphicsObject = {
       texts: [{ x: 0, y: 0, text: "hello", fontSize: 10 }],
     }
     const bounds = getBounds(graphics)
@@ -20,7 +21,7 @@ describe("getBounds with text", () => {
   })
 
   test("accounts for anchorSide", () => {
-    const graphics = {
+    const graphics: GraphicsObject = {
       texts: [
         { x: 0, y: 0, text: "hi", fontSize: 8, anchorSide: "bottom_right" },
       ],