@khanacademy/perseus 23.1.0 → 23.4.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
@@ -10928,6 +10932,33 @@ function intersects(ab, cd) {
   }
   return false;
 }
+
+// Whether any two sides of a polygon intersect each other
+function polygonSidesIntersect(vertices) {
+  for (let i = 0; i < vertices.length; i++) {
+    for (let k = i + 1; k < vertices.length; k++) {
+      // If any two vertices are the same point, sides overlap
+      if (kmath.point.equal(vertices[i], vertices[k])) {
+        return true;
+      }
+
+      // Find the other end of the sides starting at vertices i and k
+      const iNext = (i + 1) % vertices.length;
+      const kNext = (k + 1) % vertices.length;
+
+      // Adjacent sides always intersect (at the vertex); skip those
+      if (iNext === k || kNext === i) {
+        continue;
+      }
+      const side1 = [vertices[i], vertices[iNext]];
+      const side2 = [vertices[k], vertices[kNext]];
+      if (intersects(side1, side2)) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
 function vector(a, b) {
   return ___default["default"].map(___default["default"].zip(a, b), function (pair) {
     return pair[0] - pair[1];
@@ -11021,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);
@@ -11074,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]);
@@ -28922,25 +28953,27 @@ const lockedFigureColors = {
   pink: "#B25071",
   red: "#D92916"
 };
+const lockedEllipseFillStyles = {
+  none: 0,
+  solid: 1,
+  translucent: 0.4
+};
 const plotterPlotTypes = ["bar", "line", "pic", "histogram", "dotplot"];
 
-const LockedCircle = props => {
+const LockedEllipse = props => {
   const {
     center,
     radius,
+    angle,
     color,
     fillStyle,
     strokeStyle
   } = props;
-  const fill = {
-    none: 0,
-    solid: 1,
-    translucent: 0.4
-  };
-  return /*#__PURE__*/React__namespace.createElement(mafs.Circle, {
+  return /*#__PURE__*/React__namespace.createElement(mafs.Ellipse, {
     center: center,
     radius: radius,
-    fillOpacity: fill[fillStyle],
+    angle: angle,
+    fillOpacity: lockedEllipseFillStyles[fillStyle],
     strokeStyle: strokeStyle,
     color: lockedFigureColors[color]
   });
@@ -29199,6 +29232,21 @@ const LockedPoint = props => {
   });
 };
 
+const LockedVector = props => {
+  const {
+    color,
+    points
+  } = props;
+  const [tail, tip] = points;
+  return /*#__PURE__*/React__namespace.createElement("g", {
+    className: "locked-vector"
+  }, /*#__PURE__*/React__namespace.createElement(Vector, {
+    tail: tail,
+    tip: tip,
+    color: lockedFigureColors[color]
+  }));
+};
+
 const GraphLockedLayer = props => {
   const {
     lockedFigures
@@ -29214,9 +29262,13 @@ const GraphLockedLayer = props => {
           key: `line-${index}`,
           range: props.range
         }, figure));
-      case "circle":
-        return /*#__PURE__*/React__namespace.createElement(LockedCircle, _extends({
-          key: `circle-${index}`
+      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}`
         }, figure));
       default:
         /**
@@ -29345,7 +29397,8 @@ const MovablePointView = /*#__PURE__*/React.forwardRef((props, hitboxRef) => {
     point,
     color = wonderBlocksTokens.color.blue,
     dragging,
-    focusBehavior
+    focusBehavior,
+    cursor
   } = props;
 
   // WB Tooltip requires a color name for the background color.
@@ -29380,7 +29433,8 @@ const MovablePointView = /*#__PURE__*/React.forwardRef((props, hitboxRef) => {
     ref: hitboxRef,
     className: pointClasses,
     style: {
-      "--movable-point-color": color
+      "--movable-point-color": color,
+      cursor
     },
     "data-testid": "movable-point",
     tabIndex: tabIndex(focusBehavior)
@@ -29492,6 +29546,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),
@@ -29628,14 +29683,39 @@ const SegmentGraph = props => {
   })));
 };
 
-const LinearGraph = props => {
+const LinearGraph = (props, key) => {
+  const {
+    dispatch
+  } = props;
+  const {
+    coords: line
+  } = props.graphState;
+
+  // Linear graphs only have one line
+  // (LEMS-2050): Update the reducer so that we have a separate action for moving one line
+  // and another action for moving multiple lines
+  return /*#__PURE__*/React__namespace.createElement(MovableLine, {
+    key: 0,
+    points: line,
+    onMoveLine: delta => {
+      dispatch(moveLine(0, delta));
+    },
+    extend: {
+      start: true,
+      end: true
+    },
+    onMovePoint: (endpointIndex, destination) => dispatch(moveControlPoint(endpointIndex, destination, 0)),
+    color: "var(--movable-line-stroke-color)"
+  });
+};
+
+const LinearSystemGraph = props => {
   const {
     dispatch
   } = 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,
@@ -29647,8 +29727,8 @@ const LinearGraph = props => {
       end: true
     },
     onMovePoint: (endpointIndex, destination) => dispatch(moveControlPoint(endpointIndex, destination, i)),
-    color: colors[i]
-  })));
+    color: "var(--movable-line-stroke-color)"
+  })), ";");
 };
 
 const RayGraph = props => {
@@ -29656,14 +29736,14 @@ const RayGraph = props => {
     dispatch
   } = props;
   const {
-    coords: lines
+    coords: line
   } = props.graphState;
   const handleMoveLine = delta => dispatch(moveLine(0, delta));
   const handleMovePoint = (pointIndex, newPoint) => dispatch(moveControlPoint(pointIndex, newPoint, 0));
-  return /*#__PURE__*/React__namespace.createElement(MovableLine
-  // a ray only has one line
-  , {
-    points: lines[0],
+
+  // Ray graphs only have one line
+  return /*#__PURE__*/React__namespace.createElement(MovableLine, {
+    points: line,
     onMoveLine: handleMoveLine,
     onMovePoint: handleMovePoint,
     extend: {
@@ -29722,7 +29802,8 @@ const Angle = _ref => {
     endPoints,
     range,
     polygonLines,
-    showAngles
+    showAngles,
+    snapTo
   } = _ref;
   const [centerX, centerY] = centerPoint;
   const areClockwise = clockwise$1([centerPoint, ...endPoints]);
@@ -29760,7 +29841,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",
@@ -29850,15 +29933,18 @@ const StyledMovablePoint = props => {
   const {
     point,
     onMove,
-    color = wonderBlocksTokens.color.blue
+    cursor,
+    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,
@@ -29868,7 +29954,8 @@ const StyledMovablePoint = props => {
     focusBehavior: {
       type: "uncontrolled",
       tabIndex: 0
-    }
+    },
+    cursor: cursor
   });
 };
 
@@ -29883,7 +29970,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
@@ -29891,6 +29979,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({
@@ -29900,7 +29989,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);
@@ -29923,12 +30012,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,
@@ -29952,138 +30042,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: getDefaultSegments({
-          graph,
-          step,
-          range
-        })
-      };
-    case "linear":
-    case "linear-system":
-    case "ray":
-      return {
-        ...shared,
-        type: graph.type,
-        // Linear and ray graphs have a single tuple of points, while a
-        // linear system has two tuples of points.
-        coords: getLineCoords({
-          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,
-        center: [0, 0],
-        radiusPoint: [1, 0]
-      };
-    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 {
@@ -30105,13 +30069,13 @@ function getGradableGraph(state, initialGraph) {
   if (state.type === "linear" && initialGraph.type === "linear") {
     return {
       ...initialGraph,
-      coords: state.coords[0]
+      coords: state.coords
     };
   }
   if (state.type === "ray" && initialGraph.type === "ray") {
     return {
       ...initialGraph,
-      coords: state.coords[0]
+      coords: state.coords
     };
   }
   if (state.type === "polygon" && initialGraph.type === "polygon") {
@@ -30147,93 +30111,6 @@ function getGradableGraph(state, initialGraph) {
   }
   throw new Error("Mafs is not yet implemented for graph type: " + initialGraph.type);
 }
-const getDefaultSegments = _ref2 => {
-  let {
-    graph,
-    range,
-    step
-  } = _ref2;
-  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;
-  //  Return two lines for a linear system, one for a ray or linear
-  switch (graph.type) {
-    case "linear-system":
-      return defaultLinearCoords.map(points => normalizePoints(range, step, points));
-    case "linear":
-    case "ray":
-      return [normalizePoints(range, step, defaultLinearCoords[0])];
-    default:
-      throw new wonderStuffCore.UnreachableCaseError(graph);
-  }
-};
-const getPolygonCoords = _ref4 => {
-  let {
-    graph,
-    range,
-    step
-  } = _ref4;
-  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) => {
-  let coords = [[0.5, 0.5], [0.65, 0.6]];
-  coords = normalizePoints(range, step, coords, true);
-  return coords;
-};
-const getQuadraticCoords = (graph, range, step) => {
-  let coords = [[0.25, 0.75], [0.5, 0.25], [0.75, 0.75]];
-  coords = normalizePoints(range, step, coords, true);
-  return coords;
-};
 
 /**
  * determine radius of a circle graph
@@ -30262,6 +30139,7 @@ function CircleGraph(props) {
     onMove: newCenter => dispatch(moveCenter(newCenter))
   }), /*#__PURE__*/React__namespace.createElement(StyledMovablePoint, {
     point: radiusPoint,
+    cursor: "ew-resize",
     onMove: newRadiusPoint => {
       dispatch(moveRadiusPoint(newRadiusPoint));
     }
@@ -30366,38 +30244,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
@@ -31547,6 +31403,210 @@ 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 MOVE_CONTROL_POINT:
@@ -31570,15 +31630,9 @@ function interactiveGraphReducer(state, action) {
   }
 }
 function doMoveControlPoint(state, action) {
-  const {
-    snapStep,
-    range
-  } = state;
   switch (state.type) {
     case "segment":
-    case "linear":
     case "linear-system":
-    case "ray":
       {
         const newCoords = updateAtIndex({
           array: state.coords,
@@ -31586,11 +31640,7 @@ function doMoveControlPoint(state, action) {
           update: tuple => setAtIndex({
             array: tuple,
             index: action.pointIndex,
-            newValue: snap(snapStep, bound$1({
-              snapStep,
-              range,
-              point: action.destination
-            }))
+            newValue: boundAndSnapToGrid(action.destination, state)
           })
         });
         const coordsToCheck = newCoords[action.itemIndex];
@@ -31603,6 +31653,20 @@ function doMoveControlPoint(state, action) {
           coords: newCoords
         };
       }
+    case "linear":
+    case "ray":
+      {
+        const newCoords = setAtIndex({
+          array: state.coords,
+          index: action.pointIndex,
+          newValue: boundAndSnapToGrid(action.destination, state)
+        });
+        return {
+          ...state,
+          hasBeenInteractedWith: true,
+          coords: newCoords
+        };
+      }
     case "circle":
       throw new Error("FIXME implement circle reducer");
     case "point":
@@ -31614,6 +31678,9 @@ function doMoveControlPoint(state, action) {
       throw new wonderStuffCore.UnreachableCaseError(state);
   }
 }
+
+// (LEMS-2050): Update the reducer so that we have a separate action for moving one line
+// and another action for moving multiple lines
 function doMoveLine(state, action) {
   const {
     snapStep,
@@ -31621,9 +31688,7 @@ function doMoveLine(state, action) {
   } = state;
   switch (state.type) {
     case "segment":
-    case "linear":
     case "linear-system":
-    case "ray":
       {
         if (action.itemIndex === undefined) {
           throw new Error("Please provide index of line to move");
@@ -31649,6 +31714,22 @@ function doMoveLine(state, action) {
           coords: newCoords
         };
       }
+    case "linear":
+    case "ray":
+      {
+        const currentLine = state.coords;
+        const change = getChange(currentLine, action.delta, {
+          snapStep,
+          range
+        });
+        const newLine = [snap(snapStep, mafs.vec.add(currentLine[0], change)), snap(snapStep, mafs.vec.add(currentLine[1], change))];
+        return {
+          ...state,
+          type: state.type,
+          hasBeenInteractedWith: true,
+          coords: newLine
+        };
+      }
     default:
       // The MoveLine action doesn't make sense for other graph types;
       // ignore it if it somehow happens
@@ -31663,11 +31744,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,
@@ -31682,6 +31772,29 @@ 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: newValue
+      });
+
+      // Reject the move if it would cause the sides of the polygon to cross
+      if (polygonSidesIntersect(newCoords)) {
+        return state;
+      }
+      return {
+        ...state,
+        hasBeenInteractedWith: true,
+        coords: newCoords
+      };
     case "point":
       {
         return {
@@ -31690,11 +31803,7 @@ function doMovePoint(state, action) {
           coords: setAtIndex({
             array: state.coords,
             index: action.index,
-            newValue: snap(state.snapStep, bound$1({
-              snapStep: state.snapStep,
-              range: state.range,
-              point: action.destination
-            }))
+            newValue: boundAndSnapToGrid(action.destination, state)
           })
         };
       }
@@ -31714,27 +31823,28 @@ function doMovePoint(state, action) {
           coords: setAtIndex({
             array: state.coords,
             index: action.index,
-            newValue: snap(state.snapStep, bound$1({
-              snapStep: state.snapStep,
-              range: state.range,
-              point: destination
-            }))
+            newValue: boundAndSnapToGrid(destination, state)
           })
         };
       }
     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,
           coords: setAtIndex({
             array: state.coords,
             index: action.index,
-            newValue: snap(state.snapStep, bound$1({
-              snapStep: state.snapStep,
-              range: state.range,
-              point: action.destination
-            }))
+            newValue: boundAndSnapToGrid(action.destination, state)
           })
         };
       }
@@ -31825,8 +31935,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
@@ -31835,35 +31954,175 @@ 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,
+    range
+  } = _ref;
+  return snap(snapStep, bound$1({
+    snapStep,
+    range,
+    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(_ref) {
+function bound$1(_ref4) {
   let {
     snapStep,
     range,
     point
-  } = _ref;
+  } = _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(_ref2) {
+// 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
-  } = _ref2;
+  } = _ref5;
   const topRight = bound$1({
     snapStep,
     range,
@@ -31872,14 +32131,13 @@ function maxMove(_ref2) {
   return mafs.vec.sub(topRight, point);
 }
 
-// Returns the vector from the given point to the bottom-left corner of the
-// graph
-function minMove(_ref3) {
+// 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
-  } = _ref3;
+  } = _ref6;
   const bottomLeft = bound$1({
     snapStep,
     range,
@@ -31935,8 +32193,12 @@ const renderGraph = props => {
         graphState: state,
         dispatch: dispatch
       });
-    case "linear":
     case "linear-system":
+      return /*#__PURE__*/React__namespace.createElement(LinearSystemGraph, {
+        graphState: state,
+        dispatch: dispatch
+      });
+    case "linear":
       return /*#__PURE__*/React__namespace.createElement(LinearGraph, {
         graphState: state,
         dispatch: dispatch
@@ -44184,7 +44446,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.1.0";
+const libVersion = "23.4.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -47284,6 +47546,7 @@ exports.itemDataVersion = itemDataVersion;
 exports.itemToTree = itemToTree;
 exports.itemVersion = ItemVersion;
 exports.libVersion = libVersion;
+exports.lockedEllipseFillStyles = lockedEllipseFillStyles;
 exports.lockedFigureColors = lockedFigureColors;
 exports.mediaQueries = mediaQueries;
 exports.parsePerseusItem = parsePerseusItem;