diff --git a/packages/perseus/src/widgets/interactive-graphs/interactive-graph.stories.tsx b/packages/perseus/src/widgets/interactive-graphs/interactive-graph.stories.tsx index 3093830a83..46a7888e33 100644 --- a/packages/perseus/src/widgets/interactive-graphs/interactive-graph.stories.tsx +++ b/packages/perseus/src/widgets/interactive-graphs/interactive-graph.stories.tsx @@ -39,6 +39,7 @@ const enableMafs: APIOptions = { segment: true, polygon: true, "unlimited-polygon": true, + "unlimited-point": true, angle: true, "interactive-graph-locked-features-labels": true, }, @@ -71,6 +72,13 @@ export const Point = (args: StoryArgs): React.ReactElement => ( ); +export const PointWithMafs = (args: StoryArgs): React.ReactElement => ( + +); + export const Polygon = (args: StoryArgs): React.ReactElement => ( ); diff --git a/packages/perseus/src/widgets/interactive-graphs/reducer/interactive-graph-state.test.ts b/packages/perseus/src/widgets/interactive-graphs/reducer/interactive-graph-state.test.ts index 25b16a928d..0f7e75bed7 100644 --- a/packages/perseus/src/widgets/interactive-graphs/reducer/interactive-graph-state.test.ts +++ b/packages/perseus/src/widgets/interactive-graphs/reducer/interactive-graph-state.test.ts @@ -22,6 +22,22 @@ const defaultAngleState: InteractiveGraphState = { allowReflexAngles: false, }; +const defaultUnlimitedPointState: InteractiveGraphState = { + type: "point", + focusedPointIndex: 0, + coords: [[5, 0]], + numPoints: "unlimited", + hasBeenInteractedWith: true, + showRemovePointButton: false, + showKeyboardInteractionInvitation: false, + interactionMode: "mouse", + range: [ + [-10, 10], + [-10, 10], + ], + snapStep: [1, 1], +}; + const defaultUnlimitedPolygonState: InteractiveGraphState = { type: "polygon", closedPolygon: false, @@ -138,6 +154,32 @@ describe("getGradableGraph", () => { ]); }); + it("returns null coordinates if the unlimited point graph has an empty array of coordinates", () => { + const state: InteractiveGraphState = { + ...defaultUnlimitedPointState, + coords: [], + }; + const initialGraph: PerseusGraphType = { + type: "point", + }; + const result = getGradableGraph(state, initialGraph); + invariant(result.type === "point"); + expect(result.coords).toEqual(null); + }); + + it("returns coordinates if the unlimited point graph is has at least one coordinate", () => { + const state: InteractiveGraphState = { + ...defaultUnlimitedPointState, + coords: [[1, 0]], + }; + const initialGraph: PerseusGraphType = { + type: "point", + }; + const result = getGradableGraph(state, initialGraph); + invariant(result.type === "point"); + expect(result.coords).toEqual([[1, 0]]); + }); + it("returns null coordinates if the unlimited polygon graph is open", () => { const state: InteractiveGraphState = { ...defaultUnlimitedPolygonState, diff --git a/packages/perseus/src/widgets/interactive-graphs/reducer/interactive-graph-state.ts b/packages/perseus/src/widgets/interactive-graphs/reducer/interactive-graph-state.ts index 0abae73773..87f0b688b6 100644 --- a/packages/perseus/src/widgets/interactive-graphs/reducer/interactive-graph-state.ts +++ b/packages/perseus/src/widgets/interactive-graphs/reducer/interactive-graph-state.ts @@ -59,6 +59,14 @@ export function getGradableGraph( } if (state.type === "point" && initialGraph.type === "point") { + // The unlimited point graph must have at least 1 coordinate or else it is not considered score-able. + if (state.numPoints === "unlimited" && state.coords.length === 0) { + return { + ...initialGraph, + coords: null, + }; + } + return { ...initialGraph, coords: state.coords,