Fix SVG line stroke width scaling (#81)

* Scale line stroke width in SVG snapshots

* edge case handling

Author: seveibar

lib/getSvgFromGraphicsObject.ts

@@ -139,10 +139,9 @@ export function getSvgFromGraphicsObject(
     svgWidth,
     svgHeight,
   )
+  const strokeScale = Math.abs(matrix.a)
 
-  const shouldRenderLabel = (
-    type: "points" | "lines" | "rects",
-  ): boolean => {
+  const shouldRenderLabel = (type: "points" | "lines" | "rects"): boolean => {
     if (typeof includeTextLabels === "boolean") {
       return includeTextLabels
     }
@@ -236,7 +235,10 @@ 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":
+                  typeof line.strokeWidth === "string"
+                    ? line.strokeWidth
+                    : (strokeScale * (line.strokeWidth ?? 1)).toString(),
                 ...(line.strokeDash && {
                   "stroke-dasharray": Array.isArray(line.strokeDash)
                     ? line.strokeDash.join(" ")

site/components/InteractiveGraphics/Arrow.tsx

@@ -34,10 +34,7 @@ export const Arrow = ({
     }
   }, [geometry, realToScreen])
 
-  const scaleFactor = useMemo(() => Math.hypot(realToScreen.a, realToScreen.b), [
-    realToScreen.a,
-    realToScreen.b,
-  ])
+  const scaleFactor = Math.abs(realToScreen.a)
 
   const baseColor =
     arrow.color || defaultColors[index % defaultColors.length] || "black"
@@ -62,7 +59,14 @@ export const Arrow = ({
     ]
 
     const isNear = segments.some(({ from, to }) => {
-      const distance = distToLineSegment(mouseX, mouseY, from.x, from.y, to.x, to.y)
+      const distance = distToLineSegment(
+        mouseX,
+        mouseY,
+        from.x,
+        from.y,
+        to.x,
+        to.y,
+      )
       return distance < hoverThreshold
     })
 

tests/__snapshots__/getSvgFromGraphicsObject-lines.snap.svg

@@ -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")
   })