Use readonly array for lockedFigures. Rename mafs-locked-layer to gra…

…ph-locked-layer.
Khan · Mar 13, 2024 · 1ffe5b5 · 1ffe5b5
1 parent 96ccaf1
commit 1ffe5b5
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 16 deletions.
diff --git a/packages/perseus/src/perseus-types.ts b/packages/perseus/src/perseus-types.ts
@@ -645,7 +645,7 @@ export type PerseusInteractiveGraphWidgetOptions = {
     correct: PerseusGraphType;
     // Shapes (points, chords, etc) displayed on the graph that cannot
     // be moved by the user.
-    lockedFigures?: Array<LockedFigure>;
+    lockedFigures?: ReadonlyArray<LockedFigure>;
 };
 
 export type LockedFigure = LockedPoint;

diff --git a/.../interactive-graphs/mafs-locked-layer.tsx → ...interactive-graphs/graph-locked-layer.tsx b/.../interactive-graphs/mafs-locked-layer.tsx → ...interactive-graphs/graph-locked-layer.tsx
@@ -5,24 +5,25 @@ import * as React from "react";
 import type {LockedFigure} from "../../perseus-types";
 
 type Props = {
-    lockedFigures: Array<LockedFigure>;
+    lockedFigures: ReadonlyArray<LockedFigure>;
 };
 
-const MafsLockedLayer = (props: Props) => {
+const GraphLockedLayer = (props: Props) => {
     const {lockedFigures} = props;
     return (
         <>
             {lockedFigures.map((figure, index) => {
-                if (figure.type === "point") {
-                    const [x, y] = figure.coord;
-                    return (
-                        <Point
-                            key={`${figure.type}-${index}`}
-                            x={x}
-                            y={y}
-                            svgCircleProps={{style: figure.style}}
-                        />
-                    );
+                switch (figure.type) {
+                    case "point":
+                        const [x, y] = figure.coord;
+                        return (
+                            <Point
+                                key={`${figure.type}-${index}`}
+                                x={x}
+                                y={y}
+                                svgCircleProps={{style: figure.style}}
+                            />
+                        );
                 }
 
                 /**
@@ -38,4 +39,4 @@ const MafsLockedLayer = (props: Props) => {
     );
 };
 
-export default MafsLockedLayer;
+export default GraphLockedLayer;
diff --git a/packages/perseus/src/widgets/interactive-graphs/mafs-graph.tsx b/packages/perseus/src/widgets/interactive-graphs/mafs-graph.tsx
@@ -2,12 +2,12 @@ import {View} from "@khanacademy/wonder-blocks-core";
 import {Mafs} from "mafs";
 import * as React from "react";
 
+import GraphLockedLayer from "./graph-locked-layer";
 import {SegmentGraph} from "./graphs";
 import {Grid} from "./grid";
 import {interactiveGraphReducer} from "./interactive-graph-reducer";
 import {initializeGraphState} from "./interactive-graph-state";
 import {getLegacyGrid} from "./legacy-grid";
-import MafsLockedLayer from "./mafs-locked-layer";
 
 import type {InteractiveGraphAction} from "./interactive-graph-action";
 import type {InteractiveGraphState} from "./interactive-graph-state";
@@ -100,7 +100,7 @@ export const MafsGraph = React.forwardRef<
 
                     {/* Locked layer */}
                     {props.lockedFigures && (
-                        <MafsLockedLayer lockedFigures={props.lockedFigures} />
+                        <GraphLockedLayer lockedFigures={props.lockedFigures} />
                     )}
 
                     {/* Interactive layer */}