@khanacademy/perseus 21.2.1 → 21.3.0

package/dist/index.css

@@ -4291,9 +4291,13 @@ html body .mq-editable-field .mq-selection .mq-nthroot-container * {
     --movable-line-stroke-weight-active: 4px;
 }
 
-.MafsView .movable-line:is(:focus-visible, :hover),
+.MafsView > svg {
+    /* Chrome/Safari bugfix for LEMS-1906 */
+    display: block;
+}
+
+.MafsView .movable-line:hover,
 .movable-dragging {
-    outline: none;
     --movable-line-stroke-weight: var(--movable-line-stroke-weight-active);
 }
 
@@ -4302,6 +4306,22 @@ html body .mq-editable-field .mq-selection .mq-nthroot-container * {
     outline: none;
 }
 
+.MafsView
+    .movable-line
+    :is(.movable-line-focus-outline, .movable-line-focus-outline-gap) {
+    stroke: transparent;
+}
+
+.MafsView .movable-line:focus-visible .movable-line-focus-outline {
+    stroke: var(--mafs-blue);
+    stroke-width: 10px;
+}
+
+.MafsView .movable-line:focus-visible .movable-line-focus-outline-gap {
+    stroke: white;
+    stroke-width: 6px;
+}
+
 .MafsView .movable-point-hitbox {
     fill: transparent;
 }
@@ -4372,3 +4392,14 @@ html body .mq-editable-field .mq-selection .mq-nthroot-container * {
 .MafsView .movable-point:focus-visible .movable-point-focus-outline {
     visibility: visible;
 }
+
+@font-face {
+    font-family: Mafs-MJXTEX;
+    src: url("https://cdn.kastatic.org/fonts/mathjax/MathJax_Main-Regular.woff")
+        format("woff");
+}
+
+.MafsView .axis-ticks text {
+    font-size: 14px;
+    font-family: "Mafs-MJXTEX";
+}

package/dist/index.js

@@ -25037,6 +25037,7 @@ class Explanation extends React__namespace.Component {
     // While the button is not normally included in a block of text, it needs to be able to accommodate such a case.
     const buttonStyleOverrides = {
       height: "auto",
+      lineHeight: "inherit",
       marginLeft: "-2px",
       // transfer space on the left side to the padding
       marginRight: "2px",
@@ -25046,7 +25047,8 @@ class Explanation extends React__namespace.Component {
 
     const labelStyle = {
       fontSize: "18px",
-      lineHeight: "20px",
+      lineHeight: "inherit",
+      "text-align": "left",
       // The following property adjusts the large space between the button text and the caret icon.
       // Since we are unable to adjust the styling of the icon (where the extra space exists),
       //      we are adjusting it on the text label by using a negative margin.
@@ -28389,14 +28391,6 @@ function changeRange(range) {
   };
 }
 
-const GraphStateContext = /*#__PURE__*/React.createContext({
-  state: {},
-  dispatch: () => {}
-});
-function useGraphState() {
-  return React__default["default"].useContext(GraphStateContext);
-}
-
 /**
  * 44 is touch best practice and AAA compliant for WCAG
  * https://www.w3.org/WAI/WCAG21/Understanding/target-size.html
@@ -28485,9 +28479,6 @@ const getLines = points => points.map((point, i) => {
 
 const defaultStroke = "var(--movable-line-stroke-color)";
 const MovableLine = props => {
-  const {
-    state
-  } = useGraphState();
   const {
     start,
     end,
@@ -28512,12 +28503,13 @@ const MovableLine = props => {
     onMove: newPoint => {
       onMove(mafs.vec.sub(newPoint, midpoint));
     },
-    constrain: p => snap(state.snapStep, p)
+    constrain: p => p
   });
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("g", {
     ref: line,
     tabIndex: 0,
     className: "movable-line",
+    "data-test-id": "movable-line",
     style: {
       cursor: dragging ? "grabbing" : "grab"
     }
@@ -28528,6 +28520,16 @@ const MovableLine = props => {
       stroke: "transparent",
       strokeWidth: TARGET_SIZE
     }
+  }), /*#__PURE__*/React__namespace.createElement(SVGLine, {
+    start: startPtPx,
+    end: endPtPx,
+    className: "movable-line-focus-outline",
+    style: {}
+  }), /*#__PURE__*/React__namespace.createElement(SVGLine, {
+    start: startPtPx,
+    end: endPtPx,
+    className: "movable-line-focus-outline-gap",
+    style: {}
   }), /*#__PURE__*/React__namespace.createElement(SVGLine, {
     start: startPtPx,
     end: endPtPx,
@@ -28535,7 +28537,8 @@ const MovableLine = props => {
       stroke,
       strokeWidth: "var(--movable-line-stroke-weight)"
     },
-    dragging: dragging
+    dragging: dragging,
+    testId: "movable-line__line"
   })), startExtend && /*#__PURE__*/React__namespace.createElement(mafs.Vector, {
     tail: start,
     tip: startExtend,
@@ -28551,18 +28554,30 @@ function SVGLine(props) {
     start,
     end,
     style,
-    dragging
+    dragging,
+    className,
+    testId
   } = props;
+  const draggingClass = dragging ? "movable-dragging" : "";
   return /*#__PURE__*/React__namespace.createElement("line", {
     x1: start[0],
     y1: start[1],
     x2: end[0],
     y2: end[1],
     style: style,
-    className: dragging ? "movable-dragging" : undefined
+    className: `${className} ${draggingClass}`,
+    "data-test-id": testId
   });
 }
 
+const GraphStateContext = /*#__PURE__*/React.createContext({
+  state: {},
+  dispatch: () => {}
+});
+function useGraphState() {
+  return React__default["default"].useContext(GraphStateContext);
+}
+
 // The hitbox size of 48px by 48px is preserved from the legacy interactive
 // graph.
 const hitboxSizePx = 48;
@@ -28594,7 +28609,8 @@ const StyledMovablePoint = props => {
       touchAction: "none",
       outline: "none",
       "--movable-point-color": color
-    }
+    },
+    "data-test-id": "movable-point"
   }, /*#__PURE__*/React__namespace.createElement("circle", {
     className: "movable-point-hitbox",
     r: hitboxSizePx / 2,
@@ -28618,7 +28634,8 @@ const StyledMovablePoint = props => {
     cy: y,
     style: {
       fill: color
-    }
+    },
+    "data-test-id": "movable-point__center"
   }));
 };
 
@@ -29084,7 +29101,13 @@ const YGridTick = _ref => {
     x2: xPosition + tickSize / 2,
     y2: yPosition,
     style: tickStyle
-  }));
+  }), y !== -1 && /*#__PURE__*/React__namespace.createElement("text", {
+    height: 20,
+    width: 50,
+    textAnchor: "end",
+    x: xPosition - 10,
+    y: yPosition + 5
+  }, y.toString()));
 };
 const XGridTick = _ref2 => {
   let {
@@ -29100,13 +29123,23 @@ const XGridTick = _ref2 => {
     x2: xPosition,
     y2: yPosition - tickSize / 2,
     style: tickStyle
-  }));
+  }), x !== -1 && /*#__PURE__*/React__namespace.createElement("text", {
+    height: 20,
+    width: 50,
+    textAnchor: "middle",
+    x: xPosition,
+    y: yPosition + 25
+  }, x.toString()));
 };
 function generateTickLocations(tickStep, min, max) {
   const ticks = [];
+
+  // Add ticks in the positive direction
   for (let i = 0 + tickStep; i < max; i += tickStep) {
     ticks.push(i);
   }
+
+  // Add ticks in the negative direction
   for (let i = 0 - tickStep; i > min; i -= tickStep) {
     ticks.push(i);
   }
@@ -29135,24 +29168,6 @@ const AxisTicks = props => {
   }));
 };
 
-/**
- * lineLabelText get the text that should
- * be displayed for a specific tick place
- *
- * @param {number} n the tick number
- * @param {number} tickStep how frequently a label should appear
- * @param {vec.Vector2} range the min/max range on the axis
- */
-const lineLabelText = (n, tickStep, range) => {
-  const [min, max] = range;
-  const isOnStep = n % tickStep === 0;
-  const isNegativeOne = n === -1;
-  const isMin = n === min;
-  const isMax = n === max;
-  const shouldRender = isOnStep && !isNegativeOne && !isMin && !isMax;
-  return shouldRender ? `${n}` : "";
-};
-
 /**
  * axisOptions determine axis options for Mafs
  *
@@ -29164,12 +29179,10 @@ const lineLabelText = (n, tickStep, range) => {
  * @param {number} axisIndex which axis we're getting options for
  */
 const axisOptions = (props, axisIndex) => {
-  const axisStep = props.tickStep[axisIndex];
-  const axisRange = props.range[axisIndex];
   return {
     axis: props.markings === "graph",
     lines: props.gridStep[axisIndex],
-    labels: n => lineLabelText(n, axisStep, axisRange)
+    labels: false
   };
 };
 const Grid = props => {
@@ -30416,9 +30429,22 @@ const renderGraph = props => {
       return new wonderStuffCore.UnreachableCaseError(type);
   }
 };
-const MafsGraph = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
-  const [width, height] = props.box;
+const StatefulMafsGraph = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
   const [state, dispatch] = React__namespace.useReducer(interactiveGraphReducer, props, initializeGraphState);
+  React.useImperativeHandle(ref, () => ({
+    getUserInput: () => getGradableGraph(state, props.graph)
+  }));
+  return /*#__PURE__*/React__namespace.createElement(MafsGraph, _extends({
+    state: state,
+    dispatch: dispatch
+  }, props));
+});
+const MafsGraph = props => {
+  const {
+    state,
+    dispatch
+  } = props;
+  const [width, height] = props.box;
   const prevState = React.useRef(state);
   React.useEffect(() => {
     if (prevState.current !== state) {
@@ -30433,16 +30459,13 @@ const MafsGraph = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
   const [xSnap, ySnap] = props.snapStep;
   React.useEffect(() => {
     dispatch(changeSnapStep([xSnap, ySnap]));
-  }, [xSnap, ySnap]);
+  }, [dispatch, xSnap, ySnap]);
 
   // Destructuring first to keep useEffect from making excess calls
   const [[xMinRange, xMaxRange], [yMinRange, yMaxRange]] = props.range;
   React.useEffect(() => {
     dispatch(changeRange([[xMinRange, xMaxRange], [yMinRange, yMaxRange]]));
-  }, [xMinRange, xMaxRange, yMinRange, yMaxRange]);
-  React__namespace.useImperativeHandle(ref, () => ({
-    getUserInput: () => getGradableGraph(state, props.graph)
-  }));
+  }, [dispatch, xMinRange, xMaxRange, yMinRange, yMaxRange]);
   return /*#__PURE__*/React__namespace.createElement(GraphStateContext.Provider, {
     value: {
       state,
@@ -30452,7 +30475,9 @@ const MafsGraph = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
     style: {
       width,
       height,
-      position: "relative"
+      position: "relative",
+      padding: "25px 25px 0 0",
+      boxSizing: "content-box"
     }
   }, /*#__PURE__*/React__namespace.createElement(LegacyGrid, {
     box: props.box,
@@ -30486,7 +30511,7 @@ const MafsGraph = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
     state,
     dispatch
   })))));
-});
+};
 
 const {
   DeprecationMixin
@@ -31762,7 +31787,7 @@ class InteractiveGraph extends React__namespace.Component {
       const box = getInteractiveBoxFromSizeClass(this.props.containerSizeClass);
       const gridStep = this.props.gridStep || Util.getGridStep(this.props.range, this.props.step, box[0]);
       const snapStep = this.props.snapStep || Util.snapStepFromGridStep(gridStep);
-      return /*#__PURE__*/React__namespace.createElement(MafsGraph, _extends({}, this.props, {
+      return /*#__PURE__*/React__namespace.createElement(StatefulMafsGraph, _extends({}, this.props, {
         ref: this.mafsRef,
         gridStep: gridStep,
         snapStep: snapStep,
@@ -42493,7 +42518,7 @@ const init = function (options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "21.2.1";
+const libVersion = "21.3.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {