@khanacademy/perseus 23.3.0 → 23.5.0

package/dist/index.js

@@ -3304,7 +3304,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;
   }
@@ -3331,7 +3331,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;
@@ -3348,7 +3348,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);
 }
 
 /**
@@ -3647,7 +3647,7 @@ const Util = {
   tickStepFromNumTicks,
   constrainedTickStepsFromTickSteps,
   DeprecationMixin: DeprecationMixin$1,
-  eq: eq$2,
+  eq: eq$3,
   deepEq: deepEq$5,
   parseQueryString,
   updateQueryString: updateQueryString$2,
@@ -10885,7 +10885,7 @@ class WrappedLine extends WrappedDrawing {
  * A collection of geomtry-related utility functions
  */
 const {
-  eq: eq$1,
+  eq: eq$2,
   deepEq: deepEq$4
 } = Util;
 
@@ -10893,17 +10893,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
@@ -11048,7 +11052,7 @@ function similar(coords1, coords2, tolerance) {
         return pair[0] / pair[1];
       });
       const same = ___default["default"].all(factors, function (factor) {
-        return eq$1(factors[0], factor);
+        return eq$2(factors[0], factor);
       });
       const congruentEnough = ___default["default"].all(sidePairs, function (pair) {
         return kmath.number.equal(pair[0], pair[1], tolerance);
@@ -11101,7 +11105,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]);
@@ -28943,13 +28947,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
@@ -28969,7 +28975,7 @@ const LockedEllipse = props => {
     center: center,
     radius: radius,
     angle: angle,
-    fillOpacity: lockedEllipseFillStyles[fillStyle],
+    fillOpacity: lockedFigureFillStyles[fillStyle],
     strokeStyle: strokeStyle,
     color: lockedFigureColors[color]
   });
@@ -29228,6 +29234,29 @@ const LockedPoint = props => {
   });
 };
 
+const LockedPolygon = props => {
+  const {
+    points,
+    color,
+    showVertices,
+    fillStyle,
+    strokeStyle
+  } = props;
+  return /*#__PURE__*/React__namespace.createElement("g", {
+    className: "locked-polygon"
+  }, /*#__PURE__*/React__namespace.createElement(mafs.Polygon, {
+    points: [...points],
+    fillOpacity: lockedFigureFillStyles[fillStyle],
+    strokeStyle: strokeStyle,
+    color: lockedFigureColors[color]
+  }), showVertices && points.map((point, index) => /*#__PURE__*/React__namespace.createElement(mafs.Point, {
+    key: `locked-polygon-point-${index}`,
+    x: point[0],
+    y: point[1],
+    color: lockedFigureColors[color]
+  })));
+};
+
 const LockedVector = props => {
   const {
     color,
@@ -29258,13 +29287,17 @@ const GraphLockedLayer = props => {
           key: `line-${index}`,
           range: props.range
         }, figure));
+      case "vector":
+        return /*#__PURE__*/React__namespace.createElement(LockedVector, _extends({
+          key: `vector-${index}`
+        }, figure));
       case "ellipse":
         return /*#__PURE__*/React__namespace.createElement(LockedEllipse, _extends({
           key: `ellipse-${index}`
         }, figure));
-      case "vector":
-        return /*#__PURE__*/React__namespace.createElement(LockedVector, _extends({
-          key: `vector-${index}`
+      case "polygon":
+        return /*#__PURE__*/React__namespace.createElement(LockedPolygon, _extends({
+          key: `polygon-${index}`
         }, figure));
       default:
         /**
@@ -29278,6 +29311,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 {
@@ -29542,6 +29582,7 @@ function useControlPoint(point, color, onMovePoint) {
   });
   const focusableHandle = /*#__PURE__*/React__namespace.createElement("g", {
     "data-testid": "movable-point__focusable-handle",
+    className: "movable-point__focusable-handle",
     tabIndex: 0,
     ref: keyboardHandleRef,
     onFocus: () => setFocused(true),
@@ -29711,7 +29752,6 @@ const LinearSystemGraph = props => {
   const {
     coords: lines
   } = props.graphState;
-  const colors = ["var(--movable-line-stroke-color)", "var(--mafs-violet)"];
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, lines?.map((line, i) => /*#__PURE__*/React__namespace.createElement(MovableLine, {
     key: i,
     points: line,
@@ -29723,7 +29763,7 @@ const LinearSystemGraph = props => {
       end: true
     },
     onMovePoint: (endpointIndex, destination) => dispatch(moveControlPoint(endpointIndex, destination, i)),
-    color: colors[i]
+    color: "var(--movable-line-stroke-color)"
   })), ";");
 };
 
@@ -29798,7 +29838,8 @@ const Angle = _ref => {
     endPoints,
     range,
     polygonLines,
-    showAngles
+    showAngles,
+    snapTo
   } = _ref;
   const [centerX, centerY] = centerPoint;
   const areClockwise = clockwise$1([centerPoint, ...endPoints]);
@@ -29836,7 +29877,9 @@ const Angle = _ref => {
   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__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("filter", {
     id: "background",
@@ -29927,15 +29970,17 @@ const StyledMovablePoint = props => {
     point,
     onMove,
     cursor,
-    color = wonderBlocksTokens.color.blue
+    color = wonderBlocksTokens.color.blue,
+    snapTo
   } = props;
+  const snapToValue = snapTo ?? "grid";
   const {
     dragging
   } = mafs.useMovable({
     gestureTarget: elementRef,
     point,
     onMove,
-    constrain: p => snap(snapStep, p)
+    constrain: p => ["angles", "sides"].includes(snapToValue) ? p : snap(snapStep, p)
   });
   return /*#__PURE__*/React__namespace.createElement(MovablePointView, {
     ref: elementRef,
@@ -29961,7 +30006,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
@@ -29969,6 +30015,7 @@ const PolygonGraph = props => {
   const points = coords ?? [[0, 0]];
   const ref = React__namespace.useRef(null);
   const dragReferencePoint = points[0];
+  const snapToValue = snapTo ?? "grid";
   const {
     dragging
   } = mafs.useMovable({
@@ -29978,7 +30025,7 @@ const PolygonGraph = props => {
       const delta = mafs.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);
@@ -30001,12 +30048,13 @@ const PolygonGraph = props => {
       active: active,
       range: range,
       polygonLines: lines,
-      showAngles: !!showAngles
+      showAngles: !!showAngles,
+      snapTo: snapToValue
     });
   }), showSides && lines.map((_ref, i) => {
     let [start, end] = _ref;
     const [x, y] = mafs.vec.midpoint(start, end);
-    const length = parseFloat(mafs.vec.dist(start, end).toFixed(1));
+    const length = parseFloat(mafs.vec.dist(start, end).toFixed(snapTo === "sides" ? 0 : 1));
     return /*#__PURE__*/React__namespace.createElement(TextLabel, {
       key: "side-" + i,
       x: x,
@@ -30030,153 +30078,12 @@ const PolygonGraph = props => {
     }
   }), points.map((point, i) => /*#__PURE__*/React__namespace.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 {
-        ...shared,
-        type: "segment",
-        coords: getSegmentCoords({
-          graph,
-          step,
-          range
-        })
-      };
-    case "linear":
-      return {
-        ...shared,
-        type: graph.type,
-        coords: getLineCoords({
-          graph,
-          range,
-          step
-        })
-      };
-    case "ray":
-      return {
-        ...shared,
-        type: graph.type,
-        coords: getLineCoords({
-          graph,
-          range,
-          step
-        })
-      };
-    case "linear-system":
-      return {
-        ...shared,
-        type: graph.type,
-        coords: getLinearSystemCoords({
-          graph,
-          range,
-          step
-        })
-      };
-    case "polygon":
-      return {
-        ...shared,
-        type: "polygon",
-        showAngles: Boolean(graph.showAngles),
-        showSides: Boolean(graph.showSides),
-        coords: getPolygonCoords({
-          graph,
-          range,
-          step
-        })
-      };
-    case "point":
-      return {
-        ...shared,
-        type: graph.type,
-        coords: getDefaultPoints({
-          graph,
-          step,
-          range
-        })
-      };
-    case "circle":
-      return {
-        ...shared,
-        type: graph.type,
-        ...getCircleCoords(graph)
-      };
-    case "quadratic":
-      return {
-        ...shared,
-        type: graph.type,
-        coords: getQuadraticCoords(graph, range, step)
-      };
-    case "sinusoid":
-      return {
-        ...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 wonderStuffCore.UnreachableCaseError(graph);
-  }
-}
-const getDefaultPoints = _ref => {
-  let {
-    graph,
-    range,
-    step
-  } = _ref;
-  const numPoints = graph.numPoints || 1;
-  let coords = 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 {
@@ -30240,118 +30147,6 @@ function getGradableGraph(state, initialGraph) {
   }
   throw new Error("Mafs is not yet implemented for graph type: " + initialGraph.type);
 }
-const getSegmentCoords = _ref2 => {
-  let {
-    graph,
-    range,
-    step
-  } = _ref2;
-  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 = _ref3 => {
-  let {
-    graph,
-    range,
-    step
-  } = _ref3;
-  if (graph.coords) {
-    return graph.coords;
-  }
-  return normalizePoints(range, step, defaultLinearCoords[0]);
-};
-const getLinearSystemCoords = _ref4 => {
-  let {
-    graph,
-    range,
-    step
-  } = _ref4;
-  if (graph.coords) {
-    return graph.coords;
-  }
-  return defaultLinearCoords.map(points => normalizePoints(range, step, points));
-};
-const getPolygonCoords = _ref5 => {
-  let {
-    graph,
-    range,
-    step
-  } = _ref5;
-  let coords = graph.coords?.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: mafs.vec.add(graph.center, [graph.radius, 0])
-    };
-  }
-  return {
-    center: [0, 0],
-    radiusPoint: [1, 0]
-  };
-};
 
 /**
  * determine radius of a circle graph
@@ -30485,38 +30280,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__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(mafs.Plot.OfX, {
     y: y,
     color: wonderBlocksTokens.color.blue
   }), coords.map((coord, i) => /*#__PURE__*/React__namespace.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
@@ -31666,8 +31439,214 @@ const LegacyGrid = _ref => {
   return null;
 };
 
+function initializeGraphState(params) {
+  const {
+    graph,
+    step,
+    snapStep,
+    range
+  } = params;
+  const shared = {
+    hasBeenInteractedWith: false,
+    range,
+    snapStep
+  };
+  switch (graph.type) {
+    case "segment":
+      return {
+        ...shared,
+        type: "segment",
+        coords: getSegmentCoords(graph, range, step)
+      };
+    case "linear":
+      return {
+        ...shared,
+        type: graph.type,
+        coords: getLineCoords(graph, range, step)
+      };
+    case "ray":
+      return {
+        ...shared,
+        type: graph.type,
+        coords: getLineCoords(graph, range, step)
+      };
+    case "linear-system":
+      return {
+        ...shared,
+        type: graph.type,
+        coords: getLinearSystemCoords(graph, range, step)
+      };
+    case "polygon":
+      return {
+        ...shared,
+        type: "polygon",
+        showAngles: Boolean(graph.showAngles),
+        showSides: Boolean(graph.showSides),
+        coords: getPolygonCoords(graph, range, step),
+        snapTo: graph.snapTo ?? "grid"
+      };
+    case "point":
+      return {
+        ...shared,
+        type: graph.type,
+        coords: getPointCoords(graph, range, step)
+      };
+    case "circle":
+      return {
+        ...shared,
+        type: graph.type,
+        ...getCircleCoords(graph)
+      };
+    case "quadratic":
+      return {
+        ...shared,
+        type: graph.type,
+        coords: getQuadraticCoords(graph, range, step)
+      };
+    case "sinusoid":
+      return {
+        ...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 wonderStuffCore.UnreachableCaseError(graph);
+  }
+}
+function getPointCoords(graph, range, step) {
+  const numPoints = graph.numPoints || 1;
+  let coords = 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) {
+  let coords = graph.coords?.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: mafs.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:
@@ -31803,11 +31782,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, mafs.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 => mafs.vec.add(point, change));
+        } else {
+          const change = getChange(state.coords, action.delta, {
+            snapStep,
+            range
+          });
+          newCoords = state.coords.map(point => snap(snapStep, mafs.vec.add(point, change)));
+        }
         return {
           ...state,
           hasBeenInteractedWith: true,
@@ -31822,10 +31810,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
@@ -31871,6 +31867,15 @@ function doMovePoint(state, action) {
       }
     case "quadratic":
       {
+        // Set up the new coords and check if the quadratic coefficients are valid
+        const newCoords = [...state.coords];
+        newCoords[action.index] = action.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 state;
+        }
         return {
           ...state,
           hasBeenInteractedWith: true,
@@ -31968,8 +31973,17 @@ function doChangeRange(state, action) {
     range: action.range
   };
 }
-const getChange = (coords, delta, constraintOpts) => {
+const getDeltaVertex = (maxMoves, minMoves, delta) => {
   const [deltaX, deltaY] = delta;
+  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]));
+  const minYMove = Math.max(...minMoves.map(move => move[1]));
+  const dx = clamp(deltaX, minXMove, maxXMove);
+  const dy = clamp(deltaY, minYMove, maxYMove);
+  return [dx, dy];
+};
+const getChange = (coords, delta, constraintOpts) => {
   const maxMoves = coords.map(point => maxMove({
     ...constraintOpts,
     point
@@ -31978,14 +31992,15 @@ const getChange = (coords, delta, constraintOpts) => {
     ...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]));
-  const minYMove = Math.max(...minMoves.map(move => move[1]));
-  const dx = clamp(deltaX, minXMove, maxXMove);
-  const dy = clamp(deltaY, minYMove, maxYMove);
+  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, _ref) {
   let {
     snapStep,
@@ -31997,28 +32012,155 @@ function boundAndSnapToGrid(point, _ref) {
     point
   }));
 }
+function boundAndSnapToAngle(destinationPoint, _ref2, index) {
+  let {
+    range,
+    coords
+  } = _ref2;
+  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
+  ___default["default"].each([-1, 1], function (j) {
+    angles[rel(j)] = Math.round(angles[rel(j)]);
+  });
+  const getAngle = function (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 kmath.vector.add(coordsCopy[rel(-1)], offset);
+}
+function boundAndSnapToSides(destinationPoint, _ref3, index) {
+  let {
+    range,
+    coords
+  } = _ref3;
+  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 = ___default["default"].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
+  ___default["default"].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 kmath.vector.add(coordsCopy[rel(-1)], offset);
+}
 
 // Returns the closest point to the given `point` that is within the graph
 // bounds given in `state`.
-function bound$1(_ref2) {
+function bound$1(_ref4) {
   let {
     snapStep,
     range,
     point
-  } = _ref2;
+  } = _ref4;
   const [requestedX, requestedY] = point;
   const [snapX, snapY] = snapStep;
   const [[minX, maxX], [minY, maxY]] = range;
   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
-function maxMove(_ref3) {
+// Returns the vector from the given point to the top-right corner of the graph when snapped to the grid
+function maxMove(_ref5) {
   let {
     snapStep,
     range,
     point
-  } = _ref3;
+  } = _ref5;
   const topRight = bound$1({
     snapStep,
     range,
@@ -32027,14 +32169,13 @@ function maxMove(_ref3) {
   return mafs.vec.sub(topRight, point);
 }
 
-// Returns the vector from the given point to the bottom-left corner of the
-// graph
-function minMove(_ref4) {
+// Returns the vector from the given point to the bottom-left corner of the graph when snapped to the grid
+function minMove(_ref6) {
   let {
     snapStep,
     range,
     point
-  } = _ref4;
+  } = _ref6;
   const bottomLeft = bound$1({
     snapStep,
     range,
@@ -32155,11 +32296,12 @@ function mafsStateToInteractiveGraph(state) {
 }
 const StatefulMafsGraph = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
   const {
-    onChange
+    onChange,
+    graph
   } = props;
   const [state, dispatch] = React__namespace.useReducer(interactiveGraphReducer, props, initializeGraphState);
   React.useImperativeHandle(ref, () => ({
-    getUserInput: () => getGradableGraph(state, props.graph)
+    getUserInput: () => getGradableGraph(state, graph)
   }));
   const prevState = React.useRef(state);
   React.useEffect(() => {
@@ -32182,6 +32324,18 @@ const StatefulMafsGraph = /*#__PURE__*/React__namespace.forwardRef((props, ref)
   React.useEffect(() => {
     dispatch(changeRange([[xMinRange, xMaxRange], [yMinRange, yMaxRange]]));
   }, [dispatch, xMinRange, xMaxRange, yMinRange, yMaxRange]);
+  const numSegments = graph.type === "segment" ? graph.numSegments : null;
+  const originalPropsRef = React.useRef(props);
+  const latestPropsRef = wonderBlocksCore.useLatestRef(props);
+  React.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__namespace.createElement(MafsGraph, _extends({}, props, {
     state: state,
     dispatch: dispatch
@@ -44343,7 +44497,7 @@ const init = function (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";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -47443,8 +47597,8 @@ exports.itemDataVersion = itemDataVersion;
 exports.itemToTree = itemToTree;
 exports.itemVersion = ItemVersion;
 exports.libVersion = libVersion;
-exports.lockedEllipseFillStyles = lockedEllipseFillStyles;
 exports.lockedFigureColors = lockedFigureColors;
+exports.lockedFigureFillStyles = lockedFigureFillStyles;
 exports.mediaQueries = mediaQueries;
 exports.parsePerseusItem = parsePerseusItem;
 exports.plotterPlotTypes = plotterPlotTypes;