[kmath-radian-to-degree] Add a convertRadiansToDegrees function to kmath

.changeset/forty-foxes-brush.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/kmath": patch
+"@khanacademy/perseus-editor": patch
+---
+
+Add convertRadiansToDegrees function to kmath

packages/kmath/src/angles.test.ts

@@ -1,4 +1,8 @@
-import {calculateAngleInDegrees} from "./angles";
+import {
+    calculateAngleInDegrees,
+    convertDegreesToRadians,
+    convertRadiansToDegrees,
+} from "./angles";
 
 describe("calculateAngleInDegrees", () => {
     it.each`
@@ -15,3 +19,41 @@ describe("calculateAngleInDegrees", () => {
         expect(calculateAngleInDegrees([x, y])).toBe(expected);
     });
 });
+
+describe("convertDegreesToRadians", () => {
+    test.each`
+        degrees | radians
+        ${0}    | ${0}
+        ${45}   | ${Math.PI / 4}
+        ${90}   | ${Math.PI / 2}
+        ${180}  | ${Math.PI}
+        ${270}  | ${Math.PI * 1.5}
+        ${360}  | ${Math.PI * 2}
+        ${-45}  | ${-Math.PI / 4}
+        ${-90}  | ${-Math.PI / 2}
+    `(
+        "should convert $degrees degrees to $radians radians",
+        ({degrees, radians}) => {
+            expect(convertDegreesToRadians(degrees)).toBe(radians);
+        },
+    );
+});
+
+describe("convertRadiansToDegrees", () => {
+    test.each`
+        radians          | degrees
+        ${0}             | ${0}
+        ${Math.PI / 4}   | ${45}
+        ${Math.PI / 2}   | ${90}
+        ${Math.PI}       | ${180}
+        ${Math.PI * 1.5} | ${270}
+        ${Math.PI * 2}   | ${360}
+        ${-Math.PI / 4}  | ${-45}
+        ${-Math.PI / 2}  | ${-90}
+    `(
+        "should convert $radians radians to $degrees degrees",
+        ({radians, degrees}) => {
+            expect(convertRadiansToDegrees(radians)).toBe(degrees);
+        },
+    );
+});

packages/kmath/src/angles.ts

@@ -8,6 +8,12 @@ export function convertDegreesToRadians(degrees: number): number {
     return (degrees / 180) * Math.PI;
 }
 
+export function convertRadiansToDegrees(radians: number): number {
+    const degree = (radians / Math.PI) * 180;
+    // Account for floating point errors.
+    return Number(degree.toPrecision(15));
+}
+
 // Returns a value between -180 and 180, inclusive. The angle is measured
 // between the positive x-axis and the given vector.
 export function calculateAngleInDegrees([x, y]: Coord): number {

packages/perseus-editor/src/components/angle-input.tsx

@@ -1,11 +1,13 @@
+import {angles} from "@khanacademy/kmath";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
 import {spacing} from "@khanacademy/wonder-blocks-tokens";
 import {LabelMedium} from "@khanacademy/wonder-blocks-typography";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
 import ScrolllessNumberTextField from "./scrollless-number-text-field";
-import {degreeToRadian, radianToDegree} from "./util";
+
+const {convertDegreesToRadians, convertRadiansToDegrees} = angles;
 
 type Props = {
     angle: number;
@@ -16,7 +18,7 @@ const AngleInput = (props: Props) => {
     const {angle, onChange} = props;
 
     const [angleInput, setAngleInput] = React.useState(
-        radianToDegree(angle).toString(),
+        convertRadiansToDegrees(angle).toString(),
     );
 
     function handleAngleChange(newValue) {
@@ -30,7 +32,7 @@ const AngleInput = (props: Props) => {
         }
 
         // Update the graph.
-        onChange(degreeToRadian(newValue));
+        onChange(convertDegreesToRadians(newValue));
     }
 
     return (

packages/perseus-editor/src/components/util.ts

@@ -36,10 +36,3 @@ export function focusWithChromeStickyFocusBugWorkaround(element: Element) {
     // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'Element'.
     element.focus({preventScroll: true});
 }
-
-export function degreeToRadian(degrees: number) {
-    return (degrees / 180) * Math.PI;
-}
-export function radianToDegree(radians: number) {
-    return (radians / Math.PI) * 180;
-}

packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.tsx

@@ -1,3 +1,4 @@
+import {angles} from "@khanacademy/kmath";
 import {components} from "@khanacademy/perseus";
 import {lockedFigureFillStyles} from "@khanacademy/perseus-core";
 import Button from "@khanacademy/wonder-blocks-button";
@@ -13,7 +14,6 @@ import * as React from "react";
 import AngleInput from "../../../components/angle-input";
 import CoordinatePairInput from "../../../components/coordinate-pair-input";
 import PerseusEditorAccordion from "../../../components/perseus-editor-accordion";
-import {radianToDegree} from "../../../components/util";
 
 import ColorSelect from "./color-select";
 import EllipseSwatch from "./ellipse-swatch";
@@ -37,6 +37,7 @@ import type {
     LockedLabelType,
 } from "@khanacademy/perseus-core";
 
+const {convertRadiansToDegrees} = angles;
 const {InfoTip} = components;
 
 export type Props = LockedFigureSettingsCommonProps &
@@ -74,7 +75,7 @@ const LockedEllipseSettings = (props: Props) => {
         const spokenCenterX = await generateSpokenMathDetails(`$${center[0]}$`);
         const spokenCenterY = await generateSpokenMathDetails(`$${center[1]}$`);
         const spokenRotation = await generateSpokenMathDetails(
-            `$${radianToDegree(angle)}$`,
+            `$${convertRadiansToDegrees(angle)}$`,
         );
 
         const isCircle = radius[0] === radius[1];