WIP

spec/editor-view-spec.coffee

@@ -1711,6 +1711,40 @@ describe "EditorView", ->
           expect(editorView.renderedLines.find('.line:eq(10) .indent-guide').text()).toBe "#{eol}   "
           expect(editorView.renderedLines.find('.line:eq(10) .invisible-character').text()).toBe eol
 
+  describe "marker rendering", ->
+    describe "individual marker view rendering", ->
+      beforeEach ->
+        editorView.attachToDom()
+
+      fit "renders one region for markers spanning a single line", ->
+        marker = editor.markBufferRange([[2, 7], [2, 25]])
+        markerView = editorView.markerViews[marker.id]
+        expect(markerView.regions.length).toBe 1
+        [region] = markerView.regions
+        expect(region.position().top).toBe(2 * lineHeight)
+        expect(region.position().left).toBe(7 * charWidth)
+        expect(region.height()).toBe lineHeight
+        expect(region.width()).toBe((25 - 7) * charWidth)
+
+      it "renders two regions for markers spanning two lines", ->
+
+      it "renders three regions for markers spanning more than two lines", ->
+
+
+    describe "multiple marker rendering", ->
+      [marker1, marker2, marker3, marker4, marker5] = []
+
+      beforeEach ->
+        editorView.lineOverdraw = 1
+        editorView.attachToDom(heightInLines: 2.5)
+        editorView.scrollTop(editorView.lineHeight * 5)
+
+        marker1 = editor.markScreenRange([[1, 1], [2, 2]], class: 'a') # above rendered lines
+        marker2 = editor.markScreenRange([[2, 5], [5, 1]], class: 'a') # overlaps first rendered line
+        marker3 = editor.markScreenRange([[6, 0], [7, 0]], class: 'a') # within rendered lines
+        marker4 = editor.markScreenRange([[8, 9], [10, 11]], class: 'a') # overlaps last rendered line
+        marker5 = editor.markScreenRange([[11, 5], [12, 0]], class: 'a') # overlaps last rendered line
+
   describe "when soft-wrap is enabled", ->
     beforeEach ->
       jasmine.unspy(window, 'setTimeout')

src/display-buffer-marker.coffee

@@ -139,11 +139,22 @@ class DisplayBufferMarker
   isDestroyed: ->
     @bufferMarker.isDestroyed()
 
-  getAttributes: ->
-    @bufferMarker.getAttributes()
+  getProperties: ->
+    @bufferMarker.getProperties()
 
+  setProperties: (properties) ->
+    @bufferMarker.setProperties(properties)
+
+  # Deprecated: Call {::getProperties} instead
+  getAttributes: ->
+    @getProperties()
+
+  # Deprecated: Call {::setProperties} instead
   setAttributes: (attributes) ->
-    @bufferMarker.setAttributes(attributes)
+    @setProperties(attributes)
+
+  isVisible: ->
+    @getProperties().htmlClass?
 
   matchesAttributes: (attributes) ->
     attributes = @displayBuffer.translateToBufferMarkerParams(attributes)

src/editor-view.coffee

@@ -99,6 +99,7 @@ class EditorView extends View
     @handleInputEvents()
     @cursorViews = []
     @selectionViews = []
+    @markerViews = {}
     @pendingChanges = []
     @newCursors = []
     @newSelections = []
@@ -524,6 +525,9 @@ class EditorView extends View
       @newSelections.push(selection)
       @requestDisplayUpdate()
 
+    @editor.on 'marker-created', (marker) =>
+      @requestDisplayUpdate()
+
     @editor.on 'screen-lines-changed.editor', (e) =>
       @handleScreenLinesChange(e)
 
@@ -923,6 +927,7 @@ class EditorView extends View
     @highlightCursorLine()
     @updateCursorViews()
     @updateSelectionViews()
+    @updateMarkerViews()
     @autoscroll(options)
     @trigger 'editor:display-updated'
 
@@ -967,6 +972,15 @@ class EditorView extends View
     for cursorView in @getCursorViews()
       do (cursorView) -> cursorView.resetBlinking()
 
+  updateMarkerViews: ->
+    for marker in @editor.getVisibleMarkers()
+      @addMarkerView(marker)
+
+  addMarkerView: (marker) ->
+    markerView = new MarkerView(marker, this)
+    @markerViews[marker.id] = markerView
+    @underlayer.append(markerView.element)
+
   autoscroll: (options={}) ->
     for cursorView in @getCursorViews()
       if !options.suppressAutoScroll and cursorView.needsAutoscroll()
@@ -1515,5 +1529,6 @@ class EditorView extends View
     @editor.logScreenLines(start, end)
 
   logRenderedLines: ->
+    gutter = @gutter
     @renderedLines.find('.line').each (n) ->
-      console.log n, $(this).text()
+      console.log n, gutter.find(".line-number:eq(#{n})").text() + " |" + $(this).text()

src/editor.coffee

@@ -1003,6 +1003,12 @@ class Editor extends Model
   getMarkers: ->
     @displayBuffer.getMarkers()
 
+  # Public: Get markers that are visible on screen.
+  #
+  # Returns an {Array} of {DisplayBufferMarker}s.
+  getVisibleMarkers: ->
+    @getMarkers().filter (marker) -> marker.isVisible()
+
   # Public: Find all {DisplayBufferMarker}s that match the given properties.
   #
   # This method finds markers based on the given properties. Markers can be
@@ -1738,8 +1744,8 @@ class Editor extends Model
     @emit 'grammar-changed'
 
   handleMarkerCreated: (marker) =>
-    if marker.matchesAttributes(@getSelectionMarkerAttributes())
-      @addSelection(marker)
+    @addSelection(marker) if marker.matchesAttributes(@getSelectionMarkerAttributes())
+    @emit 'marker-created', marker
 
   getSelectionMarkerAttributes: ->
     type: 'selection', editorId: @id, invalidate: 'never'

src/marker-view.coffee

@@ -0,0 +1,12 @@
+{$$} = require 'space-pencil'
+
+Template = $$ ->
+  @div ->
+    @div()
+    @div()
+    @div()
+
+module.exports =
+class MarkerView
+  constructor: (@marker, @editorView) ->
+    @element = Template.cloneElement(true)