Add keyboard controls to angle graphs

[benchristel]

This PR makes it so angle graph questions can be solved with only a keyboard -
no mouse required!

There are several tricky constraints to this problem:

• Every distinct state of the graph needs to be reachable using only the
  keyboard.
• In order for the movement to feel natural, pressing an arrow key should
  always move the point in the corresponding direction: up, down, left, or right.
• However, the points need to snap, not to a grid, but to angle measures
  (in degrees).
• The side points of the angle should not be allowed to get too close to the
  vertex - if they overlap the vertex there's no way to drag them away again.
• The points shouldn't be able to move outside the graph bounds
• It should never be possible for an edge point to get "stuck" or blocked in its
  movement by the edge of the graph, or by the angle vertex.

I believe this PR solves for all these constraints. To make it work, I had to do
a few slightly weird things:

• I constrained the movement of the vertex so no part of the angle-measure arc
  can go outside the graph bounds. This ensures that all the control points of
  the angle can always be placed onscreen, and prevents the side points from
  getting stuck on the edges of the graph.
• I reworked the interface of useDraggable, renaming constrain to
  constrainKeyboardMovement. Movement constraints for dragging are now
  implemented entirely in the reducer. (They were almost all in the reducer
  before; circles were the only graph type that still depended on the constrain
  function for dragging.)
• I also introduced a new type of useDraggable constraint, where the destination
  points for the up, left, right, and down arrows are listed explicitly. I think
  this ultimately makes the code clearer. It's also more efficient (since
  useDraggable does not have to do a bunch of repeated trig calculations to
  search for valid destination points).

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

Test plan:

View /?path=/story/perseus-widgets-interactive-graph--angle-with-mafs in
Storybook. Try to break the graph.

[khan-actions-bot]

Gerald

Required Reviewers

• @Khan/perseus for changes to .changeset/neat-days-remain.md, packages/perseus/src/widgets/__stories__/interactive-graph.stories.tsx, packages/perseus/src/widgets/interactive-graphs/protractor.tsx, packages/perseus/src/widgets/interactive-graphs/graphs/angle.test.ts, packages/perseus/src/widgets/interactive-graphs/graphs/angle.tsx, packages/perseus/src/widgets/interactive-graphs/graphs/circle.tsx, packages/perseus/src/widgets/interactive-graphs/graphs/point.tsx, packages/perseus/src/widgets/interactive-graphs/graphs/polygon.tsx, packages/perseus/src/widgets/interactive-graphs/graphs/quadratic.tsx, packages/perseus/src/widgets/interactive-graphs/graphs/sinusoid.tsx, packages/perseus/src/widgets/interactive-graphs/graphs/use-draggable.test.tsx, packages/perseus/src/widgets/interactive-graphs/graphs/use-draggable.ts, packages/perseus/src/widgets/interactive-graphs/math/angles.ts, packages/perseus/src/widgets/interactive-graphs/math/geometry.test.ts, packages/perseus/src/widgets/interactive-graphs/math/geometry.ts, packages/perseus/src/widgets/interactive-graphs/reducer/interactive-graph-reducer.test.ts, packages/perseus/src/widgets/interactive-graphs/reducer/interactive-graph-reducer.ts, packages/perseus/src/widgets/interactive-graphs/graphs/components/angle-indicators.tsx, packages/perseus/src/widgets/interactive-graphs/graphs/components/movable-line.tsx, packages/perseus/src/widgets/interactive-graphs/graphs/components/movable-point.test.tsx, packages/perseus/src/widgets/interactive-graphs/graphs/components/movable-point.tsx

---

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

[github-actions]

Size Change: +1.19 kB (+0.14%)

Total Size: 856 kB

Filename	Size	Change
packages/perseus/dist/es/index.js	414 kB	+1.19 kB (+0.29%)

ℹ️ View Unchanged

Filename	Size
packages/kas/dist/es/index.js	38.3 kB
packages/kmath/dist/es/index.js	4.27 kB
packages/math-input/dist/es/index.js	80.3 kB
packages/math-input/dist/es/strings.js	1.73 kB
packages/perseus-core/dist/es/index.js	1.48 kB
packages/perseus-editor/dist/es/index.js	275 kB
packages/perseus-linter/dist/es/index.js	21.6 kB
packages/perseus/dist/es/strings.js	3.29 kB
packages/pure-markdown/dist/es/index.js	3.67 kB
packages/simple-markdown/dist/es/index.js	12.4 kB

_{compressed-size-action}

[github-actions]

npm Snapshot: Published

Good news!! We've packaged up the latest commit from this PR (ec33ba9) and published it to npm. You
can install it using the tag PR1472.

Example:

yarn add @khanacademy/perseus@PR1472

If you are working in Khan Academy's webapp, you can run:

./dev/tools/bump_perseus_version.sh -t PR1472

[codecov]

Codecov Report

Attention: Patch coverage is 86.26761% with 39 lines in your changes missing coverage. Please review.

Project coverage is 70.39%. Comparing base (b8a342c) to head (ec33ba9).

Files	Patch %	Lines
...active-graphs/reducer/interactive-graph-reducer.ts	60.29%	27 Missing ⚠️
...widgets/interactive-graphs/graphs/use-draggable.ts	84.78%	7 Missing ⚠️
...us/src/widgets/interactive-graphs/graphs/angle.tsx	97.08%	3 Missing ⚠️
...us/src/widgets/interactive-graphs/math/geometry.ts	96.15%	1 Missing ⚠️
...seus/src/widgets/interactive-graphs/protractor.tsx	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1472      +/-   ##
==========================================
+ Coverage   69.87%   70.39%   +0.51%     
==========================================
  Files         513      516       +3     
  Lines      105884   106100     +216     
  Branches     7647    10835    +3188     
==========================================
+ Hits        73987    74688     +701     
+ Misses      31711    31412     -299     
+ Partials      186        0     -186     

Files	Coverage Δ
...s/src/widgets/interactive-graphs/graphs/circle.tsx	98.46% <100.00%> (ø)
...tive-graphs/graphs/components/angle-indicators.tsx	88.16% <ø> (-1.24%)	⬇️
...eractive-graphs/graphs/components/movable-line.tsx	100.00% <100.00%> (ø)
...ractive-graphs/graphs/components/movable-point.tsx	100.00% <100.00%> (ø)
...us/src/widgets/interactive-graphs/graphs/point.tsx	100.00% <100.00%> (ø)
.../src/widgets/interactive-graphs/graphs/polygon.tsx	91.42% <100.00%> (+0.95%)	⬆️
...rc/widgets/interactive-graphs/graphs/quadratic.tsx	98.82% <100.00%> (+2.35%)	⬆️
...src/widgets/interactive-graphs/graphs/sinusoid.tsx	99.00% <100.00%> (ø)
...seus/src/widgets/interactive-graphs/math/angles.ts	89.47% <100.00%> (+0.28%)	⬆️
...us/src/widgets/interactive-graphs/math/geometry.ts	95.65% <96.15%> (+0.41%)	⬆️
... and 4 more

... and 136 files with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update b8a342c...ec33ba9. Read the comment docs.

[benchristel]

I removed angleOffsetDeg because it wasn't used.

[SonicScrewdriver]

Very well commented and incredibly appreciated! Thank you for setting all of this up Ben, I think it's much cleaner!

[SonicScrewdriver]

I really appreciate these comment explanations about what the graph is setting up!

[SonicScrewdriver]

Also appreciate these callouts to help explain which points they are, now that we're not mapping them.