add stroke width scaling (#47)

* add stroke width scaling

* also add option to include text labels

Author: seveibar

examples/interactive-graphics-canvas.fixture.tsx

@@ -18,7 +18,7 @@ const steppedGraphics: GraphicsObject = {
         { x: 50, y: 50 },
       ],
       strokeColor: "gray",
-      strokeWidth: 2,
+      strokeWidth: 0.5,
       step: 1,
     },
     {
@@ -27,7 +27,7 @@ const steppedGraphics: GraphicsObject = {
         { x: -50, y: 20 },
       ],
       strokeColor: "green",
-      strokeWidth: 2,
+      strokeWidth: 0.5,
       step: 2,
     },
     {
@@ -36,7 +36,7 @@ const steppedGraphics: GraphicsObject = {
         { x: -20, y: -30 },
       ],
       strokeColor: "purple",
-      strokeWidth: 2,
+      strokeWidth: 0.5,
       step: 3,
     },
   ],

lib/drawGraphicsToCanvas.ts

@@ -229,7 +229,12 @@ export function drawGraphicsToCanvas(
       }
 
       ctx.strokeStyle = line.strokeColor || "black"
-      ctx.lineWidth = line.strokeWidth || 1
+      if (line.strokeWidth) {
+        ctx.lineWidth = line.strokeWidth * matrix.a
+      } else {
+        ctx.lineWidth = 2
+      }
+      ctx.lineCap = "round"
 
       if (line.strokeDash) {
         if (typeof line.strokeDash === "string") {

lib/getSvgFromGraphicsObject.ts

@@ -84,7 +84,14 @@ function projectPoint(point: Point, matrix: Matrix) {
   return { ...point, ...projected }
 }
 
-export function getSvgFromGraphicsObject(graphics: GraphicsObject): string {
+export function getSvgFromGraphicsObject(
+  graphics: GraphicsObject,
+  {
+    includeTextLabels = false,
+  }: {
+    includeTextLabels?: boolean
+  } = {},
+): string {
   const bounds = getBounds(graphics)
   const matrix = getProjectionMatrix(bounds, graphics.coordinateSystem)
 
@@ -120,7 +127,7 @@ export function getSvgFromGraphicsObject(graphics: GraphicsObject): string {
                 fill: point.color || "black",
               },
             },
-            ...(point.label
+            ...(includeTextLabels && point.label
               ? [
                   {
                     name: "text",
@@ -151,7 +158,10 @@ export function getSvgFromGraphicsObject(graphics: GraphicsObject): string {
             .join(" "),
           fill: "none",
           stroke: line.strokeColor || "black",
-          "stroke-width": (line.strokeWidth || 1).toString(),
+          "stroke-width": (line.strokeWidth
+            ? line.strokeWidth * matrix.a
+            : 1
+          ).toString(),
         },
       })),
       // Rectangles