From 4ba48ee7d3a2f550168e0b590cfc373514c9d35c Mon Sep 17 00:00:00 2001
From: Severin Ibarluzea <seve700@gmail.com>
Date: Fri, 14 Nov 2025 18:11:15 -0800
Subject: [PATCH 1/2] Scale line stroke width in SVG snapshots

---
 lib/getSvgFromGraphicsObject.ts               |  9 ++--
 .../getSvgFromGraphicsObject-lines.snap.svg   | 44 +++++++++++++++++++
 tests/getSvgFromGraphicsObject.test.ts        | 22 +++++++---
 3 files changed, 64 insertions(+), 11 deletions(-)
 create mode 100644 tests/__snapshots__/getSvgFromGraphicsObject-lines.snap.svg

diff --git a/lib/getSvgFromGraphicsObject.ts b/lib/getSvgFromGraphicsObject.ts
index bf20088..d864323 100644
--- 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
new file mode 100644
index 0000000..df0c534
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/tests/getSvgFromGraphicsObject.test.ts b/tests/getSvgFromGraphicsObject.test.ts
index b1a2577..925fe50 100644
--- 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")
   })

From a3ab3f10d9758cbe8c17b5a4ef755cc616fb59e4 Mon Sep 17 00:00:00 2001
From: seveibar <seveibar@gmail.com>
Date: Fri, 14 Nov 2025 18:16:42 -0800
Subject: [PATCH 2/2] edge case handling

---
 lib/getSvgFromGraphicsObject.ts               |  9 +++++----
 site/components/InteractiveGraphics/Arrow.tsx | 14 +++++++++-----
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/lib/getSvgFromGraphicsObject.ts b/lib/getSvgFromGraphicsObject.ts
index d864323..a2f756e 100644
--- a/lib/getSvgFromGraphicsObject.ts
+++ b/lib/getSvgFromGraphicsObject.ts
@@ -139,7 +139,7 @@ export function getSvgFromGraphicsObject(
     svgWidth,
     svgHeight,
   )
-  const strokeScale = Math.hypot(matrix.a, matrix.b)
+  const strokeScale = Math.abs(matrix.a)
 
   const shouldRenderLabel = (type: "points" | "lines" | "rects"): boolean => {
     if (typeof includeTextLabels === "boolean") {
@@ -235,9 +235,10 @@ export function getSvgFromGraphicsObject(
                 points: projectedPoints.map((p) => `${p.x},${p.y}`).join(" "),
                 fill: "none",
                 stroke: line.strokeColor || "black",
-                "stroke-width": (
-                  strokeScale * (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(" ")
diff --git a/site/components/InteractiveGraphics/Arrow.tsx b/site/components/InteractiveGraphics/Arrow.tsx
index 928043b..af8b544 100644
--- a/site/components/InteractiveGraphics/Arrow.tsx
+++ b/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
     })