fix: make CanvasDrawer a normal class

lib/minimap-element.js

@@ -31,7 +31,7 @@ const SPEC_MODE = atom.inSpecMode()
  */
 class MinimapElement {
   static initClass() {
-    include(this, CanvasDrawer, EventsDelegation, AncestorsMethods)
+    include(this, EventsDelegation, AncestorsMethods)
     return element(this, "atom-text-editor-minimap")
   }
 
@@ -146,6 +146,11 @@ class MinimapElement {
      */
     this.quickSettingsElement = undefined
 
+    /**
+     * This MinimapElement's CanvasDrawer
+     */
+    this.CanvasDrawer = new CanvasDrawer()
+
     this.DecorationManagement = new DecorationManagement()
 
     // States
@@ -221,15 +226,15 @@ class MinimapElement {
       }),
 
       atom.config.observe("minimap.textOpacity", (textOpacity) => {
-        this.textOpacity = textOpacity
+        this.CanvasDrawer.textOpacity = textOpacity
 
         if (this.attached) {
           this.requestForcedUpdate()
         }
       }),
 
       atom.config.observe("minimap.displayCodeHighlights", (displayCodeHighlights) => {
-        this.displayCodeHighlights = displayCodeHighlights
+        this.CanvasDrawer.displayCodeHighlights = displayCodeHighlights
 
         if (this.attached) {
           this.requestForcedUpdate()
@@ -241,9 +246,9 @@ class MinimapElement {
 
         if (this.attached) {
           if (!this.smoothScrolling) {
-            this.backLayer.canvas.style.cssText = ""
-            this.tokensLayer.canvas.style.cssText = ""
-            this.frontLayer.canvas.style.cssText = ""
+            this.CanvasDrawer.backLayer.canvas.style.cssText = ""
+            this.CanvasDrawer.tokensLayer.canvas.style.cssText = ""
+            this.CanvasDrawer.frontLayer.canvas.style.cssText = ""
           } else {
             this.requestUpdate()
           }
@@ -291,7 +296,7 @@ class MinimapElement {
       }),
 
       atom.config.observe("minimap.ignoreWhitespacesInTokens", (ignoreWhitespacesInTokens) => {
-        this.ignoreWhitespacesInTokens = ignoreWhitespacesInTokens
+        this.CanvasDrawer.ignoreWhitespacesInTokens = ignoreWhitespacesInTokens
 
         if (this.attached) {
           this.requestForcedUpdate()
@@ -493,9 +498,9 @@ class MinimapElement {
    * @access private
    */
   initializeContent() {
-    this.initializeCanvas()
+    this.CanvasDrawer.initializeCanvas()
 
-    this.attachCanvases(this)
+    this.CanvasDrawer.attachCanvases(this)
 
     this.createVisibleArea()
     this.createControls()
@@ -514,7 +519,7 @@ class MinimapElement {
       ),
 
       this.subscribeTo(
-        this.getFrontCanvas(),
+        this.CanvasDrawer.getFrontCanvas(),
         {
           mousedown: (e) => {
             this.canvasPressed(extractMouseEventData(e))
@@ -663,7 +668,7 @@ class MinimapElement {
             this.quickSettingsElement = null
           })
 
-          const { top, left, right } = this.getFrontCanvas().getBoundingClientRect()
+          const { top, left, right } = this.CanvasDrawer.getFrontCanvas().getBoundingClientRect()
           this.quickSettingsElement.style.top = `${top}px`
           this.quickSettingsElement.attach()
 
@@ -726,6 +731,8 @@ class MinimapElement {
    */
   setModel(minimap) {
     this.minimap = minimap
+    // TODO: go direct
+    this.CanvasDrawer.minimap = minimap
 
     // set minimapElement for Minimap
     this.minimap.minimapElement = this
@@ -757,16 +764,16 @@ class MinimapElement {
       }),
 
       this.minimap.onDidChange((change) => {
-        this.pendingChanges.push(change)
+        this.CanvasDrawer.pendingChanges.push(change)
         this.requestUpdate()
       }),
 
       this.DecorationManagement.onDidChangeDecorationRange((change) => {
         const { type } = change
         if (type === "line" || type === "highlight-under" || type === "background-custom") {
-          this.pendingBackDecorationChanges.push(change)
+          this.CanvasDrawer.pendingBackDecorationChanges.push(change)
         } else {
-          this.pendingFrontDecorationChanges.push(change)
+          this.CanvasDrawer.pendingFrontDecorationChanges.push(change)
         }
         this.requestUpdate()
       }),
@@ -856,7 +863,7 @@ class MinimapElement {
     }
     const minimap = this.minimap
     minimap.enableCache()
-    const canvas = this.getFrontCanvas()
+    const canvas = this.CanvasDrawer.getFrontCanvas()
 
     const devicePixelRatio = this.minimap.getDevicePixelRatio()
     const visibleAreaLeft = minimap.getTextEditorScaledScrollLeft()
@@ -894,25 +901,25 @@ class MinimapElement {
 
     if (this.smoothScrolling) {
       if (SPEC_MODE) {
-        applyStyles(this.backLayer.canvas, { top: `${canvasTop}px` })
-        applyStyles(this.tokensLayer.canvas, { top: `${canvasTop}px` })
-        applyStyles(this.frontLayer.canvas, { top: `${canvasTop}px` })
+        applyStyles(this.CanvasDrawer.backLayer.canvas, { top: `${canvasTop}px` })
+        applyStyles(this.CanvasDrawer.tokensLayer.canvas, { top: `${canvasTop}px` })
+        applyStyles(this.CanvasDrawer.frontLayer.canvas, { top: `${canvasTop}px` })
       } else {
         let canvasTransform = makeTranslate(0, canvasTop, this.useHardwareAcceleration)
         if (devicePixelRatio !== 1) {
           const scale = 1 / devicePixelRatio
           canvasTransform += ` ${makeScale(scale, scale, this.useHardwareAcceleration)}`
         }
-        applyStyles(this.backLayer.canvas, { transform: canvasTransform })
-        applyStyles(this.tokensLayer.canvas, { transform: canvasTransform })
-        applyStyles(this.frontLayer.canvas, { transform: canvasTransform })
+        applyStyles(this.CanvasDrawer.backLayer.canvas, { transform: canvasTransform })
+        applyStyles(this.CanvasDrawer.tokensLayer.canvas, { transform: canvasTransform })
+        applyStyles(this.CanvasDrawer.frontLayer.canvas, { transform: canvasTransform })
       }
     } else {
       const scale = 1 / devicePixelRatio
       const canvasTransform = makeScale(scale, scale, this.useHardwareAcceleration)
-      applyStyles(this.backLayer.canvas, { transform: canvasTransform })
-      applyStyles(this.tokensLayer.canvas, { transform: canvasTransform })
-      applyStyles(this.frontLayer.canvas, { transform: canvasTransform })
+      applyStyles(this.CanvasDrawer.backLayer.canvas, { transform: canvasTransform })
+      applyStyles(this.CanvasDrawer.tokensLayer.canvas, { transform: canvasTransform })
+      applyStyles(this.CanvasDrawer.frontLayer.canvas, { transform: canvasTransform })
     }
 
     if (this.minimapScrollIndicator && !this.scrollIndicator && minimap.canScroll()) {
@@ -945,7 +952,7 @@ class MinimapElement {
       this.updateCanvasesSize()
     }
 
-    this.updateCanvas()
+    this.CanvasDrawer.updateCanvas()
     minimap.clearCache()
   }
 
@@ -956,7 +963,7 @@ class MinimapElement {
    *                                        highlights or not
    */
   setDisplayCodeHighlights(displayCodeHighlights) {
-    this.displayCodeHighlights = displayCodeHighlights
+    this.CanvasDrawer.displayCodeHighlights = displayCodeHighlights
     if (this.attached) {
       this.requestForcedUpdate()
     }
@@ -1076,14 +1083,14 @@ class MinimapElement {
       this.absoluteMode && this.adjustAbsoluteModeHeight
         ? Math.min(this.minimap.getHeight(), maxCanvasHeight)
         : maxCanvasHeight
-    const canvas = this.getFrontCanvas()
+    const canvas = this.CanvasDrawer.getFrontCanvas()
 
     if (canvasWidth == null) {
       canvasWidth = canvas.width / devicePixelRatio
     }
 
     if (canvasWidth !== canvas.width || newHeight !== canvas.height) {
-      this.setCanvasesSize(canvasWidth * devicePixelRatio, newHeight * devicePixelRatio)
+      this.CanvasDrawer.setCanvasesSize(canvasWidth * devicePixelRatio, newHeight * devicePixelRatio)
       if (this.absoluteMode && this.adjustAbsoluteModeHeight) {
         this.offscreenFirstRow = null
         this.offscreenLastRow = null

lib/mixins/canvas-drawer.js

@@ -1,7 +1,6 @@
 "use strict"
 
 import { escapeRegExp } from "../deps/underscore-plus"
-import Mixin from "mixto"
 
 import * as Main from "../main"
 import { domStylesReader } from "../main"
@@ -18,16 +17,25 @@ let thisSpec
  * This mixin is injected in the `MinimapElement` prototype, so all these
  * methods  are available on any `MinimapElement` instance.
  */
-export default class CanvasDrawer extends Mixin {
+export default class CanvasDrawer {
+  constructor() {
+    // set in setModel of minimapElement
+    this.minimap = undefined
+
+    // set by minimapElement
+    this.displayCodeHighlights = atom.config.get("minimap.displayCodeHighlights")
+    this.ignoreWhitespacesInTokens = atom.config.get("minimap.ignoreWhitespacesInTokens")
+    this.textOpacity = atom.config.get("minimap.textOpacity")
+  }
+
   /**
    * Initializes the canvas elements needed to perform the `Minimap` rendering.
    */
   initializeCanvas() {
+    // NOTE "Test Only Code": this code is removed in production code
     if (SPEC_MODE) {
       // class methods only used for spying the calls
-      this.drawLines = (firstLine, lastLine) => {
-        console.log({ firstLine, lastLine })
-      }
+      this.drawLines = (firstLine, lastLine) => firstLine + lastLine
       this.drawLineDecoration = drawLineDecoration
       this.drawGutterDecoration = drawGutterDecoration
       this.drawHighlightDecoration = drawHighlightDecoration
@@ -163,7 +171,7 @@ export default class CanvasDrawer extends Mixin {
       this.drawLines(firstRow, lastRow)
     }
 
-    const decorations = this.DecorationManagement.decorationsByTypeThenRows(firstRow, lastRow)
+    const decorations = this.minimap.getDecorationManagement().decorationsByTypeThenRows(firstRow, lastRow)
 
     const renderData = {
       context: this.backLayer.context,