@khanacademy/perseus 20.5.0 → 20.7.0

package/dist/es/index.js

@@ -31,7 +31,7 @@ import { OptionItem, SingleSelect, MultiSelect } from '@khanacademy/wonder-block
 import caretDown from '@phosphor-icons/core/assets/regular/caret-down.svg';
 import caretUp from '@phosphor-icons/core/assets/regular/caret-up.svg';
 import debounce$2 from 'lodash.debounce';
-import { Point as Point$2, vec, useTransformContext, useMovable, Vector, Coordinates, Mafs } from 'mafs';
+import { Point as Point$2, vec, useTransformContext, useMovable, Vector, Polygon, Coordinates, Mafs } from 'mafs';
 import { color } from '@khanacademy/wonder-blocks-tokens';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import questionIcon from '@phosphor-icons/core/regular/question.svg';
@@ -18834,7 +18834,7 @@ const isAccessible = widgetInfo => {
   }
   return !!accessible;
 };
-const getAllWidgetTypes = () => {
+const getAllWidgetTypes$1 = () => {
   return _.keys(widgets);
 };
 const upgradeWidgetInfoToLatestVersion = oldWidgetInfo => {
@@ -19103,7 +19103,7 @@ var widgets$1 = /*#__PURE__*/Object.freeze({
   getVersionVector: getVersionVector,
   getPublicWidgets: getPublicWidgets,
   isAccessible: isAccessible,
-  getAllWidgetTypes: getAllWidgetTypes,
+  getAllWidgetTypes: getAllWidgetTypes$1,
   upgradeWidgetInfoToLatestVersion: upgradeWidgetInfoToLatestVersion,
   getRendererPropsForWidgetInfo: getRendererPropsForWidgetInfo,
   traverseChildWidgets: traverseChildWidgets$3,
@@ -19337,7 +19337,6 @@ class Renderer extends React.Component {
     };
     // @ts-expect-error - TS2322 - Type '(props: Props) => Partial<Record<string, CategorizerWidget | CSProgramWidget | DefinitionWidget | DropdownWidget | ... 35 more ... | VideoWidget>>' is not assignable to type '(props: Props) => { [key: string]: PerseusWidget; }'.
     this._getAllWidgetsInfo = props => {
-      // @ts-expect-error - TS2345 - Argument of type '{ [key: string]: PerseusWidget; }' is not assignable to parameter of type 'Partial<Record<string, CategorizerWidget>>'.
       return mapObject$1(props.widgets, (widgetInfo, widgetId) => {
         if (!widgetInfo.type || !widgetInfo.alignment) {
           const newValues = {};
@@ -28167,22 +28166,55 @@ const GraphLockedLayer = props => {
 };
 
 const MOVE_CONTROL_POINT = "move-control-point";
-function moveControlPoint(objectIndex, pointIndex, destination) {
+function moveControlPoint(pointIndex, destination, itemIndex) {
   return {
     type: MOVE_CONTROL_POINT,
-    objectIndex,
+    itemIndex,
     pointIndex,
     destination
   };
 }
+const MOVE_ALL = "move-all";
 const MOVE_LINE = "move-line";
-function moveSegment(lineIndex, delta) {
+/** This action assumes the state.coords holds an array of collinear tuples that define lines */
+function moveLine(itemIndex, delta) {
   return {
     type: MOVE_LINE,
-    lineIndex,
+    itemIndex,
     delta
   };
 }
+/** This action assumes a flat array of vectors */
+const moveAll = delta => ({
+  type: MOVE_ALL,
+  delta
+});
+
+/**
+ * 44 is touch best practice and AAA compliant for WCAG
+ * https://www.w3.org/WAI/WCAG21/Understanding/target-size.html
+ */
+const TARGET_SIZE = 44;
+
+// same as pointsFromNormalized in interactive-graph.tsx
+const normalizePoints = (range, step, coordsList, noSnap) => coordsList.map(coords =>
+// maps over [x, y]
+coords.map((coord, i) => {
+  const axisRange = range[i];
+  if (noSnap) {
+    return axisRange[0] + (axisRange[1] - axisRange[0]) * coord;
+  }
+  const axisStep = step[i];
+  const nSteps = Math.floor((axisRange[1] - axisRange[0]) / axisStep);
+  const tick = Math.round(coord * nSteps);
+  return axisRange[0] + axisStep * tick;
+}));
+
+// same as normalizeCoords in interactive-graph.tsx
+const normalizeCoords = (coordsList, ranges) => coordsList.map(coords => coords.map((coord, i) => {
+  const extent = ranges[i][1] - ranges[i][0];
+  return (coord + ranges[i][1]) / extent;
+}));
 
 const defaultStroke = "var(--movable-line-stroke-color)";
 const MovableLine = props => {
@@ -28230,7 +28262,7 @@ const MovableLine = props => {
     end: endPtPx,
     style: {
       stroke: "transparent",
-      strokeWidth: 44
+      strokeWidth: TARGET_SIZE
     }
   }), /*#__PURE__*/React.createElement(SVGLine, {
     start: startPtPx,
@@ -28263,7 +28295,7 @@ function SVGLine(props) {
     x2: end[0],
     y2: end[1],
     style: style,
-    className: dragging ? "movable-line-dragging" : undefined
+    className: dragging ? "movable-dragging" : undefined
   });
 }
 
@@ -28338,7 +28370,7 @@ const StyledMovablePoint = props => {
     }
   }, /*#__PURE__*/React.createElement("circle", {
     className: "movable-point-hitbox",
-    r: 22,
+    r: TARGET_SIZE / 2,
     cx: x,
     cy: y
   }), /*#__PURE__*/React.createElement("circle", {
@@ -28374,9 +28406,9 @@ const SegmentGraph = props => {
     snaps: snapStep,
     range: range,
     onMoveLine: delta => {
-      dispatch(moveSegment(i, delta));
+      dispatch(moveLine(i, delta));
     },
-    onMovePoint: (endpointIndex, destination) => dispatch(moveControlPoint(i, endpointIndex, destination)),
+    onMovePoint: (endpointIndex, destination) => dispatch(moveControlPoint(endpointIndex, destination, i)),
     "data-testid": "segment" + i
   })));
 };
@@ -28419,9 +28451,9 @@ const LinearGraph = props => {
     snaps: snapStep,
     range: range,
     onMoveLine: delta => {
-      dispatch(moveSegment(i, delta));
+      dispatch(moveLine(i, delta));
     },
-    onMovePoint: (endpointIndex, destination) => dispatch(moveControlPoint(i, endpointIndex, destination))
+    onMovePoint: (endpointIndex, destination) => dispatch(moveControlPoint(endpointIndex, destination, i))
     // "linear" or "linear-system" + index
     ,
     "data-testid": type + i,
@@ -28472,8 +28504,8 @@ const RayGraph = props => {
 
   // a ray only has one line
   const [start, end] = lines[0];
-  const handleMoveLine = delta => dispatch(moveSegment(0, delta));
-  const handleMovePoint = (newPoint, pointIndex) => dispatch(moveControlPoint(0, pointIndex, newPoint));
+  const handleMoveLine = delta => dispatch(moveLine(0, delta));
+  const handleMovePoint = (newPoint, pointIndex) => dispatch(moveControlPoint(pointIndex, newPoint, 0));
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MovableLine, {
     start: start,
     end: end,
@@ -28492,6 +28524,63 @@ const RayGraph = props => {
   }));
 };
 
+const PolygonGraph = props => {
+  var _points$length;
+  const [focused, setFocused] = React.useState(false);
+  const [hovered, setHovered] = React.useState(false);
+  const {
+    dispatch
+  } = props;
+  const {
+    coords,
+    type
+  } = props.graphState;
+  const points = coords != null ? coords : [[0, 0]];
+  const pointsSum = points.reduce((acc, point) => vec.add(acc, point), [0, 0]);
+  const midpoint = pointsSum && vec.scale(pointsSum, 1 / ((_points$length = points.length) != null ? _points$length : 1));
+  const ref = React.useRef(null);
+  const {
+    dragging
+  } = useMovable({
+    gestureTarget: ref,
+    point: midpoint,
+    onMove: newPoint => {
+      const delta = vec.sub(newPoint, midpoint);
+      dispatch(moveAll(delta));
+    },
+    constrain: p => p
+  });
+  const active = hovered || focused || dragging;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Polygon, {
+    points: [...points],
+    color: "var(--movable-line-stroke-color)",
+    svgPolygonProps: {
+      strokeWidth: active ? "var(--movable-line-stroke-weight-active)" : "var(--movable-line-stroke-weight)"
+    }
+  }), /*#__PURE__*/React.createElement(Polygon, {
+    points: [...points],
+    color: "transparent",
+    svgPolygonProps: {
+      ref,
+      tabIndex: 0,
+      strokeWidth: TARGET_SIZE,
+      style: {
+        cursor: dragging ? "grabbing" : "grab"
+      },
+      onFocus: () => setFocused(true),
+      onBlur: () => setFocused(false),
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      className: "movable-polygon"
+    }
+  }), points.map((point, i) => /*#__PURE__*/React.createElement(StyledMovablePoint, {
+    key: i,
+    point: point,
+    onMove: destination => dispatch(moveControlPoint(i, destination)),
+    "data-testid": type + i
+  })));
+};
+
 const renderLineLabel = (n, [min, max]) => n !== -1 && n !== min && n !== max;
 const axisOptions = (props, index) => ({
   axis: props.markings === "graph",
@@ -28504,233 +28593,6 @@ const Grid = props => props.markings === "none" ? null : /*#__PURE__*/React.crea
   yAxis: axisOptions(props, 1)
 });
 
-function interactiveGraphReducer(state, action) {
-  switch (action.type) {
-    case MOVE_CONTROL_POINT:
-      {
-        const newCoords = updateAtIndex({
-          array: state.coords,
-          index: action.objectIndex,
-          update: tuple => setAtIndex({
-            array: tuple,
-            index: action.pointIndex,
-            newValue: snap(state, bound$1(state, action.destination))
-          })
-        });
-        if (!validSegments(newCoords)) {
-          return state;
-        }
-        return _extends({}, state, {
-          hasBeenInteractedWith: true,
-          coords: newCoords
-        });
-      }
-    case MOVE_LINE:
-      {
-        var _state$coords;
-        const currentLine = (_state$coords = state.coords) == null ? void 0 : _state$coords[action.lineIndex];
-        if (!currentLine) {
-          throw new Error("No line to move");
-        }
-        const maxMoves = currentLine.map(point => maxMove(state, point));
-        const minMoves = currentLine.map(point => minMove(state, 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(action.delta[0], minXMove, maxXMove);
-        const dy = clamp(action.delta[1], minYMove, maxYMove);
-        const newValue = [snap(state, vec.add(currentLine[0], [dx, dy])), snap(state, vec.add(currentLine[1], [dx, dy]))];
-        const newLine = setAtIndex({
-          array: state.coords,
-          index: action.lineIndex,
-          newValue
-        });
-        return _extends({}, state, {
-          hasBeenInteractedWith: true,
-          coords: newLine
-        });
-      }
-    default:
-      throw new UnreachableCaseError(action);
-  }
-}
-function snap(state, point) {
-  const [requestedX, requestedY] = point;
-  const [snapX, snapY] = state.snapStep;
-  return [Math.round(requestedX / snapX) * snapX, Math.round(requestedY / snapY) * snapY];
-}
-
-// Returns the closest point to the given `point` that is within the graph
-// bounds given in `state`.
-function bound$1(state, point) {
-  const [requestedX, requestedY] = point;
-  const [snapX, snapY] = state.snapStep;
-  const [[minX, maxX], [minY, maxY]] = state.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(state, point) {
-  const topRight = bound$1(state, [Infinity, Infinity]);
-  return vec.sub(topRight, point);
-}
-
-// Returns the vector from the given point to the bottom-left corner of the
-// graph
-function minMove(state, point) {
-  const bottomLeft = bound$1(state, [-Infinity, -Infinity]);
-  return vec.sub(bottomLeft, point);
-}
-function clamp(value, min, max) {
-  if (value < min) {
-    return min;
-  }
-  if (value > max) {
-    return max;
-  }
-  return value;
-}
-function validSegments(segments) {
-  return segments.every(([start, end]) => !vector$1.equal(start, end));
-}
-function updateAtIndex(args) {
-  const {
-    array = [],
-    index,
-    update
-  } = args;
-  const newValue = update(array[index]);
-  return setAtIndex({
-    array,
-    index,
-    newValue
-  });
-}
-function setAtIndex(args) {
-  const {
-    array = [],
-    index,
-    newValue
-  } = args;
-  const copy = [...array];
-  copy[index] = newValue;
-  // restoring readonly to array
-  return copy;
-}
-
-// same as pointsFromNormalized in interactive-graph.tsx
-const normalizePoints = (range, step, coordsList, noSnap) => coordsList.map(coords =>
-// maps over [x, y]
-coords.map((coord, i) => {
-  const axisRange = range[i];
-  if (noSnap) {
-    return axisRange[0] + (axisRange[1] - axisRange[0]) * coord;
-  }
-  const axisStep = step[i];
-  const nSteps = Math.floor((axisRange[1] - axisRange[0]) / axisStep);
-  const tick = Math.round(coord * nSteps);
-  return axisRange[0] + axisStep * tick;
-}));
-
-// same as normalizeCoords in interactive-graph.tsx
-const normalizeCoords = (coordsList, ranges) => coordsList.map(coords => coords.map((coord, i) => {
-  const extent = ranges[i][1] - ranges[i][0];
-  return (coord + ranges[i][1]) / extent;
-}));
-
-function initializeGraphState(params) {
-  const {
-    graph,
-    step,
-    snapStep,
-    range
-  } = params;
-  switch (graph.type) {
-    case "segment":
-      return {
-        type: "segment",
-        hasBeenInteractedWith: false,
-        range,
-        snapStep,
-        coords: getDefaultSegments({
-          graph,
-          step,
-          range
-        })
-      };
-    case "linear":
-    case "linear-system":
-    case "ray":
-      return {
-        type: graph.type,
-        hasBeenInteractedWith: false,
-        range,
-        snapStep,
-        // Linear and ray graphs have a single tuple of points, while a
-        // linear system has two tuples of points.
-        coords: getLineCoords(graph, range, step)
-      };
-  }
-  throw new Error("Mafs not yet implemented for graph type: " + graph.type);
-}
-const getDefaultSegments = props => {
-  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];
-    }
-  };
-  return ys(props.graph.numSegments).map(y => {
-    let endpoints = [[-5, y], [5, y]];
-    endpoints = normalizeCoords(endpoints, props.range);
-    endpoints = normalizePoints(props.range, props.step, endpoints);
-    return endpoints;
-  });
-};
-
-// 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) {
-  var _state$coords;
-  if (!state.hasBeenInteractedWith) {
-    return initialGraph;
-  }
-  switch (true) {
-    // coords: Array of CollinearTuple
-    case state.type === "linear-system" && initialGraph.type === "linear-system":
-    case state.type === "segment" && initialGraph.type === "segment":
-      return _extends({}, initialGraph, {
-        coords: state.coords
-      });
-    // coords: CollinearTuple
-    case state.type === "linear" && initialGraph.type === "linear":
-    case state.type === "ray" && initialGraph.type === "ray":
-      return _extends({}, initialGraph, {
-        coords: (_state$coords = state.coords) == null ? void 0 : _state$coords[0]
-      });
-  }
-  throw new Error("Mafs is not yet implemented for graph type: " + initialGraph.type);
-}
-const defaultLinearCoords = [[[0.25, 0.75], [0.75, 0.75]], [[0.25, 0.25], [0.75, 0.25]]];
-const getLineCoords = (graph, range, step) => {
-  var _graph$coords;
-  return (
-    // Return two lines for a linear system, one for a ray or linear
-    ((_graph$coords = graph.coords) != null ? _graph$coords : graph.type === "linear-system") ? defaultLinearCoords.map(collinear => normalizePoints(range, step, collinear)) : [normalizePoints(range, step, defaultLinearCoords[0])]
-  );
-};
-
 // Displays a stylized open eye: lint warnings are visible
 const VisibleIcon = () => /*#__PURE__*/React.createElement("svg", {
   width: "24",
@@ -29423,6 +29285,373 @@ const getLegacyGrid = (box, backgroundImage) => {
   return null;
 };
 
+/** Determine if coords is type CollinearTuple[] */
+const isCollinearTuples = coords => Array.isArray(coords[0][0]);
+
+// Generic type makes returned state match input state
+function interactiveGraphReducer(state, action) {
+  const {
+    snapStep,
+    range
+  } = state;
+  if (!state.coords) {
+    throw new Error("Graph state must have been initialized with coords");
+  }
+  switch (action.type) {
+    case MOVE_CONTROL_POINT:
+      {
+        const newCoords = action.itemIndex !== undefined && state.coords && isCollinearTuples(state.coords) ? updateAtIndex({
+          array: state.coords,
+          index: action.itemIndex,
+          update: tuple => setAtIndex({
+            array: tuple,
+            index: action.pointIndex,
+            newValue: snap({
+              snapStep,
+              point: bound$1({
+                snapStep,
+                range,
+                point: action.destination
+              })
+            })
+          })
+        }) : setAtIndex({
+          array: state.coords,
+          index: action.pointIndex,
+          newValue: snap({
+            snapStep,
+            point: bound$1({
+              snapStep,
+              range,
+              point: action.destination
+            })
+          })
+        });
+
+        // Cannot type narrow both conditions within function parameters,
+        // so this may seem redundant, but it's necessary for type safety.
+        const coordsToCheck = isCollinearTuples(newCoords) && action.itemIndex !== undefined ? newCoords[action.itemIndex] : newCoords;
+        if (!isCollinearTuples(coordsToCheck) && coordsOverlap(coordsToCheck)) {
+          return state;
+        }
+        return _extends({}, state, {
+          hasBeenInteractedWith: true,
+          coords: newCoords
+        });
+      }
+    case MOVE_LINE:
+      {
+        var _state$coords;
+        if (!isCollinearTuples(state.coords)) {
+          throw new Error("Cannot call this action unless coords is array of CollinearTuple.");
+        }
+        if (action.itemIndex === undefined) {
+          throw new Error("Please provide index of line to move");
+        }
+        const currentLine = (_state$coords = state.coords) == null ? void 0 : _state$coords[action.itemIndex];
+        if (!currentLine) {
+          throw new Error("No line to move");
+        }
+        const change = getChange(currentLine, action.delta, {
+          snapStep,
+          range
+        });
+        const newLine = [snap({
+          snapStep,
+          point: vec.add(currentLine[0], change)
+        }), snap({
+          snapStep,
+          point: vec.add(currentLine[1], change)
+        })];
+        const newCoords = setAtIndex({
+          array: state.coords,
+          index: action.itemIndex,
+          newValue: newLine
+        });
+        return _extends({}, state, {
+          hasBeenInteractedWith: true,
+          coords: newCoords
+        });
+      }
+    case MOVE_ALL:
+      {
+        if (isCollinearTuples(state.coords)) {
+          throw new Error("Cannot call this action unless coords is array of vectors.");
+        }
+        const change = getChange(state.coords, action.delta, {
+          snapStep,
+          range
+        });
+        const newCoords = state.coords.map(point => snap({
+          snapStep,
+          point: vec.add(point, change)
+        }));
+        return _extends({}, state, {
+          hasBeenInteractedWith: true,
+          coords: newCoords
+        });
+      }
+    default:
+      throw new UnreachableCaseError(action);
+  }
+}
+const getChange = (coords, delta, constraintOpts) => {
+  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]));
+  const minYMove = Math.max(...minMoves.map(move => move[1]));
+  const dx = clamp(deltaX, minXMove, maxXMove);
+  const dy = clamp(deltaY, minYMove, maxYMove);
+  return [dx, dy];
+};
+function snap({
+  snapStep,
+  point
+}) {
+  const [requestedX, requestedY] = point;
+  const [snapX, snapY] = snapStep;
+  return [Math.round(requestedX / snapX) * snapX, Math.round(requestedY / snapY) * snapY];
+}
+
+// Returns the closest point to the given `point` that is within the graph
+// bounds given in `state`.
+function bound$1({
+  snapStep,
+  range,
+  point
+}) {
+  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({
+  snapStep,
+  range,
+  point
+}) {
+  const topRight = bound$1({
+    snapStep,
+    range,
+    point: [Infinity, Infinity]
+  });
+  return vec.sub(topRight, point);
+}
+
+// Returns the vector from the given point to the bottom-left corner of the
+// graph
+function minMove({
+  snapStep,
+  range,
+  point
+}) {
+  const bottomLeft = bound$1({
+    snapStep,
+    range,
+    point: [-Infinity, -Infinity]
+  });
+  return vec.sub(bottomLeft, point);
+}
+function clamp(value, min, max) {
+  if (value < min) {
+    return min;
+  }
+  if (value > max) {
+    return max;
+  }
+  return value;
+}
+const coordsOverlap = coords => coords.some((coord, i) => coords.some((c, j) => i !== j && vector$1.equal(coord, c)));
+function updateAtIndex(args) {
+  const {
+    array = [],
+    index,
+    update
+  } = args;
+  const newValue = update(array[index]);
+  return setAtIndex({
+    array,
+    index,
+    newValue
+  });
+}
+function setAtIndex(args) {
+  const {
+    array = [],
+    index,
+    newValue
+  } = args;
+  const copy = [...array];
+  copy[index] = newValue;
+  // restoring readonly to array
+  return copy;
+}
+
+function initializeGraphState(params) {
+  const {
+    graph,
+    step,
+    snapStep,
+    range
+  } = params;
+  switch (graph.type) {
+    case "segment":
+      return {
+        type: "segment",
+        hasBeenInteractedWith: false,
+        range,
+        snapStep,
+        coords: getDefaultSegments({
+          graph,
+          step,
+          range
+        })
+      };
+    case "linear":
+    case "linear-system":
+    case "ray":
+      return {
+        type: graph.type,
+        hasBeenInteractedWith: false,
+        range,
+        snapStep,
+        // 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 {
+        type: "polygon",
+        hasBeenInteractedWith: false,
+        range,
+        snapStep,
+        coords: getPolygonCoords({
+          graph,
+          range,
+          step
+        })
+      };
+    case "angle":
+    case "point":
+    case "circle":
+    case "sinusoid":
+    case "quadratic":
+      throw new Error("Mafs not yet implemented for graph type: " + graph.type);
+    default:
+      throw new UnreachableCaseError(graph);
+  }
+}
+
+// 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) {
+  var _state$coords;
+  if (!state.hasBeenInteractedWith) {
+    return initialGraph;
+  }
+  switch (true) {
+    // coords: Array of CollinearTuple
+    case state.type === "linear-system" && initialGraph.type === "linear-system":
+    case state.type === "segment" && initialGraph.type === "segment":
+      return _extends({}, initialGraph, {
+        coords: state.coords
+      });
+    // coords: CollinearTuple
+    case state.type === "linear" && initialGraph.type === "linear":
+    case state.type === "ray" && initialGraph.type === "ray":
+      return _extends({}, initialGraph, {
+        coords: (_state$coords = state.coords) == null ? void 0 : _state$coords[0]
+      });
+    case state.type === "polygon" && initialGraph.type === "polygon":
+      return _extends({}, initialGraph, {
+        coords: state.coords
+      });
+    default:
+      throw new Error("Mafs is not yet implemented for graph type: " + initialGraph.type);
+  }
+}
+const getDefaultSegments = ({
+  graph,
+  range,
+  step
+}) => {
+  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];
+    }
+  };
+  return ys(graph.numSegments).map(y => {
+    let endpoints = [[-5, y], [5, y]];
+    endpoints = normalizeCoords(endpoints, range);
+    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
+}) => {
+  var _graph$coords;
+  return (
+    // Return two lines for a linear system, one for a ray or linear
+    ((_graph$coords = graph.coords) != null ? _graph$coords : graph.type === "linear-system") ? defaultLinearCoords.map(collinear => normalizePoints(range, step, collinear)) : [normalizePoints(range, step, defaultLinearCoords[0])]
+  );
+};
+const getPolygonCoords = ({
+  graph,
+  range,
+  step
+}) => {
+  let coords = graph.coords;
+  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 renderGraph = props => {
   const {
     state,
@@ -29448,12 +29677,16 @@ const renderGraph = props => {
         graphState: state,
         dispatch: dispatch
       });
+    case "polygon":
+      return /*#__PURE__*/React.createElement(PolygonGraph, {
+        graphState: state,
+        dispatch: dispatch
+      });
     default:
       return new UnreachableCaseError(type);
   }
 };
 const MafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
-  var _props$backgroundImag, _props$backgroundImag2, _props$backgroundImag3, _props$backgroundImag4;
   const [width, height] = props.box;
   const legacyGrid = getLegacyGrid([width, height], props.backgroundImage);
   const [state, dispatch] = React.useReducer(interactiveGraphReducer, props, initializeGraphState);
@@ -29462,8 +29695,8 @@ const MafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
   }));
   return /*#__PURE__*/React.createElement(View, {
     style: {
-      width: (_props$backgroundImag = (_props$backgroundImag2 = props.backgroundImage) == null ? void 0 : _props$backgroundImag2.width) != null ? _props$backgroundImag : width,
-      height: (_props$backgroundImag3 = (_props$backgroundImag4 = props.backgroundImage) == null ? void 0 : _props$backgroundImag4.height) != null ? _props$backgroundImag3 : height,
+      width,
+      height,
       position: "relative"
     }
   }, legacyGrid, /*#__PURE__*/React.createElement(View, {
@@ -29546,7 +29779,7 @@ const makeInvalidTypeError = (functionName, graphType) => {
 
 // There's no transform function in exports
 
-class InteractiveGraph extends React.Component {
+class LegacyInteractiveGraph extends React.Component {
   constructor(...args) {
     super(...args);
     this.angle = void 0;
@@ -29567,7 +29800,6 @@ class InteractiveGraph extends React.Component {
     this.sinusoid = void 0;
     this.trashCan = void 0;
     this.vertHairline = void 0;
-    this.mafsRef = /*#__PURE__*/React.createRef();
     this.state = {
       shouldShowInstructions: _getShouldShowInstructions(this.props)
     };
@@ -30647,10 +30879,7 @@ class InteractiveGraph extends React.Component {
         graph: graph
       });
     };
-    this.getUserInput = () => {
-      var _this$mafsRef$current, _this$mafsRef$current2;
-      return (_this$mafsRef$current = (_this$mafsRef$current2 = this.mafsRef.current) == null || _this$mafsRef$current2.getUserInput == null ? void 0 : _this$mafsRef$current2.getUserInput()) != null ? _this$mafsRef$current : InteractiveGraph.getUserInputFromProps(this.props);
-    };
+    this.getUserInput = () => InteractiveGraph.getUserInputFromProps(this.props);
     this.simpleValidate = rubric => InteractiveGraph.validate(this.getUserInput(), rubric, this);
     this.focus = $.noop;
   }
@@ -30703,23 +30932,10 @@ class InteractiveGraph extends React.Component {
   areSegmentGraphsEqual(prevGraph, currentGraph) {
     return prevGraph.numSegments !== currentGraph.numSegments;
   }
-  // const segment: boolean = useFeatureIsOn("mafs-segment-graph");
-  // <Renderer apiOptions={{flags: {mafs: {segment}}}}
   render() {
-    var _this$props$apiOption;
     const box = getInteractiveBoxFromSizeClass(this.props.containerSizeClass);
     const gridStep = this.props.gridStep || Util.getGridStep(this.props.range, this.props.step, box[0]);
     const snapStep = this.props.snapStep || Util.snapStepFromGridStep(gridStep);
-
-    // Mafs shim
-    if ((_this$props$apiOption = this.props.apiOptions) != null && (_this$props$apiOption = _this$props$apiOption.flags) != null && (_this$props$apiOption = _this$props$apiOption["mafs"]) != null && _this$props$apiOption[this.props.graph.type]) {
-      return /*#__PURE__*/React.createElement(MafsGraph, _extends({}, this.props, {
-        ref: this.mafsRef,
-        gridStep: gridStep,
-        snapStep: snapStep,
-        box: box
-      }));
-    }
     let instructions;
     // isClickToAddPoints() only applies to points and polygons
     if (this.isClickToAddPoints() && this.state.shouldShowInstructions) {
@@ -30765,6 +30981,60 @@ class InteractiveGraph extends React.Component {
       isMobile: isMobile
     }));
   }
+}
+LegacyInteractiveGraph.defaultProps = {
+  labels: ["x", "y"],
+  range: [[-10, 10], [-10, 10]],
+  step: [1, 1],
+  backgroundImage: defaultBackgroundImage,
+  markings: "graph",
+  showTooltips: false,
+  showProtractor: false,
+  showRuler: false,
+  rulerLabel: "",
+  rulerTicks: 10,
+  graph: {
+    type: "linear"
+  }
+};
+class InteractiveGraph extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.legacyGraphRef = /*#__PURE__*/React.createRef();
+    this.mafsRef = /*#__PURE__*/React.createRef();
+    this.getUserInput = () => {
+      if (this.mafsRef.current) {
+        var _this$mafsRef$current, _this$mafsRef$current2;
+        return (_this$mafsRef$current = (_this$mafsRef$current2 = this.mafsRef.current).getUserInput) == null ? void 0 : _this$mafsRef$current.call(_this$mafsRef$current2);
+      }
+      if (this.legacyGraphRef.current) {
+        return this.legacyGraphRef.current.getUserInput();
+      }
+      throw new PerseusError("Cannot getUserInput from a graph that has never rendered", Errors.NotAllowed);
+    };
+    this.simpleValidate = rubric => {
+      var _this$getUserInput;
+      return InteractiveGraph.validate((_this$getUserInput = this.getUserInput) == null ? void 0 : _this$getUserInput.call(this), rubric, this);
+    };
+  }
+  render() {
+    var _this$props$apiOption;
+    // Mafs shim
+    if ((_this$props$apiOption = this.props.apiOptions) != null && (_this$props$apiOption = _this$props$apiOption.flags) != null && (_this$props$apiOption = _this$props$apiOption["mafs"]) != null && _this$props$apiOption[this.props.graph.type]) {
+      const box = getInteractiveBoxFromSizeClass(this.props.containerSizeClass);
+      const gridStep = this.props.gridStep || Util.getGridStep(this.props.range, this.props.step, box[0]);
+      const snapStep = this.props.snapStep || Util.snapStepFromGridStep(gridStep);
+      return /*#__PURE__*/React.createElement(MafsGraph, _extends({}, this.props, {
+        ref: this.mafsRef,
+        gridStep: gridStep,
+        snapStep: snapStep,
+        box: box
+      }));
+    }
+    return /*#__PURE__*/React.createElement(LegacyInteractiveGraph, _extends({
+      ref: this.legacyGraphRef
+    }, this.props));
+  }
   static getQuadraticCoefficients(coords) {
     const p1 = coords[0];
     const p2 = coords[1];
@@ -41493,7 +41763,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 = "20.5.0";
+const libVersion = "20.7.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -42272,7 +42542,6 @@ class ServerItemRenderer extends React.Component {
     const qScore = this.questionRenderer.scoreWidgets();
     const qGuess = this.questionRenderer.getUserInputForWidgets();
     const state = this.questionRenderer.getSerializedState();
-    // @ts-expect-error - TS2322 - Type 'Partial<Record<string, KEScore>>' is not assignable to type '{ [key: string]: KEScore; }'. | TS2345 - Argument of type '{ [widgetId: string]: PerseusScore; }' is not assignable to parameter of type 'Partial<Record<string, { type: "invalid"; message?: string | null | undefined; suppressAlmostThere?: boolean | null | undefined; }>>'.
     return mapObject(qScore, (score, id) => {
       return Util.keScoreFromPerseusScore(score, qGuess[id], state);
     });
@@ -44202,6 +44471,218 @@ function generateTestPerseusItem(customFields = {}) {
   return _extends({}, genericPerseusItemData, customFields);
 }
 
+/**
+ * Some helpers for CEDAR logging. CEDAR convention dictates
+ * that enum values should be upper case. Ex: for the
+ * PerseusWidgetUsedInProblemAttempt CEDAR event, we needed
+ * to: get the type and convert that to an enum value.
+ */
+
+const widgetNameToEnum = {
+  categorizer: "CATEGORIZER",
+  "cs-program": "CS_PROGRAM",
+  definition: "DEFINITION",
+  "deprecated-standin": "DEPRECATED_STANDIN",
+  dropdown: "DROPDOWN",
+  explanation: "EXPLANATION",
+  expression: "EXPRESSION",
+  "graded-group-set": "GRADED_GROUP_SET",
+  "graded-group": "GRADED_GROUP",
+  grapher: "GRAPHER",
+  group: "GROUP",
+  iframe: "IFRAME",
+  image: "IMAGE",
+  "input-number": "INPUT_NUMBER",
+  interaction: "INTERACTIVE",
+  "interactive-graph": "INTERACTIVE_GRAPH",
+  "label-image": "LABEL_IMAGE",
+  "lights-puzzle": "LIGHTS_PUZZLE",
+  matcher: "MATCHER",
+  matrix: "MATRIX",
+  measurer: "MEASURER",
+  "molecule-renderer": "MOLECULE",
+  "number-line": "NUMBER_LINE",
+  "numeric-input": "NUMERIC_INPUT",
+  orderer: "ORDERER",
+  passage: "PASSAGE",
+  "passage-ref": "PASSAGE_REF",
+  "passage-ref-target": "PASSAGE_REF_TARGET",
+  plotter: "PLOTTER",
+  "python-program": "PYTHON_PROGRAM",
+  "reaction-diagram": "REACTION_DIAGRAM",
+  radio: "RADIO",
+  sequence: "SEQUENCE",
+  simulator: "SIMULATOR",
+  sorter: "SORTER",
+  table: "TABLE",
+  "unit-input": "UNIT",
+  video: "VIDEO"
+};
+function convertWidgetNameToEnum(name) {
+  const widgetEnum = widgetNameToEnum[name];
+  if (!widgetEnum) {
+    throw new Error(`Unknown widget name: ${name}`);
+  }
+  return widgetEnum;
+}
+function getWidgetTypeFromWidgetId(widgetId) {
+  const [widgetType, widgetNumber] = widgetId.split(" ");
+  if (!widgetNumber) {
+    throw new Error(`Incorrect format for widget ID: ${widgetId}`);
+  }
+  if (!widgetNameToEnum[widgetType]) {
+    throw new Error(`Unknown widget type (${widgetType}) in widget ID: ${widgetId}`);
+  }
+  return widgetType;
+}
+
+let WidgetType = /*#__PURE__*/function (WidgetType) {
+  WidgetType["Categorizer"] = "categorizer";
+  WidgetType["CSProgram"] = "cs-program";
+  WidgetType["Definition"] = "definition";
+  WidgetType["Dropdown"] = "dropdown";
+  WidgetType["Explanation"] = "explanation";
+  WidgetType["Expression"] = "expression";
+  WidgetType["GradedGroup"] = "graded-group";
+  WidgetType["GradedGroupAnswerBar"] = "graded-group-answer-bar";
+  WidgetType["GradedGroupSet"] = "graded-group-set";
+  WidgetType["Grapher"] = "grapher";
+  WidgetType["Group"] = "group";
+  WidgetType["Iframe"] = "iframe";
+  WidgetType["Image"] = "image";
+  WidgetType["InputNumber"] = "input-number";
+  WidgetType["Interaction"] = "interaction";
+  WidgetType["InteractiveGraph"] = "interactive-graph";
+  WidgetType["InteractiveNumberLine"] = "interactive-number-line";
+  WidgetType["LabelImage"] = "label-image";
+  WidgetType["Matcher"] = "matcher";
+  WidgetType["Matrix"] = "matrix";
+  WidgetType["Measurer"] = "measurer";
+  WidgetType["Molecule"] = "molecule";
+  WidgetType["NumberLine"] = "number-line";
+  WidgetType["NumericInput"] = "numeric-input";
+  WidgetType["Orderer"] = "orderer";
+  WidgetType["Passage"] = "passage";
+  WidgetType["PassageRef"] = "passage-ref";
+  WidgetType["PassageRefTarget"] = "passage-ref-target";
+  WidgetType["Plotter"] = "plotter";
+  WidgetType["Protractor"] = "protractor";
+  WidgetType["PythonProgram"] = "python-program";
+  WidgetType["Radio"] = "radio";
+  WidgetType["Sorter"] = "sorter";
+  WidgetType["Table"] = "table";
+  WidgetType["Unit"] = "unit";
+  WidgetType["Video"] = "video";
+  WidgetType["VideoTranscriptLink"] = "video-transcript-link";
+  return WidgetType;
+}({});
+// These are all the current widgets that require user-input and are supported for automatic scoring
+const QUESTION_WIDGETS = ["numeric-input", "input-number", "radio", "interactive-graph", "interactive-number-line", "categorizer", "plotter", "orderer", "protractor", "matcher", "sorter"];
+
+/**
+ * Regex for widget placeholders in a string.
+ *
+ * First capture group is the widget ID (ex. 'radio 1')
+ * Second capture group is the widget type (ex. "radio)
+ * exec return will look like: ['[[☃ radio 1]]', 'radio 1', 'radio']
+ */
+function getWidgetRegex() {
+  return /\[\[☃ (([a-z-]+) \d+)\]\]/g;
+}
+
+/**
+ * Add a widget placeholder using the provided widget type and instance number.
+ * ex. addWidget(WidgetType.Radio, 1) => "[[☃ radio 1]]"
+ *
+ * @param {WidgetType} widgetType
+ * @param {number} instance
+ * @returns {string}
+ */
+function addWidget(widgetType, instance) {
+  return `[[☃ ${widgetType} ${String(instance)}]]`;
+}
+
+/**
+ * Extract all widget IDs, which includes the widget type and instance number.
+ * example output: ['radio 1', 'categorizer 1', 'categorizor 2']
+ *
+ * Content should contain Perseus widget placeholders,
+ * which look like: '[[☃ radio 1]]'.
+ *
+ * @param {string} content
+ * @returns {Array<WidgetId>} widgets
+ */
+function getAllWidgetIds(content) {
+  const widgets = [];
+  const localWidgetRegex = getWidgetRegex();
+  let match = localWidgetRegex.exec(content);
+  while (match !== null) {
+    widgets.push(match[1]);
+    match = localWidgetRegex.exec(content);
+  }
+  return widgets;
+}
+
+/**
+ * Check if a specific widget is an actual widget type using its name.
+ * The widget name should include a widget type, without an instance number,
+ * as a string. ex. 'radio'
+ *
+ * @param {string} widgetName
+ * @returns {boolean}
+ */
+function isWidgetType(widgetName) {
+  return Object.values(WidgetType).includes(widgetName);
+}
+
+/**
+ * Extract all widget types from a Perseus JSON content string.
+ * This does not include the instance number and prevents duplicates.
+ * example output: ['radio', 'categorizer']
+ *
+ * @param {string} content
+ * @returns {Array<WidgetId>}
+ */
+function getAllWidgetTypes(content) {
+  const widgetTypes = [];
+  const localWidgetRegex = getWidgetRegex();
+  let match = localWidgetRegex.exec(content);
+  while (match !== null) {
+    const matchType = match[2];
+    if (!widgetTypes.includes(matchType) && isWidgetType(matchType)) {
+      widgetTypes.push(matchType);
+    }
+    match = localWidgetRegex.exec(content);
+  }
+  return widgetTypes;
+}
+
+/**
+ * Check if a specific widget is a question widget type using its ID.
+ * The widget ID includes the widget type and the instance number.
+ *
+ * @param {WidgetId} widgetId
+ * @returns {boolean}
+ */
+function isQuestionWidgetType(widgetId) {
+  return QUESTION_WIDGETS.includes(widgetId.split(" ")[0]);
+}
+
+/**
+ * Extract the widget IDs of all widgets considered question widgets. Widget IDs
+ * include widget type and instance number.
+ * example output: ['radio 1', 'categorizer 1']
+ *
+ * Content should contain Perseus widget placeholders,
+ * which look like: '[[☃ radio 1]]'.
+ *
+ * @param {string} content
+ * @returns Array<WidgetId>
+ */
+function getQuestionWidgetIds(content) {
+  return getAllWidgetIds(content).filter(isQuestionWidgetType);
+}
+
 const EditorJsonify = {
   serialize: function () {
     // Omit props that get passed to all widgets
@@ -44210,5 +44691,5 @@ const EditorJsonify = {
   }
 };
 
-export { ApiOptions, ArrowPicker, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, ColorPicker, DashPicker, dependencies as Dependencies, EditorJsonify, ElementContainer, Errors, Expression, util as GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusError, PerseusExpressionAnswerFormConsidered, PerseusMarkdown, Plotter$1 as PlotterWidget, Radio, Renderer, ref as ServerItemRenderer, sizingUtils as SizingUtils, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, WidgetJsonifyDeprecated, widgets$1 as Widgets, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, displaySigFigs, generateTestPerseusItem, genericPerseusItemData, getAnswersFromWidgets, globalConstants, globalStyles, iconPaths as icons, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, traverse, violatingWidgets, allWidgets as widgets };
+export { ApiOptions, ArrowPicker, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, ColorPicker, DashPicker, dependencies as Dependencies, EditorJsonify, ElementContainer, Errors, Expression, util as GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusError, PerseusExpressionAnswerFormConsidered, PerseusMarkdown, Plotter$1 as PlotterWidget, QUESTION_WIDGETS, Radio, Renderer, ref as ServerItemRenderer, sizingUtils as SizingUtils, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, WidgetJsonifyDeprecated, WidgetType, widgets$1 as Widgets, addWidget, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, convertWidgetNameToEnum, displaySigFigs, generateTestPerseusItem, genericPerseusItemData, getAllWidgetIds, getAllWidgetTypes, getAnswersFromWidgets, getQuestionWidgetIds, getWidgetTypeFromWidgetId, globalConstants, globalStyles, iconPaths as icons, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, traverse, violatingWidgets, allWidgets as widgets };
 //# sourceMappingURL=index.js.map