Merge pull request #743 from atom-minimap/canvas-drawer

Author: aminya

lib/mixins/decoration-management.js renamed to lib/decoration-management.js

@@ -3,7 +3,7 @@
 import { Emitter } from 'atom'
 import { escapeRegExp } from 'underscore-plus'
 import path from 'path'
-import Decoration from '../decoration'
+import Decoration from './decoration'
 
 /**
  * The mixin that provides the decorations API to the minimap editor

lib/mixins/dom-styles-reader.js renamed to lib/dom-styles-reader.js

@@ -1,13 +1,26 @@
 'use strict'
 
-import Mixin from 'mixto'
-
 /**
- * This mixin is used by the `CanvasDrawer` in `MinimapElement` to
+ * This class is used by the `CanvasDrawer` in `MinimapElement` to
  * read the styles informations from the DOM to use when rendering
  * the `Minimap`.
  */
-export default class DOMStylesReader extends Mixin {
+export default class DOMStylesReader {
+  constructor () {
+    /**
+     * The cache object
+     * @access private
+     */
+    this.domStylesCache = new Map()
+
+    /**
+     * Set to true once tokenized
+     * @access private
+     * unused
+     */
+    // this.hasTokenizedOnce = false
+  }
+
   /**
    * Returns the computed values for the given property and scope in the DOM.
    *
@@ -18,23 +31,27 @@ export default class DOMStylesReader extends Mixin {
    * @param  {Array<string>} scopes a list of classes reprensenting the scope
    *                                to build
    * @param  {string} property the name of the style property to compute
+   * @param  {Node} targetNode
    * @param  {boolean} [cache=true] whether to cache the computed value or not
    * @return {string} the computed property's value
+   * used in CanvasDrawer
    */
-  retrieveStyleFromDom (scopes, property, cache = true) {
-    this.ensureCache()
-
+  retrieveStyleFromDom (scopes, property, targetNode, cache = true) {
     const key = scopes.join(' ')
-    let cachedData = this.constructor.domStylesCache[key]
+    let cachedData = this.domStylesCache.get(key)
 
-    if (cache && (cachedData ? cachedData[property] : undefined) != null) {
-      return cachedData[property]
+    if (cache && cachedData !== undefined) {
+      const value = cachedData[property]
+      if (value != null) {
+        return value
+      }
     }
 
-    this.ensureDummyNodeExistence()
+    this.ensureDummyNodeExistence(targetNode)
 
-    if (!cachedData) {
-      this.constructor.domStylesCache[key] = cachedData = {}
+    if (cachedData === undefined) {
+      cachedData = {}
+      this.domStylesCache.set(key, cachedData)
     }
 
     let parent = this.dummyNode
@@ -56,7 +73,10 @@ export default class DOMStylesReader extends Mixin {
       value = rotateHue(value, filter)
     }
 
-    if (value !== '') { cachedData[property] = value }
+    if (value !== '') {
+      cachedData[property] = value
+      this.domStylesCache.set(key, cachedData)
+    }
 
     this.dummyNode.innerHTML = ''
     return value
@@ -65,10 +85,11 @@ export default class DOMStylesReader extends Mixin {
   /**
    * Creates a DOM node container for all the operations that need to read
    * styles properties from DOM.
+   * @param {Node} targetNode
    *
    * @access private
    */
-  ensureDummyNodeExistence () {
+  ensureDummyNodeExistence (targetNode) {
     if (this.dummyNode == null) {
       /**
        * @access private
@@ -77,38 +98,30 @@ export default class DOMStylesReader extends Mixin {
       this.dummyNode.style.visibility = 'hidden'
     }
 
-    this.getTextEditorElement().appendChild(this.dummyNode)
-  }
-
-  /**
-   * Ensures the presence of the cache object in the class that received
-   * this mixin.
-   *
-   * @access private
-   */
-  ensureCache () {
-    if (!this.constructor.domStylesCache) {
-      this.constructor.domStylesCache = {}
-    }
+    targetNode.appendChild(this.dummyNode)
   }
 
   /**
    * Invalidates the cache by emptying the cache object.
+   * used in MinimapElement
    */
   invalidateDOMStylesCache () {
-    this.constructor.domStylesCache = {}
+    this.domStylesCache.clear()
   }
 
   /**
    * Invalidates the cache only for the first tokenization event.
    *
    * @access private
+   * unused
    */
+  /*
   invalidateIfFirstTokenization () {
-    if (this.constructor.hasTokenizedOnce) { return }
+    if (this.hasTokenizedOnce) { return }
     this.invalidateDOMStylesCache()
-    this.constructor.hasTokenizedOnce = true
+    this.hasTokenizedOnce = true
   }
+  */
 }
 
 //    ##     ## ######## ##       ########  ######## ########   ######

lib/minimap-element.js

@@ -5,7 +5,7 @@ import { EventsDelegation, AncestorsMethods } from 'atom-utils-plus'
 import elementResizeDetectorImport from 'element-resize-detector'
 
 import * as Main from './main'
-import DOMStylesReader from './mixins/dom-styles-reader'
+import DOMStylesReader from './dom-styles-reader'
 import CanvasDrawer from './mixins/canvas-drawer'
 import include from './decorators/include'
 import element from './decorators/element'
@@ -59,7 +59,7 @@ const SPEC_MODE = atom.inSpecMode()
  */
 class MinimapElement {
   static initClass () {
-    include(this, DOMStylesReader, CanvasDrawer, EventsDelegation, AncestorsMethods)
+    include(this, CanvasDrawer, EventsDelegation, AncestorsMethods)
     return element(this, 'atom-text-editor-minimap')
   }
 
@@ -181,6 +181,11 @@ class MinimapElement {
      */
     this.quickSettingsElement = undefined
 
+    /**
+     * This MinimapElement's DOMStylesReader
+     */
+    this.DOMStylesReader = new DOMStylesReader()
+
     // States
 
     /**
@@ -389,7 +394,7 @@ class MinimapElement {
         and the `change` event has not be triggered in the process.
       */
       atom.styles.onDidAddStyleElement(() => {
-        this.invalidateDOMStylesCache()
+        this.DOMStylesReader.invalidateDOMStylesCache()
         this.requestForcedUpdate()
       }),
 

lib/minimap.js

@@ -1,7 +1,7 @@
 'use strict'
 
 import include from './decorators/include'
-import DecorationManagement from './mixins/decoration-management'
+import DecorationManagement from './decoration-management'
 
 import { Emitter, CompositeDisposable } from 'atom'
 import StableAdapter from './adapters/stable-adapter'

lib/mixins/canvas-drawer.js

@@ -191,7 +191,7 @@ export default class CanvasDrawer extends Mixin {
    * @return {string} a CSS color
    */
   getDefaultColor () {
-    const color = this.retrieveStyleFromDom(['.editor'], 'color', true)
+    const color = this.DOMStylesReader.retrieveStyleFromDom(['.editor'], 'color', this.getTextEditorElement(), true)
     return transparentize(color, this.getTextOpacity())
   }
 
@@ -206,7 +206,7 @@ export default class CanvasDrawer extends Mixin {
    */
   getTokenColor (token) {
     const scopes = token.scopeDescriptor || token.scopes
-    const color = this.retrieveStyleFromDom(scopes, 'color')
+    const color = this.DOMStylesReader.retrieveStyleFromDom(scopes, 'color', this.getTextEditorElement(), true)
 
     return transparentize(color, this.getTextOpacity())
   }
@@ -227,7 +227,7 @@ export default class CanvasDrawer extends Mixin {
 
     if (properties.scope) {
       const scopeString = properties.scope.split(/\s+/)
-      return this.retrieveStyleFromDom(scopeString, 'background-color')
+      return this.DOMStylesReader.retrieveStyleFromDom(scopeString, 'background-color', this.getTextEditorElement(), true)
     } else {
       return this.getDefaultColor()
     }

spec/fixtures/very-large-file.zip

@@ -213,7 +213,7 @@ describe('MinimapElement', () => {
       describe('when a hue-rotate filter is applied to a rgb color', () => {
         let [additionnalStyleNode] = []
         beforeEach(() => {
-          minimapElement.invalidateDOMStylesCache()
+          minimapElement.DOMStylesReader.invalidateDOMStylesCache()
 
           additionnalStyleNode = document.createElement('style')
           additionnalStyleNode.textContent = `
@@ -232,7 +232,7 @@ describe('MinimapElement', () => {
           })
           runs(() => {
             nextAnimationFrame()
-            expect(minimapElement.retrieveStyleFromDom(['.editor'], 'color')).toEqual(`rgb(0, ${0x6d}, ${0x6d})`)
+            expect(minimapElement.DOMStylesReader.retrieveStyleFromDom(['.editor'], 'color'), minimapElement.getTextEditorElement()).toEqual(`rgb(0, ${0x6d}, ${0x6d})`)
           })
         })
       })
@@ -241,7 +241,7 @@ describe('MinimapElement', () => {
         let [additionnalStyleNode] = []
 
         beforeEach(() => {
-          minimapElement.invalidateDOMStylesCache()
+          minimapElement.DOMStylesReader.invalidateDOMStylesCache()
 
           additionnalStyleNode = document.createElement('style')
           additionnalStyleNode.textContent = `
@@ -260,7 +260,7 @@ describe('MinimapElement', () => {
           })
           runs(() => {
             nextAnimationFrame()
-            expect(minimapElement.retrieveStyleFromDom(['.editor'], 'color')).toEqual(`rgba(0, ${0x6d}, ${0x6d}, 0)`)
+            expect(minimapElement.DOMStylesReader.retrieveStyleFromDom(['.editor'], 'color'), minimapElement.getTextEditorElement()).toEqual(`rgba(0, ${0x6d}, ${0x6d}, 0)`)
           })
         })
       })
@@ -1195,7 +1195,7 @@ describe('MinimapElement', () => {
         runs(() => {
           nextAnimationFrame()
           spyOn(minimapElement, 'requestForcedUpdate').andCallThrough()
-          spyOn(minimapElement, 'invalidateDOMStylesCache').andCallThrough()
+          spyOn(minimapElement.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.invalidateDOMStylesCache).toHaveBeenCalled()
+        expect(minimapElement.DOMStylesReader.invalidateDOMStylesCache).toHaveBeenCalled()
       })
     })