From 90dd4326e7ed680944c8c2dc9215efcfe617e0a5 Mon Sep 17 00:00:00 2001
From: Gazook89 <John.W.Jones89@gmail.com>
Date: Thu, 22 Aug 2024 20:56:42 -0500
Subject: [PATCH] Add a toFit() method to fit largest page in view

Adding a real toFit() button that takes the page with the largest single dimension (height or width) and makes it fit within the pane.
---
 .../homebrew/brewRenderer/toolBar/toolBar.jsx | 33 ++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
index c0e5ca469..71a76252b 100644
--- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx
+++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
@@ -59,7 +59,31 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 		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');
+
+		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;
+			}
+		});
+
+		const margin = 5;
+		const desiredZoom = maxDimRatio * 100;
+		const deltaZoom = desiredZoom - zoomLevel - margin;
+
+		return deltaZoom;
+	};
 
 	return (
 		<div className='toolBar'>
@@ -71,6 +95,13 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 				>
 					toFill
 				</button>
+				<button
+					id='zoom-to-fit'
+					className='tool'
+					onClick={()=>handleZoomChange(toFit())}
+				>
+					toFit
+				</button>
 				<button
 					id='zoom-out'
 					className='tool'