[ Interactive Graph | Vector Graph ] PR3: Rendering & Accessibility#3441
Open
SonicScrewdriver wants to merge 9 commits intoLEMS-3971/vector-pr2from
Open
[ Interactive Graph | Vector Graph ] PR3: Rendering & Accessibility#3441SonicScrewdriver wants to merge 9 commits intoLEMS-3971/vector-pr2from
SonicScrewdriver wants to merge 9 commits intoLEMS-3971/vector-pr2from
Conversation
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
There was a problem hiding this comment.
Claude Code Review
This repository is configured for manual code reviews. Comment @claude review to trigger a review and subscribe this PR to future pushes, or @claude review once for a one-time review.
Tip: disable this comment in your organization's Code Review settings.
SonicScrewdriver
changed the title
Contributor
🗄️ Schema Change: No Changes ✅ |
Contributor
🛠️ Item Splitting: No Changes ✅ |
Contributor
|
Size Change: +2.21 kB (+0.45%) Total Size: 497 kB
ℹ️ View Unchanged
|
Contributor
npm Snapshot: PublishedGood news!! We've packaged up the latest commit from this PR (d99a420) and published it to npm. You Example: pnpm add @khanacademy/perseus@PR3441If you are working in Khan Academy's frontend, you can run the below command. ./dev/tools/bump_perseus_version.ts -t PR3441If you are working in Khan Academy's webapp, you can run the below command. ./dev/tools/bump_perseus_version.js -t PR3441 |
SonicScrewdriver
force-pushed
the
LEMS-3971/vector-pr2
branch
from
cd4b7ce to
68ae5c4
Compare
SonicScrewdriver
force-pushed
the
LEMS-3971/vector-pr3
branch
2 times, most recently
from
77f5629 to
52d299e
Compare
…and subcomponents.
SonicScrewdriver
force-pushed
the
LEMS-3971/vector-pr3
branch
from
8e83938 to
cec842e
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR was created with the help of AI, albeit with heavy oversight and review.
This is part of a series of PRs implementing the vector graph type for the Interactive Graph widget:
PR1 – type definitions and schema
▶️ PR3 – rendering & accessibility (this PR)
PR2 – state management
PR4 – scoring
PR5 – editor support
Issue: LEMS-3971
PillDragHandlecomponent from the asymptote-specific drag handle, now reused by both vector and exponential/logarithm graphsChanges:
New files:
useDraggableon a<g>element with transparent hit target, visible line with rounded caps (thickens on hover/focus/drag via CSS class.movable-vector-line), extension line to arrowhead, and aPillDragHandleat 1/3 along the line.useControlPointhook providing draggable dot with keyboard constraint that prevents overlap with the tail.strokeWidth={2}.onDragEnd) to prevent lingering focus ring.aria-live="polite"for screen reader announcements.describeVectorGraphtests, 3getVectorTipKeyboardConstrainttests.AsymptoteDragHandle. Supports arbitrary rotation angles viarotationprop. Used by vector (rotated to match vector angle) and asymptote (0° or 90°).Modified files:
PillDragHandledirectly instead of the deletedAsymptoteDragHandlewrapper.srVectorGraph,srVectorPoints,srVectorTipPoint,srVectorGrabHandle.renderVectorGraph()dispatch.getVectorEquationString()showing component form⟨dx, dy⟩..movable-vector-line(stroke color, weight, rounded caps) and.pill-drag-handle-*classes. Removed old.movable-asymptote-handle-*classes.VectorStorybook story.Deleted files:
PillDragHandleused directly inMovableAsymptote.Design decisions:
PillDragHandle— Extracted from the asymptote-specific handle so vector, exponential, and logarithm graphs all use the same component. Therotationprop replaces the oldorientationprop (0° = horizontal, 90° = vertical, arbitrary angles for vector).MovableLine, the vector uses the drag handle pill's focus ring for focus indication, avoiding extra SVG lines on tab focus.movable-draggingCSS class when active, but the arrowhead does not (fixedstrokeWidth).--mafs-blue), weight (--movable-line-stroke-weight), and caps (stroke-linecap: round) are in.movable-vector-lineCSS class rather than inline styles.Test plan:
pnpm tsc— no new type errorspnpm test packages/perseus/src/widgets/interactive-graphs/graphs/— all tests pass including 10 vector tests and 6 pill-drag-handle testsPillDragHandlemigration doesn't regress