Merge pull request #4325 from atom/ns-tail-overlays

Add ‘position’ option to overlay decorations

spec/text-editor-component-spec.coffee

@@ -1247,7 +1247,7 @@ describe "TextEditorComponent", ->
         expect(overlay.style.top).toBe position.top + editor.getLineHeightInPixels() + 'px'
 
     describe "when the marker is not empty", ->
-      it "renders at the head of the marker", ->
+      it "renders at the head of the marker by default", ->
         marker = editor.displayBuffer.markBufferRange([[2, 5], [2, 10]], invalidate: 'never')
         decoration = editor.decorateMarker(marker, {type: 'overlay', item})
         nextAnimationFrame()
@@ -1269,6 +1269,17 @@ describe "TextEditorComponent", ->
         expect(overlay.style.left).toBe position.left + 'px'
         expect(overlay.style.top).toBe position.top + editor.getLineHeightInPixels() + 'px'
 
+      it "renders at the tail of the marker when the 'position' option is 'tail'", ->
+        marker = editor.displayBuffer.markBufferRange([[2, 5], [2, 10]], invalidate: 'never')
+        decoration = editor.decorateMarker(marker, {type: 'overlay', position: 'tail', item})
+        nextAnimationFrame()
+
+        position = editor.pixelPositionForBufferPosition([2, 5])
+
+        overlay = component.getTopmostDOMNode().querySelector('atom-overlay')
+        expect(overlay.style.left).toBe position.left + 'px'
+        expect(overlay.style.top).toBe position.top + editor.getLineHeightInPixels() + 'px'
+
     describe "positioning the overlay when near the edge of the editor", ->
       [itemWidth, itemHeight] = []
       beforeEach ->

src/overlay-manager.coffee

@@ -7,9 +7,12 @@ class OverlayManager
     {editor, overlayDecorations, lineHeightInPixels} = props
 
     existingDecorations = null
-    for markerId, {isMarkerReversed, headPixelPosition, decorations} of overlayDecorations
+    for markerId, {headPixelPosition, tailPixelPosition, decorations} of overlayDecorations
       for decoration in decorations
-        @renderOverlay(editor, decoration, headPixelPosition, lineHeightInPixels)
+        pixelPosition =
+          if decoration.position is 'tail' then tailPixelPosition else headPixelPosition
+
+        @renderOverlay(editor, decoration, pixelPosition, lineHeightInPixels)
 
         existingDecorations ?= {}
         existingDecorations[decoration.id] = true

src/text-editor-component.coffee

@@ -364,6 +364,7 @@ TextEditorComponent = React.createClass
     for markerId, decorations of decorationsByMarkerId
       marker = editor.getMarker(markerId)
       headScreenPosition = marker.getHeadScreenPosition()
+      tailScreenPosition = marker.getTailScreenPosition()
       if marker.isValid()
         for decoration in decorations
           if decoration.isType('overlay')
@@ -371,6 +372,7 @@ TextEditorComponent = React.createClass
             filteredDecorations[markerId] ?=
               id: markerId
               headPixelPosition: editor.pixelPositionForScreenPosition(headScreenPosition)
+              tailPixelPosition: editor.pixelPositionForScreenPosition(tailScreenPosition)
               decorations: []
             filteredDecorations[markerId].decorations.push decorationParams
     filteredDecorations