Implement block decorations in the components land

src/block-decorations-component.coffee

@@ -5,19 +5,21 @@ cloneObject = (object) ->
 
 module.exports =
 class BlockDecorationsComponent
-  constructor: (@views, @domElementPool) ->
-    @domNode = @domElementPool.buildElement("div")
+  constructor: (@container, @views, @presenter, @domElementPool) ->
     @newState = null
     @oldState = null
     @blockDecorationNodesById = {}
 
-  getDomNode: ->
-    @domNode
-
   updateSync: (state) ->
     @newState = state.content
     @oldState ?= {blockDecorations: {}}
 
+    for id, blockDecorationState of @oldState.blockDecorations
+      unless @newState.blockDecorations.hasOwnProperty(id)
+        @blockDecorationNodesById[id].remove()
+        delete @blockDecorationNodesById[id]
+        delete @oldState.blockDecorations[id]
+
     for id, blockDecorationState of @newState.blockDecorations
       if @oldState.blockDecorations.hasOwnProperty(id)
         @updateBlockDecorationNode(id)
@@ -26,12 +28,21 @@ class BlockDecorationsComponent
 
       @oldState.blockDecorations[id] = cloneObject(blockDecorationState)
 
+  measureBlockDecorations: ->
+    for decorationId, blockDecorationNode of @blockDecorationNodesById
+      decoration = @newState.blockDecorations[decorationId].decoration
+      @presenter.setBlockDecorationDimensions(
+        decoration,
+        blockDecorationNode.offsetWidth,
+        blockDecorationNode.offsetHeight
+      )
+
   createAndAppendBlockDecorationNode: (id) ->
     blockDecorationState = @newState.blockDecorations[id]
     blockDecorationNode = @views.getView(blockDecorationState.decoration.getProperties().item)
     blockDecorationNode.classList.add("block-decoration-row-#{blockDecorationState.screenRow}")
 
-    @domNode.appendChild(blockDecorationNode)
+    @container.appendChild(blockDecorationNode)
 
     @blockDecorationNodesById[id] = blockDecorationNode
 

src/line-numbers-tile-component.coffee

@@ -96,12 +96,13 @@ class LineNumbersTileComponent
   screenRowForNode: (node) -> parseInt(node.dataset.screenRow)
 
   buildLineNumberNode: (lineNumberState) ->
-    {screenRow, bufferRow, softWrapped, top, decorationClasses, zIndex} = lineNumberState
+    {screenRow, bufferRow, softWrapped, top, decorationClasses, zIndex, blockDecorationsHeight} = lineNumberState
 
     className = @buildLineNumberClassName(lineNumberState)
     lineNumberNode = @domElementPool.buildElement("div", className)
     lineNumberNode.dataset.screenRow = screenRow
     lineNumberNode.dataset.bufferRow = bufferRow
+    lineNumberNode.style.marginTop = blockDecorationsHeight + "px"
 
     @setLineNumberInnerNodes(bufferRow, softWrapped, lineNumberNode)
     lineNumberNode
@@ -139,6 +140,10 @@ class LineNumbersTileComponent
       oldLineNumberState.screenRow = newLineNumberState.screenRow
       oldLineNumberState.bufferRow = newLineNumberState.bufferRow
 
+    unless oldLineNumberState.blockDecorationsHeight is newLineNumberState.blockDecorationsHeight
+      node.style.marginTop = newLineNumberState.blockDecorationsHeight + "px"
+      oldLineNumberState.blockDecorationsHeight = newLineNumberState.blockDecorationsHeight
+
   buildLineNumberClassName: ({bufferRow, foldable, decorationClasses, softWrapped}) ->
     className = "line-number"
     className += " " + decorationClasses.join(' ') if decorationClasses?

src/lines-tile-component.coffee

@@ -20,6 +20,7 @@ class LinesTileComponent
     @screenRowsByLineId = {}
     @lineIdsByScreenRow = {}
     @textNodesByLineId = {}
+    @insertionPointsByLineId = {}
     @domNode = @domElementPool.buildElement("div")
     @domNode.style.position = "absolute"
     @domNode.style.display = "block"
@@ -80,6 +81,8 @@ class LinesTileComponent
 
   removeLineNode: (id) ->
     @domElementPool.freeElementAndDescendants(@lineNodesByLineId[id])
+    @removeBlockDecorationInsertionPoint(id)
+
     delete @lineNodesByLineId[id]
     delete @textNodesByLineId[id]
     delete @lineIdsByScreenRow[@screenRowsByLineId[id]]
@@ -116,6 +119,31 @@ class LinesTileComponent
       else
         @domNode.appendChild(lineNode)
 
+      @insertBlockDecorationInsertionPoint(id)
+
+  removeBlockDecorationInsertionPoint: (id) ->
+    if insertionPoint = @insertionPointsByLineId[id]
+      @domElementPool.freeElementAndDescendants(insertionPoint)
+      delete @insertionPointsByLineId[id]
+
+  insertBlockDecorationInsertionPoint: (id) ->
+    {hasBlockDecorations} = @newTileState.lines[id]
+
+    if hasBlockDecorations
+      lineNode = @lineNodesByLineId[id]
+      insertionPoint = @domElementPool.buildElement("content")
+      @domNode.insertBefore(insertionPoint, lineNode)
+      @insertionPointsByLineId[id] = insertionPoint
+
+      @updateBlockDecorationInsertionPoint(id)
+
+  updateBlockDecorationInsertionPoint: (id) ->
+    {screenRow} = @newTileState.lines[id]
+
+    if insertionPoint = @insertionPointsByLineId[id]
+      insertionPoint.dataset.screenRow = screenRow
+      insertionPoint.setAttribute("select", ".block-decoration-row-#{screenRow}")
+
   findNodeNextTo: (node) ->
     for nextNode, index in @domNode.children
       continue if index is 0 # skips highlights node
@@ -336,7 +364,16 @@ class LinesTileComponent
 
     oldLineState.decorationClasses = newLineState.decorationClasses
 
+    if not oldLineState.hasBlockDecorations and newLineState.hasBlockDecorations
+      @insertBlockDecorationInsertionPoint(id)
+    else if oldLineState.hasBlockDecorations and not newLineState.hasBlockDecorations
+      @removeBlockDecorationInsertionPoint(id)
+
+    oldLineState.hasBlockDecorations = newLineState.hasBlockDecorations
+
     if newLineState.screenRow isnt oldLineState.screenRow
+      @updateBlockDecorationInsertionPoint(id)
+
       lineNode.dataset.screenRow = newLineState.screenRow
       oldLineState.screenRow = newLineState.screenRow
       @lineIdsByScreenRow[newLineState.screenRow] = id

src/text-editor-component.coffee

@@ -60,7 +60,6 @@ class TextEditorComponent
     @presenter.onDidUpdateState(@requestUpdate)
 
     @domElementPool = new DOMElementPool
-    @blockDecorationsComponent = new BlockDecorationsComponent(@views, @domElementPool)
 
     @domNode = document.createElement('div')
     if @useShadowDOM
@@ -70,11 +69,11 @@ class TextEditorComponent
       insertionPoint.setAttribute('select', 'atom-overlay')
       @domNode.appendChild(insertionPoint)
       @overlayManager = new OverlayManager(@presenter, @hostElement, @views)
-      @hostElement.appendChild(@blockDecorationsComponent.getDomNode())
+      @blockDecorationsComponent = new BlockDecorationsComponent(@hostElement, @views, @presenter, @domElementPool)
     else
       @domNode.classList.add('editor-contents')
       @overlayManager = new OverlayManager(@presenter, @domNode, @views)
-      @domNode.appendChild(@blockDecorationsComponent.getDomNode())
+      @blockDecorationsComponent = new BlockDecorationsComponent(@domNode, @views, @presenter, @domElementPool)
 
     @scrollViewNode = document.createElement('div')
     @scrollViewNode.classList.add('scroll-view')
@@ -177,6 +176,7 @@ class TextEditorComponent
 
   readAfterUpdateSync: =>
     @overlayManager?.measureOverlays()
+    @blockDecorationsComponent.measureBlockDecorations()
 
   mountGutterContainerComponent: ->
     @gutterContainerComponent = new GutterContainerComponent({@editor, @onLineNumberGutterMouseDown, @domElementPool, @views})