f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-07 14:12:43 +00:00
Code Wiki Activity

Refactor toolbar view options (#2)

Browse Source 
* Refactor toolbar view options

* Remove a couple more unused states
This commit is contained in:
Trevor Buckner
2024-11-01 23:19:48 -04:00
committed by GitHub
parent 810c2140c9
commit f63d2de8f4
2 changed files with 64 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
client/homebrew/brewRenderer/brewRenderer.jsx
View File

@@ -65,9 +65,14 @@ const BrewRenderer = (props)=>{
const [state, setState] = useState({ const [state, setState] = useState({
isMounted : false, isMounted : false,
visibility : 'hidden', visibility : 'hidden'
zoom : 100, });
previewStyles : {}
const [displayOptions, setDisplayOptions] = useState({
zoomLevel : 100,
spread : 'single',
startOnRight : true,
pageShadows : true
}); });
const mainRef = useRef(null); const mainRef = useRef(null);
@@ -118,7 +123,13 @@ const BrewRenderer = (props)=>{
} else { } else {
pageText += `\n\n \n\\column\n `; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear) pageText += `\n\n \n\\column\n `; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear)
const html = Markdown.render(pageText, index); const html = Markdown.render(pageText, index);
return <BrewPage className='page' index={index} key={index} contents={html} style={ state.previewStyles['.page']} />;
const styles = {
...(!displayOptions.pageShadows ? { boxShadow: 'none' } : {})
// Add more conditions as needed
};
return <BrewPage className='page' index={index} key={index} contents={html} style={styles} />;
} }
}; };
@@ -166,35 +177,16 @@ const BrewRenderer = (props)=>{
document.dispatchEvent(new MouseEvent('click')); document.dispatchEvent(new MouseEvent('click'));
}; };
//Toolbar settings: const handleDisplayOptionsChange = (newDisplayOptions)=>{
const handleZoom = (newZoom)=>{ setDisplayOptions(newDisplayOptions);
setState((prevState)=>({
...prevState,
zoom : newZoom
}));
}; };
const handleStyle = (newStyle)=>{ const pagesStyle = {
setState((prevState)=>{ zoom : `${displayOptions.zoomLevel}%`,
// Merge styles, skipping those that are empty objects or null columnGap : `${displayOptions.columnGap}px`,
const mergedStyles = Object.entries(newStyle).reduce((acc, [selector, style])=>{ rowGap : `${displayOptions.rowGap}px`
if(style && Object.keys(style).length > 0) {
acc[selector] = {
...(prevState.previewStyles[selector] || {}), // Preserve existing styles
...style, // Add or override with new styles
};
} else {
// If the style is an empty object or null, delete the selector
delete acc[selector];
}
return acc;
}, { ...prevState.previewStyles });
return { ...prevState, previewStyles: mergedStyles };
});
}; };
const styleObject = {}; const styleObject = {};
if(global.config.deployment) { if(global.config.deployment) {
@@ -218,7 +210,7 @@ const BrewRenderer = (props)=>{
<NotificationPopup /> <NotificationPopup />
</div> </div>
<ToolBar onZoomChange={handleZoom} currentPage={props.currentBrewRendererPageNum} totalPages={rawPages.length} onStyleChange={handleStyle} /> <ToolBar displayOptions={displayOptions} currentPage={props.currentBrewRendererPageNum} totalPages={rawPages.length} onDisplayOptionsChange={handleDisplayOptionsChange} />
{/*render in iFrame so broken code doesn't crash the site.*/} {/*render in iFrame so broken code doesn't crash the site.*/}
<Frame id='BrewRenderer' initialContent={INITIAL_CONTENT} <Frame id='BrewRenderer' initialContent={INITIAL_CONTENT}
@@ -237,7 +229,8 @@ const BrewRenderer = (props)=>{
&& &&
<> <>
{renderStyle()} {renderStyle()}
<div className='pages' lang={`${props.lang || 'en'}`} style={{ zoom: `${state.zoom}%`, ...state.previewStyles['.pages'] }}> <div lang={`${props.lang || 'en'}`} style={pagesStyle} className={
`pages ${displayOptions.startOnRight ? 'recto' : 'verso'} ${displayOptions.spread }` } >
{renderPages()} {renderPages()}
</div> </div>
</> </>

95
client/homebrew/brewRenderer/toolBar/toolBar.jsx
View File

@@ -9,46 +9,22 @@ import { Anchored, AnchoredBox, AnchoredTrigger } from '../../../components/Anch
const MAX_ZOOM = 300; const MAX_ZOOM = 300;
const MIN_ZOOM = 10; const MIN_ZOOM = 10;
const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages, onStyleChange })=>{ const ToolBar = ({ displayOptions, currentPage, totalPages, onDisplayOptionsChange })=>{
const [zoomLevel, setZoomLevel] = useState(100);
const [pageNum, setPageNum] = useState(currentPage); const [pageNum, setPageNum] = useState(currentPage);
const [spread, setSpread] = useState('single');
const [startOnRight, setStartOnRight] = useState(true);
const [pageShadows, setPageShadows] = useState(true);
const [pagesStyle, setPagesStyle] = useState({});
const [toolsVisible, setToolsVisible] = useState(true); const [toolsVisible, setToolsVisible] = useState(true);
const spreads = ['single', 'facing', 'flow'];
useEffect(()=>{
onZoomChange(zoomLevel);
}, [zoomLevel]);
useEffect(()=>{ useEffect(()=>{
setPageNum(currentPage); setPageNum(currentPage);
}, [currentPage]);; }, [currentPage]);
// update display arrangement when arrangement state is changed.
// todo: do this the 'react' way, without querying the dom.
useEffect(()=>{
const iframe = document.getElementById('BrewRenderer');
const pagesContainer = iframe?.contentWindow?.document.querySelector('.pages');
if(pagesContainer) {
spreads.forEach((spread)=>pagesContainer.classList.remove(spread));
pagesContainer.classList.add(spread);
['recto', 'verso'].forEach((leaf)=>pagesContainer.classList.remove(leaf));
pagesContainer.classList.add(startOnRight ? 'recto' : 'verso');
}
}, [spread, startOnRight]);
useEffect(()=>{
onStyleChange({ '.page': pageShadows ? {} : { boxShadow: 'none' } });
}, [pageShadows]);
const handleZoomButton = (zoom)=>{ const handleZoomButton = (zoom)=>{
setZoomLevel(_.round(_.clamp(zoom, MIN_ZOOM, MAX_ZOOM))); handleOptionChange('zoomLevel', _.round(_.clamp(zoom, MIN_ZOOM, MAX_ZOOM)));
};
const handleOptionChange = (optionKey, newValue)=>{
//setDisplayOptions(prevOptions => ({ ...prevOptions, [optionKey]: newValue }));
onDisplayOptionsChange({ ...displayOptions, [optionKey]: newValue });
}; };
const handlePageInput = (pageInput)=>{ const handlePageInput = (pageInput)=>{
@@ -89,7 +65,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages, onStyleC
const margin = 5; // extra space so page isn't edge to edge (not truly "to fill") const margin = 5; // extra space so page isn't edge to edge (not truly "to fill")
const deltaZoom = (desiredZoom - zoomLevel) - margin; const deltaZoom = (desiredZoom - displayOptions.zoomLevel) - margin;
return deltaZoom; return deltaZoom;
}; };
@@ -101,22 +77,22 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages, onStyleC
<button <button
id='fill-width' id='fill-width'
className='tool' className='tool'
onClick={()=>handleZoomButton(zoomLevel + calculateChange('fill'))} onClick={()=>handleZoomButton(displayOptions.zoomLevel + calculateChange('fill'))}
> >
<i className='fac fit-width' /> <i className='fac fit-width' />
</button> </button>
<button <button
id='zoom-to-fit' id='zoom-to-fit'
className='tool' className='tool'
onClick={()=>handleZoomButton(zoomLevel + calculateChange('fit'))} onClick={()=>handleZoomButton(displayOptions.zoomLevel + calculateChange('fit'))}
> >
<i className='fac zoom-to-fit' /> <i className='fac zoom-to-fit' />
</button> </button>
<button <button
id='zoom-out' id='zoom-out'
className='tool' className='tool'
onClick={()=>handleZoomButton(zoomLevel - 20)} onClick={()=>handleZoomButton(displayOptions.zoomLevel - 20)}
disabled={zoomLevel <= MIN_ZOOM} disabled={displayOptions.zoomLevel <= MIN_ZOOM}
> >
<i className='fas fa-magnifying-glass-minus' /> <i className='fas fa-magnifying-glass-minus' />
</button> </button>
@@ -129,7 +105,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages, onStyleC
min={MIN_ZOOM} min={MIN_ZOOM}
max={MAX_ZOOM} max={MAX_ZOOM}
step='1' step='1'
value={zoomLevel} value={displayOptions.zoomLevel}
onChange={(e)=>handleZoomButton(parseInt(e.target.value))} onChange={(e)=>handleZoomButton(parseInt(e.target.value))}
/> />
<datalist id='zoomLevels'> <datalist id='zoomLevels'>
@@ -139,33 +115,33 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages, onStyleC
<button <button
id='zoom-in' id='zoom-in'
className='tool' className='tool'
onClick={()=>handleZoomButton(zoomLevel + 20)} onClick={()=>handleZoomButton(displayOptions.zoomLevel + 20)}
disabled={zoomLevel >= MAX_ZOOM} disabled={displayOptions.zoomLevel >= MAX_ZOOM}
> >
<i className='fas fa-magnifying-glass-plus' /> <i className='fas fa-magnifying-glass-plus' />
</button> </button>
</div> </div>
{/*v=====----------------------< Page Controls >---------------------=====v*/} {/*v=====----------------------< Spread Controls >---------------------=====v*/}
<div className='group'> <div className='group'>
<div className='radio-group' role='group'> <div className='radio-group' role='group'>
<button role='radio' <button role='radio'
id='single-spread' id='single-spread'
className={`tool${spread === 'single' && ' active'}`} className={`tool${displayOptions.spread === 'single' && ' active'}`}
title='Single Page' title='Single Page'
onClick={()=>setSpread('single')} onClick={()=>{handleOptionChange('spread', 'active')}}
><i className='fac single-spread' /></button> ><i className='fac single-spread' /></button>
<button role='radio' <button role='radio'
id='facing-spread' id='facing-spread'
className={`tool${spread === 'facing' && ' active'}`} className={`tool${displayOptions.spread === 'facing' && ' active'}`}
title='Facing Pages' title='Facing Pages'
onClick={()=>setSpread('facing')} onClick={()=>{handleOptionChange('spread', 'facing')}}
><i className='fac facing-spread' /></button> ><i className='fac facing-spread' /></button>
<button role='radio' <button role='radio'
id='flow-spread' id='flow-spread'
className={`tool${spread === 'flow' && ' active'}`} className={`tool${displayOptions.spread === 'flow' && ' active'}`}
title='Flow Pages' title='Flow Pages'
onClick={()=>setSpread('flow')} onClick={()=>{handleOptionChange('spread', 'flow')}}
><i className='fac flow-spread' /></button> ><i className='fac flow-spread' /></button>
</div> </div>
@@ -173,19 +149,28 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages, onStyleC
<AnchoredTrigger id='spread-settings' className='tool' title='Spread options'><i className='fas fa-gear' /></AnchoredTrigger> <AnchoredTrigger id='spread-settings' className='tool' title='Spread options'><i className='fas fa-gear' /></AnchoredTrigger>
<AnchoredBox title='Options'> <AnchoredBox title='Options'>
<h1>Options</h1> <h1>Options</h1>
<label title='Modify the horizontal space between pages.'>Column gap<input type='range' min={0} max={200} defaultValue={10} className='range-input' onChange={(evt)=>onStyleChange({ '.pages': { columnGap: `${evt.target.value}px` }})} /></label> <label title='Modify the horizontal space between pages.'>
<label title='Modify the vertical space between rows of pages.'>Row gap<input type='range' min={0} max={200} defaultValue={10} className='range-input' onChange={(evt)=>onStyleChange({ '.pages': { rowGap: `${evt.target.value}px` } })} /></label> Column gap
<label title='Start 1st page on the right side, such as if you have cover page.'>Start on right <input type='range' min={0} max={200} defaultValue={10} className='range-input' onChange={(evt)=>handleOptionChange('columnGap', evt.target.value )} />
<input type='checkbox' </label>
onChange={()=>setStartOnRight(!startOnRight)} <label title='Modify the vertical space between rows of pages.'>
checked={startOnRight} Row gap
title={spread !== 'facing' ? 'Switch to Facing to enable toggle.' : null} /> <input type='range' min={0} max={200} defaultValue={10} className='range-input' onChange={(evt)=>handleOptionChange('rowGap', evt.target.value )} />
</label>
<label title='Start 1st page on the right side, such as if you have cover page.'>
Start on right
<input type='checkbox' checked={displayOptions.startOnRight} onChange={()=>{handleOptionChange('startOnRight', !displayOptions.startOnRight)}}
title={displayOptions.spread !== 'facing' ? 'Switch to Facing to enable toggle.' : null} />
</label>
<label title='Toggle the page shadow on every page.'>
Page shadows
<input type='checkbox' checked={displayOptions.pageShadows} onChange={()=>{handleOptionChange('pageShadows', !displayOptions.pageShadows)}} />
</label> </label>
<label title='Toggle the page shadow on every page.'>Page shadows<input type='checkbox' checked={pageShadows} onChange={()=>setPageShadows(!pageShadows)} /></label>
</AnchoredBox> </AnchoredBox>
</Anchored> </Anchored>
</div> </div>
{/*v=====----------------------< Page Controls >---------------------=====v*/}
<div className='group'> <div className='group'>
<button <button
id='previous-page' id='previous-page'