diff --git a/lib/minimap-element.coffee b/lib/minimap-element.coffee index 75b02e38..09bc2d30 100644 --- a/lib/minimap-element.coffee +++ b/lib/minimap-element.coffee @@ -8,6 +8,7 @@ class MinimapElement extends HTMLElement attachedCallback: -> @measureHeightAndWidth() + @requestUpdate() detachedCallback: -> @@ -21,8 +22,12 @@ class MinimapElement extends HTMLElement @shadowRoot = @createShadowRoot() @canvas = document.createElement('canvas') + @context = @canvas.getContext('2d') @shadowRoot.appendChild(@canvas) + @offscreenCanvas = document.createElement('canvas') + @offscreenContext = @offscreenCanvas.getContext('2d') + @visibleArea = document.createElement('div') @visibleArea.classList.add('minimap-visible-area') @shadowRoot.appendChild(@visibleArea) @@ -33,8 +38,8 @@ class MinimapElement extends HTMLElement height = @clientHeight if width isnt @canvas.width or height isnt @canvas.height - @canvas.width = width - @canvas.height = height + @canvas.width = width * devicePixelRatio + @canvas.height = height * devicePixelRatio getTextEditorElement: -> @editorElement ?= atom.views.getView(@minimap.getTextEditor()) @@ -44,6 +49,26 @@ class MinimapElement extends HTMLElement editorElement.shadowRoot ? editorElement + requestUpdate: -> + return if @frameRequested + + @frameRequested = true + requestAnimationFrame => + @update() + @frameRequested = false + + update: -> + @visibleArea.style.width = @clientWidth + 'px' + @visibleArea.style.height = @minimap.getTextEditorHeight() + 'px' + +# ######## ## ######## ## ## ######## ## ## ######## +# ## ## ## ### ### ## ### ## ## +# ## ## ## #### #### ## #### ## ## +# ###### ## ###### ## ### ## ###### ## ## ## ## +# ## ## ## ## ## ## ## #### ## +# ## ## ## ## ## ## ## ### ## +# ######## ######## ######## ## ## ######## ## ## ## + module.exports = MinimapElement = document.registerElement 'atom-text-editor-minimap', prototype: MinimapElement.prototype MinimapElement.registerViewProvider = -> diff --git a/spec/minimap-element-spec.coffee b/spec/minimap-element-spec.coffee index 6002497a..b5c643e7 100644 --- a/spec/minimap-element-spec.coffee +++ b/spec/minimap-element-spec.coffee @@ -45,7 +45,7 @@ describe 'MinimapElement', -> expect(minimapElement.shadowRoot.querySelector('.minimap-visible-area')).toExist() describe 'when attached to the text editor element', -> - [nextAnimationFrame, canvas] = [] + [nextAnimationFrame, canvas, visibleArea] = [] beforeEach -> spyOn(window, "setInterval").andCallFake window.fakeSetInterval @@ -84,3 +84,15 @@ describe 'MinimapElement', -> it 'resizes the canvas to fit the minimap', -> expect(canvas.offsetHeight).toEqual(minimapElement.offsetHeight) expect(canvas.offsetWidth).toEqual(minimapElement.offsetWidth) + + it 'requests an update', -> + expect(minimapElement.frameRequested).toBeTruthy() + + describe 'when the update is performed', -> + beforeEach -> + nextAnimationFrame() + visibleArea = minimapElement.shadowRoot.querySelector('.minimap-visible-area') + + it 'sets the visible area width and height', -> + expect(visibleArea.offsetWidth).toEqual(minimapElement.clientWidth) + expect(visibleArea.offsetHeight).toBeCloseTo(minimap.getTextEditorHeight(), 0) diff --git a/stylesheets/minimap.less b/stylesheets/minimap.less index 5caddc9d..f3e587e8 100644 --- a/stylesheets/minimap.less +++ b/stylesheets/minimap.less @@ -14,7 +14,6 @@ atom-text-editor::shadow, atom-text-editorĀ { &::shadow { canvas { - position: absolute; top: 0; left: 0; @@ -22,6 +21,7 @@ atom-text-editor::shadow, atom-text-editorĀ { .minimap-visible-area { position: absolute; + display: 'block'; } } }