Click and drag on the gutter selects lines correctly

Closes #352

spec/app/editor-spec.coffee

@@ -2045,9 +2045,10 @@ describe "Editor", ->
         event.originalEvent = {detail: 1}
         event.shiftKey = true
         editor.gutter.find(".line-number:eq(1)").trigger event
-        expect(editor.getSelection().getScreenRange()).toEqual [[0,0], [1,0]]
+        expect(editor.getSelection().getScreenRange()).toEqual [[0,0], [2,0]]
 
     describe "when mousing down and then moving across multiple lines before mousing up", ->
+      describe "when selecting from top to bottom", ->
         it "selects the lines", ->
           mousedownEvent = $.Event("mousedown")
           mousedownEvent.pageY = editor.gutter.find(".line-number:eq(1)").offset().top
@@ -2061,7 +2062,23 @@ describe "Editor", ->
 
           $(document).trigger 'mouseup'
 
-        expect(editor.getSelection().getScreenRange()).toEqual [[1,0], [5,30]]
+          expect(editor.getSelection().getScreenRange()).toEqual [[1,0], [6,0]]
+
+      describe "when selecting from bottom to top", ->
+        it "selects the lines", ->
+          mousedownEvent = $.Event("mousedown")
+          mousedownEvent.pageY = editor.gutter.find(".line-number:eq(5)").offset().top
+          mousedownEvent.originalEvent = {detail: 1}
+          editor.gutter.find(".line-number:eq(5)").trigger mousedownEvent
+
+          mousemoveEvent = $.Event("mousemove")
+          mousemoveEvent.pageY = editor.gutter.find(".line-number:eq(1)").offset().top
+          mousemoveEvent.originalEvent = {detail: 1}
+          editor.gutter.find(".line-number:eq(1)").trigger mousemoveEvent
+
+          $(document).trigger 'mouseup'
+
+          expect(editor.getSelection().getScreenRange()).toEqual [[1,0], [6,0]]
 
   describe "when clicking below the last line", ->
     beforeEach ->

src/app/editor.coffee

@@ -393,10 +393,6 @@ class Editor extends View
       @gutter.widthChanged = (newWidth) =>
         @scrollView.css('left', newWidth + 'px')
 
-      @gutter.on 'mousedown', (e) =>
-        e.pageX = @renderedLines.offset().left
-        onMouseDown(e)
-
     @scrollView.on 'scroll', =>
       if @scrollView.scrollLeft() == 0
         @gutter.removeClass('drop-shadow')

src/app/gutter.coffee

@@ -1,5 +1,6 @@
 {View, $$, $$$} = require 'space-pen'
 Range = require 'range'
+$ = require 'jquery'
 _ = require 'underscore'
 
 module.exports =
@@ -16,21 +17,42 @@ class Gutter extends View
     return if @attached or not onDom
     @attached = true
 
-    editor = @editor()
     highlightLines = => @highlightLines()
-    editor.on 'cursor:moved', highlightLines
-    editor.on 'selection:changed', highlightLines
+    @getEditor().on 'cursor:moved', highlightLines
+    @getEditor().on 'selection:changed', highlightLines
+    @on 'mousedown', (e) => @handleMouseEvents(e)
 
-  editor: ->
+  getEditor: ->
     @parentView
 
+  beforeRemove: ->
+    $(document).off(".gutter-#{@getEditor().id}")
+
+  handleMouseEvents: (e) ->
+    editor = @getEditor()
+    startRow = editor.screenPositionFromMouseEvent(e).row
+    if e.shiftKey
+      editor.selectToScreenPosition([startRow + 1, 0])
+      return
+    else
+      editor.getSelection().setScreenRange([[startRow, 0], [startRow, 0]])
+
+    moveHandler = (e) =>
+      start = startRow
+      end = editor.screenPositionFromMouseEvent(e).row
+      if end > start then end++ else start++
+      editor.getSelection().setScreenRange([[start, 0], [end, 0]])
+
+    $(document).on "mousemove.gutter-#{@getEditor().id}", moveHandler
+    $(document).one "mouseup.gutter-#{@getEditor().id}", => $(document).off 'mousemove', moveHandler
+
   setShowLineNumbers: (showLineNumbers) ->
     if showLineNumbers then @lineNumbers.show() else @lineNumbers.hide()
 
   updateLineNumbers: (changes, renderFrom, renderTo) ->
     if renderFrom < @firstScreenRow or renderTo > @lastScreenRow
       performUpdate = true
-    else if @editor().getLastScreenRow() < @lastScreenRow
+    else if @getEditor().getLastScreenRow() < @lastScreenRow
       performUpdate = true
     else
       for change in changes
@@ -41,7 +63,7 @@ class Gutter extends View
     @renderLineNumbers(renderFrom, renderTo) if performUpdate
 
   renderLineNumbers: (startScreenRow, endScreenRow) ->
-    editor = @editor()
+    editor = @getEditor()
     maxDigits = editor.getLineCount().toString().length
     rows = editor.bufferRowsForScreenRows(startScreenRow, endScreenRow)
 
@@ -81,8 +103,8 @@ class Gutter extends View
       @highlightedLineNumbers.push(highlightedLineNumber)
 
   highlightLines: ->
-    if @editor().getSelection().isEmpty()
-      row = @editor().getCursorScreenPosition().row
+    if @getEditor().getSelection().isEmpty()
+      row = @getEditor().getCursorScreenPosition().row
       rowRange = new Range([row, 0], [row, 0])
       return if @selectionEmpty and @highlightedRows?.isEqual(rowRange)
 
@@ -91,7 +113,7 @@ class Gutter extends View
       @highlightedRows = rowRange
       @selectionEmpty = true
     else
-      selectedRows = @editor().getSelection().getScreenRange()
+      selectedRows = @getEditor().getSelection().getScreenRange()
       endRow = selectedRows.end.row
       endRow-- if selectedRows.end.column is 0
       selectedRows = new Range([selectedRows.start.row, 0], [endRow, 0])