github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-12-03 12:53:34 -05:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #3070 from overleaf/ta-outline-scroll-fixes

Browse source 
Outline Scroll Fixes

GitOrigin-RevId: 14bff01ab7678d363884bd8525ad3f7e60acacb4
This commit is contained in:
Paulo Jorge Reis 2020-08-06 10:04:45 +01:00 committed by Copybot
parent 0538ea2069
commit 4e3a9d4fa8
2 changed files with 14 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
services/web/frontend/js/ide/outline/OutlineManager.js
View file

@ -56,7 +56,6 @@ class OutlineManager {
} }
this.updateHighlightedLine(middleVisibleRow + 1) this.updateHighlightedLine(middleVisibleRow + 1)
this.broadcastChangeEvent()
}) })
scope.$watch('editor.showRichText', () => { scope.$watch('editor.showRichText', () => {
@ -84,7 +83,9 @@ class OutlineManager {
if (editorLine < outline.line) break // editorLine is above if (editorLine < outline.line) break // editorLine is above
closestOutlineLine = outline.line closestOutlineLine = outline.line
} }
if (closestOutlineLine === this.highlightedLine) return
this.highlightedLine = closestOutlineLine this.highlightedLine = closestOutlineLine
this.broadcastChangeEvent()
} }
jumpToLine(line) { jumpToLine(line) {

13
services/web/frontend/js/ide/outline/components/OutlineItem.js
View file

@ -1,4 +1,4 @@
import React, { useState, useEffect, createRef } from 'react' import React, { useState, useEffect, createRef, useRef } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import classNames from 'classnames' import classNames from 'classnames'
import OutlineList from './OutlineList' import OutlineList from './OutlineList'
@ -6,6 +6,7 @@ import OutlineList from './OutlineList'
function OutlineItem({ outlineItem, jumpToLine, highlightedLine }) { function OutlineItem({ outlineItem, jumpToLine, highlightedLine }) {
const [expanded, setExpanded] = useState(true) const [expanded, setExpanded] = useState(true)
const titleElementRef = createRef() const titleElementRef = createRef()
const isHighlightedRef = useRef(false)
const mainItemClasses = classNames('outline-item', { const mainItemClasses = classNames('outline-item', {
'outline-item-no-children': !outlineItem.children 'outline-item-no-children': !outlineItem.children
@ -30,14 +31,18 @@ function OutlineItem({ outlineItem, jumpToLine, highlightedLine }) {
useEffect( useEffect(
() => { () => {
if (highlightedLine !== outlineItem.line) return const wasHighlighted = isHighlightedRef.current
const isNowHighlighted = highlightedLine === outlineItem.line
isHighlightedRef.current = isNowHighlighted
if (!wasHighlighted && isNowHighlighted) {
titleElementRef.current.scrollIntoView({ titleElementRef.current.scrollIntoView({
behavior: 'smooth',
block: 'center' block: 'center'
}) })
}
}, },
[highlightedLine, titleElementRef] [highlightedLine, titleElementRef, isHighlightedRef]
) )
return ( return (