add line[stroke] support (#14)

tscircuit · Jan 11, 2025 · 6c6b60f · 6c6b60f
1 parent 65ac4b7
commit 6c6b60f
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 7 deletions.
diff --git a/lib/getSvgFromGraphicsObject.ts b/lib/getSvgFromGraphicsObject.ts
@@ -150,8 +150,8 @@ export function getSvgFromGraphicsObject(graphics: GraphicsObject): string {
             .map((p) => `${p.x},${p.y}`)
             .join(" "),
           fill: "none",
-          stroke: "black",
-          "stroke-width": (line.points[0].stroke || 1).toString(),
+          stroke: line.strokeColor || "black",
+          "stroke-width": (line.strokeWidth || 1).toString(),
         },
       })),
       // Rectangles

diff --git a/lib/types.ts b/lib/types.ts
@@ -6,7 +6,9 @@ export interface Point {
 }
 
 export interface Line {
-  points: { x: number; y: number; stroke?: number }[]
+  points: { x: number; y: number }[]
+  strokeWidth?: number // new optional line thickness
+  strokeColor?: string // new optional line color
 }
 
 export interface Rect {

diff --git a/site/components/GraphicsDisplay.tsx b/site/components/GraphicsDisplay.tsx
@@ -186,7 +186,8 @@ export function GraphicsDisplay({ graphics }: GraphicsDisplayProps) {
           id: `line-${idx}`,
           properties: {
             points: `[${line.points.map((p) => `(${p.x},${p.y})`).join(", ")}]`,
-            ...(line.points[0].stroke ? { stroke: line.points[0].stroke } : {}),
+            strokeColor: line.strokeColor || "black",
+            strokeWidth: line.strokeWidth || 1,
           },
         })
       })

diff --git a/tests/__snapshots__/lines.snap.svg b/tests/__snapshots__/lines.snap.svg
diff --git a/tests/getSvgFromGraphicsObject.test.ts b/tests/getSvgFromGraphicsObject.test.ts
@@ -23,22 +23,35 @@ describe("getSvgFromGraphicsObject", () => {
     expect(svg).toMatchSvgSnapshot(import.meta.path, "points")
   })
 
-  test("should generate SVG with lines", () => {
+  test("should generate SVG with lines and custom stroke properties", () => {
     const input: GraphicsObject = {
       lines: [
         {
           points: [
-            { x: 0, y: 0, stroke: 2 },
+            { x: 0, y: 0 },
             { x: 1, y: 1 },
           ],
+          strokeWidth: 2,
+          strokeColor: "blue",
+        },
+        {
+          points: [
+            { x: 1, y: 0 },
+            { x: 0, y: 1 },
+          ],
+          // Test default values when properties are not specified
         },
       ],
     }
 
     const svg = getSvgFromGraphicsObject(input)
     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"')
     expect(svg).toContain('stroke="black"')
     expect(svg).toMatchSvgSnapshot(import.meta.path, "lines")
   })