improved current colors sort

src/js/service/CurrentColorsService.js

@@ -7,6 +7,8 @@
     this.cachedFrameProcessor = new pskl.model.frame.CachedFrameProcessor();
     this.cachedFrameProcessor.setFrameProcessor(this.getFrameColors_.bind(this));
 
+    this.colorSorter = new pskl.service.color.ColorSorter();
+
     this.framesColorsCache_ = {};
   };
 
@@ -28,11 +30,11 @@
     return frameColors;
   };
 
-
   ns.CurrentColorsService.prototype.onPiskelUpdated_ = function (evt) {
     var layers = this.piskelController.getLayers();
     var frames = layers.map(function (l) {return l.getFrames();}).reduce(function (p, n) {return p.concat(n);});
     var colors = {};
+    
     frames.forEach(function (f) {
       var frameColors = this.cachedFrameProcessor.get(f);
       Object.keys(frameColors).slice(0, Constants.MAX_CURRENT_COLORS_DISPLAYED).forEach(function (color) {
@@ -44,60 +46,14 @@
     delete colors[Constants.TRANSPARENT_COLOR];
 
     // limit the array to the max colors to display
-    this.currentColors = Object.keys(colors).slice(0, Constants.MAX_CURRENT_COLORS_DISPLAYED);
+    var colorsArray = Object.keys(colors).slice(0, Constants.MAX_CURRENT_COLORS_DISPLAYED);
-
+    this.currentColors = this.colorSorter.sort(colorsArray);
-    this.colorsHslMap = {};
+    console.log(this.currentColors);
-
-    this.currentColors.forEach(function (color) {
-      this.colorsHslMap[color] = window.tinycolor(color).toHsl();
-    }.bind(this));
-
-    // sort by most frequent color
-    this.currentColors = this.currentColors.sort();
-    this.currentColors = this.currentColors.sort(this.sortColors_.bind(this));
 
     // TODO : only fire if there was a change
     $.publish(Events.CURRENT_COLORS_UPDATED);
   };
 
-  var LOW_SAT = 0.1;
-  var LOW_LUM = 0.1;
-  var HI_LUM = 0.9;
-  ns.CurrentColorsService.prototype.sortColors_ = function (c1, c2) {
-    var hsl1 = this.colorsHslMap[c1];
-    var hsl2 = this.colorsHslMap[c2];
-
-    if (hsl1.l < LOW_LUM || hsl2.l < LOW_LUM) {
-      return this.compareValues_(hsl1.l, hsl2.l);
-    } else if (hsl1.l > HI_LUM || hsl2.l > HI_LUM) {
-      return this.compareValues_(hsl2.l, hsl1.l);
-    } else if (hsl1.s < LOW_SAT || hsl2.s < LOW_SAT) {
-      return this.compareValues_(hsl1.s, hsl2.s);
-    } else {
-      var hDiff = Math.abs(hsl1.h - hsl2.h);
-      var sDiff = Math.abs(hsl1.s - hsl2.s);
-      var lDiff = Math.abs(hsl1.l - hsl2.l);
-      if (hDiff < 10) {
-        if (sDiff > lDiff) {
-          return this.compareValues_(hsl1.s, hsl2.s);
-        } else {
-          return this.compareValues_(hsl1.l, hsl2.l);
-        }
-      } else {
-        return this.compareValues_(hsl1.h, hsl2.h);
-      }
-    }
-  };
-
-  ns.CurrentColorsService.prototype.compareValues_ = function (v1, v2) {
-    if (v1 > v2) {
-      return 1;
-    } else if (v1 < v2) {
-      return -1;
-    }
-    return 0;
-  };
-
   ns.CurrentColorsService.prototype.toHexColor_ = function (color) {
     if (color === Constants.TRANSPARENT_COLOR) {
       return color;

src/js/service/color/ColorSorter.js

@@ -0,0 +1,105 @@
+(function () {
+  var ns = $.namespace('pskl.service.color');
+
+  var LOW_SAT = 0.3;
+  var LOW_LUM = 0.1;
+  var HI_LUM = 0.9;
+
+
+  var HUE_STEP = 36;
+  var HUE_BAGS = 10;
+  var HUE_BOUNDS = [];
+  for (var i = 0 ; i < HUE_BAGS ; i++) {
+    HUE_BOUNDS.push(i * HUE_STEP);
+  }
+
+  ns.ColorSorter = function () {
+    this.colorsHslMap_ = {};
+  };
+
+  ns.ColorSorter.prototype.sort = function (colors) {
+    this.colorsHslMap_ = {};
+
+    colors.forEach(function (color) {
+      this.colorsHslMap_[color] = window.tinycolor(color).toHsl();
+    }.bind(this));
+
+    // sort by most frequent color
+    var darkColors = colors.filter(function (c) {
+      var hsl = this.colorsHslMap_[c];
+      return hsl.l <= LOW_LUM;
+    }.bind(this));
+
+    var brightColors = colors.filter(function (c) {
+      var hsl = this.colorsHslMap_[c];
+      return hsl.l >= HI_LUM;
+    }.bind(this));
+
+    var desaturatedColors = colors.filter(function (c) {
+      var hsl = this.colorsHslMap_[c];
+      return hsl.s <= LOW_SAT;
+    }.bind(this));
+
+    darkColors = this.sortOnHslProperty_(darkColors, 'l');
+    brightColors = this.sortOnHslProperty_(brightColors, 'l');
+    desaturatedColors = this.sortOnHslProperty_(desaturatedColors, 'h');
+
+    var sortedColors = darkColors.concat(brightColors).concat(desaturatedColors);
+    
+    var regularColors = colors.filter(function (c) {
+      return sortedColors.indexOf(c) === -1;
+    });
+
+    var regularColorsBags = [];
+    for (var i = 0 ; i < HUE_BOUNDS.length ; i++) {
+      var hue = HUE_BOUNDS[i];
+      var bagColors = regularColors.filter(function (color) {
+        var hsl = this.colorsHslMap_[color];
+        return (hsl.h >= hue && hsl.h < hue + HUE_STEP);
+      }.bind(this));
+
+      regularColorsBags[i] = this.sortRegularColors_(bagColors);
+    }
+
+    return Array.prototype.concat.apply(sortedColors, regularColorsBags);
+  };
+
+  ns.ColorSorter.prototype.sortRegularColors_ = function (colors) {
+    var sortedColors = colors.sort(function (c1, c2) {
+      var hsl1 = this.colorsHslMap_[c1];
+      var hsl2 = this.colorsHslMap_[c2];
+      var hDiff = Math.abs(hsl1.h - hsl2.h);
+      var sDiff = Math.abs(hsl1.s - hsl2.s);
+      var lDiff = Math.abs(hsl1.l - hsl2.l);
+      if (hDiff < 10) {
+        if (sDiff > lDiff) {
+          return this.compareValues_(hsl1.s, hsl2.s);
+        } else {
+          return this.compareValues_(hsl1.l, hsl2.l);
+        }
+      } else {
+        return this.compareValues_(hsl1.h, hsl2.h);
+      }
+    }.bind(this));
+
+    return sortedColors;
+  };
+
+  ns.ColorSorter.prototype.sortOnHslProperty_ = function (colors, property) {
+    return colors.sort(function (c1, c2) {
+      var hsl1 = this.colorsHslMap_[c1];
+      var hsl2 = this.colorsHslMap_[c2];
+      return this.compareValues_(hsl1[property], hsl2[property]);
+    }.bind(this));
+  };
+
+  ns.ColorSorter.prototype.compareValues_ = function (v1, v2) {
+    if (v1 > v2) {
+      return 1;
+    } else if (v1 < v2) {
+      return -1;
+    }
+    return 0;
+  };
+
+})();

src/piskel-script-list.js

@@ -122,6 +122,7 @@
   "js/service/BackupService.js",
   "js/service/BeforeUnloadService.js",
   "js/service/HistoryService.js",
+  "js/service/color/ColorSorter.js",
   "js/service/palette/CurrentColorsPalette.js",
   "js/service/palette/PaletteService.js",
   "js/service/palette/PaletteTxtReader.js",