From 769fb8153960baac29b4f1bc4ace419db852a14d Mon Sep 17 00:00:00 2001 From: abe33 Date: Fri, 19 Dec 2014 15:49:44 +0100 Subject: [PATCH] Implement basic minimap scroll through dragging --- lib/minimap-element.coffee | 48 ++++++++++++++++++++++++++++++-- spec/minimap-element-spec.coffee | 21 ++++++++++++++ 2 files changed, 66 insertions(+), 3 deletions(-) diff --git a/lib/minimap-element.coffee b/lib/minimap-element.coffee index 407fccd9..3379be07 100644 --- 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 index f5795aff..f8f65f75 100644 --- 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) + # ######## ######## ###### ######## ######## ####### ## ## # ## ## ## ## ## ## ## ## ## ## ## ## # ## ## ## ## ## ## ## ## ## ####