From 8b13528661fe6e74c63ec954834700416caf0e64 Mon Sep 17 00:00:00 2001
From: Gazook89 <58999374+Gazook89@users.noreply.github.com>
Date: Wed, 17 Nov 2021 09:47:51 -0600
Subject: [PATCH] add check for change to current viewport

---
 client/homebrew/editor/editor.jsx            | 40 ++++++++++++--------
 shared/naturalcrit/codeEditor/codeEditor.jsx |  1 +
 2 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx
index 7879b8797..ef96e64c8 100644
--- a/client/homebrew/editor/editor.jsx
+++ b/client/homebrew/editor/editor.jsx
@@ -114,30 +114,40 @@ const Editor = createClass({
 
 			let editorPageCount = 2; // start counting from page 2
 
+			// get top and bottom line numbers currently in editor viewport
+			const viewportRect = codeMirror.getWrapperElement().getBoundingClientRect();
+			const topVisibleLine = codeMirror.lineAtHeight(viewportRect.top, "window");
+			const bottomVisibleLine = codeMirror.lineAtHeight(viewportRect.bottom, "window");
+
 			_.forEach(this.props.brew.text.split('\n'), (line, lineNumber)=>{
 				if(this.props.renderer == 'legacy') {
 					if(line.includes('\\page')) {
-						const testElement = Object.assign(document.createElement('div'), {
-							className   : 'editor-page-count',
-							textContent : editorPageCount
-						});
-						codeMirror.addWidget({ line: lineNumber, ch: 0 }, testElement);
-						// testElement.style.top = `${parseInt(testElement.style.top) - 12.5}px`;
-						testElement.style.top = `${parseInt(testElement.style.top) - cm.defaultTextHeight()}px`;
-						testElement.style.left = null;
+						// add a check here to see if in current viewport, then create widget if true
+						if(lineNumber > topVisibleLine && lineNumber < bottomVisibleLine){
+							const testElement = Object.assign(document.createElement('div'), {
+								className   : 'editor-page-count',
+								textContent : editorPageCount
+							});
+							codeMirror.addWidget({ line: lineNumber, ch: 0 }, testElement);
+							testElement.style.top = `${parseInt(testElement.style.top) - codeMirror.defaultTextHeight()}px`;
+							testElement.style.left = null;
+						}
+						// end createWidget process
 						editorPageCount = editorPageCount + 1;
 					}
 				}
 
 				if(this.props.renderer == 'V3') {
 					if(line.match(/^\\page$/)){
-						const testElement = Object.assign(document.createElement('div'), {
-							className   : 'editor-page-count',
-							textContent : editorPageCount
-						});
-						codeMirror.addWidget({ line: lineNumber, ch: 0 }, testElement);
-						testElement.style.top = `${parseInt(testElement.style.top) - 12.5}px`;
-						testElement.style.left = null;
+						if(lineNumber > topVisibleLine && lineNumber < bottomVisibleLine){
+							const testElement = Object.assign(document.createElement('div'), {
+								className   : 'editor-page-count',
+								textContent : editorPageCount
+							});
+							codeMirror.addWidget({ line: lineNumber, ch: 0 }, testElement);
+							testElement.style.top = `${parseInt(testElement.style.top) - codeMirror.defaultTextHeight()}px`;
+							testElement.style.left = null;
+						}
 						editorPageCount = editorPageCount + 1;
 					}
 				}
diff --git a/shared/naturalcrit/codeEditor/codeEditor.jsx b/shared/naturalcrit/codeEditor/codeEditor.jsx
index 621e24f77..8b9c372b6 100644
--- a/shared/naturalcrit/codeEditor/codeEditor.jsx
+++ b/shared/naturalcrit/codeEditor/codeEditor.jsx
@@ -80,6 +80,7 @@ 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('viewportChange', _.debounce((cm)=>{this.props.onChange(cm.getValue());},200));
 		this.updateSize();
 	},