Merge pull request #6776 from jssln/gutterPolish

Refactor `state.gutters` in TextEditorPresenter; pass minimal state to gutter components

src/custom-gutter-component.coffee

@@ -29,13 +29,14 @@ class CustomGutterComponent
       @domNode.style.removeProperty('display')
       @visible = true
 
+  # `state` is a subset of the TextEditorPresenter state that is specific
+  # to this line number gutter.
   updateSync: (state) ->
     @oldDimensionsAndBackgroundState ?= {}
-    newDimensionsAndBackgroundState = state.gutters
-    setDimensionsAndBackground(@oldDimensionsAndBackgroundState, newDimensionsAndBackgroundState, @decorationsNode)
+    setDimensionsAndBackground(@oldDimensionsAndBackgroundState, state.styles, @decorationsNode)
 
     @oldDecorationPositionState ?= {}
-    decorationState = state.gutters.customDecorations[@gutter.name]
+    decorationState = state.content
 
     updatedDecorationIds = new Set
     for decorationId, decorationInfo of decorationState

src/gutter-container-component.coffee

@@ -1,3 +1,4 @@
+_ = require 'underscore-plus'
 CustomGutterComponent = require './custom-gutter-component'
 LineNumberGutterComponent = require './line-number-gutter-component'
 
@@ -26,11 +27,11 @@ class GutterContainerComponent
   updateSync: (state) ->
     # The GutterContainerComponent expects the gutters to be sorted in the order
     # they should appear.
-    newState = state.gutters.sortedDescriptions
+    newState = state.gutters
 
     newGutterComponents = []
     newGutterComponentsByGutterName = {}
-    for {gutter, visible} in newState
+    for {gutter, visible, styles, content} in newState
       gutterComponent = @gutterComponentsByGutterName[gutter.name]
       if not gutterComponent
         if gutter.name is 'line-number'
@@ -38,8 +39,20 @@ class GutterContainerComponent
           @lineNumberGutterComponent = gutterComponent
         else
           gutterComponent = new CustomGutterComponent({gutter})
+
       if visible then gutterComponent.showNode() else gutterComponent.hideNode()
-      gutterComponent.updateSync(state)
+      # Pass the gutter only the state that it needs.
+      if gutter.name is 'line-number'
+        # For ease of use in the line number gutter component, set the shared
+        # 'styles' as a field under the 'content'.
+        gutterSubstate = _.clone(content)
+        gutterSubstate.styles = styles
+      else
+        # Custom gutter 'content' is keyed on gutter name, so we cannot set
+        # 'styles' as a subfield directly under it.
+        gutterSubstate = {content, styles}
+      gutterComponent.updateSync(gutterSubstate)
+
       newGutterComponents.push({
         name: gutter.name,
         component: gutterComponent,

src/line-number-gutter-component.coffee

@@ -31,19 +31,25 @@ class LineNumberGutterComponent
       @domNode.style.removeProperty('display')
       @visible = true
 
+  # `state` is a subset of the TextEditorPresenter state that is specific
+  # to this line number gutter.
   updateSync: (state) ->
-    @newState = state.gutters.lineNumberGutter
-    @oldState ?= {lineNumbers: {}}
+    @newState = state
+    @oldState ?=
+      lineNumbers: {}
+      styles: {}
 
     @appendDummyLineNumber() unless @dummyLineNumberNode?
 
-    newDimensionsAndBackgroundState = state.gutters
-    setDimensionsAndBackground(@oldState, newDimensionsAndBackgroundState, @lineNumbersNode)
+    setDimensionsAndBackground(@oldState.styles, @newState.styles, @lineNumbersNode)
 
     if @newState.maxLineNumberDigits isnt @oldState.maxLineNumberDigits
       @updateDummyLineNumber()
       node.remove() for id, node of @lineNumberNodesById
-      @oldState = {maxLineNumberDigits: @newState.maxLineNumberDigits, lineNumbers: {}}
+      @oldState =
+        maxLineNumberDigits: @newState.maxLineNumberDigits
+        lineNumbers: {}
+        styles: {}
       @lineNumberNodesById = {}
 
     @updateLineNumbers()

src/text-editor-component.coffee

@@ -70,7 +70,7 @@ class TextEditorComponent
     @scrollViewNode.classList.add('scroll-view')
     @domNode.appendChild(@scrollViewNode)
 
-    @mountGutterContainerComponent() if @presenter.getState().gutters.sortedDescriptions.length
+    @mountGutterContainerComponent() if @presenter.getState().gutters.length
 
     @hiddenInputComponent = new InputComponent
     @scrollViewNode.appendChild(@hiddenInputComponent.getDomNode())
@@ -137,7 +137,7 @@ class TextEditorComponent
         else
           @domNode.style.height = ''
 
-    if @newState.gutters.sortedDescriptions.length
+    if @newState.gutters.length
       @mountGutterContainerComponent() unless @gutterContainerComponent?
       @gutterContainerComponent.updateSync(@newState)
     else

src/text-editor-presenter.coffee

@@ -208,11 +208,13 @@ class TextEditorPresenter
         lines: {}
         highlights: {}
         overlays: {}
-      gutters:
-        sortedDescriptions: []
-        customDecorations: {}
-        lineNumberGutter:
-          lineNumbers: {}
+      gutters: []
+    # Shared state that is copied into ``@state.gutters`.
+    @sharedGutterStyles = {}
+    @customGutterDecorations = {}
+    @lineNumberGutter =
+      lineNumbers: {}
+
     @updateState()
 
   updateState: ->
@@ -251,11 +253,11 @@ class TextEditorPresenter
 
   updateVerticalScrollState: ->
     @state.content.scrollHeight = @scrollHeight
-    @state.gutters.scrollHeight = @scrollHeight
+    @sharedGutterStyles.scrollHeight = @scrollHeight
     @state.verticalScrollbar.scrollHeight = @scrollHeight
 
     @state.content.scrollTop = @scrollTop
-    @state.gutters.scrollTop = @scrollTop
+    @sharedGutterStyles.scrollTop = @scrollTop
     @state.verticalScrollbar.scrollTop = @scrollTop
 
   updateHorizontalScrollState: ->
@@ -410,10 +412,10 @@ class TextEditorPresenter
     return
 
   updateLineNumberGutterState: ->
-    @state.gutters.lineNumberGutter.maxLineNumberDigits = @model.getLineCount().toString().length
+    @lineNumberGutter.maxLineNumberDigits = @model.getLineCount().toString().length
 
   updateCommonGutterState: ->
-    @state.gutters.backgroundColor = if @gutterBackgroundColor isnt "rgba(0, 0, 0, 0)"
+    @sharedGutterStyles.backgroundColor = if @gutterBackgroundColor isnt "rgba(0, 0, 0, 0)"
       @gutterBackgroundColor
     else
       @backgroundColor
@@ -441,15 +443,25 @@ class TextEditorPresenter
     @emitDidUpdateState()
 
   updateGutterOrderState: ->
-    @state.gutters.sortedDescriptions = []
+    @state.gutters = []
     if @model.isMini()
       return
     for gutter in @model.getGutters()
       isVisible = @gutterIsVisible(gutter)
-      @state.gutters.sortedDescriptions.push({gutter, visible: isVisible})
+      if gutter.name is 'line-number'
+        content = @lineNumberGutter
+      else
+        @customGutterDecorations[gutter.name] ?= {}
+        content = @customGutterDecorations[gutter.name]
+      @state.gutters.push({
+        gutter,
+        visible: isVisible,
+        styles: @sharedGutterStyles,
+        content,
+      })
 
   # Updates the decoration state for the gutter with the given gutterName.
-  # @state.gutters.customDecorations is an {Object}, with the form:
+  # @customGutterDecorations is an {Object}, with the form:
   #   * gutterName : {
   #     decoration.id : {
   #       top: # of pixels from top
@@ -461,23 +473,43 @@ class TextEditorPresenter
   updateCustomGutterDecorationState: ->
     return unless @startRow? and @endRow? and @lineHeight?
 
-    @state.gutters.customDecorations = {}
-    return if @model.isMini()
+    if @model.isMini()
+      # Mini editors have no gutter decorations.
+      # We clear instead of reassigning to preserve the reference.
+      @clearAllCustomGutterDecorations()
 
     for gutter in @model.getGutters()
       gutterName = gutter.name
-      @state.gutters.customDecorations[gutterName] = {}
+      gutterDecorations = @customGutterDecorations[gutterName]
+      if gutterDecorations
+        # Clear the gutter decorations; they are rebuilt.
+        # We clear instead of reassigning to preserve the reference.
+        @clearDecorationsForCustomGutterName(gutterName)
+      else
+        @customGutterDecorations[gutterName] = {}
       return if not @gutterIsVisible(gutter)
 
       relevantDecorations = @customGutterDecorationsInRange(gutterName, @startRow, @endRow - 1)
       relevantDecorations.forEach (decoration) =>
         decorationRange = decoration.getMarker().getScreenRange()
-        @state.gutters.customDecorations[gutterName][decoration.id] =
+        @customGutterDecorations[gutterName][decoration.id] =
           top: @lineHeight * decorationRange.start.row
           height: @lineHeight * decorationRange.getRowCount()
           item: decoration.getProperties().item
           class: decoration.getProperties().class
 
+  clearAllCustomGutterDecorations: ->
+    allGutterNames = Object.keys(@customGutterDecorations)
+    for gutterName in allGutterNames
+      @clearDecorationsForCustomGutterName(gutterName)
+
+  clearDecorationsForCustomGutterName: (gutterName) ->
+    gutterDecorations = @customGutterDecorations[gutterName]
+    if gutterDecorations
+      allDecorationIds = Object.keys(gutterDecorations)
+      for decorationId in allDecorationIds
+        delete gutterDecorations[decorationId]
+
   gutterIsVisible: (gutterModel) ->
     isVisible = gutterModel.isVisible()
     if gutterModel.name is 'line-number'
@@ -514,7 +546,7 @@ class TextEditorPresenter
         decorationClasses = @lineNumberDecorationClassesForRow(screenRow)
         foldable = @model.isFoldableAtScreenRow(screenRow)
 
-        @state.gutters.lineNumberGutter.lineNumbers[id] = {screenRow, bufferRow, softWrapped, top, decorationClasses, foldable}
+        @lineNumberGutter.lineNumbers[id] = {screenRow, bufferRow, softWrapped, top, decorationClasses, foldable}
         visibleLineNumberIds[id] = true
 
     if @mouseWheelScreenRow?
@@ -524,8 +556,8 @@ class TextEditorPresenter
       id += '-' + wrapCount if wrapCount > 0
       visibleLineNumberIds[id] = true
 
-    for id of @state.gutters.lineNumberGutter.lineNumbers
-      delete @state.gutters.lineNumberGutter.lineNumbers[id] unless visibleLineNumberIds[id]
+    for id of @lineNumberGutter.lineNumbers
+      delete @lineNumberGutter.lineNumbers[id] unless visibleLineNumberIds[id]
 
     return