mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-15 23:54:42 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

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
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) { if (!renderer.current || !lineMarks || !onScroll) {
return return
} }
const resyncedScroll = Math.ceil(renderer.current.scrollTop) === lastScrollPosition.current
if (resyncedScroll) {
return
}
const scrollTop = renderer.current.scrollTop const scrollTop = renderer.current.scrollTop
const beforeLineMark = lineMarks const lineMarksBeforeScrollTop = lineMarks.filter(lineMark => lineMark.position <= scrollTop)
.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) => .reduce((prevLineMark, currentLineMark) =>
prevLineMark.line >= currentLineMark.line ? prevLineMark : currentLineMark) prevLineMark.line >= currentLineMark.line ? prevLineMark : currentLineMark)
const afterLineMark = lineMarks const afterLineMark = lineMarksAfterScrollTop
.filter(lineMark => lineMark.position > scrollTop)
.reduce((prevLineMark, currentLineMark) => .reduce((prevLineMark, currentLineMark) =>
prevLineMark.line < currentLineMark.line ? prevLineMark : currentLineMark) prevLineMark.line < currentLineMark.line ? prevLineMark : currentLineMark)
@ -79,7 +83,7 @@ export const DocumentRenderPane: React.FC<DocumentRenderPaneProps & ScrollProps>
return ( return (
<div className={'bg-light flex-fill pb-5 flex-row d-flex w-100 h-100 overflow-y-scroll'} <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'}/> <div className={'col-md'}/>
<MarkdownRenderer <MarkdownRenderer
className={'flex-fill mb-3'} 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) { if (!editor || !scrollState) {
return 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 heightOfLine = (editor.lineInfo(scrollState.firstLineInView - 1).handle as { height: number }).height
const newPositionRaw = startYOfLine + (heightOfLine * scrollState.scrolledPercentage / 100) const newPositionRaw = startYOfLine + (heightOfLine * scrollState.scrolledPercentage / 100)
const newPosition = Math.floor(newPositionRaw) const newPosition = Math.floor(newPositionRaw)