@khanacademy/perseus 36.1.1 → 36.1.2

package/dist/es/index.js

@@ -10070,7 +10070,10 @@ const GraphUtils = {
     return point.distanceToPoint(point1, point2);
   },
   // Find the angle in degrees between two or three points
-  findAngle: function (point1, point2, vertex) {
+  // This function is deprecated as it has several issues calculating
+  // correctly when dealing with reflex angles or the position of point2
+  // (LEMS-2202) Remove this function while removing the Legacy Interactive Graph.
+  findAngleDeprecated: function (point1, point2, vertex) {
     if (vertex === undefined) {
       const x = point1[0] - point2[0];
       const y = point1[1] - point2[1];
@@ -10079,7 +10082,7 @@ const GraphUtils = {
       }
       return (180 + Math.atan2(-y, -x) * 180 / Math.PI + 360) % 360;
     }
-    return GraphUtils.findAngle(point1, vertex) - GraphUtils.findAngle(point2, vertex);
+    return GraphUtils.findAngleDeprecated(point1, vertex) - GraphUtils.findAngleDeprecated(point2, vertex);
   },
   graphs: {}
 };
@@ -11095,8 +11098,8 @@ _.extend(GraphUtils.Graphie.prototype, {
       p1 = options.point3;
       p3 = options.point1;
     }
-    const startAngle = GraphUtils.findAngle(p1, vertex);
-    const endAngle = GraphUtils.findAngle(p3, vertex);
+    const startAngle = GraphUtils.findAngleDeprecated(p1, vertex);
+    const endAngle = GraphUtils.findAngleDeprecated(p3, vertex);
     const angle = (endAngle + 360 - startAngle) % 360;
     const halfAngle = (startAngle + angle / 2) % 360;
     const sPadding = 5 * options.pushOut;
@@ -11263,15 +11266,15 @@ _.extend(GraphUtils.Graphie.prototype, {
     let angle = 135;
     let halfAngle;
     if (p1 && p3) {
-      const startAngle = GraphUtils.findAngle(p1, vertex);
-      const endAngle = GraphUtils.findAngle(p3, vertex);
+      const startAngle = GraphUtils.findAngleDeprecated(p1, vertex);
+      const endAngle = GraphUtils.findAngleDeprecated(p3, vertex);
       angle = (endAngle + 360 - startAngle) % 360;
       halfAngle = (startAngle + angle / 2 + 180) % 360;
     } else if (p1) {
-      const parallelAngle = GraphUtils.findAngle(vertex, p1);
+      const parallelAngle = GraphUtils.findAngleDeprecated(vertex, p1);
       halfAngle = parallelAngle + 90;
     } else if (p3) {
-      const parallelAngle = GraphUtils.findAngle(p3, vertex);
+      const parallelAngle = GraphUtils.findAngleDeprecated(p3, vertex);
       halfAngle = parallelAngle + 90;
     } else {
       // Standalone point
@@ -11477,7 +11480,7 @@ _.extend(GraphUtils.Graphie.prototype, {
         const vertex = constraints.fixedAngle.vertex.coord || constraints.fixedAngle.vertex;
         const ref = constraints.fixedAngle.ref.coord || constraints.fixedAngle.ref;
         const distPoint = constraints.fixedDistance.point.coord || constraints.fixedDistance.point;
-        const constrainedAngle = (constraints.fixedAngle.angle + GraphUtils.findAngle(ref, vertex)) * Math.PI / 180;
+        const constrainedAngle = (constraints.fixedAngle.angle + GraphUtils.findAngleDeprecated(ref, vertex)) * Math.PI / 180;
         const length = constraints.fixedDistance.dist;
         newCoord[0] = length * Math.cos(constrainedAngle) + distPoint[0];
         newCoord[1] = length * Math.sin(constrainedAngle) + distPoint[1];
@@ -11486,8 +11489,8 @@ _.extend(GraphUtils.Graphie.prototype, {
       } else if (typeof constraints.fixedAngle.angle === "number") {
         const vertex = constraints.fixedAngle.vertex.coord || constraints.fixedAngle.vertex;
         const ref = constraints.fixedAngle.ref.coord || constraints.fixedAngle.ref;
-        const constrainedAngle = (constraints.fixedAngle.angle + GraphUtils.findAngle(ref, vertex)) * Math.PI / 180;
-        const angle = GraphUtils.findAngle(coord, vertex) * Math.PI / 180;
+        const constrainedAngle = (constraints.fixedAngle.angle + GraphUtils.findAngleDeprecated(ref, vertex)) * Math.PI / 180;
+        const angle = GraphUtils.findAngleDeprecated(coord, vertex) * Math.PI / 180;
         const distance = GraphUtils.getDistance(coord, vertex);
         let length = distance * Math.cos(constrainedAngle - angle);
         length = length < 1.0 ? 1.0 : length;
@@ -11497,7 +11500,7 @@ _.extend(GraphUtils.Graphie.prototype, {
         // distance is constrained
       } else if (typeof constraints.fixedDistance.dist === "number") {
         const distPoint = constraints.fixedDistance.point.coord || constraints.fixedDistance.point;
-        let angle = GraphUtils.findAngle(coord, distPoint);
+        let angle = GraphUtils.findAngleDeprecated(coord, distPoint);
         const length = constraints.fixedDistance.dist;
         angle = angle * Math.PI / 180;
         newCoord[0] = length * Math.cos(angle) + distPoint[0];
@@ -13697,7 +13700,7 @@ _.extend(MovableAngle.prototype, {
       _.each([0, 2], function (i) {
         const oldPoint = points[i].coord;
         let newPoint = vector$1.add(oldPoint, delta);
-        let angle = GraphUtils.findAngle(newVertex, newPoint);
+        let angle = GraphUtils.findAngleDeprecated(newVertex, newPoint);
         angle *= Math.PI / 180;
         newPoint = graphie.constrainToBoundsOnAngle(newPoint, 10, angle);
         newPoints[i] = newPoint;
@@ -13730,7 +13733,7 @@ _.extend(MovableAngle.prototype, {
           return false;
         }
         if (snap) {
-          let angle = GraphUtils.findAngle(newPoint, vertex);
+          let angle = GraphUtils.findAngleDeprecated(newPoint, vertex);
           angle = Math.round((angle - snapOffset) / snap) * snap + snapOffset;
           const distance = GraphUtils.getDistance(newPoint, vertex);
           return vector$1.add(vertex, polar$1(distance, angle));
@@ -13818,7 +13821,7 @@ _.extend(MovableAngle.prototype, {
    * coords when interpreted in a clockwise direction.
    */
   _getClockwiseAngle: function (coords) {
-    const rawAngle = GraphUtils.findAngle(
+    const rawAngle = GraphUtils.findAngleDeprecated(
     // The order of these is "weird" to match what a clockwise
     // order is in graphie.labelAngle
     coords[2],
@@ -30672,16 +30675,39 @@ function polar(r, th) {
   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;
+// This function calculates the angle between two points and an optional vertex.
+// If the vertex is not provided, the angle is measured between the two points.
+// This does not account for reflex angles or clockwise position.
+const getAngleFromVertex = (point, vertex) => {
+  const x = point[0] - vertex[0];
+  const y = point[1] - vertex[1];
+  if (!x && !y) {
+    return 0;
   }
-  return findAngle(point1, vertex) - findAngle(point2, vertex);
+  return (180 + Math.atan2(-y, -x) * 180 / Math.PI + 360) % 360;
+};
+
+// This function calculates the clockwise angle between three points,
+// and is used to generate the labels and equation strings of the
+// current angle for the interactive graph.
+const getClockwiseAngle = (coords, allowReflexAngles = false) => {
+  const coordsCopy = [...coords];
+  // The coords are saved as [point1, vertex, point2] in the interactive graph
+  const areClockwise = clockwise$1([coordsCopy[0], coordsCopy[2], coordsCopy[1]]);
+
+  // We may need to reverse the coordinates if we allow
+  // reflex angles and the points are not in clockwise order.
+  const shouldReverseCoords = !areClockwise || allowReflexAngles;
+
+  // Reverse the coordinates accordingly to ensure the angle is calculated correctly
+  const clockwiseCoords = shouldReverseCoords ? coordsCopy.reverse() : coordsCopy;
+
+  // Calculate the angles between the two points and get the difference
+  // between the two angles to get the clockwise angle.
+  const startAngle = getAngleFromVertex(clockwiseCoords[0], clockwiseCoords[1]);
+  const endAngle = getAngleFromVertex(clockwiseCoords[2], clockwiseCoords[1]);
+  const angle = (startAngle + 360 - endAngle) % 360;
+  return angle;
 };
 
 const defaultGraphConfig = {
@@ -33103,8 +33129,8 @@ const Angle = ({
   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 startAngle = getAngleFromVertex(clockwiseCoords[0], vertex);
+  const endAngle = getAngleFromVertex(clockwiseCoords[1], vertex);
   const angle = (startAngle + 360 - endAngle) % 360;
 
   // Check if the angle is reflexive
@@ -34183,7 +34209,9 @@ const MafsGraph = props => {
     analytics.onAnalyticsEvent({
       type: "perseus:interactive-graph-widget:rendered",
       payload: {
-        type
+        type,
+        widgetType: "INTERACTIVE_GRAPH",
+        widgetId: "interactive-graph"
       }
     });
   });
@@ -35423,7 +35451,7 @@ function boundAndSnapAngleVertex({
   for (const i of [0, 2]) {
     const oldPoint = coordsCopy[i];
     let newPoint = vec.add(oldPoint, delta);
-    let angle = findAngle(newVertex, newPoint);
+    let angle = getAngleFromVertex(newVertex, newPoint);
     angle *= Math.PI / 180;
     newPoint = constrainToBoundsOnAngle(newPoint, angle, range, snapStep);
     newPoints[i] = newPoint;
@@ -35494,7 +35522,7 @@ function boundAndSnapAngleEndPoints(destinationPoint, {
   const vertex = coords[1];
 
   // Gets the angle between the coords and the vertex
-  let angle = findAngle(coordsCopy[index], vertex);
+  let angle = getAngleFromVertex(coordsCopy[index], vertex);
 
   // Snap the angle to the nearest multiple of snapDegrees (if provided)
   angle = Math.round((angle - offsetDegrees) / snap) * snap + offsetDegrees;
@@ -35540,8 +35568,8 @@ function boundAndSnapToPolygonAngle(destinationPoint, {
     angles[rel(j)] = Math.round(angles[rel(j)]);
   });
   const getAngle = function getAngle(a, vertex, b) {
-    const angle = findAngle(coordsCopy[rel(a)], coordsCopy[rel(b)], coordsCopy[rel(vertex)]);
-    return (angle + 360) % 360;
+    const angle = getClockwiseAngle([coordsCopy[rel(a)], coordsCopy[rel(vertex)], coordsCopy[rel(b)]]);
+    return angle;
   };
   const innerAngles = [angles[rel(-1)] - getAngle(-2, -1, 1), angles[rel(1)] - getAngle(-1, 1, 2)];
   innerAngles[2] = 180 - (innerAngles[0] + innerAngles[1]);
@@ -35568,7 +35596,7 @@ function boundAndSnapToPolygonAngle(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 = findAngle(coordsCopy[rel(1)], coordsCopy[rel(-1)]);
+  const outerAngle = getAngleFromVertex(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
@@ -35618,7 +35646,7 @@ function boundAndSnapToSides(destinationPoint, {
   const innerAngle = lawOfCosines(sides[0], sides[2], sides[1]);
 
   // Angle at the second vertex of the polygon
-  const outerAngle = findAngle(coordsCopy[rel(1)], coordsCopy[rel(-1)]);
+  const outerAngle = getAngleFromVertex(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.
@@ -35725,7 +35753,8 @@ const StatefulMafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
   const numPoints = graph.type === "point" ? graph.numPoints : null;
   const numSides = graph.type === "polygon" ? graph.numSides : null;
   const snapTo = graph.type === "polygon" ? graph.snapTo : null;
-  const showAngles = graph.type === "polygon" ? graph.showAngles : null;
+  const showAngles = graph.type === "polygon" || graph.type === "angle" ? graph.showAngles : null;
+  const allowReflexAngles = graph.type === "angle" ? graph.allowReflexAngles : null;
   const showSides = graph.type === "polygon" ? graph.showSides : null;
   const startCoords = "startCoords" in graph ? graph.startCoords : undefined;
   const originalPropsRef = useRef(props);
@@ -35738,7 +35767,7 @@ const StatefulMafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
     if (latestPropsRef.current !== originalPropsRef.current) {
       dispatch(reinitialize(latestPropsRef.current));
     }
-  }, [graph.type, numPoints, numSegments, numSides, snapTo, showAngles, showSides, latestPropsRef, startCoords]);
+  }, [graph.type, numPoints, numSegments, numSides, snapTo, showAngles, showSides, latestPropsRef, startCoords, allowReflexAngles]);
 
   // If the graph is static, it always displays the correct answer. This is
   // standard behavior for Perseus widgets (e.g. compare the Radio widget).
@@ -35927,17 +35956,15 @@ function interactiveGraphValidator(userInput, rubric) {
     } else if (userInput.type === "angle" && rubric.correct.type === "angle") {
       const guess = userInput.coords;
       const correct = rubric.correct.coords;
+      const allowReflexAngles = rubric.correct.allowReflexAngles;
       let match;
       if (rubric.correct.match === "congruent") {
         const angles = _.map([guess, correct], function (coords) {
-          const angle = GraphUtils.findAngle(
-          // @ts-expect-error - TS2532 - Object is possibly 'undefined'.
-          coords[2],
-          // @ts-expect-error - TS2532 - Object is possibly 'undefined'.
-          coords[0],
-          // @ts-expect-error - TS2532 - Object is possibly 'undefined'.
-          coords[1]);
-          return (angle + 360) % 360;
+          if (!coords) {
+            return false;
+          }
+          const angle = getClockwiseAngle(coords, allowReflexAngles);
+          return angle;
         });
         // @ts-expect-error - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
         match = eq$1(...angles);
@@ -36805,7 +36832,7 @@ class LegacyInteractiveGraph extends React.Component {
             angles[rel(j)] = Math.round(angles[rel(j)]);
           });
           const getAngle = function getAngle(a, vertex, b) {
-            const angle = GraphUtils.findAngle(coords[rel(a)], coords[rel(b)], coords[rel(vertex)]);
+            const angle = GraphUtils.findAngleDeprecated(coords[rel(a)], coords[rel(b)], coords[rel(vertex)]);
             return (angle + 360) % 360;
           };
           const innerAngles = [angles[rel(-1)] - getAngle(-2, -1, 1), angles[rel(1)] - getAngle(-1, 1, 2)];
@@ -36824,7 +36851,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 outerAngle = GraphUtils.findAngleDeprecated(coords[rel(1)], coords[rel(-1)]);
           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);
         }
@@ -36848,7 +36875,7 @@ class LegacyInteractiveGraph extends React.Component {
 
           // Solve for angle by using the law of cosines
           const innerAngle = lawOfCosines(sides[0], sides[2], sides[1]);
-          const outerAngle = GraphUtils.findAngle(coords[rel(1)], coords[rel(-1)]);
+          const outerAngle = GraphUtils.findAngleDeprecated(coords[rel(1)], coords[rel(-1)]);
           const onLeft = sign(ccw(coords[rel(-1)], coords[rel(1)], coords[i])) === 1;
           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);
@@ -37622,7 +37649,8 @@ class InteractiveGraph extends React.Component {
       throw makeInvalidTypeError("getAngleEquationString", "angle");
     }
     const coords = InteractiveGraph.getAngleCoords(props.graph, props);
-    const angle = GraphUtils.findAngle(coords[2], coords[0], coords[1]);
+    const allowReflexAngles = props.graph.allowReflexAngles;
+    const angle = getClockwiseAngle(coords, allowReflexAngles);
     return angle.toFixed(0) + "\u00B0 angle" + " at (" + coords[1].join(", ") + ")";
   }
   static validate(userInput, rubric) {
@@ -44945,7 +44973,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 = "36.1.1";
+const libVersion = "36.1.2";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -48505,5 +48533,5 @@ const EditorJsonify = {
   }
 };
 
-export { ApiOptions, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, dependencies as Dependencies, EditorJsonify, Expression, util as GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusExpressionAnswerFormConsidered, PerseusI18nContext, PerseusI18nContextProvider, PerseusMarkdown, Plotter$1 as PlotterWidget, QUESTION_WIDGETS, Radio, Renderer, ref as ServerItemRenderer, sizingUtils as SizingUtils, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, widgets$1 as Widgets, addWidget, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, contentHasWidgetType, convertWidgetNameToEnum, displaySigFigs, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestInteractiveGraphWidget, generateTestNumericInputWidget, generateTestPerseusItem, generateTestRadioWidget, genericPerseusItemData, getAngleCoords, getAnswerFromUserInput, getAnswersFromWidgets, getCircleCoords, getCorrectAnswerForWidgetId, getImagesWithoutAltData, getLineCoords, getLinearSystemCoords, getPointCoords, getPolygonCoords, getQuadraticCoords, getSegmentCoords, getSinusoidCoords, getValidWidgetIds, getWidgetFromWidgetMap, getWidgetIdsFromContent, getWidgetIdsFromContentByType, getWidgetTypeByWidgetId, getWidgetsFromWidgetMap, getWidgetsMapFromItemData, globalConstants, globalStyles, iconPaths as icons, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, isWidgetIdInContent, isWrongAnswerSupported, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, lockedFigureColors, lockedFigureFillStyles, makeSafeUrl, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, shouldHaveIndividualAnswer, traverse, usePerseusI18n, violatingWidgets, allWidgets as widgets };
+export { ApiOptions, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, dependencies as Dependencies, EditorJsonify, Expression, util as GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusExpressionAnswerFormConsidered, PerseusI18nContext, PerseusI18nContextProvider, PerseusMarkdown, Plotter$1 as PlotterWidget, QUESTION_WIDGETS, Radio, Renderer, ref as ServerItemRenderer, sizingUtils as SizingUtils, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, widgets$1 as Widgets, addWidget, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, contentHasWidgetType, convertWidgetNameToEnum, displaySigFigs, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestInteractiveGraphWidget, generateTestNumericInputWidget, generateTestPerseusItem, generateTestRadioWidget, genericPerseusItemData, getAngleCoords, getAnswerFromUserInput, getAnswersFromWidgets, getCircleCoords, getClockwiseAngle, getCorrectAnswerForWidgetId, getImagesWithoutAltData, getLineCoords, getLinearSystemCoords, getPointCoords, getPolygonCoords, getQuadraticCoords, getSegmentCoords, getSinusoidCoords, getValidWidgetIds, getWidgetFromWidgetMap, getWidgetIdsFromContent, getWidgetIdsFromContentByType, getWidgetTypeByWidgetId, getWidgetsFromWidgetMap, getWidgetsMapFromItemData, globalConstants, globalStyles, iconPaths as icons, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, isWidgetIdInContent, isWrongAnswerSupported, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, lockedFigureColors, lockedFigureFillStyles, makeSafeUrl, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, shouldHaveIndividualAnswer, traverse, usePerseusI18n, violatingWidgets, allWidgets as widgets };
 //# sourceMappingURL=index.js.map