feature : add keyboard shortcuts

+ cleanup of color management
+ colors are now stored in palette controller
+ drawing controller has a dependency on palette controller
+ UPDATE COLOR events have been removed (they were used only for
synchronizing palette and drawing controller)

js/Events.js

@@ -3,10 +3,8 @@ var Events = {
 
   TOOL_SELECTED : "TOOL_SELECTED",
   TOOL_RELEASED : "TOOL_RELEASED",
-  PRIMARY_COLOR_SELECTED: "PRIMARY_COLOR_SELECTED",
-  PRIMARY_COLOR_UPDATED: "PRIMARY_COLOR_UPDATED",
-  SECONDARY_COLOR_SELECTED: "SECONDARY_COLOR_SELECTED",
-  SECONDARY_COLOR_UPDATED: "SECONDARY_COLOR_UPDATED",
+  SELECT_PRIMARY_COLOR: "SELECT_PRIMARY_COLOR",
+  SELECT_SECONDARY_COLOR: "SELECT_SECONDARY_COLOR",
 
   /**
    *  When this event is emitted, a request is sent to the localstorage

js/app.js

@@ -21,7 +21,10 @@
 
       this.piskelController = new pskl.controller.PiskelController(piskel);
 
-      this.drawingController = new pskl.controller.DrawingController(this.piskelController, $('#drawing-canvas-container'));
+      this.paletteController = new pskl.controller.PaletteController();
+      this.paletteController.init();
+
+      this.drawingController = new pskl.controller.DrawingController(this.piskelController, this.paletteController, $('#drawing-canvas-container'));
       this.drawingController.init();
 
       this.animationController = new pskl.controller.AnimatedPreviewController(this.piskelController, $('#preview-canvas-container'));
@@ -60,8 +63,6 @@
       this.cheatsheetService = new pskl.service.keyboard.CheatsheetService();
       this.cheatsheetService.init();
 
-      this.paletteController = new pskl.controller.PaletteController();
-      this.paletteController.init();
 
       var drawingLoop = new pskl.rendering.DrawingLoop();
       drawingLoop.addCallback(this.render, this);

js/controller/DrawingController.js

@@ -1,11 +1,13 @@
 (function () {
   var ns = $.namespace("pskl.controller");
-  ns.DrawingController = function (piskelController, container) {
+  ns.DrawingController = function (piskelController, paletteController,container) {
     /**
      * @public
      */
     this.piskelController = piskelController;
 
+    this.paletteController = paletteController;
+
     /**
      * @public
      */
@@ -35,8 +37,6 @@
     this.isRightClicked = false;
     this.previousMousemoveTime = 0;
     this.currentToolBehavior = null;
-    this.primaryColor =  Constants.DEFAULT_PEN_COLOR;
-    this.secondaryColor =  Constants.TRANSPARENT_COLOR;
   };
 
   ns.DrawingController.prototype.init = function () {
@@ -47,21 +47,6 @@
       this.overlayFrame.clear();
     }, this));
 
-    /**
-     * TODO(grosbouddha): Primary/secondary color state are kept in this general controller.
-     *     Find a better place to store that. Perhaps PaletteController?
-     */
-    $.subscribe(Events.PRIMARY_COLOR_SELECTED, $.proxy(function(evt, color) {
-      console.log("Primary color selected: ", color);
-      this.primaryColor = color;
-      $.publish(Events.PRIMARY_COLOR_UPDATED, [color]);
-    }, this));
-    $.subscribe(Events.SECONDARY_COLOR_SELECTED, $.proxy(function(evt, color) {
-      console.log("Secondary color selected: ", color);
-      this.secondaryColor = color;
-      $.publish(Events.SECONDARY_COLOR_UPDATED, [color]);
-    }, this));
-
     $(window).resize($.proxy(this.startDPIUpdateTimer_, this));
 
     $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
@@ -221,9 +206,9 @@
    */
   ns.DrawingController.prototype.getCurrentColor_ = function () {
     if(this.isRightClicked) {
-      return this.secondaryColor;
+      return this.paletteController.getSecondaryColor();
     } else {
-      return this.primaryColor;
+      return this.paletteController.getPrimaryColor();
     }
   };
 

js/controller/PaletteController.js

@@ -1,7 +1,10 @@
 (function () {
   var ns = $.namespace("pskl.controller");
 
-  ns.PaletteController = function () {};
+  ns.PaletteController = function () {
+    this.primaryColor =  Constants.DEFAULT_PEN_COLOR;
+    this.secondaryColor =  Constants.TRANSPARENT_COLOR;
+  };
 
   /**
    * @public
@@ -10,24 +13,18 @@
     var transparentColorPalette = $(".palette-color[data-color=TRANSPARENT]");
     transparentColorPalette.mouseup($.proxy(this.onPaletteColorClick_, this));
 
-    $.subscribe(Events.PRIMARY_COLOR_UPDATED, $.proxy(function(evt, color) {
-      this.updateColorPicker_(color, $('#color-picker'));
-    }, this));
-
-    $.subscribe(Events.SECONDARY_COLOR_UPDATED, $.proxy(function(evt, color) {
-      this.updateColorPicker_(color, $('#secondary-color-picker'));
-    }, this));
-
+    $.subscribe(Events.SELECT_PRIMARY_COLOR, this.onColorSelected_.bind(this, {isPrimary:true}));
+    $.subscribe(Events.SELECT_SECONDARY_COLOR, this.onColorSelected_.bind(this, {isPrimary:false}));
     $.subscribe(Events.SWAP_COLORS, this.onSwapColorsEvent_.bind(this));
 
     // Initialize colorpickers:
     var colorPicker = $('#color-picker');
-    colorPicker.val(Constants.DEFAULT_PEN_COLOR);
+    colorPicker.val(this.primaryColor);
     colorPicker.change({isPrimary : true}, $.proxy(this.onPickerChange_, this));
 
 
     var secondaryColorPicker = $('#secondary-color-picker');
-    secondaryColorPicker.val(Constants.TRANSPARENT_COLOR);
+    secondaryColorPicker.val(this.secondaryColor);
     secondaryColorPicker.change({isPrimary : false}, $.proxy(this.onPickerChange_, this));
 
     window.jscolor.install();
@@ -39,19 +36,46 @@
   ns.PaletteController.prototype.onPickerChange_ = function(evt, isPrimary) {
     var inputPicker = $(evt.target);
     if(evt.data.isPrimary) {
-      $.publish(Events.PRIMARY_COLOR_SELECTED, [inputPicker.val()]);
+      this.setPrimaryColor(inputPicker.val());
     } else {
-      $.publish(Events.SECONDARY_COLOR_SELECTED, [inputPicker.val()]);
+      this.setSecondaryColor(inputPicker.val());
     }
   };
 
+  /**
+   * @private
+   */
+  ns.PaletteController.prototype.onColorSelected_ = function(args, evt, color) {
+    var inputPicker = $(evt.target);
+    if(args.isPrimary) {
+      this.setPrimaryColor(color);
+    } else {
+      this.setSecondaryColor(color);
+    }
+  };
+
+  ns.PaletteController.prototype.setPrimaryColor = function (color) {
+    this.primaryColor = color;
+    this.updateColorPicker_(color, $('#color-picker'));
+  };
+
+  ns.PaletteController.prototype.setSecondaryColor = function (color) {
+    this.secondaryColor = color;
+    this.updateColorPicker_(color, $('#secondary-color-picker'));
+  };
+
+  ns.PaletteController.prototype.getPrimaryColor = function () {
+    return this.primaryColor;
+  };
+
+  ns.PaletteController.prototype.getSecondaryColor = function () {
+    return this.secondaryColor;
+  };
+
   ns.PaletteController.prototype.onSwapColorsEvent_ = function () {
-    // TODO : juliandescottes : oooooh huge crap ... palette controller doesn't know which colors are selected !!
-    // JC Denton commented : 'what a shame'
-    var primaryColor = pskl.app.drawingController.primaryColor;
-    var secondaryColor = pskl.app.drawingController.secondaryColor;
-    $.publish(Events.PRIMARY_COLOR_SELECTED, [secondaryColor]);
-    $.publish(Events.SECONDARY_COLOR_SELECTED, [primaryColor]);
+    var primaryColor = this.getPrimaryColor();
+    this.setPrimaryColor(this.getSecondaryColor());
+    this.setSecondaryColor(primaryColor);
   };
 
   /**

js/drawingtools/ColorPicker.js

@@ -20,9 +20,9 @@
     if (frame.containsPixel(col, row)) {
       var sampledColor = frame.getPixel(col, row);
       if (context.button == Constants.LEFT_BUTTON) {
-        $.publish(Events.PRIMARY_COLOR_SELECTED, [sampledColor]);
+        $.publish(Events.SELECT_PRIMARY_COLOR, [sampledColor]);
       } else if (context.button == Constants.RIGHT_BUTTON) {
-        $.publish(Events.SECONDARY_COLOR_SELECTED, [sampledColor]);
+        $.publish(Events.SELECT_SECONDARY_COLOR, [sampledColor]);
       }
     }
   };