Add rotation to texts

lib/drawGraphicsToCanvas.ts

@@ -498,7 +498,17 @@ export function drawGraphicsToCanvas(
       ctx.textAlign = alignMap[anchor]
       ctx.textBaseline = baselineMap[anchor]
 
-      ctx.fillText(text.text, projected.x, projected.y)
+      if (text.rotation) {
+        // Text.rotation is counter-clockwise in graphics (y-up) space; canvas
+        // rotate() is clockwise in screen (y-down) space, so negate.
+        ctx.save()
+        ctx.translate(projected.x, projected.y)
+        ctx.rotate((-text.rotation * Math.PI) / 180)
+        ctx.fillText(text.text, 0, 0)
+        ctx.restore()
+      } else {
+        ctx.fillText(text.text, projected.x, projected.y)
+      }
     })
   }
 

lib/getPngBufferFromGraphicsObject.ts

@@ -504,6 +504,11 @@ export async function getPngBufferFromGraphicsObject(
       fontSize: (text.fontSize ?? 12) * strokeScale,
       color: text.color || "black",
       anchorAlignment: text.anchorSide ?? "center",
+      // Text.rotation is counter-clockwise in graphics (y-up) space; the
+      // raster context rotates clockwise in screen (y-down) space, so negate.
+      rotationRadians: text.rotation
+        ? (-text.rotation * Math.PI) / 180
+        : undefined,
     })
   }
 

lib/getSvgFromGraphicsObject.ts

@@ -68,10 +68,26 @@ function getBounds(graphics: GraphicsObject): Bounds {
       const { dx, dy } = offsetMap[anchor]
       const x0 = t.x + dx
       const y0 = t.y + dy
+      if (!t.rotation) {
+        return [
+          { x: x0, y: y0 },
+          { x: x0 + width, y: y0 + height },
+        ]
+      }
+      // Rotate the text box's corners about the anchor so rotated text still
+      // contributes its true extents to the bounds.
+      const rad = (t.rotation * Math.PI) / 180
+      const cos = Math.cos(rad)
+      const sin = Math.sin(rad)
       return [
         { x: x0, y: y0 },
+        { x: x0 + width, y: y0 },
+        { x: x0, y: y0 + height },
         { x: x0 + width, y: y0 + height },
-      ]
+      ].map((corner) => ({
+        x: t.x + (corner.x - t.x) * cos - (corner.y - t.y) * sin,
+        y: t.y + (corner.x - t.x) * sin + (corner.y - t.y) * cos,
+      }))
     }),
   ]
 
@@ -616,6 +632,13 @@ export function getSvgFromGraphicsObject(
             "font-family": "sans-serif",
             "text-anchor": alignMap[anchor],
             "dominant-baseline": baselineMap[anchor],
+            // Text.rotation is counter-clockwise in graphics (y-up) space;
+            // SVG rotate() is clockwise in screen (y-down) space, so negate.
+            ...(txt.rotation
+              ? {
+                  transform: `rotate(${-txt.rotation}, ${projected.x}, ${projected.y})`,
+                }
+              : {}),
           },
           children: [{ type: "text", value: txt.text }],
         }

lib/types.ts

@@ -91,6 +91,11 @@ export interface Text {
   anchorSide?: NinePointAnchor
   color?: string
   fontSize?: number
+  /**
+   * Rotation in degrees, counter-clockwise about the anchor point in graphics
+   * (y-up) space. 90 makes the text read bottom-to-top.
+   */
+  rotation?: number
   layer?: string
   step?: number
 }

tests/getSvgFromGraphicsObject.test.ts

@@ -347,6 +347,33 @@ describe("getSvgFromGraphicsObject", () => {
     expect(svg).toMatchSvgSnapshot(import.meta.path, "texts")
   })
 
+  test("rotates text about its anchor", () => {
+    const input: GraphicsObject = {
+      texts: [
+        {
+          x: 0,
+          y: 0,
+          text: "SPI_SCK",
+          rotation: 90,
+        },
+        {
+          x: 2,
+          y: 0,
+          text: "FLAT",
+        },
+      ],
+    }
+
+    const svg = getSvgFromGraphicsObject(input)
+    // rotation is CCW in graphics space -> negated for SVG's screen space
+    expect(svg).toMatch(/transform="rotate\(-90, [\d.]+, [\d.]+\)"/)
+    // unrotated text carries no transform
+    const flatText = svg.split("<text").find((chunk) => chunk.includes("FLAT"))
+    expect(flatText).toBeDefined()
+    expect(flatText!).not.toContain("transform=")
+    expect(svg).toMatchSvgSnapshot(import.meta.path, "rotated-texts")
+  })
+
   test("respects text anchorSide", () => {
     const input: GraphicsObject = {
       texts: [