Skip to content

Add resizable paged virtual keyboard with stable resize performance#3050

Draft
Shrookin wants to merge 2 commits into
arnog:masterfrom
Shrookin:agent/virtual-keyboard-resize-paging
Draft

Add resizable paged virtual keyboard with stable resize performance#3050
Shrookin wants to merge 2 commits into
arnog:masterfrom
Shrookin:agent/virtual-keyboard-resize-paging

Conversation

@Shrookin

Copy link
Copy Markdown

Summary

This PR adds a resizable, paged virtual keyboard and keeps resizing responsive when a layout contains more rows than the selected height can display.

Why

While dragging the resize handle, each pointer movement previously recalculated paging. That work repeatedly forced layout reads (scrollHeight and offsetHeight), removed and reapplied row visibility classes, and changed the space occupied by the paging controls. The result was visible key churn, jitter, and poor frame rates during resizing.

Changes

  • Add a draggable resize handle to the virtual keyboard.
  • Add previous/next row paging controls for layouts that overflow the selected height.
  • Cache row measurements by row-container width, row gap, and row count.
  • Keep paging state and row visibility stable throughout a pointer resize gesture; perform one final paging calculation when the gesture ends.
  • Keep paging controls mounted. Disabled controls collapse to zero height so they do not consume space unless paging is needed; active controls reserve their space during the final page calculation.
  • Add a Playwright regression assertion that row visibility does not change mid-drag.
  • Document the behavior in the changelog.

Compatibility

The existing setUserHeight() and pageRows() behavior remains available. The user-height persistence used by the Skillboard website is intentionally not included here; it remains website-specific and is not part of MathLive's core API.

Validation

  • npx tsc --noEmit
  • npm run build (0 build errors; existing documentation-link warnings only)
  • npx playwright test test/playwright-tests/virtual-keyboard.spec.ts --project=chromium (6 passed)

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.

1 participant