Merge pull request #748 from atom-minimap/inline-updateTokensLayer

Author: aminya

lib/mixins/canvas-drawer.js

@@ -23,6 +23,7 @@ export default class CanvasDrawer extends Mixin {
   initializeCanvas () {
     if (SPEC_MODE) {
       // class methods only used for spying the calls
+      this.drawLines = (firstLine, lastLine) => { console.log({ firstLine, lastLine }) }
       this.drawLineDecoration = drawLineDecoration
       this.drawGutterDecoration = drawGutterDecoration
       this.drawHighlightDecoration = drawHighlightDecoration
@@ -130,7 +131,10 @@ export default class CanvasDrawer extends Mixin {
     const editor = this.minimap.getTextEditor()
     const editorElement = this.minimap.getTextEditorElement()
 
-    this.updateTokensLayer(firstRow, lastRow, lineHeight, charHeight, charWidth, canvasWidth, this.tokensLayer.context, editor, editorElement, this.displayCodeHighlights, this.ignoreWhitespacesInTokens, this.maxTokensInOneLine)
+    // TODO avoid closure: https://stackoverflow.com/a/46256398/7910299
+    const getTokenColor = this.displayCodeHighlights ? (t) => this.getTokenColor(t, editorElement) : () => this.getDefaultColor(editorElement)
+
+    this.updateTokensLayer(firstRow, lastRow, lineHeight, charHeight, charWidth, canvasWidth, this.tokensLayer.context, editor, getTokenColor, this.ignoreWhitespacesInTokens, this.maxTokensInOneLine)
 
     const decorations = this.minimap.decorationsByTypeThenRows(firstRow, lastRow)
 
@@ -144,6 +148,10 @@ export default class CanvasDrawer extends Mixin {
       orders: Main.getPluginsOrder()
     }
 
+    const drawCustomDecorationLambda = (decoration, data, decorationColor) => drawCustomDecoration(decoration, data, decorationColor, editorElement)
+    backgroundDecorationDispatcher['background-custom'] = drawCustomDecorationLambda
+    frontDecorationDispatcher['foreground-custom'] = drawCustomDecorationLambda
+
     this.updateBackDecorationsLayer(firstRow, lastRow, renderData, lineHeight, editorElement, decorations)
 
     renderData.context = this.frontLayer.context
@@ -180,23 +188,27 @@ export default class CanvasDrawer extends Mixin {
    * @param {number} canvasWidth  this.tokensLayer.getSize().width
    * @param {CanvasRenderingContext2D} context this.tokensLayer.context
    * @param {TextEditor} editor this.minimap.getTextEditor()
-   * @param {TextEditorElement} editorElement  this.minimap.getTextEditorElement()
-   * @param {boolean} displayCodeHighlights this.displayCodeHighlights
+   * @param {(t: Token) => string} getTokenColor
    * @param {boolean} ignoreWhitespacesInTokens this.ignoreWhitespacesInTokens
    * @param {number} maxTokensInOneLine this.maxTokensInOneLine
    * @access private
    */
-  updateTokensLayer (firstRow, lastRow, lineHeight, charHeight, charWidth, canvasWidth, context, editor, editorElement, displayCodeHighlights, ignoreWhitespacesInTokens, maxTokensInOneLine) {
+  updateTokensLayer (firstRow, lastRow, lineHeight, charHeight, charWidth, canvasWidth, context, editor, getTokenColor, ignoreWhitespacesInTokens, maxTokensInOneLine) {
     const intactRanges = computeIntactRanges(firstRow, lastRow, this.pendingChanges, this.offscreenFirstRow, this.offscreenLastRow)
 
     // NOTE: this method is the hot function of Minimap. Do not refactor. The code is inlined delibarately.
 
-    // redrawRangesOnLayer inlined (this.redrawRangesOnLayer(this.tokensLayer, intactRanges, firstRow, lastRow, this.drawLines))
+    // redrawRangesOnLayer inlined (this.redrawRangesOnLayer(this.tokensLayer, intactRanges, firstRow, lastRow, drawLines))
 
     this.tokensLayer.clearCanvas()
 
+    if (SPEC_MODE) {
+      // call the spy
+      this.drawLines(firstRow, lastRow)
+    }
+
     if (intactRanges.length === 0) {
-      this.drawLines(firstRow, lastRow, 0, lineHeight, charHeight, charWidth, canvasWidth, context, editor, editorElement, displayCodeHighlights, ignoreWhitespacesInTokens, maxTokensInOneLine)
+      drawLines(firstRow, lastRow, 0, lineHeight, charHeight, charWidth, canvasWidth, context, editor, getTokenColor, ignoreWhitespacesInTokens, maxTokensInOneLine)
     } else {
       for (let j = 0, len = intactRanges.length; j < len; j++) {
         const intact = intactRanges[j]
@@ -212,12 +224,12 @@ export default class CanvasDrawer extends Mixin {
       for (let i = 0, len = intactRanges.length; i < len; i++) {
         const range = intactRanges[i]
 
-        this.drawLines(currentRow, range.start, currentRow - firstRow, lineHeight, charHeight, charWidth, canvasWidth, context, editor, editorElement, displayCodeHighlights, ignoreWhitespacesInTokens, maxTokensInOneLine)
+        drawLines(currentRow, range.start, currentRow - firstRow, lineHeight, charHeight, charWidth, canvasWidth, context, editor, getTokenColor, ignoreWhitespacesInTokens, maxTokensInOneLine)
 
         currentRow = range.end
       }
       if (currentRow <= lastRow) {
-        this.drawLines(currentRow, lastRow, currentRow - firstRow, lineHeight, charHeight, charWidth, canvasWidth, context, editor, editorElement, displayCodeHighlights, ignoreWhitespacesInTokens, maxTokensInOneLine)
+        drawLines(currentRow, lastRow, currentRow - firstRow, lineHeight, charHeight, charWidth, canvasWidth, context, editor, getTokenColor, ignoreWhitespacesInTokens, maxTokensInOneLine)
       }
     }
 
@@ -433,7 +445,7 @@ export default class CanvasDrawer extends Mixin {
   //         (intact.end - intact.start) * lineHeight
   //       )
   //     }
-  //     this.drawLinesForRanges(method, intactRanges, firstRow, lastRow)
+  //     drawLinesForRanges(method, intactRanges, firstRow, lastRow)
   //   }
   //
   //   layer.resetOffscreenSize()
@@ -485,9 +497,6 @@ export default class CanvasDrawer extends Mixin {
   drawBackDecorationsForLines (firstRow, lastRow, offsetRow, renderData, lineHeight, editorElement, decorations) {
     if (firstRow > lastRow) { return }
 
-    const drawCustomDecorationLambda = (decoration, data, decorationColor) => drawCustomDecoration(decoration, data, decorationColor, editorElement)
-    backgroundDecorationDispatcher['background-custom'] = drawCustomDecorationLambda
-
     for (let screenRow = firstRow; screenRow <= lastRow; screenRow++) {
       renderData.row = offsetRow + (screenRow - firstRow)
       renderData.yRow = renderData.row * lineHeight
@@ -519,9 +528,6 @@ export default class CanvasDrawer extends Mixin {
   drawFrontDecorationsForLines (firstRow, lastRow, offsetRow, renderData, lineHeight, editorElement, decorations) {
     if (firstRow > lastRow) { return }
 
-    const drawCustomDecorationLambda = (decoration, data, decorationColor) => drawCustomDecoration(decoration, data, decorationColor, editorElement)
-    frontDecorationDispatcher['foreground-custom'] = drawCustomDecorationLambda
-
     for (let screenRow = firstRow; screenRow <= lastRow; screenRow++) {
       renderData.row = offsetRow + (screenRow - firstRow)
       renderData.yRow = renderData.row * lineHeight
@@ -533,59 +539,6 @@ export default class CanvasDrawer extends Mixin {
     renderData.context.fill()
   }
 
-  /**
-   * Draws lines on the corresponding layer.
-   *
-   * The lines range to draw is specified by the `firstRow` and `lastRow`
-   * parameters.
-   *
-   * @param  {number} firstRow the first row to render
-   * @param  {number} lastRow the last row to render
-   * @param  {number} offsetRow the relative offset to apply to rows when
-   *                            rendering them
-   * @param {number} lineHeight  this.minimap.getLineHeight() * devicePixelRatio
-   * @param {number} charHeight  this.minimap.getCharHeight() * devicePixelRatio
-   * @param {number} charWidth  this.minimap.getCharWidth() * devicePixelRatio
-   * @param {number} canvasWidth  this.tokensLayer.getSize().width
-   * @param {CanvasRenderingContext2D} context this.tokensLayer.context
-   * @param {TextEditor} editor this.minimap.getTextEditor()
-   * @param {TextEditorElement} editorElement  this.minimap.getTextEditorElement()
-   * @param {boolean} displayCodeHighlights this.displayCodeHighlights
-   * @param {boolean} ignoreWhitespacesInTokens this.ignoreWhitespacesInTokens
-   * @param {number} maxTokensInOneLine this.maxTokensInOneLine
-   * @access private
-   */
-  drawLines (firstRow, lastRow, offsetRow, lineHeight, charHeight, charWidth, canvasWidth, context, editor, editorElement, displayCodeHighlights, ignoreWhitespacesInTokens, maxTokensInOneLine) {
-    // NOTE: this method is the hot function of Minimap. Do not refactor. The code is inlined delibarately.
-
-    if (firstRow > lastRow) { return }
-
-    let lastLine, x
-    let y = (offsetRow * lineHeight) - lineHeight
-    eachTokenForScreenRows(firstRow, lastRow, editor, maxTokensInOneLine, (line, token) => {
-      if (lastLine !== line) {
-        x = 0
-        y += lineHeight
-        lastLine = line
-        context.clearRect(x, y, canvasWidth, lineHeight)
-      }
-      if (x > canvasWidth) { return }
-
-      if (/^\s+$/.test(token.text)) {
-        x += token.text.length * charWidth
-      } else {
-        const color = displayCodeHighlights
-          ? this.getTokenColor(token, editorElement)
-          : this.getDefaultColor(editorElement)
-
-        x = drawToken(
-          context, token.text, color, x, y, charWidth, charHeight, ignoreWhitespacesInTokens
-        )
-      }
-    })
-    context.fill()
-  }
-
   /**
    * Draws the specified decorations for the current `screenRow`.
    *
@@ -723,6 +676,54 @@ function eachTokenForScreenRows (startRow, endRow, editor, maxTokensInOneLine, c
   }
 }
 
+/**
+ * Draws lines on the corresponding layer.
+ *
+ * The lines range to draw is specified by the `firstRow` and `lastRow`
+ * parameters.
+ *
+ * @param  {number} firstRow the first row to render
+ * @param  {number} lastRow the last row to render
+ * @param  {number} offsetRow the relative offset to apply to rows when
+ *                            rendering them
+ * @param {number} lineHeight  this.minimap.getLineHeight() * devicePixelRatio
+ * @param {number} charHeight  this.minimap.getCharHeight() * devicePixelRatio
+ * @param {number} charWidth  this.minimap.getCharWidth() * devicePixelRatio
+ * @param {number} canvasWidth  this.tokensLayer.getSize().width
+ * @param {CanvasRenderingContext2D} context this.tokensLayer.context
+ * @param {TextEditor} editor this.minimap.getTextEditor()
+ * @param {(t: Token) => string} getTokenColor
+ * @param {boolean} ignoreWhitespacesInTokens this.ignoreWhitespacesInTokens
+ * @param {number} maxTokensInOneLine this.maxTokensInOneLine
+ * @access private
+ */
+function drawLines (firstRow, lastRow, offsetRow, lineHeight, charHeight, charWidth, canvasWidth, context, editor, getTokenColor, ignoreWhitespacesInTokens, maxTokensInOneLine) {
+  // NOTE: this method is the hot function of Minimap. Do not refactor. The code is inlined delibarately.
+
+  if (firstRow > lastRow) { return }
+
+  let lastLine, x
+  let y = (offsetRow * lineHeight) - lineHeight
+  eachTokenForScreenRows(firstRow, lastRow, editor, maxTokensInOneLine, (line, token) => {
+    if (lastLine !== line) {
+      x = 0
+      y += lineHeight
+      lastLine = line
+      context.clearRect(x, y, canvasWidth, lineHeight)
+    }
+    if (x > canvasWidth) { return }
+
+    if (/^\s+$/.test(token.text)) {
+      x += token.text.length * charWidth
+    } else {
+      x = drawToken(
+        context, token.text, getTokenColor(token), x, y, charWidth, charHeight, ignoreWhitespacesInTokens
+      )
+    }
+  })
+  context.fill()
+}
+
 /**
  * Returns the regexp to replace invisibles substitution characters
  * in editor lines.
@@ -747,13 +748,21 @@ function getInvisibleRegExp (editor) {
   }
 }
 
-// dispatchers for decoration drawing (custom decoration drawer added dynamically)
-
+/**
+ * dispatchers for decoration drawing (custom decoration drawer added dynamically)
+ * @param {Object} backgroundDecorationDispatcher an object with the type to render as key and the
+ *                        render method as value
+*/
 const backgroundDecorationDispatcher = {
   line: drawLineDecoration,
   'highlight-under': drawHighlightDecoration
 }
 
+/**
+ * dispatchers for decoration drawing (custom decoration drawer added dynamically)
+ * @param {Object} frontDecorationDispatcher an object with the type to render as key and the
+ *                        render method as value
+*/
 const frontDecorationDispatcher = {
   gutter: drawGutterDecoration,
   'highlight-over': drawHighlightDecoration,

package.json

@@ -16,7 +16,7 @@
     "build": "cross-env NODE_ENV=production parcel build --target main lib/main.js",
     "build-commit": "npm run clean && build-commit -o dist",
     "esdoc": "esdoc -c esdoc.json",
-    "test": "cross-env NODE_ENV=test atom --test spec",
+    "test": "atom --test spec",
     "bump": "ncu -u",
     "prepare": "npm run build"
   },

spec/canvas-layer-spec.js

@@ -1,4 +1,5 @@
 'use strict'
+process.env.NODE_ENV = 'test'
 
 const CanvasLayer = require('../lib/canvas-layer')
 

spec/minimap-element-spec.js

@@ -1,4 +1,5 @@
 'use strict'
+process.env.NODE_ENV = 'test'
 
 const fs = require('fs-plus')
 const Main = require('../dist/main')

spec/minimap-main-spec.js

@@ -1,4 +1,5 @@
 'use strict'
+process.env.NODE_ENV = 'test'
 
 require('./helpers/workspace')
 const { Minimap } = require('../dist/main')

spec/minimap-spec.js

@@ -1,4 +1,5 @@
 'use strict'
+process.env.NODE_ENV = 'test'
 
 require('./helpers/workspace')