Merge branch 'master' into Fix-Toolbar-Positioning

client/homebrew/brewRenderer/toolBar/toolBar.jsx

@@ -3,6 +3,7 @@ const React = require('react');
 const { useState, useEffect } = React;
 const _ = require('lodash');
 
+
 const MAX_ZOOM = 300;
 const MIN_ZOOM = 10;
 
@@ -19,8 +20,8 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 		setPageNum(currentPage);
 	}, [currentPage]);
 
-	const handleZoomButton = (delta)=>{
-		setZoomLevel(_.clamp(zoomLevel + delta, MIN_ZOOM, MAX_ZOOM));
+	const handleZoomButton = (zoom)=>{
+		setZoomLevel(_.round(_.clamp(zoom, MIN_ZOOM, MAX_ZOOM)));
 	};
 
 	const handlePageInput = (pageInput)=>{
@@ -37,14 +38,56 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 		setPageNum(pageNumber);
 	};
 
+
+	const calculateChange = (mode)=>{
+		const iframe = document.getElementById('BrewRenderer');
+		const iframeWidth = iframe.getBoundingClientRect().width;
+		const iframeHeight = iframe.getBoundingClientRect().height;
+		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.
+			const widestPage = _.maxBy([...pages], 'offsetWidth').offsetWidth;
+
+			desiredZoom = (iframeWidth / widestPage) * 100;
+
+		} else if(mode == 'fit'){
+			// find the page with the largest single dim (height or width) so that zoom can be adapted to fit it.
+			const minDimRatio = [...pages].reduce((minRatio, page) => Math.min(minRatio, iframeWidth / page.offsetWidth, iframeHeight / page.offsetHeight), Infinity);
+
+			desiredZoom = minDimRatio * 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 (
 		<div className='toolBar'>
 			{/*v=====----------------------< Zoom Controls >---------------------=====v*/}
 			<div className='group'>
+				<button
+					id='fill-width'
+					className='tool'
+					onClick={()=>handleZoomButton(zoomLevel + calculateChange('fill'))}
+				>
+					<i className='fac fit-width' />
+				</button>
+				<button
+					id='zoom-to-fit'
+					className='tool'
+					onClick={()=>handleZoomButton(zoomLevel + calculateChange('fit'))}
+				>
+					<i className='fac zoom-to-fit' />
+				</button>
 				<button
 					id='zoom-out'
 					className='tool'
-					onClick={()=>handleZoomButton(-20)}
+					onClick={()=>handleZoomButton(zoomLevel - 20)}
 					disabled={zoomLevel <= MIN_ZOOM}
 				>
 					<i className='fas fa-magnifying-glass-minus' />
@@ -59,7 +102,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 					max={MAX_ZOOM}
 					step='1'
 					value={zoomLevel}
-					onChange={(e)=>setZoomLevel(parseInt(e.target.value))}
+					onChange={(e)=>handleZoomButton(parseInt(e.target.value))}
 				/>
 				<datalist id='zoomLevels'>
 					<option value='100' />
@@ -68,7 +111,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 				<button
 					id='zoom-in'
 					className='tool'
-					onClick={()=>handleZoomButton(20)}
+					onClick={()=>handleZoomButton(zoomLevel + 20)}
 					disabled={zoomLevel >= MAX_ZOOM}
 				>
 					<i className='fas fa-magnifying-glass-plus' />

client/homebrew/brewRenderer/toolBar/toolBar.less

@@ -1,3 +1,5 @@
+@import (less) './client/icons/customIcons.less';
+
 .toolBar {
 	position         : relative;
 	z-index          : 1;
@@ -94,5 +96,8 @@
 			color            : #777777;
 			background-color : unset !important;
 		}
+		i {
+			font-size:1.2em;
+		}
 	}
 }