bookreader icon indicating copy to clipboard operation
bookreader copied to clipboard

Fix #1409: Right page flip fails when fully zoomed in

Open 0SliverBullet opened this issue 7 months ago • 0 comments

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:

  1. 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.

  2. Inadequate scrollTop calculation in jumpToIndex: Under large zoom levels, although scrollTop is 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:

  1. 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);
    }
    
  2. Updated scrollTop calculation: 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!

0SliverBullet avatar May 19 '25 03:05 0SliverBullet