Improve text sizing logic

lib/constants.ts

@@ -0,0 +1,2 @@
+export const FONT_SIZE_WIDTH_RATIO = 0.6
+export const FONT_SIZE_HEIGHT_RATIO = 1

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,30 @@ 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
+      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: x0, y: y0 },
+        { x: x0 + width, y: y0 + height },
+      ]
+    }),
   ]
 
   if (points.length === 0) {
@@ -296,7 +320,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> = {

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,30 @@ 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
+      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: x0, y: y0 },
+        { x: x0 + width, y: y0 + height },
+      ]
+    }),
   ]
 
   if (points.length === 0) {
@@ -337,7 +361,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],

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)

tests/SVGRenderer.test.tsx

@@ -56,7 +56,7 @@ describe("SVGRenderer", () => {
           document.body.removeChild(container)
           throw error
         }
-      }, 0)
+      }, 50)
     })
   })
 })

tests/getBounds.test.ts

@@ -0,0 +1,37 @@
+import { describe, expect, test } from "bun:test"
+import {
+  getBounds,
+  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: GraphicsObject = {
+      texts: [{ x: 0, y: 0, text: "hello", fontSize: 10 }],
+    }
+    const bounds = getBounds(graphics)
+    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: GraphicsObject = {
+      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)
+  })
+})

tests/getSvgFromGraphicsObject.test.ts

@@ -113,10 +113,29 @@ 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")
   })
 
+  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",