fix: inline updateFrontDecorationsLayer

Author: aminya

lib/mixins/canvas-drawer.js

@@ -126,7 +126,7 @@ export default class CanvasDrawer extends Mixin {
     const lineHeight = this.minimap.getLineHeight() * devicePixelRatio
     const charHeight = this.minimap.getCharHeight() * devicePixelRatio
     const charWidth = this.minimap.getCharWidth() * devicePixelRatio
-    const canvasWidth = this.tokensLayer.getSize().width
+    const { width: canvasWidth, height: canvasHeight } = this.tokensLayer.getSize()
     const context = this.tokensLayer.context
     const editor = this.minimap.getTextEditor()
     const editorElement = this.minimap.getTextEditorElement()
@@ -273,12 +273,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
    */
-  updateFrontDecorationsLayer (firstRow, lastRow) {
+  updateFrontDecorationsLayer (firstRow, lastRow, lineHeight, charHeight, charWidth, canvasWidth, canvasHeight, editorElement) {
     const intactRanges = computeIntactRanges(firstRow, lastRow, this.pendingFrontDecorationChanges, this.offscreenFirstRow, this.offscreenLastRow)
 
-    this.redrawRangesOnLayer(this.frontLayer, intactRanges, firstRow, lastRow, this.drawFrontDecorationsForLines)
+    // NOTE: this method is the hot function of Minimap. Do not refactor. The code is inlined delibarately.
+
+    // redrawRangesOnLayer inlined (this.frontLayer(this.frontLayer, intactRanges, firstRow, lastRow, this.drawFrontDecorationsForLines)
+
+    this.frontLayer.clearCanvas()
+
+    if (intactRanges.length === 0) {
+      this.drawFrontDecorationsForLines(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.frontLayer.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.drawFrontDecorationsForLines(currentRow, range.start, currentRow - firstRow, lineHeight, charHeight, charWidth, canvasWidth, canvasHeight, editorElement)
+
+        currentRow = range.end
+      }
+      if (currentRow <= lastRow) {
+        this.drawFrontDecorationsForLines(currentRow, lastRow, currentRow - firstRow, lineHeight, charHeight, charWidth, canvasWidth, canvasHeight, editorElement)
+      }
+    }
+
+    this.frontLayer.resetOffscreenSize()
+    this.frontLayer.copyToOffscreen()
   }
 
   //     ######   #######  ##        #######  ########   ######
@@ -472,17 +512,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
    */
-  drawFrontDecorationsForLines (firstRow, lastRow, offsetRow) {
+  drawFrontDecorationsForLines (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.frontLayer.context,
       canvasWidth,
@@ -493,8 +535,6 @@ export default class CanvasDrawer extends Mixin {
       orders: Main.getPluginsOrder()
     }
 
-    const editorElement = this.minimap.getTextEditorElement()
-
     const drawCustomDecorationLambda = (decoration, data, decorationColor) => drawCustomDecoration(decoration, data, decorationColor, editorElement)
     frontDecorationDispatcher['foreground-custom'] = drawCustomDecorationLambda