Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: Open unlimited polygon does not restrict crossing sides. #1896

Merged
merged 5 commits into from
Nov 26, 2024

Conversation

catandthemachines
Copy link
Member

@catandthemachines catandthemachines commented Nov 20, 2024

Summary:

For keyboard users if they're drawing a polygon and it places a point at 0,0. There are cases where it could cross the sides of the polygon they are actively creating and cause the polygon to break. Mouse uses can get around this a bit. But it's not idea. This fix checks whether the polygon type allows intersecting sides and disables the rejection logic.

This PR also includes improvements to:

  • Screen readers announcing instructions to enable graph (was not reading out before).
  • Disabled buttons are not tabbable now.

Issue: LEMS-2618

Test plan:

Go to /?path=/story/perseus-widgets-interactive-graph--unlimited-polygon-with-mafs in Storybook.
Use your keyboard to add points.
Move a few points in a way that a new point would cause the sides to intersect.
Add a new point and make sure you can still move points on the polygon.

@catandthemachines catandthemachines self-assigned this Nov 20, 2024
@khan-actions-bot khan-actions-bot requested a review from a team November 20, 2024 23:45
@khan-actions-bot
Copy link
Contributor

khan-actions-bot commented Nov 20, 2024

Gerald

Required Reviewers
  • @Khan/perseus for changes to .changeset/chilled-pianos-cheat.md, packages/perseus/src/widgets/interactive-graphs/mafs-graph.tsx, packages/perseus/src/widgets/interactive-graphs/reducer/interactive-graph-reducer.test.ts, packages/perseus/src/widgets/interactive-graphs/reducer/interactive-graph-reducer.ts

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

Copy link
Contributor

github-actions bot commented Nov 20, 2024

npm Snapshot: Published

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

Example:

yarn add @khanacademy/perseus@PR1896

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

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

Copy link
Contributor

github-actions bot commented Nov 20, 2024

Size Change: +175 B (+0.01%)

Total Size: 1.29 MB

Filename Size Change
packages/perseus/dist/es/index.js 421 kB +175 B (+0.04%)
ℹ️ View Unchanged
Filename Size
packages/kas/dist/es/index.js 39 kB
packages/keypad-context/dist/es/index.js 760 B
packages/kmath/dist/es/index.js 4.27 kB
packages/math-input/dist/es/index.js 77.9 kB
packages/math-input/dist/es/strings.js 1.79 kB
packages/perseus-core/dist/es/index.js 1.48 kB
packages/perseus-editor/dist/es/index.js 697 kB
packages/perseus-linter/dist/es/index.js 22.2 kB
packages/perseus/dist/es/strings.js 3.57 kB
packages/pure-markdown/dist/es/index.js 3.66 kB
packages/simple-markdown/dist/es/index.js 12.5 kB

compressed-size-action

Copy link
Contributor

@nishasy nishasy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Neat! A couple of non-blocking suggestions, but overall looks good to me.

Copy link
Member

@benchristel benchristel left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What happens when closing the polygon is what causes the sides to cross? Can you then untangle the points using the keyboard, or are they stuck?

I think we might need some logic like "if the polygon's sides currently cross, don't reject a move that results in the sides still crossing."

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The changes to this file seem unrelated to the rest of the PR. Are they supposed to be included?

Copy link
Member

@benchristel benchristel left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Discussed with Cat in Slack. It sounds like Caitlyn is aware of the "lines crossing" behavior and is okay with it for now. LGTM!

@catandthemachines catandthemachines merged commit 56fd448 into main Nov 26, 2024
9 checks passed
@catandthemachines catandthemachines deleted the catjohnson/polish-polygon branch November 26, 2024 17:53
nishasy added a commit that referenced this pull request Nov 26, 2024
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @khanacademy/[email protected]

### Patch Changes

- [#1896](#1896)
[`56fd44806`](56fd448)
Thanks [@catandthemachines](https://github.com/catandthemachines)! -
Fixing intersecting polygon sides issues for unlimited sided polygon.


- [#1894](#1894)
[`01edfb8be`](01edfb8)
Thanks [@nishasy](https://github.com/nishasy)! - [SR] Add comment about
making translation tickets


- [#1875](#1875)
[`28cae9d2a`](28cae9d)
Thanks [@nishasy](https://github.com/nishasy)! - [Locked Labels] Count
lone unescaped \\$ as regular dollar signs in TeX

## @khanacademy/[email protected]

### Patch Changes

- [#1874](#1874)
[`42d25c2d2`](42d25c2)
Thanks [@nishasy](https://github.com/nishasy)! - [Locked Figure Aria]
Fix \\$ edge cases for spoken math aria labels


- [#1912](#1912)
[`44e78a95d`](44e78a9)
Thanks [@nishasy](https://github.com/nishasy)! - [Interactive Graph
Editor] Stop cursor jumps in number input fields


- [#1875](#1875)
[`28cae9d2a`](28cae9d)
Thanks [@nishasy](https://github.com/nishasy)! - [Locked Labels] Count
lone unescaped \\$ as regular dollar signs in TeX

- Updated dependencies
\[[`56fd44806`](56fd448),
[`01edfb8be`](01edfb8),
[`28cae9d2a`](28cae9d)]:
    -   @khanacademy/[email protected]
benchristel pushed a commit that referenced this pull request Nov 26, 2024
## Summary:
For keyboard users if they're drawing a polygon and it places a point at 0,0. There are cases where it could cross the sides of the polygon they are actively creating and cause the polygon to break. Mouse uses can get around this a bit. But it's not idea. This fix checks whether the polygon type allows intersecting sides and disables the rejection logic.

This PR also includes improvements to:
- Screen readers announcing instructions to enable graph (was not reading out before).
- Disabled buttons are not tabbable now.

Issue: LEMS-2618

## Test plan:
Go to /?path=/story/perseus-widgets-interactive-graph--unlimited-polygon-with-mafs in Storybook.
Use your keyboard to add points.
Move a few points in a way that a new point would cause the sides to intersect.
Add a new point and make sure you can still move points on the polygon.

Author: catandthemachines

Reviewers: catandthemachines, nishasy, benchristel, anakaren-rojas

Required Reviewers:

Approved By: nishasy, benchristel

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

Pull Request URL: #1896
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants