@khanacademy/perseus-editor 2.15.4 → 2.15.5

package/dist/es/index.js

@@ -24,7 +24,7 @@ import * as i18n$1 from '@khanacademy/wonder-blocks-i18n';
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "2.15.4";
+const libVersion = "2.15.5";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -27399,7 +27399,7 @@ const {
   RangeInput: RangeInput$5
 } = components;
 const {
-  getDependencies: getDependencies$1
+  getDependencies: getDependencies$9
 } = Dependencies;
 const defaultBackgroundImage$3 = {
   url: null,
@@ -27716,7 +27716,7 @@ const GraphSettings = createReactClass({
     const scale = [KhanMath.roundTo(2, Util.scaleFromExtent(this.props.range[0], this.props.box[0])), KhanMath.roundTo(2, Util.scaleFromExtent(this.props.range[1], this.props.box[1]))];
     const {
       TeX
-    } = getDependencies$1();
+    } = getDependencies$9();
     return /*#__PURE__*/React.createElement("div", null, _.contains(this.props.editableSettings, "canvas") && /*#__PURE__*/React.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React.createElement("div", {
@@ -28589,136 +28589,107 @@ InputNumberEditor.defaultProps = {
 };
 
 const {
-  ButtonGroup: ButtonGroup$2,
-  MathInput: MathInput$1,
-  NumberInput: NumberInput$c
+  MathInput: MathInput$8,
+  NumberInput: NumberInput$g
 } = components;
-class ConstraintEditor extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.change = propName => {
-      return Changeable.change.call(this, propName);
+const {
+  getDependencies: getDependencies$8
+} = Dependencies;
+//
+// Editor for function plots
+//
+// TODO(eater): Factor this out
+//
+class FunctionEditor extends React.Component {
+  constructor(..._args) {
+    super(..._args);
+    this.change = (...args) => {
+      return Changeable.change.apply(this, args);
+    };
+    this.serialize = () => {
+      return EditorJsonify.serialize.call(this);
     };
   }
   render() {
     const {
       TeX
-    } = Dependencies.getDependencies();
+    } = getDependencies$8();
     const analyticsStub = {
       onAnalyticsEvent: () => Promise.resolve()
     };
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-row"
-    }, "Constraint:", " ", /*#__PURE__*/React.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.createElement("div", {
-      className: "perseus-widget-row"
-    }, "Snap:", " ", /*#__PURE__*/React.createElement(NumberInput$c, {
-      value: this.props.snap,
-      placeholder: 0,
-      onChange: this.change("snap")
-    })), this.props.constraint === "x" && /*#__PURE__*/React.createElement("div", {
-      className: "graph-settings"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement(TeX, null, "x="), " ", /*#__PURE__*/React.createElement(MathInput$1, {
-      buttonsVisible: "never",
-      value: this.props.constraintFn,
-      onChange: this.change("constraintFn"),
-      analytics: analyticsStub
-    }))), this.props.constraint === "y" && /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement(TeX, null, "y="), " ", /*#__PURE__*/React.createElement(MathInput$1, {
+    }, /*#__PURE__*/React.createElement(TeX, null, this.props.funcName + "(x)="), " ", /*#__PURE__*/React.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.createElement("div", {
-      className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("div", {
+    })), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement(TeX, null, "x \\in \\Large["), " ", /*#__PURE__*/React.createElement(MathInput$1, {
+    }, "Range: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.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.createElement(TeX, null, ", "), " ", /*#__PURE__*/React.createElement(MathInput$1, {
+    }), /*#__PURE__*/React.createElement(TeX, null, ","), " ", /*#__PURE__*/React.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.createElement(TeX, null, "\\Large]"))), /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement(ColorPicker, {
+      value: this.props.color,
+      onChange: this.change("color")
+    })), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement(TeX, null, "y \\in \\Large["), " ", /*#__PURE__*/React.createElement(MathInput$1, {
-      buttonsVisible: "never",
-      value: this.props.constraintYMin,
-      onChange: this.change("constraintYMin"),
-      analytics: analyticsStub
-    }), /*#__PURE__*/React.createElement(TeX, null, ", "), " ", /*#__PURE__*/React.createElement(MathInput$1, {
-      buttonsVisible: "never",
-      value: this.props.constraintYMax,
-      onChange: this.change("constraintYMax"),
-      analytics: analyticsStub
-    }), " ", /*#__PURE__*/React.createElement(TeX, null, "\\Large]"))));
+    }, /*#__PURE__*/React.createElement(DashPicker, {
+      value: this.props.strokeDasharray,
+      onChange: this.change("strokeDasharray")
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-row"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-left-col"
+    }, "Width:", " ", /*#__PURE__*/React.createElement(NumberInput$g, {
+      value: this.props.strokeWidth,
+      placeholder: 2,
+      onChange: this.change("strokeWidth")
+    }))));
   }
 }
-ConstraintEditor.defaultProps = {
-  constraint: "none",
-  snap: 0.5,
-  constraintFn: "0",
-  constraintXMin: "-10",
-  constraintXMax: "10",
-  constraintYMin: "-10",
-  constraintYMax: "10"
+FunctionEditor.propTypes = _extends({}, Changeable.propTypes, {
+  value: PropTypes.string,
+  rangeMin: PropTypes.string,
+  rangeMax: PropTypes.string,
+  color: PropTypes.string,
+  strokeDashArray: PropTypes.string,
+  strokeWidth: PropTypes.number
+});
+FunctionEditor.defaultProps = {
+  value: "x",
+  rangeMin: "-10",
+  rangeMax: "10",
+  color: KhanColors.BLUE,
+  strokeDasharray: "",
+  strokeWidth: 2
 };
 
 const {
-  MathInput,
-  NumberInput: NumberInput$b,
+  MathInput: MathInput$7,
   TextInput: TextInput$5
 } = components;
 const {
-  getDependencies
+  getDependencies: getDependencies$7
 } = Dependencies;
-const {
-  unescapeMathMode
-} = 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.Component {
+class LabelEditor extends React.Component {
   constructor(..._args) {
     super(..._args);
     this.change = (...args) => {
@@ -28731,7 +28702,7 @@ class PointEditor extends React.Component {
   render() {
     const {
       TeX
-    } = getDependencies();
+    } = getDependencies$7();
     const analyticsStub = {
       onAnalyticsEvent: () => Promise.resolve()
     };
@@ -28739,48 +28710,60 @@ class PointEditor extends React.Component {
       className: "graph-settings"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, "Coordinate: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.createElement(MathInput, {
+    }, /*#__PURE__*/React.createElement(TextInput$5, {
+      value: this.props.label,
+      onChange: this.change("label"),
+      style: {
+        width: "100%"
+      }
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-row"
+    }, "Location: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.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.createElement(TeX, null, ","), " ", /*#__PURE__*/React.createElement(MathInput, {
+    }), /*#__PURE__*/React.createElement(TeX, null, ","), " ", /*#__PURE__*/React.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.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement(ColorPicker, {
-      value: this.props.color
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
+      value: this.props.color,
       onChange: this.change("color")
     })));
   }
 }
-PointEditor.propTypes = _extends({}, Changeable.propTypes, {
+LabelEditor.propTypes = _extends({}, Changeable.propTypes, {
+  color: PropTypes.string,
   coordX: PropTypes.string,
   coordY: PropTypes.string,
-  color: PropTypes.string
+  label: PropTypes.string
 });
-PointEditor.defaultProps = {
+LabelEditor.defaultProps = {
   coordX: "0",
   coordY: "0",
-  color: KhanColors.BLACK
+  color: KhanColors.BLACK,
+  label: "\\phi"
 };
+
+const {
+  MathInput: MathInput$6,
+  NumberInput: NumberInput$f
+} = components;
+const {
+  getDependencies: getDependencies$6
+} = Dependencies;
 //
 // Editor for non-interactive line segments
 //
 // TODO(eater): Factor this out
 //
 class LineEditor extends React.Component {
-  constructor(..._args2) {
-    super(..._args2);
+  constructor(..._args) {
+    super(..._args);
     this.change = (...args) => {
       return Changeable.change.apply(this, args);
     };
@@ -28791,7 +28774,7 @@ class LineEditor extends React.Component {
   render() {
     const {
       TeX
-    } = getDependencies();
+    } = getDependencies$6();
     const analyticsStub = {
       onAnalyticsEvent: () => Promise.resolve()
     };
@@ -28799,64 +28782,48 @@ class LineEditor extends React.Component {
       className: "graph-settings"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, "Start: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.createElement(MathInput, {
+    }, "Start: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.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.createElement(TeX, null, ","), " ", /*#__PURE__*/React.createElement(MathInput, {
+    }), /*#__PURE__*/React.createElement(TeX, null, ","), " ", /*#__PURE__*/React.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.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, "End: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.createElement(MathInput, {
+    }, "End: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.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.createElement(TeX, null, ","), " ", /*#__PURE__*/React.createElement(MathInput, {
+    }), /*#__PURE__*/React.createElement(TeX, null, ","), " ", /*#__PURE__*/React.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.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement(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.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement(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.createElement(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.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-left-col"
-    }, "Width:", " ", /*#__PURE__*/React.createElement(NumberInput$b, {
+    }, "Width:", " ", /*#__PURE__*/React.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")
     }))));
   }
@@ -28881,62 +28848,101 @@ LineEditor.defaultProps = {
   arrows: "",
   strokeWidth: 2
 };
-//
-// Editor for interactive movable points
-//
-// TODO(eater): Factor this out
-// TODO(eater): Rethink how constraints are represented
-//
-class MovablePointEditor extends React.Component {
-  constructor(..._args3) {
-    super(..._args3);
-    this.change = (...args) => {
-      return Changeable.change.apply(this, args);
-    };
-    this.serialize = () => {
-      return EditorJsonify.serialize.call(this);
+
+const {
+  ButtonGroup: ButtonGroup$2,
+  MathInput: MathInput$5,
+  NumberInput: NumberInput$e
+} = components;
+class ConstraintEditor extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.change = propName => {
+      return Changeable.change.call(this, propName);
     };
   }
   render() {
     const {
       TeX
-    } = getDependencies();
+    } = Dependencies.getDependencies();
     const analyticsStub = {
       onAnalyticsEvent: () => Promise.resolve()
     };
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-row"
+    }, "Constraint:", " ", /*#__PURE__*/React.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.createElement("div", {
+      className: "perseus-widget-row"
+    }, "Snap:", " ", /*#__PURE__*/React.createElement(NumberInput$e, {
+      value: this.props.snap,
+      placeholder: 0,
+      onChange: this.change("snap")
+    })), this.props.constraint === "x" && /*#__PURE__*/React.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, "Start: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.createElement(MathInput, {
+    }, /*#__PURE__*/React.createElement(TeX, null, "x="), " ", /*#__PURE__*/React.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.createElement(TeX, null, ","), " ", /*#__PURE__*/React.createElement(MathInput, {
+    }))), this.props.constraint === "y" && /*#__PURE__*/React.createElement("div", {
+      className: "graph-settings"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-row"
+    }, /*#__PURE__*/React.createElement(TeX, null, "y="), " ", /*#__PURE__*/React.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.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React.createElement("div", {
+    }))), "Ensure these are set so nothing can be dragged off the canvas:", /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, "Update ", /*#__PURE__*/React.createElement(TeX, null, "(x_n, y_n)"), " for ", /*#__PURE__*/React.createElement(TeX, null, "n ="), " ", /*#__PURE__*/React.createElement(NumberInput$b, {
-      value: this.props.varSubscript,
-      placeholder: 0,
-      onChange: this.change("varSubscript")
-    })), /*#__PURE__*/React.createElement(ConstraintEditor, this.props));
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-row"
+    }, /*#__PURE__*/React.createElement(TeX, null, "x \\in \\Large["), " ", /*#__PURE__*/React.createElement(MathInput$5, {
+      buttonsVisible: "never",
+      value: this.props.constraintXMin,
+      onChange: this.change("constraintXMin"),
+      analytics: analyticsStub
+    }), /*#__PURE__*/React.createElement(TeX, null, ", "), " ", /*#__PURE__*/React.createElement(MathInput$5, {
+      buttonsVisible: "never",
+      value: this.props.constraintXMax,
+      onChange: this.change("constraintXMax"),
+      analytics: analyticsStub
+    }), " ", /*#__PURE__*/React.createElement(TeX, null, "\\Large]"))), /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-row"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-row"
+    }, /*#__PURE__*/React.createElement(TeX, null, "y \\in \\Large["), " ", /*#__PURE__*/React.createElement(MathInput$5, {
+      buttonsVisible: "never",
+      value: this.props.constraintYMin,
+      onChange: this.change("constraintYMin"),
+      analytics: analyticsStub
+    }), /*#__PURE__*/React.createElement(TeX, null, ", "), " ", /*#__PURE__*/React.createElement(MathInput$5, {
+      buttonsVisible: "never",
+      value: this.props.constraintYMax,
+      onChange: this.change("constraintYMax"),
+      analytics: analyticsStub
+    }), " ", /*#__PURE__*/React.createElement(TeX, null, "\\Large]"))));
   }
 }
-MovablePointEditor.propTypes = _extends({}, Changeable.propTypes, {
-  startX: PropTypes.string,
-  startY: PropTypes.string,
-  constraint: PropTypes.string,
-  snap: PropTypes.number,
-  constraintFn: PropTypes.string
-});
-MovablePointEditor.defaultProps = {
-  startX: "0",
-  startY: "0",
+ConstraintEditor.defaultProps = {
   constraint: "none",
   snap: 0.5,
   constraintFn: "0",
@@ -28945,6 +28951,14 @@ MovablePointEditor.defaultProps = {
   constraintYMin: "-10",
   constraintYMax: "10"
 };
+
+const {
+  MathInput: MathInput$4,
+  NumberInput: NumberInput$d
+} = components;
+const {
+  getDependencies: getDependencies$5
+} = Dependencies;
 //
 // Editor for interactive movable line segments
 //
@@ -28952,8 +28966,8 @@ MovablePointEditor.defaultProps = {
 // TODO(eater): Rethink how constraints are represented
 //
 class MovableLineEditor extends React.Component {
-  constructor(..._args4) {
-    super(..._args4);
+  constructor(..._args) {
+    super(..._args);
     this.change = (...args) => {
       return Changeable.change.apply(this, args);
     };
@@ -28964,7 +28978,7 @@ class MovableLineEditor extends React.Component {
   render() {
     const {
       TeX
-    } = getDependencies();
+    } = getDependencies$5();
     const analyticsStub = {
       onAnalyticsEvent: () => Promise.resolve()
     };
@@ -28972,37 +28986,37 @@ class MovableLineEditor extends React.Component {
       className: "graph-settings"
     }, "Initial position:", /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, "Start: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.createElement(MathInput, {
+    }, "Start: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.createElement(MathInput$4, {
       buttonsVisible: "never",
       value: this.props.startX,
       onChange: this.change("startX"),
       analytics: analyticsStub
-    }), /*#__PURE__*/React.createElement(TeX, null, ","), " ", /*#__PURE__*/React.createElement(MathInput, {
+    }), /*#__PURE__*/React.createElement(TeX, null, ","), " ", /*#__PURE__*/React.createElement(MathInput$4, {
       buttonsVisible: "never",
       value: this.props.startY,
       onChange: this.change("startY"),
       analytics: analyticsStub
     }), /*#__PURE__*/React.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, "End: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.createElement(MathInput, {
+    }, "End: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.createElement(MathInput$4, {
       buttonsVisible: "never",
       value: this.props.endX,
       onChange: this.change("endX"),
       analytics: analyticsStub
-    }), /*#__PURE__*/React.createElement(TeX, null, ","), " ", /*#__PURE__*/React.createElement(MathInput, {
+    }), /*#__PURE__*/React.createElement(TeX, null, ","), " ", /*#__PURE__*/React.createElement(MathInput$4, {
       buttonsVisible: "never",
       value: this.props.endY,
       onChange: this.change("endY"),
       analytics: analyticsStub
     }), /*#__PURE__*/React.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, "Start updates ", /*#__PURE__*/React.createElement(TeX, null, "(x_n, y_n)"), " for ", /*#__PURE__*/React.createElement(TeX, null, "n ="), /*#__PURE__*/React.createElement(NumberInput$b, {
+    }, "Start updates ", /*#__PURE__*/React.createElement(TeX, null, "(x_n, y_n)"), " for ", /*#__PURE__*/React.createElement(TeX, null, "n ="), /*#__PURE__*/React.createElement(NumberInput$d, {
       value: this.props.startSubscript,
       placeholder: 0,
       onChange: this.change("startSubscript")
     })), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, "End updates ", /*#__PURE__*/React.createElement(TeX, null, "(x_m, y_m)"), " for ", /*#__PURE__*/React.createElement(TeX, null, "m ="), /*#__PURE__*/React.createElement(NumberInput$b, {
+    }, "End updates ", /*#__PURE__*/React.createElement(TeX, null, "(x_m, y_m)"), " for ", /*#__PURE__*/React.createElement(TeX, null, "m ="), /*#__PURE__*/React.createElement(NumberInput$d, {
       value: this.props.endSubscript,
       placeholder: 0,
       onChange: this.change("endSubscript")
@@ -29033,14 +29047,23 @@ MovableLineEditor.defaultProps = {
   constraintYMin: "-10",
   constraintYMax: "10"
 };
+
+const {
+  MathInput: MathInput$3,
+  NumberInput: NumberInput$c
+} = components;
+const {
+  getDependencies: getDependencies$4
+} = 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.Component {
-  constructor(..._args5) {
-    super(..._args5);
+class MovablePointEditor extends React.Component {
+  constructor(..._args) {
+    super(..._args);
     this.change = (...args) => {
       return Changeable.change.apply(this, args);
     };
@@ -29051,7 +29074,7 @@ class FunctionEditor extends React.Component {
   render() {
     const {
       TeX
-    } = getDependencies();
+    } = getDependencies$4();
     const analyticsStub = {
       onAnalyticsEvent: () => Promise.resolve()
     };
@@ -29059,80 +29082,59 @@ class FunctionEditor extends React.Component {
       className: "graph-settings"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement(TeX, null, this.props.funcName + "(x)="), " ", /*#__PURE__*/React.createElement(MathInput, {
-      buttonsVisible: "never",
-      value: this.props.value
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
-      onChange: this.change("value"),
-      analytics: analyticsStub
-    })), /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-row"
-    }, "Range: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.createElement(MathInput, {
+    }, "Start: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.createElement(MathInput$3, {
       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.createElement(TeX, null, ","), " ", /*#__PURE__*/React.createElement(MathInput, {
+    }), /*#__PURE__*/React.createElement(TeX, null, ","), " ", /*#__PURE__*/React.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.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement(ColorPicker, {
-      value: this.props.color
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
-      onChange: this.change("color")
-    })), /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement(DashPicker, {
-      value: this.props.strokeDasharray
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
-      onChange: this.change("strokeDasharray")
-    })), /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-left-col"
-    }, "Width:", " ", /*#__PURE__*/React.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.createElement(TeX, null, "(x_n, y_n)"), " for ", /*#__PURE__*/React.createElement(TeX, null, "n ="), " ", /*#__PURE__*/React.createElement(NumberInput$c, {
+      value: this.props.varSubscript,
+      placeholder: 0,
+      onChange: this.change("varSubscript")
+    })), /*#__PURE__*/React.createElement(ConstraintEditor, this.props));
   }
 }
-FunctionEditor.propTypes = _extends({}, Changeable.propTypes, {
-  value: PropTypes.string,
-  rangeMin: PropTypes.string,
-  rangeMax: PropTypes.string,
-  color: PropTypes.string,
-  strokeDashArray: PropTypes.string,
-  strokeWidth: PropTypes.number
+MovablePointEditor.propTypes = _extends({}, Changeable.propTypes, {
+  startX: PropTypes.string,
+  startY: PropTypes.string,
+  constraint: PropTypes.string,
+  snap: PropTypes.number,
+  constraintFn: PropTypes.string
 });
-FunctionEditor.defaultProps = {
-  value: "x",
-  rangeMin: "-10",
-  rangeMax: "10",
-  color: KhanColors.BLUE,
-  strokeDasharray: "",
-  strokeWidth: 2
+MovablePointEditor.defaultProps = {
+  startX: "0",
+  startY: "0",
+  constraint: "none",
+  snap: 0.5,
+  constraintFn: "0",
+  constraintXMin: "-10",
+  constraintXMax: "10",
+  constraintYMin: "-10",
+  constraintYMax: "10"
 };
+
+const {
+  MathInput: MathInput$2,
+  NumberInput: NumberInput$b
+} = components;
+const {
+  getDependencies: getDependencies$3
+} = Dependencies;
 //
 // Editor for parametric plots
 //
 // TODO(eater): Factor this out
 //
 class ParametricEditor extends React.Component {
-  constructor(..._args6) {
-    super(..._args6);
+  constructor(..._args) {
+    super(..._args);
     this.change = (...args) => {
       return Changeable.change.apply(this, args);
     };
@@ -29143,7 +29145,7 @@ class ParametricEditor extends React.Component {
   render() {
     const {
       TeX
-    } = getDependencies();
+    } = getDependencies$3();
     const analyticsStub = {
       onAnalyticsEvent: () => Promise.resolve()
     };
@@ -29151,51 +29153,39 @@ class ParametricEditor extends React.Component {
       className: "graph-settings"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement(TeX, null, "X(t) ="), " ", /*#__PURE__*/React.createElement(MathInput, {
+    }, /*#__PURE__*/React.createElement(TeX, null, "X(t) ="), " ", /*#__PURE__*/React.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.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement(TeX, null, "Y(t) ="), " ", /*#__PURE__*/React.createElement(MathInput, {
+    }, /*#__PURE__*/React.createElement(TeX, null, "Y(t) ="), " ", /*#__PURE__*/React.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.createElement("div", {
       className: "perseus-widget-row"
-    }, "Range: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.createElement(MathInput, {
+    }, "Range: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.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.createElement(TeX, null, ","), " ", /*#__PURE__*/React.createElement(MathInput, {
+    }), /*#__PURE__*/React.createElement(TeX, null, ","), " ", /*#__PURE__*/React.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.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement(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.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement(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.createElement("div", {
       className: "perseus-widget-row"
@@ -29203,9 +29193,7 @@ class ParametricEditor extends React.Component {
       className: "perseus-widget-left-col"
     }, "Width:", " ", /*#__PURE__*/React.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")
     }))));
   }
@@ -29228,15 +29216,21 @@ ParametricEditor.defaultProps = {
   strokeDasharray: "",
   strokeWidth: 2
 };
+
+const {
+  MathInput: MathInput$1
+} = components;
+const {
+  getDependencies: getDependencies$2
+} = 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.Component {
-  constructor(..._args7) {
-    super(..._args7);
+class PointEditor extends React.Component {
+  constructor(..._args) {
+    super(..._args);
     this.change = (...args) => {
       return Changeable.change.apply(this, args);
     };
@@ -29247,7 +29241,7 @@ class LabelEditor extends React.Component {
   render() {
     const {
       TeX
-    } = getDependencies();
+    } = getDependencies$2();
     const analyticsStub = {
       onAnalyticsEvent: () => Promise.resolve()
     };
@@ -29255,60 +29249,49 @@ class LabelEditor extends React.Component {
       className: "graph-settings"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.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.createElement("div", {
-      className: "perseus-widget-row"
-    }, "Location: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.createElement(MathInput, {
+    }, "Coordinate: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.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.createElement(TeX, null, ","), " ", /*#__PURE__*/React.createElement(MathInput, {
+    }), /*#__PURE__*/React.createElement(TeX, null, ","), " ", /*#__PURE__*/React.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.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement(ColorPicker, {
-      value: this.props.color
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
+      value: this.props.color,
       onChange: this.change("color")
     })));
   }
 }
-LabelEditor.propTypes = _extends({}, Changeable.propTypes, {
-  color: PropTypes.string,
+PointEditor.propTypes = _extends({}, Changeable.propTypes, {
   coordX: PropTypes.string,
   coordY: PropTypes.string,
-  label: PropTypes.string
+  color: PropTypes.string
 });
-LabelEditor.defaultProps = {
+PointEditor.defaultProps = {
   coordX: "0",
   coordY: "0",
-  color: KhanColors.BLACK,
-  label: "\\phi"
+  color: KhanColors.BLACK
 };
+
+const {
+  MathInput
+} = components;
+const {
+  getDependencies: getDependencies$1
+} = Dependencies;
 //
 // Editor for rectangles
 //
 // TODO(eater): Factor this out maybe?
 //
 class RectangleEditor extends React.Component {
-  constructor(..._args8) {
-    super(..._args8);
+  constructor(..._args) {
+    super(..._args);
     this.change = (...args) => {
       return Changeable.change.apply(this, args);
     };
@@ -29319,7 +29302,7 @@ class RectangleEditor extends React.Component {
   render() {
     const {
       TeX
-    } = getDependencies();
+    } = getDependencies$1();
     const analyticsStub = {
       onAnalyticsEvent: () => Promise.resolve()
     };
@@ -29329,43 +29312,33 @@ class RectangleEditor extends React.Component {
       className: "perseus-widget-row"
     }, "Bottom left: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.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.createElement(TeX, null, ","), " ", /*#__PURE__*/React.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.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, "Width:", " ", /*#__PURE__*/React.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.createElement("div", {
       className: "perseus-widget-row"
     }, "Height:", " ", /*#__PURE__*/React.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.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement(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.createElement("div", {
       className: "perseus-widget-row"
@@ -29386,9 +29359,27 @@ RectangleEditor.defaultProps = {
   height: "3",
   color: KhanColors.LIGHT_BLUE
 };
+
+const {
+  getDependencies
+} = Dependencies;
+const {
+  unescapeMathMode
+} = 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.Component {
-  constructor(..._args9) {
-    super(..._args9);
+  constructor(..._args) {
+    super(..._args);
     this.state = {
       usedVarSubscripts: this._getAllVarSubscripts(this.props.elements),
       usedFunctionNames: this._getAllFunctionNames(this.props.elements)