Add Per-Polygon Stroke Width Support

Author: Abse2001

lib/drawGraphicsToCanvas.ts

@@ -271,6 +271,9 @@ export function drawGraphicsToCanvas(
 
       if (polygon.stroke) {
         ctx.strokeStyle = polygon.stroke
+        if (polygon.strokeWidth !== undefined) {
+          ctx.lineWidth = polygon.strokeWidth * Math.abs(matrix.a)
+        }
         ctx.stroke()
       }
     })

lib/getSvgFromGraphicsObject.ts

@@ -344,6 +344,10 @@ export function getSvgFromGraphicsObject(
         const ys = projectedPoints.map((p) => p.y)
         const minX = xs.length > 0 ? Math.min(...xs) : 0
         const minY = ys.length > 0 ? Math.min(...ys) : 0
+        const polygonStrokeWidth =
+          polygon.strokeWidth === undefined
+            ? Math.abs(1 / matrix.a)
+            : strokeScale * polygon.strokeWidth
 
         return {
           name: "g",
@@ -362,7 +366,7 @@ export function getSvgFromGraphicsObject(
                 points: projectedPoints.map((p) => `${p.x},${p.y}`).join(" "),
                 fill: polygon.fill || "none",
                 stroke: polygon.stroke || "black",
-                "stroke-width": Math.abs(1 / matrix.a).toString(),
+                "stroke-width": polygonStrokeWidth.toString(),
               },
             },
             ...(shouldRenderLabel("polygons") && polygon.label

lib/types.ts

@@ -43,6 +43,7 @@ export interface Polygon {
   points: { x: number; y: number }[]
   fill?: string
   stroke?: string
+  strokeWidth?: number
   color?: string
   layer?: string
   step?: number

site/components/InteractiveGraphics/Polygon.tsx

@@ -15,7 +15,7 @@ export const Polygon = ({
   interactiveState: InteractiveState
   index: number
 }) => {
-  const { points, fill, stroke } = polygon
+  const { points, fill, stroke, strokeWidth } = polygon
   const { realToScreen, onObjectClicked } = interactiveState
   const [isHovered, setIsHovered] = useState(false)
 
@@ -51,6 +51,8 @@ export const Polygon = ({
       ? safeLighten(0.2, baseStroke)
       : baseStroke
     : undefined
+  const screenStrokeWidth =
+    strokeWidth === undefined ? undefined : strokeWidth * realToScreen.a
 
   return (
     <div
@@ -68,6 +70,7 @@ export const Polygon = ({
           points={localPoints.map((p) => `${p.x},${p.y}`).join(" ")}
           fill={displayFill}
           stroke={displayStroke ?? "none"}
+          strokeWidth={screenStrokeWidth}
           pointerEvents="all"
           onMouseEnter={() => setIsHovered(true)}
           onMouseLeave={() => setIsHovered(false)}

tests/__snapshots__/getSvgFromGraphicsObject-polygons.snap.svg

@@ -114,6 +114,7 @@ describe("getSvgFromGraphicsObject", () => {
           ],
           fill: "gold",
           stroke: "black",
+          strokeWidth: 0.2,
           label: "Tri",
         },
       ],