From 2c9983ceea77227a530e1a74e72736d14acd627f Mon Sep 17 00:00:00 2001 From: Anakaren Rojas Date: Wed, 4 Dec 2024 15:09:10 -0800 Subject: [PATCH] rename func and use getClockwiseAngle func --- .../interactive-graphs/graphs/angle.tsx | 18 +++++------------- .../graphs/components/angle-indicators.test.ts | 10 +++++++--- .../graphs/components/angle-indicators.tsx | 4 ++-- .../widgets/interactive-graphs/math/angles.ts | 10 +++++++--- 4 files changed, 21 insertions(+), 21 deletions(-) diff --git a/packages/perseus/src/widgets/interactive-graphs/graphs/angle.tsx b/packages/perseus/src/widgets/interactive-graphs/graphs/angle.tsx index 37c6048cd8..22c10fd765 100644 --- a/packages/perseus/src/widgets/interactive-graphs/graphs/angle.tsx +++ b/packages/perseus/src/widgets/interactive-graphs/graphs/angle.tsx @@ -2,16 +2,12 @@ import {vec} from "mafs"; import * as React from "react"; import {usePerseusI18n} from "../../../components/i18n-context"; -import {X, Y, calculateAngleInDegrees, polar} from "../math"; +import {X, Y, calculateAngleInDegrees, getClockwiseAngle, polar} from "../math"; import {findIntersectionOfRays} from "../math/geometry"; import {actions} from "../reducer/interactive-graph-action"; import useGraphConfig from "../reducer/use-graph-config"; -import { - Angle, - getWholeAngleMeasure, - getClockwiseCoords, -} from "./components/angle-indicators"; +import {Angle} from "./components/angle-indicators"; import {trimRange} from "./components/movable-line"; import {MovablePoint} from "./components/movable-point"; import {SVGLine} from "./components/svg-line"; @@ -100,14 +96,10 @@ function AngleGraph({dispatch, graphState}: AngleGraphProps) { showAngles: showAngles || false, // Whether to show the angle or not }; - // Get angle measure - const clockwiseCoords = getClockwiseCoords( - endPoints, - centerPoint, + const angleLabel = getClockwiseAngle( + [endPoints[0], centerPoint, endPoints[1]], allowReflexAngles, ); - const angleMeasure = getWholeAngleMeasure(clockwiseCoords, centerPoint); - const angleLabel = `${allowReflexAngles ? 360 - angleMeasure : angleMeasure}`; const {strings, locale} = usePerseusI18n(); @@ -144,7 +136,7 @@ function AngleGraph({dispatch, graphState}: AngleGraphProps) { const label = showAngles ? strings.srVertexWithAngleAtCoordinates({ ...formattedVertexCoordinates, - angle: angleLabel, + angle: `${angleLabel}`, }) : strings.srVertexAtCoordinates(formattedVertexCoordinates); setVertexAriaLabel(label); diff --git a/packages/perseus/src/widgets/interactive-graphs/graphs/components/angle-indicators.test.ts b/packages/perseus/src/widgets/interactive-graphs/graphs/components/angle-indicators.test.ts index 5faba8dbe7..2b94121c8b 100644 --- a/packages/perseus/src/widgets/interactive-graphs/graphs/components/angle-indicators.test.ts +++ b/packages/perseus/src/widgets/interactive-graphs/graphs/components/angle-indicators.test.ts @@ -1,7 +1,7 @@ import {getClockwiseAngle} from "../../math"; import { - getClockwiseCoords, + adjustCoordsForAngleCalculation, getWholeAngleMeasure, shouldDrawArcOutside, } from "./angle-indicators"; @@ -151,7 +151,9 @@ describe("getClockwiseCoords", () => { [1, 1], ]; - expect(getClockwiseCoords(coords, coords[0])).toEqual(coords); + expect(adjustCoordsForAngleCalculation(coords, coords[0])).toEqual( + coords, + ); }); test("should return the coordinates in counter-clockwise order when reflex angles are allowed", () => { @@ -161,7 +163,9 @@ describe("getClockwiseCoords", () => { [0, 1], ]; - expect(getClockwiseCoords(coords, coords[0], true)).toEqual([ + expect( + adjustCoordsForAngleCalculation(coords, coords[0], true), + ).toEqual([ [0, 1], [1, 0], [0, 0], diff --git a/packages/perseus/src/widgets/interactive-graphs/graphs/components/angle-indicators.tsx b/packages/perseus/src/widgets/interactive-graphs/graphs/components/angle-indicators.tsx index 41199b48f0..e898d28154 100644 --- a/packages/perseus/src/widgets/interactive-graphs/graphs/components/angle-indicators.tsx +++ b/packages/perseus/src/widgets/interactive-graphs/graphs/components/angle-indicators.tsx @@ -154,7 +154,7 @@ export function getWholeAngleMeasure(coords: Vector2[], vertex: vec.Vector2) { return parseFloat(angle.toFixed(0)); } -export function getClockwiseCoords( +export function adjustCoordsForAngleCalculation( coords: Vector2[], vertex: vec.Vector2, allowReflexAngles: boolean = false, @@ -175,7 +175,7 @@ export const Angle = ({ range, }: AngleProps) => { // Get the clockwise coordinates - const clockwiseCoords = getClockwiseCoords( + const clockwiseCoords = adjustCoordsForAngleCalculation( coords, vertex, allowReflexAngles, diff --git a/packages/perseus/src/widgets/interactive-graphs/math/angles.ts b/packages/perseus/src/widgets/interactive-graphs/math/angles.ts index c2d20bd4e8..683fece749 100644 --- a/packages/perseus/src/widgets/interactive-graphs/math/angles.ts +++ b/packages/perseus/src/widgets/interactive-graphs/math/angles.ts @@ -38,9 +38,13 @@ export const getAngleFromVertex = ( 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. +/** + * 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. + * @param coords - The three points that make up the angle. Points are saved as [point1, vertex, point2] + * @param allowReflexAngles - Whether or not to allow reflex angles + */ export const getClockwiseAngle = ( coords: [Coord, Coord, Coord], allowReflexAngles: boolean = false,