@khanacademy/perseus 56.2.0 → 57.0.0

package/dist/es/index.js

@@ -16542,7 +16542,7 @@ Zoomable.defaultProps = {
  * measurements.
  */
 const computeMathBounds = (parentNode, parentBounds) => {
-  const textElement = parentNode.querySelector(".katex-html") || parentNode.querySelector(".MathJax");
+  const textElement = parentNode.querySelector(".MathJax");
   const textBounds = {
     // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'offsetWidth' does not exist on type 'Element'.
     width: textElement.offsetWidth,
@@ -18625,14 +18625,7 @@ class Renderer extends React.Component {
         }, content)))));
       }
       if (node.type === "math") {
-        // Replace uses of \begin{align}...\end{align} which KaTeX doesn't
-        // support (yet) with \begin{aligned}...\end{aligned} which renders
-        // the same is supported by KaTeX.  It does the same for align*.
-        // TODO(kevinb) update content to use aligned instead of align.
-        // TODO(LEMS-1608) Remove this replacement as MathJax supports the
-        // "align" macro correctly (and, in fact, it is not synonymous with
-        // "aligned").
-        const tex = node.content.replace(/\{align[*]?\}/g, "{aligned}");
+        const tex = node.content;
 
         // We render math here instead of in perseus-markdown.jsx
         // because we need to pass it our onRender callback.
@@ -24014,7 +24007,8 @@ const _choiceTransform = (widgetOptions, strings, problemNum) => {
   // Add meta-information to choices
   const choices = widgetOptions.choices.map((choice, i) => {
     return _extends({}, choice, {
-      originalIndex: i
+      originalIndex: i,
+      correct: Boolean(choice.correct)
     });
   });
 
@@ -25004,7 +24998,7 @@ class GradedGroupAnswerBar extends React.Component {
   }
 }
 GradedGroupAnswerBar.contextType = PerseusI18nContext;
-const fontSize = 17;
+const fontSize$1 = 17;
 const styles$j = {
   answerBar: {
     display: "flex",
@@ -25029,7 +25023,7 @@ const styles$j = {
     flexDirection: "row",
     alignItems: "center",
     fontWeight: "bold",
-    fontSize: fontSize
+    fontSize: fontSize$1
   }
 };
 
@@ -27685,6 +27679,7 @@ const defaultGraphConfig = {
   width: 0,
   height: 0,
   labels: [],
+  labelLocation: "onAxis",
   disableKeyboardInteraction: false,
   interactiveColor: "var(--mafs-blue)"
 };
@@ -27900,6 +27895,8 @@ function escapeIfUnescaped(character) {
   }
 }
 
+// Exported for testing purposes
+const fontSize = 14;
 function AxisLabels({
   i18n
 }) {
@@ -27907,24 +27904,26 @@ function AxisLabels({
     range,
     labels,
     width,
-    height
+    height,
+    labelLocation
   } = useGraphConfig();
   const {
     strings
   } = i18n;
-  const yAxisLabelLocation = [0, range[Y][MAX]];
-  const xAxisLabelLocation = [range[X][MAX], 0];
-  const [xAxisLabelText, yAxisLabelText] = labels;
   const graphInfo = {
     range,
     width,
     height
   };
-  const [x1, y1] = pointToPixel(xAxisLabelLocation, graphInfo);
-  // The default location for the y-axis-label is at the maximum y point
-  // This is just underneath the tick line for that point. The -24 moves the
-  // label up one grid square, so it sits on top of the graph
-  const [x2, y2] = vec.add(pointToPixel(yAxisLabelLocation, graphInfo), [0, -24]);
+
+  // Get the position of the main axis labels
+  const [xAxisLabelLocation, yAxisLabelLocation] = getLabelPosition(graphInfo, labelLocation);
+  const [xAxisLabelText, yAxisLabelText] = labels;
+
+  // If the labels are rotated, we need to center the
+  // x-axis label along the bottom of the graph.
+  const xLabelTransform = labelLocation === "onAxis" ? "translate(7px, -50%)" : "translate(-50%, -50%)";
+  const yLabelTransform = labelLocation === "onAxis" ? "translate(-50%, 0px)" : "translate(-50%, 0px) rotate(-90deg)";
   const {
     TeX
   } = getDependencies();
@@ -27932,22 +27931,53 @@ function AxisLabels({
     "aria-label": strings.xAxis,
     style: {
       position: "absolute",
-      left: x1,
-      top: y1,
-      fontSize: "14px",
-      transform: "translate(7px, -50%)"
+      left: xAxisLabelLocation[X],
+      top: xAxisLabelLocation[Y],
+      fontSize: fontSize + "px",
+      transform: xLabelTransform
     }
   }, /*#__PURE__*/React__default.createElement(TeX, null, replaceOutsideTeX(xAxisLabelText))), /*#__PURE__*/React__default.createElement("span", {
     "aria-label": strings.yAxis,
     style: {
       position: "absolute",
-      left: x2,
-      top: y2,
-      fontSize: "14px",
-      transform: "translate(-50%, 0px)"
+      left: yAxisLabelLocation[X],
+      top: yAxisLabelLocation[Y],
+      fontSize: fontSize + "px",
+      transform: yLabelTransform
     }
   }, /*#__PURE__*/React__default.createElement(TeX, null, replaceOutsideTeX(yAxisLabelText))));
 }
+const getLabelPosition = (graphInfo, labelLocation) => {
+  // If the labels are placed along the edge of the graph, we need to place them at the
+  // center of the graph, which is the average of the min and max values of the axes.
+  if (labelLocation === "alongEdge") {
+    // Offset the labels by a certain amount based on the range of the graph, to ensure that
+    // the labels do not overlap with the axis tick if they are out of the graph bounds.
+    const xAxisLabelOffset = graphInfo.range[Y][MIN] >= 0 ? [0, fontSize * 3] // Move the label down by 3 font sizes if the y-axis min is positive
+    : [0, fontSize]; // Move the label down by 1 font size if the y-axis min is negative
+    const yAxisLabelOffset = graphInfo.range[X][MIN] >= 0 ? [-fontSize * 3, -fontSize] // Move the label left by 3 font sizes if the x-axis min is positive
+    : [-fontSize, -fontSize]; // Move the label left by 1 font size if the x-axis min is negative
+
+    // Calculate the location of the labels to be halfway between the min and max values of the axes
+    const xAxisLabelLocation = [(graphInfo.range[X][MIN] + graphInfo.range[X][MAX]) / 2, graphInfo.range[Y][MIN]];
+    const yAxisLabelLocation = [graphInfo.range[X][MIN], (graphInfo.range[Y][MIN] + graphInfo.range[Y][MAX]) / 2];
+
+    // Convert the Vector2 coordinates to pixel coordinates and add the offsets
+    const _xLabel = vec.add(pointToPixel(xAxisLabelLocation, graphInfo), xAxisLabelOffset);
+    const _yLabel = vec.add(pointToPixel(yAxisLabelLocation, graphInfo), yAxisLabelOffset);
+    return [_xLabel, _yLabel];
+  }
+
+  // Otherwise, the labels are placed on the axes (default), and we need to
+  // place them at the end of the axis, which is the maximum value of the axis.
+  const xLabelInitial = [graphInfo.range[X][MAX], 0];
+  const yLabelInitial = [0, graphInfo.range[Y][MAX]];
+  const yLabelOffset = [0, -fontSize * 2]; // Move the y-axis label up by 2 font sizes
+
+  const xLabel = pointToPixel(xLabelInitial, graphInfo);
+  const yLabel = vec.add(pointToPixel(yLabelInitial, graphInfo), yLabelOffset);
+  return [xLabel, yLabel];
+};
 
 // The size of the ticks and labels in pixels
 const tickSize = 10;
@@ -34197,6 +34227,7 @@ const MafsGraph = props => {
     state,
     dispatch,
     labels,
+    labelLocation,
     readOnly,
     fullGraphAriaLabel,
     fullGraphAriaDescription
@@ -34277,6 +34308,7 @@ const MafsGraph = props => {
       width,
       height,
       labels,
+      labelLocation,
       disableKeyboardInteraction: disableInteraction,
       // If the graph is read-only or static, we want to make it
       // visually clear that the graph is no longer interactive.
@@ -41388,7 +41420,7 @@ const addLibraryVersionToPerseusDebug = (libraryName, libraryVersion) => {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "56.2.0";
+const libVersion = "57.0.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {