@khanacademy/perseus 24.2.0 → 24.3.0

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, Ellipse, Line as Line$4, Point as Point$2, Polygon, useTransformContext, Text as Text$1, Plot as Plot$3, Coordinates, Mafs } from 'mafs';
+import { vec, Ellipse, Plot as Plot$3, Line as Line$4, Point as Point$2, Polygon, useTransformContext, Text as Text$1, Coordinates, Mafs } from 'mafs';
 import { useDrag } from '@use-gesture/react';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import { Body, LabelSmall, LabelMedium } from '@khanacademy/wonder-blocks-typography';
@@ -8969,7 +8969,7 @@ var Tex$1 = {
 const {
   processMath: processMath$1
 } = Tex$1;
-function polar(r, th) {
+function polar$1(r, th) {
   if (typeof r === "number") {
     r = [r, r];
   }
@@ -9458,8 +9458,8 @@ class Graphie$1 {
       endAngle = (endAngle % 360 + 360) % 360;
       const cent = this.scalePoint(center);
       const radii = this.scaleVector(radius);
-      const startVector = polar(radius, startAngle);
-      const endVector = polar(radius, endAngle);
+      const startVector = polar$1(radius, startAngle);
+      const endVector = polar$1(radius, endAngle);
 
       // We round the coordinates to make testing easier, because trig
       // operations return unround numbers.
@@ -13732,7 +13732,7 @@ _.extend(MovableAngle.prototype, {
           let angle = GraphUtils.findAngle(newPoint, vertex);
           angle = Math.round((angle - snapOffset) / snap) * snap + snapOffset;
           const distance = GraphUtils.getDistance(newPoint, vertex);
-          return vector$1.add(vertex, polar(distance, angle));
+          return vector$1.add(vertex, polar$1(distance, angle));
         }
         return true;
       };
@@ -16648,7 +16648,7 @@ const Path = GraphieClasses.createClass({
     this.path.toFront();
   }
 });
-const Arc = GraphieClasses.createSimpleClass((graphie, props) => {
+const Arc$1 = GraphieClasses.createSimpleClass((graphie, props) => {
   let center = props.center;
   let radius = props.radius;
   if (props.unscaled) {
@@ -16664,7 +16664,7 @@ const Rect$1 = GraphieClasses.createSimpleClass((graphie, props) => {
   return graphie.rect(props.x, props.y, props.width, props.height, props.style);
 });
 var Movables = {
-  Arc: Arc,
+  Arc: Arc$1,
   Circle: Circle,
   Label: Label$1,
   Line: Line$3,
@@ -28363,6 +28363,91 @@ const useTransformDimensionsToPixels = (...dimens) => {
   return dimensionsToPixels(dimens, graphState);
 };
 
+// Restricts `value` to be between `min` and `max`.
+function clamp(value, min, max) {
+  if (value < min) {
+    return min;
+  }
+  if (value > max) {
+    return max;
+  }
+  return value;
+}
+
+// Rounds each component of `point` to the nearest multiple of the
+// corresponding component of `snapStep`. E.g. if the snap step is [2, 3],
+// the x-coord of the point will be rounded to the nearest multiple of 2, and
+// the y-coord of the point will be rounded to the nearest multiple of 3.
+function snap(snapStep, point) {
+  const [requestedX, requestedY] = point;
+  const [snapX, snapY] = snapStep;
+  return [Math.round(requestedX / snapX) * snapX, Math.round(requestedY / snapY) * snapY];
+}
+
+// Use X and Y to index into arrays that represent coordinate pairs.
+// e.g. point[X]
+const X = 0;
+const Y = 1;
+
+// Use MIN and MAX to index into arrays that represent intervals.
+// e.g. range[MAX]
+const MIN = 0;
+const MAX = 1;
+function size([min, max]) {
+  return max - min;
+}
+
+// Removes an equal amount from each end of the interval.
+//
+// If the given amount cannot be removed (because the interval is too small),
+// half the interval's size is removed from each end instead, so the interval
+// ends up with size = 0, and both MAX and MIN equal to its former midpoint.
+//
+// If `amount` is negative, the interval is expanded instead.
+function trim(amount, interval) {
+  if (amount * 2 > size(interval)) {
+    const middle = average(...interval);
+    return [middle, middle];
+  }
+  return [interval[MIN] + amount, interval[MAX] - amount];
+}
+function average(a, b) {
+  return (a + b) / 2;
+}
+
+// Restricts the `point` to be within `box`, by clamping each coordinate to the
+// corresponding interval.
+function clampToBox(box, point) {
+  return [clamp(point[X], ...box[X]), clamp(point[Y], ...box[Y])];
+}
+
+// Reduces the size of `box`, trimming each corner by the given positive
+// `amount`. If a component of `amount` is negative, the box is expanded in
+// that dimension instead.
+function inset(amount, box) {
+  return [trim(amount[X], box[X]), trim(amount[Y], box[Y])];
+}
+
+// This file contains helper functions for working with angles.
+function polar(r, th) {
+  if (typeof r === "number") {
+    r = [r, r];
+  }
+  th = th * Math.PI / 180;
+  return [r[0] * Math.cos(th), r[1] * Math.sin(th)];
+}
+const findAngle = (point1, point2, vertex) => {
+  if (vertex === undefined) {
+    const x = point1[0] - point2[0];
+    const y = point1[1] - point2[1];
+    if (!x && !y) {
+      return 0;
+    }
+    return (180 + Math.atan2(-y, -x) * 180 / Math.PI + 360) % 360;
+  }
+  return findAngle(point1, vertex) - findAngle(point2, vertex);
+};
+
 function AxisLabels() {
   const {
     range,
@@ -28370,8 +28455,8 @@ function AxisLabels() {
     width,
     height
   } = useGraphConfig();
-  const yAxisLabelLocation = [0, range[1][1]];
-  const xAxisLabelLocation = [range[0][1], 0];
+  const yAxisLabelLocation = [0, range[Y][MAX]];
+  const xAxisLabelLocation = [range[X][MAX], 0];
   const [xAxisLabelText, yAxisLabelText] = labels;
   const graphInfo = {
     range,
@@ -28542,6 +28627,32 @@ const LockedEllipse = props => {
   });
 };
 
+const LockedFunction = props => {
+  const {
+    color,
+    strokeStyle,
+    directionalAxis,
+    domain
+  } = props;
+  const plotProps = {
+    color: lockedFigureColors[color],
+    style: strokeStyle,
+    domain
+  };
+  const equation = props.equationParsed || KAS.parse(props.equation).expr;
+  return /*#__PURE__*/React.createElement("g", {
+    className: "locked-function"
+  }, directionalAxis === "x" && /*#__PURE__*/React.createElement(Plot$3.OfX, _extends({
+    y: x => equation.eval({
+      x
+    })
+  }, plotProps)), directionalAxis === "y" && /*#__PURE__*/React.createElement(Plot$3.OfY, _extends({
+    x: y => equation.eval({
+      y
+    })
+  }, plotProps)));
+};
+
 function pathBuilder() {
   return new PathBuilder();
 }
@@ -28640,7 +28751,7 @@ function Arrowhead(props) {
   const [point] = useTransformVectorsToPixels(props.tip);
   return /*#__PURE__*/React.createElement("g", {
     className: "interactive-graph-arrowhead",
-    transform: `translate(${point[0]} ${point[1]}) rotate(${props.angle})`
+    transform: `translate(${point[X]} ${point[Y]}) rotate(${props.angle})`
   }, /*#__PURE__*/React.createElement("g", {
     transform: "translate(-1.5)"
   }, /*#__PURE__*/React.createElement("path", {
@@ -28709,10 +28820,10 @@ function SVGLine(props) {
     testId
   } = props;
   return /*#__PURE__*/React.createElement("line", {
-    x1: start[0],
-    y1: start[1],
-    x2: end[0],
-    y2: end[1],
+    x1: start[X],
+    y1: start[Y],
+    x2: end[X],
+    y2: end[Y],
     style: style,
     className: className,
     "data-testid": testId
@@ -28797,8 +28908,8 @@ const LockedLine = props => {
   return /*#__PURE__*/React.createElement("g", {
     className: kind === "ray" ? "locked-ray" : "locked-line"
   }, line, showPoint1 && /*#__PURE__*/React.createElement(Point$2, {
-    x: point1.coord[0],
-    y: point1.coord[1],
+    x: point1.coord[X],
+    y: point1.coord[Y],
     svgCircleProps: {
       style: {
         fill: point1.filled ? lockedFigureColors[point1.color] : color.white,
@@ -28807,8 +28918,8 @@ const LockedLine = props => {
       }
     }
   }), showPoint2 && /*#__PURE__*/React.createElement(Point$2, {
-    x: point2.coord[0],
-    y: point2.coord[1],
+    x: point2.coord[X],
+    y: point2.coord[Y],
     svgCircleProps: {
       style: {
         fill: point2.filled ? lockedFigureColors[point2.color] : color.white,
@@ -28856,8 +28967,8 @@ const LockedPolygon = props => {
     color: lockedFigureColors[color]
   }), showVertices && points.map((point, index) => /*#__PURE__*/React.createElement(Point$2, {
     key: `locked-polygon-point-${index}`,
-    x: point[0],
-    y: point[1],
+    x: point[X],
+    y: point[Y],
     color: lockedFigureColors[color]
   })));
 };
@@ -28904,6 +29015,10 @@ const GraphLockedLayer = props => {
         return /*#__PURE__*/React.createElement(LockedPolygon, _extends({
           key: `polygon-${index}`
         }, figure));
+      case "function":
+        return /*#__PURE__*/React.createElement(LockedFunction, _extends({
+          key: `function-${index}`
+        }, figure));
       default:
         /**
          * Devlopment-time future-proofing: This should
@@ -28996,24 +29111,18 @@ const normalizePoints = (range, step, coordsList, noSnap) => coordsList.map(coor
 coords.map((coord, i) => {
   const axisRange = range[i];
   if (noSnap) {
-    return axisRange[0] + (axisRange[1] - axisRange[0]) * coord;
+    return axisRange[MIN] + size(axisRange) * coord;
   }
   const axisStep = step[i];
-  const nSteps = Math.floor((axisRange[1] - axisRange[0]) / axisStep);
+  const nSteps = Math.floor(size(axisRange) / axisStep);
   const tick = Math.round(coord * nSteps);
-  return axisRange[0] + axisStep * tick;
+  return axisRange[MIN] + axisStep * tick;
 }));
 
 // same as normalizeCoords in interactive-graph.tsx
 const normalizeCoords = (coordsList, ranges) => coordsList.map(coords => coords.map((coord, i) => {
-  const extent = ranges[i][1] - ranges[i][0];
-  return (coord + ranges[i][1]) / extent;
+  return (coord + ranges[i][1]) / size(ranges[i]);
 }));
-function snap(snapStep, point) {
-  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`.
@@ -29022,19 +29131,8 @@ function bound$1({
   range,
   point
 }) {
-  const [requestedX, requestedY] = point;
-  const [snapX, snapY] = snapStep;
-  const [[minX, maxX], [minY, maxY]] = range;
-  return [clamp(requestedX, minX + snapX, maxX - snapX), clamp(requestedY, minY + snapY, maxY - snapY)];
-}
-function clamp(value, min, max) {
-  if (value < min) {
-    return min;
-  }
-  if (value > max) {
-    return max;
-  }
-  return value;
+  const boundingBox = inset(snapStep, range);
+  return clampToBox(boundingBox, point);
 }
 
 var isProduction = process.env.NODE_ENV === 'production';
@@ -29104,8 +29202,8 @@ function useDraggable(args) {
         metaKey,
         shiftKey
       } = state;
-      const direction = [yDownDirection[0], -yDownDirection[1]];
-      const span = Math.abs(direction[0]) ? xSpan : ySpan;
+      const direction = [yDownDirection[X], -yDownDirection[Y]];
+      const span = Math.abs(direction[X]) ? xSpan : ySpan;
       let divisions = 50;
       if (altKey || metaKey) {
         divisions = 200;
@@ -29213,8 +29311,10 @@ const MovablePointView = /*#__PURE__*/forwardRef((props, hitboxRef) => {
   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];
+
+  // TODO(benchristel): destructure range in one line
+  const [xMin, xMax] = range[X];
+  const [yMin, yMax] = range[Y];
   const [[verticalStartX]] = useTransformVectorsToPixels([xMin, 0]);
   const [[verticalEndX]] = useTransformVectorsToPixels([xMax, 0]);
   const [[_, horizontalStartY]] = useTransformVectorsToPixels([0, yMin]);
@@ -29271,7 +29371,7 @@ const MovablePointView = /*#__PURE__*/forwardRef((props, hitboxRef) => {
   return /*#__PURE__*/React.createElement(React.Fragment, null, showHairlines && hairlines, showTooltips ? /*#__PURE__*/React.createElement(Tooltip$1, {
     autoUpdate: true,
     backgroundColor: wbColorName,
-    content: `(${point[0]}, ${point[1]})`,
+    content: `(${point[X]}, ${point[Y]})`,
     contentStyle: {
       color: "white"
     }
@@ -29456,16 +29556,7 @@ function trimRange(range, graphDimensionsInPixels) {
   const graphUnitsPerPixelY = size(yRange) / pixelsTall;
   const graphUnitsToTrimX = pixelsToTrim * graphUnitsPerPixelX;
   const graphUnitsToTrimY = pixelsToTrim * graphUnitsPerPixelY;
-  return [trim(xRange, graphUnitsToTrimX), trim(yRange, graphUnitsToTrimY)];
-}
-function trim(interval, amount) {
-  if (size(interval) < amount * 2) {
-    return [0, 0];
-  }
-  return [interval[0] + amount, interval[1] - amount];
-}
-function size(interval) {
-  return interval[1] - interval[0];
+  return inset([graphUnitsToTrimX, graphUnitsToTrimY], range);
 }
 
 const SegmentGraph = props => {
@@ -29598,7 +29689,7 @@ const SvgDefs = () => /*#__PURE__*/React__default.createElement("defs", null, /*
   in: "SourceGraphic"
 })));
 
-const Angle = ({
+const PolygonAngle = ({
   centerPoint,
   endPoints,
   range,
@@ -29625,7 +29716,7 @@ const Angle = ({
   // Used to calculate the inside of the angle and to create square
   const [x3, y3] = vec.add(centerPoint, vec.add(vec.sub([x1, y1], centerPoint), vec.sub([x2, y2], centerPoint)));
   if (!showAngles) {
-    return isRightAngle(angle) ? /*#__PURE__*/React.createElement(RightAngleSquare, {
+    return isRightPolygonAngle(angle) ? /*#__PURE__*/React.createElement(RightAngleSquare, {
       start: [x1, y1],
       vertex: [x2, y2],
       end: [x3, y3]
@@ -29662,17 +29753,101 @@ const Angle = ({
     start: [x1, y1],
     vertex: [x2, y2],
     end: [x3, y3]
-  }) : /*#__PURE__*/React.createElement(MafsCssTransformWrapper, null, /*#__PURE__*/React.createElement("path", {
-    d: arc,
-    strokeWidth: 0.02,
-    fill: "none"
-  })), /*#__PURE__*/React.createElement(TextLabel, {
+  }) : /*#__PURE__*/React.createElement(Arc, {
+    arc: arc
+  }), /*#__PURE__*/React.createElement(TextLabel, {
     x: x3,
     y: y3,
     attach: y3 - centerY > 0 ? "s" : "n",
     attachDistance: Math.abs(y3 - centerY) < 0.2 || vec.dist([x3, y3], centerPoint) < 0.3 ? 20 : 10
   }, angleLabel, "\xB0"));
 };
+const Angle = ({
+  vertex,
+  coords,
+  showAngles,
+  allowReflexAngles,
+  range
+}) => {
+  // Check if the points are clockwise or not, depending on whether we allow reflex angles
+  const areClockwise = clockwise$1([...coords, vertex]);
+  const shouldReverseCoords = areClockwise && !allowReflexAngles;
+
+  // Reverse the coordinates accordingly to ensure the angle is calculated correctly
+  const clockwiseCoords = shouldReverseCoords ? coords : coords.reverse();
+
+  // Calculate the angles between the two points
+  const startAngle = findAngle(clockwiseCoords[0], vertex);
+  const endAngle = findAngle(clockwiseCoords[1], vertex);
+  const angle = (startAngle + 360 - endAngle) % 360;
+
+  // Check if the angle is reflexive
+  const isReflexive = angle > 180;
+
+  // Break out the necessary points for the arc calculation
+  const [centerX, centerY] = vertex;
+  const [point1, point2] = clockwiseCoords;
+  const [startX, startY] = point1;
+  const [endX, endY] = point2;
+  const a = vec.dist(vertex, point1);
+  const b = vec.dist(vertex, point2);
+
+  // Set the radius of the arc
+  const radius = 2;
+
+  // Calculate the end points of the arc
+  const y1 = centerY + (startY - centerY) / a * radius;
+  const x2 = centerX + (endX - centerX) / b * radius;
+  const x1 = centerX + (startX - centerX) / a * radius;
+  const y2 = centerY + (endY - centerY) / b * radius;
+
+  // Used to calculate the inside of the angle and to create square
+  const [x3, y3] = vec.add(vertex, vec.add(vec.sub([x1, y1], vertex), vec.sub([x2, y2], vertex)));
+
+  // Determine whether the arc should be drawn outside the angle
+  const isOutside = shouldDrawArcOutside([x3, y3], vertex, range, [[vertex, point1], [vertex, point2]]);
+
+  // Determine the flags for the arc
+  // If the angle is outside OR reflexive, we want to draw a large arc
+  // If the angle is outside AND reflexive, we want to sweep the arc
+  const largeArcFlag = isOutside || isReflexive ? 1 : 0;
+  const sweepFlag = isOutside && isReflexive ? 1 : 0;
+
+  // Create the SVG path for the arc
+  const arc = `M ${x1} ${y1} A ${radius} ${radius} 0 ${largeArcFlag} ${sweepFlag} ${x2} ${y2}`;
+
+  // We only ever want to show whole angles
+  const angleLabel = parseFloat(angle.toFixed(0)); // Only want to show whole angles
+
+  // Calculate the text position based on the angle and whether we allow reflex angles
+  // Let's try the angle bisector method to find the midpoint of the arc
+  const [textX, textY] = calculateBisectorPoint(point1, point2, vertex, isReflexive, allowReflexAngles, radius);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("filter", {
+    id: "background",
+    x: "-5%",
+    width: "110%",
+    y: "0%",
+    height: "100%"
+  }, /*#__PURE__*/React.createElement("feFlood", {
+    floodColor: "#FFF",
+    floodOpacity: "0.5"
+  }), /*#__PURE__*/React.createElement("feComposite", {
+    operator: "over",
+    in: "SourceGraphic"
+  }))), isRightAngle(angle) ? /*#__PURE__*/React.createElement(RightAngleSquare, {
+    start: [x1, y1],
+    vertex: [x2, y2],
+    end: [x3, y3],
+    className: "arc-right-angle"
+  }) : /*#__PURE__*/React.createElement(Arc, {
+    arc: arc,
+    className: "angle-arc"
+  }), showAngles && /*#__PURE__*/React.createElement(TextLabel, {
+    x: textX,
+    y: textY,
+    color: color.blue
+  }, angleLabel, "\xB0"));
+};
 
 /**
  * This is broken out into its own component so that it can be used for an early return
@@ -29681,13 +29856,30 @@ const Angle = ({
 const RightAngleSquare = ({
   start: [x1, y1],
   vertex: [x2, y2],
-  end: [x3, y3]
+  end: [x3, y3],
+  className
 }) => /*#__PURE__*/React.createElement(MafsCssTransformWrapper, null, /*#__PURE__*/React.createElement("path", {
   d: `M ${x1} ${y1} L ${x3} ${y3} M ${x3} ${y3} L ${x2} ${y2}`,
   strokeWidth: 0.02,
-  fill: "none"
+  fill: "none",
+  className: className
 }));
-const isRightAngle = angle => Math.abs(angle - Math.PI / 2) < 0.01;
+
+// We're conditionally adding the class name here so that we can style the arc differently
+// based on whether it's an angle or a polygon angle
+const Arc = ({
+  arc,
+  className
+}) => {
+  return /*#__PURE__*/React.createElement(MafsCssTransformWrapper, null, /*#__PURE__*/React.createElement("path", {
+    d: arc,
+    strokeWidth: 0.02,
+    fill: "none",
+    className: className
+  }));
+};
+const isRightPolygonAngle = angle => Math.abs(angle - Math.PI / 2) < 0.01;
+const isRightAngle = angle => Math.round(angle) === 90;
 
 /**
  * Determines if an angle is an inside (false) or outside (true) angle.
@@ -29721,6 +29913,75 @@ const linesIntersect = ([[a, b], [c, d]], [[p, q], [r, s]]) => {
 };
 const isEven = n => n % 2 === 0;
 
+// This function calculates the bisector point of an angle formed by two points
+// and a vertex. It is used to position the angle label so that it is always
+// outside the arc at the exact midpoint of the angle.
+// Reflex angles make use of polar coordinates to determine the correct direction
+function calculateBisectorPoint(point1, point2, vertex, isReflex, allowReflex, arcRadius) {
+  const [originX, originY] = vertex;
+  const [x1, y1] = point1;
+  const [x2, y2] = point2;
+
+  // Convert the Cartesian Coordinates to vectors
+  const vectorA = [x1 - originX, y1 - originY];
+  const vectorB = [x2 - originX, y2 - originY];
+
+  // Calculate the average angle of the vectors
+  // so that we can point the bisector in the correct direction using polar coordinates
+  const angleA = Math.atan2(vectorA[1], vectorA[0]);
+  const angleB = Math.atan2(vectorB[1], vectorB[0]);
+
+  // Calculate the average of these two angles
+  let averageAngle = (angleA + angleB) / 2;
+  const angleRadians = Math.abs(angleA - angleB);
+
+  // Adjust the average angle to point in the correct direction
+  // and to account for reflex angles and a bug with 180 degrees
+  // that occurs due to our angleOffsetDegrees option in the graph
+  if (allowReflex) {
+    // If the resulting angles are less than 180 degrees,
+    // or if the user has flipped the points on the interactive element
+    // ensure that we have the correct direction for the reflex angle
+    if (angleRadians <= Math.PI && isReflex || angleB > angleA) {
+      averageAngle += Math.PI; // Add 180 degrees
+    }
+  } else {
+    // If the resulting angles are greater than 180 degrees, adjust
+    // to get the correct angle, as we already know that the angle is not reflexive
+    // This fixes a bug that occurs at 180 degrees due to our angleOffsetDegrees option in the graph
+    if (angleRadians > Math.PI) {
+      averageAngle -= Math.PI; // Subract 180 degrees
+    }
+  }
+
+  // Convert the average angle back to Cartesian coordinates
+  const sum = [Math.cos(averageAngle), Math.sin(averageAngle)];
+
+  // Calculate the magnitude of the sum to normalize it
+  const sumMagnitude = Math.sqrt(sum[0] ** 2 + sum[1] ** 2);
+  const bisectorDirection = [sum[0] / sumMagnitude, sum[1] / sumMagnitude];
+
+  // Calculate the initial distance of the bisector direction from the origin
+  const initialDistance = Math.sqrt(bisectorDirection[0] ** 2 + bisectorDirection[1] ** 2);
+
+  // Determine the minimum radius to ensure that the text is always outside the arc
+  const requiredDistance = arcRadius * 1.75;
+  let radius = requiredDistance / initialDistance;
+
+  // Apply radius only if the initial distance is less than required
+  if (initialDistance >= requiredDistance) {
+    radius = 1; // Use the unit vector as is
+  }
+
+  // Scale the bisector direction by the radius
+  const bisectorPoint = [bisectorDirection[0] * radius, bisectorDirection[1] * radius];
+
+  // Add the vertex to the bisector point to get the final position
+  // to ensure that the angle label moves with the interactive element
+  const scaledBisector = vec.add(bisectorPoint, vertex);
+  return scaledBisector;
+}
+
 const StyledMovablePoint = props => {
   const {
     snapStep
@@ -29801,7 +30062,7 @@ const PolygonGraph = props => {
     if (!pt1 || !pt2) {
       return null;
     }
-    return /*#__PURE__*/React.createElement(Angle, {
+    return /*#__PURE__*/React.createElement(PolygonAngle, {
       key: "angle-" + i,
       centerPoint: point,
       endPoints: [pt1, pt2],
@@ -29893,6 +30154,12 @@ function getGradableGraph(state, initialGraph) {
       coords: state.coords
     });
   }
+  if (state.type === "angle" && initialGraph.type === "angle") {
+    return _extends({}, initialGraph, {
+      coords: state.coords,
+      allowReflexAngles: state.allowReflexAngles
+    });
+  }
   throw new Error("Mafs is not yet implemented for graph type: " + initialGraph.type);
 }
 
@@ -29955,16 +30222,16 @@ function MovableCircle(props) {
     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
+    cx: centerPx[X],
+    cy: centerPx[Y],
+    rx: radiiPx[X] + 3,
+    ry: radiiPx[Y] + 3
   }), /*#__PURE__*/React.createElement("ellipse", {
     className: "circle",
-    cx: centerPx[0],
-    cy: centerPx[1],
-    rx: radiiPx[0],
-    ry: radiiPx[1]
+    cx: centerPx[X],
+    cy: centerPx[Y],
+    rx: radiiPx[X],
+    ry: radiiPx[Y]
   }), /*#__PURE__*/React.createElement(DragHandle, {
     center: center
   }));
@@ -29980,10 +30247,10 @@ function DragHandle(props) {
   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],
+    x: topLeft[X],
+    y: topLeft[Y],
+    width: dragHandleDimensions[X],
+    height: dragHandleDimensions[Y],
     rx: cornerRadius,
     ry: cornerRadius
   }), dragHandleDotPositions.map(offsetPx => {
@@ -30118,15 +30385,15 @@ const getSinusoidCoefficients = coords => {
   const p2 = coords[1];
 
   // If the x-coordinates are the same, we are unable to calculate the coefficients
-  if (p2[0] === p1[0]) {
+  if (p2[X] === p1[X]) {
     return;
   }
 
   // Resulting coefficients are canonical for this sine curve
-  const amplitude = p2[1] - p1[1];
-  const angularFrequency = Math.PI / (2 * (p2[0] - p1[0]));
-  const phase = p1[0] * angularFrequency;
-  const verticalOffset = p1[1];
+  const amplitude = p2[Y] - p1[Y];
+  const angularFrequency = Math.PI / (2 * (p2[X] - p1[X]));
+  const phase = p1[X] * angularFrequency;
+  const verticalOffset = p1[Y];
   return {
     amplitude,
     angularFrequency,
@@ -30135,6 +30402,74 @@ const getSinusoidCoefficients = coords => {
   };
 };
 
+function AngleGraph(props) {
+  const {
+    dispatch,
+    graphState
+  } = props;
+  const {
+    graphDimensionsInPixels
+  } = useGraphConfig();
+  const {
+    coords,
+    showAngles,
+    range,
+    allowReflexAngles,
+    angleOffsetDeg,
+    snapDegrees
+  } = graphState;
+
+  // Break the coords into the two end points and the center point
+  const endPoints = [coords[0], coords[2]];
+  const centerPoint = coords[1];
+
+  // Convert the vectors to pixels for rendering the svg lines
+  const angleLines = [[centerPoint, endPoints[0]], [centerPoint, endPoints[1]]];
+  const linePixelCoords = [useTransformVectorsToPixels(centerPoint, endPoints[0]), useTransformVectorsToPixels(centerPoint, endPoints[1])];
+
+  // Create the SVG lines for the angle
+  const svgLines = linePixelCoords.map(([startPtPx, endPtPx], i) => {
+    const trimmedRange = trimRange(range, graphDimensionsInPixels);
+    const endExtend = getIntersectionOfRayWithBox(angleLines[i][0], angleLines[i][1], trimmedRange);
+    return /*#__PURE__*/React.createElement("g", {
+      key: `line-${i}`
+    }, /*#__PURE__*/React.createElement(SVGLine, {
+      start: startPtPx,
+      end: endPtPx,
+      style: {
+        stroke: "var(--movable-line-stroke-color)",
+        strokeWidth: "var(--movable-line-stroke-weight)"
+      }
+    }), /*#__PURE__*/React.createElement(Vector, {
+      tail: angleLines[i][1],
+      tip: endExtend,
+      color: "var(--movable-line-stroke-color)"
+    }));
+  });
+
+  // Create the angle indicator parameters
+  const angleParams = {
+    vertex: centerPoint,
+    coords: endPoints,
+    allowReflexAngles: allowReflexAngles || false,
+    // Whether to allow reflex angles or not
+    angleOffsetDeg: angleOffsetDeg || 0,
+    // The angle offset from the x-axis
+    snapDegrees: snapDegrees || 1,
+    // The multiple of degrees to snap to
+    range: range,
+    showAngles: showAngles || false // Whether to show the angle or not
+  };
+
+  // Render the lines, angle, and then movable points
+  return /*#__PURE__*/React.createElement(React.Fragment, null, svgLines, /*#__PURE__*/React.createElement(Angle, angleParams), coords.map((point, i) => /*#__PURE__*/React.createElement(StyledMovablePoint, {
+    key: "point-" + i,
+    snapTo: "angles",
+    point: point,
+    onMove: destination => dispatch(movePoint(i, destination))
+  })));
+}
+
 // Universal padding for the axis ticks to ensure that the labels
 // have enough space to render without overlapping the tick lines
 const tickPadding = 5;
@@ -30144,10 +30479,12 @@ const AxisTickLabels = () => {
     tickStep,
     range
   } = graphConfig;
-  const [xMin, xMax] = range[0];
-  const [yMin, yMax] = range[1];
-  const yTickStep = tickStep[1];
-  const xTickStep = tickStep[0];
+
+  // TODO(benchristel): use destructuring here
+  const [xMin, xMax] = range[X];
+  const [yMin, yMax] = range[Y];
+  const yTickStep = tickStep[Y];
+  const xTickStep = tickStep[X];
   const yGridTicks = generateTickLocations$1(yTickStep, yMin, yMax);
   const xGridTicks = generateTickLocations$1(xTickStep, xMin, xMax);
   return /*#__PURE__*/React.createElement("div", {
@@ -30426,13 +30763,13 @@ const YGridTick = ({
 
   // If the graph is zoomed in, we want to make sure the ticks are still visible
   // even if they are outside the graph's range.
-  if (graphInfo.range[0][0] > 0) {
+  if (graphInfo.range[X][MIN] > 0) {
     // If the graph is on the positive side of the x-axis, lock the ticks to the left side of the graph
-    xPointOnAxis = graphInfo.range[0][0];
+    xPointOnAxis = graphInfo.range[X][MIN];
   }
-  if (graphInfo.range[0][1] < 0) {
+  if (graphInfo.range[X][MAX] < 0) {
     // If the graph is on the negative side of the x-axis, lock the ticks to the right side of the graph
-    xPointOnAxis = graphInfo.range[0][1];
+    xPointOnAxis = graphInfo.range[X][MAX];
   }
   const pointOnAxis = [xPointOnAxis, y];
   const [[xPosition, yPosition]] = useTransformVectorsToPixels(pointOnAxis);
@@ -30466,13 +30803,13 @@ const XGridTick = ({
   let yPointOnAxis = 0;
   // If the graph is zoomed in, we want to make sure the ticks are still visible
   // even if they are outside the graph's range.
-  if (graphInfo.range[1][0] > 0) {
+  if (graphInfo.range[Y][MIN] > 0) {
     // If the graph is on the positive side of the y-axis, lock the ticks to the top of the graph
-    yPointOnAxis = graphInfo.range[1][0];
+    yPointOnAxis = graphInfo.range[Y][MIN];
   }
-  if (graphInfo.range[1][1] < 0) {
+  if (graphInfo.range[Y][MAX] < 0) {
     // If the graph is on the negative side of the x-axis, lock the ticks to the bottom of the graph
-    yPointOnAxis = graphInfo.range[1][1];
+    yPointOnAxis = graphInfo.range[Y][MAX];
   }
   const pointOnAxis = [x, yPointOnAxis];
   const [[xPosition, yPosition]] = useTransformVectorsToPixels(pointOnAxis);
@@ -30527,10 +30864,12 @@ const AxisTicks = () => {
     width,
     height
   };
-  const [xMin, xMax] = range[0];
-  const [yMin, yMax] = range[1];
-  const yTickStep = tickStep[1];
-  const xTickStep = tickStep[0];
+
+  // TODO(benchristel): destructure these in one line
+  const [xMin, xMax] = range[X];
+  const [yMin, yMax] = range[Y];
+  const yTickStep = tickStep[Y];
+  const xTickStep = tickStep[X];
   const yGridTicks = generateTickLocations(yTickStep, yMin, yMax);
   const xGridTicks = generateTickLocations(xTickStep, xMin, xMax);
   return /*#__PURE__*/React.createElement("g", {
@@ -30569,8 +30908,8 @@ const axisOptions = (props, axisIndex) => {
 };
 const Grid = props => {
   return props.markings === "none" ? null : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Coordinates.Cartesian, {
-    xAxis: axisOptions(props, 0),
-    yAxis: axisOptions(props, 1)
+    xAxis: axisOptions(props, X),
+    yAxis: axisOptions(props, Y)
   }),
   // Only render the axis ticks and arrows if the markings are set to a full "graph"
   props.markings === "graph" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AxisTicks, null), /*#__PURE__*/React.createElement(AxisArrows, null)));
@@ -31179,7 +31518,7 @@ const LegacyGrid = ({
     height
   } = backgroundImage != null ? backgroundImage : {};
   if (url && typeof url === "string") {
-    const scale = box[0] / interactiveSizes$1.defaultBoxSize;
+    const scale = box[X] / interactiveSizes$1.defaultBoxSize;
     return /*#__PURE__*/React.createElement(View, {
       style: {
         position: "absolute",
@@ -31244,9 +31583,9 @@ function Protractor() {
   const angle = calculateAngleInDegrees(rotationHandleOffset) - calculateAngleInDegrees(centerToRotationHandle);
   return /*#__PURE__*/React.createElement("g", {
     ref: draggableRef,
-    transform: `translate(${topLeftPx[0]}, ${topLeftPx[1]}), rotate(${angle})`,
+    transform: `translate(${topLeftPx[X]}, ${topLeftPx[Y]}), rotate(${angle})`,
     style: {
-      transformOrigin: `${-centerToTopLeft[0]}px ${-centerToTopLeft[1]}px`
+      transformOrigin: `${-centerToTopLeft[X]}px ${-centerToTopLeft[Y]}px`
     }
   }, /*#__PURE__*/React.createElement("image", {
     href: protractorImage
@@ -31411,7 +31750,18 @@ function initializeGraphState(params) {
         coords: getSinusoidCoords(graph, range, step)
       });
     case "angle":
-      throw new Error("Mafs not yet implemented for graph type: " + graph.type);
+      return _extends({}, shared, {
+        type: graph.type,
+        showAngles: Boolean(graph.showAngles),
+        coords: getAngleCoords({
+          graph,
+          range,
+          step
+        }),
+        angleOffsetDeg: Number(graph.angleOffsetDeg),
+        allowReflexAngles: Boolean(graph.allowReflexAngles),
+        snapDegrees: Number(graph.snapDegrees)
+      });
     default:
       throw new UnreachableCaseError(graph);
   }
@@ -31545,6 +31895,43 @@ function getCircleCoords(graph) {
     radiusPoint: [2, 0]
   };
 }
+const getAngleCoords = params => {
+  const {
+    graph,
+    range,
+    step
+  } = params;
+  if (graph.coords) {
+    return graph.coords;
+  }
+  const {
+    snapDegrees,
+    angleOffsetDeg
+  } = graph;
+  const snap = snapDegrees || 1;
+  let angle = snap;
+  while (angle < 20) {
+    angle += snap;
+  }
+  angle = angle * Math.PI / 180;
+  const offset = (angleOffsetDeg || 0) * Math.PI / 180;
+  let defaultCoords = [[0.85, 0.5], [0.5, 0.5]];
+  defaultCoords = normalizePoints(range, step, defaultCoords, true);
+
+  // @ts-expect-error - TS2345 - Argument of type 'number[]' is not assignable to parameter of type 'readonly Coord[]'. | TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
+  const radius = magnitude(vector(...defaultCoords));
+
+  // We're adding a placeholder for the third point to appease ts and so that we
+  // can calculate it after we've adjusted the first point by the angleOffsetDeg
+  const coords = [...defaultCoords, [0, 0]];
+
+  // Adjust the lower point by angleOffsetDeg degrees
+  coords[0] = [coords[1][0] + radius * Math.cos(offset), coords[1][1] + radius * Math.sin(offset)];
+  // Position the upper point angle radians from the
+  // lower point
+  coords[2] = [coords[1][0] + radius * Math.cos(angle + offset), coords[1][1] + radius * Math.sin(angle + offset)];
+  return coords;
+};
 
 function interactiveGraphReducer(state, action) {
   switch (action.type) {
@@ -31606,6 +31993,7 @@ function doMoveControlPoint(state, action) {
           coords: newCoords
         });
       }
+    case "angle":
     case "circle":
       throw new Error("FIXME implement circle reducer");
     case "point":
@@ -31707,12 +32095,30 @@ function doMoveAll(state, action) {
 }
 function doMovePoint(state, action) {
   switch (state.type) {
+    case "angle":
+      // If the index is 1, we are moving the vertex of the angle,
+      // which will move the other two points as well
+      if (action.index === 1) {
+        const updatedCoords = boundAndSnapAngleVertex(state, action);
+        return _extends({}, state, {
+          hasBeenInteractedWith: true,
+          coords: updatedCoords
+        });
+      }
+      return _extends({}, state, {
+        hasBeenInteractedWith: true,
+        coords: setAtIndex({
+          array: state.coords,
+          index: action.index,
+          newValue: boundAndSnapAngleEndPoints(action.destination, state, action.index)
+        })
+      });
     case "polygon":
       let newValue;
       if (state.snapTo === "sides") {
         newValue = boundAndSnapToSides(action.destination, state, action.index);
       } else if (state.snapTo === "angles") {
-        newValue = boundAndSnapToAngle(action.destination, state, action.index);
+        newValue = boundAndSnapToPolygonAngle(action.destination, state, action.index);
       } else {
         newValue = boundAndSnapToGrid(action.destination, state);
       }
@@ -31751,7 +32157,7 @@ function doMovePoint(state, action) {
         // vertical line. If they are, then we don't want to move the point
         const _newCoords = [...state.coords];
         _newCoords[action.index] = boundDestination;
-        if (_newCoords[0][0] === _newCoords[1][0]) {
+        if (_newCoords[0][X] === _newCoords[1][X]) {
           return state;
         }
         return _extends({}, state, {
@@ -31809,13 +32215,13 @@ function doMoveCenter(state, action) {
         // 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 [xMin, xMax] = state.range[X];
         const [radX] = newRadiusPoint;
         if (radX < xMin || radX > xMax) {
-          const xJumpDist = (radX - constrainedCenter[0]) * 2;
+          const xJumpDist = (radX - constrainedCenter[X]) * 2;
           const possibleNewX = radX - xJumpDist;
           if (possibleNewX >= xMin && possibleNewX <= xMax) {
-            newRadiusPoint[0] = possibleNewX;
+            newRadiusPoint[X] = possibleNewX;
           }
         }
         return _extends({}, state, {
@@ -31832,11 +32238,11 @@ function doMoveRadiusPoint(state, action) {
   switch (state.type) {
     case "circle":
       {
-        const [xMin, xMax] = state.range[0];
+        const [xMin, xMax] = state.range[X];
         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]];
+        clamp(action.destination[X] + 0, xMin, xMax), state.center[1]];
         if (_.isEqual(nextRadiusPoint, state.center)) {
           return state;
         }
@@ -31871,10 +32277,10 @@ function doChangeRange(state, action) {
 }
 const getDeltaVertex = (maxMoves, minMoves, delta) => {
   const [deltaX, deltaY] = delta;
-  const maxXMove = Math.min(...maxMoves.map(move => move[0]));
-  const maxYMove = Math.min(...maxMoves.map(move => move[1]));
-  const minXMove = Math.max(...minMoves.map(move => move[0]));
-  const minYMove = Math.max(...minMoves.map(move => move[1]));
+  const maxXMove = Math.min(...maxMoves.map(move => move[X]));
+  const maxYMove = Math.min(...maxMoves.map(move => move[Y]));
+  const minXMove = Math.max(...minMoves.map(move => move[X]));
+  const minYMove = Math.max(...minMoves.map(move => move[Y]));
   const dx = clamp(deltaX, minXMove, maxXMove);
   const dy = clamp(deltaY, minYMove, maxYMove);
   return [dx, dy];
@@ -31905,7 +32311,122 @@ function boundAndSnapToGrid(point, {
     point
   }));
 }
-function boundAndSnapToAngle(destinationPoint, {
+function boundAndSnapAngleVertex({
+  range,
+  coords,
+  snapStep
+}, {
+  destination
+}) {
+  // Needed to prevent updating the original coords before the checks for
+  // degenerate triangles and overlapping sides
+  const coordsCopy = [...coords];
+
+  // Get the current and upcoming positions of the vertex
+  const startingVertex = coordsCopy[1];
+  const newVertex = bound$1({
+    snapStep,
+    range,
+    point: snap(snapStep, destination)
+  });
+
+  // Get the vector from the starting vertex to the new vertex
+  const delta = vec.add(newVertex, reverseVector(startingVertex));
+
+  // Apply the delta to each of the other two points so that the angle is maintained
+  let valid = true;
+  const newPoints = {};
+  for (const i of [0, 2]) {
+    const oldPoint = coordsCopy[i];
+    let newPoint = vec.add(oldPoint, delta);
+    let angle = findAngle(newVertex, newPoint);
+    angle *= Math.PI / 180;
+    newPoint = constrainToBoundsOnAngle(newPoint, angle, range, snapStep);
+    newPoints[i] = newPoint;
+
+    // Check if the new point is too close to the vertex
+    if (tooClose(newVertex, newPoint)) {
+      valid = false;
+    }
+  }
+
+  // Update the vertex after snapping to the snapStep
+  newPoints[1] = newVertex;
+  // Only move points if all new positions are valid
+  if (valid) {
+    Object.entries(newPoints).forEach(([i, newPoint]) => {
+      coordsCopy[i] = newPoint;
+    });
+  }
+  return coordsCopy;
+}
+
+// This function is used to ensure that the vertex of
+// an angle is not too close to the other points
+function tooClose(point1, point2, range) {
+  const safeDistance = 2;
+  const distance = vec.dist(point1, point2);
+  return distance < safeDistance;
+}
+function constrainToBoundsOnAngle(point, angle, range, snapStep) {
+  // We're subtracting the snapStep from the lower bound and adding it to the upper bound
+  // to ensure that the point is within the bounds of the graph even after snapping to the nearest degree
+  const lower = [range[0][0] + snapStep[0], range[1][0] + snapStep[0]];
+  const upper = [range[0][1] - snapStep[1], range[1][1] - snapStep[1]];
+  let result = point;
+  if (result[0] < lower[0]) {
+    result = [lower[0], result[1] + (lower[0] - result[0]) * Math.tan(angle)];
+  } else if (result[0] > upper[0]) {
+    result = [upper[0], result[1] - (result[0] - upper[0]) * Math.tan(angle)];
+  }
+  if (result[1] < lower[1]) {
+    result = [result[0] + (lower[1] - result[1]) / Math.tan(angle), lower[1]];
+  } else if (result[1] > upper[1]) {
+    result = [result[0] - (result[1] - upper[1]) / Math.tan(angle), upper[1]];
+  }
+  return result;
+}
+function boundAndSnapAngleEndPoints(destinationPoint, {
+  range,
+  coords,
+  snapDegrees,
+  angleOffsetDeg,
+  snapStep
+}, index) {
+  const snap = snapDegrees || 1;
+  const offsetDegrees = angleOffsetDeg || 0;
+
+  // Needed to prevent updating the original coords before the checks for
+  // degenerate triangles and overlapping sides
+  const coordsCopy = [...coords];
+
+  // We want to subtract or add the snapStep to the lower and upper bounds
+  // respectively to ensure that the point is within the bounds of the graph
+  // even after snapping to the nearest degree
+  const angleRange = [[range[0][0] + snapStep[0], range[0][1] - snapStep[0]], [range[1][0] + snapStep[1], range[1][1] - snapStep[1]]];
+
+  // Takes the destination point and makes sure it is within the bounds of the graph
+  // SnapStep is [0, 0] because we don't want to snap these points to the grid at all
+  const boundPoint = bound$1({
+    snapStep: [0, 0],
+    range: angleRange,
+    point: destinationPoint
+  });
+  coordsCopy[index] = boundPoint;
+
+  // Get the vertex of the angle
+  const vertex = coords[1];
+
+  // Gets the angle between the coords and the vertex
+  let angle = findAngle(coordsCopy[index], vertex);
+
+  // Snap the angle to the nearest multiple of snapDegrees (if provided)
+  angle = Math.round((angle - offsetDegrees) / snap) * snap + offsetDegrees;
+  const distance = vec.dist(coordsCopy[index], vertex);
+  const snappedValue = vec.add(vertex, polar(distance, angle));
+  return snappedValue;
+}
+function boundAndSnapToPolygonAngle(destinationPoint, {
   range,
   coords
 }, index) {
@@ -31936,7 +32457,7 @@ function boundAndSnapToAngle(destinationPoint, {
     angles[rel(j)] = Math.round(angles[rel(j)]);
   });
   const getAngle = function getAngle(a, vertex, b) {
-    const angle = GraphUtils.findAngle(coordsCopy[rel(a)], coordsCopy[rel(b)], coordsCopy[rel(vertex)]);
+    const angle = findAngle(coordsCopy[rel(a)], coordsCopy[rel(b)], coordsCopy[rel(vertex)]);
     return (angle + 360) % 360;
   };
   const innerAngles = [angles[rel(-1)] - getAngle(-2, -1, 1), angles[rel(1)] - getAngle(-1, 1, 2)];
@@ -31964,7 +32485,7 @@ function boundAndSnapToAngle(destinationPoint, {
   const side = Math.sin(innerAngles[1] * Math.PI / 180) / Math.sin(innerAngles[2] * Math.PI / 180) * knownSide;
 
   // Angle at the second vertex of the polygon
-  const outerAngle = GraphUtils.findAngle(coordsCopy[rel(1)], coordsCopy[rel(-1)]);
+  const outerAngle = findAngle(coordsCopy[rel(1)], coordsCopy[rel(-1)]);
 
   // Uses the length of the side of the polygon (radial coordinate)
   // and the angle between the first and second sides of the
@@ -32014,7 +32535,7 @@ function boundAndSnapToSides(destinationPoint, {
   const innerAngle = lawOfCosines(sides[0], sides[2], sides[1]);
 
   // Angle at the second vertex of the polygon
-  const outerAngle = GraphUtils.findAngle(coordsCopy[rel(1)], coordsCopy[rel(-1)]);
+  const outerAngle = findAngle(coordsCopy[rel(1)], coordsCopy[rel(-1)]);
 
   // Returns true if the points form a counter-clockwise turn;
   // a.k.a if the point is on the left or right of the polygon.
@@ -32092,6 +32613,11 @@ const renderGraph = props => {
     type
   } = state;
   switch (type) {
+    case "angle":
+      return /*#__PURE__*/React.createElement(AngleGraph, {
+        graphState: state,
+        dispatch: dispatch
+      });
     case "segment":
       return /*#__PURE__*/React.createElement(SegmentGraph, {
         graphState: state,
@@ -32251,8 +32777,8 @@ const MafsGraph = props => {
   }, props.markings === "graph" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AxisLabels, null), /*#__PURE__*/React.createElement(AxisTickLabels, null)), /*#__PURE__*/React.createElement(Mafs, {
     preserveAspectRatio: false,
     viewBox: {
-      x: state.range[0],
-      y: state.range[1],
+      x: state.range[X],
+      y: state.range[Y],
       padding: 0
     },
     pan: false,
@@ -33093,7 +33619,7 @@ class LegacyInteractiveGraph extends React.Component {
           // Solve for side by using the law of sines
           const side = Math.sin(innerAngles[1] * Math.PI / 180) / Math.sin(innerAngles[2] * Math.PI / 180) * knownSide;
           const outerAngle = GraphUtils.findAngle(coords[rel(1)], coords[rel(-1)]);
-          const offset = polar(side, outerAngle + (onLeft ? 1 : -1) * innerAngles[0]);
+          const offset = polar$1(side, outerAngle + (onLeft ? 1 : -1) * innerAngles[0]);
           return (_this$graphie5 = this.graphie) == null ? void 0 : _this$graphie5.addPoints(coords[rel(-1)], offset);
         }
         // @ts-expect-error - TS2339 - Property 'snapTo' does not exist on type 'PerseusGraphType'.
@@ -33118,7 +33644,7 @@ class LegacyInteractiveGraph extends React.Component {
           const innerAngle = lawOfCosines(sides[0], sides[2], sides[1]);
           const outerAngle = GraphUtils.findAngle(coords[rel(1)], coords[rel(-1)]);
           const onLeft = sign(ccw(coords[rel(-1)], coords[rel(1)], coords[i])) === 1;
-          const offset = polar(sides[0], outerAngle + (onLeft ? 1 : -1) * innerAngle);
+          const offset = polar$1(sides[0], outerAngle + (onLeft ? 1 : -1) * innerAngle);
           return (_this$graphie6 = this.graphie) == null ? void 0 : _this$graphie6.addPoints(coords[rel(-1)], offset);
         }
         // Snap to grid (already done)
@@ -33779,11 +34305,9 @@ class InteractiveGraph extends React.Component {
     const radius = magnitude(vector(...coords));
 
     // Adjust the lower point by angleOffsetDeg degrees
-    // @ts-expect-error - TS2542 - Index signature in type 'readonly Coord[]' only permits reading.
     coords[0] = [coords[1][0] + radius * Math.cos(offset), coords[1][1] + radius * Math.sin(offset)];
     // Position the upper point angle radians from the
     // lower point
-    // @ts-expect-error - TS2542 - Index signature in type 'readonly Coord[]' only permits reading.
     coords[2] = [coords[1][0] + radius * Math.cos(angle + offset), coords[1][1] + radius * Math.sin(angle + offset)];
     return coords;
   }
@@ -44396,7 +44920,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 = "24.2.0";
+const libVersion = "24.3.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {