0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-15 21:22:43 +00:00

Add some comments and cleanup

Little changes like removing console.logs and adding comments.
This commit is contained in:
Gazook89
2024-10-21 22:13:12 -05:00
parent b6bd7ccf67
commit de7b13bc15
2 changed files with 34 additions and 33 deletions

View File

@@ -36,17 +36,19 @@ const BrewPage = ({contents = '', index = 0, onVisibilityChange, onCenterPageCha
useEffect(()=>{ useEffect(()=>{
if(!pageRef.current) return; if(!pageRef.current) return;
const observer = new IntersectionObserver(
// Observer for tracking pages within the `.pages` div
const visibleObserver = new IntersectionObserver(
(entries)=>{ (entries)=>{
entries.forEach((entry)=>{ entries.forEach((entry)=>{
if(entry.isIntersecting){ if(entry.isIntersecting){
onVisibilityChange(index + 1, true); onVisibilityChange(index + 1, true); // add page to array of visible pages.
} else { } else {
onVisibilityChange(index + 1, false); onVisibilityChange(index + 1, false);
} }
}); });
}, },
{ threshold: .3, rootMargin: '0px 0px 0px 0px' } { threshold: .3, rootMargin: '0px 0px 0px 0px' } // detect when >30% of page is within bounds.
); );
// Observer for tracking the page at the center of the iframe. // Observer for tracking the page at the center of the iframe.
@@ -61,11 +63,11 @@ const BrewPage = ({contents = '', index = 0, onVisibilityChange, onCenterPageCha
{ threshold: 0, rootMargin: '-50% 0px -50% 0px' } // Detect when the page is at the center { threshold: 0, rootMargin: '-50% 0px -50% 0px' } // Detect when the page is at the center
); );
observer.observe(pageRef.current); // attach observers to each `.page`
visibleObserver.observe(pageRef.current);
centerObserver.observe(pageRef.current); centerObserver.observe(pageRef.current);
return ()=>{ return ()=>{
observer.disconnect(); visibleObserver.disconnect();
centerObserver.disconnect(); centerObserver.disconnect();
}; };
}, [index, onVisibilityChange, onCenterPageChange]); }, [index, onVisibilityChange, onCenterPageChange]);
@@ -113,17 +115,18 @@ const BrewRenderer = (props)=>{
rawPages = props.text.split(/^\\page$/gm); rawPages = props.text.split(/^\\page$/gm);
} }
// update centerPage (aka "current page") and pass it up to parent components
useEffect(()=>{ useEffect(()=>{
props.onPageChange(state.centerPage); props.onPageChange(state.centerPage);
}, [state.centerPage]); }, [state.centerPage]);
const handlePageVisibilityChange = useCallback((pageNum, isVisible)=>{ const handlePageVisibilityChange = useCallback((pageNum, isVisible)=>{
setState((prevState)=>{ setState((prevState)=>{
let updatedVisiblePages = new Set(prevState.visiblePages); const updatedVisiblePages = new Set(prevState.visiblePages);
if(isVisible){ if(isVisible){
updatedVisiblePages.add(pageNum) updatedVisiblePages.add(pageNum);
} else { } else {
updatedVisiblePages.delete(pageNum) updatedVisiblePages.delete(pageNum);
} }
const pages = Array.from(updatedVisiblePages); const pages = Array.from(updatedVisiblePages);
@@ -138,7 +141,7 @@ const BrewRenderer = (props)=>{
if(pages.length === 0) return ''; if(pages.length === 0) return '';
const sortedPages = [...pages].sort((a, b)=>a - b); // Copy and sort the array const sortedPages = [...pages].sort((a, b)=>a - b); // Copy and sort the array
let ranges = []; const ranges = [];
let start = sortedPages[0]; let start = sortedPages[0];
for (let i = 1; i <= sortedPages.length; i++) { for (let i = 1; i <= sortedPages.length; i++) {

View File

@@ -7,14 +7,14 @@ const _ = require('lodash');
const MAX_ZOOM = 300; const MAX_ZOOM = 300;
const MIN_ZOOM = 10; const MIN_ZOOM = 10;
const ToolBar = ({ onZoomChange, visiblePages, formattedPages, centerPage, totalPages })=>{ const ToolBar = ({ onZoomChange, visiblePages, formattedPages, totalPages })=>{
const [zoomLevel, setZoomLevel] = useState(100); const [zoomLevel, setZoomLevel] = useState(100);
const [pageNum, setPageNum] = useState(1); const [pageNum, setPageNum] = useState(1);
const [toolsVisible, setToolsVisible] = useState(true); const [toolsVisible, setToolsVisible] = useState(true);
useEffect(()=>{ useEffect(()=>{
if(visiblePages.length !== 0){ if(visiblePages.length !== 0){ // If zoomed in enough, it's possible that no page fits the intersection criteria, so don't update.
setPageNum(formattedPages); setPageNum(formattedPages);
} }
}, [visiblePages]); }, [visiblePages]);
@@ -33,10 +33,8 @@ const ToolBar = ({ onZoomChange, visiblePages, formattedPages, centerPage, total
setPageNum(parseInt(pageInput)); // input type is 'text', so `page` comes in as a string, not number. setPageNum(parseInt(pageInput)); // input type is 'text', so `page` comes in as a string, not number.
}; };
// scroll to a page, used in the Prev/Next Page buttons.
const scrollToPage = (pageNumber)=>{ const scrollToPage = (pageNumber)=>{
console.log('visiblePages:', visiblePages);
console.log('centerPage:', centerPage);
console.log('pageNumber:', pageNumber);
if(typeof pageNumber !== 'number') return; if(typeof pageNumber !== 'number') return;
pageNumber = _.clamp(pageNumber, 1, totalPages); pageNumber = _.clamp(pageNumber, 1, totalPages);
const iframe = document.getElementById('BrewRenderer'); const iframe = document.getElementById('BrewRenderer');