naturalcrit · dbolack-ab · May 18, 2024 · May 19, 2024 · May 19, 2024 · May 19, 2024
diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx
@@ -20,6 +20,7 @@ const DOMPurify = require('dompurify');
 const purifyConfig = { FORCE_BODY: true, SANITIZE_DOM: false };
 
 const PAGE_HEIGHT = 1056;
+let isScrolling;
 
 const INITIAL_CONTENT = dedent`
 	<!DOCTYPE html><html><head>
@@ -87,6 +88,21 @@ const BrewRenderer = (props)=>{
 		}));
 	};
 
+	const handleScroll = (e)=>{
+		const target = e.target;
+		const newPage = Math.floor(target.scrollTop / target.scrollHeight * rawPages.length);
+		if(newPage != state.viewablePageNumber) {
+			window.clearTimeout(isScrolling);
+			isScrolling = setTimeout(function() {
+				window.parent.document.dispatchEvent(new CustomEvent('renderScrolled', {}));
+			}, 66);
+		}
+		setState((prevState)=>({
+			...prevState,
+			viewablePageNumber : newPage
+		}));
+	};
+
 	const getCurrentPage = (e)=>{
 		const { scrollTop, clientHeight, scrollHeight } = e.target;
 		const totalScrollableHeight = scrollHeight - clientHeight;
@@ -98,6 +114,7 @@ const BrewRenderer = (props)=>{
 		}));
 	};
 
+
 	const isInView = (index)=>{
 		if(!state.isMounted)
 			return false;

diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx
@@ -22,6 +22,21 @@ const DEFAULT_STYLE_TEXT = dedent`
 					color: black;
 				}`;
 
+let lastPage = 0;
+let lockBrewJump = false;
+let lockSourceJump = false;
+let scrollingJump = false;
+
+const isElementCodeMirror=(element)=>{
+	let el = element;
+	while( el.tagName != 'body' ) {
+		if ( !el?.classList ) return false
+		if( el?.classList?.contains('CodeMirror-code') || el.classList.contains('CodeMirror-line'))
+			return true;
+		el = el.parentNode;
+	}
+	return false;
+};
 
 const Editor = createClass({
 	displayName     : 'Editor',
@@ -56,11 +71,22 @@ const Editor = createClass({
 	isMeta  : function() {return this.state.view == 'meta';},
 
 	componentDidMount : function() {
+
 		this.updateEditorSize();
 		this.highlightCustomMarkdown();
 		window.addEventListener('resize', this.updateEditorSize);
 		document.getElementById('BrewRenderer').addEventListener('keydown', this.handleControlKeys);
+		document.addEventListener('renderScrolled', this.handleBrewScroll);
 		document.addEventListener('keydown', this.handleControlKeys);
+		document.addEventListener('click', (e)=>{
+			if(isElementCodeMirror(e.target) && this.props.liveScroll ) {
+				const curPage = this.getCurrentPage();
+				if( curPage != lastPage ) {
+					this.brewJump();
+					lastPage = curPage;
+				}
+			}
+		});
 
 		const editorTheme = window.localStorage.getItem(EDITOR_THEME_KEY);
 		if(editorTheme) {
@@ -75,27 +101,63 @@ const Editor = createClass({
 	},
 
 	componentDidUpdate : function(prevProps, prevState, snapshot) {
+
 		this.highlightCustomMarkdown();
 		if(prevProps.moveBrew !== this.props.moveBrew) {
 			this.brewJump();
 		};
 		if(prevProps.moveSource !== this.props.moveSource) {
 			this.sourceJump();
 		};
+		if(prevProps.liveScroll != this.props.liveScroll) {
+			if((prevProps.liveScroll != undefined) && (this.props.liveScroll)) this.brewJump();
+		};
 	},
 
 	handleControlKeys : function(e){
-		if(!(e.ctrlKey && e.metaKey)) return;
+		const END_KEY = 35;
+		const HOME_KEY = 36;
 		const LEFTARROW_KEY = 37;
 		const RIGHTARROW_KEY = 39;
-		if (e.shiftKey && (e.keyCode == RIGHTARROW_KEY)) this.brewJump();
-		if (e.shiftKey && (e.keyCode == LEFTARROW_KEY)) this.sourceJump();
-		if ((e.keyCode == LEFTARROW_KEY) || (e.keyCode == RIGHTARROW_KEY)) {
+		if(!(e.ctrlKey && e.metaKey)) return;
+
+		if(!e.ctrlKey) return;
+
+		if(this.props.liveScroll) {
+			const movementKeys = [13, 33, 34, LEFTARROW_KEY, 38, RIGHTARROW_KEY, 40];
+			if(movementKeys.includes(e.keyCode)) {
+				const curPage = this.getCurrentPage();
+				if(curPage != lastPage) {
+					this.brewJump();
+					lastPage = curPage;
+				}
+			}
+		}
+
+		// Handle CTRL-HOME and CTRL-END
+		if(((e.keyCode == END_KEY) || (e.keyCode == HOME_KEY)) && this.props.liveScroll) this.brewJump();
+		if(!e.metaKey) return;
+		if(e.shiftKey && (e.keyCode == RIGHTARROW_KEY)) this.brewJump();
+		if(e.shiftKey && (e.keyCode == LEFTARROW_KEY)) this.sourceJump();
+		if((e.keyCode == LEFTARROW_KEY) || (e.keyCode == RIGHTARROW_KEY)) {
 			e.stopPropagation();
 			e.preventDefault();
 		}
 	},
 
+	handleBrewScroll : function() {
+		if(!this.props.liveScroll) return;
+		scrollingJump = true;
+		this.sourceJump();
+		scrollingJump = false;
+	},
+
+	handleSourceScroll : function(e) {
+		if(!this.props.liveScroll) return;
+		scrollingJump = true;
+		this.brewJump();
+		scrollingJump = false;
+	},
 
 	updateEditorSize : function() {
 		if(this.codeEditor.current) {
@@ -292,8 +354,11 @@ const Editor = createClass({
 	},
 
 	brewJump : function(targetPage=this.getCurrentPage()){
+		if(lockBrewJump) return;
 		if(!window) return;
-		// console.log(`Scroll to: p${targetPage}`);
+		lockSourceJump = true;
+		lockBrewJump = true;
+		//console.log(`Scroll to: p${targetPage}`);
 		const brewRenderer = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer')[0];
 		const currentPos = brewRenderer.scrollTop;
 		const targetPos = window.frames['BrewRenderer'].contentDocument.getElementById(`p${targetPage}`).getBoundingClientRect().top;
@@ -302,24 +367,33 @@ const Editor = createClass({
 		const bounceDelay = 100;
 		const scrollDelay = 500;
 
-		if(!this.throttleBrewMove) {
-			this.throttleBrewMove = _.throttle((currentPos, interimPos, targetPos)=>{
-				brewRenderer.scrollTo({ top: currentPos + interimPos, behavior: 'smooth' });
-				setTimeout(()=>{
-					brewRenderer.scrollTo({ top: currentPos + targetPos, behavior: 'smooth', block: 'start' });
-				}, bounceDelay);
-			}, scrollDelay, { leading: true, trailing: false });
-		};
-		this.throttleBrewMove(currentPos, interimPos, targetPos);
+		if(scrollingJump) {
+			brewRenderer.scrollTo({ top: currentPos + targetPos, behavior: 'instant', block: 'start' });
+		} else {
+			if(!this.throttleBrewMove) {
+				this.throttleBrewMove = _.throttle((currentPos, interimPos, targetPos)=>{
+					brewRenderer.scrollTo({ top: currentPos + interimPos, behavior: 'smooth' });
+					setTimeout(()=>{
+						brewRenderer.scrollTo({ top: currentPos + targetPos, behavior: 'smooth', block: 'start' });
+					}, bounceDelay);
+				}, scrollDelay, { leading: true, trailing: false });
+			};
+			this.throttleBrewMove(currentPos, interimPos, targetPos);
+		}
+		lockSourceJump = false;
+		lockBrewJump = false;
 
 		// const hashPage = (page != 1) ? `p${page}` : '';
 		// window.location.hash = hashPage;
 	},
 
 	sourceJump : function(targetLine=null){
+		if(lockSourceJump) return;
 		if(this.isText()) {
 			if(targetLine == null) {
 				targetLine = 0;
+				lockBrewJump = true;
+				lockSourceJump = true;
 
 				const pageCollection = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('page');
 				const brewRendererHeight = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer').item(0).getBoundingClientRect().height;
@@ -342,23 +416,33 @@ const Editor = createClass({
 				let currentY = this.codeEditor.current.codeMirror.getScrollInfo().top;
 				let targetY  = this.codeEditor.current.codeMirror.heightAtLine(targetLine, 'local', true);
 
-				//Scroll 1/10 of the way every 10ms until 1px off.
-				const incrementalScroll = setInterval(()=>{
-					currentY += (targetY - currentY) / 10;
-					this.codeEditor.current.codeMirror.scrollTo(null, currentY);
-
-					// Update target: target height is not accurate until within +-10 lines of the visible window
-					if(Math.abs(targetY - currentY > 100))
-						targetY = this.codeEditor.current.codeMirror.heightAtLine(targetLine, 'local', true);
-
-					// End when close enough
-					if(Math.abs(targetY - currentY) < 1) {
-						this.codeEditor.current.codeMirror.scrollTo(null, targetY);  // Scroll any remaining difference
-						this.codeEditor.current.setCursorPosition({ line: targetLine + 1, ch: 0 });
-						this.codeEditor.current.codeMirror.addLineClass(targetLine + 1, 'wrap', 'sourceMoveFlash');
-						clearInterval(incrementalScroll);
-					}
-				}, 10);
+				if(!scrollingJump) {
+					//Scroll 1/10 of the way every 10ms until 1px off.
+					const incrementalScroll = setInterval(()=>{
+						currentY += (targetY - currentY) / 10;
+						this.codeEditor.current.codeMirror.scrollTo(null, currentY);
+
+						// Update target: target height is not accurate until within +-10 lines of the visible window
+						if(Math.abs(targetY - currentY > 100))
+							targetY = this.codeEditor.current.codeMirror.heightAtLine(targetLine, 'local', true);
+
+						// End when close enough
+						if(Math.abs(targetY - currentY) < 1) {
+							this.codeEditor.current.codeMirror.scrollTo(null, targetY);  // Scroll any remaining difference
+							this.codeEditor.current.setCursorPosition({ line: targetLine + 1, ch: 0 });
+							this.codeEditor.current.codeMirror.addLineClass(targetLine + 1, 'wrap', 'sourceMoveFlash');
+							clearInterval(incrementalScroll);
+							lockBrewJump = false;
+							lockSourceJump = false;
+						}
+					}, 10);
+				} else {
+					this.codeEditor.current.codeMirror.scrollTo(null, targetY);  // Scroll any remaining difference
+					this.codeEditor.current.setCursorPosition({ line: targetLine + 1, ch: 0 });
+					this.codeEditor.current.codeMirror.addLineClass(targetLine + 1, 'wrap', 'sourceMoveFlash');
+					lockBrewJump = false;
+					lockSourceJump = false;
+				}
 			}
 		}
 	},
@@ -389,6 +473,7 @@ const Editor = createClass({
 					view={this.state.view}
 					value={this.props.brew.text}
 					onChange={this.props.onTextChange}
+					onScroll={this.handleSourceScroll}
 					editorTheme={this.state.editorTheme}
 					rerenderParent={this.rerenderParent} />
 			</>;

diff --git a/shared/naturalcrit/codeEditor/codeEditor.jsx b/shared/naturalcrit/codeEditor/codeEditor.jsx
@@ -7,6 +7,7 @@ const closeTag = require('./close-tag');
 const autoCompleteEmoji = require('./autocompleteEmoji');
 
 let CodeMirror;
+let isScrolling;
 if(typeof window !== 'undefined'){
 	CodeMirror = require('codemirror');
 
@@ -190,6 +191,14 @@ const CodeEditor = createClass({
 
 		// Note: codeMirror passes a copy of itself in this callback. cm === this.codeMirror. Either one works.
 		this.codeMirror.on('change', (cm)=>{this.props.onChange(cm.getValue());});
+		this.codeMirror.on('scroll', (cm)=>{
+			window.clearTimeout(isScrolling);
+			const props = this.props;
+			isScrolling = setTimeout(function() {
+				cm.setCursor({ line: cm.lineAtHeight(cm.getWrapperElement().getBoundingClientRect().top) + 1, ch: 0 });
+				props.onScroll(cm.lineAtHeight(cm.getWrapperElement().getBoundingClientRect().top));
+			}, 66);
+		});
 		this.updateSize();
 	},
 

diff --git a/shared/naturalcrit/splitPane/splitPane.jsx b/shared/naturalcrit/splitPane/splitPane.jsx
@@ -15,12 +15,13 @@ const SplitPane = createClass({
 
 	getInitialState : function() {
 		return {
-			currentDividerPos : null,
-			windowWidth       : 0,
-			isDragging        : false,
-			moveSource        : false,
-			moveBrew          : false,
-			showMoveArrows    : true
+			currentDividerPos  : null,
+			windowWidth        : 0,
+			isDragging         : false,
+			moveSource         : false,
+			moveBrew           : false,
+			viewablePageNumber : 0,
+			showMoveArrows     : true
 		};
 	},
 
@@ -42,6 +43,22 @@ const SplitPane = createClass({
 			});
 		}
 		window.addEventListener('resize', this.handleWindowResize);
+
+
+		// This lives here instead of in the initial render because you cannot touch localStorage until the componant mounts.
+		const loadLiveScroll = window.localStorage.getItem('liveScroll') === 'true';
+		this.setState({
+			liveScroll : loadLiveScroll
+		});
+		const toggle = document.getElementById('scrollToggle');
+		const toggleDiv = document.getElementById('scrollToggleDiv');
+		if(loadLiveScroll) {
+			toggle.className = 'fas fa-lock';
+			toggleDiv.className = 'arrow lock';
+		} else {
+			toggle.className = 'fas fa-unlock';
+			toggleDiv.className = 'arrow unlock';
+		}
 	},
 
 	componentWillUnmount : function() {
@@ -89,6 +106,21 @@ const SplitPane = createClass({
 			userSetDividerPos : newSize
 		});
 	},
+
+	liveScrollToggle : function(e) {
+		const flipLiveScroll = !this.state.liveScroll;
+		const toggle = e.target;
+		const toggleDiv = toggle.parentElement;
+		if(flipLiveScroll) {
+			toggle.className = 'fas fa-lock';
+			toggleDiv.className = 'arrow lock';
+		} else {
+			toggle.className = 'fas fa-unlock';
+			toggleDiv.className = 'arrow unlock';
+		}
+		window.localStorage.setItem('liveScroll', String(flipLiveScroll));
+		this.setState({ liveScroll: flipLiveScroll });
+	},
 	/*
 	unFocus : function() {
 		if(document.selection){
@@ -120,6 +152,11 @@ const SplitPane = createClass({
 					onClick={()=>this.setState({ moveBrew: !this.state.moveBrew })} >
 					<i className='fas fa-arrow-right' />
 				</div>
+				<div id='scrollToggleDiv' className={`arrow lock`}
+					style={{ left: this.state.currentDividerPos-4 }}
+					onClick={this.liveScrollToggle} >
+					<i id='scrollToggle' className={`fas fa-lock`} />
+				</div>
 			</>;
 		}
 	},
@@ -144,9 +181,10 @@ const SplitPane = createClass({
 			>
 				{React.cloneElement(this.props.children[0], {
 					...(this.props.showDividerButtons && {
-						moveBrew: this.state.moveBrew,
-						moveSource: this.state.moveSource,
-						setMoveArrows: this.setMoveArrows,
+						moveBrew      : this.state.moveBrew,
+						moveSource    : this.state.moveSource,
+            liveScroll    : this.state.liveScroll,
+						setMoveArrows : this.setMoveArrows,
 					}),
 				})}
 			</Pane>

diff --git a/shared/naturalcrit/splitPane/splitPane.less b/shared/naturalcrit/splitPane/splitPane.less
@@ -53,6 +53,15 @@
 			.tooltipRight('Jump to location in Preview');
 			top : 60px;
 		}
+		&.lock{
+			.tooltipRight('Unlock cursor tracking between windows.');
+			top : 90px;
+			background: #666;
+		}
+		&.unlock{
+			.tooltipRight('Lock cursor tracking between windows.');
+			top : 90px;
+		}
 		&:hover{
 			background-color: #666;
 		}