From d739736997824507b08eb03cfc27a9e473fbb08d Mon Sep 17 00:00:00 2001
From: Corey Johnson & Nathan Sobo <cj+nathan@github.com>
Date: Fri, 9 Nov 2012 10:43:58 -0700
Subject: [PATCH] Add underlayer / overlayer for the selection and cursor

The renderedLines div can now only contain actual lines, nothing else. Thes divs are designed to match the lines div in dimensions and make it easy to put things in front of or behind the text.
---
 src/app/editor.coffee | 19 ++++++++++++++-----
 static/editor.css     | 17 +++++++++++++++++
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/src/app/editor.coffee b/src/app/editor.coffee
index 04bbfb403..8ba985af7 100644
--- a/src/app/editor.coffee
+++ b/src/app/editor.coffee
@@ -20,7 +20,9 @@ class Editor extends View
       @subview 'gutter', new Gutter
       @input class: 'hidden-input', outlet: 'hiddenInput'
       @div class: 'scroll-view', outlet: 'scrollView', =>
-        @div class: 'lines', outlet: 'renderedLines', =>
+        @div class: 'overlayer', outlet: 'overlayer'
+        @div class: 'lines', outlet: 'renderedLines'
+        @div class: 'underlayer', outlet: 'underlayer'
       @div class: 'vertical-scrollbar', outlet: 'verticalScrollbar', =>
         @div outlet: 'verticalScrollbarContent'
 
@@ -465,6 +467,8 @@ class Editor extends View
     @updateRenderedLines() if @attached
 
     @renderedLines.css('top', -scrollTop)
+    @underlayer.css('top', -scrollTop)
+    @overlayer.css('top', -scrollTop)
     @gutter.lineNumbers.css('top', -scrollTop)
     if options?.adjustVerticalScrollbar ? true
       @verticalScrollbar.scrollTop(scrollTop)
@@ -661,7 +665,7 @@ class Editor extends View
   addCursorView: (cursor) ->
     cursorView = new CursorView(cursor, this)
     @cursorViews.push(cursorView)
-    @appendToLinesView(cursorView)
+    @overlayer.append(cursorView)
     cursorView
 
   removeCursorView: (cursorView) ->
@@ -689,7 +693,7 @@ class Editor extends View
   addSelectionView: (selection) ->
     selectionView = new SelectionView({editor: this, selection})
     @selectionViews.push(selectionView)
-    @appendToLinesView(selectionView)
+    @underlayer.append(selectionView)
     selectionView
 
   removeSelectionView: (selectionView) ->
@@ -700,11 +704,11 @@ class Editor extends View
     selectionView.remove() for selectionView in @getSelectionViews()
 
   appendToLinesView: (view) ->
-    @renderedLines.append(view)
+    @overlayer.append(view)
 
   calculateDimensions: ->
     fragment = $('<pre class="line" style="position: absolute; visibility: hidden;"><span>x</span></div>')
-    @appendToLinesView(fragment)
+    @renderedLines.append(fragment)
 
     lineRect = fragment[0].getBoundingClientRect()
     charRect = fragment.find('span')[0].getBoundingClientRect()
@@ -729,6 +733,8 @@ class Editor extends View
     minWidth = @charWidth * @maxScreenLineLength()
     unless @renderedLines.cachedMinWidth == minWidth
       @renderedLines.css('min-width', minWidth)
+      @underlayer.css('min-width', minWidth)
+      @overlayer.css('min-width', minWidth)
       @renderedLines.cachedMinWidth = minWidth
 
   handleScrollHeightChange: ->
@@ -860,6 +866,9 @@ class Editor extends View
     @renderedLines.css('padding-bottom', paddingBottom)
     @gutter.lineNumbers.css('padding-bottom', paddingBottom)
 
+    @underlayer.height(@screenLineCount() * @lineHeight)
+    @overlayer.height(@screenLineCount() * @lineHeight)
+
   getFirstVisibleScreenRow: ->
     Math.floor(@scrollTop() / @lineHeight)
 
diff --git a/static/editor.css b/static/editor.css
index 3900c25e6..b090cf92d 100644
--- a/static/editor.css
+++ b/static/editor.css
@@ -73,6 +73,17 @@
   overflow-x: hidden;
 }
 
+.editor .underlayer, .editor .overlayer {
+  pointer-events: none;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.editor .underlayer {
+  z-index: 0;
+}
+
 .editor .lines {
   position: relative;
   display: table;
@@ -80,8 +91,14 @@
   width: 100%;
   /*overflow: hidden; i'm worried this is causing rendering problems */
   padding-right: 2em;
+  z-index: 1;
 }
 
+.editor .overlayer {
+  z-index: 2;
+}
+
+
 .editor .line span {
   vertical-align: top;
 }