f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-18 14:22:42 +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

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

@@ -42,46 +42,45 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
}; };
const toFill = ()=>{ const calculateZoom = (mode)=>{
const iframe = document.getElementById('BrewRenderer');
const iframeWidth = iframe.getBoundingClientRect().width;
const pages = iframe.contentWindow.document.getElementsByClassName('page');
// 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;
[...pages].forEach((page)=>{
const width = page.offsetWidth;
if(width > widestPage)
widestPage = width;
});
const margin = 5; // extra space so page isn't edge to edge (not truly "to fill")
const desiredZoom = (iframeWidth / widestPage) * 100;
const deltaZoom = (desiredZoom - zoomLevel) - margin;
return deltaZoom;
};
const toFit = ()=>{
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;
const pages = iframe.contentWindow.document.getElementsByClassName('page'); const pages = iframe.contentWindow.document.getElementsByClassName('page');
let maxDimRatio = 0; let desiredZoom = 0;
[...pages].forEach((page)=>{ if(mode == 'fill'){
const widthRatio = iframeWidth / page.offsetWidth; // find widest page, in case pages are different widths, so that the zoom is adapted to not cut the widest page off screen.
const heightRatio = iframeHeight / page.offsetHeight; let widestPage = 0;
const dimensionRatio = Math.min(widthRatio, heightRatio); [...pages].forEach((page)=>{
if(dimensionRatio < maxDimRatio || maxDimRatio == 0){ const width = page.offsetWidth;
maxDimRatio = dimensionRatio; if(width > widestPage)
} widestPage = width;
}); });
const margin = 5; desiredZoom = (iframeWidth / widestPage) * 100;
const desiredZoom = maxDimRatio * 100;
const deltaZoom = desiredZoom - zoomLevel - margin;
} 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;
[...pages].forEach((page)=>{
const widthRatio = iframeWidth / page.offsetWidth;
const heightRatio = iframeHeight / page.offsetHeight;
const dimensionRatio = Math.min(widthRatio, heightRatio);
if(dimensionRatio < maxDimRatio || maxDimRatio == 0){
maxDimRatio = dimensionRatio;
}
});
desiredZoom = maxDimRatio * 100;
}
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>