From c53e138b7f9141e8135df541fef66588ff6b8245 Mon Sep 17 00:00:00 2001 From: Nisha Yerunkar Date: Tue, 4 Feb 2025 14:19:40 -0800 Subject: [PATCH 1/2] [kmath-radian-to-degree] Add a `convertRadiansToDegrees` function to kmath Currently kmath has a `convertDegreesToRadians` function, but not the other way around. - Add `convertRadiansToDegrees` function to kmath - Replace all the identical function in other repos with this new one Issue: none Test plan: `yarn jest packages/kmath/src/angles.test.ts` `yarn jest` --- packages/kmath/src/angles.test.ts | 44 ++++++++++++++++++- packages/kmath/src/angles.ts | 6 +++ .../src/components/__tests__/util.test.ts | 39 ---------------- .../src/components/angle-input.tsx | 8 ++-- .../perseus-editor/src/components/util.ts | 7 --- .../locked-ellipse-settings.tsx | 5 ++- 6 files changed, 57 insertions(+), 52 deletions(-) delete mode 100644 packages/perseus-editor/src/components/__tests__/util.test.ts diff --git a/packages/kmath/src/angles.test.ts b/packages/kmath/src/angles.test.ts index 18e5b58919..674aae789f 100644 --- a/packages/kmath/src/angles.test.ts +++ b/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); + }, + ); +}); diff --git a/packages/kmath/src/angles.ts b/packages/kmath/src/angles.ts index ec4b55b294..583f5eb070 100644 --- a/packages/kmath/src/angles.ts +++ b/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 { diff --git a/packages/perseus-editor/src/components/__tests__/util.test.ts b/packages/perseus-editor/src/components/__tests__/util.test.ts deleted file mode 100644 index b9a5f1970e..0000000000 --- a/packages/perseus-editor/src/components/__tests__/util.test.ts +++ /dev/null @@ -1,39 +0,0 @@ -import {degreeToRadian, radianToDegree} from "../util"; - -describe("degreeToRadian", () => { - 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(degreeToRadian(degrees)).toBe(radians); - }, - ); -}); - -describe("radianToDegree", () => { - 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(radianToDegree(radians)).toBe(degrees); - }, - ); -}); diff --git a/packages/perseus-editor/src/components/angle-input.tsx b/packages/perseus-editor/src/components/angle-input.tsx index 77e99df55e..aa477e68f4 100644 --- a/packages/perseus-editor/src/components/angle-input.tsx +++ b/packages/perseus-editor/src/components/angle-input.tsx @@ -1,3 +1,4 @@ +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"; @@ -5,7 +6,8 @@ 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 ( diff --git a/packages/perseus-editor/src/components/util.ts b/packages/perseus-editor/src/components/util.ts index 9a932977d7..1c2c33f7d5 100644 --- a/packages/perseus-editor/src/components/util.ts +++ b/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; -} diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.tsx index 7f4e3c5e20..2d258880ff 100644 --- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.tsx +++ b/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]; From 865167352b7a2eee1666258267fc8da00799491d Mon Sep 17 00:00:00 2001 From: Nisha Yerunkar Date: Tue, 4 Feb 2025 14:21:27 -0800 Subject: [PATCH 2/2] [kmath-radian-to-degree] docs(changeset): Add convertRadiansToDegrees function to kmath --- .changeset/forty-foxes-brush.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/forty-foxes-brush.md diff --git a/.changeset/forty-foxes-brush.md b/.changeset/forty-foxes-brush.md new file mode 100644 index 0000000000..e64c7a63f6 --- /dev/null +++ b/.changeset/forty-foxes-brush.md @@ -0,0 +1,6 @@ +--- +"@khanacademy/kmath": patch +"@khanacademy/perseus-editor": patch +--- + +Add convertRadiansToDegrees function to kmath