Skip to content

Add resizable paged virtual keyboard with stable resize performance - #3050

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

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

Conversation

@Shrookin

@Shrookin Shrookin commented Jul 18, 2026

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.

A second issue occurred when a fast drag moved outside the visible keyboard: the resize gesture listened for movement but did not capture the active pointer, so movement could stop when the pointer crossed outside the keyboard or its browsing context.

Changes

  • Add a draggable resize handle to the virtual keyboard.
  • Capture the active pointer on the resize handle for the full drag gesture, then release it on pointerup or pointercancel.
  • 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 Playwright regression assertions for pointer capture, dragging outside the keyboard, and stable row visibility during the gesture.
  • Document the behavior in the changelog.

Compatibility

The existing setUserHeight() and pageRows() behavior remains available. The user-height persistence, iframe host selection, and account preference synchronization used by the Skillboard website are intentionally not included here; those remain website-specific and are 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 before the pointer-capture regression assertion was added)
  • The new regression assertion specifically verifies pointer capture and continues the drag at coordinates outside the keyboard.

@Shrookin
Shrookin marked this pull request as ready for review August 4, 2026 18:07
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