Revert "Now that the remount issue was fixed in an earlier PR, we don…

…'t need startCoords as a separate prop"

This reverts commit 16095ae.

Turns out we can't use the same coords after all

packages/perseus-editor/src/components/__tests__/start-coord-settings.test.tsx

@@ -60,7 +60,7 @@ describe("StartCoordSettings", () => {
         type
         ${"linear"}
         ${"ray"}
-    `(`graphs with CollinearTuple coords`, ({type}) => {
+    `(`graphs with CollinearTuple startCoords`, ({type}) => {
         test(`shows the start coordinates UI for ${type}`, () => {
             // Arrange
 
@@ -131,7 +131,7 @@ describe("StartCoordSettings", () => {
             render(
                 <StartCoordSettings
                     {...defaultProps}
-                    coords={[
+                    startCoords={[
                         [-15, 15],
                         [15, 15],
                     ]}

packages/perseus-editor/src/components/start-coord-settings.tsx

@@ -20,17 +20,17 @@ import type {
 type Props = PerseusGraphType & {
     range: [x: Range, y: Range];
     step: [x: number, y: number];
-    onChange: (coords: CollinearTuple) => void;
+    onChange: (startCoords: CollinearTuple) => void;
 };
 
 type PropsInner = {
     type: PerseusGraphType["type"];
-    coords: CollinearTuple;
-    onChange: (coords: CollinearTuple) => void;
+    startCoords: CollinearTuple;
+    onChange: (startCoords: CollinearTuple) => void;
 };
 
 const StartCoordSettingsInner = (props: PropsInner) => {
-    const {type, coords, onChange} = props;
+    const {type, startCoords, onChange} = props;
 
     // Check if coords is of type CollinearTuple
     switch (type) {
@@ -41,15 +41,19 @@ const StartCoordSettingsInner = (props: PropsInner) => {
                     <View style={styles.tile}>
                         <LabelLarge>Point 1</LabelLarge>
                         <CoordinatePairInput
-                            coord={coords[0]}
-                            onChange={(value) => onChange([value, coords[1]])}
+                            coord={startCoords[0]}
+                            onChange={(value) =>
+                                onChange([value, startCoords[1]])
+                            }
                         />
                     </View>
                     <View style={styles.tile}>
                         <LabelLarge>Point 2</LabelLarge>
                         <CoordinatePairInput
-                            coord={coords[1]}
-                            onChange={(value) => onChange([coords[0], value])}
+                            coord={startCoords[1]}
+                            onChange={(value) =>
+                                onChange([startCoords[0], value])
+                            }
                         />
                     </View>
                 </>
@@ -83,7 +87,7 @@ const StartCoordSettings = (props: Props) => {
                 <>
                     <StartCoordSettingsInner
                         type={type}
-                        coords={props.coords ?? defaultStartCoords}
+                        startCoords={props.startCoords ?? defaultStartCoords}
                         onChange={onChange}
                     />
 

packages/perseus-editor/src/widgets/interactive-graph-editor.tsx

@@ -669,7 +669,7 @@ class InteractiveGraphEditor extends React.Component<Props> {
 
         const graph = {
             ...this.props.graph,
-            coords: coords,
+            startCoords: coords,
         };
         this.props.onChange({graph: graph});
     };
@@ -704,10 +704,7 @@ class InteractiveGraphEditor extends React.Component<Props> {
             _.extend(json, {
                 graph: {
                     type: correct.type,
-                    coords:
-                        this.props.graph?.type === "circle"
-                            ? this.props.graph.center
-                            : this.props.graph?.coords,
+                    startCoords: this.props.graph?.startCoords,
                 },
                 correct: correct,
             });

packages/perseus/src/perseus-types.ts

@@ -763,31 +763,41 @@ export type PerseusGraphTypeAngle = {
     match?: "congruent";
     // must have 3 coords - ie [Coord, Coord, Coord]
     coords?: ReadonlyArray<Coord>;
+    // The initial coordinates the graph renders with.
+    startCoords?: ReadonlyArray<Coord>;
 };
 
 export type PerseusGraphTypeCircle = {
     type: "circle";
     center?: Coord;
     radius?: number;
+    // The initial coordinates the graph renders with.
+    startCoords?: Coord;
 } & PerseusGraphTypeCommon;
 
 export type PerseusGraphTypeLinear = {
     type: "linear";
     // expects 2 coords
     coords?: CollinearTuple;
+    // The initial coordinates the graph renders with.
+    startCoords?: CollinearTuple;
 } & PerseusGraphTypeCommon;
 
 export type PerseusGraphTypeLinearSystem = {
     type: "linear-system";
     // expects 2 sets of 2 coords
     coords?: CollinearTuple[];
+    // The initial coordinates the graph renders with.
+    startCoords?: CollinearTuple[];
 } & PerseusGraphTypeCommon;
 
 export type PerseusGraphTypePoint = {
     type: "point";
     // The number of points if a "point" type.  default: 1.  "unlimited" if no limit
     numPoints?: number | "unlimited";
     coords?: ReadonlyArray<Coord>;
+    // The initial coordinates the graph renders with.
+    startCoords?: ReadonlyArray<Coord>;
 } & PerseusGraphTypeCommon;
 
 export type PerseusGraphTypePolygon = {
@@ -803,12 +813,16 @@ export type PerseusGraphTypePolygon = {
     // How to match the answer. If missing, defaults to exact matching.
     match?: "similar" | "congruent" | "approx";
     coords?: ReadonlyArray<Coord>;
+    // The initial coordinates the graph renders with.
+    startCoords?: ReadonlyArray<Coord>;
 } & PerseusGraphTypeCommon;
 
 export type PerseusGraphTypeQuadratic = {
     type: "quadratic";
     // expects a list of 3 coords
     coords?: [Coord, Coord, Coord];
+    // The initial coordinates the graph renders with.
+    startCoords?: [Coord, Coord, Coord];
 } & PerseusGraphTypeCommon;
 
 export type PerseusGraphTypeSegment = {
@@ -817,18 +831,24 @@ export type PerseusGraphTypeSegment = {
     numSegments?: number;
     // Expects a list of Coord tuples. Length should match the `numSegments` value.
     coords?: CollinearTuple[];
+    // The initial coordinates the graph renders with.
+    startCoords?: CollinearTuple[];
 } & PerseusGraphTypeCommon;
 
 export type PerseusGraphTypeSinusoid = {
     type: "sinusoid";
     // Expects a list of 2 Coords
     coords?: ReadonlyArray<Coord>;
+    // The initial coordinates the graph renders with.
+    startCoords?: ReadonlyArray<Coord>;
 } & PerseusGraphTypeCommon;
 
 export type PerseusGraphTypeRay = {
     type: "ray";
     // Expects a list of 2 Coords
     coords?: CollinearTuple;
+    // The initial coordinates the graph renders with.
+    startCoords?: CollinearTuple;
 } & PerseusGraphTypeCommon;
 
 export type PerseusLabelImageWidgetOptions = {

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

@@ -109,7 +109,7 @@ describe("InteractiveGraphQuestionBuilder", () => {
                 graph: {
                     type: "segment",
                     numSegments: 1,
-                    coords: [
+                    startCoords: [
                         [
                             [0, 0],
                             [2, 2],
@@ -150,7 +150,7 @@ describe("InteractiveGraphQuestionBuilder", () => {
                 graph: {
                     type: "segment",
                     numSegments: 2,
-                    coords: [
+                    startCoords: [
                         [
                             [0, 0],
                             [2, 2],
@@ -211,7 +211,7 @@ describe("InteractiveGraphQuestionBuilder", () => {
             expect.objectContaining({
                 graph: {
                     type: "linear",
-                    coords: [
+                    startCoords: [
                         [3, 0],
                         [3, 3],
                     ],
@@ -270,7 +270,7 @@ describe("InteractiveGraphQuestionBuilder", () => {
             expect.objectContaining({
                 graph: {
                     type: "linear-system",
-                    coords: [
+                    startCoords: [
                         [
                             [-3, 0],
                             [-3, 3],
@@ -329,7 +329,7 @@ describe("InteractiveGraphQuestionBuilder", () => {
             expect.objectContaining({
                 graph: {
                     type: "ray",
-                    coords: [
+                    startCoords: [
                         [3, 0],
                         [3, 3],
                     ],
@@ -365,7 +365,7 @@ describe("InteractiveGraphQuestionBuilder", () => {
         const graph = question.widgets["interactive-graph 1"];
         expect(graph.options).toEqual(
             expect.objectContaining({
-                graph: {type: "circle", center: [9, 9], radius: 5},
+                graph: {type: "circle", startCoords: [9, 9], radius: 5},
                 correct: {type: "circle", radius: 5, center: [0, 0]},
             }),
         );
@@ -404,7 +404,7 @@ describe("InteractiveGraphQuestionBuilder", () => {
             expect.objectContaining({
                 graph: {
                     type: "quadratic",
-                    coords: [
+                    startCoords: [
                         [-1, -1],
                         [0, 0],
                         [1, -1],
@@ -453,7 +453,7 @@ describe("InteractiveGraphQuestionBuilder", () => {
             expect.objectContaining({
                 graph: {
                     type: "sinusoid",
-                    coords: [
+                    startCoords: [
                         [0, 0],
                         [1, -1],
                     ],

packages/perseus/src/widgets/interactive-graphs/interactive-graph-question-builder.ts

@@ -290,7 +290,7 @@ class SegmentGraphConfig implements InteractiveFigureConfig {
         return {
             type: "segment",
             numSegments: this.numSegments,
-            coords: this.startCoords,
+            startCoords: this.startCoords,
         };
     }
 }
@@ -313,7 +313,7 @@ class LinearConfig implements InteractiveFigureConfig {
     }
 
     graph(): PerseusGraphType {
-        return {type: "linear", coords: this.startCoords};
+        return {type: "linear", startCoords: this.startCoords};
     }
 }
 
@@ -341,7 +341,7 @@ class LinearSystemConfig implements InteractiveFigureConfig {
     }
 
     graph(): PerseusGraphType {
-        return {type: "linear-system", coords: this.startCoords};
+        return {type: "linear-system", startCoords: this.startCoords};
     }
 }
 
@@ -363,7 +363,7 @@ class RayConfig implements InteractiveFigureConfig {
     }
 
     graph(): PerseusGraphType {
-        return {type: "ray", coords: this.startCoords};
+        return {type: "ray", startCoords: this.startCoords};
     }
 }
 
@@ -380,7 +380,7 @@ class CircleGraphConfig implements InteractiveFigureConfig {
 
     graph(): PerseusGraphType {
         if (this.startCoords) {
-            return {type: "circle", center: this.startCoords, radius: 5};
+            return {type: "circle", startCoords: this.startCoords, radius: 5};
         }
 
         return {type: "circle"};
@@ -406,7 +406,7 @@ class QuadraticConfig implements InteractiveFigureConfig {
     }
 
     graph(): PerseusGraphType {
-        return {type: "quadratic", coords: this.startCoords};
+        return {type: "quadratic", startCoords: this.startCoords};
     }
 }
 
@@ -428,7 +428,7 @@ class SinusoidGraphConfig implements InteractiveFigureConfig {
     }
 
     graph(): PerseusGraphType {
-        return {type: "sinusoid", coords: this.startCoords};
+        return {type: "sinusoid", startCoords: this.startCoords};
     }
 }
 

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

@@ -158,7 +158,7 @@ export const StatefulMafsGraph = React.forwardRef<
     const snapTo = graph.type === "polygon" ? graph.snapTo : null;
     const showAngles = graph.type === "polygon" ? graph.showAngles : null;
     const showSides = graph.type === "polygon" ? graph.showSides : null;
-    const startCoords = graph.type === "circle" ? graph.center : graph.coords;
+    const startCoords = graph.startCoords ?? null;
 
     const originalPropsRef = useRef(props);
     const latestPropsRef = useLatestRef(props);