Add basic view update routine

atom-minimap · Dec 14, 2014 · 312b608 · 312b608
1 parent a3f3ac0
commit 312b608
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 4 deletions.
diff --git 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
@@ -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
@@ -14,14 +14,14 @@ atom-text-editor::shadow, atom-text-editor {
 
     &::shadow {
       canvas {
-
         position: absolute;
         top: 0;
         left: 0;
       }
 
       .minimap-visible-area {
         position: absolute;
+        display: 'block';
       }
     }
   }