Repository: mozilla/pdf.js
File: web/pdf_page_detail_view.js (JavaScript)

Code before:
    const ratio = (1 + MOVEMENT_THRESHOLD) / MOVEMENT_THRESHOLD;

    if (
      (minDetailX > 0 && paddingRightSize / paddingLeftSize > ratio) ||
      (maxDetailX < maxWidth && paddingLeftSize / paddingRightSize > ratio) ||
      (minDetailY > 0 && paddingBottomSize / paddingTopSize > ratio) ||
      (maxDetailY < maxHeight && paddingTopSize / paddingBottomSize > ratio)
    ) {
      return true;
    }

    return false;
  }

  update({ visibleArea = null, underlyingViewUpdated = false } = {}) {
    if (underlyingViewUpdated) {
      this.cancelRendering();
      this.renderingState = RenderingStates.INITIAL;
      return;
    }

    if (!this.#shouldRenderDifferentArea(visibleArea)) {
      return;
    }

    const { viewport } = this.pageView;

    const visibleWidth = visibleArea.maxX - visibleArea.minX;
    const visibleHeight = visibleArea.maxY - visibleArea.minY;
    let { maxCanvasPixels } = this.pageView;

    if (this.capCanvasAreaFactor >= 0) {
      const capFactor = 1 + this.capCanvasAreaFactor / 100;
      const cappedWindowArea =
        window.innerWidth *
        window.innerHeight *
        OutputScale.pixelRatio ** 2 *
        capFactor;
      maxCanvasPixels = Math.min(maxCanvasPixels, cappedWindowArea);
    }

    // "overflowScale" represents which percentage of the width and of the
    // height the detail area extends outside of the visible area. We want to
    // draw a larger area so that we don't have to constantly re-draw while
    // scrolling. The detail area's dimensions thus become
    // visibleLength * (2 * overflowScale + 1).
    // We default to adding a whole height/length of detail area on each side,
    // but we can reduce it to make sure that we stay within the maxCanvasPixels
    // limit.
    const visiblePixels =
      visibleWidth * visibleHeight * OutputScale.pixelRatio ** 2;

Review comment (suggestion):
Can't we just do the following here, and avoid any changes in the constructor?
```suggestion
    const { viewport, capCanvasAreaFactor } = this.pageView;
```

Code after:

    if (
      (minDetailX > 0 && paddingRightSize / paddingLeftSize > ratio) ||
      (maxDetailX < maxWidth && paddingLeftSize / paddingRightSize > ratio) ||
      (minDetailY > 0 && paddingBottomSize / paddingTopSize > ratio) ||
      (maxDetailY < maxHeight && paddingTopSize / paddingBottomSize > ratio)
    ) {
      return true;
    }

    return false;
  }

  update({ visibleArea = null, underlyingViewUpdated = false } = {}) {
    if (underlyingViewUpdated) {
      this.cancelRendering();
      this.renderingState = RenderingStates.INITIAL;
      return;
    }

    if (!this.#shouldRenderDifferentArea(visibleArea)) {
      return;
    }

    const { viewport, capCanvasAreaFactor } = this.pageView;

    const visibleWidth = visibleArea.maxX - visibleArea.minX;
    const visibleHeight = visibleArea.maxY - visibleArea.minY;
    let { maxCanvasPixels } = this.pageView;

    if (capCanvasAreaFactor >= 0) {
      maxCanvasPixels = Math.min(
        maxCanvasPixels,
        OutputScale.getCappedWindowArea(capCanvasAreaFactor)
      );
    }

    // "overflowScale" represents which percentage of the width and of the
    // height the detail area extends outside of the visible area. We want to
    // draw a larger area so that we don't have to constantly re-draw while
    // scrolling. The detail area's dimensions thus become
    // visibleLength * (2 * overflowScale + 1).
    // We default to adding a whole height/length of detail area on each side,
    // but we can reduce it to make sure that we stay within the maxCanvasPixels
    // limit.
    const visiblePixels =
      visibleWidth * visibleHeight * OutputScale.pixelRatio ** 2;
    const maxDetailToVisibleLinearRatio = Math.sqrt(
      maxCanvasPixels / visiblePixels
    );
    const maxOverflowScale = (maxDetailToVisibleLinearRatio - 1) / 2;