From eb9278552561539ce9d1ac87f45b738f12d6f573 Mon Sep 17 00:00:00 2001 From: abe33 Date: Fri, 19 Dec 2014 15:14:05 +0100 Subject: [PATCH] Implement scroll on mouse pressed over canvas --- lib/minimap-element.coffee | 13 ++++++++++++- spec/minimap-element-spec.coffee | 32 ++++++++++++++++++++++++++++++-- 2 files changed, 42 insertions(+), 3 deletions(-) diff --git a/lib/minimap-element.coffee b/lib/minimap-element.coffee index ee792ab1..3191bcaa 100644 --- 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 index ba58d4cc..f5795aff 100644 --- 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) # ######## ######## ###### ######## ######## ####### ## ## # ## ## ## ## ## ## ## ## ## ## ## ## # ## ## ## ## ## ## ## ## ## ####