@khanacademy/perseus 22.3.0 → 22.4.1

package/dist/es/index.js

@@ -6,7 +6,7 @@ import { View, RenderStateRoot, useUniqueIdWithMock, UniqueIDProvider, Text as T
 import Tooltip$1 from '@khanacademy/wonder-blocks-tooltip';
 import classNames from 'classnames';
 import * as React from 'react';
-import React__default, { useContext, useState, useEffect, useRef, createContext, useImperativeHandle } from 'react';
+import React__default, { useContext, useState, useEffect, useRef, createContext, forwardRef, 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';
@@ -26,10 +26,10 @@ import Button from '@khanacademy/wonder-blocks-button';
 import { Strut } from '@khanacademy/wonder-blocks-layout';
 import Banner from '@khanacademy/wonder-blocks-banner';
 import { OptionItem, SingleSelect, MultiSelect } from '@khanacademy/wonder-blocks-dropdown';
-import caretDown from '@phosphor-icons/core/assets/regular/caret-down.svg';
-import caretUp from '@phosphor-icons/core/assets/regular/caret-up.svg';
+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, Coordinates, Mafs } from 'mafs';
+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 { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import { Body, LabelSmall, LabelMedium } from '@khanacademy/wonder-blocks-typography';
 import questionIcon from '@phosphor-icons/core/regular/question.svg';
@@ -341,7 +341,7 @@ class InnerMathInput extends React.Component {
           locale
         } = this.context;
         // Initialize MathQuill.MathField instance
-        this.__mathField = createMathField(this.__mathFieldWrapperRef, this.props.mathInputStrings, baseConfig => _extends({}, baseConfig, {
+        this.__mathField = createMathField(this.__mathFieldWrapperRef, locale, this.props.mathInputStrings, baseConfig => _extends({}, baseConfig, {
           handlers: {
             edit: debounce(mathField => {
               // This handler is guaranteed to be called on change, but
@@ -28726,6 +28726,7 @@ function Arrowhead(props) {
   var _props$color;
   const [point] = useTransformVectorsToPixels(props.tip);
   return /*#__PURE__*/React.createElement("g", {
+    className: "interactive-graph-arrowhead",
     transform: `translate(${point[0]} ${point[1]}) rotate(${-props.angle})`
   }, /*#__PURE__*/React.createElement("g", {
     transform: "translate(-1.5)"
@@ -28740,49 +28741,7 @@ function Arrowhead(props) {
   })));
 }
 
-function SVGLine(props) {
-  const {
-    start,
-    end,
-    style,
-    className,
-    testId
-  } = props;
-  return /*#__PURE__*/React.createElement("line", {
-    x1: start[0],
-    y1: start[1],
-    x2: end[0],
-    y2: end[1],
-    style: style,
-    className: className,
-    "data-testid": testId
-  });
-}
-
-function Vector(props) {
-  const {
-    tail,
-    tip,
-    color,
-    style
-  } = props;
-  const [tailPx, tipPx] = useTransformVectorsToPixels(tail, tip);
-  const direction = vec.sub(tip, tail);
-  return /*#__PURE__*/React.createElement("g", {
-    style: {
-      stroke: color,
-      strokeWidth: 2
-    }
-  }, /*#__PURE__*/React.createElement(SVGLine, {
-    start: tailPx,
-    end: tipPx,
-    style: style
-  }), /*#__PURE__*/React.createElement(Arrowhead, {
-    tip: tip,
-    angle: angleDegrees(direction)
-  }));
-}
-function angleDegrees([x, y]) {
+function calculateAngleInDegrees([x, y]) {
   return Math.atan2(y, x) * 180 / Math.PI;
 }
 
@@ -28824,10 +28783,57 @@ const getIntersectionOfRayWithBox = (initialPoint, throughPoint, box) => {
       return [xMax, yAtXMax];
   }
 };
-const getLines = points => points.map((point, i) => {
-  const next = points[(i + 1) % points.length];
-  return [point, next];
-});
+const getLines = points => {
+  return points.map((point, i) => {
+    const next = points[(i + 1) % points.length];
+    return [point, next];
+  });
+};
+
+function SVGLine(props) {
+  const {
+    start,
+    end,
+    style,
+    className,
+    testId
+  } = props;
+  return /*#__PURE__*/React.createElement("line", {
+    x1: start[0],
+    y1: start[1],
+    x2: end[0],
+    y2: end[1],
+    style: style,
+    className: className,
+    "data-testid": testId
+  });
+}
+
+function Vector(props) {
+  const {
+    tail,
+    tip,
+    color,
+    style
+  } = props;
+  const [tailPx, tipPx] = useTransformVectorsToPixels(tail, tip);
+  const direction = vec.sub(tip, tail);
+  const angle = calculateAngleInDegrees(direction);
+  return /*#__PURE__*/React.createElement("g", {
+    style: {
+      stroke: color,
+      strokeWidth: 2
+    }
+  }, /*#__PURE__*/React.createElement(SVGLine, {
+    start: tailPx,
+    end: tipPx,
+    style: style
+  }), /*#__PURE__*/React.createElement(Arrowhead, {
+    angle: angle,
+    tip: tip,
+    color: color
+  }));
+}
 
 const LockedLine = props => {
   const {
@@ -28843,27 +28849,38 @@ const LockedLine = props => {
   let line;
   if (kind === "ray") {
     // Rays extend to the end of the graph in one direction.
-    const endExtend = getIntersectionOfRayWithBox(point2.coord, point1.coord, range);
+    const extendedPoint = getIntersectionOfRayWithBox(point2.coord, point1.coord, range);
     line = /*#__PURE__*/React.createElement(Vector, {
       tail: point1.coord,
-      tip: endExtend,
+      tip: extendedPoint,
       color: lockedFigureColors[color$1],
       style: {
-        strokeDasharray: lineStyle === "dashed" ?
-        // TODO(lems-1930): Uncomment this line when the
-        // dashed style is updated in Mafs.
-        // ? "var(--mafs-line-stroke-dash-style)"
-        "4, 3" : undefined
+        strokeDasharray: lineStyle === "dashed" ? "var(--mafs-line-stroke-dash-style)" : undefined
       }
     });
   } else {
     const LineType = kind === "segment" ? Line$3.Segment : Line$3.ThroughPoints;
-    line = /*#__PURE__*/React.createElement(LineType, {
+    let arrowTip = kind === "segment" ? point2.coord : getIntersectionOfRayWithBox(point2.coord, point1.coord, range);
+    const direction = vec.sub(point2.coord, point1.coord);
+    let angle = calculateAngleInDegrees(direction);
+    const startArrowHead = kind !== "segment" && /*#__PURE__*/React.createElement(Arrowhead, {
+      angle: angle,
+      tip: arrowTip,
+      color: lockedFigureColors[color$1]
+    });
+    arrowTip = kind === "segment" ? point1.coord : getIntersectionOfRayWithBox(point1.coord, point2.coord, range);
+    angle = angle > 180 ? angle - 180 : angle + 180;
+    const endArrowHead = kind !== "segment" && /*#__PURE__*/React.createElement(Arrowhead, {
+      angle: angle,
+      tip: arrowTip,
+      color: lockedFigureColors[color$1]
+    });
+    line = /*#__PURE__*/React.createElement(React.Fragment, null, startArrowHead, /*#__PURE__*/React.createElement(LineType, {
       point1: point1.coord,
       point2: point2.coord,
       color: lockedFigureColors[color$1],
       style: lineStyle
-    });
+    }), endArrowHead);
   }
   return /*#__PURE__*/React.createElement("g", {
     className: kind === "ray" ? "locked-ray" : "locked-line"
@@ -28969,6 +28986,20 @@ function movePoint(index, destination) {
     destination
   };
 }
+const MOVE_CENTER = "move-center";
+function moveCenter(destination) {
+  return {
+    type: MOVE_CENTER,
+    destination
+  };
+}
+const MOVE_RADIUS_POINT = "MOVE_RADIUS_POINT";
+function moveRadiusPoint(destination) {
+  return {
+    type: MOVE_RADIUS_POINT,
+    destination
+  };
+}
 const CHANGE_SNAP_STEP = "change-snap-step";
 function changeSnapStep(snapStep) {
   return {
@@ -29015,6 +29046,192 @@ 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__*/forwardRef((props, hitboxRef) => {
+  var _Object$entries$find$, _Object$entries$find;
+  const {
+    range,
+    markings,
+    showTooltips
+  } = useGraphConfig();
+  const {
+    point,
+    color: color$1 = 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$find$ = (_Object$entries$find = Object.entries(color).find(([_, value]) => value === color$1)) == null ? void 0 : _Object$entries$find[0]) != null ? _Object$entries$find$ : "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.createElement("g", null, /*#__PURE__*/React.createElement("line", {
+    x1: verticalStartX,
+    y1: y,
+    x2: verticalEndX,
+    y2: y,
+    stroke: color$1
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: x,
+    y1: horizontalStartY,
+    x2: x,
+    y2: horizontalEndY,
+    stroke: color$1
+  }));
+  const svgForPoint = /*#__PURE__*/React.createElement("g", {
+    ref: hitboxRef,
+    className: pointClasses,
+    style: {
+      "--movable-point-color": color$1
+    },
+    "data-testid": "movable-point",
+    tabIndex: tabIndex(focusBehavior)
+  }, /*#__PURE__*/React.createElement("circle", {
+    className: "movable-point-hitbox",
+    r: hitboxSizePx / 2,
+    cx: x,
+    cy: y
+  }), /*#__PURE__*/React.createElement("circle", {
+    className: "movable-point-halo",
+    cx: x,
+    cy: y
+  }), /*#__PURE__*/React.createElement("circle", {
+    className: "movable-point-ring",
+    cx: x,
+    cy: y
+  }), /*#__PURE__*/React.createElement("circle", {
+    className: "movable-point-focus-outline",
+    cx: x,
+    cy: y
+  }), /*#__PURE__*/React.createElement("circle", {
+    className: "movable-point-center",
+    cx: x,
+    cy: y,
+    style: {
+      fill: color$1
+    },
+    "data-testid": "movable-point__center"
+  }));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, showHairlines && hairlines, showTooltips ? /*#__PURE__*/React.createElement(Tooltip$1, {
+    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.createElement(React.Fragment, null, focusableHandle1, /*#__PURE__*/React.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] = useState(false);
+  const keyboardHandleRef = useRef(null);
+  useMovable({
+    gestureTarget: keyboardHandleRef,
+    point,
+    onMove: onMovePoint,
+    constrain: p => snap(snapStep, p)
+  });
+  const visiblePointRef = useRef(null);
+  const {
+    dragging
+  } = useMovable({
+    gestureTarget: visiblePointRef,
+    point,
+    onMove: onMovePoint,
+    constrain: p => snap(snapStep, p)
+  });
+  const focusableHandle = /*#__PURE__*/React.createElement("g", {
+    "data-testid": "movable-point__focusable-handle",
+    tabIndex: 0,
+    ref: keyboardHandleRef,
+    onFocus: () => setFocused(true),
+    onBlur: () => setFocused(false)
+  });
+  const visiblePoint = /*#__PURE__*/React.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 {
@@ -29027,12 +29244,13 @@ const MovableLine = props => {
   const midpoint = 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;
   }
@@ -29111,101 +29329,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 => {
-  var _Object$entries$find$, _Object$entries$find;
-  const {
-    range,
-    snapStep,
-    markings,
-    showTooltips
-  } = useGraphConfig();
-  const hitboxRef = useRef(null);
-  const {
-    point,
-    onMove,
-    color: color$1 = 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$find$ = (_Object$entries$find = Object.entries(color).find(([_, value]) => value === color$1)) == null ? void 0 : _Object$entries$find[0]) != null ? _Object$entries$find$ : "blue";
-  const {
-    dragging
-  } = 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.createElement("g", null, /*#__PURE__*/React.createElement("line", {
-    x1: verticalStartX,
-    y1: y,
-    x2: verticalEndX,
-    y2: y,
-    stroke: color$1
-  }), /*#__PURE__*/React.createElement("line", {
-    x1: x,
-    y1: horizontalStartY,
-    x2: x,
-    y2: horizontalEndY,
-    stroke: color$1
-  }));
-  const svgForPoint = /*#__PURE__*/React.createElement("g", {
-    ref: hitboxRef,
-    className: pointClasses,
-    tabIndex: 0,
-    style: {
-      "--movable-point-color": color$1
-    },
-    "data-testid": "movable-point"
-  }, /*#__PURE__*/React.createElement("circle", {
-    className: "movable-point-hitbox",
-    r: hitboxSizePx / 2,
-    cx: x,
-    cy: y
-  }), /*#__PURE__*/React.createElement("circle", {
-    className: "movable-point-halo",
-    cx: x,
-    cy: y
-  }), /*#__PURE__*/React.createElement("circle", {
-    className: "movable-point-ring",
-    cx: x,
-    cy: y
-  }), /*#__PURE__*/React.createElement("circle", {
-    className: "movable-point-focus-outline",
-    cx: x,
-    cy: y
-  }), /*#__PURE__*/React.createElement("circle", {
-    className: "movable-point-center",
-    cx: x,
-    cy: y,
-    style: {
-      fill: color$1
-    },
-    "data-testid": "movable-point__center"
-  }));
-  return /*#__PURE__*/React.createElement(React.Fragment, null, showHairlines && hairlines, showTooltips ? /*#__PURE__*/React.createElement(Tooltip$1, {
-    autoUpdate: true,
-    backgroundColor: wbColorName,
-    content: `(${point[0]}, ${point[1]})`,
-    contentStyle: {
-      color: "white"
-    }
-  }, svgForPoint) : svgForPoint);
-};
-
 const SegmentGraph = props => {
   const {
     dispatch
@@ -29213,7 +29336,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(SegmentView, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, segments == null ? void 0 : segments.map((segment, i) => /*#__PURE__*/React.createElement(Segment, {
     key: i,
     points: segment,
     onMoveLine: delta => {
@@ -29224,27 +29347,6 @@ const SegmentGraph = props => {
     }
   })));
 };
-const SegmentView = props => {
-  const {
-    onMoveLine: onMoveSegment,
-    points: [start, end]
-  } = props;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MovableLine, {
-    start: start,
-    end: end,
-    onMove: onMoveSegment
-  }), /*#__PURE__*/React.createElement(StyledMovablePoint, {
-    point: start,
-    onMove: newPoint => {
-      props.onMovePoint(0, newPoint);
-    }
-  }), /*#__PURE__*/React.createElement(StyledMovablePoint, {
-    point: end,
-    onMove: newPoint => {
-      props.onMovePoint(1, newPoint);
-    }
-  }));
-};
 
 const LinearGraph = props => {
   const {
@@ -29254,49 +29356,19 @@ 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(LineView, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, lines == null ? void 0 : lines.map((line, i) => /*#__PURE__*/React.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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MovableLine, {
-    start: start,
-    end: end,
-    onMove: onMoveLine,
     extend: {
       start: true,
-      end: true,
-      range
+      end: true
     },
-    stroke: stroke
-  }), /*#__PURE__*/React.createElement(StyledMovablePoint, {
-    point: start,
-    onMove: newPoint => {
-      onMovePoint(0, newPoint);
-    },
-    color: stroke
-  }), /*#__PURE__*/React.createElement(StyledMovablePoint, {
-    point: end,
-    onMove: newPoint => {
-      onMovePoint(1, newPoint);
-    },
-    color: stroke
-  }));
+    onMovePoint: (endpointIndex, destination) => dispatch(moveControlPoint(endpointIndex, destination, i)),
+    color: colors[i]
+  })));
 };
 
 const RayGraph = props => {
@@ -29304,30 +29376,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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MovableLine, {
-    start: start,
-    end: end,
-    onMove: handleMoveLine,
+  const handleMovePoint = (pointIndex, newPoint) => dispatch(moveControlPoint(pointIndex, newPoint, 0));
+  return /*#__PURE__*/React.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.createElement(StyledMovablePoint, {
-    point: start,
-    onMove: newPoint => handleMovePoint(newPoint, 0)
-  }), /*#__PURE__*/React.createElement(StyledMovablePoint, {
-    point: end,
-    onMove: newPoint => handleMovePoint(newPoint, 1)
-  }));
+  });
 };
 
 /**
@@ -29491,8 +29554,37 @@ const linesIntersect = ([[a, b], [c, d]], [[p, q], [r, s]]) => {
 };
 const isEven = n => n % 2 === 0;
 
+const StyledMovablePoint = props => {
+  const {
+    snapStep
+  } = useGraphConfig();
+  const elementRef = useRef(null);
+  const {
+    point,
+    onMove,
+    color: color$1 = color.blue
+  } = props;
+  const {
+    dragging
+  } = useMovable({
+    gestureTarget: elementRef,
+    point,
+    onMove,
+    constrain: p => snap(snapStep, p)
+  });
+  return /*#__PURE__*/React.createElement(MovablePointView, {
+    ref: elementRef,
+    point: point,
+    color: color$1,
+    dragging: dragging,
+    focusBehavior: {
+      type: "uncontrolled",
+      tabIndex: 0
+    }
+  });
+};
+
 const PolygonGraph = props => {
-  var _points$length;
   const [focused, setFocused] = React.useState(false);
   const [hovered, setHovered] = React.useState(false);
   const {
@@ -29505,17 +29597,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 != null ? coords : [[0, 0]];
-  const pointsSum = points.reduce((acc, point) => vec.add(acc, point), [0, 0]);
-  const midpoint = pointsSum && vec.scale(pointsSum, 1 / ((_points$length = points.length) != null ? _points$length : 1));
   const ref = React.useRef(null);
+  const dragReferencePoint = points[0];
   const {
     dragging
   } = useMovable({
     gestureTarget: ref,
-    point: midpoint,
+    point: dragReferencePoint,
     onMove: newPoint => {
-      const delta = vec.sub(newPoint, midpoint);
+      const delta = vec.sub(newPoint, dragReferencePoint);
       dispatch(moveAll(delta));
     },
     constrain: p => snap(snapStep, p)
@@ -29574,6 +29668,272 @@ const PolygonGraph = props => {
   })));
 };
 
+function initializeGraphState(params) {
+  const {
+    graph,
+    step,
+    snapStep,
+    range,
+    markings
+  } = params;
+  const shared = {
+    hasBeenInteractedWith: false,
+    range,
+    snapStep,
+    markings
+  };
+  switch (graph.type) {
+    case "segment":
+      return _extends({}, shared, {
+        type: "segment",
+        coords: getDefaultSegments({
+          graph,
+          step,
+          range
+        })
+      });
+    case "linear":
+    case "linear-system":
+    case "ray":
+      return _extends({}, shared, {
+        type: graph.type,
+        // Linear and ray graphs have a single tuple of points, while a
+        // linear system has two tuples of points.
+        coords: getLineCoords({
+          graph,
+          range,
+          step
+        })
+      });
+    case "polygon":
+      return _extends({}, shared, {
+        type: "polygon",
+        showAngles: Boolean(graph.showAngles),
+        showSides: Boolean(graph.showSides),
+        coords: getPolygonCoords({
+          graph,
+          range,
+          step
+        })
+      });
+    case "point":
+      return _extends({}, shared, {
+        type: graph.type,
+        coords: getDefaultPoints({
+          graph,
+          step,
+          range
+        })
+      });
+    case "circle":
+      return _extends({}, shared, {
+        type: graph.type,
+        center: [0, 0],
+        radiusPoint: [1, 0]
+      });
+    case "angle":
+    case "sinusoid":
+    case "quadratic":
+      throw new Error("Mafs not yet implemented for graph type: " + graph.type);
+    default:
+      throw new UnreachableCaseError(graph);
+  }
+}
+const getDefaultPoints = ({
+  graph,
+  range,
+  step
+}) => {
+  var _graph$coords;
+  const numPoints = graph.numPoints || 1;
+  let coords = (_graph$coords = graph.coords) == null ? void 0 : _graph$coords.slice();
+  if (coords) {
+    return coords;
+  }
+  switch (numPoints) {
+    case 1:
+      // Back in the day, one point's coords were in graph.coord
+      coords = [graph.coord || [0, 0]];
+      break;
+    case 2:
+      coords = [[-5, 0], [5, 0]];
+      break;
+    case 3:
+      coords = [[-5, 0], [0, 0], [5, 0]];
+      break;
+    case 4:
+      coords = [[-6, 0], [-2, 0], [2, 0], [6, 0]];
+      break;
+    case 5:
+      coords = [[-6, 0], [-3, 0], [0, 0], [3, 0], [6, 0]];
+      break;
+    case 6:
+      coords = [[-5, 0], [-3, 0], [-1, 0], [1, 0], [3, 0], [5, 0]];
+      break;
+    default:
+      coords = [];
+      break;
+  }
+  // Transform coords from their -10 to 10 space to 0 to 1
+  // because of the old graph.coord, and also it's easier.
+  const newCoords = normalizeCoords(coords, [[-10, 10], [-10, 10]]);
+  return normalizePoints(range, step, newCoords);
+};
+
+// TS v4 doesn't narrow return types, while v5 does.
+// Instead of updating to v5, using generic type to relate input and output types.
+function getGradableGraph(state, initialGraph) {
+  if (!state.hasBeenInteractedWith) {
+    return _extends({}, initialGraph);
+  }
+  if (initialGraph.type === "linear-system" && state.type === "linear-system") {
+    return _extends({}, initialGraph, {
+      coords: state.coords
+    });
+  }
+  if (state.type === "segment" && initialGraph.type === "segment") {
+    return _extends({}, initialGraph, {
+      coords: state.coords
+    });
+  }
+  if (state.type === "linear" && initialGraph.type === "linear") {
+    return _extends({}, initialGraph, {
+      coords: state.coords[0]
+    });
+  }
+  if (state.type === "ray" && initialGraph.type === "ray") {
+    return _extends({}, initialGraph, {
+      coords: state.coords[0]
+    });
+  }
+  if (state.type === "polygon" && initialGraph.type === "polygon") {
+    return _extends({}, initialGraph, {
+      coords: state.coords
+    });
+  }
+  if (state.type === "point" && initialGraph.type === "point") {
+    return _extends({}, initialGraph, {
+      coords: state.coords
+    });
+  }
+  if (state.type === "circle" && initialGraph.type === "circle") {
+    return _extends({}, initialGraph, {
+      center: state.center,
+      radius: getRadius(state)
+    });
+  }
+  throw new Error("Mafs is not yet implemented for graph type: " + initialGraph.type);
+}
+const getDefaultSegments = ({
+  graph,
+  range,
+  step
+}) => {
+  const ys = n => {
+    switch (n) {
+      case 2:
+        return [5, -5];
+      case 3:
+        return [5, 0, -5];
+      case 4:
+        return [6, 2, -2, -6];
+      case 5:
+        return [6, 3, 0, -3, -6];
+      case 6:
+        return [5, 3, 1, -1, -3, -5];
+      default:
+        return [5];
+    }
+  };
+  const defaultRange = [[-10, 10], [-10, 10]];
+  return ys(graph.numSegments).map(y => {
+    let endpoints = [[-5, y], [5, y]];
+    endpoints = normalizeCoords(endpoints, defaultRange);
+    endpoints = normalizePoints(range, step, endpoints);
+    return endpoints;
+  });
+};
+const defaultLinearCoords = [[[0.25, 0.75], [0.75, 0.75]], [[0.25, 0.25], [0.75, 0.25]]];
+const getLineCoords = ({
+  graph,
+  range,
+  step
+}) => {
+  var _graph$coords2;
+  return (
+    // Return two lines for a linear system, one for a ray or linear
+    ((_graph$coords2 = graph.coords) != null ? _graph$coords2 : graph.type === "linear-system") ? defaultLinearCoords.map(collinear => normalizePoints(range, step, collinear)) : [normalizePoints(range, step, defaultLinearCoords[0])]
+  );
+};
+const getPolygonCoords = ({
+  graph,
+  range,
+  step
+}) => {
+  var _graph$coords3;
+  let coords = (_graph$coords3 = graph.coords) == null ? void 0 : _graph$coords3.slice();
+  if (coords) {
+    return coords;
+  }
+  const n = graph.numSides || 3;
+  if (n === "unlimited") {
+    coords = [];
+  } else {
+    const angle = 2 * Math.PI / n;
+    const offset = (1 / n - 1 / 2) * Math.PI;
+
+    // TODO(alex): Generalize this to more than just triangles so that
+    // all polygons have whole number side lengths if snapping to sides
+    const radius = graph.snapTo === "sides" ? Math.sqrt(3) / 3 * 7 : 4;
+
+    // Generate coords of a regular polygon with n sides
+    coords = [...Array(n).keys()].map(i => [radius * Math.cos(i * angle + offset), radius * Math.sin(i * angle + offset)]);
+  }
+  coords = normalizeCoords(coords, [[-10, 10], [-10, 10]]);
+  const snapToGrid = !["angles", "sides"].includes(graph.snapTo || "");
+  coords = normalizePoints(range, step, coords, /* noSnap */!snapToGrid);
+  return coords;
+};
+
+/**
+ * determine radius of a circle graph
+ *
+ * @param graph - the graph object containing the circle
+ * @returns the radius of the circle
+ */
+function getRadius(graph) {
+  const [centerX, centerY] = graph.center;
+  const [edgeX, edgeY] = graph.radiusPoint;
+  return Math.sqrt(Math.pow(edgeX - centerX, 2) + Math.pow(edgeY - centerY, 2));
+}
+
+function CircleGraph(props) {
+  const {
+    dispatch,
+    graphState
+  } = props;
+  const {
+    center,
+    radiusPoint
+  } = graphState;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Circle$1, {
+    center: center,
+    radius: getRadius(graphState),
+    fillOpacity: 0,
+    color: color.blue
+  }), /*#__PURE__*/React.createElement(StyledMovablePoint, {
+    point: center,
+    onMove: newCenter => {
+      dispatch(moveCenter(newCenter));
+    }
+  }), /*#__PURE__*/React.createElement(StyledMovablePoint, {
+    point: radiusPoint,
+    onMove: newRadiusPoint => {
+      dispatch(moveRadiusPoint(newRadiusPoint));
+    }
+  }));
+}
+
 function PointGraph(props) {
   const {
     dispatch
@@ -30375,6 +30735,10 @@ function interactiveGraphReducer(state, action) {
       return doMoveAll(state, action);
     case MOVE_POINT:
       return doMovePoint(state, action);
+    case MOVE_CENTER:
+      return doMoveCenter(state, action);
+    case MOVE_RADIUS_POINT:
+      return doMoveRadiusPoint(state, action);
     case CHANGE_SNAP_STEP:
       return doChangeSnapStep(state, action);
     case CHANGE_RANGE:
@@ -30510,6 +30874,65 @@ function doMovePoint(state, action) {
       throw new Error("The movePoint action is only for point and polygon graphs");
   }
 }
+function doMoveCenter(state, action) {
+  switch (state.type) {
+    case "circle":
+      {
+        // Constrain the center of the circle to the chart range
+        const constrainedCenter = bound$1({
+          snapStep: state.snapStep,
+          range: state.range,
+          point: action.destination
+        });
+
+        // Reposition the radius point based on the new center
+        // (spread to make sure we're not going to  mutate anything)
+        const newRadiusPoint = [...vec.add(state.radiusPoint, vec.sub(constrainedCenter, state.center))];
+
+        // Try to position the radius handle in a visible spot
+        // if it otherwise would be off the chart
+        // ex: if the handle is on the right and we move the center
+        // to the rightmost position, move the handle to the left
+        const [xMin, xMax] = state.range[0];
+        const [radX] = newRadiusPoint;
+        if (radX < xMin || radX > xMax) {
+          const xJumpDist = (radX - constrainedCenter[0]) * 2;
+          const possibleNewX = radX - xJumpDist;
+          if (possibleNewX >= xMin && possibleNewX <= xMax) {
+            newRadiusPoint[0] = possibleNewX;
+          }
+        }
+        return _extends({}, state, {
+          hasBeenInteractedWith: true,
+          center: constrainedCenter,
+          radiusPoint: newRadiusPoint
+        });
+      }
+    default:
+      throw new Error("The doMoveCenter action is only for circle graphs");
+  }
+}
+function doMoveRadiusPoint(state, action) {
+  switch (state.type) {
+    case "circle":
+      {
+        const [xMin, xMax] = state.range[0];
+        const nextRadiusPoint = [
+        // Constrain to graph range
+        // The +0 is to convert -0 to +0
+        Math.min(Math.max(xMin, action.destination[0] + 0), xMax), state.center[1]];
+        if (_.isEqual(nextRadiusPoint, state.center)) {
+          return state;
+        }
+        return _extends({}, state, {
+          hasBeenInteractedWith: true,
+          radiusPoint: nextRadiusPoint
+        });
+      }
+    default:
+      throw new Error("The doMoveRadiusPoint action is only for circle graphs");
+  }
+}
 function doChangeSnapStep(state, action) {
   if (
   // Deep equality check since these are arrays
@@ -30621,222 +31044,6 @@ function setAtIndex(args) {
   return copy;
 }
 
-function initializeGraphState(params) {
-  const {
-    graph,
-    step,
-    snapStep,
-    range,
-    markings
-  } = params;
-  const shared = {
-    hasBeenInteractedWith: false,
-    range,
-    snapStep,
-    markings
-  };
-  switch (graph.type) {
-    case "segment":
-      return _extends({}, shared, {
-        type: "segment",
-        coords: getDefaultSegments({
-          graph,
-          step,
-          range
-        })
-      });
-    case "linear":
-    case "linear-system":
-    case "ray":
-      return _extends({}, shared, {
-        type: graph.type,
-        // Linear and ray graphs have a single tuple of points, while a
-        // linear system has two tuples of points.
-        coords: getLineCoords({
-          graph,
-          range,
-          step
-        })
-      });
-    case "polygon":
-      return _extends({}, shared, {
-        type: "polygon",
-        showAngles: Boolean(graph.showAngles),
-        showSides: Boolean(graph.showSides),
-        coords: getPolygonCoords({
-          graph,
-          range,
-          step
-        })
-      });
-    case "point":
-      return _extends({}, shared, {
-        type: graph.type,
-        coords: getDefaultPoints({
-          graph,
-          step,
-          range
-        })
-      });
-    case "angle":
-    case "circle":
-    case "sinusoid":
-    case "quadratic":
-      throw new Error("Mafs not yet implemented for graph type: " + graph.type);
-    default:
-      throw new UnreachableCaseError(graph);
-  }
-}
-const getDefaultPoints = ({
-  graph,
-  range,
-  step
-}) => {
-  var _graph$coords;
-  const numPoints = graph.numPoints || 1;
-  let coords = (_graph$coords = graph.coords) == null ? void 0 : _graph$coords.slice();
-  if (coords) {
-    return coords;
-  }
-  switch (numPoints) {
-    case 1:
-      // Back in the day, one point's coords were in graph.coord
-      coords = [graph.coord || [0, 0]];
-      break;
-    case 2:
-      coords = [[-5, 0], [5, 0]];
-      break;
-    case 3:
-      coords = [[-5, 0], [0, 0], [5, 0]];
-      break;
-    case 4:
-      coords = [[-6, 0], [-2, 0], [2, 0], [6, 0]];
-      break;
-    case 5:
-      coords = [[-6, 0], [-3, 0], [0, 0], [3, 0], [6, 0]];
-      break;
-    case 6:
-      coords = [[-5, 0], [-3, 0], [-1, 0], [1, 0], [3, 0], [5, 0]];
-      break;
-    default:
-      coords = [];
-      break;
-  }
-  // Transform coords from their -10 to 10 space to 0 to 1
-  // because of the old graph.coord, and also it's easier.
-  const newCoords = normalizeCoords(coords, [[-10, 10], [-10, 10]]);
-  return normalizePoints(range, step, newCoords);
-};
-
-// TS v4 doesn't narrow return types, while v5 does.
-// Instead of updating to v5, using generic type to relate input and output types.
-function getGradableGraph(state, initialGraph) {
-  if (!state.hasBeenInteractedWith) {
-    return _extends({}, initialGraph);
-  }
-  if (initialGraph.type === "linear-system" && state.type === "linear-system") {
-    return _extends({}, initialGraph, {
-      coords: state.coords
-    });
-  }
-  if (state.type === "segment" && initialGraph.type === "segment") {
-    return _extends({}, initialGraph, {
-      coords: state.coords
-    });
-  }
-  if (state.type === "linear" && initialGraph.type === "linear") {
-    return _extends({}, initialGraph, {
-      coords: state.coords[0]
-    });
-  }
-  if (state.type === "ray" && initialGraph.type === "ray") {
-    return _extends({}, initialGraph, {
-      coords: state.coords[0]
-    });
-  }
-  if (state.type === "polygon" && initialGraph.type === "polygon") {
-    return _extends({}, initialGraph, {
-      coords: state.coords
-    });
-  }
-  if (state.type === "point" && initialGraph.type === "point") {
-    return _extends({}, initialGraph, {
-      coords: state.coords
-    });
-  }
-  throw new Error("Mafs is not yet implemented for graph type: " + initialGraph.type);
-}
-const getDefaultSegments = ({
-  graph,
-  range,
-  step
-}) => {
-  const ys = n => {
-    switch (n) {
-      case 2:
-        return [5, -5];
-      case 3:
-        return [5, 0, -5];
-      case 4:
-        return [6, 2, -2, -6];
-      case 5:
-        return [6, 3, 0, -3, -6];
-      case 6:
-        return [5, 3, 1, -1, -3, -5];
-      default:
-        return [5];
-    }
-  };
-  const defaultRange = [[-10, 10], [-10, 10]];
-  return ys(graph.numSegments).map(y => {
-    let endpoints = [[-5, y], [5, y]];
-    endpoints = normalizeCoords(endpoints, defaultRange);
-    endpoints = normalizePoints(range, step, endpoints);
-    return endpoints;
-  });
-};
-const defaultLinearCoords = [[[0.25, 0.75], [0.75, 0.75]], [[0.25, 0.25], [0.75, 0.25]]];
-const getLineCoords = ({
-  graph,
-  range,
-  step
-}) => {
-  var _graph$coords2;
-  return (
-    // Return two lines for a linear system, one for a ray or linear
-    ((_graph$coords2 = graph.coords) != null ? _graph$coords2 : graph.type === "linear-system") ? defaultLinearCoords.map(collinear => normalizePoints(range, step, collinear)) : [normalizePoints(range, step, defaultLinearCoords[0])]
-  );
-};
-const getPolygonCoords = ({
-  graph,
-  range,
-  step
-}) => {
-  var _graph$coords3;
-  let coords = (_graph$coords3 = graph.coords) == null ? void 0 : _graph$coords3.slice();
-  if (coords) {
-    return coords;
-  }
-  const n = graph.numSides || 3;
-  if (n === "unlimited") {
-    coords = [];
-  } else {
-    const angle = 2 * Math.PI / n;
-    const offset = (1 / n - 1 / 2) * Math.PI;
-
-    // TODO(alex): Generalize this to more than just triangles so that
-    // all polygons have whole number side lengths if snapping to sides
-    const radius = graph.snapTo === "sides" ? Math.sqrt(3) / 3 * 7 : 4;
-
-    // Generate coords of a regular polygon with n sides
-    coords = [...Array(n).keys()].map(i => [radius * Math.cos(i * angle + offset), radius * Math.sin(i * angle + offset)]);
-  }
-  coords = normalizeCoords(coords, [[-10, 10], [-10, 10]]);
-  const snapToGrid = !["angles", "sides"].includes(graph.snapTo || "");
-  coords = normalizePoints(range, step, coords, /* noSnap */!snapToGrid);
-  return coords;
-};
-
 const renderGraph = props => {
   const {
     state,
@@ -30873,20 +31080,42 @@ const renderGraph = props => {
         dispatch: dispatch
       });
     case "circle":
-      throw new Error("the circle graph type is not yet implemented");
+      return /*#__PURE__*/React.createElement(CircleGraph, {
+        graphState: state,
+        dispatch: dispatch
+      });
     default:
       return new UnreachableCaseError(type);
   }
 };
+
+// Rather than be tightly bound to how data was structured in
+// the legacy interactive graph, this lets us store state
+// however we want and we just transform it before handing it off
+// the the parent InteractiveGraph
+function mafsStateToInteractiveGraph(state) {
+  if (state.graph.type === "circle") {
+    return _extends({}, state, {
+      graph: _extends({}, state.graph, {
+        radius: getRadius(state.graph)
+      })
+    });
+  }
+  return _extends({}, state);
+}
 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({
+  function onChange(next) {
+    props.onChange(mafsStateToInteractiveGraph(next));
+  }
+  return /*#__PURE__*/React.createElement(MafsGraph, _extends({}, props, {
     state: state,
-    dispatch: dispatch
-  }, props));
+    dispatch: dispatch,
+    onChange: onChange
+  }));
 });
 const MafsGraph = props => {
   const {
@@ -43065,7 +43294,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.3.0";
+const libVersion = "22.4.1";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {