diff --git a/packages/perseus-editor/src/components/__tests__/start-coord-settings.test.tsx b/packages/perseus-editor/src/components/__tests__/start-coord-settings.test.tsx index 696ad93f6f..678e8b149d 100644 --- a/packages/perseus-editor/src/components/__tests__/start-coord-settings.test.tsx +++ b/packages/perseus-editor/src/components/__tests__/start-coord-settings.test.tsx @@ -60,7 +60,7 @@ describe("StartCoordSettings", () => { type ${"linear"} ${"ray"} - `(`graphs with CollinearTuple startCoords`, ({type}) => { + `(`graphs with CollinearTuple coords`, ({type}) => { test(`shows the start coordinates UI for ${type}`, () => { // Arrange @@ -131,7 +131,7 @@ describe("StartCoordSettings", () => { render( void; + onChange: (coords: CollinearTuple) => void; }; type PropsInner = { type: PerseusGraphType["type"]; - startCoords: CollinearTuple; - onChange: (startCoords: CollinearTuple) => void; + coords: CollinearTuple; + onChange: (coords: CollinearTuple) => void; }; const StartCoordSettingsInner = (props: PropsInner) => { - const {type, startCoords, onChange} = props; + const {type, coords, onChange} = props; // Check if coords is of type CollinearTuple switch (type) { @@ -41,19 +41,15 @@ const StartCoordSettingsInner = (props: PropsInner) => { Point 1 - onChange([value, startCoords[1]]) - } + coord={coords[0]} + onChange={(value) => onChange([value, coords[1]])} /> Point 2 - onChange([startCoords[0], value]) - } + coord={coords[1]} + onChange={(value) => onChange([coords[0], value])} /> @@ -87,7 +83,7 @@ const StartCoordSettings = (props: Props) => { <> diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor.tsx index 5f33ca802a..97a73d716b 100644 --- a/packages/perseus-editor/src/widgets/interactive-graph-editor.tsx +++ b/packages/perseus-editor/src/widgets/interactive-graph-editor.tsx @@ -669,7 +669,7 @@ class InteractiveGraphEditor extends React.Component { const graph = { ...this.props.graph, - startCoords: coords, + coords: coords, }; this.props.onChange({graph: graph}); }; @@ -704,7 +704,10 @@ class InteractiveGraphEditor extends React.Component { _.extend(json, { graph: { type: correct.type, - startCoords: this.props.graph?.startCoords, + coords: + this.props.graph?.type === "circle" + ? this.props.graph.center + : this.props.graph?.coords, }, correct: correct, }); diff --git a/packages/perseus/src/perseus-types.ts b/packages/perseus/src/perseus-types.ts index b475d6b47f..b5b6f82d3c 100644 --- a/packages/perseus/src/perseus-types.ts +++ b/packages/perseus/src/perseus-types.ts @@ -785,32 +785,24 @@ export type PerseusGraphTypeAngle = { match?: "congruent"; // must have 3 coords - ie [Coord, Coord, Coord] coords?: [Coord, Coord, Coord]; - // The initial coordinates the graph renders with. - startCoords?: [Coord, Coord, 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 = { @@ -818,8 +810,6 @@ export type PerseusGraphTypePoint = { // The number of points if a "point" type. default: 1. "unlimited" if no limit numPoints?: number | "unlimited"; coords?: ReadonlyArray; - // The initial coordinates the graph renders with. - startCoords?: ReadonlyArray; } & PerseusGraphTypeCommon; export type PerseusGraphTypePolygon = { @@ -835,16 +825,12 @@ export type PerseusGraphTypePolygon = { // How to match the answer. If missing, defaults to exact matching. match?: "similar" | "congruent" | "approx"; coords?: ReadonlyArray; - // The initial coordinates the graph renders with. - startCoords?: ReadonlyArray; } & 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 = { @@ -853,24 +839,18 @@ 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; - // The initial coordinates the graph renders with. - startCoords?: ReadonlyArray; } & 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 = { diff --git a/packages/perseus/src/widgets/interactive-graphs/interactive-graph-question-builder.test.ts b/packages/perseus/src/widgets/interactive-graphs/interactive-graph-question-builder.test.ts index 8894ad74c2..7d47efea66 100644 --- a/packages/perseus/src/widgets/interactive-graphs/interactive-graph-question-builder.test.ts +++ b/packages/perseus/src/widgets/interactive-graphs/interactive-graph-question-builder.test.ts @@ -109,7 +109,7 @@ describe("InteractiveGraphQuestionBuilder", () => { graph: { type: "segment", numSegments: 1, - startCoords: [ + coords: [ [ [0, 0], [2, 2], @@ -150,7 +150,7 @@ describe("InteractiveGraphQuestionBuilder", () => { graph: { type: "segment", numSegments: 2, - startCoords: [ + coords: [ [ [0, 0], [2, 2], @@ -211,7 +211,7 @@ describe("InteractiveGraphQuestionBuilder", () => { expect.objectContaining({ graph: { type: "linear", - startCoords: [ + coords: [ [3, 0], [3, 3], ], @@ -270,7 +270,7 @@ describe("InteractiveGraphQuestionBuilder", () => { expect.objectContaining({ graph: { type: "linear-system", - startCoords: [ + coords: [ [ [-3, 0], [-3, 3], @@ -329,7 +329,7 @@ describe("InteractiveGraphQuestionBuilder", () => { expect.objectContaining({ graph: { type: "ray", - startCoords: [ + coords: [ [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", startCoords: [9, 9], radius: 5}, + graph: {type: "circle", center: [9, 9], radius: 5}, correct: {type: "circle", radius: 5, center: [0, 0]}, }), ); @@ -404,7 +404,7 @@ describe("InteractiveGraphQuestionBuilder", () => { expect.objectContaining({ graph: { type: "quadratic", - startCoords: [ + coords: [ [-1, -1], [0, 0], [1, -1], @@ -453,7 +453,7 @@ describe("InteractiveGraphQuestionBuilder", () => { expect.objectContaining({ graph: { type: "sinusoid", - startCoords: [ + coords: [ [0, 0], [1, -1], ], diff --git a/packages/perseus/src/widgets/interactive-graphs/interactive-graph-question-builder.ts b/packages/perseus/src/widgets/interactive-graphs/interactive-graph-question-builder.ts index b8aaf8a475..5fce468431 100644 --- a/packages/perseus/src/widgets/interactive-graphs/interactive-graph-question-builder.ts +++ b/packages/perseus/src/widgets/interactive-graphs/interactive-graph-question-builder.ts @@ -310,7 +310,7 @@ class SegmentGraphConfig implements InteractiveFigureConfig { return { type: "segment", numSegments: this.numSegments, - startCoords: this.startCoords, + coords: this.startCoords, }; } } @@ -333,7 +333,7 @@ class LinearConfig implements InteractiveFigureConfig { } graph(): PerseusGraphType { - return {type: "linear", startCoords: this.startCoords}; + return {type: "linear", coords: this.startCoords}; } } @@ -361,7 +361,7 @@ class LinearSystemConfig implements InteractiveFigureConfig { } graph(): PerseusGraphType { - return {type: "linear-system", startCoords: this.startCoords}; + return {type: "linear-system", coords: this.startCoords}; } } @@ -383,7 +383,7 @@ class RayConfig implements InteractiveFigureConfig { } graph(): PerseusGraphType { - return {type: "ray", startCoords: this.startCoords}; + return {type: "ray", coords: this.startCoords}; } } @@ -400,7 +400,7 @@ class CircleGraphConfig implements InteractiveFigureConfig { graph(): PerseusGraphType { if (this.startCoords) { - return {type: "circle", startCoords: this.startCoords, radius: 5}; + return {type: "circle", center: this.startCoords, radius: 5}; } return {type: "circle"}; @@ -426,7 +426,7 @@ class QuadraticConfig implements InteractiveFigureConfig { } graph(): PerseusGraphType { - return {type: "quadratic", startCoords: this.startCoords}; + return {type: "quadratic", coords: this.startCoords}; } } @@ -448,7 +448,7 @@ class SinusoidGraphConfig implements InteractiveFigureConfig { } graph(): PerseusGraphType { - return {type: "sinusoid", startCoords: this.startCoords}; + return {type: "sinusoid", coords: this.startCoords}; } } diff --git a/packages/perseus/src/widgets/interactive-graphs/mafs-graph.tsx b/packages/perseus/src/widgets/interactive-graphs/mafs-graph.tsx index 2d300c5346..3ed58ef5b2 100644 --- a/packages/perseus/src/widgets/interactive-graphs/mafs-graph.tsx +++ b/packages/perseus/src/widgets/interactive-graphs/mafs-graph.tsx @@ -162,7 +162,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.startCoords ?? null; + const startCoords = graph.type === "circle" ? graph.center : graph.coords; const originalPropsRef = useRef(props); const latestPropsRef = useLatestRef(props); diff --git a/packages/perseus/src/widgets/interactive-graphs/reducer/initialize-graph-state.ts b/packages/perseus/src/widgets/interactive-graphs/reducer/initialize-graph-state.ts index 63b08a634a..12e556944d 100644 --- a/packages/perseus/src/widgets/interactive-graphs/reducer/initialize-graph-state.ts +++ b/packages/perseus/src/widgets/interactive-graphs/reducer/initialize-graph-state.ts @@ -122,11 +122,6 @@ function getPointCoords( return coords; } - const startCoords = graph.startCoords?.slice(); - if (startCoords) { - return startCoords; - } - switch (numPoints) { case 1: // Back in the day, one point's coords were in graph.coord @@ -195,10 +190,6 @@ function getSegmentCoords( return graph.coords; } - if (graph.startCoords) { - return graph.startCoords; - } - const ys = (n?: number) => { switch (n) { case 2: @@ -252,10 +243,6 @@ export function getLineCoords( return graph.coords; } - if (graph.startCoords) { - return graph.startCoords; - } - return normalizePoints(range, step, defaultLinearCoords[0]); } @@ -268,10 +255,6 @@ function getLinearSystemCoords( return graph.coords; } - if (graph.startCoords) { - return graph.startCoords; - } - return defaultLinearCoords.map((points) => normalizePoints(range, step, points), ); @@ -287,11 +270,6 @@ function getPolygonCoords( return coords; } - const startCoords = graph.startCoords?.slice(); - if (startCoords) { - return startCoords; - } - const n = graph.numSides || 3; if (n === "unlimited") { @@ -331,10 +309,6 @@ function getSinusoidCoords( return [graph.coords[0], graph.coords[1]]; } - if (graph.startCoords) { - return [graph.startCoords[0], graph.startCoords[1]]; - } - let coords: [Coord, Coord] = [ [0.5, 0.5], [0.65, 0.6], @@ -354,10 +328,6 @@ function getQuadraticCoords( return graph.coords; } - if (graph.startCoords) { - return graph.startCoords; - } - const defaultCoords: [Coord, Coord, Coord] = [ [0.25, 0.75], [0.5, 0.25], @@ -378,13 +348,6 @@ function getCircleCoords(graph: PerseusGraphTypeCircle): { }; } - if (graph.startCoords) { - return { - center: graph.startCoords, - radiusPoint: vec.add(graph.startCoords, [2, 0]), - }; - } - return { center: [0, 0], radiusPoint: [2, 0],