@khanacademy/perseus 23.4.0 → 23.6.0

package/dist/es/index.js

@@ -2,7 +2,7 @@ import * as KAS from '@khanacademy/kas';
 import { MathInputI18nContext, CursorContext, getKeyTranslator, createMathField, getCursorContext, DesktopKeypad, convertDotToTimesByLocale, mathQuillInstance, KeypadInput, KeypadType, KeyArray, keypadElementPropType } from '@khanacademy/math-input';
 import * as PerseusLinter from '@khanacademy/perseus-linter';
 import { linterContextDefault, Rule, linterContextProps } from '@khanacademy/perseus-linter';
-import { View, RenderStateRoot, UniqueIDProvider, useUniqueIdWithMock, Text as Text$2 } from '@khanacademy/wonder-blocks-core';
+import { View, RenderStateRoot, UniqueIDProvider, useLatestRef, useUniqueIdWithMock, Text as Text$2 } from '@khanacademy/wonder-blocks-core';
 import Tooltip$1 from '@khanacademy/wonder-blocks-tooltip';
 import classNames from 'classnames';
 import * as React from 'react';
@@ -29,7 +29,7 @@ import { OptionItem, SingleSelect, MultiSelect } from '@khanacademy/wonder-block
 import caretDown from '@phosphor-icons/core/regular/caret-down.svg';
 import caretUp from '@phosphor-icons/core/regular/caret-up.svg';
 import debounce$2 from 'lodash.debounce';
-import { vec, Ellipse, Line as Line$4, Point as Point$2, useMovable, Text as Text$1, Polygon, Plot as Plot$3, Coordinates, Mafs } from 'mafs';
+import { vec, Ellipse, Line as Line$4, Point as Point$2, Polygon, useMovable, Text as Text$1, Plot as Plot$3, Coordinates, Mafs } from 'mafs';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import { Body, LabelSmall, LabelMedium } from '@khanacademy/wonder-blocks-typography';
 import questionIcon from '@phosphor-icons/core/regular/question.svg';
@@ -20964,254 +20964,6 @@ const styles$B = {
   }
 };
 
-/*
- * In this file, an `expression` is some portion of valid TeX enclosed in
- * curly brackets.
- */
-
-/*
- * Find the index at which an expression ends, i.e., has an unmatched
- * closing curly bracket. This method assumes that we start with a non-open
- * bracket character and end when we've seen more left than right brackets
- * (rather than assuming that we start with a bracket character and wait for
- * bracket equality).
- */
-function findEndpoint(tex, currentIndex) {
-  let bracketDepth = 0;
-  for (let i = currentIndex, len = tex.length; i < len; i++) {
-    const c = tex[i];
-    if (c === "{") {
-      bracketDepth++;
-    } else if (c === "}") {
-      bracketDepth--;
-    }
-    if (bracketDepth < 0) {
-      return i;
-    }
-  }
-  // If we never see unbalanced curly brackets, default to the
-  // entire string
-  return tex.length;
-}
-
-/*
- * Parses an individual set of curly brackets into TeX.
- */
-function parseNextExpression(tex, currentIndex, handler) {
-  // Find the first '{' and grab subsequent TeX
-  // Ex) tex: '{3}{7}', and we want the '3'
-  const openBracketIndex = tex.indexOf("{", currentIndex);
-  const nextExpIndex = openBracketIndex + 1;
-
-  // Truncate to only contain remaining TeX
-  const endpoint = findEndpoint(tex, nextExpIndex);
-  const expressionTeX = tex.substring(nextExpIndex, endpoint);
-  const parsedExp = walkTex(expressionTeX, handler);
-  return {
-    endpoint: endpoint,
-    expression: parsedExp
-  };
-}
-function getNextFracIndex(tex, currentIndex) {
-  const dfrac = "\\dfrac";
-  const frac = "\\frac";
-  const nextFrac = tex.indexOf(frac, currentIndex);
-  const nextDFrac = tex.indexOf(dfrac, currentIndex);
-  if (nextFrac > -1 && nextDFrac > -1) {
-    return Math.min(nextFrac, nextDFrac);
-  }
-  if (nextFrac > -1) {
-    return nextFrac;
-  }
-  if (nextDFrac > -1) {
-    return nextDFrac;
-  }
-  return -1;
-}
-function walkTex(tex, handler) {
-  if (!tex) {
-    return "";
-  }
-
-  // Ex) tex: '2 \dfrac {3}{7}'
-  let parsedString = "";
-  let currentIndex = 0;
-  let nextFrac = getNextFracIndex(tex, currentIndex);
-
-  // For each \dfrac, find the two expressions (wrapped in {}) and recur
-  while (nextFrac > -1) {
-    // Gather first fragment, preceding \dfrac
-    // Ex) parsedString: '2 '
-    parsedString += tex.substring(currentIndex, nextFrac);
-
-    // Remove everything preceding \dfrac, which has been parsed
-    currentIndex = nextFrac;
-
-    // Parse first expression and move index past it
-    // Ex) firstParsedExpression.expression: '3'
-    const firstParsedExpression = parseNextExpression(tex, currentIndex, handler);
-    currentIndex = firstParsedExpression.endpoint + 1;
-
-    // Parse second expression
-    // Ex) secondParsedExpression.expression: '7'
-    const secondParsedExpression = parseNextExpression(tex, currentIndex, handler);
-    currentIndex = secondParsedExpression.endpoint + 1;
-
-    // Add expressions to running total of parsed expressions
-    if (parsedString.length) {
-      parsedString += " ";
-    }
-
-    // Apply a custom handler based on the parsed subexpressions
-    parsedString += handler(firstParsedExpression.expression, secondParsedExpression.expression);
-
-    // Find next DFrac, relative to currentIndex
-    nextFrac = getNextFracIndex(tex, currentIndex);
-  }
-
-  // Add remaining TeX, which is \dfrac-free
-  parsedString += tex.slice(currentIndex);
-  return parsedString;
-}
-
-/*
- * Modify a TeX expression, returning another TeX expression. The resulting
- * expression will have its innermost fractions stubbed out with \fracs
- * (as opposed to \dfracs). All other content will remain untouched.
- */
-function modifyTex(tex) {
-  function isNestedFraction(tex) {
-    return tex.indexOf("\\frac") > -1 || tex.indexOf("\\dfrac") > -1;
-  }
-  const handler = function handler(exp1, exp2) {
-    let prefix;
-    if (isNestedFraction(exp1) || isNestedFraction(exp2)) {
-      prefix = "\\dfrac";
-    } else {
-      prefix = "\\frac";
-    }
-    return prefix + " {" + exp1 + "}{" + exp2 + "}";
-  };
-  return walkTex(tex, handler);
-}
-
-/*
- * Parse a TeX expression into something interpretable by input-number.
- * The process is concerned with: (1) parsing fractions, i.e., \dfracs; and
- * (2) removing backslash-escaping from certain characters (right now, only
- * percent signs).
- *
- * The basic algorithm for handling \dfracs splits on \dfracs and then recurs
- * on the subsequent "expressions", i.e., the {} pairs that follow \dfrac. The
- * recursion is to allow for nested \dfrac elements.
- *
- * Backslash-escapes are removed with a simple search-and-replace.
- */
-function parseTex(tex) {
-  const handler = function handler(exp1, exp2) {
-    return exp1 + "/" + exp2;
-  };
-  const texWithoutFracs = walkTex(tex, handler);
-  return texWithoutFracs.replace("\\%", "%");
-}
-var TexWrangler = {
-  parseTex,
-  modifyTex
-};
-
-/* eslint-disable react/sort-comp */
-const ModifyTex = TexWrangler.modifyTex;
-class MathOutput extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      focused: false,
-      selectorNamespace: _.uniqueId("math-output")
-    };
-    this._getInputClassName = () => {
-      let className = "math-output " + ClassNames.INPUT + " " + ClassNames.INTERACTIVE;
-      if (this.state.focused) {
-        className += " " + ClassNames.FOCUSED;
-      }
-      if (this.props.className) {
-        className += " " + this.props.className;
-      }
-      return className;
-    };
-    this._getDisplayValue = value => {
-      // Cast from (potentially a) number to string
-      let displayText;
-      if (value != null) {
-        displayText = "" + value;
-      } else {
-        displayText = "";
-      }
-      return ModifyTex(displayText);
-    };
-    this.getValue = () => {
-      return this.props.value;
-    };
-    this.focus = () => {
-      if (!this.state.focused) {
-        this.props.onFocus();
-        this._bindBlurHandler();
-        this.setState({
-          focused: true
-        });
-      }
-    };
-    this.blur = () => {
-      if (this.state.focused) {
-        this.props.onBlur();
-        this._unbindBlurHandler();
-        this.setState({
-          focused: false
-        });
-      }
-    };
-    this._bindBlurHandler = () => {
-      $(document).bind("vclick." + this.state.selectorNamespace, e => {
-        // Detect whether the target has our React DOM node as a parent
-        const $closestWidget = $(e.target).closest(
-        // @ts-expect-error - TS2769 - No overload matches this call.
-        ReactDOM__default.findDOMNode(this));
-        if (!$closestWidget.length) {
-          this.blur();
-        }
-      });
-    };
-    this._unbindBlurHandler = () => {
-      $(document).unbind("." + this.state.selectorNamespace);
-    };
-  }
-  render() {
-    const divStyle = {
-      textAlign: "center"
-    };
-    const {
-      TeX
-    } = getDependencies();
-    return /*#__PURE__*/React.createElement("span", {
-      // eslint-disable-next-line react/no-string-refs
-      ref: "input",
-      className: this._getInputClassName(),
-      "aria-label": this.props.labelText,
-      onMouseDown: this.focus,
-      onTouchStart: this.focus
-    }, /*#__PURE__*/React.createElement("div", {
-      style: divStyle
-    }, /*#__PURE__*/React.createElement(TeX, null, this._getDisplayValue(this.props.value))));
-  }
-  componentWillUnmount() {
-    this._unbindBlurHandler();
-  }
-}
-MathOutput.defaultProps = {
-  value: "",
-  onFocus: function () {},
-  onBlur: function () {}
-};
-
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 let lastId = 0;
 function uniqueIdForInput(prefix = "input-") {
@@ -21566,12 +21318,6 @@ class InputWithExamples extends React.Component {
       return `input-with-examples-${btoa(this.props.id).replace(/=/g, "")}`;
     };
     this._getInputClassName = () => {
-      // <MathOutput> is a special component that manages its own class and
-      // state, as it's a <span> that wants to act like an <input>.
-      if (this.props.type === "tex") {
-        return this.props.className;
-      }
-
       // Otherwise, we need to add these INPUT and FOCUSED tags here.
       let className = ClassNames.INPUT + " " + ClassNames.INTERACTIVE;
       if (this.state.focused) {
@@ -21582,8 +21328,7 @@ class InputWithExamples extends React.Component {
       }
       return className;
     };
-    this._getPropsForInputType = () => {
-      // Minimal set of props, used by each input type
+    this._renderInput = () => {
       const id = this._getUniqueId();
       const inputProps = {
         id: id,
@@ -21595,52 +21340,15 @@ class InputWithExamples extends React.Component {
         onFocus: this._handleFocus,
         onBlur: this._handleBlur,
         disabled: this.props.disabled,
-        style: this.props.style
-      };
-      if (this.props.type === "tex") {
-        return inputProps;
-      }
-
-      // Add useful props required for MATH and TEXT modes
-      _.extend(inputProps, {
+        style: this.props.style,
         onChange: this.props.onChange,
-        onTouchStart: captureScratchpadTouchStart$2
-      });
-
-      // And add final props that are MATH- and TEXT-specific
-      if (this.props.type === "math") {
-        return _.extend({
-          buttonSet: this.props.buttonSet,
-          buttonsVisible: this.props.buttonsVisible,
-          convertDotToTimes: this.props.convertDotToTimes
-        }, inputProps);
-      }
-      if (this.props.type === "text") {
-        return _.extend({
-          autoCapitalize: "off",
-          autoComplete: "off",
-          autoCorrect: "off",
-          spellCheck: "false"
-        }, inputProps);
-      }
-    };
-    this._getComponentForInputType = () => {
-      switch (this.props.type) {
-        case "tex":
-          return MathOutput;
-        case "math":
-          return MathInput;
-        case "text":
-          return TextInput;
-        default:
-          this.props.type;
-          return null;
-      }
-    };
-    this._renderInput = () => {
-      const inputProps = this._getPropsForInputType();
-      const InputComponent = this._getComponentForInputType();
-      return /*#__PURE__*/React.createElement(InputComponent, inputProps);
+        onTouchStart: captureScratchpadTouchStart$2,
+        autoCapitalize: "off",
+        autoComplete: "off",
+        autoCorrect: "off",
+        spellCheck: "false"
+      };
+      return /*#__PURE__*/React.createElement(TextInput, inputProps);
     };
     this._handleFocus = () => {
       this.props.onFocus();
@@ -21682,14 +21390,6 @@ class InputWithExamples extends React.Component {
   }
   render() {
     const input = this._renderInput();
-
-    // Static rendering, which doesn't include the 'tooltip' logic that the
-    // other types require, and is hence handled separately.
-    if (this.props.type === "tex") {
-      return input;
-    }
-
-    // Else, we need to be able to show examples
     const examplesContent = _.map(this.props.examples, example => {
       return "- " + example;
     }).join("\n");
@@ -21716,7 +21416,6 @@ class InputWithExamples extends React.Component {
 }
 InputWithExamples.contextType = PerseusI18nContext;
 InputWithExamples.defaultProps = {
-  type: "text",
   shouldShowExamples: true,
   onFocus: function () {},
   onBlur: function () {},
@@ -21805,6 +21504,161 @@ SimpleKeypadInput.propTypes = {
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
 
+/*
+ * In this file, an `expression` is some portion of valid TeX enclosed in
+ * curly brackets.
+ */
+
+/*
+ * Find the index at which an expression ends, i.e., has an unmatched
+ * closing curly bracket. This method assumes that we start with a non-open
+ * bracket character and end when we've seen more left than right brackets
+ * (rather than assuming that we start with a bracket character and wait for
+ * bracket equality).
+ */
+function findEndpoint(tex, currentIndex) {
+  let bracketDepth = 0;
+  for (let i = currentIndex, len = tex.length; i < len; i++) {
+    const c = tex[i];
+    if (c === "{") {
+      bracketDepth++;
+    } else if (c === "}") {
+      bracketDepth--;
+    }
+    if (bracketDepth < 0) {
+      return i;
+    }
+  }
+  // If we never see unbalanced curly brackets, default to the
+  // entire string
+  return tex.length;
+}
+
+/*
+ * Parses an individual set of curly brackets into TeX.
+ */
+function parseNextExpression(tex, currentIndex, handler) {
+  // Find the first '{' and grab subsequent TeX
+  // Ex) tex: '{3}{7}', and we want the '3'
+  const openBracketIndex = tex.indexOf("{", currentIndex);
+  const nextExpIndex = openBracketIndex + 1;
+
+  // Truncate to only contain remaining TeX
+  const endpoint = findEndpoint(tex, nextExpIndex);
+  const expressionTeX = tex.substring(nextExpIndex, endpoint);
+  const parsedExp = walkTex(expressionTeX, handler);
+  return {
+    endpoint: endpoint,
+    expression: parsedExp
+  };
+}
+function getNextFracIndex(tex, currentIndex) {
+  const dfrac = "\\dfrac";
+  const frac = "\\frac";
+  const nextFrac = tex.indexOf(frac, currentIndex);
+  const nextDFrac = tex.indexOf(dfrac, currentIndex);
+  if (nextFrac > -1 && nextDFrac > -1) {
+    return Math.min(nextFrac, nextDFrac);
+  }
+  if (nextFrac > -1) {
+    return nextFrac;
+  }
+  if (nextDFrac > -1) {
+    return nextDFrac;
+  }
+  return -1;
+}
+function walkTex(tex, handler) {
+  if (!tex) {
+    return "";
+  }
+
+  // Ex) tex: '2 \dfrac {3}{7}'
+  let parsedString = "";
+  let currentIndex = 0;
+  let nextFrac = getNextFracIndex(tex, currentIndex);
+
+  // For each \dfrac, find the two expressions (wrapped in {}) and recur
+  while (nextFrac > -1) {
+    // Gather first fragment, preceding \dfrac
+    // Ex) parsedString: '2 '
+    parsedString += tex.substring(currentIndex, nextFrac);
+
+    // Remove everything preceding \dfrac, which has been parsed
+    currentIndex = nextFrac;
+
+    // Parse first expression and move index past it
+    // Ex) firstParsedExpression.expression: '3'
+    const firstParsedExpression = parseNextExpression(tex, currentIndex, handler);
+    currentIndex = firstParsedExpression.endpoint + 1;
+
+    // Parse second expression
+    // Ex) secondParsedExpression.expression: '7'
+    const secondParsedExpression = parseNextExpression(tex, currentIndex, handler);
+    currentIndex = secondParsedExpression.endpoint + 1;
+
+    // Add expressions to running total of parsed expressions
+    if (parsedString.length) {
+      parsedString += " ";
+    }
+
+    // Apply a custom handler based on the parsed subexpressions
+    parsedString += handler(firstParsedExpression.expression, secondParsedExpression.expression);
+
+    // Find next DFrac, relative to currentIndex
+    nextFrac = getNextFracIndex(tex, currentIndex);
+  }
+
+  // Add remaining TeX, which is \dfrac-free
+  parsedString += tex.slice(currentIndex);
+  return parsedString;
+}
+
+/*
+ * Modify a TeX expression, returning another TeX expression. The resulting
+ * expression will have its innermost fractions stubbed out with \fracs
+ * (as opposed to \dfracs). All other content will remain untouched.
+ */
+function modifyTex(tex) {
+  function isNestedFraction(tex) {
+    return tex.indexOf("\\frac") > -1 || tex.indexOf("\\dfrac") > -1;
+  }
+  const handler = function handler(exp1, exp2) {
+    let prefix;
+    if (isNestedFraction(exp1) || isNestedFraction(exp2)) {
+      prefix = "\\dfrac";
+    } else {
+      prefix = "\\frac";
+    }
+    return prefix + " {" + exp1 + "}{" + exp2 + "}";
+  };
+  return walkTex(tex, handler);
+}
+
+/*
+ * Parse a TeX expression into something interpretable by input-number.
+ * The process is concerned with: (1) parsing fractions, i.e., \dfracs; and
+ * (2) removing backslash-escaping from certain characters (right now, only
+ * percent signs).
+ *
+ * The basic algorithm for handling \dfracs splits on \dfracs and then recurs
+ * on the subsequent "expressions", i.e., the {} pairs that follow \dfrac. The
+ * recursion is to allow for nested \dfrac elements.
+ *
+ * Backslash-escapes are removed with a simple search-and-replace.
+ */
+function parseTex(tex) {
+  const handler = function handler(exp1, exp2) {
+    return exp1 + "/" + exp2;
+  };
+  const texWithoutFracs = walkTex(tex, handler);
+  return texWithoutFracs.replace("\\%", "%");
+}
+var TexWrangler = {
+  parseTex,
+  modifyTex
+};
+
 /* eslint-disable react/sort-comp */
 const ParseTex$1 = TexWrangler.parseTex;
 const answerTypes = {
@@ -21983,7 +21837,6 @@ class InputNumber extends React.Component {
       value: this.props.currentValue,
       onChange: this.handleChange,
       style: inputStyles,
-      type: "text",
       examples: this.examples(),
       shouldShowExamples: this.shouldShowExamples(),
       onFocus: this._handleFocus,
@@ -22392,7 +22245,6 @@ class NumericInput extends React.Component {
       value: this.props.currentValue,
       onChange: this.handleChange,
       labelText: labelText,
-      type: "text",
       examples: this.examples(),
       shouldShowExamples: this.shouldShowExamples(),
       onFocus: this._handleFocus,
@@ -28656,13 +28508,15 @@ const ItemExtras = [
 
 const PerseusExpressionAnswerFormConsidered = ["correct", "wrong", "ungraded"];
 const lockedFigureColors = {
+  blue: "#3D7586",
   green: "#447A53",
   grayH: "#3B3D45",
   purple: "#594094",
   pink: "#B25071",
-  red: "#D92916"
+  red: "#D92916",
+  orange: "#946700"
 };
-const lockedEllipseFillStyles = {
+const lockedFigureFillStyles = {
   none: 0,
   solid: 1,
   translucent: 0.4
@@ -28682,7 +28536,7 @@ const LockedEllipse = props => {
     center: center,
     radius: radius,
     angle: angle,
-    fillOpacity: lockedEllipseFillStyles[fillStyle],
+    fillOpacity: lockedFigureFillStyles[fillStyle],
     strokeStyle: strokeStyle,
     color: lockedFigureColors[color]
   });
@@ -28942,6 +28796,29 @@ const LockedPoint = props => {
   });
 };
 
+const LockedPolygon = props => {
+  const {
+    points,
+    color,
+    showVertices,
+    fillStyle,
+    strokeStyle
+  } = props;
+  return /*#__PURE__*/React.createElement("g", {
+    className: "locked-polygon"
+  }, /*#__PURE__*/React.createElement(Polygon, {
+    points: [...points],
+    fillOpacity: lockedFigureFillStyles[fillStyle],
+    strokeStyle: strokeStyle,
+    color: lockedFigureColors[color]
+  }), showVertices && points.map((point, index) => /*#__PURE__*/React.createElement(Point$2, {
+    key: `locked-polygon-point-${index}`,
+    x: point[0],
+    y: point[1],
+    color: lockedFigureColors[color]
+  })));
+};
+
 const LockedVector = props => {
   const {
     color,
@@ -28972,13 +28849,17 @@ const GraphLockedLayer = props => {
           key: `line-${index}`,
           range: props.range
         }, figure));
+      case "vector":
+        return /*#__PURE__*/React.createElement(LockedVector, _extends({
+          key: `vector-${index}`
+        }, figure));
       case "ellipse":
         return /*#__PURE__*/React.createElement(LockedEllipse, _extends({
           key: `ellipse-${index}`
         }, figure));
-      case "vector":
-        return /*#__PURE__*/React.createElement(LockedVector, _extends({
-          key: `vector-${index}`
+      case "polygon":
+        return /*#__PURE__*/React.createElement(LockedPolygon, _extends({
+          key: `polygon-${index}`
         }, figure));
       default:
         /**
@@ -28992,6 +28873,13 @@ const GraphLockedLayer = props => {
   }));
 };
 
+const REINITIALIZE = "reinitialize";
+function reinitialize(params) {
+  return {
+    type: REINITIALIZE,
+    params
+  };
+}
 const MOVE_CONTROL_POINT = "move-control-point";
 function moveControlPoint(pointIndex, destination, itemIndex) {
   return {
@@ -29084,6 +28972,10 @@ function snap(snapStep, point) {
   return [Math.round(requestedX / snapX) * snapX, Math.round(requestedY / snapY) * snapY];
 }
 
+function useDraggable(params) {
+  return useMovable(params);
+}
+
 // The hitbox size of 48px by 48px is preserved from the legacy interactive
 // graph.
 const hitboxSizePx = 48;
@@ -29237,7 +29129,7 @@ function useControlPoint(point, color, onMovePoint) {
   } = useGraphConfig();
   const [focused, setFocused] = useState(false);
   const keyboardHandleRef = useRef(null);
-  useMovable({
+  useDraggable({
     gestureTarget: keyboardHandleRef,
     point,
     onMove: onMovePoint,
@@ -29246,7 +29138,7 @@ function useControlPoint(point, color, onMovePoint) {
   const visiblePointRef = useRef(null);
   const {
     dragging
-  } = useMovable({
+  } = useDraggable({
     gestureTarget: visiblePointRef,
     point,
     onMove: onMovePoint,
@@ -29300,7 +29192,7 @@ const Line$1 = props => {
   const line = useRef(null);
   const {
     dragging
-  } = useMovable({
+  } = useDraggable({
     gestureTarget: line,
     point: start,
     onMove: newPoint => {
@@ -29640,7 +29532,7 @@ const StyledMovablePoint = props => {
   const snapToValue = snapTo != null ? snapTo : "grid";
   const {
     dragging
-  } = useMovable({
+  } = useDraggable({
     gestureTarget: elementRef,
     point,
     onMove,
@@ -29682,7 +29574,7 @@ const PolygonGraph = props => {
   const snapToValue = snapTo != null ? snapTo : "grid";
   const {
     dragging
-  } = useMovable({
+  } = useDraggable({
     gestureTarget: ref,
     point: dragReferencePoint,
     onMove: newPoint => {
@@ -29845,7 +29737,7 @@ function MovableCircle(props) {
   const draggableRef = useRef(null);
   const {
     dragging
-  } = useMovable({
+  } = useDraggable({
     gestureTarget: draggableRef,
     point: center,
     onMove,
@@ -29976,10 +29868,24 @@ function SinusoidGraph(props) {
     coords
   } = graphState;
 
-  // Get the coefficients for calculating the quadratic equation
+  // The coefficients are used to calculate the sinusoid equation, plot the graph, and to indicate
+  // to content creators the currently selected "correct answer" in the Content Editor.
+  // While we should technically never have invalid coordinates, we want to ensure that
+  // we have a fallback so that the graph can still be plotted without crashing.
+  const coeffRef = React.useRef({
+    amplitude: 1,
+    angularFrequency: 1,
+    phase: 1,
+    verticalOffset: 0
+  });
   const coeffs = getSinusoidCoefficients(coords);
+
+  // If the coefficients are valid, update the reference
+  if (coeffs !== undefined) {
+    coeffRef.current = coeffs;
+  }
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Plot$3.OfX, {
-    y: x => computeSine(x, coeffs),
+    y: x => computeSine(x, coeffRef.current),
     color: color.blue
   }), coords.map((coord, i) => /*#__PURE__*/React.createElement(StyledMovablePoint, {
     key: "point-" + i,
@@ -30006,6 +29912,11 @@ const getSinusoidCoefficients = coords => {
   const p1 = coords[0];
   const p2 = coords[1];
 
+  // If the x-coordinates are the same, we are unable to calculate the coefficients
+  if (p2[0] === p1[0]) {
+    return;
+  }
+
   // Resulting coefficients are canonical for this sine curve
   const amplitude = p2[1] - p1[1];
   const angularFrequency = Math.PI / (2 * (p2[0] - p1[0]));
@@ -31284,6 +31195,8 @@ function getCircleCoords(graph) {
 
 function interactiveGraphReducer(state, action) {
   switch (action.type) {
+    case REINITIALIZE:
+      return initializeGraphState(action.params);
     case MOVE_CONTROL_POINT:
       return doMoveControlPoint(state, action);
     case MOVE_LINE:
@@ -31477,11 +31390,14 @@ function doMovePoint(state, action) {
       }
     case "sinusoid":
       {
-        // First, we need to verify that the new coordinates are not on the same vertical line
-        // If they are, we don't want to move the point
+        // First, we need to make sure to bound the new coordinates to the graph range
         const destination = action.destination;
+        const boundDestination = boundAndSnapToGrid(destination, state);
+
+        // Then, we need to verify that the new coordinates are not on the same
+        // vertical line. If they are, then we don't want to move the point
         const _newCoords = [...state.coords];
-        _newCoords[action.index] = action.destination;
+        _newCoords[action.index] = boundDestination;
         if (_newCoords[0][0] === _newCoords[1][0]) {
           return state;
         }
@@ -31490,7 +31406,7 @@ function doMovePoint(state, action) {
           coords: setAtIndex({
             array: state.coords,
             index: action.index,
-            newValue: boundAndSnapToGrid(destination, state)
+            newValue: boundDestination
           })
         });
       }
@@ -31498,7 +31414,10 @@ function doMovePoint(state, action) {
       {
         // Set up the new coords and check if the quadratic coefficients are valid
         const _newCoords2 = [...state.coords];
-        _newCoords2[action.index] = action.destination;
+
+        // Bind the new destination to the graph range/snapStep and then get the quadratic coefficients
+        const boundDestination = boundAndSnapToGrid(action.destination, state);
+        _newCoords2[action.index] = boundDestination;
         const QuadraticCoefficients = getQuadraticCoefficients(_newCoords2);
 
         // If the new destination results in an invalid quadratic equation, we don't want to move the point
@@ -31510,7 +31429,7 @@ function doMovePoint(state, action) {
           coords: setAtIndex({
             array: state.coords,
             index: action.index,
-            newValue: boundAndSnapToGrid(action.destination, state)
+            newValue: boundDestination
           })
         });
       }
@@ -31908,11 +31827,12 @@ function mafsStateToInteractiveGraph(state) {
 }
 const StatefulMafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
-    onChange
+    onChange,
+    graph
   } = props;
   const [state, dispatch] = React.useReducer(interactiveGraphReducer, props, initializeGraphState);
   useImperativeHandle(ref, () => ({
-    getUserInput: () => getGradableGraph(state, props.graph)
+    getUserInput: () => getGradableGraph(state, graph)
   }));
   const prevState = useRef(state);
   useEffect(() => {
@@ -31935,6 +31855,18 @@ const StatefulMafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
   useEffect(() => {
     dispatch(changeRange([[xMinRange, xMaxRange], [yMinRange, yMaxRange]]));
   }, [dispatch, xMinRange, xMaxRange, yMinRange, yMaxRange]);
+  const numSegments = graph.type === "segment" ? graph.numSegments : null;
+  const originalPropsRef = useRef(props);
+  const latestPropsRef = useLatestRef(props);
+  useEffect(() => {
+    // This conditional prevents the state from being "reinitialized" right
+    // after the first render. This is an optimization, but also prevents
+    // a bug where the graph would be marked "incorrect" during grading
+    // even if the user never interacted with it.
+    if (latestPropsRef.current !== originalPropsRef.current) {
+      dispatch(reinitialize(latestPropsRef.current));
+    }
+  }, [graph.type, numSegments, latestPropsRef]);
   return /*#__PURE__*/React.createElement(MafsGraph, _extends({}, props, {
     state: state,
     dispatch: dispatch
@@ -33309,6 +33241,12 @@ class InteractiveGraph extends React.Component {
   }
   render() {
     var _this$props$apiOption;
+    if (this.props.graph.type === "polygon" && this.props.graph.numSides === "unlimited") {
+      return /*#__PURE__*/React.createElement(LegacyInteractiveGraph, _extends({
+        ref: this.legacyGraphRef
+      }, this.props));
+    }
+
     // 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);
@@ -44101,7 +44039,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.4.0";
+const libVersion = "23.6.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -47102,5 +47040,5 @@ const EditorJsonify = {
   }
 };
 
-export { ApiOptions, ArrowPicker, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, ColorPicker, DashPicker, dependencies as Dependencies, EditorJsonify, ElementContainer, Errors, Expression, util as GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusError, PerseusExpressionAnswerFormConsidered, PerseusI18nContext, PerseusI18nContextProvider, PerseusMarkdown, Plotter$1 as PlotterWidget, QUESTION_WIDGETS, Radio, Renderer, ref as ServerItemRenderer, sizingUtils as SizingUtils, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, WidgetJsonifyDeprecated, widgets$1 as Widgets, addWidget, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, contentHasWidgetType, convertWidgetNameToEnum, displaySigFigs, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestInteractiveGraphWidget, generateTestNumericInputWidget, generateTestPerseusItem, generateTestRadioWidget, genericPerseusItemData, getAnswerFromUserInput, getAnswersFromWidgets, getCorrectAnswerForWidgetId, getValidWidgetIds, getWidgetFromWidgetMap, getWidgetIdsFromContent, getWidgetIdsFromContentByType, getWidgetTypeByWidgetId, getWidgetsFromWidgetMap, getWidgetsMapFromItemData, globalConstants, globalStyles, iconPaths as icons, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, isWidgetIdInContent, isWrongAnswerSupported, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, lockedEllipseFillStyles, lockedFigureColors, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, shouldHaveIndividualAnswer, traverse, usePerseusI18n, violatingWidgets, allWidgets as widgets };
+export { ApiOptions, ArrowPicker, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, ColorPicker, DashPicker, dependencies as Dependencies, EditorJsonify, ElementContainer, Errors, Expression, util as GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusError, PerseusExpressionAnswerFormConsidered, PerseusI18nContext, PerseusI18nContextProvider, PerseusMarkdown, Plotter$1 as PlotterWidget, QUESTION_WIDGETS, Radio, Renderer, ref as ServerItemRenderer, sizingUtils as SizingUtils, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, WidgetJsonifyDeprecated, widgets$1 as Widgets, addWidget, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, contentHasWidgetType, convertWidgetNameToEnum, displaySigFigs, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestInteractiveGraphWidget, generateTestNumericInputWidget, generateTestPerseusItem, generateTestRadioWidget, genericPerseusItemData, getAnswerFromUserInput, getAnswersFromWidgets, getCorrectAnswerForWidgetId, getValidWidgetIds, getWidgetFromWidgetMap, getWidgetIdsFromContent, getWidgetIdsFromContentByType, getWidgetTypeByWidgetId, getWidgetsFromWidgetMap, getWidgetsMapFromItemData, globalConstants, globalStyles, iconPaths as icons, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, isWidgetIdInContent, isWrongAnswerSupported, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, lockedFigureColors, lockedFigureFillStyles, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, shouldHaveIndividualAnswer, traverse, usePerseusI18n, violatingWidgets, allWidgets as widgets };
 //# sourceMappingURL=index.js.map