@khanacademy/perseus 23.3.0 → 23.5.0

package/dist/es/index.js

@@ -2,7 +2,7 @@ import * as KAS from '@khanacademy/kas';
 import { MathInputI18nContext, CursorContext, getKeyTranslator, createMathField, getCursorContext, DesktopKeypad, convertDotToTimesByLocale, mathQuillInstance, KeypadInput, KeypadType, KeyArray, keypadElementPropType } from '@khanacademy/math-input';
 import * as PerseusLinter from '@khanacademy/perseus-linter';
 import { linterContextDefault, Rule, linterContextProps } from '@khanacademy/perseus-linter';
-import { View, RenderStateRoot, UniqueIDProvider, useUniqueIdWithMock, Text as Text$2 } from '@khanacademy/wonder-blocks-core';
+import { View, RenderStateRoot, UniqueIDProvider, useLatestRef, useUniqueIdWithMock, Text as Text$2 } from '@khanacademy/wonder-blocks-core';
 import Tooltip$1 from '@khanacademy/wonder-blocks-tooltip';
 import classNames from 'classnames';
 import * as React from 'react';
@@ -29,7 +29,7 @@ import { OptionItem, SingleSelect, MultiSelect } from '@khanacademy/wonder-block
 import caretDown from '@phosphor-icons/core/regular/caret-down.svg';
 import caretUp from '@phosphor-icons/core/regular/caret-up.svg';
 import debounce$2 from 'lodash.debounce';
-import { vec, Ellipse, Line as Line$4, Point as Point$2, useMovable, Text as Text$1, Polygon, Plot as Plot$3, Coordinates, Mafs } from 'mafs';
+import { vec, Ellipse, Line as Line$4, Point as Point$2, Polygon, useMovable, Text as Text$1, Plot as Plot$3, Coordinates, Mafs } from 'mafs';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import { Body, LabelSmall, LabelMedium } from '@khanacademy/wonder-blocks-typography';
 import questionIcon from '@phosphor-icons/core/regular/question.svg';
@@ -3202,7 +3202,7 @@ const DeprecationMixin$1 = {
 /**
  * Approximate equality on numbers and primitives.
  */
-function eq$2(x, y) {
+function eq$3(x, y) {
   if (typeof x === "number" && typeof y === "number") {
     return Math.abs(x - y) < 1e-9;
   }
@@ -3229,7 +3229,7 @@ function deepEq$5(x, y) {
     return false;
   }
   if (typeof x === "function" && typeof y === "function") {
-    return eq$2(x, y);
+    return eq$3(x, y);
   }
   if (typeof x === "function" || typeof y === "function") {
     return false;
@@ -3246,7 +3246,7 @@ function deepEq$5(x, y) {
   if (typeof x === "object" && !!x || typeof y === "object" && !!y) {
     return false;
   }
-  return eq$2(x, y);
+  return eq$3(x, y);
 }
 
 /**
@@ -3547,7 +3547,7 @@ const Util = {
   tickStepFromNumTicks,
   constrainedTickStepsFromTickSteps,
   DeprecationMixin: DeprecationMixin$1,
-  eq: eq$2,
+  eq: eq$3,
   deepEq: deepEq$5,
   parseQueryString,
   updateQueryString: updateQueryString$2,
@@ -10784,7 +10784,7 @@ class WrappedLine extends WrappedDrawing {
  * A collection of geomtry-related utility functions
  */
 const {
-  eq: eq$1,
+  eq: eq$2,
   deepEq: deepEq$4
 } = Util;
 
@@ -10792,17 +10792,21 @@ const {
 
 // a, b, c
 
+// Given a number, return whether it is positive (1), negative (-1), or zero (0)
 function sign(val) {
-  if (eq$1(val, 0)) {
+  if (eq$2(val, 0)) {
     return 0;
   }
   return val > 0 ? 1 : -1;
 }
+
+// Determine whether three points are collinear (0), for a clockwise turn (negative),
+// or counterclockwise turn (positive)
 function ccw(a, b, c) {
   return (b[0] - a[0]) * (c[1] - a[1]) - (c[0] - a[0]) * (b[1] - a[1]);
 }
 function collinear(a, b, c) {
-  return eq$1(ccw(a, b, c), 0);
+  return eq$2(ccw(a, b, c), 0);
 }
 
 // Given rect bounding points A and B, whether point C is inside the rect
@@ -10947,7 +10951,7 @@ function similar(coords1, coords2, tolerance) {
         return pair[0] / pair[1];
       });
       const same = _.all(factors, function (factor) {
-        return eq$1(factors[0], factor);
+        return eq$2(factors[0], factor);
       });
       const congruentEnough = _.all(sidePairs, function (pair) {
         return number.equal(pair[0], pair[1], tolerance);
@@ -10999,7 +11003,7 @@ function rotate(array, n) {
   return array.slice(n).concat(array.slice(0, n));
 }
 function getLineEquation(first, second) {
-  if (eq$1(first[0], second[0])) {
+  if (eq$2(first[0], second[0])) {
     return "x = " + first[0].toFixed(3);
   }
   const m = (second[1] - first[1]) / (second[0] - first[0]);
@@ -28652,13 +28656,15 @@ const ItemExtras = [
 
 const PerseusExpressionAnswerFormConsidered = ["correct", "wrong", "ungraded"];
 const lockedFigureColors = {
+  blue: "#3D7586",
   green: "#447A53",
   grayH: "#3B3D45",
   purple: "#594094",
   pink: "#B25071",
-  red: "#D92916"
+  red: "#D92916",
+  orange: "#946700"
 };
-const lockedEllipseFillStyles = {
+const lockedFigureFillStyles = {
   none: 0,
   solid: 1,
   translucent: 0.4
@@ -28678,7 +28684,7 @@ const LockedEllipse = props => {
     center: center,
     radius: radius,
     angle: angle,
-    fillOpacity: lockedEllipseFillStyles[fillStyle],
+    fillOpacity: lockedFigureFillStyles[fillStyle],
     strokeStyle: strokeStyle,
     color: lockedFigureColors[color]
   });
@@ -28938,6 +28944,29 @@ const LockedPoint = props => {
   });
 };
 
+const LockedPolygon = props => {
+  const {
+    points,
+    color,
+    showVertices,
+    fillStyle,
+    strokeStyle
+  } = props;
+  return /*#__PURE__*/React.createElement("g", {
+    className: "locked-polygon"
+  }, /*#__PURE__*/React.createElement(Polygon, {
+    points: [...points],
+    fillOpacity: lockedFigureFillStyles[fillStyle],
+    strokeStyle: strokeStyle,
+    color: lockedFigureColors[color]
+  }), showVertices && points.map((point, index) => /*#__PURE__*/React.createElement(Point$2, {
+    key: `locked-polygon-point-${index}`,
+    x: point[0],
+    y: point[1],
+    color: lockedFigureColors[color]
+  })));
+};
+
 const LockedVector = props => {
   const {
     color,
@@ -28968,13 +28997,17 @@ const GraphLockedLayer = props => {
           key: `line-${index}`,
           range: props.range
         }, figure));
+      case "vector":
+        return /*#__PURE__*/React.createElement(LockedVector, _extends({
+          key: `vector-${index}`
+        }, figure));
       case "ellipse":
         return /*#__PURE__*/React.createElement(LockedEllipse, _extends({
           key: `ellipse-${index}`
         }, figure));
-      case "vector":
-        return /*#__PURE__*/React.createElement(LockedVector, _extends({
-          key: `vector-${index}`
+      case "polygon":
+        return /*#__PURE__*/React.createElement(LockedPolygon, _extends({
+          key: `polygon-${index}`
         }, figure));
       default:
         /**
@@ -28988,6 +29021,13 @@ const GraphLockedLayer = props => {
   }));
 };
 
+const REINITIALIZE = "reinitialize";
+function reinitialize(params) {
+  return {
+    type: REINITIALIZE,
+    params
+  };
+}
 const MOVE_CONTROL_POINT = "move-control-point";
 function moveControlPoint(pointIndex, destination, itemIndex) {
   return {
@@ -29250,6 +29290,7 @@ function useControlPoint(point, color, onMovePoint) {
   });
   const focusableHandle = /*#__PURE__*/React.createElement("g", {
     "data-testid": "movable-point__focusable-handle",
+    className: "movable-point__focusable-handle",
     tabIndex: 0,
     ref: keyboardHandleRef,
     onFocus: () => setFocused(true),
@@ -29419,7 +29460,6 @@ const LinearSystemGraph = props => {
   const {
     coords: lines
   } = props.graphState;
-  const colors = ["var(--movable-line-stroke-color)", "var(--mafs-violet)"];
   return /*#__PURE__*/React.createElement(React.Fragment, null, lines == null ? void 0 : lines.map((line, i) => /*#__PURE__*/React.createElement(MovableLine, {
     key: i,
     points: line,
@@ -29431,7 +29471,7 @@ const LinearSystemGraph = props => {
       end: true
     },
     onMovePoint: (endpointIndex, destination) => dispatch(moveControlPoint(endpointIndex, destination, i)),
-    color: colors[i]
+    color: "var(--movable-line-stroke-color)"
   })), ";");
 };
 
@@ -29503,7 +29543,8 @@ const Angle = ({
   endPoints,
   range,
   polygonLines,
-  showAngles
+  showAngles,
+  snapTo
 }) => {
   const [centerX, centerY] = centerPoint;
   const areClockwise = clockwise$1([centerPoint, ...endPoints]);
@@ -29541,7 +29582,9 @@ const Angle = ({
   if (isOutside) {
     angleInDegrees = 360 - angleInDegrees;
   }
-  const angleLabelNumber = parseFloat(angleInDegrees.toFixed(1));
+
+  // Only want to show whole numbers when in angles mode
+  const angleLabelNumber = parseFloat(angleInDegrees.toFixed(snapTo === "angles" ? 0 : 1));
   const angleLabel = Number.isInteger(angleLabelNumber) ? angleLabelNumber : "≈ " + angleLabelNumber;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("filter", {
     id: "background",
@@ -29627,15 +29670,17 @@ const StyledMovablePoint = props => {
     point,
     onMove,
     cursor,
-    color: color$1 = color.blue
+    color: color$1 = color.blue,
+    snapTo
   } = props;
+  const snapToValue = snapTo != null ? snapTo : "grid";
   const {
     dragging
   } = useMovable({
     gestureTarget: elementRef,
     point,
     onMove,
-    constrain: p => snap(snapStep, p)
+    constrain: p => ["angles", "sides"].includes(snapToValue) ? p : snap(snapStep, p)
   });
   return /*#__PURE__*/React.createElement(MovablePointView, {
     ref: elementRef,
@@ -29661,7 +29706,8 @@ const PolygonGraph = props => {
     showAngles,
     showSides,
     range,
-    snapStep
+    snapStep,
+    snapTo
   } = props.graphState;
 
   // TODO(benchristel): can the default set of points be removed here? I don't
@@ -29669,6 +29715,7 @@ const PolygonGraph = props => {
   const points = coords != null ? coords : [[0, 0]];
   const ref = React.useRef(null);
   const dragReferencePoint = points[0];
+  const snapToValue = snapTo != null ? snapTo : "grid";
   const {
     dragging
   } = useMovable({
@@ -29678,7 +29725,7 @@ const PolygonGraph = props => {
       const delta = vec.sub(newPoint, dragReferencePoint);
       dispatch(moveAll(delta));
     },
-    constrain: p => snap(snapStep, p)
+    constrain: p => ["angles", "sides"].includes(snapToValue) ? p : snap(snapStep, p)
   });
   const active = hovered || focused || dragging;
   const lines = getLines(points);
@@ -29701,11 +29748,12 @@ const PolygonGraph = props => {
       active: active,
       range: range,
       polygonLines: lines,
-      showAngles: !!showAngles
+      showAngles: !!showAngles,
+      snapTo: snapToValue
     });
   }), showSides && lines.map(([start, end], i) => {
     const [x, y] = vec.midpoint(start, end);
-    const length = parseFloat(vec.dist(start, end).toFixed(1));
+    const length = parseFloat(vec.dist(start, end).toFixed(snapTo === "sides" ? 0 : 1));
     return /*#__PURE__*/React.createElement(TextLabel, {
       key: "side-" + i,
       x: x,
@@ -29729,143 +29777,12 @@ const PolygonGraph = props => {
     }
   }), points.map((point, i) => /*#__PURE__*/React.createElement(StyledMovablePoint, {
     key: "point-" + i,
+    snapTo: snapTo,
     point: point,
     onMove: destination => dispatch(movePoint(i, destination))
   })));
 };
 
-function initializeGraphState(params) {
-  const {
-    graph,
-    step,
-    snapStep,
-    range
-  } = params;
-  const shared = {
-    hasBeenInteractedWith: false,
-    range,
-    snapStep
-  };
-  switch (graph.type) {
-    case "segment":
-      return _extends({}, shared, {
-        type: "segment",
-        coords: getSegmentCoords({
-          graph,
-          step,
-          range
-        })
-      });
-    case "linear":
-      return _extends({}, shared, {
-        type: graph.type,
-        coords: getLineCoords({
-          graph,
-          range,
-          step
-        })
-      });
-    case "ray":
-      return _extends({}, shared, {
-        type: graph.type,
-        coords: getLineCoords({
-          graph,
-          range,
-          step
-        })
-      });
-    case "linear-system":
-      return _extends({}, shared, {
-        type: graph.type,
-        coords: getLinearSystemCoords({
-          graph,
-          range,
-          step
-        })
-      });
-    case "polygon":
-      return _extends({}, shared, {
-        type: "polygon",
-        showAngles: Boolean(graph.showAngles),
-        showSides: Boolean(graph.showSides),
-        coords: getPolygonCoords({
-          graph,
-          range,
-          step
-        })
-      });
-    case "point":
-      return _extends({}, shared, {
-        type: graph.type,
-        coords: getDefaultPoints({
-          graph,
-          step,
-          range
-        })
-      });
-    case "circle":
-      return _extends({}, shared, {
-        type: graph.type
-      }, getCircleCoords(graph));
-    case "quadratic":
-      return _extends({}, shared, {
-        type: graph.type,
-        coords: getQuadraticCoords(graph, range, step)
-      });
-    case "sinusoid":
-      return _extends({}, shared, {
-        type: graph.type,
-        coords: getSinusoidCoords(graph, range, step)
-      });
-    case "angle":
-      throw new Error("Mafs not yet implemented for graph type: " + graph.type);
-    default:
-      throw new UnreachableCaseError(graph);
-  }
-}
-const getDefaultPoints = ({
-  graph,
-  range,
-  step
-}) => {
-  var _graph$coords;
-  const numPoints = graph.numPoints || 1;
-  let coords = (_graph$coords = graph.coords) == null ? void 0 : _graph$coords.slice();
-  if (coords) {
-    return coords;
-  }
-  switch (numPoints) {
-    case 1:
-      // Back in the day, one point's coords were in graph.coord
-      coords = [graph.coord || [0, 0]];
-      break;
-    case 2:
-      coords = [[-5, 0], [5, 0]];
-      break;
-    case 3:
-      coords = [[-5, 0], [0, 0], [5, 0]];
-      break;
-    case 4:
-      coords = [[-6, 0], [-2, 0], [2, 0], [6, 0]];
-      break;
-    case 5:
-      coords = [[-6, 0], [-3, 0], [0, 0], [3, 0], [6, 0]];
-      break;
-    case 6:
-      coords = [[-5, 0], [-3, 0], [-1, 0], [1, 0], [3, 0], [5, 0]];
-      break;
-    default:
-      coords = [];
-      break;
-  }
-  // Transform coords from their -10 to 10 space to 0 to 1
-  // because of the old graph.coord, and also it's easier.
-  const newCoords = normalizeCoords(coords, [[-10, 10], [-10, 10]]);
-  return normalizePoints(range, step, newCoords);
-};
-
-// TS v4 doesn't narrow return types, while v5 does.
-// Instead of updating to v5, using generic type to relate input and output types.
 function getGradableGraph(state, initialGraph) {
   if (!state.hasBeenInteractedWith) {
     return _extends({}, initialGraph);
@@ -29918,115 +29835,6 @@ function getGradableGraph(state, initialGraph) {
   }
   throw new Error("Mafs is not yet implemented for graph type: " + initialGraph.type);
 }
-const getSegmentCoords = ({
-  graph,
-  range,
-  step
-}) => {
-  if (graph.coords) {
-    return graph.coords;
-  }
-  const ys = n => {
-    switch (n) {
-      case 2:
-        return [5, -5];
-      case 3:
-        return [5, 0, -5];
-      case 4:
-        return [6, 2, -2, -6];
-      case 5:
-        return [6, 3, 0, -3, -6];
-      case 6:
-        return [5, 3, 1, -1, -3, -5];
-      default:
-        return [5];
-    }
-  };
-  const defaultRange = [[-10, 10], [-10, 10]];
-  return ys(graph.numSegments).map(y => {
-    let endpoints = [[-5, y], [5, y]];
-    endpoints = normalizeCoords(endpoints, defaultRange);
-    endpoints = normalizePoints(range, step, endpoints);
-    return endpoints;
-  });
-};
-const defaultLinearCoords = [[[0.25, 0.75], [0.75, 0.75]], [[0.25, 0.25], [0.75, 0.25]]];
-const getLineCoords = ({
-  graph,
-  range,
-  step
-}) => {
-  if (graph.coords) {
-    return graph.coords;
-  }
-  return normalizePoints(range, step, defaultLinearCoords[0]);
-};
-const getLinearSystemCoords = ({
-  graph,
-  range,
-  step
-}) => {
-  if (graph.coords) {
-    return graph.coords;
-  }
-  return defaultLinearCoords.map(points => normalizePoints(range, step, points));
-};
-const getPolygonCoords = ({
-  graph,
-  range,
-  step
-}) => {
-  var _graph$coords2;
-  let coords = (_graph$coords2 = graph.coords) == null ? void 0 : _graph$coords2.slice();
-  if (coords) {
-    return coords;
-  }
-  const n = graph.numSides || 3;
-  if (n === "unlimited") {
-    coords = [];
-  } else {
-    const angle = 2 * Math.PI / n;
-    const offset = (1 / n - 1 / 2) * Math.PI;
-
-    // TODO(alex): Generalize this to more than just triangles so that
-    // all polygons have whole number side lengths if snapping to sides
-    const radius = graph.snapTo === "sides" ? Math.sqrt(3) / 3 * 7 : 4;
-
-    // Generate coords of a regular polygon with n sides
-    coords = [...Array(n).keys()].map(i => [radius * Math.cos(i * angle + offset), radius * Math.sin(i * angle + offset)]);
-  }
-  coords = normalizeCoords(coords, [[-10, 10], [-10, 10]]);
-  const snapToGrid = !["angles", "sides"].includes(graph.snapTo || "");
-  coords = normalizePoints(range, step, coords, /* noSnap */!snapToGrid);
-  return coords;
-};
-const getSinusoidCoords = (graph, range, step) => {
-  if (graph.coords) {
-    return [graph.coords[0], graph.coords[1]];
-  }
-  let coords = [[0.5, 0.5], [0.65, 0.6]];
-  coords = normalizePoints(range, step, coords, true);
-  return coords;
-};
-const getQuadraticCoords = (graph, range, step) => {
-  if (graph.coords) {
-    return graph.coords;
-  }
-  const defaultCoords = [[0.25, 0.75], [0.5, 0.25], [0.75, 0.75]];
-  return normalizePoints(range, step, defaultCoords, true);
-};
-const getCircleCoords = (graph, range, step) => {
-  if (graph.center != null && graph.radius != null) {
-    return {
-      center: graph.center,
-      radiusPoint: vec.add(graph.center, [graph.radius, 0])
-    };
-  }
-  return {
-    center: [0, 0],
-    radiusPoint: [1, 0]
-  };
-};
 
 /**
  * determine radius of a circle graph
@@ -30160,38 +29968,16 @@ function QuadraticGraph(props) {
 
   // Calculate the y value based on the current x value
   const y = x => (a * x + b) * x + c;
-  const handleOnMove = (destination, elementId) => {
-    // If the destination is invalid, we want do not want to move the point
-    const validDestination = isValidDestination(destination, elementId, coords);
-    if (validDestination === false) {
-      return;
-    }
-    dispatch(movePoint(elementId, destination));
-  };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Plot$3.OfX, {
     y: y,
     color: color.blue
   }), coords.map((coord, i) => /*#__PURE__*/React.createElement(StyledMovablePoint, {
     key: "point-" + i,
     point: coord,
-    onMove: destination => handleOnMove(destination, i)
+    onMove: destination => dispatch(movePoint(i, destination))
   })));
 }
 
-// Ensure that we are only snapping to coordinates that result in a valid quadratic equation
-const isValidDestination = (destination, elementId, coords) => {
-  // Set up the new coords and check if the quadratic coefficients are valid
-  const newCoords = [...coords];
-  newCoords[elementId] = destination;
-  const QuadraticCoefficients = getQuadraticCoefficients(newCoords);
-
-  // If the new destination results in an invalid quadratic equation, we don't want to move the point
-  if (QuadraticCoefficients === undefined) {
-    return false;
-  }
-  return true;
-};
-
 // Get the quadratic coefficients from the 3 control points
 // These equations were originally set up in 2013 and may require some
 // additional comments to help clarify the quadratic formula manipulations
@@ -31335,8 +31121,207 @@ const LegacyGrid = ({
   return null;
 };
 
+function initializeGraphState(params) {
+  var _graph$snapTo;
+  const {
+    graph,
+    step,
+    snapStep,
+    range
+  } = params;
+  const shared = {
+    hasBeenInteractedWith: false,
+    range,
+    snapStep
+  };
+  switch (graph.type) {
+    case "segment":
+      return _extends({}, shared, {
+        type: "segment",
+        coords: getSegmentCoords(graph, range, step)
+      });
+    case "linear":
+      return _extends({}, shared, {
+        type: graph.type,
+        coords: getLineCoords(graph, range, step)
+      });
+    case "ray":
+      return _extends({}, shared, {
+        type: graph.type,
+        coords: getLineCoords(graph, range, step)
+      });
+    case "linear-system":
+      return _extends({}, shared, {
+        type: graph.type,
+        coords: getLinearSystemCoords(graph, range, step)
+      });
+    case "polygon":
+      return _extends({}, shared, {
+        type: "polygon",
+        showAngles: Boolean(graph.showAngles),
+        showSides: Boolean(graph.showSides),
+        coords: getPolygonCoords(graph, range, step),
+        snapTo: (_graph$snapTo = graph.snapTo) != null ? _graph$snapTo : "grid"
+      });
+    case "point":
+      return _extends({}, shared, {
+        type: graph.type,
+        coords: getPointCoords(graph, range, step)
+      });
+    case "circle":
+      return _extends({}, shared, {
+        type: graph.type
+      }, getCircleCoords(graph));
+    case "quadratic":
+      return _extends({}, shared, {
+        type: graph.type,
+        coords: getQuadraticCoords(graph, range, step)
+      });
+    case "sinusoid":
+      return _extends({}, shared, {
+        type: graph.type,
+        coords: getSinusoidCoords(graph, range, step)
+      });
+    case "angle":
+      throw new Error("Mafs not yet implemented for graph type: " + graph.type);
+    default:
+      throw new UnreachableCaseError(graph);
+  }
+}
+function getPointCoords(graph, range, step) {
+  var _graph$coords;
+  const numPoints = graph.numPoints || 1;
+  let coords = (_graph$coords = graph.coords) == null ? void 0 : _graph$coords.slice();
+  if (coords) {
+    return coords;
+  }
+  switch (numPoints) {
+    case 1:
+      // Back in the day, one point's coords were in graph.coord
+      coords = [graph.coord || [0, 0]];
+      break;
+    case 2:
+      coords = [[-5, 0], [5, 0]];
+      break;
+    case 3:
+      coords = [[-5, 0], [0, 0], [5, 0]];
+      break;
+    case 4:
+      coords = [[-6, 0], [-2, 0], [2, 0], [6, 0]];
+      break;
+    case 5:
+      coords = [[-6, 0], [-3, 0], [0, 0], [3, 0], [6, 0]];
+      break;
+    case 6:
+      coords = [[-5, 0], [-3, 0], [-1, 0], [1, 0], [3, 0], [5, 0]];
+      break;
+    default:
+      coords = [];
+      break;
+  }
+  // Transform coords from their -10 to 10 space to 0 to 1
+  // because of the old graph.coord, and also it's easier.
+  const newCoords = normalizeCoords(coords, [[-10, 10], [-10, 10]]);
+  return normalizePoints(range, step, newCoords);
+}
+function getSegmentCoords(graph, range, step) {
+  if (graph.coords) {
+    return graph.coords;
+  }
+  const ys = n => {
+    switch (n) {
+      case 2:
+        return [5, -5];
+      case 3:
+        return [5, 0, -5];
+      case 4:
+        return [6, 2, -2, -6];
+      case 5:
+        return [6, 3, 0, -3, -6];
+      case 6:
+        return [5, 3, 1, -1, -3, -5];
+      default:
+        return [5];
+    }
+  };
+  const defaultRange = [[-10, 10], [-10, 10]];
+  return ys(graph.numSegments).map(y => {
+    let endpoints = [[-5, y], [5, y]];
+    endpoints = normalizeCoords(endpoints, defaultRange);
+    endpoints = normalizePoints(range, step, endpoints);
+    return endpoints;
+  });
+}
+const defaultLinearCoords = [[[0.25, 0.75], [0.75, 0.75]], [[0.25, 0.25], [0.75, 0.25]]];
+function getLineCoords(graph, range, step) {
+  if (graph.coords) {
+    return graph.coords;
+  }
+  return normalizePoints(range, step, defaultLinearCoords[0]);
+}
+function getLinearSystemCoords(graph, range, step) {
+  if (graph.coords) {
+    return graph.coords;
+  }
+  return defaultLinearCoords.map(points => normalizePoints(range, step, points));
+}
+function getPolygonCoords(graph, range, step) {
+  var _graph$coords2;
+  let coords = (_graph$coords2 = graph.coords) == null ? void 0 : _graph$coords2.slice();
+  if (coords) {
+    return coords;
+  }
+  const n = graph.numSides || 3;
+  if (n === "unlimited") {
+    coords = [];
+  } else {
+    const angle = 2 * Math.PI / n;
+    const offset = (1 / n - 1 / 2) * Math.PI;
+
+    // TODO(alex): Generalize this to more than just triangles so that
+    // all polygons have whole number side lengths if snapping to sides
+    const radius = graph.snapTo === "sides" ? Math.sqrt(3) / 3 * 7 : 4;
+
+    // Generate coords of a regular polygon with n sides
+    coords = [...Array(n).keys()].map(i => [radius * Math.cos(i * angle + offset), radius * Math.sin(i * angle + offset)]);
+  }
+  coords = normalizeCoords(coords, [[-10, 10], [-10, 10]]);
+  const snapToGrid = !["angles", "sides"].includes(graph.snapTo || "");
+  coords = normalizePoints(range, step, coords, /* noSnap */!snapToGrid);
+  return coords;
+}
+function getSinusoidCoords(graph, range, step) {
+  if (graph.coords) {
+    return [graph.coords[0], graph.coords[1]];
+  }
+  let coords = [[0.5, 0.5], [0.65, 0.6]];
+  coords = normalizePoints(range, step, coords, true);
+  return coords;
+}
+function getQuadraticCoords(graph, range, step) {
+  if (graph.coords) {
+    return graph.coords;
+  }
+  const defaultCoords = [[0.25, 0.75], [0.5, 0.25], [0.75, 0.75]];
+  return normalizePoints(range, step, defaultCoords, true);
+}
+function getCircleCoords(graph) {
+  if (graph.center != null && graph.radius != null) {
+    return {
+      center: graph.center,
+      radiusPoint: vec.add(graph.center, [graph.radius, 0])
+    };
+  }
+  return {
+    center: [0, 0],
+    radiusPoint: [2, 0]
+  };
+}
+
 function interactiveGraphReducer(state, action) {
   switch (action.type) {
+    case REINITIALIZE:
+      return initializeGraphState(action.params);
     case MOVE_CONTROL_POINT:
       return doMoveControlPoint(state, action);
     case MOVE_LINE:
@@ -31468,11 +31453,20 @@ function doMoveAll(state, action) {
   switch (state.type) {
     case "polygon":
       {
-        const change = getChange(state.coords, action.delta, {
-          snapStep,
-          range
-        });
-        const newCoords = state.coords.map(point => snap(snapStep, vec.add(point, change)));
+        let newCoords;
+        if (state.snapTo === "sides" || state.snapTo === "angles") {
+          const change = getChange(state.coords, action.delta, {
+            snapStep: [0, 0],
+            range
+          });
+          newCoords = state.coords.map(point => vec.add(point, change));
+        } else {
+          const change = getChange(state.coords, action.delta, {
+            snapStep,
+            range
+          });
+          newCoords = state.coords.map(point => snap(snapStep, vec.add(point, change)));
+        }
         return _extends({}, state, {
           hasBeenInteractedWith: true,
           coords: newCoords
@@ -31486,10 +31480,18 @@ function doMoveAll(state, action) {
 function doMovePoint(state, action) {
   switch (state.type) {
     case "polygon":
+      let newValue;
+      if (state.snapTo === "sides") {
+        newValue = boundAndSnapToSides(action.destination, state, action.index);
+      } else if (state.snapTo === "angles") {
+        newValue = boundAndSnapToAngle(action.destination, state, action.index);
+      } else {
+        newValue = boundAndSnapToGrid(action.destination, state);
+      }
       const newCoords = setAtIndex({
         array: state.coords,
         index: action.index,
-        newValue: boundAndSnapToGrid(action.destination, state)
+        newValue: newValue
       });
 
       // Reject the move if it would cause the sides of the polygon to cross
@@ -31532,6 +31534,15 @@ function doMovePoint(state, action) {
       }
     case "quadratic":
       {
+        // Set up the new coords and check if the quadratic coefficients are valid
+        const _newCoords2 = [...state.coords];
+        _newCoords2[action.index] = action.destination;
+        const QuadraticCoefficients = getQuadraticCoefficients(_newCoords2);
+
+        // If the new destination results in an invalid quadratic equation, we don't want to move the point
+        if (QuadraticCoefficients === undefined) {
+          return state;
+        }
         return _extends({}, state, {
           hasBeenInteractedWith: true,
           coords: setAtIndex({
@@ -31624,14 +31635,8 @@ function doChangeRange(state, action) {
     range: action.range
   });
 }
-const getChange = (coords, delta, constraintOpts) => {
+const getDeltaVertex = (maxMoves, minMoves, delta) => {
   const [deltaX, deltaY] = delta;
-  const maxMoves = coords.map(point => maxMove(_extends({}, constraintOpts, {
-    point
-  })));
-  const minMoves = coords.map(point => minMove(_extends({}, constraintOpts, {
-    point
-  })));
   const maxXMove = Math.min(...maxMoves.map(move => move[0]));
   const maxYMove = Math.min(...maxMoves.map(move => move[1]));
   const minXMove = Math.max(...minMoves.map(move => move[0]));
@@ -31640,6 +31645,22 @@ const getChange = (coords, delta, constraintOpts) => {
   const dy = clamp(deltaY, minYMove, maxYMove);
   return [dx, dy];
 };
+const getChange = (coords, delta, constraintOpts) => {
+  const maxMoves = coords.map(point => maxMove(_extends({}, constraintOpts, {
+    point
+  })));
+  const minMoves = coords.map(point => minMove(_extends({}, constraintOpts, {
+    point
+  })));
+  const [dx, dy] = getDeltaVertex(maxMoves, minMoves, delta);
+  return [dx, dy];
+};
+const eq$1 = Util.eq;
+
+// Less than or approximately equal
+function leq$1(a, b) {
+  return a < b || eq$1(a, b);
+}
 function boundAndSnapToGrid(point, {
   snapStep,
   range
@@ -31650,6 +31671,131 @@ function boundAndSnapToGrid(point, {
     point
   }));
 }
+function boundAndSnapToAngle(destinationPoint, {
+  range,
+  coords
+}, index) {
+  const startingPoint = coords[index];
+
+  // Needed to prevent updating the original coords before the checks for
+  // degenerate triangles and overlapping sides
+  const coordsCopy = [...coords];
+
+  // Takes the destination point and makes sure it is within the bounds of the graph
+  // SnapStep is [0, 0] because we don't want to snap to the grid
+  coordsCopy[index] = bound$1({
+    snapStep: [0, 0],
+    range,
+    point: destinationPoint
+  });
+
+  // Gets the radian angles between the coords and maps them to degrees
+  const angles = angleMeasures(coordsCopy).map(angle => angle * 180 / Math.PI);
+
+  // Gets the relative index of a point
+  const rel = j => {
+    return (index + j + coordsCopy.length) % coordsCopy.length;
+  };
+
+  // Round the angles to left and right of the current point
+  _.each([-1, 1], function (j) {
+    angles[rel(j)] = Math.round(angles[rel(j)]);
+  });
+  const getAngle = function getAngle(a, vertex, b) {
+    const angle = GraphUtils.findAngle(coordsCopy[rel(a)], coordsCopy[rel(b)], coordsCopy[rel(vertex)]);
+    return (angle + 360) % 360;
+  };
+  const innerAngles = [angles[rel(-1)] - getAngle(-2, -1, 1), angles[rel(1)] - getAngle(-1, 1, 2)];
+  innerAngles[2] = 180 - (innerAngles[0] + innerAngles[1]);
+
+  // Avoid degenerate triangles
+  if (innerAngles.some(function (angle) {
+    return leq$1(angle, 1);
+  })) {
+    return startingPoint;
+  }
+  const knownSide = magnitude(
+  // @ts-expect-error - TS2345 - Argument of type 'number[]' is not assignable to parameter of type 'readonly Coord[]'.
+  vector(coordsCopy[rel(-1)], coordsCopy[rel(1)]));
+
+  // Returns true if the points form a counter-clockwise turn;
+  // a.k.a if the point is on the left or right of the polygon.
+  // This is used to determine how to adjust the point: if the point is on the left,
+  // we want to add the inner angle to the outer angle, and if it's on the right,
+  // we want to subtract the inner angle from the outer angle. The angle solved
+  // for is then used in the polar function to determine the new point.
+  const onLeft = sign(ccw(coordsCopy[rel(-1)], coordsCopy[rel(1)], coordsCopy[index])) === 1;
+
+  // Solve for side by using the law of sines
+  const side = Math.sin(innerAngles[1] * Math.PI / 180) / Math.sin(innerAngles[2] * Math.PI / 180) * knownSide;
+
+  // Angle at the second vertex of the polygon
+  const outerAngle = GraphUtils.findAngle(coordsCopy[rel(1)], coordsCopy[rel(-1)]);
+
+  // Uses the length of the side of the polygon (radial coordinate)
+  // and the angle between the first and second sides of the
+  // polygon (angular coordinate) to determine how to adjust the point
+  const offset = polar(side, outerAngle + (onLeft ? 1 : -1) * innerAngles[0]);
+  return vector$1.add(coordsCopy[rel(-1)], offset);
+}
+function boundAndSnapToSides(destinationPoint, {
+  range,
+  coords
+}, index) {
+  const startingPoint = coords[index];
+
+  // Needed to prevent updating the original coords before the checks for
+  // degenerate triangles and overlapping sides
+  const coordsCopy = [...coords];
+
+  // Takes the destination point and makes sure it is within the bounds of the graph
+  // SnapStep is [0, 0] because we don't want to snap to the grid
+  coordsCopy[index] = bound$1({
+    snapStep: [0, 0],
+    range,
+    point: destinationPoint
+  });
+
+  // Gets the relative index of a point
+  const rel = j => {
+    return (index + j + coordsCopy.length) % coordsCopy.length;
+  };
+  const sides = _.map([[coordsCopy[rel(-1)], coordsCopy[index]], [coordsCopy[index], coordsCopy[rel(1)]], [coordsCopy[rel(-1)], coordsCopy[rel(1)]]], function (coordsCopy) {
+    // @ts-expect-error - TS2345 - Argument of type 'number[]' is not assignable to parameter of type 'readonly Coord[]'. | TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
+    return magnitude(vector(...coordsCopy));
+  });
+
+  // Round the sides to left and right of the current point
+  _.each([0, 1], function (j) {
+    sides[j] = Math.round(sides[j]);
+  });
+
+  // Avoid degenerate triangles
+  if (leq$1(sides[1] + sides[2], sides[0]) || leq$1(sides[0] + sides[2], sides[1]) || leq$1(sides[0] + sides[1], sides[2])) {
+    return startingPoint;
+  }
+
+  // Solve for angle by using the law of cosines
+  // Angle at the first vertex of the polygon
+  const innerAngle = lawOfCosines(sides[0], sides[2], sides[1]);
+
+  // Angle at the second vertex of the polygon
+  const outerAngle = GraphUtils.findAngle(coordsCopy[rel(1)], coordsCopy[rel(-1)]);
+
+  // Returns true if the points form a counter-clockwise turn;
+  // a.k.a if the point is on the left or right of the polygon.
+  // This is used to determine how to adjust the point: if the point is on the left,
+  // we want to add the inner angle to the outer angle, and if it's on the right,
+  // we want to subtract the inner angle from the outer angle. The angle solved
+  // for is then used in the polar function to determine the new point.
+  const onLeft = sign(ccw(coordsCopy[rel(-1)], coordsCopy[rel(1)], coordsCopy[index])) === 1;
+
+  // Uses the length of the first side of the polygon (radial coordinate)
+  // and the angle between the first and second sides of the
+  // polygon (angular coordinate) to determine how to adjust the point
+  const offset = polar(sides[0], outerAngle + (onLeft ? 1 : -1) * innerAngle);
+  return vector$1.add(coordsCopy[rel(-1)], offset);
+}
 
 // Returns the closest point to the given `point` that is within the graph
 // bounds given in `state`.
@@ -31664,7 +31810,7 @@ function bound$1({
   return [clamp(requestedX, minX + snapX, maxX - snapX), clamp(requestedY, minY + snapY, maxY - snapY)];
 }
 
-// Returns the vector from the given point to the top-right corner of the graph
+// Returns the vector from the given point to the top-right corner of the graph when snapped to the grid
 function maxMove({
   snapStep,
   range,
@@ -31678,8 +31824,7 @@ function maxMove({
   return vec.sub(topRight, point);
 }
 
-// Returns the vector from the given point to the bottom-left corner of the
-// graph
+// Returns the vector from the given point to the bottom-left corner of the graph when snapped to the grid
 function minMove({
   snapStep,
   range,
@@ -31801,11 +31946,12 @@ function mafsStateToInteractiveGraph(state) {
 }
 const StatefulMafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
-    onChange
+    onChange,
+    graph
   } = props;
   const [state, dispatch] = React.useReducer(interactiveGraphReducer, props, initializeGraphState);
   useImperativeHandle(ref, () => ({
-    getUserInput: () => getGradableGraph(state, props.graph)
+    getUserInput: () => getGradableGraph(state, graph)
   }));
   const prevState = useRef(state);
   useEffect(() => {
@@ -31828,6 +31974,18 @@ const StatefulMafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
   useEffect(() => {
     dispatch(changeRange([[xMinRange, xMaxRange], [yMinRange, yMaxRange]]));
   }, [dispatch, xMinRange, xMaxRange, yMinRange, yMaxRange]);
+  const numSegments = graph.type === "segment" ? graph.numSegments : null;
+  const originalPropsRef = useRef(props);
+  const latestPropsRef = useLatestRef(props);
+  useEffect(() => {
+    // This conditional prevents the state from being "reinitialized" right
+    // after the first render. This is an optimization, but also prevents
+    // a bug where the graph would be marked "incorrect" during grading
+    // even if the user never interacted with it.
+    if (latestPropsRef.current !== originalPropsRef.current) {
+      dispatch(reinitialize(latestPropsRef.current));
+    }
+  }, [graph.type, numSegments, latestPropsRef]);
   return /*#__PURE__*/React.createElement(MafsGraph, _extends({}, props, {
     state: state,
     dispatch: dispatch
@@ -43994,7 +44152,7 @@ const init = function init(options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "23.3.0";
+const libVersion = "23.5.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -46995,5 +47153,5 @@ const EditorJsonify = {
   }
 };
 
-export { ApiOptions, ArrowPicker, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, ColorPicker, DashPicker, dependencies as Dependencies, EditorJsonify, ElementContainer, Errors, Expression, util as GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusError, PerseusExpressionAnswerFormConsidered, PerseusI18nContext, PerseusI18nContextProvider, PerseusMarkdown, Plotter$1 as PlotterWidget, QUESTION_WIDGETS, Radio, Renderer, ref as ServerItemRenderer, sizingUtils as SizingUtils, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, WidgetJsonifyDeprecated, widgets$1 as Widgets, addWidget, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, contentHasWidgetType, convertWidgetNameToEnum, displaySigFigs, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestInteractiveGraphWidget, generateTestNumericInputWidget, generateTestPerseusItem, generateTestRadioWidget, genericPerseusItemData, getAnswerFromUserInput, getAnswersFromWidgets, getCorrectAnswerForWidgetId, getValidWidgetIds, getWidgetFromWidgetMap, getWidgetIdsFromContent, getWidgetIdsFromContentByType, getWidgetTypeByWidgetId, getWidgetsFromWidgetMap, getWidgetsMapFromItemData, globalConstants, globalStyles, iconPaths as icons, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, isWidgetIdInContent, isWrongAnswerSupported, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, lockedEllipseFillStyles, lockedFigureColors, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, shouldHaveIndividualAnswer, traverse, usePerseusI18n, violatingWidgets, allWidgets as widgets };
+export { ApiOptions, ArrowPicker, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, ColorPicker, DashPicker, dependencies as Dependencies, EditorJsonify, ElementContainer, Errors, Expression, util as GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusError, PerseusExpressionAnswerFormConsidered, PerseusI18nContext, PerseusI18nContextProvider, PerseusMarkdown, Plotter$1 as PlotterWidget, QUESTION_WIDGETS, Radio, Renderer, ref as ServerItemRenderer, sizingUtils as SizingUtils, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, WidgetJsonifyDeprecated, widgets$1 as Widgets, addWidget, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, contentHasWidgetType, convertWidgetNameToEnum, displaySigFigs, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestInteractiveGraphWidget, generateTestNumericInputWidget, generateTestPerseusItem, generateTestRadioWidget, genericPerseusItemData, getAnswerFromUserInput, getAnswersFromWidgets, getCorrectAnswerForWidgetId, getValidWidgetIds, getWidgetFromWidgetMap, getWidgetIdsFromContent, getWidgetIdsFromContentByType, getWidgetTypeByWidgetId, getWidgetsFromWidgetMap, getWidgetsMapFromItemData, globalConstants, globalStyles, iconPaths as icons, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, isWidgetIdInContent, isWrongAnswerSupported, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, lockedFigureColors, lockedFigureFillStyles, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, shouldHaveIndividualAnswer, traverse, usePerseusI18n, violatingWidgets, allWidgets as widgets };
 //# sourceMappingURL=index.js.map