f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-05 01:32:47 +00:00
Code Wiki Activity

Put page jump checks in componentDidUpdate

Browse Source 
Jump when the current page for brew or editor changes
This commit is contained in:
Trevor Buckner
2024-09-15 00:13:49 -04:00
parent 181c6bf65a
commit 84c0242eee
1 changed files with 73 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
client/homebrew/editor/editor.jsx
View File

@@ -116,11 +116,18 @@ const Editor = createClass({
if(prevProps.moveSource !== this.props.moveSource) { if(prevProps.moveSource !== this.props.moveSource) {
this.sourceJump(); this.sourceJump();
}; };
if(prevProps.liveScroll != this.props.liveScroll) { // if(prevProps.liveScroll !== this.props.liveScroll) {
if((prevProps.liveScroll != undefined) && (this.props.liveScroll)) this.brewJump(); // this.brewJump();
}; // };
if(prevProps.currentBrewRendererPage !== this.props.currentBrewRendererPage) {
this.handleBrewScroll(); if(this.props.liveScroll) {
if(prevProps.currentBrewRendererPageNum !== this.props.currentBrewRendererPageNum) {
this.sourceJump(this.props.currentBrewRendererPageNum, false);
} else if(prevProps.currentEditorViewPageNum !== this.props.currentEditorViewPageNum) {
this.brewJump(this.props.currentEditorViewPageNum, false);
} else if(prevProps.currentEditorCursorPageNum !== this.props.currentEditorCursorPageNum) {
this.brewJump(this.props.currentEditorCursorPageNum, false);
}
} }
}, },
@@ -131,15 +138,15 @@ const Editor = createClass({
const RIGHTARROW_KEY = 39; const RIGHTARROW_KEY = 39;
if(this.props.liveScroll) { if(this.props.liveScroll) {
console.log('Should be scrollig!'); //console.log('Should be scrollig!');
const movementKeys = [13, 33, 34, LEFTARROW_KEY, 38, RIGHTARROW_KEY, 40]; //const movementKeys = [13, 33, 34, LEFTARROW_KEY, 38, RIGHTARROW_KEY, 40];
if(movementKeys.includes(e.keyCode)) { // if(movementKeys.includes(e.keyCode)) {
const curPage = this.getCurrentPage(); // const curPage = this.getCurrentPage();
if(curPage != lastPage) { // if(curPage != lastPage) {
this.brewJump(); // this.brewJump();
lastPage = curPage; // lastPage = curPage;
} // }
} // }
} }
if(!(e.ctrlKey && e.metaKey)) return; if(!(e.ctrlKey && e.metaKey)) return;
@@ -147,26 +154,16 @@ const Editor = createClass({
if(!e.ctrlKey) return; if(!e.ctrlKey) return;
// Handle CTRL-HOME and CTRL-END // Handle CTRL-HOME and CTRL-END
if(((e.keyCode == END_KEY) || (e.keyCode == HOME_KEY)) && this.props.liveScroll) this.brewJump(); //if(((e.keyCode == END_KEY) || (e.keyCode == HOME_KEY)) && this.props.liveScroll) this.brewJump();
if(!e.metaKey) return; if(!e.metaKey) return;
if(e.shiftKey && (e.keyCode == RIGHTARROW_KEY)) this.brewJump(); //if(e.shiftKey && (e.keyCode == RIGHTARROW_KEY)) this.brewJump();
if(e.shiftKey && (e.keyCode == LEFTARROW_KEY)) this.sourceJump(); //if(e.shiftKey && (e.keyCode == LEFTARROW_KEY)) this.sourceJump();
if((e.keyCode == LEFTARROW_KEY) || (e.keyCode == RIGHTARROW_KEY)) { if((e.keyCode == LEFTARROW_KEY) || (e.keyCode == RIGHTARROW_KEY)) {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
} }
}, },
handleBrewScroll : function() {
if(!this.props.liveScroll) return;
this.sourceJump(undefined, false);
},
handleSourceScroll : function() {
if(!this.props.liveScroll) return;
this.brewJump(this.getCurrentPage(false), false);
},
updateEditorSize : function() { updateEditorSize : function() {
if(this.codeEditor.current) { if(this.codeEditor.current) {
let paneHeight = this.editor.current.parentNode.clientHeight; let paneHeight = this.editor.current.parentNode.clientHeight;
@@ -366,8 +363,11 @@ const Editor = createClass({
brewJump : function(targetPage=this.props.currentEditorCursorPageNum, smooth=true){ brewJump : function(targetPage=this.props.currentEditorCursorPageNum, smooth=true){
if(isJumping) return; if(isJumping) return;
if(!window) return; if(!window) return;
console.log(targetPage)
// Get current brewRenderer scroll position and calculate target position // Get current brewRenderer scroll position and calculate target position
const brewRenderer = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer')[0]; const brewRenderer = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer')[0];
if(!brewRenderer) return;
console.log(window.frames['BrewRenderer'].contentDocument.getElementById(`p${targetPage}`));
const currentPos = brewRenderer.scrollTop; const currentPos = brewRenderer.scrollTop;
const targetPos = window.frames['BrewRenderer'].contentDocument.getElementById(`p${targetPage}`).getBoundingClientRect().top; const targetPos = window.frames['BrewRenderer'].contentDocument.getElementById(`p${targetPage}`).getBoundingClientRect().top;
const interimPos = targetPos >= 0 ? -30 : 30; const interimPos = targetPos >= 0 ? -30 : 30;
@@ -409,63 +409,62 @@ const Editor = createClass({
} }
}, },
sourceJump : function(targetLine=null, smooth=true){ sourceJump : function(targetPage=this.props.currentBrewRendererPageNum, smooth=true){
if(isJumping) return; if(isJumping) return;
if(this.isText()) { if(this.isText()) {
if(targetLine == null) { let targetLine = 0;
targetLine = 0;
const textSplit = this.props.renderer == 'V3' ? /^\\page$/gm : /\\page/; const textSplit = this.props.renderer == 'V3' ? /^\\page$/gm : /\\page/;
const textString = this.props.brew.text.split(textSplit).slice(0, this.props.currentBrewRendererPageNum-1).join(textSplit); const textString = this.props.brew.text.split(textSplit).slice(0, targetPage-1).join(textSplit);
const textPosition = textString.length; const textPosition = textString.length;
const lineCount = textString.match('\n') ? textString.slice(0, textPosition).split('\n').length : 0; const lineCount = textString.match('\n') ? textString.slice(0, textPosition).split('\n').length : 0;
targetLine = lineCount - 1; //Scroll to `\page`, which is one line back. targetLine = lineCount - 1; //Scroll to `\page`, which is one line back.
let currentY = this.codeEditor.current.codeMirror.getScrollInfo().top; let currentY = this.codeEditor.current.codeMirror.getScrollInfo().top;
let targetY = this.codeEditor.current.codeMirror.heightAtLine(targetLine, 'local', true); let targetY = this.codeEditor.current.codeMirror.heightAtLine(targetLine, 'local', true);
if (Math.abs(targetY - currentY) < 1) if (Math.abs(targetY - currentY) < 1)
return; return;
isJumping = true; isJumping = true;
// Detect end of scroll event to avoid feedback loops // Detect end of scroll event to avoid feedback loops
let scrollingTimeout; let scrollingTimeout;
const checkIfScrollComplete = () => { const checkIfScrollComplete = () => {
clearTimeout(scrollingTimeout); // Reset the timer every time a scroll event occurs clearTimeout(scrollingTimeout); // Reset the timer every time a scroll event occurs
scrollingTimeout = setTimeout(() => { scrollingTimeout = setTimeout(() => {
isJumping = false; isJumping = false;
this.codeEditor.current.codeMirror.off('scroll', checkIfScrollComplete); this.codeEditor.current.codeMirror.off('scroll', checkIfScrollComplete);
}, 150); // If 150 ms pass without a scroll event, assume scrolling is done }, 150); // If 150 ms pass without a scroll event, assume scrolling is done
}; };
this.codeEditor.current.codeMirror.on('scroll', checkIfScrollComplete); this.codeEditor.current.codeMirror.on('scroll', checkIfScrollComplete);
if(smooth) { if(smooth) {
//Scroll 1/10 of the way every 10ms until 1px off. //Scroll 1/10 of the way every 10ms until 1px off.
const incrementalScroll = setInterval(()=>{ const incrementalScroll = setInterval(()=>{
currentY += (targetY - currentY) / 10; currentY += (targetY - currentY) / 10;
this.codeEditor.current.codeMirror.scrollTo(null, currentY); this.codeEditor.current.codeMirror.scrollTo(null, currentY);
// Update target: target height is not accurate until within +-10 lines of the visible window // Update target: target height is not accurate until within +-10 lines of the visible window
if(Math.abs(targetY - currentY > 100)) if(Math.abs(targetY - currentY > 100))
targetY = this.codeEditor.current.codeMirror.heightAtLine(targetLine, 'local', true); targetY = this.codeEditor.current.codeMirror.heightAtLine(targetLine, 'local', true);
// End when close enough // End when close enough
if(Math.abs(targetY - currentY) < 1) { if(Math.abs(targetY - currentY) < 1) {
this.codeEditor.current.codeMirror.scrollTo(null, targetY); // Scroll any remaining difference this.codeEditor.current.codeMirror.scrollTo(null, targetY); // Scroll any remaining difference
this.codeEditor.current.setCursorPosition({ line: targetLine + 1, ch: 0 }); this.codeEditor.current.setCursorPosition({ line: targetLine + 1, ch: 0 });
this.codeEditor.current.codeMirror.addLineClass(targetLine + 1, 'wrap', 'sourceMoveFlash'); this.codeEditor.current.codeMirror.addLineClass(targetLine + 1, 'wrap', 'sourceMoveFlash');
clearInterval(incrementalScroll); clearInterval(incrementalScroll);
} }
}, 10); }, 10);
} else { } else {
this.codeEditor.current.codeMirror.scrollTo(null, targetY); // Scroll any remaining difference console.log("scrolling codemirror")
this.codeEditor.current.setCursorPosition({ line: targetLine + 1, ch: 0 }); this.codeEditor.current.codeMirror.scrollTo(null, targetY); // Scroll any remaining difference
this.codeEditor.current.codeMirror.addLineClass(targetLine + 1, 'wrap', 'sourceMoveFlash'); this.codeEditor.current.setCursorPosition({ line: targetLine + 1, ch: 0 });
} this.codeEditor.current.codeMirror.addLineClass(targetLine + 1, 'wrap', 'sourceMoveFlash');
} }
} }
}, },