Scale line stroke width in SVG snapshots

seveibar · seveibar · commit 4ba48ee7d3a2 · 2025-11-14T18:11:15.000-08:00
diff --git a/lib/getSvgFromGraphicsObject.ts b/lib/getSvgFromGraphicsObject.ts
@@ -139,10 +139,9 @@ export function getSvgFromGraphicsObject(
     svgWidth,
     svgHeight,
   )
+  const strokeScale = Math.hypot(matrix.a, matrix.b)
 
-  const shouldRenderLabel = (
-    type: "points" | "lines" | "rects",
-  ): boolean => {
+  const shouldRenderLabel = (type: "points" | "lines" | "rects"): boolean => {
     if (typeof includeTextLabels === "boolean") {
       return includeTextLabels
     }
@@ -236,7 +235,9 @@ export function getSvgFromGraphicsObject(
                 points: projectedPoints.map((p) => `${p.x},${p.y}`).join(" "),
                 fill: "none",
                 stroke: line.strokeColor || "black",
-                "stroke-width": (line.strokeWidth ?? 1).toString(),
+                "stroke-width": (
+                  strokeScale * (line.strokeWidth ?? 1)
+                ).toString(),
                 ...(line.strokeDash && {
                   "stroke-dasharray": Array.isArray(line.strokeDash)
                     ? line.strokeDash.join(" ")
diff --git a/tests/__snapshots__/getSvgFromGraphicsObject-lines.snap.svg b/tests/__snapshots__/getSvgFromGraphicsObject-lines.snap.svg
@@ -0,0 +1,44 @@
+<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><g><polyline data-points="0,0 10,10" data-type="line" data-label="" points="40,160 160,40" fill="none" stroke="blue" stroke-width="24"/></g><g><polyline data-points="10,0 0,10" data-type="line" data-label="" points="160,160 40,40" fill="none" stroke="black" stroke-width="12"/></g><g id="crosshair" style="display: none"><line id="crosshair-h" y1="0" y2="200" stroke="#666" stroke-width="0.5"/><line id="crosshair-v" x1="0" x2="200" stroke="#666" stroke-width="0.5"/><text id="coordinates" font-family="monospace" font-size="12" fill="#666"></text></g><script><![CDATA[
+              document.currentScript.parentElement.addEventListener('mousemove', (e) => {
+                const svg = e.currentTarget;
+                const rect = svg.getBoundingClientRect();
+                const x = e.clientX - rect.left;
+                const y = e.clientY - rect.top;
+                const crosshair = svg.getElementById('crosshair');
+                const h = svg.getElementById('crosshair-h');
+                const v = svg.getElementById('crosshair-v');
+                const coords = svg.getElementById('coordinates');
+                
+                crosshair.style.display = 'block';
+                h.setAttribute('x1', '0');
+                h.setAttribute('x2', '200');
+                h.setAttribute('y1', y);
+                h.setAttribute('y2', y);
+                v.setAttribute('x1', x);
+                v.setAttribute('x2', x);
+                v.setAttribute('y1', '0');
+                v.setAttribute('y2', '200');
+
+                // Calculate real coordinates using inverse transformation
+                const matrix = {"a":12,"c":0,"e":40,"b":0,"d":-12,"f":160};
+                // Manually invert and apply the affine transform
+                // Since we only use translate and scale, we can directly compute:
+                // x' = (x - tx) / sx
+                // y' = (y - ty) / sy
+                const sx = matrix.a;
+                const sy = matrix.d;
+                const tx = matrix.e; 
+                const ty = matrix.f;
+                const realPoint = {
+                  x: (x - tx) / sx,
+                  y: (y - ty) / sy // Flip y back since we used negative scale
+                }
+                
+                coords.textContent = `(${realPoint.x.toFixed(2)}, ${realPoint.y.toFixed(2)})`;
+                coords.setAttribute('x', (x + 5).toString());
+                coords.setAttribute('y', (y - 5).toString());
+              });
+              document.currentScript.parentElement.addEventListener('mouseleave', () => {
+                document.currentScript.parentElement.getElementById('crosshair').style.display = 'none';
+              });
+            ]]></script></svg>
diff --git a/tests/getSvgFromGraphicsObject.test.ts b/tests/getSvgFromGraphicsObject.test.ts
@@ -42,29 +42,37 @@ describe("getSvgFromGraphicsObject", () => {
         {
           points: [
             { x: 0, y: 0 },
-            { x: 1, y: 1 },
+            { x: 10, y: 10 },
           ],
           strokeWidth: 2,
           strokeColor: "blue",
         },
         {
           points: [
-            { x: 1, y: 0 },
-            { x: 0, y: 1 },
+            { x: 10, y: 0 },
+            { x: 0, y: 10 },
           ],
           // Test default values when properties are not specified
         },
       ],
     }
 
-    const svg = getSvgFromGraphicsObject(input)
+    const svg = getSvgFromGraphicsObject(input, {
+      svgWidth: 200,
+      svgHeight: 200,
+    })
     expect(svg).toBeString()
     expect(svg).toContain("<polyline")
     // Test custom stroke properties
-    expect(svg).toContain('stroke-width="2"')
     expect(svg).toContain('stroke="blue"')
-    // Test default values
-    expect(svg).toContain('stroke-width="1"')
+    // Test stroke width scaling
+    const strokeWidths = Array.from(
+      svg.matchAll(/<polyline[^>]*stroke-width="([0-9.]+)"/g),
+    ).map(([, value]) => parseFloat(value))
+    expect(strokeWidths).toHaveLength(2)
+    expect(strokeWidths[0]).toBeCloseTo(24)
+    expect(strokeWidths[1]).toBeCloseTo(12)
+    // Test default color
     expect(svg).toContain('stroke="black"')
     expect(svg).toMatchSvgSnapshot(import.meta.path, "lines")
   })
