Move line stroke style into CSS attribute and introduce variable to c…

…ontrol/override it
stevenpetryk · Apr 23, 2024 · 480a157 · 480a157
1 parent 9112529
commit 480a157
Show file tree

Hide file tree

Showing 7 changed files with 11 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 || {}),