Use GenericColorPicker.recentColors

igvteam · Nov 22, 2024 · 7091891 · 7091891
1 parent 835f01a
commit 7091891
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 17 deletions.
diff --git a/js/trackView.js b/js/trackView.js
@@ -208,9 +208,6 @@ class TrackView {
 
         if (false === colorPickerExclusionTypes.has(this.track.type)) {
 
-            // TODO: When should the list of previous colors be created/initialized?
-            this.browser.previousColors = []
-
             if (undefined === this.track.initialTrackColor) {
                 this.track.initialTrackColor = {}
             }
@@ -275,7 +272,7 @@ class TrackView {
             }
 
             const moreColorsPresentationColor = 'color' === colorSelection ? (this.track.color || this.track.constructor.defaultColor) : this.track.altColor
-            this.browser.genericColorPicker.configure(initialTrackColor, this.browser.previousTrackColors, colorHandlers[colorSelection], moreColorsPresentationColor)
+            this.browser.genericColorPicker.configure(initialTrackColor, colorHandlers[colorSelection], moreColorsPresentationColor)
             this.browser.genericColorPicker.show()
 
         }

diff --git a/js/ui/components/genericColorPicker.js b/js/ui/components/genericColorPicker.js
@@ -5,6 +5,8 @@ import {genericColorPickerPalette} from "../../util/colorPalletes.js"
 
 class GenericColorPicker extends GenericContainer {
 
+    static maxRecentColors = 10
+
     constructor({parent, width}) {
         super({parent, width, border: '1px solid gray'})
 
@@ -20,10 +22,13 @@ class GenericColorPicker extends GenericContainer {
         this.recentColorsSwatches = DOMUtils.div()
         this.container.appendChild(this.recentColorsSwatches)
 
+        this.recentColors = []
+
         this.moreColorsPresentationColor = undefined
+
     }
 
-    configure(initialTrackColor, previousTrackColors, colorHandler, moreColorsPresentationColor) {
+    configure(initialTrackColor, colorHandler, moreColorsPresentationColor) {
 
         this.moreColorsPresentationColor = moreColorsPresentationColor
 
@@ -40,16 +45,16 @@ class GenericColorPicker extends GenericContainer {
         }
 
         // Populate Previous Colors
-        if (previousTrackColors.length > 0) {
-            for (const hexColorString of previousTrackColors) {
+        if (this.recentColors.length > 0) {
+            for (const hexColorString of this.recentColors) {
                 const swatch = DOMUtils.div({class: 'igv-ui-color-swatch'})
                 this.recentColorsSwatches.appendChild(swatch)
                 this.decorateSwatch(swatch, hexColorString, colorHandler)
             }
         }
 
         // Present MoreColors picker
-        this.decorateMoreColorsButton(this.moreColorsContainer, previousTrackColors, colorHandler)
+        this.decorateMoreColorsButton(this.moreColorsContainer, colorHandler)
 
     }
 
@@ -71,27 +76,27 @@ class GenericColorPicker extends GenericContainer {
 
     }
 
-    decorateMoreColorsButton(moreColorsContainer, previousTrackColors, colorHandler) {
+    decorateMoreColorsButton(moreColorsContainer, colorHandler) {
 
         moreColorsContainer.innerText = 'More Colors ...'
 
         moreColorsContainer.addEventListener('click', event => {
             event.stopPropagation()
-            this.createAndPresentMoreColorsPicker(moreColorsContainer, previousTrackColors, hexColorString => colorHandler(hexColorString))
+            this.createAndPresentMoreColorsPicker(moreColorsContainer, hexColorString => colorHandler(hexColorString))
         })
 
     }
 
-    updateRecentColorsSwatches(previousTrackColors, colorHandler){
+    updateRecentColorsSwatches(colorHandler){
         this.recentColorsSwatches.innerHTML = ''
-        for (const hexColorString of previousTrackColors) {
+        for (const hexColorString of this.recentColors) {
             const swatch = DOMUtils.div({class: 'igv-ui-color-swatch'})
             this.recentColorsSwatches.appendChild(swatch)
             this.decorateSwatch(swatch, hexColorString, colorHandler)
         }
     }
 
-    createAndPresentMoreColorsPicker(moreColorsContainer, previousTrackColors, colorHandler) {
+    createAndPresentMoreColorsPicker(moreColorsContainer, colorHandler) {
 
         let picker
 
@@ -139,13 +144,14 @@ class GenericColorPicker extends GenericContainer {
             // Remove alpha from hex color string
             const hexColorString = color.hex.substring(0,7)
 
-            previousTrackColors.push(hexColorString)
-            const uniques = [...new Set(previousTrackColors)]
-            previousTrackColors = uniques.slice(0)
+            this.recentColors.unshift(hexColorString)
+
+            const src = this.recentColors.slice(0)
+            this.recentColors = [...new Set(src)].slice(0, GenericColorPicker.maxRecentColors)
 
             colorHandler(hexColorString)
 
-            this.updateRecentColorsSwatches(previousTrackColors, colorHandler)
+            this.updateRecentColorsSwatches(colorHandler)
 
             this.moreColorsPresentationColor = hexColorString