@khanacademy/perseus-editor 2.15.3 → 2.15.5

package/dist/index.js

@@ -64,7 +64,7 @@ var i18n__namespace = /*#__PURE__*/_interopNamespace(i18n$1);
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "2.15.3";
+const libVersion = "2.15.5";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -26336,7 +26336,8 @@ class DropdownEditor extends React__namespace.Component {
         value: choice.content
       }), /*#__PURE__*/React__namespace.createElement("a", {
         href: "#",
-        className: "simple-button orange"
+        className: "simple-button orange",
+        "aria-label": "Delete choice"
         // eslint-disable-next-line react/jsx-no-bind
         // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
         ,
@@ -27436,7 +27437,7 @@ const {
   RangeInput: RangeInput$5
 } = perseus.components;
 const {
-  getDependencies: getDependencies$1
+  getDependencies: getDependencies$9
 } = perseus.Dependencies;
 const defaultBackgroundImage$3 = {
   url: null,
@@ -27757,7 +27758,7 @@ const GraphSettings = createReactClass__default["default"]({
     const scale = [perseus.KhanMath.roundTo(2, perseus.Util.scaleFromExtent(this.props.range[0], this.props.box[0])), perseus.KhanMath.roundTo(2, perseus.Util.scaleFromExtent(this.props.range[1], this.props.box[1]))];
     const {
       TeX
-    } = getDependencies$1();
+    } = getDependencies$9();
     return /*#__PURE__*/React__namespace.createElement("div", null, ___default["default"].contains(this.props.editableSettings, "canvas") && /*#__PURE__*/React__namespace.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React__namespace.createElement("div", {
@@ -28600,6 +28601,7 @@ class InputNumberEditor extends React__namespace.Component {
       type: "text",
       disabled: !this.props.inexact,
       defaultValue: this.props.maxError,
+      "aria-label": "Max error",
       onBlur: e => {
         const ans = "" + (perseus.Util.firstNumericalParse(e.target.value) || 0);
         e.target.value = ans;
@@ -28614,7 +28616,8 @@ class InputNumberEditor extends React__namespace.Component {
         this.props.onChange({
           answerType: e.target.value
         });
-      }
+      },
+      "aria-label": "Answer type"
     }, answerTypeOptions), /*#__PURE__*/React__namespace.createElement(InfoTip$f, null, /*#__PURE__*/React__namespace.createElement("p", null, "Use the default \"Numbers\" unless the answer must be in a specific form (e.g., question is about converting decimals to fractions)."))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Width", " ", /*#__PURE__*/React__namespace.createElement("select", {
       value: this.props.size,
       onChange: e => {
@@ -28654,148 +28657,140 @@ class InputNumberEditor extends React__namespace.Component {
 }
 
 const {
-  ButtonGroup: ButtonGroup$2,
-  MathInput: MathInput$1,
-  NumberInput: NumberInput$c
+  MathInput: MathInput$8,
+  NumberInput: NumberInput$g
 } = perseus.components;
-class ConstraintEditor extends React__namespace.Component {
+const {
+  getDependencies: getDependencies$8
+} = perseus.Dependencies;
+//
+// Editor for function plots
+//
+// TODO(eater): Factor this out
+//
+class FunctionEditor extends React__namespace.Component {
+  static propTypes = {
+    ...perseus.Changeable.propTypes,
+    value: PropTypes__default["default"].string,
+    rangeMin: PropTypes__default["default"].string,
+    rangeMax: PropTypes__default["default"].string,
+    color: PropTypes__default["default"].string,
+    strokeDashArray: PropTypes__default["default"].string,
+    strokeWidth: PropTypes__default["default"].number
+  };
   static defaultProps = {
-    constraint: "none",
-    snap: 0.5,
-    constraintFn: "0",
-    constraintXMin: "-10",
-    constraintXMax: "10",
-    constraintYMin: "-10",
-    constraintYMax: "10"
+    value: "x",
+    rangeMin: "-10",
+    rangeMax: "10",
+    color: perseus.KhanColors.BLUE,
+    strokeDasharray: "",
+    strokeWidth: 2
   };
-  change = propName => {
-    return perseus.Changeable.change.call(this, propName);
+  change = (() => {
+    var _this = this;
+    return function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      return perseus.Changeable.change.apply(_this, args);
+    };
+  })();
+  serialize = () => {
+    return perseus.EditorJsonify.serialize.call(this);
   };
   render() {
     const {
       TeX
-    } = perseus.Dependencies.getDependencies();
+    } = getDependencies$8();
     const analyticsStub = {
       onAnalyticsEvent: () => Promise.resolve()
     };
-    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-row"
-    }, "Constraint:", " ", /*#__PURE__*/React__namespace.createElement(ButtonGroup$2, {
-      value: this.props.constraint,
-      allowEmpty: false,
-      buttons: [{
-        value: "none",
-        content: "None"
-      }, {
-        value: "snap",
-        content: "Snap"
-      }, {
-        value: "x",
-        content: "x="
-      }, {
-        value: "y",
-        content: "y="
-      }],
-      onChange: this.change("constraint")
-    })), this.props.constraint === "snap" && /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-row"
-    }, "Snap:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$c, {
-      value: this.props.snap,
-      placeholder: 0,
-      onChange: this.change("snap")
-    })), this.props.constraint === "x" && /*#__PURE__*/React__namespace.createElement("div", {
-      className: "graph-settings"
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement(TeX, null, "x="), " ", /*#__PURE__*/React__namespace.createElement(MathInput$1, {
-      buttonsVisible: "never",
-      value: this.props.constraintFn,
-      onChange: this.change("constraintFn"),
-      analytics: analyticsStub
-    }))), this.props.constraint === "y" && /*#__PURE__*/React__namespace.createElement("div", {
+    return /*#__PURE__*/React__namespace.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement(TeX, null, "y="), " ", /*#__PURE__*/React__namespace.createElement(MathInput$1, {
+    }, /*#__PURE__*/React__namespace.createElement(TeX, null, this.props.funcName + "(x)="), " ", /*#__PURE__*/React__namespace.createElement(MathInput$8, {
       buttonsVisible: "never",
-      value: this.props.constraintFn,
-      onChange: this.change("constraintFn"),
+      value: this.props.value,
+      onChange: this.change("value"),
       analytics: analyticsStub
-    }))), "Ensure these are set so nothing can be dragged off the canvas:", /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("div", {
+    })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement(TeX, null, "x \\in \\Large["), " ", /*#__PURE__*/React__namespace.createElement(MathInput$1, {
+    }, "Range: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathInput$8, {
       buttonsVisible: "never",
-      value: this.props.constraintXMin,
-      onChange: this.change("constraintXMin"),
+      value: this.props.rangeMin,
+      onChange: this.change("rangeMin"),
       analytics: analyticsStub
-    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ", "), " ", /*#__PURE__*/React__namespace.createElement(MathInput$1, {
+    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathInput$8, {
       buttonsVisible: "never",
-      value: this.props.constraintXMax,
-      onChange: this.change("constraintXMax"),
+      value: this.props.rangeMax,
+      onChange: this.change("rangeMax"),
       analytics: analyticsStub
-    }), " ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large]"))), /*#__PURE__*/React__namespace.createElement("div", {
+    }), /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("div", {
+    }, /*#__PURE__*/React__namespace.createElement(perseus.ColorPicker, {
+      value: this.props.color,
+      onChange: this.change("color")
+    })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement(TeX, null, "y \\in \\Large["), " ", /*#__PURE__*/React__namespace.createElement(MathInput$1, {
-      buttonsVisible: "never",
-      value: this.props.constraintYMin,
-      onChange: this.change("constraintYMin"),
-      analytics: analyticsStub
-    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ", "), " ", /*#__PURE__*/React__namespace.createElement(MathInput$1, {
-      buttonsVisible: "never",
-      value: this.props.constraintYMax,
-      onChange: this.change("constraintYMax"),
-      analytics: analyticsStub
-    }), " ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large]"))));
+    }, /*#__PURE__*/React__namespace.createElement(perseus.DashPicker, {
+      value: this.props.strokeDasharray,
+      onChange: this.change("strokeDasharray")
+    })), /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-row"
+    }, /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-left-col"
+    }, "Width:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$g, {
+      value: this.props.strokeWidth,
+      placeholder: 2,
+      onChange: this.change("strokeWidth")
+    }))));
   }
 }
 
 const {
-  MathInput,
-  NumberInput: NumberInput$b,
+  MathInput: MathInput$7,
   TextInput: TextInput$5
 } = perseus.components;
 const {
-  getDependencies
+  getDependencies: getDependencies$7
 } = perseus.Dependencies;
-const {
-  unescapeMathMode
-} = perseus.Util;
-const defaultInteractionProps = {
-  graph: {
-    box: [400, 400],
-    labels: ["x", "y"],
-    range: [[-10, 10], [-10, 10]],
-    tickStep: [1, 1],
-    gridStep: [1, 1],
-    markings: "graph"
-  },
-  elements: []
-};
 //
-// Editor for non-interactive points
+// Editor for labels
 //
-// TODO(eater): Factor this out
+// TODO(eater): Factor this out maybe?
+// TODO(eater): Add text direction
 //
-class PointEditor extends React__namespace.Component {
+class LabelEditor extends React__namespace.Component {
   static propTypes = {
     ...perseus.Changeable.propTypes,
+    color: PropTypes__default["default"].string,
     coordX: PropTypes__default["default"].string,
     coordY: PropTypes__default["default"].string,
-    color: PropTypes__default["default"].string
+    label: PropTypes__default["default"].string
   };
   static defaultProps = {
     coordX: "0",
     coordY: "0",
-    color: perseus.KhanColors.BLACK
+    color: perseus.KhanColors.BLACK,
+    label: "\\phi"
+  };
+  change = (() => {
+    var _this = this;
+    return function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      return perseus.Changeable.change.apply(_this, args);
+    };
+  })();
+  serialize = () => {
+    return perseus.EditorJsonify.serialize.call(this);
   };
   render() {
     const {
       TeX
-    } = getDependencies();
+    } = getDependencies$7();
     const analyticsStub = {
       onAnalyticsEvent: () => Promise.resolve()
     };
@@ -28803,42 +28798,40 @@ class PointEditor extends React__namespace.Component {
       className: "graph-settings"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, "Coordinate: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathInput, {
+    }, /*#__PURE__*/React__namespace.createElement(TextInput$5, {
+      value: this.props.label,
+      onChange: this.change("label"),
+      style: {
+        width: "100%"
+      }
+    })), /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-row"
+    }, "Location: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathInput$7, {
       buttonsVisible: "never",
-      value: this.props.coordX
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
+      value: this.props.coordX,
       onChange: this.change("coordX"),
       analytics: analyticsStub
-    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathInput, {
+    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathInput$7, {
       buttonsVisible: "never",
-      value: this.props.coordY
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
+      value: this.props.coordY,
       onChange: this.change("coordY"),
       analytics: analyticsStub
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement(perseus.ColorPicker, {
-      value: this.props.color
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
+      value: this.props.color,
       onChange: this.change("color")
     })));
   }
-  change = (() => {
-    var _this = this;
-    return function () {
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      return perseus.Changeable.change.apply(_this, args);
-    };
-  })();
-  serialize = () => {
-    return perseus.EditorJsonify.serialize.call(this);
-  };
 }
+
+const {
+  MathInput: MathInput$6,
+  NumberInput: NumberInput$f
+} = perseus.components;
+const {
+  getDependencies: getDependencies$6
+} = perseus.Dependencies;
 //
 // Editor for non-interactive line segments
 //
@@ -28866,10 +28859,22 @@ class LineEditor extends React__namespace.Component {
     arrows: "",
     strokeWidth: 2
   };
+  change = (() => {
+    var _this = this;
+    return function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      return perseus.Changeable.change.apply(_this, args);
+    };
+  })();
+  serialize = () => {
+    return perseus.EditorJsonify.serialize.call(this);
+  };
   render() {
     const {
       TeX
-    } = getDependencies();
+    } = getDependencies$6();
     const analyticsStub = {
       onAnalyticsEvent: () => Promise.resolve()
     };
@@ -28877,98 +28882,60 @@ class LineEditor extends React__namespace.Component {
       className: "graph-settings"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, "Start: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathInput, {
+    }, "Start: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathInput$6, {
       buttonsVisible: "never",
-      value: this.props.startX
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
+      value: this.props.startX,
       onChange: this.change("startX"),
       analytics: analyticsStub
-    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathInput, {
+    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathInput$6, {
       buttonsVisible: "never",
-      value: this.props.startY
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
+      value: this.props.startY,
       onChange: this.change("startY"),
       analytics: analyticsStub
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, "End: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathInput, {
+    }, "End: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathInput$6, {
       buttonsVisible: "never",
-      value: this.props.endX
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
+      value: this.props.endX,
       onChange: this.change("endX"),
       analytics: analyticsStub
-    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathInput, {
+    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathInput$6, {
       buttonsVisible: "never",
-      value: this.props.endY
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
+      value: this.props.endY,
       onChange: this.change("endY"),
       analytics: analyticsStub
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement(perseus.ColorPicker, {
-      value: this.props.color
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
+      value: this.props.color,
       onChange: this.change("color")
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement(perseus.DashPicker, {
-      value: this.props.strokeDasharray
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
+      value: this.props.strokeDasharray,
       onChange: this.change("strokeDasharray")
     }), "\xA0 \xA0", /*#__PURE__*/React__namespace.createElement(perseus.ArrowPicker, {
-      value: this.props.arrows
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
+      value: this.props.arrows,
       onChange: this.change("arrows")
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-left-col"
-    }, "Width:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$b, {
+    }, "Width:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$f, {
       value: this.props.strokeWidth,
-      placeholder: 2
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
+      placeholder: 2,
       onChange: this.change("strokeWidth")
     }))));
   }
-  change = (() => {
-    var _this2 = this;
-    return function () {
-      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-        args[_key2] = arguments[_key2];
-      }
-      return perseus.Changeable.change.apply(_this2, args);
-    };
-  })();
-  serialize = () => {
-    return perseus.EditorJsonify.serialize.call(this);
-  };
 }
-//
-// Editor for interactive movable points
-//
-// TODO(eater): Factor this out
-// TODO(eater): Rethink how constraints are represented
-//
-class MovablePointEditor extends React__namespace.Component {
-  static propTypes = {
-    ...perseus.Changeable.propTypes,
-    startX: PropTypes__default["default"].string,
-    startY: PropTypes__default["default"].string,
-    constraint: PropTypes__default["default"].string,
-    snap: PropTypes__default["default"].number,
-    constraintFn: PropTypes__default["default"].string
-  };
+
+const {
+  ButtonGroup: ButtonGroup$2,
+  MathInput: MathInput$5,
+  NumberInput: NumberInput$e
+} = perseus.components;
+class ConstraintEditor extends React__namespace.Component {
   static defaultProps = {
-    startX: "0",
-    startY: "0",
     constraint: "none",
     snap: 0.5,
     constraintFn: "0",
@@ -28977,48 +28944,98 @@ class MovablePointEditor extends React__namespace.Component {
     constraintYMin: "-10",
     constraintYMax: "10"
   };
+  change = propName => {
+    return perseus.Changeable.change.call(this, propName);
+  };
   render() {
     const {
       TeX
-    } = getDependencies();
+    } = perseus.Dependencies.getDependencies();
     const analyticsStub = {
       onAnalyticsEvent: () => Promise.resolve()
     };
-    return /*#__PURE__*/React__namespace.createElement("div", {
+    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-row"
+    }, "Constraint:", " ", /*#__PURE__*/React__namespace.createElement(ButtonGroup$2, {
+      value: this.props.constraint,
+      allowEmpty: false,
+      buttons: [{
+        value: "none",
+        content: "None"
+      }, {
+        value: "snap",
+        content: "Snap"
+      }, {
+        value: "x",
+        content: "x="
+      }, {
+        value: "y",
+        content: "y="
+      }],
+      onChange: this.change("constraint")
+    })), this.props.constraint === "snap" && /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-row"
+    }, "Snap:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$e, {
+      value: this.props.snap,
+      placeholder: 0,
+      onChange: this.change("snap")
+    })), this.props.constraint === "x" && /*#__PURE__*/React__namespace.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, "Start: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathInput, {
+    }, /*#__PURE__*/React__namespace.createElement(TeX, null, "x="), " ", /*#__PURE__*/React__namespace.createElement(MathInput$5, {
       buttonsVisible: "never",
-      value: this.props.startX,
-      onChange: this.change("startX"),
+      value: this.props.constraintFn,
+      onChange: this.change("constraintFn"),
       analytics: analyticsStub
-    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathInput, {
+    }))), this.props.constraint === "y" && /*#__PURE__*/React__namespace.createElement("div", {
+      className: "graph-settings"
+    }, /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-row"
+    }, /*#__PURE__*/React__namespace.createElement(TeX, null, "y="), " ", /*#__PURE__*/React__namespace.createElement(MathInput$5, {
       buttonsVisible: "never",
-      value: this.props.startY,
-      onChange: this.change("startY"),
+      value: this.props.constraintFn,
+      onChange: this.change("constraintFn"),
       analytics: analyticsStub
-    }), /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React__namespace.createElement("div", {
+    }))), "Ensure these are set so nothing can be dragged off the canvas:", /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, "Update ", /*#__PURE__*/React__namespace.createElement(TeX, null, "(x_n, y_n)"), " for ", /*#__PURE__*/React__namespace.createElement(TeX, null, "n ="), " ", /*#__PURE__*/React__namespace.createElement(NumberInput$b, {
-      value: this.props.varSubscript,
-      placeholder: 0,
-      onChange: this.change("varSubscript")
-    })), /*#__PURE__*/React__namespace.createElement(ConstraintEditor, this.props));
+    }, /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-row"
+    }, /*#__PURE__*/React__namespace.createElement(TeX, null, "x \\in \\Large["), " ", /*#__PURE__*/React__namespace.createElement(MathInput$5, {
+      buttonsVisible: "never",
+      value: this.props.constraintXMin,
+      onChange: this.change("constraintXMin"),
+      analytics: analyticsStub
+    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ", "), " ", /*#__PURE__*/React__namespace.createElement(MathInput$5, {
+      buttonsVisible: "never",
+      value: this.props.constraintXMax,
+      onChange: this.change("constraintXMax"),
+      analytics: analyticsStub
+    }), " ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large]"))), /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-row"
+    }, /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-row"
+    }, /*#__PURE__*/React__namespace.createElement(TeX, null, "y \\in \\Large["), " ", /*#__PURE__*/React__namespace.createElement(MathInput$5, {
+      buttonsVisible: "never",
+      value: this.props.constraintYMin,
+      onChange: this.change("constraintYMin"),
+      analytics: analyticsStub
+    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ", "), " ", /*#__PURE__*/React__namespace.createElement(MathInput$5, {
+      buttonsVisible: "never",
+      value: this.props.constraintYMax,
+      onChange: this.change("constraintYMax"),
+      analytics: analyticsStub
+    }), " ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large]"))));
   }
-  change = (() => {
-    var _this3 = this;
-    return function () {
-      for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-        args[_key3] = arguments[_key3];
-      }
-      return perseus.Changeable.change.apply(_this3, args);
-    };
-  })();
-  serialize = () => {
-    return perseus.EditorJsonify.serialize.call(this);
-  };
 }
+
+const {
+  MathInput: MathInput$4,
+  NumberInput: NumberInput$d
+} = perseus.components;
+const {
+  getDependencies: getDependencies$5
+} = perseus.Dependencies;
 //
 // Editor for interactive movable line segments
 //
@@ -29049,10 +29066,22 @@ class MovableLineEditor extends React__namespace.Component {
     constraintYMin: "-10",
     constraintYMax: "10"
   };
+  change = (() => {
+    var _this = this;
+    return function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      return perseus.Changeable.change.apply(_this, args);
+    };
+  })();
+  serialize = () => {
+    return perseus.EditorJsonify.serialize.call(this);
+  };
   render() {
     const {
       TeX
-    } = getDependencies();
+    } = getDependencies$5();
     const analyticsStub = {
       onAnalyticsEvent: () => Promise.resolve()
     };
@@ -29060,37 +29089,37 @@ class MovableLineEditor extends React__namespace.Component {
       className: "graph-settings"
     }, "Initial position:", /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, "Start: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathInput, {
+    }, "Start: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathInput$4, {
       buttonsVisible: "never",
       value: this.props.startX,
       onChange: this.change("startX"),
       analytics: analyticsStub
-    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathInput, {
+    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathInput$4, {
       buttonsVisible: "never",
       value: this.props.startY,
       onChange: this.change("startY"),
       analytics: analyticsStub
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, "End: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathInput, {
+    }, "End: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathInput$4, {
       buttonsVisible: "never",
       value: this.props.endX,
       onChange: this.change("endX"),
       analytics: analyticsStub
-    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathInput, {
+    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathInput$4, {
       buttonsVisible: "never",
       value: this.props.endY,
       onChange: this.change("endY"),
       analytics: analyticsStub
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, "Start updates ", /*#__PURE__*/React__namespace.createElement(TeX, null, "(x_n, y_n)"), " for ", /*#__PURE__*/React__namespace.createElement(TeX, null, "n ="), /*#__PURE__*/React__namespace.createElement(NumberInput$b, {
+    }, "Start updates ", /*#__PURE__*/React__namespace.createElement(TeX, null, "(x_n, y_n)"), " for ", /*#__PURE__*/React__namespace.createElement(TeX, null, "n ="), /*#__PURE__*/React__namespace.createElement(NumberInput$d, {
       value: this.props.startSubscript,
       placeholder: 0,
       onChange: this.change("startSubscript")
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, "End updates ", /*#__PURE__*/React__namespace.createElement(TeX, null, "(x_m, y_m)"), " for ", /*#__PURE__*/React__namespace.createElement(TeX, null, "m ="), /*#__PURE__*/React__namespace.createElement(NumberInput$b, {
+    }, "End updates ", /*#__PURE__*/React__namespace.createElement(TeX, null, "(x_m, y_m)"), " for ", /*#__PURE__*/React__namespace.createElement(TeX, null, "m ="), /*#__PURE__*/React__namespace.createElement(NumberInput$d, {
       value: this.props.endSubscript,
       placeholder: 0,
       onChange: this.change("endSubscript")
@@ -29098,46 +29127,57 @@ class MovableLineEditor extends React__namespace.Component {
       className: "perseus-widget-row"
     }, "All constraints are applied to the start point."), /*#__PURE__*/React__namespace.createElement(ConstraintEditor, this.props));
   }
-  change = (() => {
-    var _this4 = this;
-    return function () {
-      for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-        args[_key4] = arguments[_key4];
-      }
-      return perseus.Changeable.change.apply(_this4, args);
-    };
-  })();
-  serialize = () => {
-    return perseus.EditorJsonify.serialize.call(this);
-  };
 }
+
+const {
+  MathInput: MathInput$3,
+  NumberInput: NumberInput$c
+} = perseus.components;
+const {
+  getDependencies: getDependencies$4
+} = perseus.Dependencies;
 //
-// Editor for function plots
+// Editor for interactive movable points
 //
 // TODO(eater): Factor this out
+// TODO(eater): Rethink how constraints are represented
 //
-class FunctionEditor extends React__namespace.Component {
+class MovablePointEditor extends React__namespace.Component {
   static propTypes = {
     ...perseus.Changeable.propTypes,
-    value: PropTypes__default["default"].string,
-    rangeMin: PropTypes__default["default"].string,
-    rangeMax: PropTypes__default["default"].string,
-    color: PropTypes__default["default"].string,
-    strokeDashArray: PropTypes__default["default"].string,
-    strokeWidth: PropTypes__default["default"].number
+    startX: PropTypes__default["default"].string,
+    startY: PropTypes__default["default"].string,
+    constraint: PropTypes__default["default"].string,
+    snap: PropTypes__default["default"].number,
+    constraintFn: PropTypes__default["default"].string
   };
   static defaultProps = {
-    value: "x",
-    rangeMin: "-10",
-    rangeMax: "10",
-    color: perseus.KhanColors.BLUE,
-    strokeDasharray: "",
-    strokeWidth: 2
+    startX: "0",
+    startY: "0",
+    constraint: "none",
+    snap: 0.5,
+    constraintFn: "0",
+    constraintXMin: "-10",
+    constraintXMax: "10",
+    constraintYMin: "-10",
+    constraintYMax: "10"
+  };
+  change = (() => {
+    var _this = this;
+    return function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      return perseus.Changeable.change.apply(_this, args);
+    };
+  })();
+  serialize = () => {
+    return perseus.EditorJsonify.serialize.call(this);
   };
   render() {
     const {
       TeX
-    } = getDependencies();
+    } = getDependencies$4();
     const analyticsStub = {
       onAnalyticsEvent: () => Promise.resolve()
     };
@@ -29145,68 +29185,33 @@ class FunctionEditor extends React__namespace.Component {
       className: "graph-settings"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement(TeX, null, this.props.funcName + "(x)="), " ", /*#__PURE__*/React__namespace.createElement(MathInput, {
+    }, "Start: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathInput$3, {
       buttonsVisible: "never",
-      value: this.props.value
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
-      onChange: this.change("value"),
-      analytics: analyticsStub
-    })), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-row"
-    }, "Range: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathInput, {
-      buttonsVisible: "never",
-      value: this.props.rangeMin
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
-      onChange: this.change("rangeMin"),
+      value: this.props.startX,
+      onChange: this.change("startX"),
       analytics: analyticsStub
-    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathInput, {
+    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathInput$3, {
       buttonsVisible: "never",
-      value: this.props.rangeMax
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
-      onChange: this.change("rangeMax"),
+      value: this.props.startY,
+      onChange: this.change("startY"),
       analytics: analyticsStub
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement(perseus.ColorPicker, {
-      value: this.props.color
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
-      onChange: this.change("color")
-    })), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement(perseus.DashPicker, {
-      value: this.props.strokeDasharray
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
-      onChange: this.change("strokeDasharray")
-    })), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-left-col"
-    }, "Width:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$b, {
-      value: this.props.strokeWidth,
-      placeholder: 2
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
-      onChange: this.change("strokeWidth")
-    }))));
+    }, "Update ", /*#__PURE__*/React__namespace.createElement(TeX, null, "(x_n, y_n)"), " for ", /*#__PURE__*/React__namespace.createElement(TeX, null, "n ="), " ", /*#__PURE__*/React__namespace.createElement(NumberInput$c, {
+      value: this.props.varSubscript,
+      placeholder: 0,
+      onChange: this.change("varSubscript")
+    })), /*#__PURE__*/React__namespace.createElement(ConstraintEditor, this.props));
   }
-  change = (() => {
-    var _this5 = this;
-    return function () {
-      for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
-        args[_key5] = arguments[_key5];
-      }
-      return perseus.Changeable.change.apply(_this5, args);
-    };
-  })();
-  serialize = () => {
-    return perseus.EditorJsonify.serialize.call(this);
-  };
 }
+
+const {
+  MathInput: MathInput$2,
+  NumberInput: NumberInput$b
+} = perseus.components;
+const {
+  getDependencies: getDependencies$3
+} = perseus.Dependencies;
 //
 // Editor for parametric plots
 //
@@ -29232,10 +29237,22 @@ class ParametricEditor extends React__namespace.Component {
     strokeDasharray: "",
     strokeWidth: 2
   };
+  change = (() => {
+    var _this = this;
+    return function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      return perseus.Changeable.change.apply(_this, args);
+    };
+  })();
+  serialize = () => {
+    return perseus.EditorJsonify.serialize.call(this);
+  };
   render() {
     const {
       TeX
-    } = getDependencies();
+    } = getDependencies$3();
     const analyticsStub = {
       onAnalyticsEvent: () => Promise.resolve()
     };
@@ -29243,51 +29260,39 @@ class ParametricEditor extends React__namespace.Component {
       className: "graph-settings"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement(TeX, null, "X(t) ="), " ", /*#__PURE__*/React__namespace.createElement(MathInput, {
+    }, /*#__PURE__*/React__namespace.createElement(TeX, null, "X(t) ="), " ", /*#__PURE__*/React__namespace.createElement(MathInput$2, {
       buttonsVisible: "never",
-      value: this.props.x
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
+      value: this.props.x,
       onChange: this.change("x"),
       analytics: analyticsStub
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement(TeX, null, "Y(t) ="), " ", /*#__PURE__*/React__namespace.createElement(MathInput, {
+    }, /*#__PURE__*/React__namespace.createElement(TeX, null, "Y(t) ="), " ", /*#__PURE__*/React__namespace.createElement(MathInput$2, {
       buttonsVisible: "never",
-      value: this.props.y
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
+      value: this.props.y,
       onChange: this.change("y"),
       analytics: analyticsStub
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, "Range: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathInput, {
+    }, "Range: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathInput$2, {
       buttonsVisible: "never",
-      value: this.props.rangeMin
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
+      value: this.props.rangeMin,
       onChange: this.change("rangeMin"),
       analytics: analyticsStub
-    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathInput, {
+    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathInput$2, {
       buttonsVisible: "never",
-      value: this.props.rangeMax
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
+      value: this.props.rangeMax,
       onChange: this.change("rangeMax"),
       analytics: analyticsStub
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement(perseus.ColorPicker, {
-      value: this.props.color
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
+      value: this.props.color,
       onChange: this.change("color")
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement(perseus.DashPicker, {
-      value: this.props.strokeDasharray
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
+      value: this.props.strokeDasharray,
       onChange: this.change("strokeDasharray")
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
@@ -29295,49 +29300,51 @@ class ParametricEditor extends React__namespace.Component {
       className: "perseus-widget-left-col"
     }, "Width:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$b, {
       value: this.props.strokeWidth,
-      placeholder: 2
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
+      placeholder: 2,
       onChange: this.change("strokeWidth")
     }))));
   }
-  change = (() => {
-    var _this6 = this;
-    return function () {
-      for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
-        args[_key6] = arguments[_key6];
-      }
-      return perseus.Changeable.change.apply(_this6, args);
-    };
-  })();
-  serialize = () => {
-    return perseus.EditorJsonify.serialize.call(this);
-  };
 }
+
+const {
+  MathInput: MathInput$1
+} = perseus.components;
+const {
+  getDependencies: getDependencies$2
+} = perseus.Dependencies;
 //
-// Editor for labels
+// Editor for non-interactive points
 //
-// TODO(eater): Factor this out maybe?
-// TODO(eater): Add text direction
+// TODO(eater): Factor this out
 //
-class LabelEditor extends React__namespace.Component {
+class PointEditor extends React__namespace.Component {
   static propTypes = {
     ...perseus.Changeable.propTypes,
-    color: PropTypes__default["default"].string,
     coordX: PropTypes__default["default"].string,
     coordY: PropTypes__default["default"].string,
-    label: PropTypes__default["default"].string
+    color: PropTypes__default["default"].string
   };
   static defaultProps = {
     coordX: "0",
     coordY: "0",
-    color: perseus.KhanColors.BLACK,
-    label: "\\phi"
+    color: perseus.KhanColors.BLACK
+  };
+  change = (() => {
+    var _this = this;
+    return function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      return perseus.Changeable.change.apply(_this, args);
+    };
+  })();
+  serialize = () => {
+    return perseus.EditorJsonify.serialize.call(this);
   };
   render() {
     const {
       TeX
-    } = getDependencies();
+    } = getDependencies$2();
     const analyticsStub = {
       onAnalyticsEvent: () => Promise.resolve()
     };
@@ -29345,52 +29352,31 @@ class LabelEditor extends React__namespace.Component {
       className: "graph-settings"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement(TextInput$5, {
-      value: this.props.label
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
-      onChange: this.change("label"),
-      style: {
-        width: "100%"
-      }
-    })), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-row"
-    }, "Location: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathInput, {
+    }, "Coordinate: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathInput$1, {
       buttonsVisible: "never",
-      value: this.props.coordX
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
+      value: this.props.coordX,
       onChange: this.change("coordX"),
       analytics: analyticsStub
-    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathInput, {
+    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathInput$1, {
       buttonsVisible: "never",
-      value: this.props.coordY
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
+      value: this.props.coordY,
       onChange: this.change("coordY"),
       analytics: analyticsStub
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement(perseus.ColorPicker, {
-      value: this.props.color
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
+      value: this.props.color,
       onChange: this.change("color")
     })));
   }
-  change = (() => {
-    var _this7 = this;
-    return function () {
-      for (var _len7 = arguments.length, args = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
-        args[_key7] = arguments[_key7];
-      }
-      return perseus.Changeable.change.apply(_this7, args);
-    };
-  })();
-  serialize = () => {
-    return perseus.EditorJsonify.serialize.call(this);
-  };
 }
+
+const {
+  MathInput
+} = perseus.components;
+const {
+  getDependencies: getDependencies$1
+} = perseus.Dependencies;
 //
 // Editor for rectangles
 //
@@ -29412,10 +29398,22 @@ class RectangleEditor extends React__namespace.Component {
     height: "3",
     color: perseus.KhanColors.LIGHT_BLUE
   };
+  change = (() => {
+    var _this = this;
+    return function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      return perseus.Changeable.change.apply(_this, args);
+    };
+  })();
+  serialize = () => {
+    return perseus.EditorJsonify.serialize.call(this);
+  };
   render() {
     const {
       TeX
-    } = getDependencies();
+    } = getDependencies$1();
     const analyticsStub = {
       onAnalyticsEvent: () => Promise.resolve()
     };
@@ -29425,61 +29423,57 @@ class RectangleEditor extends React__namespace.Component {
       className: "perseus-widget-row"
     }, "Bottom left: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathInput, {
       buttonsVisible: "never",
-      value: this.props.coordX
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
+      value: this.props.coordX,
       onChange: this.change("coordX"),
       analytics: analyticsStub
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathInput, {
       buttonsVisible: "never",
-      value: this.props.coordY
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
+      value: this.props.coordY,
       onChange: this.change("coordY"),
       analytics: analyticsStub
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, "Width:", " ", /*#__PURE__*/React__namespace.createElement(MathInput, {
       buttonsVisible: "never",
-      value: this.props.width
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
+      value: this.props.width,
       onChange: this.change("width"),
       analytics: analyticsStub
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, "Height:", " ", /*#__PURE__*/React__namespace.createElement(MathInput, {
       buttonsVisible: "never",
-      value: this.props.height
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
+      value: this.props.height,
       onChange: this.change("height"),
       analytics: analyticsStub
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement(perseus.ColorPicker, {
       value: this.props.color,
-      lightColors: true
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
+      lightColors: true,
       onChange: this.change("color")
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, "You want a border? Sorry, draw your own."));
   }
-  change = (() => {
-    var _this8 = this;
-    return function () {
-      for (var _len8 = arguments.length, args = new Array(_len8), _key8 = 0; _key8 < _len8; _key8++) {
-        args[_key8] = arguments[_key8];
-      }
-      return perseus.Changeable.change.apply(_this8, args);
-    };
-  })();
-  serialize = () => {
-    return perseus.EditorJsonify.serialize.call(this);
-  };
 }
+
+const {
+  getDependencies
+} = perseus.Dependencies;
+const {
+  unescapeMathMode
+} = perseus.Util;
+const defaultInteractionProps = {
+  graph: {
+    box: [400, 400],
+    labels: ["x", "y"],
+    range: [[-10, 10], [-10, 10]],
+    tickStep: [1, 1],
+    gridStep: [1, 1],
+    markings: "graph"
+  },
+  elements: []
+};
 class InteractionEditor extends React__namespace.Component {
   // TODO(eater): Make more better
   static propTypes = {
@@ -29586,14 +29580,17 @@ class InteractionEditor extends React__namespace.Component {
     });
   };
   change = (() => {
-    var _this9 = this;
+    var _this = this;
     return function () {
-      for (var _len9 = arguments.length, args = new Array(_len9), _key9 = 0; _key9 < _len9; _key9++) {
-        args[_key9] = arguments[_key9];
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
       }
-      return perseus.Changeable.change.apply(_this9, args);
+      return perseus.Changeable.change.apply(_this, args);
     };
   })();
+  serialize = () => {
+    return perseus.EditorJsonify.serialize.call(this);
+  };
   render() {
     const {
       TeX
@@ -29915,10 +29912,6 @@ class InteractionEditor extends React__namespace.Component {
     }, "\u2605 Movable line segment"))));
     /* eslint-enable max-len */
   }
-
-  serialize = () => {
-    return perseus.EditorJsonify.serialize.call(this);
-  };
 }
 
 const UNLIMITED = "unlimited";
@@ -32625,18 +32618,24 @@ class NumberLineEditor extends React__namespace.Component {
       value: this.props.correctRel
       // @ts-expect-error - TS2322 - Type '(arg1: ChangeEvent<HTMLInputElement>) => void' is not assignable to type 'ChangeEventHandler<HTMLSelectElement>'.
       ,
-      onChange: this.onChangeRelation
+      onChange: this.onChangeRelation,
+      "aria-label": "Select relationship"
     }, /*#__PURE__*/React__namespace.createElement("option", {
-      value: "eq"
-    }, " = "), /*#__PURE__*/React__namespace.createElement("option", {
-      value: "lt"
-    }, " < "), /*#__PURE__*/React__namespace.createElement("option", {
-      value: "gt"
-    }, " > "), /*#__PURE__*/React__namespace.createElement("option", {
-      value: "le"
-    }, " \u2264 "), /*#__PURE__*/React__namespace.createElement("option", {
-      value: "ge"
-    }, " \u2265 ")), " ", /*#__PURE__*/React__namespace.createElement(NumberInput$7, {
+      value: "eq",
+      "aria-label": "Equal"
+    }, "="), /*#__PURE__*/React__namespace.createElement("option", {
+      value: "lt",
+      "aria-label": "Less than"
+    }, "<"), /*#__PURE__*/React__namespace.createElement("option", {
+      value: "gt",
+      "aria-label": "Greater than"
+    }, ">"), /*#__PURE__*/React__namespace.createElement("option", {
+      value: "le",
+      "aria-label": "Less than or equal"
+    }, "\u2264"), /*#__PURE__*/React__namespace.createElement("option", {
+      value: "ge",
+      "aria-label": "Greater than or equal"
+    }, "\u2265")), " ", /*#__PURE__*/React__namespace.createElement(NumberInput$7, {
       value: this.props.correctX,
       format: this.props.labelStyle
       // eslint-disable-next-line react/jsx-no-bind
@@ -33000,11 +32999,13 @@ const NumericInputEditor = createReactClass__default["default"]({
       }, answer.status), /*#__PURE__*/React__namespace.createElement("a", {
         href: "javascript:void(0)",
         className: "answer-trash",
+        "aria-label": "Delete answer",
         onClick: () => this.onTrashAnswer(i),
         onKeyDown: e => this.onSpace(e, this.onTrashAnswer, i)
       }, /*#__PURE__*/React__namespace.createElement(InlineIcon$3, iconTrash$2)), /*#__PURE__*/React__namespace.createElement("a", {
         href: "javascript:void(0)",
         className: "options-toggle",
+        "aria-label": "Toggle options",
         onClick: () => this.onToggleOptions(i),
         onKeyDown: e => this.onSpace(e, this.onToggleOptions, i)
       }, /*#__PURE__*/React__namespace.createElement(InlineIcon$3, iconGear))), /*#__PURE__*/React__namespace.createElement("div", {