From 355abef2cf7584bcdf339775794424c316d0f8af Mon Sep 17 00:00:00 2001 From: Nathan Sobo Date: Mon, 14 Apr 2014 10:31:22 -0600 Subject: [PATCH] Manage update of scrollbar scroll positions in ScrollbarComponent --- src/editor-component.coffee | 28 ++-------------------------- src/scrollbar-component.coffee | 25 +++++++++++++++++++++++-- 2 files changed, 25 insertions(+), 28 deletions(-) diff --git a/src/editor-component.coffee b/src/editor-component.coffee index d101767ea..d2e1deeba 100644 --- a/src/editor-component.coffee +++ b/src/editor-component.coffee @@ -18,7 +18,6 @@ module.exports = EditorCompont = React.createClass pendingScrollTop: null pendingScrollLeft: null - lastScrollTop: null selectOnMouseMove: false statics: {DummyLineNode} @@ -50,6 +49,7 @@ EditorCompont = React.createClass className: 'vertical-scrollbar' orientation: 'vertical' onScroll: @onVerticalScroll + scrollTop: editor.getScrollTop() scrollHeight: editor.getScrollHeight() ScrollbarComponent @@ -57,6 +57,7 @@ EditorCompont = React.createClass className: 'horizontal-scrollbar' orientation: 'horizontal' onScroll: @onHorizontalScroll + scrollLeft: editor.getScrollLeft() scrollWidth: editor.getScrollWidth() getHiddenInputPosition: -> @@ -146,34 +147,9 @@ EditorCompont = React.createClass @stopBlinkingCursors() componentDidUpdate: -> - @updateVerticalScrollbar() - @updateHorizontalScrollbar() @measureNewLines() @props.parentView.trigger 'editor:display-updated' - # The React-provided scrollTop property doesn't work in this case because when - # initially rendering, the synthetic scrollHeight hasn't been computed yet. - # trying to assign it before the element inside is tall enough? - updateVerticalScrollbar: -> - {editor} = @props - scrollTop = editor.getScrollTop() - - return if scrollTop is @lastScrollTop - - scrollbarNode = @refs.verticalScrollbar.getDOMNode() - scrollbarNode.scrollTop = scrollTop - @lastScrollTop = scrollbarNode.scrollTop - - updateHorizontalScrollbar: -> - {editor} = @props - scrollLeft = editor.getScrollLeft() - - return if scrollLeft is @lastScrollLeft - - scrollbarNode = @refs.horizontalScrollbar.getDOMNode() - scrollbarNode.scrollLeft = scrollLeft - @lastScrollLeft = scrollbarNode.scrollLeft - observeEditor: -> {editor} = @props @subscribe editor, 'screen-lines-changed', @onScreenLinesChanged diff --git a/src/scrollbar-component.coffee b/src/scrollbar-component.coffee index 9c4cc3ec0..a82053b21 100644 --- a/src/scrollbar-component.coffee +++ b/src/scrollbar-component.coffee @@ -3,6 +3,9 @@ React = require 'react' module.exports = ScrollbarComponent = React.createClass + lastScrollTop: null + lastScrollLeft: null + render: -> {orientation, className, onScroll, scrollHeight, scrollWidth} = @props @@ -12,5 +15,23 @@ ScrollbarComponent = React.createClass div className: 'scrollbar-content', style: {height: scrollHeight} when 'horizontal' div className: 'scrollbar-content', style: {width: scrollWidth} - else - throw new Error("Must specify an orientation property of 'vertical' or 'horizontal'") + + componentDidMount: -> + {orientation} = @props + + unless orientation is 'vertical' or orientation is 'horizontal' + throw new Error("Must specify an orientation property of 'vertical' or 'horizontal'") + + componentDidUpdate: -> + {orientation, scrollTop, scrollLeft} = @props + node = @getDOMNode() + + switch orientation + when 'vertical' + unless scrollTop is @lastScrollTop + node.scrollTop = scrollTop + @lastScrollTop = node.scrollTop + when 'horizontal' + unless scrollLeft is @lastScrollLeft + node.scrollLeft = scrollLeft + @lastScrollLeft = node.scrollLeft