arieh
April 4, 2022, 7:28am
1
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
2
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
3
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:
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
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:
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
1 Like