Fix #1409: Right page flip fails when fully zoomed in
Fix for Right Page Flip Failure when Fully Zoomed In
This PR addresses an issue in one-page view mode where flipping to the right page fails when the view is fully zoomed in. Specifically, in this mode and zoom state, the viewport ends up between two pages regardless of whether the left or right flip button is pressed. However, left flips succeed, while right flips fail. The primary modifications were made in the Mode1UpLit.js file.
Issue Analysis
✅ Root causes identified:
-
Zoom boundaries not defined: The zooming logic lacked upper and lower bounds. Given the zoom factor:
/** How much to zoom when zoom button pressed */ ZOOM_FACTOR = 1.1;and the following functions:
zoomIn() { this.scale *= this.ZOOM_FACTOR; } zoomOut() { this.scale *= 1 / this.ZOOM_FACTOR; }we observe exponential growth with no cap. This leads to scale explosion when zooming in repeatedly. Additionally, tests show that excessive zoom causes the viewport to reset to the first page instead of remaining on the current one.
-
Inadequate scrollTop calculation in
jumpToIndex: Under large zoom levels, althoughscrollTopis updated, it's likely not sufficient due to browser viewport constraints. The scroll position is set to half a page above the new page top:this.scrollTop = this.coordSpace.worldUnitsToVisiblePixels(this.pageTops[index] - this.SPACING_IN / 2);At high zoom, this positions the viewport entirely within the inter-page spacing (usually black), causing the page flip logic to believe the right page wasn’t reached—because no new page content is visible.
Fix Implementation
✅ Two key changes were introduced:
-
Zoom scale bounds defined: Reasonable min and max scale limits were added:
/** Minimum allowed zoom scale */ MIN_SCALE = 0.05; /** Maximum allowed zoom scale */ MAX_SCALE = 1000.0;Modified zoom functions:
zoomIn() { this.scale = Math.min(this.scale * this.ZOOM_FACTOR, this.MAX_SCALE); } zoomOut() { this.scale = Math.max(this.scale * (1 / this.ZOOM_FACTOR), this.MIN_SCALE); } -
Updated
scrollTopcalculation: The scroll position now directly targets the top of the new page, preventing the viewport from falling into inter-page spacing at high zoom levels:this.scrollTop = this.coordSpace.worldUnitsToVisiblePixels(this.pageTops[index]);
🛠 Testing
- ✅ Verified that left and right page flips succeed in one-page view at full zoom in state.
✅ Expected Result
- In one-page view mode with maximum zoom, both left and right page navigation work as expected. The viewport aligns with the top of the new page.
I hope this helps!