fix: create the DOMStylesReader in CanvasDrawer

That is where most of its methods are used

Author: aminya

lib/minimap-element.js

@@ -5,7 +5,6 @@ import { EventsDelegation, AncestorsMethods } from 'atom-utils-plus'
 import elementResizeDetectorImport from 'element-resize-detector'
 
 import * as Main from './main'
-import DOMStylesReader from './dom-styles-reader'
 import CanvasDrawer from './mixins/canvas-drawer'
 import include from './decorators/include'
 import element from './decorators/element'
@@ -178,11 +177,6 @@ class MinimapElement {
      */
     this.quickSettingsElement = undefined
 
-    /**
-     * This MinimapElement's DOMStylesReader
-     */
-    this.DOMStylesReader = new DOMStylesReader()
-
     /**
      * This MinimapElement's CanvasDrawer
      */
@@ -396,7 +390,7 @@ class MinimapElement {
         and the `change` event has not be triggered in the process.
       */
       atom.styles.onDidAddStyleElement(() => {
-        this.DOMStylesReader.invalidateDOMStylesCache()
+        this.CanvasDrawer.DOMStylesReader.invalidateDOMStylesCache()
         this.requestForcedUpdate()
       }),
 

lib/mixins/canvas-drawer.js

@@ -4,6 +4,7 @@ import { escapeRegExp } from 'underscore-plus'
 
 import * as Main from '../main'
 import CanvasLayer from '../canvas-layer'
+import DOMStylesReader from '../dom-styles-reader'
 
 /**
  * The `CanvasDrawer` mixin is responsible for the rendering of a `Minimap`
@@ -13,10 +14,16 @@ import CanvasLayer from '../canvas-layer'
  * methods  are available on any `MinimapElement` instance.
  */
 export default class CanvasDrawer {
-  constructor() {
+  constructor () {
     // set in setModel of minimapElement
     this.minimap = undefined
+
+    /**
+     * This MinimapElement's DOMStylesReader
+     */
+    this.DOMStylesReader = new DOMStylesReader()
   }
+
   /**
    * Initializes the canvas elements needed to perform the `Minimap` rendering.
    */

spec/minimap-element-spec.js

@@ -213,7 +213,7 @@ describe('MinimapElement', () => {
       describe('when a hue-rotate filter is applied to a rgb color', () => {
         let [additionnalStyleNode] = []
         beforeEach(() => {
-          minimapElement.DOMStylesReader.invalidateDOMStylesCache()
+          minimapElement.CanvasDrawer.DOMStylesReader.invalidateDOMStylesCache()
 
           additionnalStyleNode = document.createElement('style')
           additionnalStyleNode.textContent = `
@@ -232,7 +232,7 @@ describe('MinimapElement', () => {
           })
           runs(() => {
             nextAnimationFrame()
-            expect(minimapElement.DOMStylesReader.retrieveStyleFromDom(['.editor'], 'color'), minimapElement.minimap.getTextEditorElement()).toEqual(`rgb(0, ${0x6d}, ${0x6d})`)
+            expect(minimapElement.CanvasDrawer.DOMStylesReader.retrieveStyleFromDom(['.editor'], 'color'), minimapElement.minimap.getTextEditorElement()).toEqual(`rgb(0, ${0x6d}, ${0x6d})`)
           })
         })
       })
@@ -241,7 +241,7 @@ describe('MinimapElement', () => {
         let [additionnalStyleNode] = []
 
         beforeEach(() => {
-          minimapElement.DOMStylesReader.invalidateDOMStylesCache()
+          minimapElement.CanvasDrawer.DOMStylesReader.invalidateDOMStylesCache()
 
           additionnalStyleNode = document.createElement('style')
           additionnalStyleNode.textContent = `
@@ -260,7 +260,7 @@ describe('MinimapElement', () => {
           })
           runs(() => {
             nextAnimationFrame()
-            expect(minimapElement.DOMStylesReader.retrieveStyleFromDom(['.editor'], 'color'), minimapElement.minimap.getTextEditorElement()).toEqual(`rgba(0, ${0x6d}, ${0x6d}, 0)`)
+            expect(minimapElement.CanvasDrawer.DOMStylesReader.retrieveStyleFromDom(['.editor'], 'color'), minimapElement.minimap.getTextEditorElement()).toEqual(`rgba(0, ${0x6d}, ${0x6d}, 0)`)
           })
         })
       })
@@ -1195,7 +1195,7 @@ describe('MinimapElement', () => {
         runs(() => {
           nextAnimationFrame()
           spyOn(minimapElement, 'requestForcedUpdate').andCallThrough()
-          spyOn(minimapElement.DOMStylesReader, 'invalidateDOMStylesCache').andCallThrough()
+          spyOn(minimapElement.CanvasDrawer.DOMStylesReader, 'invalidateDOMStylesCache').andCallThrough()
 
           const styleNode = document.createElement('style')
           styleNode.textContent = 'body{ color: #233 }'
@@ -1209,7 +1209,7 @@ describe('MinimapElement', () => {
 
       it('forces a refresh with cache invalidation', () => {
         expect(minimapElement.requestForcedUpdate).toHaveBeenCalled()
-        expect(minimapElement.DOMStylesReader.invalidateDOMStylesCache).toHaveBeenCalled()
+        expect(minimapElement.CanvasDrawer.DOMStylesReader.invalidateDOMStylesCache).toHaveBeenCalled()
       })
     })