From 480a1574dfdc57f7189add681233dabdf1f7d87a Mon Sep 17 00:00:00 2001
From: Jeremy Wiebe <jeremy@khanacademy.org>
Date: Tue, 23 Apr 2024 12:05:59 -0700
Subject: [PATCH 1/2] Move line stroke style into CSS attribute and introduce
 variable to control/override it

---
 core.css                           | 1 +
 src/display/Ellipse.tsx            | 3 ++-
 src/display/Line/Segment.tsx       | 6 ++++--
 src/display/Line/ThroughPoints.tsx | 2 +-
 src/display/Plot/Parametric.tsx    | 2 +-
 src/display/PolyBase.tsx           | 2 +-
 src/display/Vector.tsx             | 2 +-
 7 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/core.css b/core.css
index 92d3e2b3..cd2d9218 100644
--- a/core.css
+++ b/core.css
@@ -14,6 +14,7 @@
 
   --mafs-origin-color: var(--mafs-fg);
   --mafs-line-color: #555;
+  --mafs-line-stroke-dash-style: 4, 3;
   --grid-line-subdivision-color: #222;
 
   --mafs-red: #f11d0e;
diff --git a/src/display/Ellipse.tsx b/src/display/Ellipse.tsx
index f9d7b270..d41a9bde 100644
--- a/src/display/Ellipse.tsx
+++ b/src/display/Ellipse.tsx
@@ -44,11 +44,12 @@ export function Ellipse({
       rx={radius[0]}
       ry={radius[1]}
       strokeWidth={weight}
-      strokeDasharray={strokeStyle === "dashed" ? "4,3" : undefined}
       transform={cssTransform}
       {...svgEllipseProps}
       style={{
         stroke: color,
+        strokeDasharray:
+          strokeStyle === "dashed" ? "var(--mafs-line-stroke-dash-style)" : undefined,
         fill: color,
         fillOpacity,
         strokeOpacity,
diff --git a/src/display/Line/Segment.tsx b/src/display/Line/Segment.tsx
index 8843ed2f..44ac0a8e 100644
--- a/src/display/Line/Segment.tsx
+++ b/src/display/Line/Segment.tsx
@@ -28,10 +28,12 @@ export function Segment({
       y1={round(scaledPoint1[1], 2)}
       x2={round(scaledPoint2[0], 2)}
       y2={round(scaledPoint2[1], 2)}
-      style={{ stroke: color }}
+      style={{
+        stroke: color,
+        strokeDasharray: style === "dashed" ? "var(--mafs-line-stroke-dash-style)" : undefined,
+      }}
       strokeWidth={weight}
       opacity={opacity}
-      strokeDasharray={style === "dashed" ? "1,10" : undefined}
     />
   )
 }
diff --git a/src/display/Line/ThroughPoints.tsx b/src/display/Line/ThroughPoints.tsx
index 8d3b2ff1..e647f365 100644
--- a/src/display/Line/ThroughPoints.tsx
+++ b/src/display/Line/ThroughPoints.tsx
@@ -47,12 +47,12 @@ export function ThroughPoints({
       y2={round(offscreen2[1], 2)}
       style={{
         stroke: color,
+        strokeDasharray: style === "dashed" ? "var(--mafs-line-stroke-dash-style)" : undefined,
         transform: "var(--mafs-view-transform)",
         vectorEffect: "non-scaling-stroke",
       }}
       strokeWidth={weight}
       opacity={opacity}
-      strokeDasharray={style === "dashed" ? "4,3" : undefined}
     />
   )
 }
diff --git a/src/display/Plot/Parametric.tsx b/src/display/Plot/Parametric.tsx
index 73cf1f7a..d0abc9c1 100644
--- a/src/display/Plot/Parametric.tsx
+++ b/src/display/Plot/Parametric.tsx
@@ -48,11 +48,11 @@ export function Parametric({
       fill="none"
       strokeLinecap="round"
       strokeLinejoin="round"
-      strokeDasharray={style === "dashed" ? "1,10" : undefined}
       {...svgPathProps}
       style={{
         stroke: color || "var(--mafs-fg)",
         strokeOpacity: opacity,
+        strokeDasharray: style === "dashed" ? "var(--mafs-line-stroke-dash-style)" : undefined,
         vectorEffect: "non-scaling-stroke",
         transform: "var(--mafs-view-transform)",
         ...(svgPathProps.style || {}),
diff --git a/src/display/PolyBase.tsx b/src/display/PolyBase.tsx
index eae7fdde..12963b41 100644
--- a/src/display/PolyBase.tsx
+++ b/src/display/PolyBase.tsx
@@ -37,7 +37,7 @@ export function PolyBase({
       points={scaledPoints}
       strokeWidth={weight}
       fillOpacity={fillOpacity}
-      strokeDasharray={strokeStyle === "dashed" ? "4,3" : undefined}
+      strokeDasharray={strokeStyle === "dashed" ? "var(--mafs-line-stroke-dash-style)" : undefined}
       strokeLinejoin="round"
       {...svgPolyProps}
       style={{
diff --git a/src/display/Vector.tsx b/src/display/Vector.tsx
index 14d1b32c..155c223e 100644
--- a/src/display/Vector.tsx
+++ b/src/display/Vector.tsx
@@ -44,10 +44,10 @@ export function Vector({
         y2={pixelTip[1]}
         strokeWidth={weight}
         markerEnd={`url(#${id})`}
-        strokeDasharray={style === "dashed" ? "4,3" : undefined}
         {...svgLineProps}
         style={{
           stroke: color || "var(--mafs-fg)",
+          strokeDasharray: style === "dashed" ? "var(--mafs-line-stroke-dash-style)" : undefined,
           fill: color,
           strokeOpacity: opacity,
           ...(svgLineProps?.style || {}),

From c6ba0282cf33c17c375e101401a6ed973c1c7f18 Mon Sep 17 00:00:00 2001
From: Jeremy Wiebe <jeremy@khanacademy.org>
Date: Tue, 23 Apr 2024 15:02:01 -0700
Subject: [PATCH 2/2] Oops, also PolyLine

---
 src/display/PolyBase.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/display/PolyBase.tsx b/src/display/PolyBase.tsx
index 12963b41..5b5143a2 100644
--- a/src/display/PolyBase.tsx
+++ b/src/display/PolyBase.tsx
@@ -37,13 +37,14 @@ export function PolyBase({
       points={scaledPoints}
       strokeWidth={weight}
       fillOpacity={fillOpacity}
-      strokeDasharray={strokeStyle === "dashed" ? "var(--mafs-line-stroke-dash-style)" : undefined}
       strokeLinejoin="round"
       {...svgPolyProps}
       style={{
         fill: color,
         fillOpacity,
         stroke: color,
+        strokeDasharray:
+          strokeStyle === "dashed" ? "var(--mafs-line-stroke-dash-style)" : undefined,
         strokeOpacity,
         vectorEffect: "non-scaling-stroke",
         transform: "var(--mafs-view-transform)",