@khanacademy/perseus-editor 14.6.4 → 14.6.5

package/dist/es/index.js

@@ -1,5 +1,5 @@
 import { addLibraryVersionToPerseusDebug, PerseusError, Errors } from '@khanacademy/perseus-core';
-import { constants, components, Widgets, icons, WIDGET_PROP_DENYLIST, Util, Log, PerseusMarkdown, preprocessTex, ApiOptions, buildMapper, itemToTree, buildEmptyItemTreeForShape, shapes, ItemExtras, itemDataVersion, ClassNames, MultiItems, traverse, Categorizer as Categorizer$1, Changeable, EditorJsonify, Dependencies, PerseusExpressionAnswerFormConsidered, Expression, interactiveSizes, KhanMath, GrapherWidget, GrapherUtil, SizingUtils, PerseusI18nContext, KhanColors, lockedFigureColors, lockedFigureFillStyles, getAngleCoords, getPolygonCoords, getPointCoords, getQuadraticCoords, getSinusoidCoords, getCircleCoords, getLinearSystemCoords, getSegmentCoords, getLineCoords, InteractiveGraphWidget, globalStyles, globalConstants, MatrixWidget, makeSafeUrl, PlotterWidget, plotterPlotTypes, BaseRadio, TableWidget, widgets } from '@khanacademy/perseus';
+import { constants, components, Widgets, icons, WIDGET_PROP_DENYLIST, Util, Log, PerseusMarkdown, preprocessTex, ApiOptions, buildMapper, itemToTree, buildEmptyItemTreeForShape, shapes, ItemExtras, itemDataVersion, ClassNames, MultiItems, traverse, Categorizer as Categorizer$1, Changeable, EditorJsonify, Dependencies, PerseusExpressionAnswerFormConsidered, Expression, interactiveSizes, KhanMath, GrapherWidget, GrapherUtil, SizingUtils, PerseusI18nContext, KhanColors, lockedFigureColors, lockedFigureFillStyles, getAngleCoords, getPolygonCoords, getPointCoords, getQuadraticCoords, getSinusoidCoords, getCircleCoords, getLinearSystemCoords, getSegmentCoords, getLineCoords, getClockwiseAngle, InteractiveGraphWidget, globalStyles, globalConstants, MatrixWidget, makeSafeUrl, PlotterWidget, plotterPlotTypes, BaseRadio, TableWidget, widgets } from '@khanacademy/perseus';
 export { widgets } from '@khanacademy/perseus';
 import * as React from 'react';
 import { useRef, useEffect, useState, useId } from 'react';
@@ -46,7 +46,7 @@ import arrowCounterClockwise from '@phosphor-icons/core/bold/arrow-counter-clock
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "14.6.4";
+const libVersion = "14.6.5";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -32948,15 +32948,11 @@ const getQuadraticEquation = startCoords => {
   const c = (p2[0] * p3[0] * (p2[0] - p3[0]) * p1[1] + p3[0] * p1[0] * (p3[0] - p1[0]) * p2[1] + p1[0] * p2[0] * (p1[0] - p2[0]) * p3[1]) / denom;
   return "y = " + a.toFixed(3) + "x^2 + " + b.toFixed(3) + "x + " + c.toFixed(3);
 };
-const findAngle = (point1, point2) => {
-  const x = point1[0] - point2[0];
-  const y = point1[1] - point2[1];
-  return (180 + Math.atan2(-y, -x) * 180 / Math.PI + 360) % 360;
-};
-const getAngleEquation = startCoords => {
-  const [point1, vertex, point2] = startCoords;
-  const angle = findAngle(point2, vertex) - findAngle(point1, vertex);
-  const roundedAngle = angle.toFixed(0);
+const getAngleEquation = (startCoords, allowReflexAngles = false) => {
+  const vertex = startCoords[1];
+
+  // Get the angle in degrees and round it to the nearest whole number
+  const roundedAngle = getClockwiseAngle(startCoords, allowReflexAngles).toFixed(0);
   return `${roundedAngle}\u00B0 angle at (${vertex[0]}, ${vertex[1]})`;
 };
 const shouldShowStartCoordsUI = (graph, isStatic) => {
@@ -32990,13 +32986,14 @@ const shouldShowStartCoordsUI = (graph, isStatic) => {
 const StartCoordsAngle = props => {
   const {
     startCoords,
+    allowReflexAngles,
     onChange
   } = props;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
     style: styles$h.equationSection
   }, /*#__PURE__*/React.createElement(LabelMedium, null, "Starting equation:"), /*#__PURE__*/React.createElement(BodyMonospace, {
     style: styles$h.equationBody
-  }, getAngleEquation(startCoords))), /*#__PURE__*/React.createElement(View, {
+  }, getAngleEquation(startCoords, allowReflexAngles))), /*#__PURE__*/React.createElement(View, {
     style: styles$h.tile
   }, /*#__PURE__*/React.createElement(LabelLarge, null, "Point 1:"), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.small_12
@@ -33338,6 +33335,7 @@ const StartCoordsSettingsInner = props => {
     type,
     range,
     step,
+    allowReflexAngles,
     onChange
   } = props;
   switch (type) {
@@ -33401,6 +33399,7 @@ const StartCoordsSettingsInner = props => {
       });
       return /*#__PURE__*/React.createElement(StartCoordsAngle, {
         startCoords: angleCoords,
+        allowReflexAngles: allowReflexAngles,
         onChange: onChange
       });
     default:
@@ -33515,7 +33514,7 @@ class InteractiveGraphEditor extends React.Component {
     return json;
   }
   render() {
-    var _this$props$graph$typ, _this$props$graph2, _this$props$apiOption, _this$props$apiOption2, _this$props$fullGraph, _this$props$fullGraph2, _this$props$correct, _this$props$correct2, _this$props$correct3, _this$props$correct4, _this$props$correct5, _this$props$correct6, _this$props$correct7, _this$props$correct8, _this$props$correct9, _this$props$correct10, _this$props$correct11, _this$props$graph8, _this$props$apiOption3, _this$props$apiOption4;
+    var _this$props$graph$typ, _this$props$graph2, _this$props$apiOption, _this$props$apiOption2, _this$props$fullGraph, _this$props$fullGraph2, _this$props$correct, _this$props$correct2, _this$props$correct3, _this$props$correct4, _this$props$correct5, _this$props$correct6, _this$props$correct7, _this$props$correct8, _this$props$correct9, _this$props$correct10, _this$props$correct11, _this$props$correct12, _this$props$correct13, _this$props$correct14, _this$props$graph11, _this$props$apiOption3, _this$props$apiOption4;
     let graph;
     let equationString;
     const gridStep = this.props.gridStep || Util.getGridStep(this.props.range, this.props.step, interactiveSizes.defaultBoxSize);
@@ -33619,15 +33618,55 @@ class InteractiveGraphEditor extends React.Component {
           }
         });
       }
-    })), ((_this$props$correct3 = this.props.correct) == null ? void 0 : _this$props$correct3.type) === "polygon" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LabeledRow, {
+    })), ((_this$props$correct3 = this.props.correct) == null ? void 0 : _this$props$correct3.type) === "angle" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
+      style: styles$a.row
+    }, /*#__PURE__*/React.createElement(Checkbox$1, {
+      label: /*#__PURE__*/React.createElement(LabelSmall, null, "Show angle measures"),
+      checked:
+      // Don't show indeterminate checkbox state
+      !!((_this$props$correct4 = this.props.correct) != null && _this$props$correct4.showAngles),
+      onChange: newValue => {
+        var _this$props$graph3;
+        if (((_this$props$graph3 = this.props.graph) == null ? void 0 : _this$props$graph3.type) === "angle") {
+          invariant(this.props.correct.type === "angle", `Expected graph type to be angle, but got ${this.props.correct.type}`);
+          this.props.onChange({
+            correct: _extends({}, this.props.correct, {
+              showAngles: newValue
+            }),
+            graph: _extends({}, this.props.graph, {
+              showAngles: newValue
+            })
+          });
+        }
+      }
+    }), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.createElement("p", null, "Displays the interior angle measures."))), /*#__PURE__*/React.createElement(View, {
+      style: styles$a.row
+    }, /*#__PURE__*/React.createElement(Checkbox$1, {
+      label: /*#__PURE__*/React.createElement(LabelSmall, null, "Allow reflex angles"),
+      checked:
+      // Don't show indeterminate checkbox state
+      !!((_this$props$correct5 = this.props.correct) != null && _this$props$correct5.allowReflexAngles),
+      onChange: newValue => {
+        var _this$props$graph4, _this$props$graph5;
+        invariant(this.props.correct.type === "angle", `Expected graph type to be angle, but got ${this.props.correct.type}`);
+        invariant(((_this$props$graph4 = this.props.graph) == null ? void 0 : _this$props$graph4.type) === "angle", `Expected graph type to be angle, but got ${(_this$props$graph5 = this.props.graph) == null ? void 0 : _this$props$graph5.type}`);
+        const update = {
+          allowReflexAngles: newValue
+        };
+        this.props.onChange({
+          correct: _extends({}, this.props.correct, update),
+          graph: _extends({}, this.props.graph, update)
+        });
+      }
+    }), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.createElement("p", null, "Allow students to be able to create reflex angles.")))), ((_this$props$correct6 = this.props.correct) == null ? void 0 : _this$props$correct6.type) === "polygon" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LabeledRow, {
       label: "Number of sides:"
     }, /*#__PURE__*/React.createElement(SingleSelect, {
       key: "polygon-select",
-      selectedValue: (_this$props$correct4 = this.props.correct) != null && _this$props$correct4.numSides ? `${this.props.correct.numSides}` : "3",
+      selectedValue: (_this$props$correct7 = this.props.correct) != null && _this$props$correct7.numSides ? `${this.props.correct.numSides}` : "3",
       placeholder: "",
       onChange: newValue => {
-        var _this$props$graph3;
-        invariant(((_this$props$graph3 = this.props.graph) == null ? void 0 : _this$props$graph3.type) === "polygon");
+        var _this$props$graph6;
+        invariant(((_this$props$graph6 = this.props.graph) == null ? void 0 : _this$props$graph6.type) === "polygon");
         const updates = {
           numSides: parsePointCount(newValue),
           coords: null,
@@ -33649,14 +33688,14 @@ class InteractiveGraphEditor extends React.Component {
     })])), /*#__PURE__*/React.createElement(LabeledRow, {
       label: "Snap to:"
     }, /*#__PURE__*/React.createElement(SingleSelect, {
-      selectedValue: ((_this$props$correct5 = this.props.correct) == null ? void 0 : _this$props$correct5.snapTo) || "grid"
+      selectedValue: ((_this$props$correct8 = this.props.correct) == null ? void 0 : _this$props$correct8.snapTo) || "grid"
       // Never uses placeholder, always has value
       ,
       placeholder: "",
       onChange: newValue => {
-        var _this$props$graph4, _this$props$graph5;
+        var _this$props$graph7, _this$props$graph8;
         invariant(this.props.correct.type === "polygon", `Expected correct answer type to be polygon, but got ${this.props.correct.type}`);
-        invariant(((_this$props$graph4 = this.props.graph) == null ? void 0 : _this$props$graph4.type) === "polygon", `Expected graph type to be polygon, but got ${(_this$props$graph5 = this.props.graph) == null ? void 0 : _this$props$graph5.type}`);
+        invariant(((_this$props$graph7 = this.props.graph) == null ? void 0 : _this$props$graph7.type) === "polygon", `Expected graph type to be polygon, but got ${(_this$props$graph8 = this.props.graph) == null ? void 0 : _this$props$graph8.type}`);
         const updates = {
           snapTo: newValue,
           coords: null
@@ -33670,10 +33709,10 @@ class InteractiveGraphEditor extends React.Component {
     }, /*#__PURE__*/React.createElement(OptionItem, {
       value: "grid",
       label: "grid"
-    }), ((_this$props$correct6 = this.props.correct) == null ? void 0 : _this$props$correct6.numSides) !== "unlimited" && /*#__PURE__*/React.createElement(OptionItem, {
+    }), ((_this$props$correct9 = this.props.correct) == null ? void 0 : _this$props$correct9.numSides) !== "unlimited" && /*#__PURE__*/React.createElement(OptionItem, {
       value: "angles",
       label: "interior angles"
-    }), ((_this$props$correct7 = this.props.correct) == null ? void 0 : _this$props$correct7.numSides) !== "unlimited" && /*#__PURE__*/React.createElement(OptionItem, {
+    }), ((_this$props$correct10 = this.props.correct) == null ? void 0 : _this$props$correct10.numSides) !== "unlimited" && /*#__PURE__*/React.createElement(OptionItem, {
       value: "sides",
       label: "side measures"
     })), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.createElement("p", null, "These options affect the movement of the vertex points. The grid option will guide the points to the nearest half step along the grid."), /*#__PURE__*/React.createElement("p", null, "The interior angle and side measure options guide the points to the nearest whole angle or side measure respectively."))), /*#__PURE__*/React.createElement(View, {
@@ -33682,10 +33721,10 @@ class InteractiveGraphEditor extends React.Component {
       label: /*#__PURE__*/React.createElement(LabelSmall, null, "Show angle measures"),
       checked:
       // Don't show indeterminate checkbox state
-      !!((_this$props$correct8 = this.props.correct) != null && _this$props$correct8.showAngles),
+      !!((_this$props$correct11 = this.props.correct) != null && _this$props$correct11.showAngles),
       onChange: () => {
-        var _this$props$graph6;
-        if (((_this$props$graph6 = this.props.graph) == null ? void 0 : _this$props$graph6.type) === "polygon") {
+        var _this$props$graph9;
+        if (((_this$props$graph9 = this.props.graph) == null ? void 0 : _this$props$graph9.type) === "polygon") {
           invariant(this.props.correct.type === "polygon", `Expected graph type to be polygon, but got ${this.props.correct.type}`);
           this.props.onChange({
             correct: _extends({}, this.props.correct, {
@@ -33703,10 +33742,10 @@ class InteractiveGraphEditor extends React.Component {
       label: /*#__PURE__*/React.createElement(LabelSmall, null, "Show side measures"),
       checked:
       // Don't show indeterminate checkbox state
-      !!((_this$props$correct9 = this.props.correct) != null && _this$props$correct9.showSides),
+      !!((_this$props$correct12 = this.props.correct) != null && _this$props$correct12.showSides),
       onChange: () => {
-        var _this$props$graph7;
-        if (((_this$props$graph7 = this.props.graph) == null ? void 0 : _this$props$graph7.type) === "polygon" && this.props.correct.type === "polygon") {
+        var _this$props$graph10;
+        if (((_this$props$graph10 = this.props.graph) == null ? void 0 : _this$props$graph10.type) === "polygon" && this.props.correct.type === "polygon") {
           this.props.onChange({
             correct: _extends({}, this.props.correct, {
               showSides: !this.props.correct.showSides
@@ -33717,10 +33756,10 @@ class InteractiveGraphEditor extends React.Component {
           });
         }
       }
-    }), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.createElement("p", null, "Displays the side lengths.")))), ((_this$props$correct10 = this.props.correct) == null ? void 0 : _this$props$correct10.type) === "segment" && /*#__PURE__*/React.createElement(LabeledRow, {
+    }), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.createElement("p", null, "Displays the side lengths.")))), ((_this$props$correct13 = this.props.correct) == null ? void 0 : _this$props$correct13.type) === "segment" && /*#__PURE__*/React.createElement(LabeledRow, {
       label: "Number of segments:"
     }, /*#__PURE__*/React.createElement(SegmentCountSelector, {
-      numSegments: (_this$props$correct11 = this.props.correct) == null ? void 0 : _this$props$correct11.numSegments,
+      numSegments: (_this$props$correct14 = this.props.correct) == null ? void 0 : _this$props$correct14.numSegments,
       onChange: sides => {
         this.props.onChange({
           correct: {
@@ -33734,7 +33773,7 @@ class InteractiveGraphEditor extends React.Component {
           }
         });
       }
-    })), ((_this$props$graph8 = this.props.graph) == null ? void 0 : _this$props$graph8.type) && shouldShowStartCoordsUI(this.props.graph, this.props.static) && /*#__PURE__*/React.createElement(StartCoordsSettings, _extends({}, this.props.graph, {
+    })), ((_this$props$graph11 = this.props.graph) == null ? void 0 : _this$props$graph11.type) && shouldShowStartCoordsUI(this.props.graph, this.props.static) && /*#__PURE__*/React.createElement(StartCoordsSettings, _extends({}, this.props.graph, {
       range: this.props.range,
       step: this.props.step,
       onChange: this.changeStartCoords