Integrate selectedColorsService into PaletteController and PaletteListController

- update selectedColorsService getColors array API to explicit
getPrimary/getSecondary
- update drawing test helper as well

src/js/app.js

@@ -47,9 +47,7 @@
       this.currentColorsService = new pskl.service.CurrentColorsService(this.piskelController);
       this.currentColorsService.init();
 
-      this.palettesListController = new pskl.controller.PalettesListController(
-        this.paletteController,
-        this.currentColorsService);
+      this.palettesListController = new pskl.controller.PalettesListController(this.currentColorsService);
       this.palettesListController.init();
 
       this.cursorCoordinatesController = new pskl.controller.CursorCoordinatesController(this.piskelController);

src/js/controller/DrawingController.js

@@ -321,9 +321,9 @@
     // This always matches a LEFT mouse button which is __really__ not helpful
 
     if (this.currentMouseButton_ == Constants.RIGHT_BUTTON) {
-      return this.paletteController.getSecondaryColor();
+      return pskl.app.selectedColorsService.getSecondaryColor();
     } else if (this.currentMouseButton_ == Constants.LEFT_BUTTON) {
-      return this.paletteController.getPrimaryColor();
+      return pskl.app.selectedColorsService.getPrimaryColor();
     } else {
       return Constants.DEFAULT_PEN_COLOR;
     }

src/js/controller/PaletteController.js

@@ -1,11 +1,7 @@
 (function () {
   var ns = $.namespace('pskl.controller');
 
-  ns.PaletteController = function () {
-    // TODO(grosbouddha): Reuse default colors from SelectedColorsService.
-    this.primaryColor =  Constants.DEFAULT_PEN_COLOR;
-    this.secondaryColor =  Constants.TRANSPARENT_COLOR;
-  };
+  ns.PaletteController = function () {};
 
   /**
    * @public
@@ -52,9 +48,9 @@
   ns.PaletteController.prototype.onPickerChange_ = function(evt, isPrimary) {
     var inputPicker = $(evt.target);
     if (evt.data.isPrimary) {
-      this.setPrimaryColor(inputPicker.val());
+      this.setPrimaryColor_(inputPicker.val());
     } else {
-      this.setSecondaryColor(inputPicker.val());
+      this.setSecondaryColor_(inputPicker.val());
     }
   };
 
@@ -64,41 +60,30 @@
   ns.PaletteController.prototype.onColorSelected_ = function(args, evt, color) {
     var inputPicker = $(evt.target);
     if (args.isPrimary) {
-      this.setPrimaryColor(color);
+      this.setPrimaryColor_(color);
     } else {
-      this.setSecondaryColor(color);
+      this.setSecondaryColor_(color);
     }
   };
 
-  ns.PaletteController.prototype.setPrimaryColor = function (color) {
-    this.primaryColor = color;
+  ns.PaletteController.prototype.setPrimaryColor_ = function (color) {
     this.updateColorPicker_(color, $('#color-picker'));
     $.publish(Events.PRIMARY_COLOR_SELECTED, [color]);
   };
 
-  ns.PaletteController.prototype.setSecondaryColor = function (color) {
-    this.secondaryColor = color;
+  ns.PaletteController.prototype.setSecondaryColor_ = function (color) {
     this.updateColorPicker_(color, $('#secondary-color-picker'));
     $.publish(Events.SECONDARY_COLOR_SELECTED, [color]);
   };
 
-  ns.PaletteController.prototype.getPrimaryColor = function () {
-    return this.primaryColor;
-  };
-
-  ns.PaletteController.prototype.getSecondaryColor = function () {
-    return this.secondaryColor;
-  };
-
   ns.PaletteController.prototype.swapColors = function () {
-    var primaryColor = this.getPrimaryColor();
-    this.setPrimaryColor(this.getSecondaryColor());
-    this.setSecondaryColor(primaryColor);
+    var primaryColor = pskl.app.selectedColorsService.getPrimaryColor();
+    this.setPrimaryColor_(pskl.app.selectedColorsService.getSecondaryColor());
+    this.setSecondaryColor_(primaryColor);
   };
 
   ns.PaletteController.prototype.resetColors = function () {
-    this.setPrimaryColor(Constants.DEFAULT_PEN_COLOR);
-    this.setSecondaryColor(Constants.TRANSPARENT_COLOR);
+    pskl.app.selectedColorsService.reset();
   };
 
   /**

src/js/controller/PalettesListController.js

@@ -10,10 +10,9 @@
   // I apologize to my future self for this one.
   var NO_SCROLL_MAX_COLORS = 20;
 
-  ns.PalettesListController = function (paletteController, usedColorService) {
+  ns.PalettesListController = function (usedColorService) {
     this.usedColorService = usedColorService;
     this.paletteService = pskl.app.paletteService;
-    this.paletteController = paletteController;
   };
 
   ns.PalettesListController.prototype.init = function () {
@@ -184,13 +183,13 @@
     this.removeClass_(PRIMARY_COLOR_CLASSNAME);
     this.removeClass_(SECONDARY_COLOR_CLASSNAME);
 
-    var colorContainer = this.getColorContainer_(this.paletteController.getSecondaryColor());
+    var colorContainer = this.getColorContainer_(pskl.app.selectedColorsService.getSecondaryColor());
     if (colorContainer) {
       colorContainer.classList.remove(PRIMARY_COLOR_CLASSNAME);
       colorContainer.classList.add(SECONDARY_COLOR_CLASSNAME);
     }
 
-    colorContainer = this.getColorContainer_(this.paletteController.getPrimaryColor());
+    colorContainer = this.getColorContainer_(pskl.app.selectedColorsService.getPrimaryColor());
     if (colorContainer) {
       colorContainer.classList.remove(SECONDARY_COLOR_CLASSNAME);
       colorContainer.classList.add(PRIMARY_COLOR_CLASSNAME);

src/js/devtools/DrawingTestRecorder.js

@@ -45,8 +45,8 @@
         width : this.piskelController.getWidth(),
         height : this.piskelController.getHeight()
       },
-      primaryColor : pskl.app.paletteController.getPrimaryColor(),
-      secondaryColor : pskl.app.paletteController.getSecondaryColor(),
+      primaryColor : pskl.app.selectedColorsService.getPrimaryColor(),
+      secondaryColor : pskl.app.selectedColorsService.getSecondaryColor(),
       selectedTool : pskl.app.toolController.currentSelectedTool.instance.toolId
     };
   };

src/js/service/SelectedColorsService.js

@@ -2,8 +2,7 @@
   var ns = $.namespace('pskl.service');
 
   ns.SelectedColorsService = function () {
-    this.primaryColor_ = Constants.DEFAULT_PEN_COLOR;
-    this.secondaryColor_ = Constants.TRANSPARENT_COLOR;
+    this.reset();
   };
 
   ns.SelectedColorsService.prototype.init = function () {
@@ -11,11 +10,17 @@
     $.subscribe(Events.SECONDARY_COLOR_SELECTED, this.onSecondaryColorUpdate_.bind(this));
   };
 
-  ns.SelectedColorsService.prototype.getColors = function () {
-    if (this.primaryColor_ === null || this.secondaryColor_ === null) {
-      throw 'SelectedColorsService not properly initialized.';
-    }
-    return [this.primaryColor_, this.secondaryColor_];
+  ns.SelectedColorsService.prototype.getPrimaryColor = function () {
+    return this.primaryColor_;
+  };
+
+  ns.SelectedColorsService.prototype.getSecondaryColor = function () {
+    return this.secondaryColor_;
+  };
+
+  ns.SelectedColorsService.prototype.reset = function () {
+    this.primaryColor_ = Constants.DEFAULT_PEN_COLOR;
+    this.secondaryColor_ = Constants.TRANSPARENT_COLOR;
   };
 
   ns.SelectedColorsService.prototype.onPrimaryColorUpdate_ = function (evt, color) {

src/js/tools/drawing/DitheringTool.js

@@ -29,8 +29,9 @@
     var usePrimaryColor = (col + row) % 2;
     usePrimaryColor = this.invertColors_ ? !usePrimaryColor : usePrimaryColor;
 
-    var selectedColors = pskl.app.selectedColorsService.getColors();
-    var ditheringColor = usePrimaryColor ? selectedColors[0] : selectedColors[1];
+    var ditheringColor = usePrimaryColor ?
+        pskl.app.selectedColorsService.getPrimaryColor() :
+        pskl.app.selectedColorsService.getSecondaryColor();
     this.superclass.applyToolAt.call(this, col, row, ditheringColor, frame, overlay, event);
   };
 })();