f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-08 16:12:38 +00:00
Code Wiki Activity

set all zoom buttons to use handleZoomButton

Browse Source 
All zoom buttons run through same handler now.

They no longer take only the delta of the current zoom and desired zoom-- they take the actual desired zoom.

calculateZoom is now calculateChange, to help get the desired delta.
This commit is contained in:
Gazook89
2024-08-26 16:16:13 -05:00
parent 7b767368df
commit e06611a90f
1 changed files with 9 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
client/homebrew/brewRenderer/toolBar/toolBar.jsx
View File

@@ -20,8 +20,8 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
setPageNum(currentPage); setPageNum(currentPage);
}, [currentPage]); }, [currentPage]);
const handleZoomButton = (delta)=>{ const handleZoomButton = (zoom)=>{
setZoomLevel(_.round(_.clamp(zoomLevel + delta, MIN_ZOOM, MAX_ZOOM))); setZoomLevel(_.round(_.clamp(zoom, MIN_ZOOM, MAX_ZOOM)));
}; };
const handlePageInput = (pageInput)=>{ const handlePageInput = (pageInput)=>{
@@ -39,7 +39,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
}; };
const calculateZoom = (mode)=>{ const calculateChange = (mode)=>{
const iframe = document.getElementById('BrewRenderer'); const iframe = document.getElementById('BrewRenderer');
const iframeWidth = iframe.getBoundingClientRect().width; const iframeWidth = iframe.getBoundingClientRect().width;
const iframeHeight = iframe.getBoundingClientRect().height; const iframeHeight = iframe.getBoundingClientRect().height;
@@ -49,12 +49,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
if(mode == 'fill'){ if(mode == 'fill'){
// find widest page, in case pages are different widths, so that the zoom is adapted to not cut the widest page off screen. // find widest page, in case pages are different widths, so that the zoom is adapted to not cut the widest page off screen.
let widestPage = 0; const widestPage = _.maxBy([...pages], 'offsetWidth').offsetWidth;
[...pages].forEach((page)=>{
const width = page.offsetWidth;
if(width > widestPage)
widestPage = width;
});
desiredZoom = (iframeWidth / widestPage) * 100; desiredZoom = (iframeWidth / widestPage) * 100;
@@ -88,21 +83,21 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
<button <button
id='fill-width' id='fill-width'
className='tool' className='tool'
onClick={()=>handleZoomButton(calculateZoom('fill'))} onClick={()=>handleZoomButton(zoomLevel + calculateChange('fill'))}
> >
<i className='fac fit-width' /> <i className='fac fit-width' />
</button> </button>
<button <button
id='zoom-to-fit' id='zoom-to-fit'
className='tool' className='tool'
onClick={()=>handleZoomButton(calculateZoom('fit'))} onClick={()=>handleZoomButton(zoomLevel + calculateChange('fit'))}
> >
<i className='fac zoom-to-fit' /> <i className='fac zoom-to-fit' />
</button> </button>
<button <button
id='zoom-out' id='zoom-out'
className='tool' className='tool'
onClick={()=>handleZoomButton(-20)} onClick={()=>handleZoomButton(zoomLevel - 20)}
disabled={zoomLevel <= MIN_ZOOM} disabled={zoomLevel <= MIN_ZOOM}
> >
<i className='fas fa-magnifying-glass-minus' /> <i className='fas fa-magnifying-glass-minus' />
@@ -117,7 +112,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
max={MAX_ZOOM} max={MAX_ZOOM}
step='1' step='1'
value={zoomLevel} value={zoomLevel}
onChange={(e)=>setZoomLevel(parseInt(e.target.value))} onChange={(e)=>handleZoomButton(parseInt(e.target.value))}
/> />
<datalist id='zoomLevels'> <datalist id='zoomLevels'>
<option value='100' /> <option value='100' />
@@ -126,7 +121,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
<button <button
id='zoom-in' id='zoom-in'
className='tool' className='tool'
onClick={()=>handleZoomButton(20)} onClick={()=>handleZoomButton(zoomLevel + 20)}
disabled={zoomLevel >= MAX_ZOOM} disabled={zoomLevel >= MAX_ZOOM}
> >
<i className='fas fa-magnifying-glass-plus' /> <i className='fas fa-magnifying-glass-plus' />