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

## Summary:
We got a request from content authors to add a "white" fill type for locked ellipses
and polygons. Adding that here.

Issue: https://khanacademy.atlassian.net/browse/LEMS-2119

## Test plan:
Storybook
- http://localhost:6006/?path=/story/perseuseditor-widgets-interactive-graph--mafs-with-locked-figures-m-2-b-flag
- Go through all the fill options for locked ellipses and locked polygons
- Confirm that the swatch in the summary also updates corrently

## Demo:

https://github.com/user-attachments/assets/2e12e38e-5b47-4a11-8ee5-55252efff78e

Author: nishasy

Reviewers: Myranae, jeremywiebe, mark-fitzgerald

Required Reviewers:

Approved By: Myranae

Checks: ✅ Upload Coverage (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ gerald

Pull Request URL: #1478

Author: nishasy

.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 @@ const EllipseSwatch = (props: Props) => {
                     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 @@ const PolygonSwatch = (props: Props) => {
                     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/__testdata__/interactive-graph.testdata.ts

@@ -665,6 +665,18 @@ export const segmentWithLockedEllipses: PerseusRenderer =
         })
         .build();
 
+export const segmentWithLockedEllipseWhite: PerseusRenderer =
+    interactiveGraphQuestionBuilder()
+        .addLockedEllipse([0, 0], [5, 5], {
+            color: "green",
+            fillStyle: "white",
+        })
+        .addLockedEllipse([-5, 5], [2, 3], {
+            color: "pink",
+            fillStyle: "translucent",
+        })
+        .build();
+
 export const segmentWithLockedPolygons: PerseusRenderer =
     interactiveGraphQuestionBuilder()
         .addLockedPolygon([
@@ -703,6 +715,32 @@ export const segmentWithLockedPolygons: PerseusRenderer =
         )
         .build();
 
+export const segmentWithLockedPolygonWhite: PerseusRenderer =
+    interactiveGraphQuestionBuilder()
+        .addLockedPolygon(
+            [
+                [0, 3],
+                [-3, 0],
+                [3, 0],
+            ],
+            {
+                color: "green",
+                fillStyle: "white",
+            },
+        )
+        .addLockedPolygon(
+            [
+                [-5, 0],
+                [-3, -1],
+                [3, -1],
+            ],
+            {
+                color: "pink",
+                fillStyle: "translucent",
+            },
+        )
+        .build();
+
 export const segmentWithLockedFunction = (
     equation: string = "x^2",
     options?: LockedFunctionOptions,

packages/perseus/src/widgets/__tests__/interactive-graph.test.tsx

@@ -34,11 +34,13 @@ import {
     segmentQuestion,
     segmentQuestionDefaultCorrect,
     segmentWithLockedEllipses,
+    segmentWithLockedEllipseWhite,
     segmentWithLockedFunction,
     segmentWithLockedLineQuestion,
     segmentWithLockedPointsQuestion,
     segmentWithLockedPointsWithColorQuestion,
     segmentWithLockedPolygons,
+    segmentWithLockedPolygonWhite,
     segmentWithLockedVectors,
     sinusoidQuestionWithDefaultCorrect,
 } from "../__testdata__/interactive-graph.testdata";
@@ -647,6 +649,35 @@ describe("locked layer", () => {
         });
     });
 
+    it("should render locked ellipses with white fill", async () => {
+        // Arrange
+        const {container} = renderQuestion(segmentWithLockedEllipseWhite, {
+            flags: {
+                mafs: {
+                    segment: true,
+                },
+            },
+        });
+
+        // Act
+        // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+        const circles = container.querySelectorAll("ellipse");
+        const whiteCircle = circles[0];
+        const translucentCircle = circles[1];
+
+        // Assert
+        expect(whiteCircle).toHaveStyle({
+            "fill-opacity": 1,
+            fill: wbColor.white,
+            stroke: lockedFigureColors["green"],
+        });
+        expect(translucentCircle).toHaveStyle({
+            "fill-opacity": "0.4",
+            fill: lockedFigureColors["pink"],
+            stroke: lockedFigureColors["pink"],
+        });
+    });
+
     it("should render locked polygons with style", async () => {
         // Arrange
         const {container} = renderQuestion(segmentWithLockedPolygons, {
@@ -677,6 +708,35 @@ describe("locked layer", () => {
         });
     });
 
+    it("should render locked polygons with white fill", async () => {
+        // Arrange
+        const {container} = renderQuestion(segmentWithLockedPolygonWhite, {
+            flags: {
+                mafs: {
+                    segment: true,
+                },
+            },
+        });
+
+        // Act
+        // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+        const polygons = container.querySelectorAll(".locked-polygon polygon");
+        const whitePolygon = polygons[0];
+        const translucentPolygon = polygons[1];
+
+        // Assert
+        expect(whitePolygon).toHaveStyle({
+            "fill-opacity": 1,
+            fill: wbColor.white,
+            stroke: lockedFigureColors["green"],
+        });
+        expect(translucentPolygon).toHaveStyle({
+            "fill-opacity": "0.4",
+            fill: lockedFigureColors["pink"],
+            stroke: lockedFigureColors["pink"],
+        });
+    });
+
     it("should render vertices of locked polygons with showVertices", async () => {
         // Arrange
         const {container} = renderQuestion(segmentWithLockedPolygons, {

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

@@ -1,3 +1,4 @@
+import {color as wbColor} from "@khanacademy/wonder-blocks-tokens";
 import {Ellipse} from "mafs";
 import * as React from "react";
 
@@ -18,6 +19,17 @@ const LockedEllipse = (props: LockedEllipseType) => {
             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"
+                            ? wbColor.white
+                            : lockedFigureColors[color],
+                },
+            }}
         />
     );
 };

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

@@ -1,3 +1,4 @@
+import {color as wbColor} from "@khanacademy/wonder-blocks-tokens";
 import {Point, Polygon} from "mafs";
 import * as React from "react";
 
@@ -19,6 +20,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"
+                                ? wbColor.white
+                                : lockedFigureColors[color],
+                    },
+                }}
             />
             {showVertices &&
                 points.map((point, index) => (