From 8965bb60aa3b36eb809ef6cf85f4ec891191b8dd Mon Sep 17 00:00:00 2001
From: Gazook89 <John.W.Jones89@gmail.com>
Date: Thu, 22 Aug 2024 15:52:52 -0500
Subject: [PATCH] add a toFit() method to determine zoom change

Adds a toFit() method to determine the delta/change needed to the current zoomLevel to fit the page to the pane, so that the widest page fits just inside the pane.
---
 .../homebrew/brewRenderer/toolBar/toolBar.jsx | 27 +++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
index f857d5773..8276f366f 100644
--- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx
+++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
@@ -41,9 +41,36 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 		}
 	};
 
+
+	const toFit = ()=>{
+		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 fit")
+		const desiredZoom = (iframeWidth / widestPage) * 100;
+		const deltaZoom = (desiredZoom - zoomLevel) - margin;
+		return deltaZoom;
+	}
+
 	return (
 		<div className='toolBar'>
 			<div className='group'>
+				<button
+					id='zoom-to-fit'
+					className='tool'
+					onClick={()=>handleZoomChange(toFit())}
+				>
+					toFit
+				</button>
 				<button
 					id='zoom-out'
 					className='tool'