Set x-transform of .scroll-view-content based on the model's scrollLeft

This commit is contained in:
Nathan Sobo
2014-04-08 12:04:27 -06:00
parent 171631d20f
commit 84bb624b5b
2 changed files with 20 additions and 9 deletions

View File

@@ -39,7 +39,7 @@ describe "EditorComponent", ->
node.querySelector('.vertical-scrollbar').scrollTop = 2.5 * lineHeightInPixels
component.onVerticalScroll()
expect(node.querySelector('.scroll-view-content').style['-webkit-transform']).toBe "translateY(#{-2.5 * lineHeightInPixels}px)"
expect(node.querySelector('.scroll-view-content').style['-webkit-transform']).toBe "translate(0px, #{-2.5 * lineHeightInPixels}px)"
lines = node.querySelectorAll('.line')
expect(lines.length).toBe 6
@@ -365,12 +365,22 @@ describe "EditorComponent", ->
inputNode.blur()
expect(node.classList.contains('is-focused')).toBe false
it "updates the scroll bar when the scrollTop is changed in the model", ->
node.style.height = 4.5 * lineHeightInPixels + 'px'
component.updateAllDimensions()
describe "scrolling", ->
it "updates the vertical scrollbar when the scrollTop is changed in the model", ->
node.style.height = 4.5 * lineHeightInPixels + 'px'
component.updateAllDimensions()
scrollbarNode = node.querySelector('.vertical-scrollbar')
expect(scrollbarNode.scrollTop).toBe 0
scrollbarNode = node.querySelector('.vertical-scrollbar')
expect(scrollbarNode.scrollTop).toBe 0
editor.setScrollTop(10)
expect(scrollbarNode.scrollTop).toBe 10
editor.setScrollTop(10)
expect(scrollbarNode.scrollTop).toBe 10
it "updates the horizontal scrollbar and scroll view content x transform based on the scrollLeft of the model", ->
node.style.width = 30 * charWidth + 'px'
component.updateAllDimensions()
scrollViewContentNode = node.querySelector('.scroll-view-content')
expect(scrollViewContentNode.style['-webkit-transform']).toBe "translate(0px, 0px)"
editor.setScrollLeft(100)
expect(scrollViewContentNode.style['-webkit-transform']).toBe "translate(-100px, 0px)"

View File

@@ -70,7 +70,7 @@ EditorCompont = React.createClass
{editor} = @props
style =
height: editor.getScrollHeight()
WebkitTransform: "translateY(#{-editor.getScrollTop()}px)"
WebkitTransform: "translate(#{-editor.getScrollLeft()}px, #{-editor.getScrollTop()}px)"
div {className: 'scroll-view-content', style, @onMouseDown},
@renderCursors()
@@ -158,6 +158,7 @@ EditorCompont = React.createClass
@subscribe editor, 'selection-removed', @onSelectionAdded
@subscribe editor, 'cursors-moved', @pauseCursorBlinking
@subscribe editor.$scrollTop.changes, @requestUpdate
@subscribe editor.$scrollLeft.changes, @requestUpdate
@subscribe editor.$height.changes, @requestUpdate
@subscribe editor.$width.changes, @requestUpdate
@subscribe editor.$defaultCharWidth.changes, @requestUpdate