Correct how arrowhead rotation is calculated

[mark-fitzgerald]

Summary:

Arrowhead rotation (aka "direction") was calculated using graph coordinates. While this works properly most of the time, there are situations where it doesn't. Specifically, when grid units are displayed more rectangularly than as a regular square. This code change resolves that issue by using pixel coordinates, instead.

Issue: LEMS-1996

Test plan:

1. Launch the Dev environment (yarn dev)
2. Go to the flipbook (http://localhost:5173/#flipbook)
3. Paste in the following graph definition:

{"content":"[[☃ interactive-graph 1]]\n\n\n","images":{},"widgets":{"input-number 1":{"alignment":"default","graded":true,"options":{"answerType":"number","inexact":false,"maxError":0.1,"simplify":"required","size":"small","value":"2.6666666666666665"},"type":"input-number","version":{"major":0,"minor":0}},"interactive-graph 1":{"alignment":"default","graded":true,"options":{"backgroundImage":{"bottom":0,"height":0,"left":0,"scale":1,"url":null,"width":0},"correct":{"coords":[[0,0],[3,8]],"type":"linear"},"graph":{"type":"linear"},"gridStep":[1,1],"labels":["t","d"],"markings":"graph","range":[[-10,1],[-10,10]],"rulerLabel":"","rulerTicks":10,"showProtractor":false,"showRuler":false,"snapStep":[0.5,0.5],"step":[1,1]},"type":"interactive-graph","version":{"major":0,"minor":0}}}}

4. Move one of the line points around and note that the arrowheads appear to align properly with the line.

Affected behavior:

Before

After

[github-actions]

Size Change: +32 B (0%)

Total Size: 839 kB

Filename	Size	Change
packages/perseus/dist/es/index.js	403 kB	+32 B (+0.01%)

ℹ️ View Unchanged

Filename	Size
packages/kas/dist/es/index.js	38.1 kB
packages/kmath/dist/es/index.js	4.27 kB
packages/math-input/dist/es/index.js	80.5 kB
packages/math-input/dist/es/strings.js	1.73 kB
packages/perseus-core/dist/es/index.js	908 B
packages/perseus-editor/dist/es/index.js	268 kB
packages/perseus-error/dist/es/index.js	877 B
packages/perseus-linter/dist/es/index.js	21.8 kB
packages/perseus/dist/es/strings.js	3.22 kB
packages/pure-markdown/dist/es/index.js	3.68 kB
packages/simple-markdown/dist/es/index.js	12.4 kB

_{compressed-size-action}

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 70.23%. Comparing base (fba227f) to head (1a4ee60).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1271      +/-   ##
==========================================
+ Coverage   68.88%   70.23%   +1.34%     
==========================================
  Files         477      481       +4     
  Lines      101842   101915      +73     
  Branches     5138    10293    +5155     
==========================================
+ Hits        70151    71576    +1425     
+ Misses      31576    30339    -1237     
+ Partials      115        0     -115     

Files	Coverage Δ
...eus/src/widgets/interactive-graphs/axis-arrows.tsx	100.00% <100.00%> (ø)
...interactive-graphs/graphs/components/arrowhead.tsx	100.00% <100.00%> (ø)
...ts/interactive-graphs/graphs/components/vector.tsx	100.00% <100.00%> (ø)
...eus/src/widgets/interactive-graphs/locked-line.tsx	99.30% <100.00%> (+0.03%)	⬆️

... and 133 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 fba227f...1a4ee60. Read the comment docs.

[mark-fitzgerald]

This is actually the same angle: -192.52880770915152 + 360 = 167.47119229084848

[mark-fitzgerald]

The line associated with these arrowheads are drawn with weird point references ([0,0], [0,0]) (see preceding <line> element). This line has no slope, so the rotation should be zero.

[khan-actions-bot]

Gerald

Required Reviewers

• @Khan/perseus for changes to .changeset/kind-shirts-sit.md, packages/perseus/src/widgets/__stories__/interactive-graph-regression.stories.tsx, packages/perseus/src/widgets/interactive-graphs/axis-arrows.tsx, packages/perseus/src/widgets/interactive-graphs/locked-line.tsx, packages/perseus/src/widgets/interactive-graphs/graphs/components/arrowhead.tsx, packages/perseus/src/widgets/interactive-graphs/graphs/components/vector.tsx, packages/perseus/src/widgets/interactive-graphs/graphs/components/__snapshots__/movable-line.test.tsx.snap

---

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

[benchristel]

LGTM!

An idea: it might be good to add a visual regression test for this bug, in interactive-graph-regression.stories.tsx. To do that, you'd probably need to add a new InteractiveFigureConfig subtype for linear graphs in interactive-graph-question-builder.ts. LMK if you'd like to pair on that.

[github-actions]

npm Snapshot: Published

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

Example:

yarn add @khanacademy/perseus@PR1271

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

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