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

Smooth scroll editor Panel, and flash target line

Browse Source
This commit is contained in:
Trevor Buckner
2022-06-03 13:32:04 -04:00
parent bd681dffae
commit df41b58441
2 changed files with 31 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,8 +19,6 @@ const DEFAULT_STYLE_TEXT = dedent`
color: black; color: black;
}`; }`;
const sourceMoveHighlightClass = 'sourceMoveFlash';
const splice = function(str, index, inject){ const splice = function(str, index, inject){
return str.slice(0, index) + inject + str.slice(index); return str.slice(0, index) + inject + str.slice(index);
}; };
@@ -133,7 +131,7 @@ const Editor = createClass({
//reset custom line styles //reset custom line styles
codeMirror.removeLineClass(lineNumber, 'background', 'pageLine'); codeMirror.removeLineClass(lineNumber, 'background', 'pageLine');
codeMirror.removeLineClass(lineNumber, 'text'); codeMirror.removeLineClass(lineNumber, 'text');
codeMirror.removeLineClass(lineNumber, 'wrap', sourceMoveHighlightClass); codeMirror.removeLineClass(lineNumber, 'wrap', 'sourceMoveFlash');
// Styling for \page breaks // Styling for \page breaks
if((this.props.renderer == 'legacy' && line.includes('\\page')) || if((this.props.renderer == 'legacy' && line.includes('\\page')) ||
@@ -217,12 +215,29 @@ const Editor = createClass({
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; targetLine = lineCount - 1; //Scroll to `\page`, which is one line back.
}
// this.refs.codeEditor.codeMirror.scrollIntoView({ line: targetLine, ch: 0 }, 30); let currentY = this.refs.codeEditor.codeMirror.getScrollInfo().top;
this.refs.codeEditor.setCursorPosition({ line: targetLine, ch: 0 }); let targetY = this.refs.codeEditor.codeMirror.heightAtLine(targetLine, 'local', true);
this.refs.codeEditor.codeMirror.addLineClass(targetLine, 'wrap', sourceMoveHighlightClass);
//Scroll 1/10 of the way every 10ms until 1px off.
const incrementalScroll = setInterval(()=>{
currentY += (targetY - currentY) / 10;
this.refs.codeEditor.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.refs.codeEditor.codeMirror.heightAtLine(targetLine, 'local', true);
// End when close enough
if(Math.abs(targetY - currentY) < 1) {
this.refs.codeEditor.codeMirror.scrollTo(null, targetY); // Scroll any remaining difference
this.refs.codeEditor.setCursorPosition({ line: targetLine + 1, ch: 0 });
this.refs.codeEditor.codeMirror.addLineClass(targetLine + 1, 'wrap', 'sourceMoveFlash');
clearInterval(incrementalScroll);
}
}, 10);
}
} }
}, },

11
shared/naturalcrit/codeEditor/codeEditor.less
View File

@@ -3,6 +3,11 @@
@import (less) 'codemirror/addon/search/matchesonscrollbar.css'; @import (less) 'codemirror/addon/search/matchesonscrollbar.css';
@import (less) 'codemirror/addon/dialog/dialog.css'; @import (less) 'codemirror/addon/dialog/dialog.css';
@keyframes sourceMoveAnimation {
50% {background-color: red; color: white;}
100% {background-color: unset; color: unset;}
}
.codeEditor{ .codeEditor{
.CodeMirror-foldmarker { .CodeMirror-foldmarker {
font-family: inherit; font-family: inherit;
@@ -11,8 +16,8 @@
} }
.sourceMoveFlash .CodeMirror-line{ .sourceMoveFlash .CodeMirror-line{
background-color: #0000fc; animation-name: sourceMoveAnimation;
color: #ffffff; animation-duration: 0.4s;
} }
//.cm-tab { //.cm-tab {
@@ -24,4 +29,4 @@
// background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAQAgMAAABW5NbuAAAACVBMVEVHcEwAAAAAAAAWawmTAAAAA3RSTlMAPBJ6PMxpAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAFUlEQVQI12NgwACcCQysASAEZGAAACMuAX06aCQUAAAAAElFTkSuQmCC) no-repeat right; // background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAQAgMAAABW5NbuAAAACVBMVEVHcEwAAAAAAAAWawmTAAAAA3RSTlMAPBJ6PMxpAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAFUlEQVQI12NgwACcCQysASAEZGAAACMuAX06aCQUAAAAAElFTkSuQmCC) no-repeat right;
// } // }
//} //}
} }