Merge pull request #749 from atom-minimap/canvas-drawer-optimizations

Author: aminya

lib/dom-styles-reader.js

@@ -58,7 +58,7 @@ export default class DOMStylesReader {
     for (let i = 0, len = scopes.length; i < len; i++) {
       const scope = scopes[i]
       const node = document.createElement('span')
-      node.className = scope.replace(/\.+/g, ' ')
+      node.className = scope.replace(dotRegexp, ' ')
 
       if (parent != null) { parent.appendChild(node) }
 
@@ -132,6 +132,10 @@ export default class DOMStylesReader {
 //    ##     ## ##       ##       ##        ##       ##    ##  ##    ##
 //    ##     ## ######## ######## ##        ######## ##     ##  ######
 
+const dotRegexp = /\.+/g
+const rgbExtractRegexp = /rgb(a?)\((\d+), (\d+), (\d+)(, (\d+(\.\d+)?))?\)/
+const hueRegexp = /hue-rotate\((\d+)deg\)/
+
 /**
  * Computes the output color of `value` with a rotated hue defined
  * in `filter`.
@@ -142,10 +146,10 @@ export default class DOMStylesReader {
  * @access private
  */
 function rotateHue (value, filter) {
-  const match = value.match(/rgb(a?)\((\d+), (\d+), (\d+)(, (\d+(\.\d+)?))?\)/)
+  const match = value.match(rgbExtractRegexp)
   let [, , r, g, b, , a] = match
 
-  let [, hue] = filter.match(/hue-rotate\((\d+)deg\)/)
+  let [, hue] = filter.match(hueRegexp)
 
   ;[r, g, b, a, hue] = [r, g, b, a, hue].map(Number)
   ;[r, g, b] = rotate(r, g, b, hue)

lib/mixins/canvas-drawer.js

@@ -134,7 +134,7 @@ export default class CanvasDrawer extends Mixin {
     // 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)
+    this.updateTokensLayer(firstRow, lastRow, lineHeight, charHeight, charWidth, canvasWidth, this.tokensLayer.context, editor, editor.getScreenLineCount(), getInvisibleRegExp(editor), getTokenColor, this.ignoreWhitespacesInTokens, this.maxTokensInOneLine)
 
     const decorations = this.minimap.decorationsByTypeThenRows(firstRow, lastRow)
 
@@ -193,7 +193,7 @@ export default class CanvasDrawer extends Mixin {
    * @param {number} maxTokensInOneLine this.maxTokensInOneLine
    * @access private
    */
-  updateTokensLayer (firstRow, lastRow, lineHeight, charHeight, charWidth, canvasWidth, context, editor, getTokenColor, ignoreWhitespacesInTokens, maxTokensInOneLine) {
+  updateTokensLayer (firstRow, lastRow, lineHeight, charHeight, charWidth, canvasWidth, context, editor, editorScreenLineCount, invisibleRegExp, 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.
@@ -208,7 +208,7 @@ export default class CanvasDrawer extends Mixin {
     }
 
     if (intactRanges.length === 0) {
-      drawLines(firstRow, lastRow, 0, lineHeight, charHeight, charWidth, canvasWidth, context, editor, getTokenColor, ignoreWhitespacesInTokens, maxTokensInOneLine)
+      drawLines(firstRow, lastRow, 0, lineHeight, charHeight, charWidth, canvasWidth, context, editor, editorScreenLineCount, invisibleRegExp, getTokenColor, ignoreWhitespacesInTokens, maxTokensInOneLine)
     } else {
       for (let j = 0, len = intactRanges.length; j < len; j++) {
         const intact = intactRanges[j]
@@ -224,12 +224,12 @@ export default class CanvasDrawer extends Mixin {
       for (let i = 0, len = intactRanges.length; i < len; i++) {
         const range = intactRanges[i]
 
-        drawLines(currentRow, range.start, currentRow - firstRow, lineHeight, charHeight, charWidth, canvasWidth, context, editor, getTokenColor, ignoreWhitespacesInTokens, maxTokensInOneLine)
+        drawLines(currentRow, range.start, currentRow - firstRow, lineHeight, charHeight, charWidth, canvasWidth, context, editor, editorScreenLineCount, invisibleRegExp, getTokenColor, ignoreWhitespacesInTokens, maxTokensInOneLine)
 
         currentRow = range.end
       }
       if (currentRow <= lastRow) {
-        drawLines(currentRow, lastRow, currentRow - firstRow, lineHeight, charHeight, charWidth, canvasWidth, context, editor, getTokenColor, ignoreWhitespacesInTokens, maxTokensInOneLine)
+        drawLines(currentRow, lastRow, currentRow - firstRow, lineHeight, charHeight, charWidth, canvasWidth, context, editor, editorScreenLineCount, invisibleRegExp, getTokenColor, ignoreWhitespacesInTokens, maxTokensInOneLine)
       }
     }
 
@@ -401,7 +401,7 @@ export default class CanvasDrawer extends Mixin {
     if (properties.color) { return properties.color }
 
     if (properties.scope) {
-      const scopeString = properties.scope.split(/\s+/)
+      const scopeString = properties.scope.split(whiteSpaceRegexp)
       return this.DOMStylesReader.retrieveStyleFromDom(scopeString, 'background-color', editorElement, true)
     } else {
       return this.getDefaultColor(editorElement)
@@ -605,6 +605,9 @@ export default class CanvasDrawer extends Mixin {
 //    ##     ## ##    ##  ##     ## ##  ##  ##
 //    ########  ##     ## ##     ##  ###  ###
 
+const emptyLineRegexp = /^\s+$/
+const whiteSpaceRegexp = /\s+/
+
 /**
  * Draws a single token on the given context.
  *
@@ -654,13 +657,14 @@ function drawToken (context, text, color, x, y, charWidth, charHeight, ignoreWhi
  * @param  {number} startRow The start row
  * @param  {number} endRow The end row
  * @param {TextEditor} editor
+ * @param {number} editorScreenLineCount
+ * @param {RegExp} invisibleRegExp
  * @param {number} maxTokensInOneLine the maximum number of tokens to render in one line
  * @return {Array<Array>} An array of tokens by line
  * @access private
  */
-function eachTokenForScreenRows (startRow, endRow, editor, maxTokensInOneLine, callback) {
-  const invisibleRegExp = getInvisibleRegExp(editor)
-  endRow = Math.min(endRow, editor.getScreenLineCount())
+function eachTokenForScreenRows (startRow, endRow, editor, editorScreenLineCount, invisibleRegExp, maxTokensInOneLine, callback) {
+  endRow = Math.min(endRow, editorScreenLineCount)
 
   for (let row = startRow; row < endRow; row++) {
     const editorTokensForScreenRow = editor.tokensForScreenRow(row)
@@ -692,19 +696,21 @@ function eachTokenForScreenRows (startRow, endRow, editor, maxTokensInOneLine, c
  * @param {number} canvasWidth  this.tokensLayer.getSize().width
  * @param {CanvasRenderingContext2D} context this.tokensLayer.context
  * @param {TextEditor} editor this.minimap.getTextEditor()
+ * @param {number} editorScreenLineCount
+ * @param {RegExp} invisibleRegExp
  * @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) {
+function drawLines (firstRow, lastRow, offsetRow, lineHeight, charHeight, charWidth, canvasWidth, context, editor, editorScreenLineCount, invisibleRegExp, 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) => {
+  eachTokenForScreenRows(firstRow, lastRow, editor, editorScreenLineCount, invisibleRegExp, maxTokensInOneLine, (line, token) => {
     if (lastLine !== line) {
       x = 0
       y += lineHeight
@@ -713,7 +719,7 @@ function drawLines (firstRow, lastRow, offsetRow, lineHeight, charHeight, charWi
     }
     if (x > canvasWidth) { return }
 
-    if (/^\s+$/.test(token.text)) {
+    if (emptyLineRegexp.test(token.text)) {
       x += token.text.length * charWidth
     } else {
       x = drawToken(