@khanacademy/perseus 7.1.1 → 7.2.1

package/dist/index.js

@@ -3009,8 +3009,6 @@ const defaultContext$2 = {
 };
 const context$1 = /*#__PURE__*/React__namespace.createContext(defaultContext$2);
 
-/* eslint-disable @babel/no-invalid-this, getter-return, one-var */
-let supportsPassive = false;
 const svgLabelsRegex = /^web\+graphie:/;
 // For offline exercises in the mobile app, we download the graphie data
 // (svgs and localized data files) and serve them from the local file
@@ -3018,6 +3016,50 @@ const svgLabelsRegex = /^web\+graphie:/;
 // in the perseus json with this `file+graphie` prefix to indicate that
 // they should have the `file://` protocol instead of `https://`.
 const svgLocalLabelsRegex$1 = /^file\+graphie:/;
+
+// Sometimes other components want to download the actual image e.g. to
+// determine its size. Here, we transform an .svg-labels url into the
+// correct image url, and leave normal image urls alone
+function getRealImageUrl(graphieUrl) {
+  if (isLabeledSVG(graphieUrl)) {
+    return getSvgUrl(graphieUrl);
+  }
+  return graphieUrl;
+}
+function isLabeledSVG(graphieUrl) {
+  return svgLabelsRegex.test(graphieUrl) || svgLocalLabelsRegex$1.test(graphieUrl);
+}
+
+// For each graphie, there are two urls we need to download from. This gets
+// the base url without the suffix, and `getSvgUrl` and `getDataUrl` apply
+// appropriate suffixes to get the image and other data
+function getBaseUrl(graphieUrl) {
+  return graphieUrl.replace(svgLabelsRegex, "https:").replace(svgLocalLabelsRegex$1, "file:");
+}
+function getSvgUrl(graphieUrl) {
+  return getBaseUrl(graphieUrl) + ".svg";
+}
+function getDataUrl(graphieUrl) {
+  return getBaseUrl(graphieUrl) + "-data.json";
+}
+async function getImageSizeModern(url) {
+  const image = new Image();
+  return new Promise((resolve, reject) => {
+    // Handle the success case
+    image.onload = () => {
+      resolve([image.naturalWidth, image.naturalHeight]);
+    };
+
+    // Handle the error case
+    image.onerror = reject;
+
+    // Kick off the loading
+    image.src = getRealImageUrl(url);
+  });
+}
+
+/* eslint-disable @babel/no-invalid-this, getter-return, one-var */
+let supportsPassive = false;
 const nestedMap$2 = function (children, func, context) {
   if (Array.isArray(children)) {
     // @ts-expect-error [FEI-5003] - TS2322 - Type '(M | readonly M[])[]' is not assignable to type 'M | readonly M[]'.
@@ -3683,21 +3725,6 @@ const supportsPassiveEvents = () => {
 function captureScratchpadTouchStart$4(e) {
   e.stopPropagation();
 }
-async function getImageSizeModern(url) {
-  const image = new Image();
-  return new Promise((resolve, reject) => {
-    // Handle the success case
-    image.onload = () => {
-      resolve([image.naturalWidth, image.naturalHeight]);
-    };
-
-    // Handle the error case
-    image.onerror = reject;
-
-    // Kick off the loading
-    image.src = url;
-  });
-}
 function getImageSize(url, callback) {
   const img = new Image();
   img.onload = function () {
@@ -3727,32 +3754,6 @@ function getImageSize(url, callback) {
   img.src = getRealImageUrl(url);
 }
 
-// Sometimes other components want to download the actual image e.g. to
-// determine its size. Here, we transform an .svg-labels url into the
-// correct image url, and leave normal image urls alone
-function getRealImageUrl(url) {
-  if (isLabeledSVG(url)) {
-    return getSvgUrl(url);
-  }
-  return url;
-}
-function isLabeledSVG(url) {
-  return svgLabelsRegex.test(url) || svgLocalLabelsRegex$1.test(url);
-}
-
-// For each svg+labels, there are two urls we need to download from. This gets
-// the base url without the suffix, and `getSvgUrl` and `getDataUrl` apply
-// appropriate suffixes to get the image and other data
-function getBaseUrl(url) {
-  return url.replace(svgLabelsRegex, "https:").replace(svgLocalLabelsRegex$1, "file:");
-}
-function getSvgUrl(url) {
-  return getBaseUrl(url) + ".svg";
-}
-function getDataUrl(url) {
-  return getBaseUrl(url) + "-data.json";
-}
-
 /**
  * Gets the word right before where the textarea cursor is
  *
@@ -3832,12 +3833,12 @@ const Util = {
   supportsPassiveEvents,
   captureScratchpadTouchStart: captureScratchpadTouchStart$4,
   getImageSize,
-  getImageSizeModern,
-  getRealImageUrl,
-  isLabeledSVG,
-  getBaseUrl,
-  getSvgUrl,
-  getDataUrl,
+  getImageSizeModern: getImageSizeModern,
+  getRealImageUrl: getRealImageUrl,
+  isLabeledSVG: isLabeledSVG,
+  getBaseUrl: getBaseUrl,
+  getSvgUrl: getSvgUrl,
+  getDataUrl: getDataUrl,
   textarea,
   unescapeMathMode: unescapeMathMode$1,
   random: random$1
@@ -38309,26 +38310,11 @@ var PassageRefTarget$1 = {
 const {
   deepEq: deepEq$1
 } = Util;
-const BAR = "bar",
-  LINE = "line",
-  PIC = "pic",
-  HISTOGRAM = "histogram",
-  DOTPLOT = "dotplot";
-({
-  type: PropTypes__default["default"].oneOf([BAR, LINE, PIC, HISTOGRAM, DOTPLOT]),
-  labels: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
-  categories: PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string])),
-  scaleY: PropTypes__default["default"].number,
-  maxY: PropTypes__default["default"].number,
-  snapsPerLine: PropTypes__default["default"].number,
-  picSize: PropTypes__default["default"].number,
-  pixBoxHeight: PropTypes__default["default"].number,
-  picUrl: PropTypes__default["default"].string,
-  plotDimensions: PropTypes__default["default"].arrayOf(PropTypes__default["default"].number),
-  labelInterval: PropTypes__default["default"].number,
-  starting: PropTypes__default["default"].arrayOf(PropTypes__default["default"].number),
-  static: PropTypes__default["default"].bool
-});
+const BAR = "bar";
+const LINE = "line";
+const PIC = "pic";
+const HISTOGRAM = "histogram";
+const DOTPLOT = "dotplot";
 class Plotter extends React__namespace.Component {
   constructor() {
     super(...arguments);
@@ -38367,11 +38353,11 @@ class Plotter extends React__namespace.Component {
       self.graphie = graphie;
       self.graphie.pics = [];
       self.graphie.dotTicks = [];
-      const isBar = self.props.type === BAR,
-        isLine = self.props.type === LINE,
-        isPic = self.props.type === PIC,
-        isHistogram = self.props.type === HISTOGRAM,
-        isDotplot = self.props.type === DOTPLOT;
+      const isBar = self.props.type === BAR;
+      const isLine = self.props.type === LINE;
+      const isPic = self.props.type === PIC;
+      const isHistogram = self.props.type === HISTOGRAM;
+      const isDotplot = self.props.type === DOTPLOT;
       const isTiledPlot = isPic || isDotplot;
       const config = {};
       const c = config; // c for short
@@ -38432,9 +38418,7 @@ class Plotter extends React__namespace.Component {
 
       // TODO(michaelpolyak): Handle other plot types: Dot, Histogram, Line.
       if (isMobile && (isBar || isTiledPlot)) {
-        const maxCategoryHeight = Math.max(0,
-        // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'unknown' is not assignable to parameter of type 'number'.
-        ...Object.values(self.state.categoryHeights));
+        const maxCategoryHeight = Math.max(0, ...Object.values(self.state.categoryHeights));
         if (maxCategoryHeight) {
           // Account for bottom label position, height.
           let offsetY = 25;
@@ -38487,7 +38471,7 @@ class Plotter extends React__namespace.Component {
           });
         }
       }
-      if ((isBar || isLine) && isMobile) {
+      if ((isBar || isLine) && isMobile && !this.props.static) {
         self.graphie.dragPrompt = graphie.label([c.dimX / 2, c.dimY / 2], i18n__namespace._("Drag handles to make graph"), "center", false).css("font-weight", "bold").css("color", KhanColors.KA_GREEN).css("display", "none");
       }
       self.setupCategories(config);
@@ -38739,8 +38723,8 @@ class Plotter extends React__namespace.Component {
         config.graph.bars[i].scale(1, Math.max(isMobile ? 0.2 : 0.01, height / config.scaleY), center[0], center[1]);
         if (isHistogram) {
           // Scale dividers between buckets
-          const leftDivider = config.graph.dividers[i - 1],
-            rightDivider = config.graph.dividers[i];
+          const leftDivider = config.graph.dividers[i - 1];
+          const rightDivider = config.graph.dividers[i];
           if (leftDivider) {
             const divHeight = Math.min(self.state.values[i - 1], height);
             leftDivider.scale(1, Math.max(0.01, divHeight / config.scaleY), center[0], center[1]);
@@ -39065,38 +39049,13 @@ class Plotter extends React__namespace.Component {
       return Plotter.validate(this.getUserInput(), rubric);
     });
   }
-  render() {
-    // TODO(kevinb) actually compute the size of the graphie correctly and
-    // make it that size so we don't have to add extra padding.  The value
-    // was determined by eye-balling the layout.  :(
-    const paddingForBottomLabel = 75;
-    const style = {
-      marginBottom: this.props.labels[0] ? paddingForBottomLabel : 0
-    };
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-plotter graphie " + ClassNames.INTERACTIVE
-      // eslint-disable-next-line react/no-string-refs
-      ,
-      ref: "graphieDiv",
-      style: style
-    });
-  }
-  componentDidUpdate(prevProps, prevState) {
-    this.shouldSetupGraphie = this.shouldSetupGraphie || !___default["default"].isEqual(this.state.categoryHeights, prevState.categoryHeights);
-    if (this.shouldSetupGraphie) {
-      this.setupGraphie(prevState);
-    }
-  }
   componentDidMount() {
     this._isMounted = true;
     this.setupGraphie(this.state);
   }
   UNSAFE_componentWillReceiveProps(nextProps) {
     const props = ["type", "labels", "categories", "scaleY", "maxY", "snapsPerLine", "picUrl", "labelInterval", "static"];
-    this.shouldSetupGraphie = ___default["default"].any(props, function (prop) {
-      // @ts-expect-error [FEI-5003] - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-      return !___default["default"].isEqual(this.props[prop], nextProps[prop]);
-    }, this);
+    this.shouldSetupGraphie = ___default["default"].any(props, prop => !___default["default"].isEqual(this.props[prop], nextProps[prop]), this);
     if (!___default["default"].isEqual(this.props.starting, nextProps.starting) && !___default["default"].isEqual(this.state.values, nextProps.starting)) {
       this.shouldSetupGraphie = true;
       this.setState({
@@ -39104,16 +39063,32 @@ class Plotter extends React__namespace.Component {
       });
     }
   }
+  componentDidUpdate(prevProps, prevState) {
+    this.shouldSetupGraphie = this.shouldSetupGraphie || !___default["default"].isEqual(this.state.categoryHeights, prevState.categoryHeights);
+    if (this.shouldSetupGraphie) {
+      this.setupGraphie(prevState);
+    }
+  }
   componentWillUnmount() {
     this._isMounted = false;
   }
+  render() {
+    // TODO(kevinb) actually compute the size of the graphie correctly and
+    // make it that size so we don't have to add extra padding.  The value
+    // was determined by eye-balling the layout.  :(
+    const paddingForBottomLabel = 75;
+    const style = {
+      marginBottom: this.props.labels[0] ? paddingForBottomLabel : 0
+    };
+    return /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-plotter graphie " + ClassNames.INTERACTIVE
+      // eslint-disable-next-line react/no-string-refs
+      ,
+      ref: "graphieDiv",
+      style: style
+    });
+  }
 }
-_defineProperty(Plotter, "propTypes", {
-  onChange: PropTypes__default["default"].func.isRequired,
-  trackInteraction: PropTypes__default["default"].func.isRequired
-  // TODO(alex): Figure out why lint chokes on this line
-  // ...widgetPropTypes,
-});
 _defineProperty(Plotter, "defaultProps", {
   type: BAR,
   labels: ["", ""],
@@ -44146,17 +44121,7 @@ registerWidgets(allWidgets);
 const ItemVersion = getVersionVector();
 ItemVersion["::renderer::"] = version.itemDataVersion;
 
-/**
- * A mixin that renders a custom software keypad in additional to the base
- * component. The base component will receive blur events when the keypad is
- * dismissed and can access the keypad element itself so as to manage its
- * activation and dismissal.
- *
- * TODO(charlie): This would make a nicer higher-order component, except that
- * we need to expose methods on the base component (i.e., `ItemRenderer`). When
- * `ItemRenderer` and friends are written as ES6 Classes, we can have them
- * extend a `ProvideKeypad` component instead of using this mixin.
- */
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 // NOTE: This is not a real component.  It's a collection of methods used to
 // create and manage a Keypad instances.
 // TODO(LP-10789): replace this with a React Context object to pass information
@@ -47077,9 +47042,7 @@ const EditorJsonify = {
   }
 };
 
-/**
- * Main entry point
- */
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 const apiVersion = version.apiVersion;
 const itemDataVersion = version.itemDataVersion;