[Interactive Graph Editor] Add white as a fill option for locked ellipses and polygons

.changeset/gentle-roses-pump.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": patch
+"@khanacademy/perseus-editor": patch
+---
+
+[Interactive Graph Editor] Add "white" as a fill option for locked ellipses and polygons

packages/perseus-editor/src/components/graph-locked-figures/ellipse-swatch.tsx

@@ -33,7 +33,10 @@
                     styles.innerCircle,
                     {
                         backgroundColor: lockedFigureColors[color],
-                        opacity: lockedFigureFillStyles[fillStyle],
+                        opacity:
+                            fillStyle === "white"
+                                ? 0
+                                : lockedFigureFillStyles[fillStyle],
                     },
                 ]}
             />

packages/perseus-editor/src/components/graph-locked-figures/polygon-swatch.tsx

@@ -33,7 +33,10 @@
                     styles.innerSquare,
                     {
                         backgroundColor: lockedFigureColors[color],
-                        opacity: lockedFigureFillStyles[fillStyle],
+                        opacity:
+                            fillStyle === "white"
+                                ? 0
+                                : lockedFigureFillStyles[fillStyle],
                     },
                 ]}
             />

packages/perseus/src/perseus-types.ts

@@ -722,11 +722,12 @@ export type LockedVectorType = {
     color: LockedFigureColor;
 };
 
-export type LockedFigureFillType = "none" | "solid" | "translucent";
+export type LockedFigureFillType = "none" | "white" | "translucent" | "solid";
 export const lockedFigureFillStyles: Record<LockedFigureFillType, number> = {
     none: 0,
-    solid: 1,
+    white: 1,
     translucent: 0.4,
+    solid: 1,
 } as const;
 
 export type LockedEllipseType = {

packages/perseus/src/widgets/interactive-graphs/locked-figures/locked-ellipse.tsx

@@ -18,6 +18,17 @@
             fillOpacity={lockedFigureFillStyles[fillStyle]}
             strokeStyle={strokeStyle}
             color={lockedFigureColors[color]}
+            // We need to override the svg props if we want to have a
+            // different fill color than the stroke color (specifically,
+            // in the case where the fillStyle is "white").
+            svgEllipseProps={{
+                style: {
+                    fill:
+                        fillStyle === "white"
+                            ? "white"
+                            : lockedFigureColors[color],
+                },
+            }}
         />
     );
 };

packages/perseus/src/widgets/interactive-graphs/locked-figures/locked-polygon.tsx

@@ -19,6 +19,17 @@ const LockedPolygon = (props: LockedPolygonType) => {
                 fillOpacity={lockedFigureFillStyles[fillStyle]}
                 strokeStyle={strokeStyle}
                 color={lockedFigureColors[color]}
+                // We need to override the svg props if we want to have a
+                // different fill color than the stroke color (specifically,
+                // in the case where the fillStyle is "white").
+                svgPolygonProps={{
+                    style: {
+                        fill:
+                            fillStyle === "white"
+                                ? "white"
+                                : lockedFigureColors[color],
+                    },
+                }}
             />
             {showVertices &&
                 points.map((point, index) => (