@khanacademy/perseus-editor 2.2.2 → 2.3.0

package/dist/es/index.js

@@ -1,17 +1,20 @@
-import { constants, components, Widgets, Util, Log, PerseusError, Errors, PerseusMarkdown, preprocessTex, icons, WIDGET_PROP_DENYLIST, ApiOptions, buildMapper, itemToTree, buildEmptyItemTreeForShape, shapes, itemDataVersion, ClassNames, MultiItems, traverse, Categorizer as Categorizer$1, Changeable, EditorJsonify, Dependencies, WidgetJsonifyDeprecated, Expression, interactiveSizes, KhanMath, GrapherWidget, GrapherUtil, SizingUtils, KhanColors, ColorPicker, DashPicker, ArrowPicker, ElementContainer, InteractiveGraphWidget, globalStyles, globalConstants, MatrixWidget, PlotterWidget, BaseRadio, TableWidget, TransformerWidget, displaySigFigs, widgets } from '@khanacademy/perseus';
+import { constants, components, Widgets, icons, WIDGET_PROP_DENYLIST, Util, Log, PerseusError, Errors, PerseusMarkdown, preprocessTex, ApiOptions, buildMapper, itemToTree, buildEmptyItemTreeForShape, shapes, itemDataVersion, ClassNames, MultiItems, traverse, Categorizer as Categorizer$1, Changeable, EditorJsonify, Dependencies, WidgetJsonifyDeprecated, Expression, interactiveSizes, KhanMath, GrapherWidget, GrapherUtil, SizingUtils, KhanColors, ColorPicker, DashPicker, ArrowPicker, ElementContainer, InteractiveGraphWidget, globalStyles, globalConstants, MatrixWidget, PlotterWidget, BaseRadio, TableWidget, TransformerWidget, displaySigFigs, widgets } from '@khanacademy/perseus';
 import * as React from 'react';
 import _ from 'underscore';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
+import Clickable from '@khanacademy/wonder-blocks-clickable';
+import Color from '@khanacademy/wonder-blocks-color';
+import { StyleSheet, css } from 'aphrodite';
 import $ from 'jquery';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';
-import { StyleSheet, css } from 'aphrodite';
-import Clickable from '@khanacademy/wonder-blocks-clickable';
-import Color from '@khanacademy/wonder-blocks-color';
 import classNames from 'classnames';
 import { point, number, line, ray, vector } from '@khanacademy/kmath';
 import * as KAS from '@khanacademy/kas';
+import { View } from '@khanacademy/wonder-blocks-core';
+import Spacing from '@khanacademy/wonder-blocks-spacing';
+import * as Typography from '@khanacademy/wonder-blocks-typography';
 import Button from '@khanacademy/wonder-blocks-button';
 import * as i18n$1 from '@khanacademy/wonder-blocks-i18n';
 
@@ -96,7 +99,7 @@ DeviceFramer.propTypes = {
   nochrome: PropTypes.bool
 };
 
-/* eslint-disable react/prop-types */
+/* eslint-disable @babel/no-invalid-this */
 const JsonEditor = createReactClass({
   displayName: "JsonEditor",
   getInitialState: function () {
@@ -190,6 +193,43 @@ const JsonEditor = createReactClass({
   }
 });
 
+const {
+  InlineIcon: InlineIcon$c
+} = components;
+class SectionControlButton extends React.Component {
+  render() {
+    const {
+      icon,
+      onClick,
+      title
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Clickable, {
+      className: "section-control-button " + "simple-button " + "simple-button--small ",
+      onClick: e => {
+        e.preventDefault();
+        onClick();
+      },
+      role: "button",
+      hideDefaultFocusRing: true,
+      "aria-label": title,
+      style: styles$f.button
+    }, ({
+      hovered,
+      focused,
+      pressed
+    }) => /*#__PURE__*/React.createElement(InlineIcon$c, icon));
+  }
+}
+const styles$f = StyleSheet.create({
+  button: {
+    backgroundColor: Color.gold,
+    margin: 2,
+    paddingRight: 10,
+    paddingLeft: 10,
+    paddingBottom: 2
+  }
+});
+
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 function getDefaultExportFromCjs (x) {
@@ -17683,115 +17723,6 @@ const DragTarget = createReactClass({
   }
 });
 
-/**
- * Displays a collapsable list of KaTeX rendering errors.
- */
-class KatexErrorView extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      showErrors: false
-    };
-    this.handleToggleKatexErrors = e => {
-      this.setState({
-        showErrors: !this.state.showErrors
-      });
-    };
-  }
-  render() {
-    const {
-      errorList
-    } = this.props;
-    const {
-      showErrors
-    } = this.state;
-
-    // TODO(riley) replace with SVG icons
-    const disclosureClass = showErrors ? "icon-chevron-down" : "icon-chevron-right";
-    return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$f.errorContainer)
-    }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$f.title),
-      onClick: this.handleToggleKatexErrors
-    }, /*#__PURE__*/React.createElement("i", {
-      className: disclosureClass,
-      style: {
-        fontSize: 14
-      }
-    }), "\xA0 KaTeX Errors (", errorList.length, ")"), showErrors && /*#__PURE__*/React.createElement("div", {
-      className: css(styles$f.errorExplanation)
-    }, "These errors will cause your LaTeX to load really slowly for the student. Please fix them if you can. If you can\u2019t because KaTeX doesn\u2019t support the feature you need, please message Cam."), showErrors && errorList.map((e, index) => /*#__PURE__*/React.createElement("div", {
-      className: css(styles$f.error),
-      key: index
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        color: "red"
-      }
-    }, e.math), /*#__PURE__*/React.createElement("div", null, e.message))));
-  }
-}
-KatexErrorView.propTypes = {
-  errorList: PropTypes.arrayOf(PropTypes.shape({
-    math: PropTypes.string.isRequired,
-    message: PropTypes.string.isRequired
-  })).isRequired
-};
-const styles$f = StyleSheet.create({
-  title: {
-    backgroundColor: "#eee",
-    fontSize: "1.25em",
-    padding: "4px 10px"
-  },
-  errorContainer: {
-    border: "1px solid #ddd",
-    borderTop: "none"
-  },
-  errorExplanation: {
-    padding: "4px 10px",
-    backgroundColor: "pink"
-  },
-  error: {
-    padding: "4px 10px"
-  }
-});
-
-const {
-  InlineIcon: InlineIcon$c
-} = components;
-class SectionControlButton extends React.Component {
-  render() {
-    const {
-      icon,
-      onClick,
-      title
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Clickable, {
-      className: "section-control-button " + "simple-button " + "simple-button--small ",
-      onClick: e => {
-        e.preventDefault();
-        onClick();
-      },
-      role: "button",
-      hideDefaultFocusRing: true,
-      "aria-label": title,
-      style: styles$e.button
-    }, ({
-      hovered,
-      focused,
-      pressed
-    }) => /*#__PURE__*/React.createElement(InlineIcon$c, icon));
-  }
-}
-const styles$e = StyleSheet.create({
-  button: {
-    backgroundColor: Color.gold,
-    margin: 2,
-    paddingRight: 10,
-    paddingLeft: 10,
-    paddingBottom: 2
-  }
-});
-
 const {
   InlineIcon: InlineIcon$b,
   PropCheckBox: PropCheckBox$e
@@ -17801,80 +17732,6 @@ const {
   iconChevronRight,
   iconTrash: iconTrash$8
 } = icons;
-
-// like [[snowman input-number 1]]
-const widgetPlaceholder = "[[\u2603 {id}]]";
-const widgetRegExp = "(\\[\\[\u2603 {id}\\]\\])";
-const rWidgetSplit = new RegExp(widgetRegExp.replace("{id}", "[a-z-]+ [0-9]+"), "g");
-const shortcutRegexp = /^\[\[([a-z-]+)$/; // like [[nu, [[int, etc
-
-const ENDS_WITH_A_PARAGRAPH = /(?:\n{2,}|^\n*)$/;
-const TRAILING_NEWLINES = /(\n*)$/;
-const LEADING_NEWLINES = /^(\n*)/;
-const commafyInteger = n => {
-  let str = n.toString();
-  if (str.length >= 5) {
-    str = str.replace(/(\d)(?=(\d{3})+$)/g, "$1{,}");
-  }
-  return str;
-};
-const makeEndWithAParagraphIfNecessary = content => {
-  if (!ENDS_WITH_A_PARAGRAPH.test(content)) {
-    const match = TRAILING_NEWLINES.exec(content);
-    if (match) {
-      const newlines = match[1];
-      return content + "\n\n".slice(0, 2 - newlines.length);
-    }
-  }
-  return content;
-};
-const makeStartWithAParagraphAlways = content => {
-  const match = LEADING_NEWLINES.exec(content);
-  if (!match) {
-    return content;
-  }
-  const newlines = match[1];
-  return "\n\n".slice(0, 2 - newlines.length) + content;
-};
-class WidgetSelect extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.handleChange = e => {
-      const widgetType = e.currentTarget.value;
-      if (widgetType === "") {
-        // TODO(alpert): Not sure if change will trigger here
-        // but might as well be safe
-        return;
-      }
-      if (this.props.onChange) {
-        this.props.onChange(widgetType);
-      }
-    };
-  }
-  shouldComponentUpdate() {
-    return false;
-  }
-  render() {
-    const widgets = Widgets.getPublicWidgets();
-    const orderedWidgetNames = _.sortBy(_.keys(widgets), name => {
-      return widgets[name].displayName;
-    });
-    const addWidgetString = "Add a widget\u2026";
-    return /*#__PURE__*/React.createElement("select", {
-      value: "",
-      onChange: this.handleChange
-    }, /*#__PURE__*/React.createElement("option", {
-      value: ""
-    }, addWidgetString), /*#__PURE__*/React.createElement("option", {
-      disabled: true
-    }, "--"), _.map(orderedWidgetNames, name => {
-      return /*#__PURE__*/React.createElement("option", {
-        key: name,
-        value: name
-      }, widgets[name].displayName);
-    }));
-  }
-}
 const _upgradeWidgetInfo = props => {
   // We can't call serialize here because this.refs.widget
   // doesn't exist before this component is mounted.
@@ -18009,6 +17866,153 @@ class WidgetEditor extends React.Component {
   }
 }
 
+class WidgetSelect extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.handleChange = e => {
+      const widgetType = e.currentTarget.value;
+      if (widgetType === "") {
+        // TODO(alpert): Not sure if change will trigger here
+        // but might as well be safe
+        return;
+      }
+      if (this.props.onChange) {
+        this.props.onChange(widgetType);
+      }
+    };
+  }
+  shouldComponentUpdate() {
+    return false;
+  }
+  render() {
+    const widgets = Widgets.getPublicWidgets();
+    const orderedWidgetNames = _.sortBy(_.keys(widgets), name => {
+      return widgets[name].displayName;
+    });
+    const addWidgetString = "Add a widget\u2026";
+    return /*#__PURE__*/React.createElement("select", {
+      value: "",
+      onChange: this.handleChange
+    }, /*#__PURE__*/React.createElement("option", {
+      value: ""
+    }, addWidgetString), /*#__PURE__*/React.createElement("option", {
+      disabled: true
+    }, "--"), _.map(orderedWidgetNames, name => {
+      return /*#__PURE__*/React.createElement("option", {
+        key: name,
+        value: name
+      }, widgets[name].displayName);
+    }));
+  }
+}
+
+/**
+ * Displays a collapsable list of KaTeX rendering errors.
+ */
+class KatexErrorView extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      showErrors: false
+    };
+    this.handleToggleKatexErrors = e => {
+      this.setState({
+        showErrors: !this.state.showErrors
+      });
+    };
+  }
+  render() {
+    const {
+      errorList
+    } = this.props;
+    const {
+      showErrors
+    } = this.state;
+
+    // TODO(riley) replace with SVG icons
+    const disclosureClass = showErrors ? "icon-chevron-down" : "icon-chevron-right";
+    return /*#__PURE__*/React.createElement("div", {
+      className: css(styles$e.errorContainer)
+    }, /*#__PURE__*/React.createElement("div", {
+      className: css(styles$e.title),
+      onClick: this.handleToggleKatexErrors
+    }, /*#__PURE__*/React.createElement("i", {
+      className: disclosureClass,
+      style: {
+        fontSize: 14
+      }
+    }), "\xA0 KaTeX Errors (", errorList.length, ")"), showErrors && /*#__PURE__*/React.createElement("div", {
+      className: css(styles$e.errorExplanation)
+    }, "These errors will cause your LaTeX to load really slowly for the student. Please fix them if you can. If you can\u2019t because KaTeX doesn\u2019t support the feature you need, please message Cam."), showErrors && errorList.map((e, index) => /*#__PURE__*/React.createElement("div", {
+      className: css(styles$e.error),
+      key: index
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        color: "red"
+      }
+    }, e.math), /*#__PURE__*/React.createElement("div", null, e.message))));
+  }
+}
+KatexErrorView.propTypes = {
+  errorList: PropTypes.arrayOf(PropTypes.shape({
+    math: PropTypes.string.isRequired,
+    message: PropTypes.string.isRequired
+  })).isRequired
+};
+const styles$e = StyleSheet.create({
+  title: {
+    backgroundColor: "#eee",
+    fontSize: "1.25em",
+    padding: "4px 10px"
+  },
+  errorContainer: {
+    border: "1px solid #ddd",
+    borderTop: "none"
+  },
+  errorExplanation: {
+    padding: "4px 10px",
+    backgroundColor: "pink"
+  },
+  error: {
+    padding: "4px 10px"
+  }
+});
+
+// like [[snowman input-number 1]]
+const widgetPlaceholder = "[[\u2603 {id}]]";
+const widgetRegExp = "(\\[\\[\u2603 {id}\\]\\])";
+const rWidgetSplit = new RegExp(widgetRegExp.replace("{id}", "[a-z-]+ [0-9]+"), "g");
+const shortcutRegexp = /^\[\[([a-z-]+)$/; // like [[nu, [[int, etc
+
+const ENDS_WITH_A_PARAGRAPH = /(?:\n{2,}|^\n*)$/;
+const TRAILING_NEWLINES = /(\n*)$/;
+const LEADING_NEWLINES = /^(\n*)/;
+const commafyInteger = n => {
+  let str = n.toString();
+  if (str.length >= 5) {
+    str = str.replace(/(\d)(?=(\d{3})+$)/g, "$1{,}");
+  }
+  return str;
+};
+const makeEndWithAParagraphIfNecessary = content => {
+  if (!ENDS_WITH_A_PARAGRAPH.test(content)) {
+    const match = TRAILING_NEWLINES.exec(content);
+    if (match) {
+      const newlines = match[1];
+      return content + "\n\n".slice(0, 2 - newlines.length);
+    }
+  }
+  return content;
+};
+const makeStartWithAParagraphAlways = content => {
+  const match = LEADING_NEWLINES.exec(content);
+  if (!match) {
+    return content;
+  }
+  const newlines = match[1];
+  return "\n\n".slice(0, 2 - newlines.length) + content;
+};
+
 // This is more general than the actual markdown image parsing regex,
 // which is fine for correctness since it should only mean we could
 // store extra image dimensions, unless the question is insanely
@@ -18708,11 +18712,7 @@ class Editor extends React.Component {
       // }, this);
 
       this.widgetIds = _.keys(widgets);
-      widgetsDropDown =
-      /*#__PURE__*/
-      // eslint-disable-next-line react/no-string-refs
-      React.createElement(WidgetSelect, {
-        ref: "widgetSelect",
+      widgetsDropDown = /*#__PURE__*/React.createElement(WidgetSelect, {
         onChange: this._addWidget
       });
       const insertTemplateString = "Insert template\u2026";
@@ -26898,6 +26898,80 @@ InteractionEditor.propTypes = _extends({}, Changeable.propTypes, {
 InteractionEditor.widgetName = "interaction";
 InteractionEditor.defaultProps = defaultInteractionProps;
 
+const UNLIMITED = "unlimited";
+// Parses a string (ostensibly from some UI element that only supports string
+// types, such as a <select />) into a numeric point count or the special sigil
+// "unlimited". Note that 0 is a special case, and means "unlimited".
+const parsePointCount = points => {
+  const parsed = parseInt(points, 10);
+  if (isNaN(parsed)) {
+    return UNLIMITED;
+  }
+  return parsed === 0 ? UNLIMITED : parsed;
+};
+
+const GraphPointsCountSelector = ({
+  numPoints: _numPoints = 1,
+  onChange
+}) => {
+  return /*#__PURE__*/React.createElement("select", {
+    value: _numPoints,
+    onChange: e => {
+      onChange(parsePointCount(e.target.value));
+    }
+  }, [...Array(7).keys()].map(n => /*#__PURE__*/React.createElement("option", {
+    key: n,
+    value: n
+  }, `${n} point${n > 1 ? "s" : ""}`)), /*#__PURE__*/React.createElement("option", {
+    value: UNLIMITED
+  }, "unlimited"));
+};
+
+const GraphTypeSelector = props => {
+  return /*#__PURE__*/React.createElement("select", {
+    value: props.graphType,
+    onChange: e => {
+      const type = e.target.value;
+      props.onChange(type);
+    }
+  }, /*#__PURE__*/React.createElement("option", {
+    value: "linear"
+  }, "Linear function"), /*#__PURE__*/React.createElement("option", {
+    value: "quadratic"
+  }, "Quadratic function"), /*#__PURE__*/React.createElement("option", {
+    value: "sinusoid"
+  }, "Sinusoid function"), /*#__PURE__*/React.createElement("option", {
+    value: "circle"
+  }, "Circle"), /*#__PURE__*/React.createElement("option", {
+    value: "point"
+  }, "Point(s)"), /*#__PURE__*/React.createElement("option", {
+    value: "linear-system"
+  }, "Linear System"), /*#__PURE__*/React.createElement("option", {
+    value: "polygon"
+  }, "Polygon"), /*#__PURE__*/React.createElement("option", {
+    value: "segment"
+  }, "Line Segment(s)"), /*#__PURE__*/React.createElement("option", {
+    value: "ray"
+  }, "Ray"), /*#__PURE__*/React.createElement("option", {
+    value: "angle"
+  }, "Angle"));
+};
+
+const SegmentCountSelector = ({
+  numSegments: _numSegments = 1,
+  onChange
+}) => /*#__PURE__*/React.createElement("select", {
+  key: "segment-select",
+  value: _numSegments,
+  onChange: e => {
+    const num = +e.target.value;
+    onChange(num);
+  }
+}, _.range(1, 7).map(n => /*#__PURE__*/React.createElement("option", {
+  key: n,
+  value: n
+}, `${n} segment${n > 1 ? "s" : ""}`)));
+
 const {
   InfoTip: InfoTip$e
 } = components;
@@ -26917,38 +26991,41 @@ const deprecatedProps = {
     };
   }
 };
-const InteractiveGraphEditor = createReactClass({
-  displayName: "InteractiveGraphEditor",
-  className: "perseus-widget-interactive-graph",
-  statics: {
-    widgetName: "interactive-graph"
-  },
-  getDefaultProps: function () {
-    return {
-      labels: ["x", "y"],
-      range: [[-10, 10], [-10, 10]],
-      step: [1, 1],
-      valid: true,
-      backgroundImage: defaultBackgroundImage$1,
-      markings: "graph",
-      showProtractor: false,
-      showRuler: false,
-      showTooltips: false,
-      rulerLabel: "",
-      rulerTicks: 10,
-      correct: {
-        type: "linear",
-        coords: null
-      }
-    };
-  },
-  // TODO(jack): Use versioning instead of DeprecationMixin
-  deprecatedProps: deprecatedProps,
+// [min, max]
+
+// Renders the given children in a View laid out horizontally.
+const Row = props => {
+  const {
+    children,
+    style
+  } = props;
+  return /*#__PURE__*/React.createElement(View, {
+    style: _extends({}, style, {
+      flexDirection: "row",
+      marginTop: Spacing.xSmall_8
+    })
+  }, children);
+};
+const FieldLabel = props => {
+  return /*#__PURE__*/React.createElement(Typography.LabelSmall, {
+    style: {
+      marginRight: Spacing.xSmall_8
+    }
+  }, props.children);
+};
+class InteractiveGraphEditor extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.displayName = "InteractiveGraphEditor";
+    this.className = "perseus-widget-interactive-graph";
+    this.deprecatedProps = deprecatedProps;
+  }
   // TODO(jangmi, CP-3288): Remove usage of `UNSAFE_componentWillMount`
   UNSAFE_componentWillMount() {
     DeprecationMixin.UNSAFE_componentWillMount.call(this);
-  },
-  render: function () {
+  }
+  render() {
+    var _this$props$graph$typ, _this$props$graph, _this$props$correct, _this$props$correct2, _this$props$correct3, _this$props$correct4, _this$props$correct5, _this$props$correct6, _this$props$correct7, _this$props$correct8, _this$props$correct9, _this$props$correct10;
     let graph;
     let equationString;
     const gridStep = this.props.gridStep || Util.getGridStep(this.props.range, this.props.step, interactiveSizes.defaultBoxSize);
@@ -27007,9 +27084,114 @@ const InteractiveGraphEditor = createReactClass({
         className: "perseus-error"
       }, this.props.valid);
     }
-    return /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-interactive-graph"
-    }, /*#__PURE__*/React.createElement("div", null, "Correct answer", " ", /*#__PURE__*/React.createElement(InfoTip$e, null, /*#__PURE__*/React.createElement("p", null, "Graph the correct answer in the graph below and ensure the equation or point coordinates displayed represent the correct answer.")), " ", ": ", equationString), /*#__PURE__*/React.createElement(GraphSettings, {
+    return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(FieldLabel, null, "Type of Graph:"), /*#__PURE__*/React.createElement(GraphTypeSelector, {
+      graphType: (_this$props$graph$typ = (_this$props$graph = this.props.graph) == null ? void 0 : _this$props$graph.type) != null ? _this$props$graph$typ : InteractiveGraph.defaultProps.graph.type,
+      onChange: type => {
+        this.props.onChange({
+          graph: {
+            type
+          },
+          correct: {
+            type
+          }
+        });
+      }
+    })), ((_this$props$correct = this.props.correct) == null ? void 0 : _this$props$correct.type) === "point" && /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(FieldLabel, null, "Number of Points:"), /*#__PURE__*/React.createElement(GraphPointsCountSelector, {
+      numPoints: (_this$props$correct2 = this.props.correct) == null ? void 0 : _this$props$correct2.numPoints,
+      onChange: points => {
+        this.props.onChange({
+          correct: {
+            type: "point",
+            numPoints: points
+          }
+        });
+      }
+    })), ((_this$props$correct3 = this.props.correct) == null ? void 0 : _this$props$correct3.type) === "polygon" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(FieldLabel, null, "Number of sides:"), /*#__PURE__*/React.createElement("select", {
+      key: "polygon-select",
+      value: ((_this$props$correct4 = this.props.correct) == null ? void 0 : _this$props$correct4.numSides) || 3,
+      onChange: e => {
+        const graph = _extends({}, this.props.correct, {
+          numSides: parsePointCount(e.target.value),
+          coords: null,
+          // reset the snap for UNLIMITED, which
+          // only supports "grid"
+          // From: D6578
+          snapTo: "grid"
+        });
+        this.props.onChange({
+          correct: graph
+        });
+      }
+    }, _.map(_.range(3, 13), function (n) {
+      return /*#__PURE__*/React.createElement("option", {
+        key: n,
+        value: n
+      }, `${n} sides`);
+    }), /*#__PURE__*/React.createElement("option", {
+      value: "unlimited"
+    }, "unlimited sides"))), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(FieldLabel, null, "Snap to:"), /*#__PURE__*/React.createElement("select", {
+      key: "polygon-snap",
+      value: (_this$props$correct5 = this.props.correct) == null ? void 0 : _this$props$correct5.snapTo,
+      onChange: e => {
+        const graph = _extends({}, this.props.correct, {
+          snapTo: e.target.value,
+          coords: null
+        });
+        this.props.onChange({
+          correct: graph
+        });
+      }
+    }, /*#__PURE__*/React.createElement("option", {
+      value: "grid"
+    }, "grid"), ((_this$props$correct6 = this.props.correct) == null ? void 0 : _this$props$correct6.numSides) !== "unlimited" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("option", {
+      value: "angles"
+    }, "interior angles"), /*#__PURE__*/React.createElement("option", {
+      value: "sides"
+    }, "side measures"))), /*#__PURE__*/React.createElement(InfoTip$e, null, /*#__PURE__*/React.createElement("p", null, "These options affect the movement of the vertex points. The grid option will guide the points to the nearest half step along the grid."), /*#__PURE__*/React.createElement("p", null, "The interior angle and side measure options guide the points to the nearest whole angle or side"), " ", "measure respectively.")), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Typography.LabelSmall, {
+      tag: "label"
+    }, "Show angle measures:", " ", /*#__PURE__*/React.createElement("input", {
+      type: "checkbox",
+      checked: (_this$props$correct7 = this.props.correct) == null ? void 0 : _this$props$correct7.showAngles,
+      onChange: () => {
+        this.props.onChange({
+          correct: _extends({}, this.props.correct, {
+            showAngles: !this.props.correct.showAngles
+          })
+        });
+      }
+    })), /*#__PURE__*/React.createElement(InfoTip$e, null, /*#__PURE__*/React.createElement("p", null, "Displays the interior angle measures."))), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Typography.LabelSmall, {
+      tag: "label"
+    }, "Show side measures:", " ", /*#__PURE__*/React.createElement("input", {
+      type: "checkbox",
+      checked: (_this$props$correct8 = this.props.correct) == null ? void 0 : _this$props$correct8.showSides,
+      onChange: () => {
+        this.props.onChange({
+          correct: _extends({}, this.props.correct, {
+            showSides: !this.props.correct.showSides
+          })
+        });
+      }
+    })), /*#__PURE__*/React.createElement(InfoTip$e, null, /*#__PURE__*/React.createElement("p", null, "Displays the side lengths.")))), ((_this$props$correct9 = this.props.correct) == null ? void 0 : _this$props$correct9.type) === "segment" && /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(FieldLabel, null, "Number of segments: "), /*#__PURE__*/React.createElement(SegmentCountSelector, {
+      numSegments: (_this$props$correct10 = this.props.correct) == null ? void 0 : _this$props$correct10.numSegments,
+      onChange: sides => {
+        this.props.onChange({
+          correct: {
+            type: "segment",
+            numSegments: sides,
+            coords: null
+          }
+        });
+      }
+    })), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(FieldLabel, null, "Correct answer:"), /*#__PURE__*/React.createElement(Typography.BodyMonospace, {
+      style: {
+        fontSize: 12,
+        backgroundColor: "#eee",
+        paddingInline: Spacing.xxSmall_6,
+        borderColor: "#ccc",
+        borderStyle: "solid",
+        borderWidth: 1
+      }
+    }, equationString), /*#__PURE__*/React.createElement(InfoTip$e, null, /*#__PURE__*/React.createElement("p", null, "Graph the correct answer in the graph below and ensure the equation or point coordinates displayed represent the correct answer."))), /*#__PURE__*/React.createElement(GraphSettings, {
       box: getInteractiveBoxFromSizeClass(sizeClass),
       range: this.props.range,
       labels: this.props.labels,
@@ -27048,21 +27230,22 @@ const InteractiveGraphEditor = createReactClass({
     }, "match exactly"), /*#__PURE__*/React.createElement("option", {
       value: "congruent"
     }, "be congruent"))), /*#__PURE__*/React.createElement(InfoTip$e, null, /*#__PURE__*/React.createElement("p", null, "Congruency requires only that the angle measures are the same. An exact match implies congruency, but also requires that the angles have the same orientation and that the vertices are in the same position.")))), graph);
-  },
-  changeMatchType: function (e) {
+  }
+  changeMatchType(e) {
     const correct = _.extend({}, this.props.correct, {
       match: e.target.value
     });
     this.props.onChange({
       correct: correct
     });
-  },
-  serialize: function () {
+  }
+  serialize() {
     const json = _.pick(this.props, "step", "backgroundImage", "markings", "labels", "showProtractor", "showRuler", "showTooltips", "rulerLabel", "rulerTicks", "range", "gridStep", "snapStep");
 
     // eslint-disable-next-line react/no-string-refs
     const graph = this.refs.graph;
     if (graph) {
+      // @ts-expect-error TS2339 Property 'getUserInput' does not exist on type 'ReactInstance'. Property 'getUserInput' does not exist on type 'Component<any, {}, any>'.
       const correct = graph && graph.getUserInput();
       _.extend(json, {
         graph: {
@@ -27077,8 +27260,19 @@ const InteractiveGraphEditor = createReactClass({
         }
       });
     }
+    // @ts-expect-error TS2739 Type 'Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "step" | "gridStep" | "snapStep" | "backgroundImage" | "markings" | "labels" | ... 5 more ... | "range">' is missing the following properties from type 'PerseusInteractiveGraphWidgetOptions': graph, correct
     return json;
   }
+}
+InteractiveGraphEditor.widgetName = "interactive-graph";
+InteractiveGraphEditor.defaultProps = _extends({}, InteractiveGraph.defaultProps, {
+  valid: true,
+  backgroundImage: defaultBackgroundImage$1,
+  showTooltips: false,
+  correct: {
+    type: InteractiveGraph.defaultProps.graph.type,
+    coords: null
+  }
 });
 
 const _excluded$1 = ["forwardedRef", "width", "grow", "shrink", "icon", "backgroundColor", "focusBorderColor", "borderColor", "color", "onSubmit", "leftSideIcon", "id", "testId", "type", "labelMediumInputText"];