@khanacademy/perseus 23.3.0 → 23.4.0

package/dist/es/index.js

@@ -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]);
@@ -29250,6 +29254,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 +29424,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 +29435,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 +29507,8 @@ const Angle = ({
   endPoints,
   range,
   polygonLines,
-  showAngles
+  showAngles,
+  snapTo
 }) => {
   const [centerX, centerY] = centerPoint;
   const areClockwise = clockwise$1([centerPoint, ...endPoints]);
@@ -29541,7 +29546,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 +29634,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 +29670,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 +29679,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 +29689,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 +29712,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 +29741,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 +29799,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 +29932,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,6 +31085,203 @@ 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 MOVE_CONTROL_POINT:
@@ -31468,11 +31415,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 +31442,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 +31496,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 +31597,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 +31607,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 +31633,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 +31772,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 +31786,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,
@@ -43994,7 +44101,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.4.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {