Fix: Open unlimited polygon does not restrict crossing sides.

.changeset/chilled-pianos-cheat.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Fixing intersecting polygon sides issues for unlimited sided polygon.

packages/perseus/src/widgets/interactive-graphs/mafs-graph.tsx

@@ -94,6 +94,7 @@ export const MafsGraph = (props: MafsGraphProps) => {
     const uniqueId = React.useId();
     const descriptionId = `interactive-graph-description-${uniqueId}`;
     const interactiveElementsDescriptionId = `interactive-graph-interactive-elements-description-${uniqueId}`;
+    const unlimitedGraphKeyboardPromptId = `unlimited-graph-keyboard-prompt-${uniqueId}`;
     const graphRef = React.useRef<HTMLElement>(null);
     const {analytics} = useDependencies();
 
@@ -173,6 +174,8 @@ export const MafsGraph = (props: MafsGraphProps) => {
                         fullGraphAriaDescription && descriptionId,
                         interactiveElementsDescription &&
                             interactiveElementsDescriptionId,
+                        isUnlimitedGraphState(state) &&
+                            "unlimited-graph-keyboard-prompt",
                     )}
                     ref={graphRef}
                     tabIndex={0}
@@ -301,6 +304,9 @@ export const MafsGraph = (props: MafsGraphProps) => {
                     {interactionPrompt && (
                         <View
                             style={{
+                                display: interactionPrompt
+                                    ? undefined
+                                    : "hidden",
                                 textAlign: "center",
                                 backgroundColor: "white",
                                 border: "1px solid #21242C52",
@@ -314,7 +320,7 @@ export const MafsGraph = (props: MafsGraphProps) => {
                                 transform: "translateY(-50%)",
                             }}
                         >
-                            <LabelMedium>
+                            <LabelMedium id={unlimitedGraphKeyboardPromptId}>
                                 {strings.graphKeyboardPrompt}
                             </LabelMedium>
                         </View>
@@ -440,7 +446,7 @@ const renderPolygonGraphControls = (props: {
                 width: "100%",
                 marginLeft: "20px",
             }}
-            tabIndex={0}
+            tabIndex={coords.length < 3 ? -1 : 0}
             onClick={() => {
                 props.dispatch(actions.polygon.closePolygon());
             }}

packages/perseus/src/widgets/interactive-graphs/reducer/interactive-graph-reducer.test.ts

@@ -643,6 +643,29 @@ describe("movePoint on a polygon graph", () => {
         expect(updated.coords[0]).toEqual([0, 0]);
     });
 
+    it("does not reject intersecting sides if the polygon is unlimited and it's open", () => {
+        const state: InteractiveGraphState = {
+            ...basePolygonGraphState,
+            numSides: "unlimited",
+            closedPolygon: false,
+            snapTo: "grid",
+            coords: [
+                [0, 0],
+                [0, 2],
+                [2, 2],
+                [2, 0],
+            ],
+        };
+
+        const updated = interactiveGraphReducer(
+            state,
+            actions.polygon.movePoint(0, [1, 3]),
+        );
+
+        invariant(updated.type === "polygon");
+        expect(updated.coords[0]).toEqual([1, 3]);
+    });
+
     it("does not snap to grid when snapTo is angles using moveAll", () => {
         const state: InteractiveGraphState = {
             ...basePolygonGraphState,

packages/perseus/src/widgets/interactive-graphs/reducer/interactive-graph-reducer.ts

@@ -483,8 +483,13 @@ function doMovePoint(
                 newValue: newValue,
             });
 
-            // Reject the move if it would cause the sides of the polygon to cross
-            if (polygonSidesIntersect(newCoords)) {
+            // Boolean value to tract whether we can let the polygon sides interact.
+            // They can interact if it's an unlimited polygon that is open.
+            const polygonSidesCanIntersect =
+                state.numSides === "unlimited" && !state.closedPolygon;
+
+            // Reject the move if it would cause the sides of the polygon to cross.
+            if (!polygonSidesCanIntersect && polygonSidesIntersect(newCoords)) {
                 return state;
             }