Merge pull request #421 from atom-minimap/cn-separate-token-and-decor…

…ations Separate tokens and decorations into different layers
atom-minimap · Dec 11, 2015 · e09022b · e09022b
2 parents 7f6050e + 06b93a3
commit e09022b
Show file tree

Hide file tree

Showing 8 changed files with 535 additions and 193 deletions.
diff --git a/lib/canvas-layer.js b/lib/canvas-layer.js
@@ -0,0 +1,82 @@
+'use babel'
+
+/**
+ * @access private
+ */
+export default class CanvasLayer {
+  constructor () {
+    /**
+     * The onscreen canvas.
+     * @type {HTMLCanvasElement}
+     */
+    this.canvas = document.createElement('canvas')
+    /**
+     * The onscreen canvas context.
+     * @type {CanvasRenderingContext2D}
+     */
+    this.context = this.canvas.getContext('2d')
+    this.canvas.webkitImageSmoothingEnabled = false
+    this.context.imageSmoothingEnabled = false
+
+    /**
+    * The offscreen canvas.
+    * @type {HTMLCanvasElement}
+    * @access private
+    */
+    this.offscreenCanvas = document.createElement('canvas')
+    /**
+     * The offscreen canvas context.
+     * @type {CanvasRenderingContext2D}
+     * @access private
+     */
+    this.offscreenContext = this.offscreenCanvas.getContext('2d')
+    this.offscreenCanvas.webkitImageSmoothingEnabled = false
+    this.offscreenContext.imageSmoothingEnabled = false
+  }
+
+  attach (parent) {
+    if (this.canvas.parentNode) { return }
+
+    parent.appendChild(this.canvas)
+  }
+
+  setSize (width = 0, height = 0) {
+    this.canvas.width = width
+    this.canvas.height = height
+    this.context.imageSmoothingEnabled = false
+    this.resetOffscreenSize()
+  }
+
+  getSize () {
+    return {
+      width: this.canvas.width,
+      height: this.canvas.height
+    }
+  }
+
+  resetOffscreenSize () {
+    this.offscreenCanvas.width = this.canvas.width
+    this.offscreenCanvas.height = this.canvas.height
+    this.offscreenContext.imageSmoothingEnabled = false
+  }
+
+  copyToOffscreen () {
+    this.offscreenContext.drawImage(this.canvas, 0, 0)
+  }
+
+  copyFromOffscreen () {
+    this.context.drawImage(this.offscreenCanvas, 0, 0)
+  }
+
+  copyPartFromOffscreen (srcY, destY, height) {
+    this.context.drawImage(
+      this.offscreenCanvas,
+      0, srcY, this.offscreenCanvas.width, height,
+      0, destY, this.offscreenCanvas.width, height
+    )
+  }
+
+  clearCanvas () {
+    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
+  }
+}
diff --git a/lib/minimap-element.js b/lib/minimap-element.js
@@ -385,7 +385,7 @@ export default class MinimapElement {
     this.initializeCanvas()
 
     this.shadowRoot = this.createShadowRoot()
-    this.shadowRoot.appendChild(this.canvas)
+    this.attachCanvases(this.shadowRoot)
 
     this.createVisibleArea()
     this.createControls()
@@ -396,7 +396,7 @@ export default class MinimapElement {
       }
     }))
 
-    this.subscriptions.add(this.subscribeTo(this.canvas, {
+    this.subscriptions.add(this.subscribeTo(this.getFrontCanvas(), {
       'mousedown': (e) => { this.mousePressedOverCanvas(e) }
     }))
   }
@@ -514,7 +514,7 @@ export default class MinimapElement {
             this.quickSettingsElement = null
           })
 
-          let {top, left, right} = this.canvas.getBoundingClientRect()
+          let {top, left, right} = this.getFrontCanvas().getBoundingClientRect()
           this.quickSettingsElement.style.top = top + 'px'
           this.quickSettingsElement.attach()
 
@@ -641,6 +641,11 @@ export default class MinimapElement {
       this.requestUpdate()
     }))
 
+    this.subscriptions.add(this.minimap.onDidChangeDecorationRange((change) => {
+      this.pendingDecorationChanges.push(change)
+      this.requestUpdate()
+    }))
+
     this.setStandAlone(this.minimap.isStandAlone())
 
     if (this.width != null && this.height != null) {
@@ -713,11 +718,12 @@ export default class MinimapElement {
     if (!(this.attached && this.isVisible() && this.minimap)) { return }
     let minimap = this.minimap
     minimap.enableCache()
+    let canvas = this.getFrontCanvas()
 
     const devicePixelRatio = this.minimap.getDevicePixelRatio()
     let visibleAreaLeft = minimap.getTextEditorScaledScrollLeft()
     let visibleAreaTop = minimap.getTextEditorScaledScrollTop() - minimap.getScrollTop()
-    let visibleWidth = Math.min(this.canvas.width / devicePixelRatio, this.width)
+    let visibleWidth = Math.min(canvas.width / devicePixelRatio, this.width)
 
     if (this.adjustToSoftWrap && this.flexBasis) {
       this.style.flexBasis = this.flexBasis + 'px'
@@ -750,9 +756,13 @@ export default class MinimapElement {
     }
 
     if (SPEC_MODE) {
-      this.applyStyles(this.canvas, {top: canvasTop + 'px'})
+      this.applyStyles(this.backLayer.canvas, {top: canvasTop + 'px'})
+      this.applyStyles(this.tokensLayer.canvas, {top: canvasTop + 'px'})
+      this.applyStyles(this.frontLayer.canvas, {top: canvasTop + 'px'})
     } else {
-      this.applyStyles(this.canvas, {transform: canvasTransform})
+      this.applyStyles(this.backLayer.canvas, {transform: canvasTransform})
+      this.applyStyles(this.tokensLayer.canvas, {transform: canvasTransform})
+      this.applyStyles(this.frontLayer.canvas, {transform: canvasTransform})
     }
 
     if (this.minimapScrollIndicator && minimap.canScroll() && !this.scrollIndicator) {
@@ -878,9 +888,12 @@ export default class MinimapElement {
         delete this.flexBasis
       }
 
-      if (canvasWidth !== this.canvas.width || this.height !== this.canvas.height) {
-        this.canvas.width = canvasWidth * devicePixelRatio
-        this.canvas.height = (this.height + this.minimap.getLineHeight()) * devicePixelRatio
+      let canvas = this.getFrontCanvas()
+      if (canvasWidth !== canvas.width || this.height !== canvas.height) {
+        this.setCanvasesSize(
+          canvasWidth * devicePixelRatio,
+          (this.height + this.minimap.getLineHeight()) * devicePixelRatio
+        )
       }
     }
   }
@@ -893,10 +906,6 @@ export default class MinimapElement {
   //    ##         ## ##   ##       ##   ###    ##    ##    ##
   //    ########    ###    ######## ##    ##    ##     ######
 
-  // Internal:
-  //
-  // config - An {Object} mapping the config name to observe with the listener
-  //          {Function} to call when the setting was changed.
   /**
    * Helper method to register config observers.
    *

diff --git a/lib/minimap.js b/lib/minimap.js
@@ -710,7 +710,7 @@ export default class Minimap {
    *
    * @return {number} the devicePixelRatio in the Minimap
    */
-  getDevicePixelRatio() {
+  getDevicePixelRatio () {
     return this.getDevicePixelRatioRounding()
       ? Math.floor(devicePixelRatio)
       : devicePixelRatio