[Interactive Graph] View a locked polygon (#1353)

## Summary:
View a locked polygon!

- Add the types necessary to view a locked polygon
- Add the "locked polygon" component that displays on an interactive graph
- Add a storybook story to confirm that locked polygons render on the graph

Small note: I decided to switch the order of ellipse and vector, because I
thought it would make more sense for vector to be next to line and for
ellipse to be next to polygon.

Note that markings (congruent/similar/parallel/right angle) are part of
a separate tasking.

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

## Test plan:
`yarn jest`

Storybook
- http://localhost:6006/?path=/story/perseus-widgets-interactive-graph--locked-polygon

<img width="504" alt="Screenshot 2024-06-14 at 4 29 24 PM" src="https://github.com/Khan/perseus/assets/13231763/c608dc89-53be-458b-aa53-7b145c833963">

Author: nishasy

Reviewers: benchristel, mark-fitzgerald

Required Reviewers:

Approved By: benchristel

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

Pull Request URL: #1353

.changeset/metal-apricots-brake.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": minor
+"@khanacademy/perseus-editor": minor
+---
+
+[Interactive Graph] View a locked polygon

packages/perseus-editor/src/components/__tests__/util.test.ts

@@ -37,6 +37,18 @@ describe("getDefaultFigureForType", () => {
         });
     });
 
+    test("should return a vector with default values", () => {
+        const figure = getDefaultFigureForType("vector");
+        expect(figure).toEqual({
+            type: "vector",
+            points: [
+                [0, 0],
+                [2, 2],
+            ],
+            color: "grayH",
+        });
+    });
+
     test("should return an ellipse with default values", () => {
         const figure = getDefaultFigureForType("ellipse");
         expect(figure).toEqual({
@@ -50,15 +62,19 @@ describe("getDefaultFigureForType", () => {
         });
     });
 
-    test("should return a vector with default values", () => {
-        const figure = getDefaultFigureForType("vector");
+    test("should return a polygon with default values", () => {
+        const figure = getDefaultFigureForType("polygon");
         expect(figure).toEqual({
-            type: "vector",
+            type: "polygon",
             points: [
-                [0, 0],
-                [2, 2],
+                [0, 2],
+                [-1, 0],
+                [1, 0],
             ],
             color: "grayH",
+            showVertices: false,
+            fillStyle: "none",
+            strokeStyle: "solid",
         });
     });
 });

packages/perseus-editor/src/components/ellipse-swatch.tsx

@@ -1,20 +1,17 @@
-import {
-    lockedFigureColors,
-    lockedEllipseFillStyles,
-} from "@khanacademy/perseus";
+import {lockedFigureColors, lockedFigureFillStyles} from "@khanacademy/perseus";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {color as wbColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
 import type {
     LockedFigureColor,
-    LockedEllipseFillType,
+    LockedFigureFillType,
 } from "@khanacademy/perseus";
 
 type Props = {
     color: LockedFigureColor;
-    fillStyle: LockedEllipseFillType;
+    fillStyle: LockedFigureFillType;
     strokeStyle: "solid" | "dashed";
 };
 
@@ -36,7 +33,7 @@ const EllipseSwatch = (props: Props) => {
                     styles.innerCircle,
                     {
                         backgroundColor: lockedFigureColors[color],
-                        opacity: lockedEllipseFillStyles[fillStyle],
+                        opacity: lockedFigureFillStyles[fillStyle],
                     },
                 ]}
             />

packages/perseus-editor/src/components/locked-ellipse-settings.tsx

@@ -1,4 +1,4 @@
-import {components, lockedEllipseFillStyles} from "@khanacademy/perseus";
+import {components, lockedFigureFillStyles} from "@khanacademy/perseus";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {OptionItem, SingleSelect} from "@khanacademy/wonder-blocks-dropdown";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
@@ -17,7 +17,7 @@ import LockedFigureSettingsActions from "./locked-figure-settings-actions";
 import type {AccordionProps} from "./locked-figure-settings";
 import type {
     Coord,
-    LockedEllipseFillType,
+    LockedFigureFillType,
     LockedEllipseType,
     LockedFigureColor,
 } from "@khanacademy/perseus";
@@ -118,13 +118,13 @@ const LockedEllipseSettings = (props: Props) => {
                     <Strut size={spacing.xxSmall_6} />
                     <SingleSelect
                         selectedValue={fillStyle}
-                        onChange={(value: LockedEllipseFillType) =>
+                        onChange={(value: LockedFigureFillType) =>
                             onChangeProps({fillStyle: value})
                         }
                         // Placeholder is required, but never gets used.
                         placeholder=""
                     >
-                        {Object.keys(lockedEllipseFillStyles).map((option) => (
+                        {Object.keys(lockedFigureFillStyles).map((option) => (
                             <OptionItem
                                 key={option}
                                 value={option}

packages/perseus-editor/src/components/locked-figures-section.tsx

@@ -96,6 +96,13 @@ const LockedFiguresSection = (props: Props) => {
     return (
         <View>
             {figures?.map((figure, index) => {
+                if (figure.type === "polygon") {
+                    // TODO(LEMS-1943): Implement locked polygon settings.
+                    // Remove this block once locked polygon settings are
+                    // implemented.
+                    return;
+                }
+
                 return (
                     <LockedFigureSettings
                         key={`${uniqueId}-locked-${figure}-${index}`}

packages/perseus-editor/src/components/util.ts

@@ -7,6 +7,7 @@ import type {
     LockedLineType,
     LockedEllipseType,
     LockedVectorType,
+    LockedPolygonType,
 } from "@khanacademy/perseus";
 
 export function focusWithChromeStickyFocusBugWorkaround(element: Element) {
@@ -52,8 +53,9 @@ const DEFAULT_COLOR = "grayH";
 
 export function getDefaultFigureForType(type: "point"): LockedPointType;
 export function getDefaultFigureForType(type: "line"): LockedLineType;
-export function getDefaultFigureForType(type: "ellipse"): LockedEllipseType;
 export function getDefaultFigureForType(type: "vector"): LockedVectorType;
+export function getDefaultFigureForType(type: "ellipse"): LockedEllipseType;
+export function getDefaultFigureForType(type: "polygon"): LockedPolygonType;
 export function getDefaultFigureForType(type: LockedFigureType): LockedFigure;
 export function getDefaultFigureForType(type: LockedFigureType): LockedFigure {
     switch (type) {
@@ -80,6 +82,15 @@ export function getDefaultFigureForType(type: LockedFigureType): LockedFigure {
                 showPoint1: false,
                 showPoint2: false,
             };
+        case "vector":
+            return {
+                type: "vector",
+                points: [
+                    [0, 0],
+                    [2, 2],
+                ],
+                color: DEFAULT_COLOR,
+            };
         case "ellipse":
             return {
                 type: "ellipse",
@@ -90,14 +101,18 @@ export function getDefaultFigureForType(type: LockedFigureType): LockedFigure {
                 fillStyle: "none",
                 strokeStyle: "solid",
             };
-        case "vector":
+        case "polygon":
             return {
-                type: "vector",
+                type: "polygon",
                 points: [
-                    [0, 0],
-                    [2, 2],
+                    [0, 2],
+                    [-1, 0],
+                    [1, 0],
                 ],
                 color: DEFAULT_COLOR,
+                showVertices: false,
+                fillStyle: "none",
+                strokeStyle: "solid",
             };
         default:
             throw new UnreachableCaseError(type);

packages/perseus/src/index.ts

@@ -65,7 +65,7 @@ export {
     plotterPlotTypes,
     ItemExtras,
     lockedFigureColors,
-    lockedEllipseFillStyles,
+    lockedFigureFillStyles,
 } from "./perseus-types";
 export {traverse} from "./traversal";
 export {isItemRenderableByVersion} from "./renderability";
@@ -160,12 +160,13 @@ export type {ParsedValue} from "./util";
 export type {
     LockedFigure,
     LockedFigureColor,
+    LockedFigureFillType,
     LockedFigureType,
     LockedPointType,
     LockedLineType,
-    LockedEllipseType,
-    LockedEllipseFillType,
     LockedVectorType,
+    LockedEllipseType,
+    LockedPolygonType,
     PerseusGraphType,
     PerseusAnswerArea,
     PerseusExpressionWidgetOptions,

packages/perseus/src/perseus-types.ts

@@ -677,8 +677,9 @@ export const lockedFigureColors: Record<LockedFigureColor, string> = {
 export type LockedFigure =
     | LockedPointType
     | LockedLineType
+    | LockedVectorType
     | LockedEllipseType
-    | LockedVectorType;
+    | LockedPolygonType;
 export type LockedFigureType = LockedFigure["type"];
 
 export type LockedPointType = {
@@ -698,8 +699,14 @@ export type LockedLineType = {
     showPoint2: boolean;
 };
 
-export type LockedEllipseFillType = "none" | "solid" | "translucent";
-export const lockedEllipseFillStyles: Record<LockedEllipseFillType, number> = {
+export type LockedVectorType = {
+    type: "vector";
+    points: [tail: Coord, tip: Coord];
+    color: LockedFigureColor;
+};
+
+export type LockedFigureFillType = "none" | "solid" | "translucent";
+export const lockedFigureFillStyles: Record<LockedFigureFillType, number> = {
     none: 0,
     solid: 1,
     translucent: 0.4,
@@ -711,14 +718,17 @@ export type LockedEllipseType = {
     radius: [x: number, y: number];
     angle: number;
     color: LockedFigureColor;
-    fillStyle: LockedEllipseFillType;
+    fillStyle: LockedFigureFillType;
     strokeStyle: "solid" | "dashed";
 };
 
-export type LockedVectorType = {
-    type: "vector";
-    points: [tail: Coord, tip: Coord];
+export type LockedPolygonType = {
+    type: "polygon";
+    points: ReadonlyArray<Coord>;
     color: LockedFigureColor;
+    showVertices: boolean;
+    fillStyle: LockedFigureFillType;
+    strokeStyle: "solid" | "dashed";
 };
 
 export type PerseusGraphType =

packages/perseus/src/widgets/__stories__/interactive-graph.stories.tsx

@@ -20,6 +20,7 @@ import {
     sinusoidQuestion,
     segmentWithLockedEllipses,
     segmentWithLockedVectors,
+    segmentWithLockedPolygons,
 } from "../__testdata__/interactive-graph.testdata";
 
 export default {
@@ -117,15 +118,22 @@ export const AllLockedRays = (args: StoryArgs): React.ReactElement => (
     />
 );
 
+export const LockedVector = (args: StoryArgs): React.ReactElement => (
+    <RendererWithDebugUI {...mafsOptions} question={segmentWithLockedVectors} />
+);
+
 export const LockedEllipse = (args: StoryArgs): React.ReactElement => (
     <RendererWithDebugUI
         {...mafsOptions}
         question={segmentWithLockedEllipses}
     />
 );
 
-export const LockedVector = (args: StoryArgs): React.ReactElement => (
-    <RendererWithDebugUI {...mafsOptions} question={segmentWithLockedVectors} />
+export const LockedPolygon = (args: StoryArgs): React.ReactElement => (
+    <RendererWithDebugUI
+        {...mafsOptions}
+        question={segmentWithLockedPolygons}
+    />
 );
 
 export const Sinusoid = (args: StoryArgs): React.ReactElement => (

packages/perseus/src/widgets/__testdata__/interactive-graph.testdata.ts

@@ -2089,6 +2089,12 @@ export const segmentWithAllLockedRayVariations: PerseusRenderer = {
     },
 };
 
+export const segmentWithLockedVectors: PerseusRenderer =
+    interactiveGraphQuestionBuilder()
+        .addLockedVector([0, 0], [2, 2])
+        .addLockedVector([2, 2], [-2, 4], "green")
+        .build();
+
 export const segmentWithLockedEllipses: PerseusRenderer =
     interactiveGraphQuestionBuilder()
         .addLockedEllipse([0, 0], [5, 5])
@@ -2106,10 +2112,42 @@ export const segmentWithLockedEllipses: PerseusRenderer =
         })
         .build();
 
-export const segmentWithLockedVectors: PerseusRenderer =
+export const segmentWithLockedPolygons: PerseusRenderer =
     interactiveGraphQuestionBuilder()
-        .addLockedVector([0, 0], [2, 2])
-        .addLockedVector([2, 2], [-2, 4], "green")
+        .addLockedPolygon([
+            [-3, 4],
+            [-5, 1],
+            [-1, 1],
+        ])
+        .addLockedPolygon(
+            [
+                [1, 4],
+                [4, 4],
+                [4, 1],
+                [1, 1],
+            ],
+            {
+                color: "green",
+                showVertices: true,
+                fillStyle: "translucent",
+                strokeStyle: "dashed",
+            },
+        )
+        .addLockedPolygon(
+            [
+                [0, -1],
+                [-2, -3],
+                [-1, -5],
+                [1, -5],
+                [2, -3],
+            ],
+            {
+                color: "purple",
+                showVertices: false,
+                fillStyle: "solid",
+                strokeStyle: "solid",
+            },
+        )
         .build();
 
 export const segmentWithLockedFigures: PerseusRenderer =