Changes marker view to handle regions

abe33 · May 14, 2014 · 349ada9 · 349ada9
1 parent 47e9188
commit 349ada9
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 32 deletions.
diff --git a/lib/atom-color-highlight-view.coffee b/lib/atom-color-highlight-view.coffee
@@ -108,7 +108,7 @@ class AtomColorHighlightView extends View
         delete markerViewsToRemoveById[marker.id]
       else
         markerView = new MarkerView({@editorView, marker})
-        @append(markerView)
+        @append(markerView.element)
         @markerViews[marker.id] = markerView
 
     for id, markerView of markerViewsToRemoveById

diff --git a/lib/marker-view.coffee b/lib/marker-view.coffee
@@ -2,45 +2,100 @@
 {Subscriber} = require 'emissary'
 
 module.exports =
-class MarkerView extends View
+class MarkerView
   Subscriber.includeInto(this)
 
-  @content: ->
-    @span class: 'color-highlight'
-
   constructor: ({@editorView, @marker}) ->
-    super
+    @regions = []
+    @editSession = @editorView.editor
+    @element = document.createElement('div')
+    @element.className = 'marker color-highlight'
+    @updateNeeded = @marker.isValid()
+    @oldScreenRange = @getScreenRange()
 
     @subscribeToMarker()
     @updateDisplay()
 
+  remove: =>
+    @unsubscribe()
+    @marker = null
+    @editorView = null
+    @editSession = null
+    @element.remove()
+
+  show: ->
+    @element.style.display = ""
+
+  hide: ->
+    @element.style.display = "none"
+
   subscribeToMarker: ->
-    @subscribe @marker, 'changed', @updateDisplay
-    @subscribe @marker, 'destroyed', @unsubscribeFromMarker
+    @subscribe @marker, 'changed', @onMarkerChanged
+    @subscribe @marker, 'destroyed', @remove
+    @subscribe @editorView, 'editor:display-updated', @updateDisplay
 
-  unsubscribeFromMarker: =>
-    @unsubscribe @marker, 'changed', @updateDisplay
-    @unsubscribe @marker, 'destroyed', @unsubscribeFromMarker
-    @remove()
+  onMarkerChanged: ({isValid}) =>
+    @updateNeeded = isValid
+    if isValid then @show() else @hide()
+
+  isUpdateNeeded: ->
+    return false unless @updateNeeded and @editSession is @editorView.editor
+
+    oldScreenRange = @oldScreenRange
+    newScreenRange = @getScreenRange()
+    @oldScreenRange = newScreenRange
+    @intersectsRenderedScreenRows(oldScreenRange) or @intersectsRenderedScreenRows(newScreenRange)
+
+  intersectsRenderedScreenRows: (range) ->
+    range.intersectsRowRange(@editorView.firstRenderedScreenRow, @editorView.lastRenderedScreenRow)
 
   updateDisplay: =>
-    setImmediate =>
-      color = @getColor()
-      colorText = @getColorText()
-
-      {start, end} = @getScreenRange()
-      if end.row is start.row
-        {top, left} = @editorView.pixelPositionForScreenPosition(start)
-      else
-        {top, left} = @editorView.pixelPositionForScreenPosition([end.row, 0])
-
-      @text colorText
-      @css
-        top: top + 'px'
-        left: left + 'px'
-        background: color
-        borderColor: color
-        color: @getColorTextColor()
+    return unless @isUpdateNeeded()
+
+    @updateNeeded = false
+    @clearRegions()
+    range = @getScreenRange()
+    return if range.isEmpty()
+
+    rowSpan = range.end.row - range.start.row
+
+    if rowSpan == 0
+      @appendRegion(1, range.start, range.end)
+    else
+      @appendRegion(1, range.start, {row: range.start.row, column: Infinity})
+      if rowSpan > 1
+        @appendRegion(rowSpan - 1, { row: range.start.row + 1, column: 0}, {row: range.start.row + 1, column: Infinity})
+      @appendRegion(1, { row: range.end.row, column: 0 }, range.end)
+
+  appendRegion: (rows, start, end) ->
+    { lineHeight, charWidth } = @editorView
+    color = @getColor()
+    colorText = @getColorTextColor()
+    bufferRange = @editSession.bufferRangeForScreenRange({start, end})
+    text = @editSession.getTextInRange(bufferRange)
+
+    css = @editorView.pixelPositionForScreenPosition(start)
+    css.height = lineHeight * rows
+    if end
+      css.width = @editorView.pixelPositionForScreenPosition(end).left - css.left
+    else
+      css.right = 0
+
+    region = document.createElement('div')
+    region.className = 'region'
+    region.textContent = text
+    for name, value of css
+      region.style[name] = value + 'px'
+
+    region.style.backgroundColor = color
+    region.style.color = colorText
+
+    @element.appendChild(region)
+    @regions.push(region)
+
+  clearRegions: ->
+    region.remove() for region in @regions
+    @regions = []
 
   getColor: -> @marker.bufferMarker.properties.cssColor
   getColorText: -> @marker.bufferMarker.properties.color

diff --git a/stylesheets/atom-color-highlight.less b/stylesheets/atom-color-highlight.less
@@ -2,7 +2,7 @@
 @import "ui-variables";
 
 .atom-color-highlight {
-  .color-highlight {
+  .region {
     -webkit-font-smoothing: antialiased;
     position: absolute;
     padding: 0px 2px;
@@ -12,9 +12,10 @@
     box-sizing: content-box;
     border-radius: 2px;
     z-index: -2;
+    white-space: pre;
   }
 
-  .color-highlight:before {
+  .region:before {
     content: '';
     display: block;
     position: absolute;
@@ -27,7 +28,7 @@
     border-radius: 2px;
   }
 
-  .color-highlight:after {
+  .region:after {
     content: '';
     display: block;
     position: absolute;