diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index c2c996e79..1ff09b02f 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -19,7 +19,7 @@ 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` @@ -116,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); @@ -270,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 (