diff --git a/client/homebrew/brewRenderer/brewRenderer.less b/client/homebrew/brewRenderer/brewRenderer.less index 234624aa2..8c8414814 100644 --- a/client/homebrew/brewRenderer/brewRenderer.less +++ b/client/homebrew/brewRenderer/brewRenderer.less @@ -1,7 +1,6 @@ @import (multiple, less) 'shared/naturalcrit/styles/reset.less'; .brewRenderer { - padding-top : 30px; overflow-y : scroll; will-change : transform; :where(.pages) { diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx index 8ad14ae9b..fb3b62067 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx +++ b/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 (
{/*v=====----------------------< Zoom Controls >---------------------=====v*/}
+ +