From 2a9c78ef9229f19a1d692cdbb4effdde2f4803aa Mon Sep 17 00:00:00 2001 From: Ben Ogle Date: Wed, 23 Jul 2014 16:20:48 -0700 Subject: [PATCH] Move horiz scrollbar into the scrollView Also remove all the gutter width calculation. It was flawed anyway, --- src/editor-component.coffee | 51 ++++++++++------------------------ src/gutter-component.coffee | 9 ------ src/scrollbar-component.coffee | 8 +++--- 3 files changed, 18 insertions(+), 50 deletions(-) diff --git a/src/editor-component.coffee b/src/editor-component.coffee index 2ec55da8c..29029756e 100644 --- a/src/editor-component.coffee +++ b/src/editor-component.coffee @@ -24,7 +24,6 @@ EditorComponent = React.createClass visible: false autoHeight: false - gutterWidth: 0 pendingScrollTop: null pendingScrollLeft: null selectOnMouseMove: false @@ -94,8 +93,8 @@ EditorComponent = React.createClass div {className, style, tabIndex: -1}, if not mini and showLineNumbers GutterComponent { - ref: 'gutter', onMouseDown: @onGutterMouseDown, onWidthChanged: @onGutterWidthChanged, - lineDecorations, defaultCharWidth, editor, renderedRowRange, maxLineNumberDigits, scrollViewHeight, + ref: 'gutter', onMouseDown: @onGutterMouseDown, lineDecorations, + defaultCharWidth, editor, renderedRowRange, maxLineNumberDigits, scrollViewHeight, scrollTop, scrollHeight, lineHeightInPixels, @pendingChanges, mouseWheelScreenRow, @useHardwareAcceleration } @@ -121,6 +120,18 @@ EditorComponent = React.createClass placeholderText, @performedInitialMeasurement } + ScrollbarComponent + ref: 'horizontalScrollbar' + className: 'horizontal-scrollbar' + orientation: 'horizontal' + onScroll: @onHorizontalScroll + scrollLeft: scrollLeft + scrollWidth: scrollWidth + visible: horizontallyScrollable and not @refreshingScrollbars and not @measuringScrollbars + scrollableInOppositeDirection: verticallyScrollable + verticalScrollbarWidth: verticalScrollbarWidth + horizontalScrollbarHeight: horizontalScrollbarHeight + ScrollbarComponent ref: 'verticalScrollbar' className: 'vertical-scrollbar' @@ -133,19 +144,6 @@ EditorComponent = React.createClass verticalScrollbarWidth: verticalScrollbarWidth horizontalScrollbarHeight: horizontalScrollbarHeight - ScrollbarComponent - ref: 'horizontalScrollbar' - className: 'horizontal-scrollbar' - orientation: 'horizontal' - onScroll: @onHorizontalScroll - gutterWidth: @gutterWidth - scrollLeft: scrollLeft - scrollWidth: scrollWidth - visible: horizontallyScrollable and not @refreshingScrollbars and not @measuringScrollbars - scrollableInOppositeDirection: verticallyScrollable - verticalScrollbarWidth: verticalScrollbarWidth - horizontalScrollbarHeight: horizontalScrollbarHeight - # Also used to measure the height/width of scrollbars after the initial render ScrollbarCornerComponent ref: 'scrollbarCorner' @@ -213,8 +211,6 @@ EditorComponent = React.createClass @measureLineHeightAndDefaultCharWidthIfNeeded(prevState) @remeasureCharacterWidthsIfNeeded(prevState) - @measureGutterIfNeeded() - performInitialMeasurement: -> @updatesPaused = true @measureLineHeightAndDefaultCharWidth() @@ -671,7 +667,6 @@ EditorComponent = React.createClass editor.setSelectedScreenRange([tailPosition, [dragRow + 1, 0]]) onStylesheetsChanged: (stylesheet) -> - @measureGutter() @refreshScrollbars() if @containsScrollbarSelector(stylesheet) @remeasureCharacterWidthsIfVisibleAfterNextUpdate = true @requestUpdate() if @visible @@ -838,23 +833,6 @@ EditorComponent = React.createClass remeasureCharacterWidths: -> @refs.lines.remeasureCharacterWidths() - onGutterWidthChanged: (gutterWidth) -> - if gutterWidth isnt @gutterWidth - @gutterWidth = gutterWidth - @requestUpdate() - - measureGutterIfNeeded: -> - if @visible and @measureGutterWhenEditorIsVisible - @measureGutterWhenEditorIsVisible = false - @measureGutter() - - measureGutter: -> - if @state.showLineNumbers - @refs.gutter.measureWidth() - else - @gutterWidth = 0 - @requestUpdate() - measureScrollbars: -> return unless @visible @measuringScrollbars = false @@ -951,7 +929,6 @@ EditorComponent = React.createClass @setState({showInvisibles}) setShowLineNumbers: (showLineNumbers) -> - @measureGutterWhenEditorIsVisible = true @setState({showLineNumbers}) setScrollSensitivity: (scrollSensitivity) -> diff --git a/src/gutter-component.coffee b/src/gutter-component.coffee index 19fd6b4d4..01106fa4c 100644 --- a/src/gutter-component.coffee +++ b/src/gutter-component.coffee @@ -66,9 +66,6 @@ GutterComponent = React.createClass @clearScreenRowCaches() unless oldProps.lineHeightInPixels is @props.lineHeightInPixels @updateLineNumbers() - unless isEqualForProperties(oldProps, @props, 'maxLineNumberDigits', 'defaultCharWidth') - @measureWidth() - clearScreenRowCaches: -> @lineNumberIdsByScreenRow = {} @screenRowsByLineNumberId = {} @@ -223,9 +220,3 @@ GutterComponent = React.createClass editor.unfoldBufferRow(bufferRow) else editor.foldBufferRow(bufferRow) - - measureWidth: -> - width = @getDOMNode().offsetWidth - unless width is @measuredWidth - @measuredWidth = width - @props.onWidthChanged?(width) diff --git a/src/scrollbar-component.coffee b/src/scrollbar-component.coffee index ba284e0a0..b8657b594 100644 --- a/src/scrollbar-component.coffee +++ b/src/scrollbar-component.coffee @@ -7,7 +7,7 @@ ScrollbarComponent = React.createClass displayName: 'ScrollbarComponent' render: -> - {orientation, className, scrollHeight, scrollWidth, gutterWidth, visible} = @props + {orientation, className, scrollHeight, scrollWidth, visible} = @props {scrollableInOppositeDirection, horizontalScrollbarHeight, verticalScrollbarWidth} = @props style = {} @@ -17,9 +17,9 @@ ScrollbarComponent = React.createClass style.width = verticalScrollbarWidth style.bottom = horizontalScrollbarHeight if scrollableInOppositeDirection when 'horizontal' - style.height = horizontalScrollbarHeight + style.left = 0 style.right = verticalScrollbarWidth if scrollableInOppositeDirection - style.left = gutterWidth + style.height = horizontalScrollbarHeight div {className, style, @onScroll}, switch orientation @@ -41,7 +41,7 @@ ScrollbarComponent = React.createClass when 'vertical' not isEqualForProperties(newProps, @props, 'scrollHeight', 'scrollTop', 'scrollableInOppositeDirection') when 'horizontal' - not isEqualForProperties(newProps, @props, 'scrollWidth', 'scrollLeft', 'gutterWidth', 'scrollableInOppositeDirection') + not isEqualForProperties(newProps, @props, 'scrollWidth', 'scrollLeft', 'scrollableInOppositeDirection') componentDidUpdate: -> {orientation, scrollTop, scrollLeft} = @props