@khanacademy/perseus-editor 14.6.4 → 14.7.0

package/dist/index.js

@@ -98,7 +98,7 @@ var arrowCounterClockwise__default = /*#__PURE__*/_interopDefaultLegacy(arrowCou
 
 // 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.7.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -33114,15 +33114,12 @@ 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 = function (startCoords) {
+  let allowReflexAngles = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  const vertex = startCoords[1];
+
+  // Get the angle in degrees and round it to the nearest whole number
+  const roundedAngle = perseus.getClockwiseAngle(startCoords, allowReflexAngles).toFixed(0);
   return `${roundedAngle}\u00B0 angle at (${vertex[0]}, ${vertex[1]})`;
 };
 const shouldShowStartCoordsUI = (graph, isStatic) => {
@@ -33156,13 +33153,14 @@ const shouldShowStartCoordsUI = (graph, isStatic) => {
 const StartCoordsAngle = props => {
   const {
     startCoords,
+    allowReflexAngles,
     onChange
   } = props;
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     style: styles$h.equationSection
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, null, "Starting equation:"), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.BodyMonospace, {
     style: styles$h.equationBody
-  }, getAngleEquation(startCoords))), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+  }, getAngleEquation(startCoords, allowReflexAngles))), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     style: styles$h.tile
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, "Point 1:"), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.small_12
@@ -33504,6 +33502,7 @@ const StartCoordsSettingsInner = props => {
     type,
     range,
     step,
+    allowReflexAngles,
     onChange
   } = props;
   switch (type) {
@@ -33567,6 +33566,7 @@ const StartCoordsSettingsInner = props => {
       });
       return /*#__PURE__*/React__namespace.createElement(StartCoordsAngle, {
         startCoords: angleCoords,
+        allowReflexAngles: allowReflexAngles,
         onChange: onChange
       });
     default:
@@ -33794,7 +33794,53 @@ class InteractiveGraphEditor extends React__namespace.Component {
           }
         });
       }
-    })), this.props.correct?.type === "polygon" && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(LabeledRow, {
+    })), this.props.correct?.type === "angle" && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+      style: styles$a.row
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
+      label: /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, null, "Show angle measures"),
+      checked:
+      // Don't show indeterminate checkbox state
+      !!this.props.correct?.showAngles,
+      onChange: newValue => {
+        if (this.props.graph?.type === "angle") {
+          invariant(this.props.correct.type === "angle", `Expected graph type to be angle, but got ${this.props.correct.type}`);
+          this.props.onChange({
+            correct: {
+              ...this.props.correct,
+              showAngles: newValue
+            },
+            graph: {
+              ...this.props.graph,
+              showAngles: newValue
+            }
+          });
+        }
+      }
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$b, null, /*#__PURE__*/React__namespace.createElement("p", null, "Displays the interior angle measures."))), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+      style: styles$a.row
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
+      label: /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, null, "Allow reflex angles"),
+      checked:
+      // Don't show indeterminate checkbox state
+      !!this.props.correct?.allowReflexAngles,
+      onChange: newValue => {
+        invariant(this.props.correct.type === "angle", `Expected graph type to be angle, but got ${this.props.correct.type}`);
+        invariant(this.props.graph?.type === "angle", `Expected graph type to be angle, but got ${this.props.graph?.type}`);
+        const update = {
+          allowReflexAngles: newValue
+        };
+        this.props.onChange({
+          correct: {
+            ...this.props.correct,
+            ...update
+          },
+          graph: {
+            ...this.props.graph,
+            ...update
+          }
+        });
+      }
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$b, null, /*#__PURE__*/React__namespace.createElement("p", null, "Allow students to be able to create reflex angles.")))), this.props.correct?.type === "polygon" && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(LabeledRow, {
       label: "Number of sides:"
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
       key: "polygon-select",