From 7c356d25922d7723310f1a0fc50c59f74798c038 Mon Sep 17 00:00:00 2001 From: Nathan Sobo Date: Sat, 21 Jun 2014 01:58:11 -0600 Subject: [PATCH] Revert "Render highlights on their own layer to avoid GPU artifacts" --- spec/editor-component-spec.coffee | 6 ++++++ src/editor-component.coffee | 15 +++------------ src/editor.coffee | 3 +-- src/gutter-component.coffee | 10 +++++++--- src/highlights-component.coffee | 16 ++-------------- src/lines-component.coffee | 11 ++++++++--- src/react-editor-view.coffee | 2 +- src/underlayer-component.coffee | 20 -------------------- static/editor.less | 7 +++---- 9 files changed, 31 insertions(+), 59 deletions(-) delete mode 100644 src/underlayer-component.coffee diff --git a/spec/editor-component-spec.coffee b/spec/editor-component-spec.coffee index 6382a1474..d47abdb00 100644 --- a/spec/editor-component-spec.coffee +++ b/spec/editor-component-spec.coffee @@ -462,6 +462,12 @@ describe "EditorComponent", -> expect(component.lineNumberNodeForScreenRow(9).textContent).toBe "10" expect(gutterNode.offsetWidth).toBe initialGutterWidth + it "renders the .line-numbers div at the full height of the editor even if it's taller than its content", -> + node.style.height = node.offsetHeight + 100 + 'px' + component.measureScrollView() + nextTick() + expect(node.querySelector('.line-numbers').offsetHeight).toBe node.offsetHeight + describe "fold decorations", -> describe "rendering fold decorations", -> it "adds the foldable class to line numbers when the line is foldable", -> diff --git a/src/editor-component.coffee b/src/editor-component.coffee index e8b399da5..7f475fb1b 100644 --- a/src/editor-component.coffee +++ b/src/editor-component.coffee @@ -8,8 +8,6 @@ GutterComponent = require './gutter-component' InputComponent = require './input-component' CursorsComponent = require './cursors-component' LinesComponent = require './lines-component' -HighlightsComponent = require './highlights-component' -UnderlayerComponent = require './underlayer-component' ScrollbarComponent = require './scrollbar-component' ScrollbarCornerComponent = require './scrollbar-corner-component' SubscriberMixin = require './subscriber-mixin' @@ -84,8 +82,8 @@ EditorComponent = React.createClass div className: className, style: {fontSize, lineHeight, fontFamily}, tabIndex: -1, GutterComponent { ref: 'gutter', onMouseDown: @onGutterMouseDown, onWidthChanged: @onGutterWidthChanged, - lineDecorations, defaultCharWidth, editor, renderedRowRange, maxLineNumberDigits, - scrollTop, lineHeightInPixels, @pendingChanges, mouseWheelScreenRow + lineDecorations, defaultCharWidth, editor, renderedRowRange, maxLineNumberDigits, scrollViewHeight, + scrollTop, scrollHeight, lineHeightInPixels, @pendingChanges, mouseWheelScreenRow } div ref: 'scrollView', className: 'scroll-view', onMouseDown: @onMouseDown, @@ -105,14 +103,7 @@ EditorComponent = React.createClass editor, lineHeightInPixels, defaultCharWidth, lineDecorations, highlightDecorations, showIndentGuide, renderedRowRange, @pendingChanges, scrollTop, scrollLeft, @scrollingVertically, scrollHeight, scrollWidth, mouseWheelScreenRow, invisibles, - visible, scrollViewHeight - } - HighlightsComponent { - editor, scrollTop, scrollLeft, scrollHeight, scrollWidth, highlightDecorations, lineHeightInPixels, - defaultCharWidth, @scopedCharacterWidthsChangeCount - } - UnderlayerComponent { - scrollTop, scrollLeft, scrollHeight, scrollWidth + visible, scrollViewHeight, @scopedCharacterWidthsChangeCount } ScrollbarComponent diff --git a/src/editor.coffee b/src/editor.coffee index a7466209b..f5ad5666d 100644 --- a/src/editor.coffee +++ b/src/editor.coffee @@ -443,8 +443,7 @@ class Editor extends Model getText: -> @buffer.getText() # Public: Replaces the entire contents of the buffer with the given {String}. - setText: (text) -> - @buffer.setText(text) + setText: (text) -> @buffer.setText(text) # Get the text in the given {Range}. # diff --git a/src/gutter-component.coffee b/src/gutter-component.coffee index a7e82180d..2555c7ebd 100644 --- a/src/gutter-component.coffee +++ b/src/gutter-component.coffee @@ -15,10 +15,13 @@ GutterComponent = React.createClass measuredWidth: null render: -> - {scrollTop, onMouseDown} = @props + {scrollHeight, scrollViewHeight, scrollTop, onMouseDown} = @props div className: 'gutter', onClick: @onClick, onMouseDown: onMouseDown, - div className: 'line-numbers', ref: 'lineNumbers', style: + # The line-numbers div must have the 'editor-colors' class so it has an + # opaque background to avoid sub-pixel anti-aliasing problems on the GPU + div className: 'gutter line-numbers editor-colors', ref: 'lineNumbers', style: + height: Math.max(scrollHeight, scrollViewHeight) WebkitTransform: "translate3d(0px, #{-scrollTop}px, 0px)" componentWillMount: -> @@ -35,7 +38,8 @@ GutterComponent = React.createClass # visible row range. shouldComponentUpdate: (newProps) -> return true unless isEqualForProperties(newProps, @props, - 'renderedRowRange', 'scrollTop', 'lineHeightInPixels', 'mouseWheelScreenRow', 'lineDecorations' + 'renderedRowRange', 'scrollTop', 'lineHeightInPixels', 'mouseWheelScreenRow', 'lineDecorations', + 'scrollViewHeight' ) {renderedRowRange, pendingChanges, lineDecorations} = newProps diff --git a/src/highlights-component.coffee b/src/highlights-component.coffee index 6a7200e24..292e94892 100644 --- a/src/highlights-component.coffee +++ b/src/highlights-component.coffee @@ -8,16 +8,7 @@ HighlightsComponent = React.createClass displayName: 'HighlightsComponent' render: -> - if @isMounted() - {scrollTop, scrollLeft, scrollHeight, scrollWidth} = @props - style = - height: scrollHeight - width: scrollWidth - WebkitTransform: "translate3d(#{-scrollLeft}px, #{-scrollTop}px, 0px)" - - div {className: 'highlights', style}, - @renderHighlights() if @isMounted() - + div className: 'highlights', @renderHighlights() renderHighlights: -> {editor, highlightDecorations, lineHeightInPixels} = @props @@ -30,7 +21,4 @@ HighlightsComponent = React.createClass highlightComponents shouldComponentUpdate: (newProps) -> - not isEqualForProperties(newProps, @props, - 'scrollTop', 'scrollLeft', 'highlightDecorations', 'lineHeightInPixels', - 'defaultCharWidth', 'scopedCharacterWidthsChangeCount' - ) + not isEqualForProperties(newProps, @props, 'highlightDecorations', 'lineHeightInPixels', 'defaultCharWidth', 'scopedCharacterWidthsChangeCount') diff --git a/src/lines-component.coffee b/src/lines-component.coffee index 92b9b7f89..afbeb1b57 100644 --- a/src/lines-component.coffee +++ b/src/lines-component.coffee @@ -4,6 +4,8 @@ React = require 'react-atom-fork' {debounce, isEqual, isEqualForProperties, multiplyString, toArray} = require 'underscore-plus' {$$} = require 'space-pen' +HighlightsComponent = require './highlights-component' + DummyLineNode = $$(-> @div className: 'line', style: 'position: absolute; visibility: hidden;', => @span 'x')[0] AcceptFilter = {acceptNode: -> NodeFilter.FILTER_ACCEPT} WrapperDiv = document.createElement('div') @@ -15,13 +17,16 @@ LinesComponent = React.createClass render: -> if @isMounted() {editor, highlightDecorations, scrollTop, scrollLeft, scrollHeight, scrollWidth} = @props - {lineHeightInPixels, defaultCharWidth, scrollViewHeight} = @props + {lineHeightInPixels, defaultCharWidth, scrollViewHeight, scopedCharacterWidthsChangeCount} = @props style = height: Math.max(scrollHeight, scrollViewHeight) width: scrollWidth WebkitTransform: "translate3d(#{-scrollLeft}px, #{-scrollTop}px, 0px)" - div {className: 'lines', style} + # The lines div must have the 'editor-colors' class so it has an opaque + # background to avoid sub-pixel anti-aliasing problems on the GPU + div {className: 'lines editor-colors', style}, + HighlightsComponent({editor, highlightDecorations, lineHeightInPixels, defaultCharWidth, scopedCharacterWidthsChangeCount}) if @isMounted() componentWillMount: -> @measuredLines = new WeakSet @@ -34,7 +39,7 @@ LinesComponent = React.createClass return true unless isEqualForProperties(newProps, @props, 'renderedRowRange', 'lineDecorations', 'highlightDecorations', 'lineHeightInPixels', 'defaultCharWidth', 'scrollTop', 'scrollLeft', 'showIndentGuide', 'scrollingVertically', 'invisibles', 'visible', - 'scrollViewHeight', 'mouseWheelScreenRow' + 'scrollViewHeight', 'mouseWheelScreenRow', 'scopedCharacterWidthsChangeCount' ) {renderedRowRange, pendingChanges} = newProps diff --git a/src/react-editor-view.coffee b/src/react-editor-view.coffee index 8c0b961d0..a363026e2 100644 --- a/src/react-editor-view.coffee +++ b/src/react-editor-view.coffee @@ -34,7 +34,7 @@ class ReactEditorView extends View node = @component.getDOMNode() @scrollView = $(node).find('.scroll-view') - @underlayer = $(node).find('.underlayer') + @underlayer = $(node).find('.highlights').addClass('underlayer') @overlayer = $(node).find('.lines').addClass('overlayer') @hiddenInput = $(node).find('.hidden-input') diff --git a/src/underlayer-component.coffee b/src/underlayer-component.coffee deleted file mode 100644 index cf106587a..000000000 --- a/src/underlayer-component.coffee +++ /dev/null @@ -1,20 +0,0 @@ -React = require 'react-atom-fork' -{div} = require 'reactionary-atom-fork' -{isEqualForProperties} = require 'underscore-plus' - -module.exports = -UnderlayerComponent = React.createClass - displayName: 'UnderlayerComponent' - - render: -> - if @isMounted() - {scrollTop, scrollLeft, scrollHeight, scrollWidth} = @props - style = - height: scrollHeight - width: scrollWidth - WebkitTransform: "translate3d(#{-scrollLeft}px, #{-scrollTop}px, 0px)" - - div {className: 'underlayer', style} - - shouldComponentUpdate: (newProps) -> - not isEqualForProperties(@props, newProps, 'scrollTop', 'scrollLeft', 'scrollHeight', 'scrollWidth') diff --git a/static/editor.less b/static/editor.less index e4639327d..990097d06 100644 --- a/static/editor.less +++ b/static/editor.less @@ -6,14 +6,13 @@ .underlayer { position: absolute; top: 0; + bottom: 0; left: 0; - } - - .highlights { + right: 0; z-index: -2; } - .lines, .highlights, .underlayer { + .lines { min-width: 100%; }