Implement basic minimap scroll through dragging

atom-minimap · Dec 19, 2014 · 769fb81 · 769fb81
1 parent 9226ac8
commit 769fb81
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 3 deletions.
diff --git a/lib/minimap-element.coffee b/lib/minimap-element.coffee
@@ -132,9 +132,15 @@ class MinimapElement extends HTMLElement
     @controls.classList.add('minimap-controls')
     @shadowRoot.appendChild(@controls)
 
-    @canvas.addEventListener 'mousedown', l = (e) => @mousePressedOverCanvas(e)
+    canvasMousedown = (e) => @mousePressedOverCanvas(e)
+    visibleAreaMousedown = (e) => @startDrag(e)
+
+    @canvas.addEventListener 'mousedown', canvasMousedown
+    @visibleArea.addEventListener 'mousedown', visibleAreaMousedown
+
     @subscriptions.add new Disposable =>
-      @canvas.removeEventListener 'mousedown', l
+      @canvas.removeEventListener 'mousedown', canvasMousedown
+      @visibleArea.removeEventListener 'mousedown', visibleAreaMousedown
 
   initializeScrollIndicator: ->
     @scrollIndicator = document.createElement('div')
@@ -328,7 +334,43 @@ class MinimapElement extends HTMLElement
 
     @minimap.textEditor.setScrollTop(scrollTop)
 
-  #     ######   ######   ######  
+  #    ########    ####    ########
+  #    ##     ##  ##  ##   ##     ##
+  #    ##     ##   ####    ##     ##
+  #    ##     ##  ####     ##     ##
+  #    ##     ## ##  ## ## ##     ##
+  #    ##     ## ##   ##   ##     ##
+  #    ########   ####  ## ########
+
+  startDrag: ({pageY}) ->
+    {top} = @visibleArea.getBoundingClientRect()
+    {top: offsetTop} = @getBoundingClientRect()
+
+    dragOffset = pageY - top
+
+    initial = {dragOffset, offsetTop}
+
+    mousemoveHandler = (e) => @drag(e, initial)
+    mouseupHandler = (e) => @endDrag(e, initial)
+
+    @addEventListener('mousemove', mousemoveHandler)
+    @addEventListener('mouseup', mouseupHandler)
+
+    @dragSubscription = new Disposable =>
+      @removeEventListener('mousemove', mousemoveHandler)
+      @removeEventListener('mouseup', mouseupHandler)
+
+  drag: (e, initial) ->
+    y = e.pageY - initial.offsetTop - initial.dragOffset
+
+    ratio = y / (@minimap.textEditor.getHeight() - @minimap.getTextEditorHeight())
+
+    @minimap.textEditor.setScrollTop(ratio * @minimap.textEditor.displayBuffer.getMaxScrollTop())
+
+  endDrag: (e, initial) ->
+    @dragSubscription.dispose()
+
+  #     ######   ######   ######
   #    ##    ## ##    ## ##    ##
   #    ##       ##       ##
   #    ##        ######   ######

diff --git a/spec/minimap-element-spec.coffee b/spec/minimap-element-spec.coffee
@@ -259,6 +259,27 @@ describe 'MinimapElement', ->
 
         it 'scrolls the editor to the line below the mouse', ->
           expect(editor.getScrollTop()).toEqual(360)
+
+      describe 'when dragging the visible area', ->
+        [visibleArea, originalTop] = []
+
+        beforeEach ->
+          visibleArea = minimapElement.visibleArea
+          {top, left, width, height} = visibleArea.getBoundingClientRect()
+          originalTop = top
+
+          mousedown(visibleArea, left + 10, top + 10)
+          mousemove(visibleArea, left + 10, top + 50)
+
+          nextAnimationFrame()
+
+        afterEach ->
+          minimapElement.endDrag()
+
+        it 'scrolls the editor so that the visible area was moved down by 40 pixels', ->
+          {top} = visibleArea.getBoundingClientRect()
+          expect(top).toBeCloseTo(originalTop + 40, -1)
+
     #    ########  ########  ######  ######## ########   #######  ##    ##
     #    ##     ## ##       ##    ##    ##    ##     ## ##     ##  ##  ##
     #    ##     ## ##       ##          ##    ##     ## ##     ##   ####