Add ‘position’ option to overlay decorations

By default overlays are positioned at the head of the given marker.
This option allows them to be positioned at the tail instead by passing
`position: ’tail’` when creating the decoration, which is useful for 
autocomplete.

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