@khanacademy/perseus 21.2.2 → 21.3.1

package/dist/es/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,36 @@ 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 {
+    cursor: grab;
+    touch-action: none;
+    outline: none;
+}
+
+.MafsView .movable-point.movable-point--dragging {
+    cursor: grabbing;
+}
+
+.MafsView .movable-point.movable-point--dragging .movable-point-halo {
+    opacity: 0;
+}
+
 .MafsView .movable-point-hitbox {
     fill: transparent;
 }
@@ -4313,7 +4347,9 @@ html body .mq-editable-field .mq-selection .mq-nthroot-container * {
         .movable-point-halo,
         .movable-point-focus-outline
     ) {
-    transition: r 0.15s ease-out;
+    transition:
+        r 0.15s ease-out,
+        opacity 0.15s ease-out;
 }
 
 .MafsView .movable-point-center {
@@ -4372,3 +4408,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/es/index.js

@@ -7,7 +7,7 @@ import * as i18n from '@khanacademy/wonder-blocks-i18n';
 import Tooltip$1 from '@khanacademy/wonder-blocks-tooltip';
 import classNames from 'classnames';
 import * as React from 'react';
-import React__default, { useState, useEffect, useRef, createContext } from 'react';
+import React__default, { useState, useEffect, useRef, createContext, useImperativeHandle } from 'react';
 import _, { debounce as debounce$1 } from 'underscore';
 import Clickable from '@khanacademy/wonder-blocks-clickable';
 import { Popover, PopoverContentCore, PopoverContent } from '@khanacademy/wonder-blocks-popover';
@@ -28239,14 +28239,6 @@ function changeRange(range) {
   };
 }
 
-const GraphStateContext = /*#__PURE__*/createContext({
-  state: {},
-  dispatch: () => {}
-});
-function useGraphState() {
-  return React__default.useContext(GraphStateContext);
-}
-
 /**
  * 44 is touch best practice and AAA compliant for WCAG
  * https://www.w3.org/WAI/WCAG21/Understanding/target-size.html
@@ -28332,9 +28324,6 @@ const getLines = points => points.map((point, i) => {
 
 const defaultStroke = "var(--movable-line-stroke-color)";
 const MovableLine = props => {
-  const {
-    state
-  } = useGraphState();
   const {
     start,
     end,
@@ -28359,12 +28348,13 @@ const MovableLine = props => {
     onMove: newPoint => {
       onMove(vec.sub(newPoint, midpoint));
     },
-    constrain: p => snap(state.snapStep, p)
+    constrain: p => p
   });
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("g", {
     ref: line,
     tabIndex: 0,
     className: "movable-line",
+    "data-test-id": "movable-line",
     style: {
       cursor: dragging ? "grabbing" : "grab"
     }
@@ -28375,6 +28365,16 @@ const MovableLine = props => {
       stroke: "transparent",
       strokeWidth: TARGET_SIZE
     }
+  }), /*#__PURE__*/React.createElement(SVGLine, {
+    start: startPtPx,
+    end: endPtPx,
+    className: "movable-line-focus-outline",
+    style: {}
+  }), /*#__PURE__*/React.createElement(SVGLine, {
+    start: startPtPx,
+    end: endPtPx,
+    className: "movable-line-focus-outline-gap",
+    style: {}
   }), /*#__PURE__*/React.createElement(SVGLine, {
     start: startPtPx,
     end: endPtPx,
@@ -28382,7 +28382,8 @@ const MovableLine = props => {
       stroke,
       strokeWidth: "var(--movable-line-stroke-weight)"
     },
-    dragging: dragging
+    dragging: dragging,
+    testId: "movable-line__line"
   })), startExtend && /*#__PURE__*/React.createElement(Vector, {
     tail: start,
     tip: startExtend,
@@ -28398,18 +28399,30 @@ function SVGLine(props) {
     start,
     end,
     style,
-    dragging
+    dragging,
+    className,
+    testId
   } = props;
+  const draggingClass = dragging ? "movable-dragging" : "";
   return /*#__PURE__*/React.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__*/createContext({
+  state: {},
+  dispatch: () => {}
+});
+function useGraphState() {
+  return React__default.useContext(GraphStateContext);
+}
+
 // The hitbox size of 48px by 48px is preserved from the legacy interactive
 // graph.
 const hitboxSizePx = 48;
@@ -28431,17 +28444,16 @@ const StyledMovablePoint = props => {
     onMove,
     constrain: p => snap(state.snapStep, p)
   });
+  const pointClasses = `movable-point ${dragging ? "movable-point--dragging" : ""}`;
   const [[x, y]] = useTransform(point);
   return /*#__PURE__*/React.createElement("g", {
     ref: hitboxRef,
-    className: "movable-point",
+    className: pointClasses,
     tabIndex: 0,
     style: {
-      cursor: dragging ? "grabbing" : "grab",
-      touchAction: "none",
-      outline: "none",
       "--movable-point-color": color$1
-    }
+    },
+    "data-test-id": "movable-point"
   }, /*#__PURE__*/React.createElement("circle", {
     className: "movable-point-hitbox",
     r: hitboxSizePx / 2,
@@ -28465,7 +28477,8 @@ const StyledMovablePoint = props => {
     cy: y,
     style: {
       fill: color$1
-    }
+    },
+    "data-test-id": "movable-point__center"
   }));
 };
 
@@ -28922,7 +28935,13 @@ const YGridTick = ({
     x2: xPosition + tickSize / 2,
     y2: yPosition,
     style: tickStyle
-  }));
+  }), y !== -1 && /*#__PURE__*/React.createElement("text", {
+    height: 20,
+    width: 50,
+    textAnchor: "end",
+    x: xPosition - 10,
+    y: yPosition + 5
+  }, y.toString()));
 };
 const XGridTick = ({
   x
@@ -28937,13 +28956,23 @@ const XGridTick = ({
     x2: xPosition,
     y2: yPosition - tickSize / 2,
     style: tickStyle
-  }));
+  }), x !== -1 && /*#__PURE__*/React.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);
   }
@@ -28972,24 +29001,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
  *
@@ -29001,12 +29012,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 => {
@@ -30234,9 +30243,22 @@ const renderGraph = props => {
       return new UnreachableCaseError(type);
   }
 };
-const MafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const [width, height] = props.box;
+const StatefulMafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
   const [state, dispatch] = React.useReducer(interactiveGraphReducer, props, initializeGraphState);
+  useImperativeHandle(ref, () => ({
+    getUserInput: () => getGradableGraph(state, props.graph)
+  }));
+  return /*#__PURE__*/React.createElement(MafsGraph, _extends({
+    state: state,
+    dispatch: dispatch
+  }, props));
+});
+const MafsGraph = props => {
+  const {
+    state,
+    dispatch
+  } = props;
+  const [width, height] = props.box;
   const prevState = useRef(state);
   useEffect(() => {
     if (prevState.current !== state) {
@@ -30251,16 +30273,13 @@ const MafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
   const [xSnap, ySnap] = props.snapStep;
   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;
   useEffect(() => {
     dispatch(changeRange([[xMinRange, xMaxRange], [yMinRange, yMaxRange]]));
-  }, [xMinRange, xMaxRange, yMinRange, yMaxRange]);
-  React.useImperativeHandle(ref, () => ({
-    getUserInput: () => getGradableGraph(state, props.graph)
-  }));
+  }, [dispatch, xMinRange, xMaxRange, yMinRange, yMaxRange]);
   return /*#__PURE__*/React.createElement(GraphStateContext.Provider, {
     value: {
       state,
@@ -30270,7 +30289,9 @@ const MafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
     style: {
       width,
       height,
-      position: "relative"
+      position: "relative",
+      padding: "25px 25px 0 0",
+      boxSizing: "content-box"
     }
   }, /*#__PURE__*/React.createElement(LegacyGrid, {
     box: props.box,
@@ -30304,7 +30325,7 @@ const MafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
     state,
     dispatch
   })))));
-});
+};
 
 const {
   DeprecationMixin
@@ -31608,7 +31629,7 @@ class InteractiveGraph extends React.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.createElement(MafsGraph, _extends({}, this.props, {
+      return /*#__PURE__*/React.createElement(StatefulMafsGraph, _extends({}, this.props, {
         ref: this.mafsRef,
         gridStep: gridStep,
         snapStep: snapStep,
@@ -42347,7 +42368,7 @@ const init = function init(options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "21.2.2";
+const libVersion = "21.3.1";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {