fix: inline updateBackDecorationsLayer

Author: aminya

lib/mixins/canvas-drawer.js

@@ -135,8 +135,8 @@ export default class CanvasDrawer extends Mixin {
     const maxTokensInOneLine = this.maxTokensInOneLine
 
     this.updateTokensLayer(firstRow, lastRow, lineHeight, charHeight, charWidth, canvasWidth, context, editor, editorElement, displayCodeHighlights, ignoreWhitespacesInTokens, maxTokensInOneLine)
-    this.updateBackDecorationsLayer(firstRow, lastRow)
-    this.updateFrontDecorationsLayer(firstRow, lastRow)
+    this.updateBackDecorationsLayer(firstRow, lastRow, lineHeight, charHeight, charWidth, canvasWidth, canvasHeight, editorElement)
+    this.updateFrontDecorationsLayer(firstRow, lastRow, lineHeight, charHeight, charWidth, canvasWidth, canvasHeight, editorElement)
 
     this.pendingChanges = []
     this.pendingBackDecorationChanges = []
@@ -161,7 +161,7 @@ export default class CanvasDrawer extends Mixin {
    *
    * @param  {number} firstRow firstRow the first row of the range to update
    * @param  {number} lastRow lastRow the last row of the range to update
-
+   *
    * @param {number} lineHeight  this.minimap.getLineHeight() * devicePixelRatio
    * @param {number} charHeight  this.minimap.getCharHeight() * devicePixelRatio
    * @param {number} charWidth  this.minimap.getCharWidth() * devicePixelRatio
@@ -219,12 +219,52 @@ export default class CanvasDrawer extends Mixin {
    *
    * @param  {number} firstRow firstRow the first row of the range to update
    * @param  {number} lastRow lastRow the last row of the range to update
+   *
+   * @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 {number} canvasHeight  this.tokensLayer.getSize().height
+   * @param {TextEditorElement} editorElement  this.minimap.getTextEditorElement()
    * @access private
    */
-  updateBackDecorationsLayer (firstRow, lastRow) {
+  updateBackDecorationsLayer (firstRow, lastRow, lineHeight, charHeight, charWidth, canvasWidth, canvasHeight, editorElement) {
     const intactRanges = computeIntactRanges(firstRow, lastRow, this.pendingBackDecorationChanges, this.offscreenFirstRow, this.offscreenLastRow)
 
-    this.redrawRangesOnLayer(this.backLayer, intactRanges, firstRow, lastRow, this.drawBackDecorationsForLines)
+    // NOTE: this method is the hot function of Minimap. Do not refactor. The code is inlined delibarately.
+
+    // redrawRangesOnLayer inlined (this.redrawRangesOnLayer(this.backLayer, intactRanges, firstRow, lastRow, this.drawBackDecorationsForLines)
+
+    this.backLayer.clearCanvas()
+
+    if (intactRanges.length === 0) {
+      this.drawBackDecorationsForLines(firstRow, lastRow, 0, lineHeight, charHeight, charWidth, canvasWidth, canvasHeight, editorElement)
+    } else {
+      for (let j = 0, len = intactRanges.length; j < len; j++) {
+        const intact = intactRanges[j]
+
+        this.backLayer.copyPartFromOffscreen(
+          intact.offscreenRow * lineHeight,
+          (intact.start - firstRow) * lineHeight,
+          (intact.end - intact.start) * lineHeight
+        )
+      }
+      // drawLinesForRanges inlined
+      let currentRow = firstRow
+      for (let i = 0, len = intactRanges.length; i < len; i++) {
+        const range = intactRanges[i]
+
+        this.drawBackDecorationsForLines(currentRow, range.start, currentRow - firstRow, lineHeight, charHeight, charWidth, canvasWidth, canvasHeight, editorElement)
+
+        currentRow = range.end
+      }
+      if (currentRow <= lastRow) {
+        this.drawBackDecorationsForLines(currentRow, lastRow, currentRow - firstRow, lineHeight, charHeight, charWidth, canvasWidth, canvasHeight, editorElement)
+      }
+    }
+
+    this.backLayer.resetOffscreenSize()
+    this.backLayer.copyToOffscreen()
   }
 
   /**
@@ -385,17 +425,19 @@ export default class CanvasDrawer extends Mixin {
    * @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 {number} canvasHeight  this.tokensLayer.getSize().height
+   * @param {TextEditorElement} editorElement  this.minimap.getTextEditorElement()
    * @access private
    */
-  drawBackDecorationsForLines (firstRow, lastRow, offsetRow) {
+  drawBackDecorationsForLines (firstRow, lastRow, offsetRow, lineHeight, charHeight, charWidth, canvasWidth, canvasHeight, editorElement) {
     if (firstRow > lastRow) { return }
 
-    const devicePixelRatio = this.minimap.getDevicePixelRatio()
-    const lineHeight = this.minimap.getLineHeight() * devicePixelRatio
-    const charHeight = this.minimap.getCharHeight() * devicePixelRatio
-    const charWidth = this.minimap.getCharWidth() * devicePixelRatio
     const decorations = this.minimap.decorationsByTypeThenRows(firstRow, lastRow)
-    const { width: canvasWidth, height: canvasHeight } = this.tokensLayer.getSize()
     const renderData = {
       context: this.backLayer.context,
       canvasWidth,
@@ -405,7 +447,6 @@ export default class CanvasDrawer extends Mixin {
       charHeight,
       orders: Main.getPluginsOrder()
     }
-    const editorElement = this.minimap.getTextEditorElement()
 
     const drawCustomDecorationLambda = (decoration, data, decorationColor) => drawCustomDecoration(decoration, data, decorationColor, editorElement)
     backgroundDecorationDispatcher['background-custom'] = drawCustomDecorationLambda