diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx
index c83a2029b..1ff09b02f 100644
--- a/client/homebrew/brewRenderer/brewRenderer.jsx
+++ b/client/homebrew/brewRenderer/brewRenderer.jsx
@@ -19,12 +19,11 @@ const { printCurrentBrew } = require('../../../shared/helpers.js');
import HeaderNav from './headerNav/headerNav.jsx';
import { safeHTML } from './safeHTML.js';
-const PAGEBREAK_REGEX_V3 = /^(?=\\page(?: *{[^\n{}]*})?$)/m;
+const PAGEBREAK_REGEX_V3 = /^(?=\\page(?:break)?(?: *{[^\n{}]*})?$)/m;
const PAGE_HEIGHT = 1056;
const INITIAL_CONTENT = dedent`
-
@@ -117,6 +116,13 @@ const BrewRenderer = (props)=>{
pageShadows : true
});
+ //useEffect to store or gather toolbar state from storage
+ useEffect(()=>{
+ const toolbarState = JSON.parse(window.localStorage.getItem('hb_toolbarState'));
+ console.log('toolbar state:', toolbarState);
+ toolbarState && setDisplayOptions(toolbarState);
+ }, []);
+
const [headerState, setHeaderState] = useState(false);
const mainRef = useRef(null);
@@ -271,6 +277,7 @@ const BrewRenderer = (props)=>{
const handleDisplayOptionsChange = (newDisplayOptions)=>{
setDisplayOptions(newDisplayOptions);
+ localStorage.setItem('hb_toolbarState', JSON.stringify(newDisplayOptions));
};
const pagesStyle = {
diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
index f11d1f127..4f3e356a7 100644
--- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx
+++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
@@ -20,6 +20,11 @@ const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPa
setPageNum(pageRange);
}, [visiblePages]);
+ useEffect(()=>{
+ const visibility = localStorage.getItem('hb_toolbarVisibility') === 'true';
+ setToolsVisible(visibility);
+ }, []);
+
const handleZoomButton = (zoom)=>{
handleOptionChange('zoomLevel', _.round(_.clamp(zoom, MIN_ZOOM, MAX_ZOOM)));
};
@@ -55,15 +60,30 @@ const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPa
// 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;
+ if(displayOptions.spread === 'facing')
+ desiredZoom = (iframeWidth / ((widestPage * 2) + parseInt(displayOptions.columnGap))) * 100;
+ else
+ desiredZoom = (iframeWidth / (widestPage + 20)) * 100;
} else if(mode == 'fit'){
- let minDimRatio;
// find the page with the largest single dim (height or width) so that zoom can be adapted to fit it.
- if(displayOptions.spread === 'facing')
- minDimRatio = [...pages].reduce((minRatio, page)=>Math.min(minRatio, iframeWidth / page.offsetWidth / 2), Infinity); // if 'facing' spread, fit two pages in view
+ let minDimRatio;
+ if(displayOptions.spread === 'active')
+ minDimRatio = [...pages].reduce(
+ (minRatio, page)=>Math.min(minRatio,
+ iframeWidth / page.offsetWidth,
+ iframeHeight / page.offsetHeight
+ ),
+ Infinity
+ );
else
- minDimRatio = [...pages].reduce((minRatio, page)=>Math.min(minRatio, iframeWidth / page.offsetWidth, iframeHeight / page.offsetHeight), Infinity);
+ minDimRatio = [...pages].reduce(
+ (minRatio, page)=>Math.min(minRatio,
+ iframeWidth / ((page.offsetWidth * 2) + parseInt(displayOptions.columnGap)),
+ iframeHeight / page.offsetHeight
+ ),
+ Infinity
+ );
desiredZoom = minDimRatio * 100;
}
@@ -77,7 +97,10 @@ const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPa
return (