github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-11-26 03:33:58 -05:00
Code Issues Projects Releases Packages Wiki Activity

Fix scroll bugs (#487)

Browse source 
* Check line presence before calculating position
* Fix jump bug
This commit is contained in:
mrdrogdrog 2020-08-26 21:59:03 +02:00 committed by GitHub
parent 8a9c2c923d
commit 52fb372b9b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/components/editor/document-renderer-pane/document-render-pane.tsx
View file

@ -52,20 +52,24 @@ export const DocumentRenderPane: React.FC<DocumentRenderPaneProps & ScrollProps>
if (!renderer.current || !lineMarks || !onScroll) {
return
}
const resyncedScroll = Math.ceil(renderer.current.scrollTop) === lastScrollPosition.current
if (resyncedScroll) {
return
}
const scrollTop = renderer.current.scrollTop
const beforeLineMark = lineMarks
.filter(lineMark => lineMark.position <= scrollTop)
const lineMarksBeforeScrollTop = lineMarks.filter(lineMark => lineMark.position <= scrollTop)
if (lineMarksBeforeScrollTop.length === 0) {
return
}
const lineMarksAfterScrollTop = lineMarks.filter(lineMark => lineMark.position > scrollTop)
if (lineMarksAfterScrollTop.length === 0) {
return
}
const beforeLineMark = lineMarksBeforeScrollTop
.reduce((prevLineMark, currentLineMark) =>
prevLineMark.line >= currentLineMark.line ? prevLineMark : currentLineMark)
const afterLineMark = lineMarks
.filter(lineMark => lineMark.position > scrollTop)
const afterLineMark = lineMarksAfterScrollTop
.reduce((prevLineMark, currentLineMark) =>
prevLineMark.line < currentLineMark.line ? prevLineMark : currentLineMark)
@ -79,7 +83,7 @@ export const DocumentRenderPane: React.FC<DocumentRenderPaneProps & ScrollProps>
return (
<div className={'bg-light flex-fill pb-5 flex-row d-flex w-100 h-100 overflow-y-scroll'}
ref={renderer} onScroll={userScroll} onMouseEnter={onMakeScrollSource} >
ref={renderer} onScroll={userScroll} onMouseEnter={onMakeScrollSource}>
<div className={'col-md'}/>
<MarkdownRenderer
className={'flex-fill mb-3'}

2
src/components/editor/editor-pane/editor-pane.tsx
View file

@ -87,7 +87,7 @@ export const EditorPane: React.FC<EditorPaneProps & ScrollProps> = ({ onContentC
if (!editor || !scrollState) {
return
}
const startYOfLine = editor.heightAtLine(scrollState.firstLineInView - 1, 'div')
const startYOfLine = editor.heightAtLine(scrollState.firstLineInView - 1, 'local')
const heightOfLine = (editor.lineInfo(scrollState.firstLineInView - 1).handle as { height: number }).height
const newPositionRaw = startYOfLine + (heightOfLine * scrollState.scrolledPercentage / 100)
const newPosition = Math.floor(newPositionRaw)