f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-20 18:22:40 +00:00
Code Wiki Activity

Combine toFit and toFill functions

Browse Source 
Reduce overlap of the two functions and just require a 'mode' parameter.  Could like roll a 'manual' mode into this for the zoom slider, as well, but skipping for now.
This commit is contained in:
Gazook89
2024-08-22 23:19:24 -05:00
parent 90dd4326e7
commit 977b871967
1 changed files with 33 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -42,11 +42,15 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
}; };
const toFill = ()=>{ const calculateZoom = (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 pages = iframe.contentWindow.document.getElementsByClassName('page'); const pages = iframe.contentWindow.document.getElementsByClassName('page');
let desiredZoom = 0;
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; let widestPage = 0;
[...pages].forEach((page)=>{ [...pages].forEach((page)=>{
@@ -55,18 +59,10 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
widestPage = width; widestPage = width;
}); });
const margin = 5; // extra space so page isn't edge to edge (not truly "to fill") desiredZoom = (iframeWidth / widestPage) * 100;
const desiredZoom = (iframeWidth / widestPage) * 100;
const deltaZoom = (desiredZoom - zoomLevel) - margin;
return deltaZoom;
};
const toFit = ()=>{
const iframe = document.getElementById('BrewRenderer');
const iframeWidth = iframe.getBoundingClientRect().width;
const iframeHeight = iframe.getBoundingClientRect().height;
const pages = iframe.contentWindow.document.getElementsByClassName('page');
} else if(mode == 'fit'){
// find the page with the largest single dim (height or width) so that zoom can be adapted to fit it.
let maxDimRatio = 0; let maxDimRatio = 0;
[...pages].forEach((page)=>{ [...pages].forEach((page)=>{
@@ -78,10 +74,13 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
} }
}); });
const margin = 5; desiredZoom = maxDimRatio * 100;
const desiredZoom = maxDimRatio * 100;
const deltaZoom = desiredZoom - zoomLevel - margin;
}
const margin = 5; // extra space so page isn't edge to edge (not truly "to fill")
const deltaZoom = (desiredZoom - zoomLevel) - margin;
return deltaZoom; return deltaZoom;
}; };
@@ -91,14 +90,14 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
<button <button
id='zoom-to-fill' id='zoom-to-fill'
className='tool' className='tool'
onClick={()=>handleZoomChange(toFill())} onClick={()=>handleZoomChange(calculateZoom('fill'))}
> >
toFill toFill
</button> </button>
<button <button
id='zoom-to-fit' id='zoom-to-fit'
className='tool' className='tool'
onClick={()=>handleZoomChange(toFit())} onClick={()=>handleZoomChange(calculateZoom('fit'))}
> >
toFit toFit
</button> </button>