@khanacademy/perseus-editor 5.0.1 → 5.0.2

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 = "5.0.1";
+const libVersion = "5.0.2";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -27510,7 +27510,6 @@ const GraphSettings = createReactClass__default["default"]({
     const {
       TeX
     } = perseus.Dependencies.getDependencies();
-    this.props.box; // ?
     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", {
@@ -29607,6 +29606,9 @@ function numSteps(range, step) {
 }
 class InteractiveGraphSettings extends React__namespace.Component {
   _isMounted = false;
+  bgUrlRef = /*#__PURE__*/React__namespace.createRef();
+  labelXRef = /*#__PURE__*/React__namespace.createRef();
+  labelYRef = /*#__PURE__*/React__namespace.createRef();
   static stateFromProps(props) {
     return {
       labelsTextbox: props.labels,
@@ -29614,7 +29616,10 @@ class InteractiveGraphSettings extends React__namespace.Component {
       snapStepTextbox: props.snapStep,
       stepTextbox: props.step,
       rangeTextbox: props.range,
-      backgroundImage: ___default["default"].clone(props.backgroundImage)
+      // Shallow-copied clone
+      backgroundImage: {
+        ...props.backgroundImage
+      }
     };
   }
   constructor(props) {
@@ -29622,7 +29627,6 @@ class InteractiveGraphSettings extends React__namespace.Component {
     this.state = InteractiveGraphSettings.stateFromProps(props);
   }
   static defaultProps = {
-    editableSettings: ["graph", "snap", "image", "measure"],
     box: [perseus.interactiveSizes.defaultBoxSizeSmall, perseus.interactiveSizes.defaultBoxSizeSmall],
     labels: ["x", "y"],
     range: [[-10, 10], [-10, 10]],
@@ -29682,7 +29686,10 @@ class InteractiveGraphSettings extends React__namespace.Component {
       return;
     }
     const setUrl = (url, width, height) => {
-      const image = ___default["default"].clone(this.props.backgroundImage);
+      // Shallow-copied clone
+      const image = {
+        ...this.props.backgroundImage
+      };
       image.url = url;
       image.width = width;
       image.height = height;
@@ -29690,9 +29697,7 @@ class InteractiveGraphSettings extends React__namespace.Component {
         backgroundImage: image
       }, this.changeGraph);
     };
-
-    // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'value' does not exist on type 'Element | Text'.
-    const url = ReactDOM__default["default"].findDOMNode(this.refs["bg-url"]).value; // eslint-disable-line react/no-string-refs
+    const url = this.bgUrlRef.current?.value;
     if (url) {
       perseus.Util.getImageSize(url, (width, height) => {
         if (this._isMounted) {
@@ -29704,11 +29709,10 @@ class InteractiveGraphSettings extends React__namespace.Component {
     }
   };
   renderLabelChoices = choices => {
-    return ___default["default"].map(choices, function (nameAndValue) {
-      return /*#__PURE__*/React__namespace.createElement("option", {
-        value: nameAndValue[1]
-      }, nameAndValue[0]);
-    });
+    return choices.map(nameAndValue => /*#__PURE__*/React__namespace.createElement("option", {
+      key: nameAndValue[1],
+      value: nameAndValue[1]
+    }, nameAndValue[0]));
   };
   validRange = range => {
     const numbers = ___default["default"].every(range, function (num) {
@@ -29730,9 +29734,6 @@ class InteractiveGraphSettings extends React__namespace.Component {
       minTicks,
       maxTicks
     } = settings;
-    if (!___default["default"].isFinite(step)) {
-      return name + " must be a valid number";
-    }
     const nSteps = numSteps(range, step);
     if (nSteps < minTicks) {
       return name + " is too large, there must be at least " + minTicks + " ticks.";
@@ -29901,27 +29902,7 @@ class InteractiveGraphSettings extends React__namespace.Component {
   };
 
   render() {
-    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
-    } = perseus.Dependencies.getDependencies();
-    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", {
-      className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("label", {
-      htmlFor: "canvas-size"
-    }, "Canvas size (x,y pixels)"), /*#__PURE__*/React__namespace.createElement(RangeInput$4, {
-      id: "canvas-size",
-      value: this.props.box,
-      onChange: box => {
-        this.change({
-          box: box
-        });
-      }
-    })), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-row"
-    }, "Scale (px per div):", " ", /*#__PURE__*/React__namespace.createElement(TeX, null, "(" + scale[0] + ", " + scale[1] + ")"))), ___default["default"].contains(this.props.editableSettings, "graph") && /*#__PURE__*/React__namespace.createElement("div", {
+    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
@@ -29932,10 +29913,8 @@ class InteractiveGraphSettings extends React__namespace.Component {
     }, "x Label"), /*#__PURE__*/React__namespace.createElement("input", {
       id: "labels-x",
       type: "text",
-      className: "graph-settings-axis-label"
-      // eslint-disable-next-line react/no-string-refs
-      ,
-      ref: "labels-0",
+      className: "graph-settings-axis-label",
+      ref: this.labelXRef,
       onChange: e => this.changeLabel(0, e),
       value: this.state.labelsTextbox[0] || ""
     })), /*#__PURE__*/React__namespace.createElement("div", {
@@ -29945,10 +29924,8 @@ class InteractiveGraphSettings extends React__namespace.Component {
     }, "y Label"), /*#__PURE__*/React__namespace.createElement("input", {
       id: "labels-y",
       type: "text",
-      className: "graph-settings-axis-label"
-      // eslint-disable-next-line react/no-string-refs
-      ,
-      ref: "labels-1",
+      className: "graph-settings-axis-label",
+      ref: this.labelYRef,
       onChange: e => this.changeLabel(1, e),
       value: this.state.labelsTextbox[1] || ""
     }))), /*#__PURE__*/React__namespace.createElement("div", {
@@ -29987,7 +29964,7 @@ class InteractiveGraphSettings extends React__namespace.Component {
       id: "grid-step",
       value: this.state.gridStepTextbox,
       onChange: this.changeGridStep
-    }))), ___default["default"].contains(this.props.editableSettings, "snap") && /*#__PURE__*/React__namespace.createElement("div", {
+    }))), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-left-col"
@@ -30019,17 +29996,15 @@ class InteractiveGraphSettings extends React__namespace.Component {
       label: "Show tooltips",
       showTooltips: this.props.showTooltips,
       onChange: this.change
-    }))), ___default["default"].contains(this.props.editableSettings, "image") && /*#__PURE__*/React__namespace.createElement("div", {
+    }))), /*#__PURE__*/React__namespace.createElement("div", {
       className: "image-settings"
     }, /*#__PURE__*/React__namespace.createElement("div", null, "Background image:"), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", {
       htmlFor: "bg-url"
     }, "Url:"), /*#__PURE__*/React__namespace.createElement("input", {
       id: "bg-url",
       type: "text",
-      className: "graph-settings-background-url"
-      // eslint-disable-next-line react/no-string-refs
-      ,
-      ref: "bg-url",
+      className: "graph-settings-background-url",
+      ref: this.bgUrlRef,
       value: this.state.backgroundImage.url || "",
       onChange: e => {
         const image = ___default["default"].clone(this.props.backgroundImage);
@@ -30040,7 +30015,7 @@ class InteractiveGraphSettings extends React__namespace.Component {
       },
       onKeyPress: this.changeBackgroundUrl,
       onBlur: this.changeBackgroundUrl
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$c, null, /*#__PURE__*/React__namespace.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background.")))), ___default["default"].contains(this.props.editableSettings, "measure") && /*#__PURE__*/React__namespace.createElement("div", {
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$c, null, /*#__PURE__*/React__namespace.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background.")))), /*#__PURE__*/React__namespace.createElement("div", {
       className: "misc-settings"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
@@ -30070,6 +30045,7 @@ class InteractiveGraphSettings extends React__namespace.Component {
       value: this.props.rulerTicks
     }, ___default["default"].map([1, 2, 4, 8, 10, 16], function (n) {
       return /*#__PURE__*/React__namespace.createElement("option", {
+        key: `ruler-tick-${n}`,
         value: n
       }, n);
     })))))));
@@ -30183,6 +30159,7 @@ class InteractiveGraphEditor extends React__namespace.Component {
         markings: this.props.markings,
         showProtractor: this.props.showProtractor,
         showRuler: this.props.showRuler,
+        showTooltips: this.props.showTooltips,
         rulerLabel: this.props.rulerLabel,
         rulerTicks: this.props.rulerTicks,
         trackInteraction: function () {},