Feature : Current colors palette

Created dynamic palette displaying currently used colors.
This palette is now selected by default.

New service UsedColorsService created. Listens to PISKEL_RESET and
TOOL_RELEASED and keeps track of the list of current colors.

Still need to :
- improve sorting of colors
- allow to clone the current color palette as a custom palette
- add proper getter in UsedColorService to get the list of current colors

Also I hardcoded a max-height for the palettes-list as I found no better
way of handling the case of palettes containing many colors.

Maybe should add a limit to the number of colors handled by this automatic
palette.

src/css/toolbox-palettes-list.css

@@ -14,7 +14,8 @@
 }
 
 .palettes-list-colors {
-  overflow:hidden;
+  overflow: auto;
+  max-height: 160px;
 }
 
 .palettes-list-color {
@@ -35,6 +36,11 @@
   height : 32px;
 }
 
+.palettes-list-has-scrollbar .palettes-list-color,
+.palettes-list-has-scrollbar .palettes-list-color div{
+  width: 29px
+}
+
 .palettes-list-color.primary:before,
 .palettes-list-color.secondary:before {
   content: "";

src/js/Constants.js

@@ -20,6 +20,8 @@ var Constants = {
   TRANSPARENT_COLOR : 'rgba(0, 0, 0, 0)',
 
   NO_PALETTE_ID : '__no-palette',
+  CURRENT_PALETTE_ID : '__current-colors',
+  MANAGE_PALETTE_ID : '__manage-palettes',
 
   // Used for Spectrum input
   PREFERRED_COLOR_FORMAT : 'rgb',

src/js/Events.js

@@ -45,5 +45,7 @@ var Events = {
   SHOW_NOTIFICATION: "SHOW_NOTIFICATION",
   HIDE_NOTIFICATION: "HIDE_NOTIFICATION",
 
-  ZOOM_CHANGED : "ZOOM_CHANGED"
+  ZOOM_CHANGED : "ZOOM_CHANGED",
+
+  CURRENT_COLORS_UPDATED : "CURRENT_COLORS_UPDATED"
 };

src/js/app.js

@@ -39,7 +39,10 @@
       this.paletteController = new pskl.controller.PaletteController();
       this.paletteController.init();
 
-      this.palettesListController = new pskl.controller.PalettesListController();
+      this.usedColorsService = new pskl.service.UsedColorsService(this.piskelController);
+      this.usedColorsService.init();
+
+      this.palettesListController = new pskl.controller.PalettesListController(this.paletteController, this.usedColorsService);
       this.palettesListController.init();
 
       this.cursorCoordinatesController = new pskl.controller.CursorCoordinatesController(this.piskelController);

src/js/controller/PalettesListController.js

@@ -1,8 +1,9 @@
 (function () {
   var ns = $.namespace('pskl.controller');
 
-  ns.PalettesListController = function () {
-
+  ns.PalettesListController = function (paletteController, usedColorService) {
+    this.usedColorService = usedColorService;
+    this.paletteController = paletteController;
   };
 
   ns.PalettesListController.prototype.init = function () {
@@ -16,6 +17,7 @@
     this.colorListContainer_.addEventListener('contextmenu', this.onColorContainerContextMenu.bind(this));
 
     $.subscribe(Events.PALETTE_LIST_UPDATED, this.onPaletteListUpdated.bind(this));
+    $.subscribe(Events.CURRENT_COLORS_UPDATED, this.fillColorListContainer.bind(this));
     $.subscribe(Events.PRIMARY_COLOR_SELECTED, this.onColorUpdated.bind(this, 'primary'));
     $.subscribe(Events.SECONDARY_COLOR_SELECTED, this.onColorUpdated.bind(this, 'secondary'));
 
@@ -39,15 +41,29 @@
 
   ns.PalettesListController.prototype.fillColorListContainer = function () {
     var html = '';
-
+    var colors = [];
     var palette = this.getSelectedPalette();
     if (palette) {
-      html = palette.colors.map(function (color) {
-        return pskl.utils.Template.replace(this.paletteColorTemplate_, {color : color});
-      }.bind(this)).join('');
+      colors = palette.colors;
+    } else if (this.colorPaletteSelect_.value === Constants.CURRENT_PALETTE_ID) {
+      colors = this.usedColorService.currentColors;
     }
 
+    html = colors.map(function (color) {
+      return pskl.utils.Template.replace(this.paletteColorTemplate_, {color : color});
+    }.bind(this)).join('');
+
     this.colorListContainer_.innerHTML = html;
+
+    this.onColorUpdated('primary', null, this.paletteController.getPrimaryColor());
+    this.onColorUpdated('secondary', null, this.paletteController.getSecondaryColor());
+
+    var hasScrollbar = colors.length > 20;
+    if (hasScrollbar && !pskl.utils.UserAgent.isChrome) {
+      this.colorListContainer_.classList.add('palettes-list-has-scrollbar');
+    } else {
+      this.colorListContainer_.classList.remove('palettes-list-has-scrollbar');
+    }
   };
 
   ns.PalettesListController.prototype.getSelectedPalette = function (evt) {
@@ -67,7 +83,7 @@
 
   ns.PalettesListController.prototype.onPaletteSelected_ = function (evt) {
     var paletteId = this.colorPaletteSelect_.value;
-    if (paletteId === '__manage-palettes') {
+    if (paletteId === Constants.PALETTE_MANAGE_ID) {
       $.publish(Events.DIALOG_DISPLAY, 'manage-palettes');
       this.selectPaletteFromUserSettings();
     } else {
@@ -112,6 +128,8 @@
       this.removeClass_('secondary', '.palettes-list-color');
       colorContainer.classList.add('secondary');
       colorContainer.classList.remove('primary');
+    } else {
+      throw 'No type provided for color update. Expecting "primary" or "secondary"';
     }
   };
 

src/js/service/UsedColorsService.js

@@ -0,0 +1,45 @@
+(function () {
+  var ns = $.namespace('pskl.service');
+
+  ns.UsedColorsService = function (piskelController) {
+    this.piskelController = piskelController;
+    this.currentColors = [];
+    this.framesColorsCache_ = {};
+  };
+
+  ns.UsedColorsService.prototype.init = function () {
+    $.subscribe(Events.PISKEL_RESET, this.onPiskelUpdated_.bind(this));
+    $.subscribe(Events.TOOL_RELEASED, this.onPiskelUpdated_.bind(this));
+  };
+
+  ns.UsedColorsService.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 frameHash = f.getHash();
+      if (!this.framesColorsCache_[frameHash]) {
+        var frameColors = {};
+        f.forEachPixel(function (color, x, y) {
+          frameColors[color] = true;
+        });
+        this.framesColorsCache_[frameHash] = frameColors;
+      }
+      Object.keys(this.framesColorsCache_[frameHash]).forEach(function (color) {
+        colors[color] = true;
+      });
+    }.bind(this));
+    delete colors[Constants.TRANSPARENT_COLOR];
+    this.currentColors = Object.keys(colors);
+    this.currentColors = this.currentColors.sort(function (c1, c2) {
+      if (c1 < c2) {
+        return -1;
+      } else if (c1 > c2) {
+        return 1;
+      } else {
+        return 0;
+      }
+    });
+    $.publish(Events.CURRENT_COLORS_UPDATED, colors);
+  };
+})();

src/js/utils/UserSettings.js

@@ -9,7 +9,7 @@
     KEY_TO_DEFAULT_VALUE_MAP_ : {
       'GRID_WIDTH' : 0,
       'CANVAS_BACKGROUND' : 'lowcont-dark-canvas-background',
-      'SELECTED_PALETTE' : Constants.NO_PALETTE_ID
+      'SELECTED_PALETTE' : Constants.CURRENT_PALETTE_ID
     },
 
     /**

src/piskel-script-list.js

@@ -106,6 +106,7 @@
   "js/service/keyboard/KeycodeTranslator.js",
   "js/service/keyboard/CheatsheetService.js",
   "js/service/ImageUploadService.js",
+  "js/service/UsedColorsService.js",
 
   // Tools
   "js/drawingtools/BaseTool.js",

src/templates/palettes-list.html

@@ -2,19 +2,18 @@
   <h3 class="toolbox-title palettes-title" style="overflow:hidden">
     <span style="line-height:24px ">Palettes</span>
     <select class="palettes-list-select">
-      <optgroup class="palettes-list-select-group" label="Available palettes">
-      </optgroup>
-      <optgroup label="Admin">
-        <option value="__manage-palettes">Create and Manage palettes</option>
+      <option value="__current-colors">Current colors</option>
+      <option value="__manage-palettes">Create custom palettes</option>
+      <optgroup class="palettes-list-select-group" label="Custom palettes">
       </optgroup>
     </select>
   </h3>
   <div class="palettes-list-colors"></div>
+  <script type="text/template" id="palette-color-template">
+    <div class="palettes-list-color" data-color="{{color}}" title="{{color}}">
+      <div data-color="{{color}}" style="background:{{color}}"></div>
+    </div>
+  </script>
 </div>
 
 
-<script type="text/template" id="palette-color-template">
-  <div class="palettes-list-color" data-color="{{color}}" title="{{color}}">
-    <div data-color="{{color}}" style="background:{{color}}"></div>
-  </div>
-</script>