Editing zoom step size

arieh · April 4, 2022, 7:28am

WebViewer Version: 8.2.0

Hi, I am trying to edit the step size of the zoom feature.
A user can zoom in or out using the zoom buttons or the mouse scroll + ctrl,
but the amount of change in % for every step does not fit our needs.
It currently zooms in\out by 25% using the buttons or 25%+ using the mouse scroll + ctrl.

How can that step size be edited?
I tried finding a way to override the onClick property of the buttons but didn’t find a proper way using the API.
I also tried removing those buttons and replacing them by my own but removing them requires removing the whole zoom overlay which also includes dropdown box and I would prefer not to implement it on my own.
And lastly I saw that it’s possible to use custom ui but again, I would prefer not to implement it on my own since the library already provides it.

Thanks

system · April 4, 2022, 7:28am

Hello, I’m Ron, an automated tech support bot

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:

APIs:

Forums:

Ahmad · April 5, 2022, 10:33pm

Hello Arie,

Unfortunately, there is no such API at this time. I have added this item to our backlog to be looked at in the future.

For now, you would need to create a custom UI.
Here is a guide for that.

Here are the relevant files that you would likely need to change:
Files for zoom buttons:

github.com

PDFTron/webviewer-ui/blob/8.3/src/helpers/zoom.js

import core from 'core';
import { stepToZoomFactorRangesMap, getMaxZoomLevel, getMinZoomLevel } from 'constants/zoomFactors';

function getStep(currentZoomFactor) {
  const steps = Object.keys(stepToZoomFactorRangesMap);
  const step = steps.find(step => {
    const zoomFactorRanges = stepToZoomFactorRangesMap[step];
    return isCurrentZoomFactorInRange(currentZoomFactor, zoomFactorRanges);
  });

  return parseFloat(step);
}

function isCurrentZoomFactorInRange(zoomFactor, ranges) {
  const [rangeLowBound, rangeHighBound] = ranges;
  if (rangeLowBound === null) {
    return zoomFactor < rangeHighBound;
  }
  if (rangeHighBound === null) {
    return zoomFactor >= rangeLowBound;

This file has been truncated. show original

github.com

PDFTron/webviewer-ui/blob/8.3/src/constants/zoomFactors.js

let minZoom = 0.05;
let maxZoom = 99.99;

export const getMinZoomLevel = () => minZoom;

export const setMinZoomLevel = zoom => {
  minZoom = zoom;
};

export const getMaxZoomLevel = () => maxZoom;

export const setMaxZoomLevel = zoom => {
  maxZoom = zoom;
};

export const stepToZoomFactorRangesMap = {
  '0.075': [null, 0.8],
  '0.25': [0.8, 1.5],
  '0.5': [1.5, 2.5],
  '1': [2.5, 4],

This file has been truncated. show original

File for zooming with scroll + ctrl:

github.com

PDFTron/webviewer-ui/blob/19dbf2f9bccd34498d5a62ca6227c729a293f4c2/src/components/DocumentContainer/DocumentContainer.js#L174

      
        
              setCurrentPage(currentPage - getNumberOfPagesToNavigate());
              this.container.current.scrollTop = scrollHeight - clientHeight;
            }
            
            
pageDown = () => {
              const { currentPage } = this.props;
            
            
  setCurrentPage(currentPage + getNumberOfPagesToNavigate());
            }
            
            
wheelToZoom = e => {
              const currentZoomFactor = this.props.zoom;
              let newZoomFactor = currentZoomFactor;
              let multiple;
            
            
  if (e.deltaY < 0) {
                multiple = 1.25;
                newZoomFactor = Math.min(currentZoomFactor * multiple, getMaxZoomLevel());
              } else if (e.deltaY > 0) {
                multiple = 0.8;
                newZoomFactor = Math.max(currentZoomFactor * multiple, getMinZoomLevel());

Please let me know if there are any issues.

Best Regards,
Ahmad Moaaz
Software Developer
PDFTron Systems, Inc.
www.pdftron.com