@khanacademy/perseus 22.4.2 → 22.5.1

package/dist/es/index.css

@@ -4425,6 +4425,41 @@ html body .mq-editable-field .mq-selection .mq-nthroot-container * {
     visibility: visible;
 }
 
+.MafsView .movable-circle {
+    cursor: grab;
+}
+
+.MafsView .movable-circle.movable-circle--dragging {
+    cursor: grabbing;
+    outline: none;
+}
+
+.MafsView .movable-circle .focus-ring {
+    visibility: hidden; /* overridden when the circle is focused */
+    stroke: var(--mafs-blue);
+    stroke-width: 2px;
+    fill: transparent;
+}
+
+.MafsView .movable-circle:focus {
+    outline: none;
+}
+
+.MafsView .movable-circle:focus-visible .focus-ring {
+    visibility: visible;
+}
+
+.MafsView .movable-circle .movable-circle-handle {
+    fill: var(--mafs-blue); /* WB fadedOffBlack64 */
+    stroke: #fff;
+    stroke-width: 2px;
+}
+
+.MafsView .movable-circle .movable-circle-handle-dot {
+    fill: #fff;
+    r: 1.25px;
+}
+
 @font-face {
     font-family: Mafs-MJXTEX;
     src: url("https://cdn.kastatic.org/fonts/mathjax/MathJax_Main-Regular.woff")

package/dist/es/index.js

@@ -29,7 +29,7 @@ import { OptionItem, SingleSelect, MultiSelect } from '@khanacademy/wonder-block
 import caretDown from '@phosphor-icons/core/regular/caret-down.svg';
 import caretUp from '@phosphor-icons/core/regular/caret-up.svg';
 import debounce$2 from 'lodash.debounce';
-import { vec, Line as Line$3, Point as Point$2, useMovable, Text as Text$1, Polygon, Circle as Circle$1, Coordinates, Mafs } from 'mafs';
+import { vec, Line as Line$4, Point as Point$2, useMovable, Text as Text$1, Polygon, Circle as Circle$1, Coordinates, Mafs } from 'mafs';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import { Body, LabelSmall, LabelMedium } from '@khanacademy/wonder-blocks-typography';
 import questionIcon from '@phosphor-icons/core/regular/question.svg';
@@ -16523,7 +16523,7 @@ const Label$1 = GraphieClasses.createSimpleClass((graphie, props) => {
   }
   return elem;
 });
-const Line$2 = GraphieClasses.createClass({
+const Line$3 = GraphieClasses.createClass({
   displayName: "Line",
   movableProps: ["children"],
   add: function (graphie) {
@@ -16642,7 +16642,7 @@ var Movables = {
   Arc: Arc,
   Circle: Circle,
   Label: Label$1,
-  Line: Line$2,
+  Line: Line$3,
   MovableLine: MovableLine$3,
   MovablePoint: MovablePoint$3,
   Parabola: Parabola,
@@ -27570,7 +27570,7 @@ var Image$1 = {
 // @ts-expect-error - TS2339 - Property 'Label' does not exist on type 'typeof Graphie'.
 const Label = Graphie.Label;
 // @ts-expect-error - TS2339 - Property 'Line' does not exist on type 'typeof Graphie'.
-const Line$1 = Graphie.Line;
+const Line$2 = Graphie.Line;
 // @ts-expect-error - TS2339 - Property 'MovablePoint' does not exist on type 'typeof Graphie'.
 const MovablePoint$1 = Graphie.MovablePoint;
 // @ts-expect-error - TS2339 - Property 'MovableLine' does not exist on type 'typeof Graphie'.
@@ -27792,7 +27792,7 @@ class Interaction extends React.Component {
         this._eval(element.options.endX),
         // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
         this._eval(element.options.endY)];
-        return /*#__PURE__*/React.createElement(Line$1, {
+        return /*#__PURE__*/React.createElement(Line$2, {
           key: element.key,
           start: start,
           end: end,
@@ -28500,6 +28500,16 @@ function vectorsToPixels(vectors, graphState, translation = [0, 0]) {
   const transformToPx = matrixBuilder().translate(...translation).scale(width / (xMax - xMin), -height / (yMax - yMin)).get();
   return vectors.map(p => vec.transform(p, transformToPx));
 }
+function dimensionsToPixels(dimens, graphState) {
+  const {
+    range,
+    width,
+    height
+  } = graphState;
+  const [[xMin, xMax], [yMin, yMax]] = range;
+  const transformToPx = matrixBuilder().scale(width / (xMax - xMin), height / (yMax - yMin)).get();
+  return dimens.map(d => vec.transform(d, transformToPx));
+}
 
 // When converting points, we translate so the pixel point ends up in the right location.
 // This is because points are specific locations on graphs, unlike vectors.
@@ -28512,6 +28522,10 @@ const useTransformVectorsToPixels = (...vectors) => {
   const graphState = useGraphConfig();
   return vectorsToPixels(vectors, graphState);
 };
+const useTransformDimensionsToPixels = (...dimens) => {
+  const graphState = useGraphConfig();
+  return dimensionsToPixels(dimens, graphState);
+};
 
 function AxisLabels() {
   const {
@@ -28749,33 +28763,29 @@ function calculateAngleInDegrees([x, y]) {
  */
 const getIntersectionOfRayWithBox = (initialPoint, throughPoint, box) => {
   const [[xMin, xMax], [yMin, yMax]] = box;
-  const [aX, aY] = throughPoint;
-  const [bX, bY] = initialPoint;
+  const [aX, aY] = initialPoint;
+  const [bX, bY] = throughPoint;
   const yDiff = bY - aY;
   const xDiff = bX - aX;
   const slope = yDiff / xDiff;
-  const yAtXMin = slope * (xMin - aX) + aY;
-  const yAtXMax = slope * (xMax - aX) + aY;
-  const xAtYMin = (yMin - aY) / slope + aX;
-  const xAtYMax = (yMax - aY) / slope + aX;
-
-  // clock analogy to describe quadrants
+  const inverseSlope = 1 / slope;
+  const xExtreme = xDiff < 0 ? xMin : xMax;
+  const yExtreme = yDiff < 0 ? yMin : yMax;
+  const yAtXExtreme = aY + (xExtreme - aX) * slope;
+  const xAtYExtreme = aX + (yExtreme - aY) * inverseSlope;
   switch (true) {
-    // 12 o'clock to 2:59
-    case yDiff > 0 && xDiff >= 0:
-      return xAtYMax > xMax ? [xMax, yAtXMax] : [xAtYMax, yMax];
-    // 3 o'clock to 5:59
-    case yDiff <= 0 && xDiff > 0:
-      // xAtYMin evaluates to -Infinity here, so we use absolute value
-      return Math.abs(xAtYMin) > xMax ? [xMax, yAtXMax] : [xAtYMin, yMin];
-    // 9 o'clock to 11:59
-    case yDiff >= 0 && xDiff < 0:
-      return xAtYMax < xMin ? [xMin, yAtXMin] : [xAtYMax, yMax];
-    // 6 o'clock to 8:59
-    case yDiff < 0 && xDiff <= 0:
-      return xAtYMin < xMin ? [xMin, yAtXMin] : [xAtYMin, yMin];
+    // does the ray exit the graph bounding box via the left or right edge?
+    case isBetween(yAtXExtreme, yMin, yMax):
+      return [xExtreme, yAtXExtreme];
+
+    // does the ray exit the graph bounding box via the top or bottom edge?
+    case isBetween(xAtYExtreme, xMin, xMax):
+      return [xAtYExtreme, yExtreme];
     default:
-      return [xMax, yAtXMax];
+      // This default case is only reachable if the input is invalid
+      // (initialPoint is outside the graph bounds, or initialPoint and
+      // throughPoint are the same).
+      return [0, 0];
   }
 };
 const getLines = points => {
@@ -28784,6 +28794,9 @@ const getLines = points => {
     return [point, next];
   });
 };
+function isBetween(x, low, high) {
+  return x >= low && x <= high;
+}
 
 function SVGLine(props) {
   const {
@@ -28836,15 +28849,15 @@ const LockedLine = props => {
     lineStyle,
     kind,
     points,
-    showStartPoint,
-    showEndPoint,
+    showPoint1,
+    showPoint2,
     range
   } = props;
   const [point1, point2] = points;
   let line;
   if (kind === "ray") {
     // Rays extend to the end of the graph in one direction.
-    const extendedPoint = getIntersectionOfRayWithBox(point2.coord, point1.coord, range);
+    const extendedPoint = getIntersectionOfRayWithBox(point1.coord, point2.coord, range);
     line = /*#__PURE__*/React.createElement(Vector, {
       tail: point1.coord,
       tip: extendedPoint,
@@ -28854,8 +28867,8 @@ const LockedLine = props => {
       }
     });
   } else {
-    const LineType = kind === "segment" ? Line$3.Segment : Line$3.ThroughPoints;
-    let arrowTip = kind === "segment" ? point2.coord : getIntersectionOfRayWithBox(point2.coord, point1.coord, range);
+    const LineType = kind === "segment" ? Line$4.Segment : Line$4.ThroughPoints;
+    let arrowTip = kind === "segment" ? point2.coord : getIntersectionOfRayWithBox(point1.coord, point2.coord, range);
     const direction = vec.sub(point2.coord, point1.coord);
     let angle = calculateAngleInDegrees(direction);
     const startArrowHead = kind !== "segment" && /*#__PURE__*/React.createElement(Arrowhead, {
@@ -28863,7 +28876,7 @@ const LockedLine = props => {
       tip: arrowTip,
       color: lockedFigureColors[color$1]
     });
-    arrowTip = kind === "segment" ? point1.coord : getIntersectionOfRayWithBox(point1.coord, point2.coord, range);
+    arrowTip = kind === "segment" ? point1.coord : getIntersectionOfRayWithBox(point2.coord, point1.coord, range);
     angle = angle > 180 ? angle - 180 : angle + 180;
     const endArrowHead = kind !== "segment" && /*#__PURE__*/React.createElement(Arrowhead, {
       angle: angle,
@@ -28879,7 +28892,7 @@ const LockedLine = props => {
   }
   return /*#__PURE__*/React.createElement("g", {
     className: kind === "ray" ? "locked-ray" : "locked-line"
-  }, line, showStartPoint && /*#__PURE__*/React.createElement(Point$2, {
+  }, line, showPoint1 && /*#__PURE__*/React.createElement(Point$2, {
     x: point1.coord[0],
     y: point1.coord[1],
     svgCircleProps: {
@@ -28889,7 +28902,7 @@ const LockedLine = props => {
         strokeWidth: spacing.xxxxSmall_2
       }
     }
-  }), showEndPoint && /*#__PURE__*/React.createElement(Point$2, {
+  }), showPoint2 && /*#__PURE__*/React.createElement(Point$2, {
     x: point2.coord[0],
     y: point2.coord[1],
     svgCircleProps: {
@@ -29149,9 +29162,10 @@ function tabIndex(config) {
   return undefined;
 }
 
-const Segment = props => {
+const MovableLine = props => {
   const {
-    onMoveLine,
+    onMoveLine = () => {},
+    onMovePoint = () => {},
     color,
     points: [start, end],
     extend
@@ -29171,18 +29185,19 @@ const Segment = props => {
   const {
     visiblePoint: visiblePoint1,
     focusableHandle: focusableHandle1
-  } = useControlPoint(start, color, p => props.onMovePoint(0, p));
+  } = useControlPoint(start, color, p => onMovePoint(0, p));
   const {
     visiblePoint: visiblePoint2,
     focusableHandle: focusableHandle2
-  } = useControlPoint(end, color, p => props.onMovePoint(1, p));
-  return /*#__PURE__*/React.createElement(React.Fragment, null, focusableHandle1, /*#__PURE__*/React.createElement(MovableLine, {
+  } = useControlPoint(end, color, p => onMovePoint(1, p));
+  const line = /*#__PURE__*/React.createElement(Line$1, {
     start: start,
     end: end,
     stroke: color,
     extend: extend,
     onMove: onMoveLine
-  }), focusableHandle2, visiblePoint1, visiblePoint2);
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, focusableHandle1, line, focusableHandle2, visiblePoint1, visiblePoint2);
 };
 function useControlPoint(point, color, onMovePoint) {
   const {
@@ -29228,7 +29243,7 @@ function useControlPoint(point, color, onMovePoint) {
   };
 }
 const defaultStroke = "var(--movable-line-stroke-color)";
-const MovableLine = props => {
+const Line$1 = props => {
   const {
     start,
     end,
@@ -29236,29 +29251,29 @@ const MovableLine = props => {
     extend,
     stroke = defaultStroke
   } = props;
-  const midpoint = vec.midpoint(start, end);
   const [startPtPx, endPtPx] = useTransformVectorsToPixels(start, end);
   const {
     range,
-    graphDimensionsInPixels
+    graphDimensionsInPixels,
+    snapStep
   } = useGraphConfig();
   let startExtend = undefined;
   let endExtend = undefined;
   if (extend) {
     const trimmedRange = trimRange(range, graphDimensionsInPixels);
-    startExtend = extend.start ? getIntersectionOfRayWithBox(start, end, trimmedRange) : undefined;
-    endExtend = extend.end ? getIntersectionOfRayWithBox(end, start, trimmedRange) : undefined;
+    startExtend = extend.start ? getIntersectionOfRayWithBox(end, start, trimmedRange) : undefined;
+    endExtend = extend.end ? getIntersectionOfRayWithBox(start, end, trimmedRange) : undefined;
   }
   const line = useRef(null);
   const {
     dragging
   } = useMovable({
     gestureTarget: line,
-    point: midpoint,
+    point: start,
     onMove: newPoint => {
-      onMove(vec.sub(newPoint, midpoint));
+      onMove(vec.sub(newPoint, start));
     },
-    constrain: p => p
+    constrain: p => snap(snapStep, p)
   });
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("g", {
     ref: line,
@@ -29331,7 +29346,7 @@ const SegmentGraph = props => {
   const {
     coords: segments
   } = props.graphState;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, segments == null ? void 0 : segments.map((segment, i) => /*#__PURE__*/React.createElement(Segment, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, segments == null ? void 0 : segments.map((segment, i) => /*#__PURE__*/React.createElement(MovableLine, {
     key: i,
     points: segment,
     onMoveLine: delta => {
@@ -29351,7 +29366,7 @@ const LinearGraph = props => {
     coords: lines
   } = props.graphState;
   const colors = ["var(--movable-line-stroke-color)", "var(--mafs-violet)"];
-  return /*#__PURE__*/React.createElement(React.Fragment, null, lines == null ? void 0 : lines.map((line, i) => /*#__PURE__*/React.createElement(Segment, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, lines == null ? void 0 : lines.map((line, i) => /*#__PURE__*/React.createElement(MovableLine, {
     key: i,
     points: line,
     onMoveLine: delta => {
@@ -29375,7 +29390,7 @@ const RayGraph = props => {
   } = props.graphState;
   const handleMoveLine = delta => dispatch(moveLine(0, delta));
   const handleMovePoint = (pointIndex, newPoint) => dispatch(moveControlPoint(pointIndex, newPoint, 0));
-  return /*#__PURE__*/React.createElement(Segment
+  return /*#__PURE__*/React.createElement(MovableLine
   // a ray only has one line
   , {
     points: lines[0],
@@ -29527,7 +29542,7 @@ const isRightAngle = angle => Math.abs(angle - Math.PI / 2) < 0.01;
  */
 const shouldDrawArcOutside = (midpoint, vertex, range, polygonLines) => {
   // Create a ray from the midpoint (inside angle) to the edge of the range
-  const rangeIntersectionPoint = getIntersectionOfRayWithBox(vertex, midpoint, range);
+  const rangeIntersectionPoint = getIntersectionOfRayWithBox(midpoint, vertex, range);
   let lineIntersectionCount = 0;
   polygonLines.forEach(line => linesIntersect([vertex, rangeIntersectionPoint], line) && lineIntersectionCount++);
 
@@ -29668,14 +29683,12 @@ function initializeGraphState(params) {
     graph,
     step,
     snapStep,
-    range,
-    markings
+    range
   } = params;
   const shared = {
     hasBeenInteractedWith: false,
     range,
-    snapStep,
-    markings
+    snapStep
   };
   switch (graph.type) {
     case "segment":
@@ -29911,16 +29924,10 @@ function CircleGraph(props) {
     center,
     radiusPoint
   } = graphState;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Circle$1, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MovableCircle, {
     center: center,
     radius: getRadius(graphState),
-    fillOpacity: 0,
-    color: color.blue
-  }), /*#__PURE__*/React.createElement(StyledMovablePoint, {
-    point: center,
-    onMove: newCenter => {
-      dispatch(moveCenter(newCenter));
-    }
+    onMove: newCenter => dispatch(moveCenter(newCenter))
   }), /*#__PURE__*/React.createElement(StyledMovablePoint, {
     point: radiusPoint,
     onMove: newRadiusPoint => {
@@ -29928,6 +29935,80 @@ function CircleGraph(props) {
     }
   }));
 }
+function MovableCircle(props) {
+  const {
+    center,
+    radius,
+    onMove
+  } = props;
+  const {
+    snapStep
+  } = useGraphConfig();
+  const draggableRef = useRef(null);
+  const {
+    dragging
+  } = useMovable({
+    gestureTarget: draggableRef,
+    point: center,
+    onMove,
+    constrain: p => snap(snapStep, p)
+  });
+  const [centerPx] = useTransformVectorsToPixels(center);
+  const [radiiPx] = useTransformDimensionsToPixels([radius, radius]);
+  return /*#__PURE__*/React.createElement("g", {
+    ref: draggableRef,
+    tabIndex: 0,
+    className: `movable-circle ${dragging ? "movable-circle--dragging" : ""}`
+  }, /*#__PURE__*/React.createElement("ellipse", {
+    className: "focus-ring",
+    cx: centerPx[0],
+    cy: centerPx[1],
+    rx: radiiPx[0] + 3,
+    ry: radiiPx[1] + 3
+  }), /*#__PURE__*/React.createElement(Circle$1, {
+    center: center,
+    radius: radius,
+    fillOpacity: 0,
+    color: color.blue
+  }), /*#__PURE__*/React.createElement(DragHandle, {
+    center: center
+  }));
+}
+const dragHandleDimensions = [24, 14];
+const dragHandleDotPositions = crossProduct([-4.4, 0, 4.4], [-2.1, 2.1]);
+function DragHandle(props) {
+  const {
+    center
+  } = props;
+  const cornerRadius = Math.min(...dragHandleDimensions) / 2;
+  const [centerPx] = useTransformVectorsToPixels(center);
+  const topLeft = vec.sub(centerPx, vec.scale(dragHandleDimensions, 0.5));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("rect", {
+    className: "movable-circle-handle",
+    x: topLeft[0],
+    y: topLeft[1],
+    width: dragHandleDimensions[0],
+    height: dragHandleDimensions[1],
+    rx: cornerRadius,
+    ry: cornerRadius
+  }), dragHandleDotPositions.map(offsetPx => {
+    const [xPx, yPx] = vec.add(offsetPx, centerPx);
+    return /*#__PURE__*/React.createElement("circle", {
+      className: "movable-circle-handle-dot",
+      cx: xPx,
+      cy: yPx
+    });
+  }));
+}
+function crossProduct(as, bs) {
+  const result = [];
+  for (const a of as) {
+    for (const b of bs) {
+      result.push([a, b]);
+    }
+  }
+  return result;
+}
 
 function PointGraph(props) {
   const {
@@ -31099,35 +31180,22 @@ function mafsStateToInteractiveGraph(state) {
   return _extends({}, state);
 }
 const StatefulMafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    onChange
+  } = props;
   const [state, dispatch] = React.useReducer(interactiveGraphReducer, props, initializeGraphState);
   useImperativeHandle(ref, () => ({
     getUserInput: () => getGradableGraph(state, props.graph)
   }));
-  function onChange(next) {
-    props.onChange(mafsStateToInteractiveGraph(next));
-  }
-  return /*#__PURE__*/React.createElement(MafsGraph, _extends({}, props, {
-    state: state,
-    dispatch: dispatch,
-    onChange: onChange
-  }));
-});
-const MafsGraph = props => {
-  const {
-    state,
-    dispatch,
-    labels
-  } = props;
-  const [width, height] = props.box;
   const prevState = useRef(state);
   useEffect(() => {
     if (prevState.current !== state) {
-      props.onChange({
+      onChange(mafsStateToInteractiveGraph({
         graph: state
-      });
+      }));
     }
     prevState.current = state;
-  }, [props, state]);
+  }, [onChange, state]);
 
   // Destructuring first to keep useEffect from making excess calls
   const [xSnap, ySnap] = props.snapStep;
@@ -31140,6 +31208,18 @@ const MafsGraph = props => {
   useEffect(() => {
     dispatch(changeRange([[xMinRange, xMaxRange], [yMinRange, yMaxRange]]));
   }, [dispatch, xMinRange, xMaxRange, yMinRange, yMaxRange]);
+  return /*#__PURE__*/React.createElement(MafsGraph, _extends({}, props, {
+    state: state,
+    dispatch: dispatch
+  }));
+});
+const MafsGraph = props => {
+  const {
+    state,
+    dispatch,
+    labels
+  } = props;
+  const [width, height] = props.box;
   return /*#__PURE__*/React.createElement(GraphConfigContext.Provider, {
     value: {
       range: state.range,
@@ -31172,8 +31252,8 @@ const MafsGraph = props => {
   }, props.markings === "graph" && /*#__PURE__*/React.createElement(AxisLabels, null), /*#__PURE__*/React.createElement(Mafs, {
     preserveAspectRatio: false,
     viewBox: {
-      x: props.range[0],
-      y: props.range[1],
+      x: state.range[0],
+      y: state.range[1],
       padding: 0
     },
     pan: false,
@@ -31183,12 +31263,12 @@ const MafsGraph = props => {
   }, /*#__PURE__*/React.createElement(SvgDefs, null), /*#__PURE__*/React.createElement(Grid, {
     tickStep: props.step,
     gridStep: props.gridStep,
-    range: props.range,
+    range: state.range,
     containerSizeClass: props.containerSizeClass,
     markings: props.markings
   }), props.lockedFigures && /*#__PURE__*/React.createElement(GraphLockedLayer, {
     lockedFigures: props.lockedFigures,
-    range: props.range
+    range: state.range
   }), renderGraph({
     state,
     dispatch
@@ -43289,7 +43369,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 = "22.4.2";
+const libVersion = "22.5.1";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {