Implement scroll on mouse pressed over canvas

atom-minimap · Dec 19, 2014 · eb92785 · eb92785
1 parent fed8f2a
commit eb92785
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 3 deletions.
diff --git a/lib/minimap-element.coffee b/lib/minimap-element.coffee
@@ -1,5 +1,5 @@
 {debounce} = require 'underscore-plus'
-{CompositeDisposable} = require 'event-kit'
+{CompositeDisposable, Disposable} = require 'event-kit'
 DOMStylesReader = require './mixins/dom-styles-reader'
 CanvasDrawer = require './mixins/canvas-drawer'
 
@@ -127,6 +127,10 @@ class MinimapElement extends HTMLElement
     @controls.classList.add('minimap-controls')
     @shadowRoot.appendChild(@controls)
 
+    @canvas.addEventListener 'mousedown', l = (e) => @mousePressedOverCanvas(e)
+    @subscriptions.add new Disposable =>
+      @canvas.removeEventListener 'mousedown', l
+
   initializeScrollIndicator: ->
     @scrollIndicator = document.createElement('div')
     @scrollIndicator.classList.add 'minimap-scroll-indicator'
@@ -267,6 +271,13 @@ class MinimapElement extends HTMLElement
     @updateCanvas()
 
   isVisible: -> @offsetWidth > 0 or @offsetHeight > 0
+  mousePressedOverCanvas: ({pageY, target}) ->
+    y = pageY - target.getBoundingClientRect().top
+    row = Math.floor(y / @minimap.getLineHeight()) + @minimap.getFirstVisibleScreenRow()
+
+    scrollTop = row * @minimap.textEditor.getLineHeightInPixels() - @minimap.textEditor.getHeight() / 2
+
+    @minimap.textEditor.setScrollTop(scrollTop)
 
   transformElement: (el, transform) ->
     el.style.transform = transform

diff --git a/spec/minimap-element-spec.coffee b/spec/minimap-element-spec.coffee
@@ -3,7 +3,7 @@ path = require 'path'
 {TextEditor} = require 'atom'
 Minimap = require '../lib/minimap'
 MinimapElement = require '../lib/minimap-element'
-{click, mousedown} = require './helpers/events'
+{mousemove, mousedown} = require './helpers/events'
 stylesheetPath = path.resolve __dirname, '..', 'stylesheets', 'minimap.less'
 stylesheet = atom.themes.loadStylesheet(stylesheetPath)
 
@@ -103,7 +103,7 @@ describe 'MinimapElement', ->
       editorElement.style.width = '200px'
       editorElement.style.height = '50px'
 
-      jasmineContent.appendChild(editorElement)
+      jasmineContent.insertBefore(editorElement, jasmineContent.firstChild)
       editor.setScrollTop(1000)
       editor.setScrollLeft(200)
       minimapElement.attach()
@@ -231,6 +231,34 @@ describe 'MinimapElement', ->
           expect(minimapElement.canvas.width).toEqual(canvasWidth)
           expect(minimapElement.canvas.height).toEqual(canvasHeight)
 
+    #     ######   ######  ########   #######  ##       ##
+    #    ##    ## ##    ## ##     ## ##     ## ##       ##
+    #    ##       ##       ##     ## ##     ## ##       ##
+    #     ######  ##       ########  ##     ## ##       ##
+    #          ## ##       ##   ##   ##     ## ##       ##
+    #    ##    ## ##    ## ##    ##  ##     ## ##       ##
+    #     ######   ######  ##     ##  #######  ######## ########
+
+    describe 'mouse scroll controls', ->
+      beforeEach ->
+        editorElement.style.height = '400px'
+        editorElement.style.width = '400px'
+        editor.setWidth(400)
+        editor.setHeight(400)
+        editor.setScrollTop(0)
+        editor.setScrollLeft(0)
+
+        advanceClock(150)
+        nextAnimationFrame()
+
+      describe 'when pressing the mouse on the minimap canvas', ->
+        beforeEach ->
+          canvas = minimapElement.canvas
+          mousedown(canvas)
+          nextAnimationFrame()
+
+        it 'scrolls the editor to the line below the mouse', ->
+          expect(editor.getScrollTop()).toEqual(360)
     #    ########  ########  ######  ######## ########   #######  ##    ##
     #    ##     ## ##       ##    ##    ##    ##     ## ##     ##  ##  ##
     #    ##     ## ##       ##          ##    ##     ## ##     ##   ####