[Interactive Graph] Update protractor to new SVG (#2263)

## Summary:
The old protractor looked awful. We got a request to use a protractor
with two rows of numbers going in opposite directions (previously
there was only one direction).

- Update the protractor to a new SVG with numbers going both ways

Note: The numbers are kind of hard to read over the axes. I tried to add
white backgrounds to the numbers, but it's unfortunately not as easy as
it looks. Since this is not a regression, I left it as is.

Issue: https://khanacademy.atlassian.net/browse/LEMS-2863

## Test plan:
Storybook
- https://khan.github.io/perseus/?path=/story/perseus-widgets-interactive-graph-visual-regression-tests--mafs-with-protractor

| Before | After |
| --- | --- |
| ![image](https://github.com/user-attachments/assets/14c46536-ba27-4e89-9aaf-954e1d1ebdfc) | ![image](https://github.com/user-attachments/assets/42d1340a-9995-41ee-b794-9f077cf63605) |

Author: nishasy

Reviewers: jeremywiebe, SonicScrewdriver, catandthemachines

Required Reviewers:

Approved By: jeremywiebe

Checks: ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x)

Pull Request URL: #2263

.changeset/big-pillows-talk.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+[Interactive Graph] Update protractor to new SVG

packages/perseus/src/widgets/interactive-graphs/interactive-graph-regression.stories.tsx

@@ -248,7 +248,10 @@ export const MafsWithLockedLine: Story = {
 
 export const MafsWithProtractor: Story = {
     args: {
-        question: interactiveGraphQuestionBuilder().withProtractor().build(),
+        question: interactiveGraphQuestionBuilder()
+            .withAngle()
+            .withProtractor()
+            .build(),
     },
 };
 

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

@@ -4,6 +4,7 @@ import {vec} from "mafs";
 import * as React from "react";
 import {useRef, useState} from "react";
 
+import {getDependencies} from "../../dependencies";
 import {pathBuilder} from "../../util/svg";
 
 import {useDraggable} from "./graphs/use-draggable";
@@ -19,17 +20,18 @@ import "./protractor.css";
 const {calculateAngleInDegrees, convertDegreesToRadians} = angles;
 
 const protractorImage =
-    "https://ka-perseus-graphie.s3.amazonaws.com/e9d032f2ab8b95979f674fbfa67056442ba1ff6a.png";
+    "https://cdn.kastatic.org/images/perseus/protractor.svg";
 
 // The vector from the center of the protractor to the top left corner of the
 // protractor image, in pixels. Used for positioning.
-const centerToTopLeft: vec.Vector2 = [-180, -170];
+const centerToTopLeft: vec.Vector2 = [-195, -190];
 
 // The vector from the center of the protractor to the center of the rotation
 // handle.
-const centerToRotationHandle: vec.Vector2 = [-176, -15];
+const centerToRotationHandle: vec.Vector2 = [-201, -15];
 
 export function Protractor() {
+    const staticUrl = getDependencies().staticUrl;
     const {range, snapStep} = useGraphConfig();
     const [[xMin, xMax], [yMin, yMax]] = range;
     // Position the protractor in the center of the graph (horizontally), and
@@ -43,7 +45,7 @@ export function Protractor() {
         useState<vec.Vector2>(centerToRotationHandle);
 
     const draggableRef = useRef<SVGGElement>(null);
-    useDraggable({
+    const {dragging} = useDraggable({
         gestureTarget: draggableRef,
         onMove: setCenter,
         point: center,
@@ -70,9 +72,10 @@ export function Protractor() {
             transform={`translate(${topLeftPx[X]}, ${topLeftPx[Y]}), rotate(${angle})`}
             style={{
                 transformOrigin: `${-centerToTopLeft[X]}px ${-centerToTopLeft[Y]}px`,
+                cursor: dragging ? "grabbing" : "grab",
             }}
         >
-            <image href={protractorImage} />
+            <image href={staticUrl(protractorImage)} />
             <g
                 transform={`translate(5, ${-centerToTopLeft[1]})`}
                 ref={rotationHandleRef}