@khanacademy/perseus-editor 18.1.0 → 18.2.0

package/dist/es/index.js

@@ -95,7 +95,7 @@ const addLibraryVersionToPerseusDebug = (libraryName, libraryVersion) => {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "18.1.0";
+const libVersion = "18.2.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const devices = {
@@ -11007,6 +11007,7 @@ class InteractiveGraphSettings extends React.Component {
   static stateFromProps(props) {
     return {
       labelsTextbox: props.labels,
+      labelLocation: props.labelLocation,
       gridStepTextbox: props.gridStep,
       snapStepTextbox: props.snapStep,
       stepTextbox: props.step,
@@ -11212,6 +11213,7 @@ class InteractiveGraphSettings extends React.Component {
     };
     this.changeGraph = () => {
       const labels = this.state.labelsTextbox;
+      const labelLocation = this.state.labelLocation;
       const range = _.map(this.state.rangeTextbox, function (range) {
         return _.map(range, Number);
       });
@@ -11231,6 +11233,7 @@ class InteractiveGraphSettings extends React.Component {
         this.change({
           valid: true,
           labels: labels,
+          labelLocation: labelLocation,
           range: range,
           step: step,
           gridStep: gridStep,
@@ -11254,7 +11257,7 @@ class InteractiveGraphSettings extends React.Component {
     this.changeGraph = _.debounce(this.changeGraph, 300);
   }
   UNSAFE_componentWillReceiveProps(nextProps) {
-    if (!_.isEqual(this.props.labels, nextProps.labels) || !_.isEqual(this.props.gridStep, nextProps.gridStep) || !_.isEqual(this.props.snapStep, nextProps.snapStep) || !_.isEqual(this.props.step, nextProps.step) || !_.isEqual(this.props.range, nextProps.range) || !_.isEqual(this.props.backgroundImage, nextProps.backgroundImage)) {
+    if (!_.isEqual(this.props.labels, nextProps.labels) || !_.isEqual(this.props.labelLocation, nextProps.labelLocation) || !_.isEqual(this.props.gridStep, nextProps.gridStep) || !_.isEqual(this.props.snapStep, nextProps.snapStep) || !_.isEqual(this.props.step, nextProps.step) || !_.isEqual(this.props.range, nextProps.range) || !_.isEqual(this.props.backgroundImage, nextProps.backgroundImage)) {
       this.setState(InteractiveGraphSettings.stateFromProps(nextProps));
     }
   }
@@ -11273,6 +11276,21 @@ class InteractiveGraphSettings extends React.Component {
       className: "graph-settings"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
+    }, /*#__PURE__*/React.createElement(LabeledRow, {
+      label: "Label Location"
+    }, /*#__PURE__*/React.createElement(ButtonGroup$1, {
+      value: this.props.labelLocation,
+      allowEmpty: false,
+      buttons: [{
+        value: "onAxis",
+        content: "On Axis"
+      }, {
+        value: "alongEdge",
+        content: "Along Graph Edge"
+      }],
+      onChange: this.change("labelLocation")
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-left-col"
     }, /*#__PURE__*/React.createElement(LabeledRow, {
@@ -11411,6 +11429,7 @@ class InteractiveGraphSettings extends React.Component {
 InteractiveGraphSettings.defaultProps = {
   box: [interactiveSizes.defaultBoxSizeSmall, interactiveSizes.defaultBoxSizeSmall],
   labels: ["$x$", "$y$"],
+  labelLocation: "onAxis",
   range: [[-10, 10], [-10, 10]],
   step: [1, 1],
   gridStep: [1, 1],
@@ -14938,7 +14957,7 @@ class InteractiveGraphEditor extends React.Component {
   // is copied from the question editor and pasted into the hint editor
   // (double brackets in the markdown).
   serialize() {
-    const json = _.pick(this.props, "step", "backgroundImage", "markings", "labels", "showProtractor", "showTooltips", "range", "gridStep", "snapStep", "lockedFigures", "fullGraphAriaLabel", "fullGraphAriaDescription");
+    const json = _.pick(this.props, "step", "backgroundImage", "markings", "labels", "labelLocation", "showProtractor", "showTooltips", "range", "gridStep", "snapStep", "lockedFigures", "fullGraphAriaLabel", "fullGraphAriaDescription");
 
     // eslint-disable-next-line react/no-string-refs
     const graph = this.refs.graph;
@@ -14977,6 +14996,7 @@ class InteractiveGraphEditor extends React.Component {
         box: this.props.box,
         range: this.props.range,
         labels: this.props.labels,
+        labelLocation: this.props.labelLocation,
         step: this.props.step,
         gridStep: gridStep,
         snapStep: snapStep,
@@ -15240,6 +15260,7 @@ class InteractiveGraphEditor extends React.Component {
         box: getInteractiveBoxFromSizeClass(sizeClass),
         range: this.props.range,
         labels: this.props.labels,
+        labelLocation: this.props.labelLocation,
         step: this.props.step,
         gridStep: gridStep,
         snapStep: snapStep,
@@ -18789,7 +18810,10 @@ class RadioEditor extends React.Component {
       this.props.onChange({
         choices: choices,
         numCorrect: deriveNumCorrect(_extends({}, this.props, {
-          choices
+          choices,
+          // When deriving numCorrect, we don't want to pass the current value,
+          // as it has changed.
+          numCorrect: undefined
         }))
       });
     };
@@ -18877,7 +18901,11 @@ class RadioEditor extends React.Component {
       displayCount,
       hasNoneOfTheAbove,
       deselectEnabled,
-      numCorrect: deriveNumCorrect(this.props)
+      numCorrect: deriveNumCorrect(_extends({}, this.props, {
+        // When deriving numCorrect, we don't want to pass the current value,
+        // as it has changed.
+        numCorrect: undefined
+      }))
     };
   }
   render() {