Don't obscure the last line of the editor with the horizontal scrollbar

This assumes the scrollbar is 15px high, which is incorrect when using
overlay scrollbars or when the scrollbar is styled to have a different
height. We'll need to measure it in a subsequent commit.
This commit is contained in:
Nathan Sobo 2014-04-23 13:57:49 -06:00
parent e9d820e8a8
commit babbdbf9e5
2 changed files with 34 additions and 4 deletions

View File

@ -1,4 +1,4 @@
{extend, flatten, toArray} = require 'underscore-plus'
{extend, flatten, toArray, last} = require 'underscore-plus'
ReactEditorView = require '../src/react-editor-view'
nbsp = String.fromCharCode(160)
@ -526,6 +526,25 @@ describe "EditorComponent", ->
expect(editor.getScrollLeft()).toBe 100
it "does not obscure the last line with the horizontal scrollbar", ->
node.style.height = 4.5 * lineHeightInPixels + 'px'
node.style.width = 10 * charWidth + 'px'
component.measureHeightAndWidth()
editor.setScrollBottom(editor.getScrollHeight())
lastLineNode = last(node.querySelectorAll('.line'))
bottomOfLastLine = lastLineNode.getBoundingClientRect().bottom
topOfHorizontalScrollbar = horizontalScrollbarNode.getBoundingClientRect().top
expect(bottomOfLastLine).toBe topOfHorizontalScrollbar
# Render no space below the last line when there's no horizontal scrollbar
node.style.width = 100 * charWidth + 'px'
component.measureHeightAndWidth()
editor.setScrollBottom(editor.getScrollHeight())
lastLineNode = last(node.querySelectorAll('.line'))
bottomOfLastLine = lastLineNode.getBoundingClientRect().bottom
bottomOfEditor = node.getBoundingClientRect().bottom
expect(bottomOfLastLine).toBe bottomOfEditor
describe "when a mousewheel event occurs on the editor", ->
it "updates the horizontal or vertical scrollbar depending on which delta is greater (x or y)", ->
node.style.height = 4.5 * lineHeightInPixels + 'px'

View File

@ -114,6 +114,17 @@ class DisplayBuffer extends Model
getHeight: -> @height ? @getScrollHeight()
setHeight: (@height) -> @height
getClientHeight: ->
if @horizontallyScrollable()
@getHeight() - @getHorizontalScrollbarHeight()
else
@getHeight()
horizontallyScrollable: ->
not @getSoftWrap() and @getScrollWidth() > @getWidth()
getHorizontalScrollbarHeight: -> 15
getWidth: -> @width ? @getScrollWidth()
setWidth: (newWidth) ->
oldWidth = @width
@ -124,13 +135,13 @@ class DisplayBuffer extends Model
getScrollTop: -> @scrollTop
setScrollTop: (scrollTop) ->
if @manageScrollPosition
@scrollTop = Math.max(0, Math.min(@getScrollHeight() - @getHeight(), scrollTop))
@scrollTop = Math.max(0, Math.min(@getScrollHeight() - @getClientHeight(), scrollTop))
else
@scrollTop = scrollTop
getScrollBottom: -> @scrollTop + @height
setScrollBottom: (scrollBottom) ->
@setScrollTop(scrollBottom - @height)
@setScrollTop(scrollBottom - @getClientHeight())
@getScrollBottom()
getScrollLeft: -> @scrollLeft
@ -184,7 +195,7 @@ class DisplayBuffer extends Model
unless @getLineHeight() > 0
throw new Error("You must assign a non-zero lineHeight before calling ::getVisibleRowRange()")
heightInLines = Math.ceil(@getHeight() / @getLineHeight()) + 1
heightInLines = Math.ceil(@getClientHeight() / @getLineHeight()) + 1
startRow = Math.floor(@getScrollTop() / @getLineHeight())
endRow = Math.min(@getLineCount(), Math.ceil(startRow + heightInLines))
[startRow, endRow]