@khanacademy/perseus-editor 5.0.1 → 5.0.2

package/dist/components/interactive-graph-settings.d.ts

@@ -1,34 +1,83 @@
 import * as React from "react";
 import type { PerseusImageBackground } from "@khanacademy/perseus";
-type EditableSetting = "canvas" | "graph" | "snap" | "image" | "measure";
+type Range = [min: number, max: number];
 type Props = {
-    editableSettings: ReadonlyArray<EditableSetting>;
-    box: [number, number];
+    /**
+     * The size of the graph area in pixels.
+     */
+    box: [x: number, y: number];
+    /**
+     * The labels for the x and y axes.
+     */
     labels: ReadonlyArray<string>;
-    range: [[number, number], [number, number]];
-    step: [number, number];
-    gridStep: [number, number];
-    snapStep: [number, number];
+    /**
+     * The range of the graph.
+     */
+    range: [x: Range, y: Range];
+    /**
+     * How far apart the tick marks on the axes are in the x and y
+     * directions.
+     */
+    step: [x: number, y: number];
+    /**
+     * How far apart the grid lines are in the x and y directions.
+     */
+    gridStep: [x: number, y: number];
+    /**
+     * How far apart the snap-to points are in the x and y directions.
+     */
+    snapStep: [x: number, y: number];
+    /**
+     * An error message to display in the graph area, or true if the
+     * graph is valid.
+     */
     valid: boolean | string;
+    /**
+     * The background image to display in the graph area and its properties.
+     */
     backgroundImage: PerseusImageBackground;
+    /**
+     * The type of markings to display on the graph.
+     * - graph: shows the axes and the grid lines
+     * - grid: shows only the grid lines
+     * - none: shows no markings
+     */
     markings: "graph" | "grid" | "none";
+    /**
+     * Whether to show the protractor on the graph.
+     */
     showProtractor: boolean;
+    /**
+     * Whether to show the ruler on the graph.
+     */
     showRuler: boolean;
+    /**
+     * Whether to show tooltips on the graph.
+     */
     showTooltips: boolean;
+    /**
+     * The label to display on the ruler, if any.
+     */
     rulerLabel: string;
+    /**
+     * The number of ticks to display on the ruler.
+     */
     rulerTicks: number;
     onChange: (arg1: Partial<Props>) => void;
 };
 type State = {
     labelsTextbox: ReadonlyArray<string>;
-    gridStepTextbox: [number, number];
-    snapStepTextbox: [number, number];
-    stepTextbox: [number, number];
-    rangeTextbox: [[number, number], [number, number]];
+    gridStepTextbox: [x: number, y: number];
+    snapStepTextbox: [x: number, y: number];
+    stepTextbox: [x: number, y: number];
+    rangeTextbox: [x: Range, y: Range];
     backgroundImage: PerseusImageBackground;
 };
 declare class InteractiveGraphSettings extends React.Component<Props, State> {
     _isMounted: boolean;
+    bgUrlRef: React.RefObject<HTMLInputElement>;
+    labelXRef: React.RefObject<HTMLInputElement>;
+    labelYRef: React.RefObject<HTMLInputElement>;
     static stateFromProps(props: any): {
         labelsTextbox: any;
         gridStepTextbox: any;
@@ -39,7 +88,6 @@ declare class InteractiveGraphSettings extends React.Component<Props, State> {
     };
     constructor(props: Props);
     static defaultProps: {
-        editableSettings: string[];
         box: 288[];
         labels: string[];
         range: number[][];
@@ -66,7 +114,7 @@ declare class InteractiveGraphSettings extends React.Component<Props, State> {
     changeRulerLabel: (e: any) => void;
     changeRulerTicks: (e: any) => void;
     changeBackgroundUrl: (e: any) => void;
-    renderLabelChoices: (choices: any) => JSX.Element[];
+    renderLabelChoices: (choices: any) => any;
     validRange: (range: any) => true | "Range must be a valid number" | "Range must have a higher number on the right";
     validateStepValue: (settings: any) => string | true;
     validSnapStep: (step: any, range: any) => string | true;

package/dist/es/index.js

@@ -25,7 +25,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 = "5.0.1";
+const libVersion = "5.0.2";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -27488,7 +27488,6 @@ const GraphSettings = createReactClass({
     const {
       TeX
     } = Dependencies.getDependencies();
-    this.props.box; // ?
     return /*#__PURE__*/React.createElement("div", null, _.contains(this.props.editableSettings, "canvas") && /*#__PURE__*/React.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React.createElement("div", {
@@ -29525,7 +29524,6 @@ const GraphTypeSelector = props => {
   }, "Angle"));
 };
 
-/* eslint-disable react/forbid-prop-types, react/no-unsafe */
 const {
   ButtonGroup: ButtonGroup$2,
   InfoTip: InfoTip$c,
@@ -29548,12 +29546,16 @@ class InteractiveGraphSettings extends React.Component {
       snapStepTextbox: props.snapStep,
       stepTextbox: props.step,
       rangeTextbox: props.range,
-      backgroundImage: _.clone(props.backgroundImage)
+      // Shallow-copied clone
+      backgroundImage: _extends({}, props.backgroundImage)
     };
   }
   constructor(props) {
     super(props);
     this._isMounted = false;
+    this.bgUrlRef = /*#__PURE__*/React.createRef();
+    this.labelXRef = /*#__PURE__*/React.createRef();
+    this.labelYRef = /*#__PURE__*/React.createRef();
     this.change = (...args) => {
       return Changeable.change.apply(this, args);
     };
@@ -29570,12 +29572,14 @@ class InteractiveGraphSettings extends React.Component {
       });
     };
     this.changeBackgroundUrl = e => {
+      var _this$bgUrlRef$curren;
       // Only continue on blur or "enter"
       if (e.type === "keypress" && e.key !== "Enter") {
         return;
       }
       const setUrl = (url, width, height) => {
-        const image = _.clone(this.props.backgroundImage);
+        // Shallow-copied clone
+        const image = _extends({}, this.props.backgroundImage);
         image.url = url;
         image.width = width;
         image.height = height;
@@ -29583,9 +29587,7 @@ class InteractiveGraphSettings extends React.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.findDOMNode(this.refs["bg-url"]).value; // eslint-disable-line react/no-string-refs
+      const url = (_this$bgUrlRef$curren = this.bgUrlRef.current) == null ? void 0 : _this$bgUrlRef$curren.value;
       if (url) {
         Util.getImageSize(url, (width, height) => {
           if (this._isMounted) {
@@ -29597,11 +29599,10 @@ class InteractiveGraphSettings extends React.Component {
       }
     };
     this.renderLabelChoices = choices => {
-      return _.map(choices, function (nameAndValue) {
-        return /*#__PURE__*/React.createElement("option", {
-          value: nameAndValue[1]
-        }, nameAndValue[0]);
-      });
+      return choices.map(nameAndValue => /*#__PURE__*/React.createElement("option", {
+        key: nameAndValue[1],
+        value: nameAndValue[1]
+      }, nameAndValue[0]));
     };
     this.validRange = range => {
       const numbers = _.every(range, function (num) {
@@ -29623,9 +29624,6 @@ class InteractiveGraphSettings extends React.Component {
         minTicks,
         maxTicks
       } = settings;
-      if (!_.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.";
@@ -29811,27 +29809,7 @@ class InteractiveGraphSettings extends React.Component {
     this._isMounted = false;
   }
   render() {
-    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
-    } = Dependencies.getDependencies();
-    return /*#__PURE__*/React.createElement("div", null, _.contains(this.props.editableSettings, "canvas") && /*#__PURE__*/React.createElement("div", {
-      className: "graph-settings"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("label", {
-      htmlFor: "canvas-size"
-    }, "Canvas size (x,y pixels)"), /*#__PURE__*/React.createElement(RangeInput$4, {
-      id: "canvas-size",
-      value: this.props.box,
-      onChange: box => {
-        this.change({
-          box: box
-        });
-      }
-    })), /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-row"
-    }, "Scale (px per div):", " ", /*#__PURE__*/React.createElement(TeX, null, "(" + scale[0] + ", " + scale[1] + ")"))), _.contains(this.props.editableSettings, "graph") && /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
@@ -29842,10 +29820,8 @@ class InteractiveGraphSettings extends React.Component {
     }, "x Label"), /*#__PURE__*/React.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.createElement("div", {
@@ -29855,10 +29831,8 @@ class InteractiveGraphSettings extends React.Component {
     }, "y Label"), /*#__PURE__*/React.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.createElement("div", {
@@ -29897,7 +29871,7 @@ class InteractiveGraphSettings extends React.Component {
       id: "grid-step",
       value: this.state.gridStepTextbox,
       onChange: this.changeGridStep
-    }))), _.contains(this.props.editableSettings, "snap") && /*#__PURE__*/React.createElement("div", {
+    }))), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-left-col"
@@ -29929,17 +29903,15 @@ class InteractiveGraphSettings extends React.Component {
       label: "Show tooltips",
       showTooltips: this.props.showTooltips,
       onChange: this.change
-    }))), _.contains(this.props.editableSettings, "image") && /*#__PURE__*/React.createElement("div", {
+    }))), /*#__PURE__*/React.createElement("div", {
       className: "image-settings"
     }, /*#__PURE__*/React.createElement("div", null, "Background image:"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
       htmlFor: "bg-url"
     }, "Url:"), /*#__PURE__*/React.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 = _.clone(this.props.backgroundImage);
@@ -29950,7 +29922,7 @@ class InteractiveGraphSettings extends React.Component {
       },
       onKeyPress: this.changeBackgroundUrl,
       onBlur: this.changeBackgroundUrl
-    }), /*#__PURE__*/React.createElement(InfoTip$c, null, /*#__PURE__*/React.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background.")))), _.contains(this.props.editableSettings, "measure") && /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement(InfoTip$c, null, /*#__PURE__*/React.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background.")))), /*#__PURE__*/React.createElement("div", {
       className: "misc-settings"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
@@ -29980,13 +29952,13 @@ class InteractiveGraphSettings extends React.Component {
       value: this.props.rulerTicks
     }, _.map([1, 2, 4, 8, 10, 16], function (n) {
       return /*#__PURE__*/React.createElement("option", {
+        key: `ruler-tick-${n}`,
         value: n
       }, n);
     })))))));
   }
 }
 InteractiveGraphSettings.defaultProps = {
-  editableSettings: ["graph", "snap", "image", "measure"],
   box: [interactiveSizes.defaultBoxSizeSmall, interactiveSizes.defaultBoxSizeSmall],
   labels: ["x", "y"],
   range: [[-10, 10], [-10, 10]],
@@ -30097,6 +30069,7 @@ class InteractiveGraphEditor extends React.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 () {},