Include zoom level in unlimted interactive graph calculations (#3221)

## Summary:
This PR fixes a bug related to our Mobile Application and our Interactive Graph Widgets. 

The issue was that we're adding a zoom style in frontend based on the user's fontScale, in order to help support accessibility features on iOS. Unfortunately, this zoom affects coordinate calculations for click/touch events, as both clientX/clientY and getBoundingClientRect() return zoomed values, but the SVG coordinate system expects unzoomed pixel values. As a result, iOS users with increased fontSizes would find the position of points they add/drag to be inaccurate to their touch position. 

In order to resolve that, I've added logic to calculate the cumulative zoom level. I chose to do it cumulatively, rather than finding a specific element, to help prevent future regressions. It seemed plausible that class names or hierarchy could be changed at some point in the future, and the cumulative approach allows us to remain platform agnostic. The calculations seemed fairly negligible, but I'm happy to adjust if anyone has any concerns about it! 

Issue: LEMS-3258

## Test plan:
- Manual Testing using fontScale parameter on Desktop
- Manual Testing with Mobile Applications  (Both Android and iOS, at both normal and enhanced zooms)
- Existing tests pass

Author: SonicScrewdriver

Reviewers: SonicScrewdriver, mark-fitzgerald

Required Reviewers:

Approved By: mark-fitzgerald

Checks: ⏭️  1 check has been skipped, ✅ 10 checks were successful

Pull Request URL: #3221

Author: SonicScrewdriver

.changeset/mighty-pants-retire.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": minor
+---
+
+Bugfix to account for frontend's application of zoom to support fontScaling on mobile.

packages/perseus/src/widgets/interactive-graphs/graphs/point.tsx

@@ -3,6 +3,7 @@ import * as React from "react";
 
 import {actions} from "../reducer/interactive-graph-action";
 import useGraphConfig from "../reducer/use-graph-config";
+import {getCSSZoomFactor} from "../utils";
 
 import {MovablePoint} from "./components/movable-point";
 import {srFormatNumber} from "./screenreader-text";
@@ -135,9 +136,11 @@ function UnlimitedPointGraph(statefulProps: StatefulProps) {
 
                     const elementRect =
                         event.currentTarget.getBoundingClientRect();
+                    const zoomFactor = getCSSZoomFactor(event.currentTarget);
 
-                    const x = event.clientX - elementRect.x;
-                    const y = event.clientY - elementRect.y;
+                    // Compensate for CSS zoom applied by mobile font scaling
+                    const x = (event.clientX - elementRect.x) / zoomFactor;
+                    const y = (event.clientY - elementRect.y) / zoomFactor;
 
                     const graphCoordinates = pixelsToVectors(
                         [[x, y]],

packages/perseus/src/widgets/interactive-graphs/graphs/polygon.tsx

@@ -17,7 +17,7 @@ import {
     calculateSideSnap,
 } from "../reducer/interactive-graph-reducer";
 import useGraphConfig from "../reducer/use-graph-config";
-import {bound, TARGET_SIZE} from "../utils";
+import {bound, getCSSZoomFactor, TARGET_SIZE} from "../utils";
 
 import {PolygonAngle} from "./components/angle-indicators";
 import {MovablePoint} from "./components/movable-point";
@@ -513,9 +513,11 @@ const UnlimitedPolygonGraph = (statefulProps: StatefulProps) => {
 
                     const elementRect =
                         event.currentTarget.getBoundingClientRect();
+                    const zoomFactor = getCSSZoomFactor(event.currentTarget);
 
-                    const x = event.clientX - elementRect.x;
-                    const y = event.clientY - elementRect.y;
+                    // Compensate for CSS zoom applied by mobile font scaling
+                    const x = (event.clientX - elementRect.x) / zoomFactor;
+                    const y = (event.clientY - elementRect.y) / zoomFactor;
 
                     const graphCoordinates = pixelsToVectors(
                         [[x, y]],

packages/perseus/src/widgets/interactive-graphs/graphs/use-draggable.ts

@@ -5,6 +5,7 @@ import invariant from "tiny-invariant";
 
 import {X, Y} from "../math";
 import useGraphConfig from "../reducer/use-graph-config";
+import {getCSSZoomFactor} from "../utils";
 
 import type {RefObject} from "react";
 
@@ -171,8 +172,18 @@ export function useDraggable(args: Params): DragState {
                     return;
                 }
 
-                const movement = vec.transform(
+                // Compensate for CSS zoom applied by mobile font scaling
+                // The pixelMovement from the drag library is in zoomed coordinates
+                const zoomFactor = target.current
+                    ? getCSSZoomFactor(target.current)
+                    : 1;
+                const unzoomedPixelMovement = vec.scale(
                     pixelMovement,
+                    1 / zoomFactor,
+                );
+
+                const movement = vec.transform(
+                    unzoomedPixelMovement,
                     inverseViewTransform,
                 );
                 onMove(

packages/perseus/src/widgets/interactive-graphs/utils.ts

@@ -237,3 +237,42 @@ export const calculateNestedSVGCoords = (
         viewboxY,
     };
 };
+
+/**
+ * Gets the effective CSS zoom factor applied to an element or any of its ancestors.
+ * This is used to compensate for the mobile font scaling zoom applied to the body
+ * or exercise content via the fontScale query parameter.
+ *
+ * On mobile, the parent application may apply CSS zoom to accommodate device font
+ * size settings. This zoom affects coordinate calculations for click/touch events,
+ * as both clientX/clientY and getBoundingClientRect() return zoomed values, but
+ * the SVG coordinate system expects unzoomed pixel values.
+ *
+ * Note: We calculate the cumulative zoom by traversing the DOM tree rather than
+ * targeting specific elements to avoid coupling Perseus to parent application
+ * implementation details (e.g., specific class names or DOM hierarchy).
+ *
+ * @param element - The DOM element to check for CSS zoom
+ * @returns The cumulative zoom factor (e.g., 1.5 for 150% zoom, 1.0 for no zoom)
+ */
+export function getCSSZoomFactor(element: Element): number {
+    let zoomFactor = 1;
+    let currentElement: Element | null = element;
+
+    // Traverse up the DOM tree to accumulate all zoom values
+    while (currentElement) {
+        const computedStyle = window.getComputedStyle(currentElement);
+        const zoom = computedStyle.zoom;
+
+        if (zoom && zoom !== "normal") {
+            const zoomValue = parseFloat(zoom);
+            if (!isNaN(zoomValue)) {
+                zoomFactor *= zoomValue;
+            }
+        }
+
+        currentElement = currentElement.parentElement;
+    }
+
+    return zoomFactor;
+}