@khanacademy/perseus 21.1.0 → 21.2.1

package/dist/index.css

@@ -4284,6 +4284,7 @@ html body .mq-editable-field .mq-selection .mq-nthroot-container * {
     --movable-point-ring-radius: calc(2px + var(--movable-point-center-radius));
     --movable-point-halo-radius: calc(3px + var(--movable-point-ring-radius));
     --movable-point-hover-expansion: 2px;
+    --movable-point-focus-ring-offset: 2px;
 
     --movable-line-stroke-color: var(--mafs-blue);
     --movable-line-stroke-weight: 2px;
@@ -4305,7 +4306,13 @@ html body .mq-editable-field .mq-selection .mq-nthroot-container * {
     fill: transparent;
 }
 
-.MafsView :is(.movable-point-center, .movable-point-ring, .movable-point-halo) {
+.MafsView
+    :is(
+        .movable-point-center,
+        .movable-point-ring,
+        .movable-point-halo,
+        .movable-point-focus-outline
+    ) {
     transition: r 0.15s ease-out;
 }
 
@@ -4344,7 +4351,24 @@ html body .mq-editable-field .mq-selection .mq-nthroot-container * {
     );
 }
 
-.MafsView .movable-point:focus-visible .movable-point-halo {
-    outline: 2px solid blue;
-    border-radius: 99px;
+.MafsView .movable-point .movable-point-focus-outline {
+    visibility: hidden;
+    r: calc(
+        var(--movable-point-halo-radius) +
+            var(--movable-point-focus-ring-offset)
+    );
+    stroke-width: 2px;
+    fill: none;
+    stroke: var(--mafs-blue);
+}
+
+.MafsView .movable-point:hover .movable-point-focus-outline {
+    r: calc(
+        var(--movable-point-hover-expansion) + var(--movable-point-halo-radius) +
+            var(--movable-point-focus-ring-offset)
+    );
+}
+
+.MafsView .movable-point:focus-visible .movable-point-focus-outline {
+    visibility: visible;
 }

package/dist/index.js

@@ -3281,6 +3281,15 @@ const textarea = {
  */
 const unescapeMathMode$1 = label => label.startsWith("$") && label.endsWith("$") ? label.slice(1, -1) : label;
 const random$1 = seededRNG$1(new Date().getTime() & 0xffffffff);
+
+// TODO(benchristel): in the future, we may want to make deepClone work for
+// Record<string, Cloneable> as well. Currently, it only does arrays.
+function deepClone(obj) {
+  if (Array.isArray(obj)) {
+    return obj.map(deepClone);
+  }
+  return obj;
+}
 const Util = {
   inputPathsEqual,
   nestedMap: nestedMap$2,
@@ -3326,7 +3335,8 @@ const Util = {
   getDataUrl: getDataUrl,
   textarea,
   unescapeMathMode: unescapeMathMode$1,
-  random: random$1
+  random: random$1,
+  deepClone
 };
 
 // Derived from the MIT-licensed:
@@ -28364,6 +28374,28 @@ function movePoint(index, destination) {
     destination
   };
 }
+const CHANGE_SNAP_STEP = "change-snap-step";
+function changeSnapStep(snapStep) {
+  return {
+    type: CHANGE_SNAP_STEP,
+    snapStep
+  };
+}
+const CHANGE_RANGE = "change-range";
+function changeRange(range) {
+  return {
+    type: CHANGE_RANGE,
+    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
@@ -28390,6 +28422,11 @@ const normalizeCoords = (coordsList, ranges) => coordsList.map(coords => coords.
   const extent = ranges[i][1] - ranges[i][0];
   return (coord + ranges[i][1]) / extent;
 }));
+function snap(snapStep, point) {
+  const [requestedX, requestedY] = point;
+  const [snapX, snapY] = snapStep;
+  return [Math.round(requestedX / snapX) * snapX, Math.round(requestedY / snapY) * snapY];
+}
 
 const useTransform = function () {
   const {
@@ -28448,6 +28485,9 @@ const getLines = points => points.map((point, i) => {
 
 const defaultStroke = "var(--movable-line-stroke-color)";
 const MovableLine = props => {
+  const {
+    state
+  } = useGraphState();
   const {
     start,
     end,
@@ -28472,7 +28512,7 @@ const MovableLine = props => {
     onMove: newPoint => {
       onMove(mafs.vec.sub(newPoint, midpoint));
     },
-    constrain: p => p
+    constrain: p => snap(state.snapStep, p)
   });
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("g", {
     ref: line,
@@ -28523,7 +28563,13 @@ function SVGLine(props) {
   });
 }
 
+// The hitbox size of 48px by 48px is preserved from the legacy interactive
+// graph.
+const hitboxSizePx = 48;
 const StyledMovablePoint = props => {
+  const {
+    state
+  } = useGraphState();
   const hitboxRef = React.useRef(null);
   const {
     point,
@@ -28536,7 +28582,7 @@ const StyledMovablePoint = props => {
     gestureTarget: hitboxRef,
     point,
     onMove,
-    constrain: p => p
+    constrain: p => snap(state.snapStep, p)
   });
   const [[x, y]] = useTransform(point);
   return /*#__PURE__*/React__namespace.createElement("g", {
@@ -28551,7 +28597,7 @@ const StyledMovablePoint = props => {
     }
   }, /*#__PURE__*/React__namespace.createElement("circle", {
     className: "movable-point-hitbox",
-    r: TARGET_SIZE / 2,
+    r: hitboxSizePx / 2,
     cx: x,
     cy: y
   }), /*#__PURE__*/React__namespace.createElement("circle", {
@@ -28562,6 +28608,10 @@ const StyledMovablePoint = props => {
     className: "movable-point-ring",
     cx: x,
     cy: y
+  }), /*#__PURE__*/React__namespace.createElement("circle", {
+    className: "movable-point-focus-outline",
+    cx: x,
+    cy: y
   }), /*#__PURE__*/React__namespace.createElement("circle", {
     className: "movable-point-center",
     cx: x,
@@ -28887,7 +28937,8 @@ const PolygonGraph = props => {
     type,
     showAngles,
     showSides,
-    range
+    range,
+    snapStep
   } = props.graphState;
   const points = coords ?? [[0, 0]];
   const pointsSum = points.reduce((acc, point) => mafs.vec.add(acc, point), [0, 0]);
@@ -28902,7 +28953,7 @@ const PolygonGraph = props => {
       const delta = mafs.vec.sub(newPoint, midpoint);
       dispatch(moveAll(delta));
     },
-    constrain: p => p
+    constrain: p => snap(snapStep, p)
   });
   const active = hovered || focused || dragging;
   const lines = getLines(points);
@@ -28971,14 +29022,6 @@ function PointGraph(props) {
   })));
 }
 
-const GraphStateContext = /*#__PURE__*/React.createContext({
-  state: {},
-  dispatch: () => {}
-});
-function useGraphState() {
-  return React__default["default"].useContext(GraphStateContext);
-}
-
 function Arrow(props) {
   const {
     userTransform,
@@ -29022,20 +29065,122 @@ function AxisArrows() {
   }));
 }
 
-const renderLineLabel = (n, _ref) => {
-  let [min, max] = _ref;
-  return n !== -1 && n !== min && n !== max;
+const tickSize = 10;
+const tickStyle = {
+  stroke: "black",
+  strokeWidth: 1
+};
+const YGridTick = _ref => {
+  let {
+    y
+  } = _ref;
+  const pointOnAxis = [0, y];
+  const [[xPosition, yPosition]] = useTransform(pointOnAxis);
+  return /*#__PURE__*/React__namespace.createElement("g", {
+    className: "y-axis-ticks"
+  }, /*#__PURE__*/React__namespace.createElement("line", {
+    x1: xPosition - tickSize / 2,
+    y1: yPosition,
+    x2: xPosition + tickSize / 2,
+    y2: yPosition,
+    style: tickStyle
+  }));
+};
+const XGridTick = _ref2 => {
+  let {
+    x
+  } = _ref2;
+  const pointOnAxis = [x, 0];
+  const [[xPosition, yPosition]] = useTransform(pointOnAxis);
+  return /*#__PURE__*/React__namespace.createElement("g", {
+    className: "x-axis-ticks"
+  }, /*#__PURE__*/React__namespace.createElement("line", {
+    x1: xPosition,
+    y1: yPosition + tickSize / 2,
+    x2: xPosition,
+    y2: yPosition - tickSize / 2,
+    style: tickStyle
+  }));
+};
+function generateTickLocations(tickStep, min, max) {
+  const ticks = [];
+  for (let i = 0 + tickStep; i < max; i += tickStep) {
+    ticks.push(i);
+  }
+  for (let i = 0 - tickStep; i > min; i -= tickStep) {
+    ticks.push(i);
+  }
+  return ticks;
+}
+const AxisTicks = props => {
+  const range = props.range;
+  const [xMin, xMax] = range[0];
+  const [yMin, yMax] = range[1];
+  const yTickStep = props.tickStep[1];
+  const xTickStep = props.tickStep[0];
+  const yGridTicks = generateTickLocations(yTickStep, yMin, yMax);
+  const xGridTicks = generateTickLocations(xTickStep, xMin, xMax);
+  return /*#__PURE__*/React__namespace.createElement("g", {
+    className: "axis-ticks"
+  }, yGridTicks.map(y => {
+    return /*#__PURE__*/React__namespace.createElement(YGridTick, {
+      y: y,
+      key: `y-grid-tick-${y}`
+    });
+  }), xGridTicks.map(x => {
+    return /*#__PURE__*/React__namespace.createElement(XGridTick, {
+      x: x,
+      key: `x-grid-tick-${x}`
+    });
+  }));
+};
+
+/**
+ * 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
+ *
+ * axisIndex is for grabbing data in an array that contains
+ * data for multiple axes. For example range: [[-10, 10], [-10, 10]]
+ * range[0] is data for the x axis and range[1] is data for the y axis
+ *
+ * @param {GridProps} props
+ * @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)
+  };
+};
+const Grid = props => {
+  return props.markings === "none" ? null : /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(mafs.Coordinates.Cartesian, {
+    xAxis: axisOptions(props, 0),
+    yAxis: axisOptions(props, 1)
+  }), /*#__PURE__*/React__namespace.createElement(AxisTicks, {
+    range: props.range,
+    tickStep: props.tickStep
+  }), props.markings === "graph" && /*#__PURE__*/React__namespace.createElement(AxisArrows, null));
 };
-const axisOptions = (props, index) => ({
-  axis: props.markings === "graph",
-  lines: props.step[index],
-  subdivisions: props.step[index] / props.gridStep[index],
-  labels: n => renderLineLabel(n, props.range[index]) ? n : ""
-});
-const Grid = props => props.markings === "none" ? null : /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(mafs.Coordinates.Cartesian, {
-  xAxis: axisOptions(props, 0),
-  yAxis: axisOptions(props, 1)
-}), props.markings === "graph" && /*#__PURE__*/React__namespace.createElement(AxisArrows, null));
 
 // Displays a stylized open eye: lint warnings are visible
 const VisibleIcon = () => /*#__PURE__*/React__namespace.createElement("svg", {
@@ -29743,6 +29888,10 @@ function interactiveGraphReducer(state, action) {
       return doMoveAll(state, action);
     case MOVE_POINT:
       return doMovePoint(state, action);
+    case CHANGE_SNAP_STEP:
+      return doChangeSnapStep(state, action);
+    case CHANGE_RANGE:
+      return doChangeRange(state, action);
     default:
       throw new wonderStuffCore.UnreachableCaseError(action);
   }
@@ -29764,14 +29913,11 @@ function doMoveControlPoint(state, action) {
           update: tuple => setAtIndex({
             array: tuple,
             index: action.pointIndex,
-            newValue: snap({
+            newValue: snap(snapStep, bound$1({
               snapStep,
-              point: bound$1({
-                snapStep,
-                range,
-                point: action.destination
-              })
-            })
+              range,
+              point: action.destination
+            }))
           })
         });
         const coordsToCheck = newCoords[action.itemIndex];
@@ -29815,13 +29961,7 @@ function doMoveLine(state, action) {
           snapStep,
           range
         });
-        const newLine = [snap({
-          snapStep,
-          point: mafs.vec.add(currentLine[0], change)
-        }), snap({
-          snapStep,
-          point: mafs.vec.add(currentLine[1], change)
-        })];
+        const newLine = [snap(snapStep, mafs.vec.add(currentLine[0], change)), snap(snapStep, mafs.vec.add(currentLine[1], change))];
         const newCoords = setAtIndex({
           array: state.coords,
           index: action.itemIndex,
@@ -29852,10 +29992,7 @@ function doMoveAll(state, action) {
           snapStep,
           range
         });
-        const newCoords = state.coords.map(point => snap({
-          snapStep,
-          point: mafs.vec.add(point, change)
-        }));
+        const newCoords = state.coords.map(point => snap(snapStep, mafs.vec.add(point, change)));
         return {
           ...state,
           hasBeenInteractedWith: true,
@@ -29878,14 +30015,11 @@ function doMovePoint(state, action) {
           coords: setAtIndex({
             array: state.coords,
             index: action.index,
-            newValue: snap({
+            newValue: snap(state.snapStep, bound$1({
               snapStep: state.snapStep,
-              point: bound$1({
-                snapStep: state.snapStep,
-                range: state.range,
-                point: action.destination
-              })
-            })
+              range: state.range,
+              point: action.destination
+            }))
           })
         };
       }
@@ -29893,6 +30027,28 @@ function doMovePoint(state, action) {
       throw new Error("The movePoint action is only for point and polygon graphs");
   }
 }
+function doChangeSnapStep(state, action) {
+  if (
+  // Deep equality check since these are arrays
+  ___default["default"].isEqual(state.snapStep, action.snapStep)) {
+    return state;
+  }
+  return {
+    ...state,
+    snapStep: action.snapStep
+  };
+}
+function doChangeRange(state, action) {
+  if (
+  // Deep equality check since these are arrays
+  ___default["default"].isEqual(state.range, action.range)) {
+    return state;
+  }
+  return {
+    ...state,
+    range: action.range
+  };
+}
 const getChange = (coords, delta, constraintOpts) => {
   const [deltaX, deltaY] = delta;
   const maxMoves = coords.map(point => maxMove({
@@ -29911,24 +30067,14 @@ const getChange = (coords, delta, constraintOpts) => {
   const dy = clamp(deltaY, minYMove, maxYMove);
   return [dx, dy];
 };
-function snap(_ref) {
-  let {
-    snapStep,
-    point
-  } = _ref;
-  const [requestedX, requestedY] = point;
-  const [snapX, snapY] = snapStep;
-  return [Math.round(requestedX / snapX) * snapX, Math.round(requestedY / snapY) * snapY];
-}
-
 // Returns the closest point to the given `point` that is within the graph
 // bounds given in `state`.
-function bound$1(_ref2) {
+function bound$1(_ref) {
   let {
     snapStep,
     range,
     point
-  } = _ref2;
+  } = _ref;
   const [requestedX, requestedY] = point;
   const [snapX, snapY] = snapStep;
   const [[minX, maxX], [minY, maxY]] = range;
@@ -29936,12 +30082,12 @@ function bound$1(_ref2) {
 }
 
 // Returns the vector from the given point to the top-right corner of the graph
-function maxMove(_ref3) {
+function maxMove(_ref2) {
   let {
     snapStep,
     range,
     point
-  } = _ref3;
+  } = _ref2;
   const topRight = bound$1({
     snapStep,
     range,
@@ -29952,12 +30098,12 @@ function maxMove(_ref3) {
 
 // Returns the vector from the given point to the bottom-left corner of the
 // graph
-function minMove(_ref4) {
+function minMove(_ref3) {
   let {
     snapStep,
     range,
     point
-  } = _ref4;
+  } = _ref3;
   const bottomLeft = bound$1({
     snapStep,
     range,
@@ -30282,6 +30428,18 @@ const MafsGraph = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
     }
     prevState.current = state;
   }, [props, state]);
+
+  // Destructuring first to keep useEffect from making excess calls
+  const [xSnap, ySnap] = props.snapStep;
+  React.useEffect(() => {
+    dispatch(changeSnapStep([xSnap, ySnap]));
+  }, [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)
   }));
@@ -30316,7 +30474,13 @@ const MafsGraph = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
     zoom: false,
     width: width,
     height: height
-  }, /*#__PURE__*/React__namespace.createElement(SvgDefs, null), /*#__PURE__*/React__namespace.createElement(Grid, props), props.lockedFigures && /*#__PURE__*/React__namespace.createElement(GraphLockedLayer, {
+  }, /*#__PURE__*/React__namespace.createElement(SvgDefs, null), /*#__PURE__*/React__namespace.createElement(Grid, {
+    tickStep: props.step,
+    gridStep: props.gridStep,
+    range: props.range,
+    containerSizeClass: props.containerSizeClass,
+    markings: props.markings
+  }), props.lockedFigures && /*#__PURE__*/React__namespace.createElement(GraphLockedLayer, {
     lockedFigures: props.lockedFigures
   }), renderGraph({
     state,
@@ -32066,8 +32230,8 @@ class InteractiveGraph extends React__namespace.Component {
           };
         }
       } else if (userInput.type === "segment" && rubric.correct.type === "segment" && userInput.coords != null) {
-        let guess = userInput.coords.slice();
-        let correct = rubric.correct.coords?.slice();
+        let guess = Util.deepClone(userInput.coords);
+        let correct = Util.deepClone(rubric.correct?.coords);
         guess = ___default["default"].invoke(guess, "sort").sort();
         // @ts-expect-error - TS2345 - Argument of type '(readonly Coord[])[] | undefined' is not assignable to parameter of type 'Collection<any>'.
         correct = ___default["default"].invoke(correct, "sort").sort();
@@ -42329,7 +42493,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.1.0";
+const libVersion = "21.2.1";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -43458,6 +43622,9 @@ const ItemExtras = [
 // A background image applied to various widgets.
 
 const PerseusExpressionAnswerFormConsidered = ["correct", "wrong", "ungraded"];
+
+// 2D range: xMin, xMax, yMin, yMax
+
 const plotterPlotTypes = ["bar", "line", "pic", "histogram", "dotplot"];
 
 /**