@khanacademy/perseus 22.4.0 → 22.4.1

package/dist/index.css

@@ -4419,7 +4419,9 @@ html body .mq-editable-field .mq-selection .mq-nthroot-container * {
     );
 }
 
-.MafsView .movable-point:focus-visible .movable-point-focus-outline {
+.MafsView
+    .movable-point:is(:focus-visible, .movable-point--focus)
+    .movable-point-focus-outline {
     visibility: visible;
 }
 

package/dist/index.js

@@ -477,7 +477,7 @@ class InnerMathInput extends React__namespace.Component {
         locale
       } = this.context;
       // Initialize MathQuill.MathField instance
-      this.__mathField = mathInput.createMathField(this.__mathFieldWrapperRef, this.props.mathInputStrings, baseConfig => ({
+      this.__mathField = mathInput.createMathField(this.__mathFieldWrapperRef, locale, this.props.mathInputStrings, baseConfig => ({
         ...baseConfig,
         handlers: {
           edit: debounce(mathField => {
@@ -29333,6 +29333,194 @@ function snap(snapStep, point) {
   return [Math.round(requestedX / snapX) * snapX, Math.round(requestedY / snapY) * snapY];
 }
 
+// The hitbox size of 48px by 48px is preserved from the legacy interactive
+// graph.
+const hitboxSizePx = 48;
+
+// MovablePointView is a purely presentational component (i.e. it is a pure
+// function with no state or effects) that renders the SVG for a movable point
+// on an interactive graph.
+//
+// It has two modes for managing tabbing / focus: "controlled" (where the caller
+// manages the display of the focus ring, and the point itself cannot be
+// focused) and "uncontrolled" (where the point is focusable, and the browser
+// manages the focus state and styling). For context on why we did this, see
+// the description of https://github.com/Khan/perseus/pull/1240
+const MovablePointView = /*#__PURE__*/React.forwardRef((props, hitboxRef) => {
+  const {
+    range,
+    markings,
+    showTooltips
+  } = useGraphConfig();
+  const {
+    point,
+    color = wonderBlocksTokens.color.blue,
+    dragging,
+    focusBehavior
+  } = props;
+
+  // WB Tooltip requires a color name for the background color.
+  // Since the color in props is a hex value, a reverse lookup is needed.
+  const wbColorName = Object.entries(wonderBlocksTokens.color).find(_ref => {
+    let [_, value] = _ref;
+    return value === color;
+  })?.[0] ?? "blue";
+  const pointClasses = `movable-point ${dragging ? "movable-point--dragging" : ""} ${focusClass(focusBehavior)}`;
+  const [[x, y]] = useTransformVectorsToPixels(point);
+  const [xMin, xMax] = range[0];
+  const [yMin, yMax] = range[1];
+  const [[verticalStartX]] = useTransformVectorsToPixels([xMin, 0]);
+  const [[verticalEndX]] = useTransformVectorsToPixels([xMax, 0]);
+  const [[_, horizontalStartY]] = useTransformVectorsToPixels([0, yMin]);
+  const [[__, horizontalEndY]] = useTransformVectorsToPixels([0, yMax]);
+  const showHairlines = dragging && markings !== "none";
+  const hairlines = /*#__PURE__*/React__namespace.createElement("g", null, /*#__PURE__*/React__namespace.createElement("line", {
+    x1: verticalStartX,
+    y1: y,
+    x2: verticalEndX,
+    y2: y,
+    stroke: color
+  }), /*#__PURE__*/React__namespace.createElement("line", {
+    x1: x,
+    y1: horizontalStartY,
+    x2: x,
+    y2: horizontalEndY,
+    stroke: color
+  }));
+  const svgForPoint = /*#__PURE__*/React__namespace.createElement("g", {
+    ref: hitboxRef,
+    className: pointClasses,
+    style: {
+      "--movable-point-color": color
+    },
+    "data-testid": "movable-point",
+    tabIndex: tabIndex(focusBehavior)
+  }, /*#__PURE__*/React__namespace.createElement("circle", {
+    className: "movable-point-hitbox",
+    r: hitboxSizePx / 2,
+    cx: x,
+    cy: y
+  }), /*#__PURE__*/React__namespace.createElement("circle", {
+    className: "movable-point-halo",
+    cx: x,
+    cy: y
+  }), /*#__PURE__*/React__namespace.createElement("circle", {
+    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,
+    cy: y,
+    style: {
+      fill: color
+    },
+    "data-testid": "movable-point__center"
+  }));
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, showHairlines && hairlines, showTooltips ? /*#__PURE__*/React__namespace.createElement(Tooltip__default["default"], {
+    autoUpdate: true,
+    backgroundColor: wbColorName,
+    content: `(${point[0]}, ${point[1]})`,
+    contentStyle: {
+      color: "white"
+    }
+  }, svgForPoint) : svgForPoint);
+});
+function focusClass(config) {
+  if (config.type === "controlled" && config.showFocusRing) {
+    return "movable-point--focus";
+  }
+  return "";
+}
+function tabIndex(config) {
+  if (config.type === "uncontrolled") {
+    return config.tabIndex;
+  }
+  return undefined;
+}
+
+const Segment = props => {
+  const {
+    onMoveLine,
+    color,
+    points: [start, end],
+    extend
+  } = props;
+
+  // We use separate focusableHandle elements, instead of letting the movable
+  // points themselves be focusable, to allow the tab order of the points to
+  // be different from the rendering order. We had to solve for the following
+  // constraints:
+  // - SVG has no equivalent of z-index, so the order of elements in the
+  //   document determines the order in which they're painted. We want the
+  //   movable line segment to render behind its endpoints (it looks weird
+  //   otherwise) so we have to render the line first.
+  // - There isn't a browser-native way to customize tab order, other than
+  //   setting tabindex > 0. But that bumps elements to the front of the
+  //   tab order for the entire page, which is not what we want.
+  const {
+    visiblePoint: visiblePoint1,
+    focusableHandle: focusableHandle1
+  } = useControlPoint(start, color, p => props.onMovePoint(0, p));
+  const {
+    visiblePoint: visiblePoint2,
+    focusableHandle: focusableHandle2
+  } = useControlPoint(end, color, p => props.onMovePoint(1, p));
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, focusableHandle1, /*#__PURE__*/React__namespace.createElement(MovableLine, {
+    start: start,
+    end: end,
+    stroke: color,
+    extend: extend,
+    onMove: onMoveLine
+  }), focusableHandle2, visiblePoint1, visiblePoint2);
+};
+function useControlPoint(point, color, onMovePoint) {
+  const {
+    snapStep
+  } = useGraphConfig();
+  const [focused, setFocused] = React.useState(false);
+  const keyboardHandleRef = React.useRef(null);
+  mafs.useMovable({
+    gestureTarget: keyboardHandleRef,
+    point,
+    onMove: onMovePoint,
+    constrain: p => snap(snapStep, p)
+  });
+  const visiblePointRef = React.useRef(null);
+  const {
+    dragging
+  } = mafs.useMovable({
+    gestureTarget: visiblePointRef,
+    point,
+    onMove: onMovePoint,
+    constrain: p => snap(snapStep, p)
+  });
+  const focusableHandle = /*#__PURE__*/React__namespace.createElement("g", {
+    "data-testid": "movable-point__focusable-handle",
+    tabIndex: 0,
+    ref: keyboardHandleRef,
+    onFocus: () => setFocused(true),
+    onBlur: () => setFocused(false)
+  });
+  const visiblePoint = /*#__PURE__*/React__namespace.createElement(MovablePointView, {
+    point: point,
+    dragging: dragging,
+    color: color,
+    ref: visiblePointRef,
+    focusBehavior: {
+      type: "controlled",
+      showFocusRing: focused
+    }
+  });
+  return {
+    focusableHandle,
+    visiblePoint
+  };
+}
 const defaultStroke = "var(--movable-line-stroke-color)";
 const MovableLine = props => {
   const {
@@ -29345,12 +29533,13 @@ const MovableLine = props => {
   const midpoint = mafs.vec.midpoint(start, end);
   const [startPtPx, endPtPx] = useTransformVectorsToPixels(start, end);
   const {
+    range,
     graphDimensionsInPixels
   } = useGraphConfig();
   let startExtend = undefined;
   let endExtend = undefined;
   if (extend) {
-    const trimmedRange = trimRange(extend.range, graphDimensionsInPixels);
+    const trimmedRange = trimRange(range, graphDimensionsInPixels);
     startExtend = extend.start ? getIntersectionOfRayWithBox(start, end, trimmedRange) : undefined;
     endExtend = extend.end ? getIntersectionOfRayWithBox(end, start, trimmedRange) : undefined;
   }
@@ -29429,103 +29618,6 @@ function size(interval) {
   return interval[1] - interval[0];
 }
 
-// The hitbox size of 48px by 48px is preserved from the legacy interactive
-// graph.
-const hitboxSizePx = 48;
-const StyledMovablePoint = props => {
-  const {
-    range,
-    snapStep,
-    markings,
-    showTooltips
-  } = useGraphConfig();
-  const hitboxRef = React.useRef(null);
-  const {
-    point,
-    onMove,
-    color = wonderBlocksTokens.color.blue
-  } = props;
-
-  // WB Tooltip requires a color name for the background color.
-  // Since the color in props is a hex value, a reverse lookup is needed.
-  const wbColorName = Object.entries(wonderBlocksTokens.color).find(_ref => {
-    let [_, value] = _ref;
-    return value === color;
-  })?.[0] ?? "blue";
-  const {
-    dragging
-  } = mafs.useMovable({
-    gestureTarget: hitboxRef,
-    point,
-    onMove,
-    constrain: p => snap(snapStep, p)
-  });
-  const pointClasses = `movable-point ${dragging ? "movable-point--dragging" : ""}`;
-  const [[x, y]] = useTransformVectorsToPixels(point);
-  const [xMin, xMax] = range[0];
-  const [yMin, yMax] = range[1];
-  const [[verticalStartX]] = useTransformVectorsToPixels([xMin, 0]);
-  const [[verticalEndX]] = useTransformVectorsToPixels([xMax, 0]);
-  const [[_, horizontalStartY]] = useTransformVectorsToPixels([0, yMin]);
-  const [[__, horizontalEndY]] = useTransformVectorsToPixels([0, yMax]);
-  const showHairlines = dragging && markings !== "none";
-  const hairlines = /*#__PURE__*/React__namespace.createElement("g", null, /*#__PURE__*/React__namespace.createElement("line", {
-    x1: verticalStartX,
-    y1: y,
-    x2: verticalEndX,
-    y2: y,
-    stroke: color
-  }), /*#__PURE__*/React__namespace.createElement("line", {
-    x1: x,
-    y1: horizontalStartY,
-    x2: x,
-    y2: horizontalEndY,
-    stroke: color
-  }));
-  const svgForPoint = /*#__PURE__*/React__namespace.createElement("g", {
-    ref: hitboxRef,
-    className: pointClasses,
-    tabIndex: 0,
-    style: {
-      "--movable-point-color": color
-    },
-    "data-testid": "movable-point"
-  }, /*#__PURE__*/React__namespace.createElement("circle", {
-    className: "movable-point-hitbox",
-    r: hitboxSizePx / 2,
-    cx: x,
-    cy: y
-  }), /*#__PURE__*/React__namespace.createElement("circle", {
-    className: "movable-point-halo",
-    cx: x,
-    cy: y
-  }), /*#__PURE__*/React__namespace.createElement("circle", {
-    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,
-    cy: y,
-    style: {
-      fill: color
-    },
-    "data-testid": "movable-point__center"
-  }));
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, showHairlines && hairlines, showTooltips ? /*#__PURE__*/React__namespace.createElement(Tooltip__default["default"], {
-    autoUpdate: true,
-    backgroundColor: wbColorName,
-    content: `(${point[0]}, ${point[1]})`,
-    contentStyle: {
-      color: "white"
-    }
-  }, svgForPoint) : svgForPoint);
-};
-
 const SegmentGraph = props => {
   const {
     dispatch
@@ -29533,7 +29625,7 @@ const SegmentGraph = props => {
   const {
     coords: segments
   } = props.graphState;
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, segments?.map((segment, i) => /*#__PURE__*/React__namespace.createElement(SegmentView, {
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, segments?.map((segment, i) => /*#__PURE__*/React__namespace.createElement(Segment, {
     key: i,
     points: segment,
     onMoveLine: delta => {
@@ -29544,27 +29636,6 @@ const SegmentGraph = props => {
     }
   })));
 };
-const SegmentView = props => {
-  const {
-    onMoveLine: onMoveSegment,
-    points: [start, end]
-  } = props;
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(MovableLine, {
-    start: start,
-    end: end,
-    onMove: onMoveSegment
-  }), /*#__PURE__*/React__namespace.createElement(StyledMovablePoint, {
-    point: start,
-    onMove: newPoint => {
-      props.onMovePoint(0, newPoint);
-    }
-  }), /*#__PURE__*/React__namespace.createElement(StyledMovablePoint, {
-    point: end,
-    onMove: newPoint => {
-      props.onMovePoint(1, newPoint);
-    }
-  }));
-};
 
 const LinearGraph = props => {
   const {
@@ -29574,49 +29645,19 @@ const LinearGraph = props => {
     coords: lines
   } = props.graphState;
   const colors = ["var(--movable-line-stroke-color)", "var(--mafs-violet)"];
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, lines?.map((line, i) => /*#__PURE__*/React__namespace.createElement(LineView, {
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, lines?.map((line, i) => /*#__PURE__*/React__namespace.createElement(Segment, {
     key: i,
     points: line,
     onMoveLine: delta => {
       dispatch(moveLine(i, delta));
     },
-    onMovePoint: (endpointIndex, destination) => dispatch(moveControlPoint(endpointIndex, destination, i)),
-    stroke: colors[i]
-  })));
-};
-const LineView = props => {
-  const {
-    onMoveLine,
-    onMovePoint,
-    points: [start, end],
-    stroke
-  } = props;
-  const {
-    range
-  } = useGraphConfig();
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(MovableLine, {
-    start: start,
-    end: end,
-    onMove: onMoveLine,
     extend: {
       start: true,
-      end: true,
-      range
-    },
-    stroke: stroke
-  }), /*#__PURE__*/React__namespace.createElement(StyledMovablePoint, {
-    point: start,
-    onMove: newPoint => {
-      onMovePoint(0, newPoint);
-    },
-    color: stroke
-  }), /*#__PURE__*/React__namespace.createElement(StyledMovablePoint, {
-    point: end,
-    onMove: newPoint => {
-      onMovePoint(1, newPoint);
+      end: true
     },
-    color: stroke
-  }));
+    onMovePoint: (endpointIndex, destination) => dispatch(moveControlPoint(endpointIndex, destination, i)),
+    color: colors[i]
+  })));
 };
 
 const RayGraph = props => {
@@ -29624,30 +29665,21 @@ const RayGraph = props => {
     dispatch
   } = props;
   const {
-    coords: lines,
-    range
+    coords: lines
   } = props.graphState;
-
-  // a ray only has one line
-  const [start, end] = lines[0];
   const handleMoveLine = delta => dispatch(moveLine(0, delta));
-  const handleMovePoint = (newPoint, pointIndex) => dispatch(moveControlPoint(pointIndex, newPoint, 0));
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(MovableLine, {
-    start: start,
-    end: end,
-    onMove: handleMoveLine,
+  const handleMovePoint = (pointIndex, newPoint) => dispatch(moveControlPoint(pointIndex, newPoint, 0));
+  return /*#__PURE__*/React__namespace.createElement(Segment
+  // a ray only has one line
+  , {
+    points: lines[0],
+    onMoveLine: handleMoveLine,
+    onMovePoint: handleMovePoint,
     extend: {
-      end: true,
       start: false,
-      range
+      end: true
     }
-  }), /*#__PURE__*/React__namespace.createElement(StyledMovablePoint, {
-    point: start,
-    onMove: newPoint => handleMovePoint(newPoint, 0)
-  }), /*#__PURE__*/React__namespace.createElement(StyledMovablePoint, {
-    point: end,
-    onMove: newPoint => handleMovePoint(newPoint, 1)
-  }));
+  });
 };
 
 /**
@@ -29819,6 +29851,36 @@ const linesIntersect = (_ref3, _ref4) => {
 };
 const isEven = n => n % 2 === 0;
 
+const StyledMovablePoint = props => {
+  const {
+    snapStep
+  } = useGraphConfig();
+  const elementRef = React.useRef(null);
+  const {
+    point,
+    onMove,
+    color = wonderBlocksTokens.color.blue
+  } = props;
+  const {
+    dragging
+  } = mafs.useMovable({
+    gestureTarget: elementRef,
+    point,
+    onMove,
+    constrain: p => snap(snapStep, p)
+  });
+  return /*#__PURE__*/React__namespace.createElement(MovablePointView, {
+    ref: elementRef,
+    point: point,
+    color: color,
+    dragging: dragging,
+    focusBehavior: {
+      type: "uncontrolled",
+      tabIndex: 0
+    }
+  });
+};
+
 const PolygonGraph = props => {
   const [focused, setFocused] = React__namespace.useState(false);
   const [hovered, setHovered] = React__namespace.useState(false);
@@ -29832,17 +29894,19 @@ const PolygonGraph = props => {
     range,
     snapStep
   } = props.graphState;
+
+  // TODO(benchristel): can the default set of points be removed here? I don't
+  // think coords can be null.
   const points = coords ?? [[0, 0]];
-  const pointsSum = points.reduce((acc, point) => mafs.vec.add(acc, point), [0, 0]);
-  const midpoint = pointsSum && mafs.vec.scale(pointsSum, 1 / (points.length ?? 1));
   const ref = React__namespace.useRef(null);
+  const dragReferencePoint = points[0];
   const {
     dragging
   } = mafs.useMovable({
     gestureTarget: ref,
-    point: midpoint,
+    point: dragReferencePoint,
     onMove: newPoint => {
-      const delta = mafs.vec.sub(newPoint, midpoint);
+      const delta = mafs.vec.sub(newPoint, dragReferencePoint);
       dispatch(moveAll(delta));
     },
     constrain: p => snap(snapStep, p)
@@ -43559,7 +43623,7 @@ const init = function (options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "22.4.0";
+const libVersion = "22.4.1";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {