Merge pull request #308 from juliandescottes/dithering

Introduce basic dithering tool

src/js/app.js

@@ -38,6 +38,9 @@
       this.paletteService = new pskl.service.palette.PaletteService();
       this.paletteService.addDynamicPalette(new pskl.service.palette.CurrentColorsPalette());
 
+      this.selectedColorsService = new pskl.service.SelectedColorsService();
+      this.selectedColorsService.init();
+
       this.paletteController = new pskl.controller.PaletteController();
       this.paletteController.init();
 

src/js/controller/PaletteController.js

@@ -2,6 +2,7 @@
   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;
   };

src/js/controller/ToolController.js

@@ -19,6 +19,7 @@
       toDescriptor('rectangleSelect', 'S', new pskl.tools.drawing.RectangleSelect()),
       toDescriptor('shapeSelect', 'Z', new pskl.tools.drawing.ShapeSelect()),
       toDescriptor('lighten', 'U', new pskl.tools.drawing.Lighten()),
+      toDescriptor('dithering', 'T', new pskl.tools.drawing.DitheringTool()),
       toDescriptor('colorPicker', 'O', new pskl.tools.drawing.ColorPicker())
     ];
 

src/js/service/SelectedColorsService.js

@@ -0,0 +1,28 @@
+(function () {
+  var ns = $.namespace('pskl.service');
+
+  ns.SelectedColorsService = function () {
+    this.primaryColor_ = Constants.DEFAULT_PEN_COLOR;
+    this.secondaryColor_ = Constants.TRANSPARENT_COLOR;
+  };
+
+  ns.SelectedColorsService.prototype.init = function () {
+    $.subscribe(Events.PRIMARY_COLOR_SELECTED, this.onPrimaryColorUpdate_.bind(this));
+    $.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.onPrimaryColorUpdate_ = function (evt, color) {
+    this.primaryColor_ = color;
+  };
+
+  ns.SelectedColorsService.prototype.onSecondaryColorUpdate_ = function (evt, color) {
+    this.secondaryColor_ = color;
+  };
+})();

src/js/tools/drawing/DitheringTool.js

@@ -0,0 +1,36 @@
+/**
+ * @provide pskl.tools.drawing.DitheringTool
+ *
+ * @require pskl.utils
+ */
+(function() {
+  var ns = $.namespace('pskl.tools.drawing');
+
+  ns.DitheringTool = function() {
+    ns.SimplePen.call(this);
+    this.toolId = 'tool-dithering';
+    this.helpText = 'Dithering tool';
+  };
+  pskl.utils.inherit(ns.DitheringTool, ns.SimplePen);
+
+  /**
+   * @override
+   */
+  ns.DitheringTool.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {
+    // On Firefox/IE, the clicked button type is not part of the mousemove event.
+    // Ensure we record the pressed button on the initial mousedown only.
+    if (event.type == 'mousedown') {
+      this.invertColors_ = event.button === Constants.RIGHT_BUTTON;
+    }
+
+    // Use primary selected color on cell with either an odd col or row.
+    // Use secondary color otherwise.
+    // When using the right mouse button, invert the above behavior to allow quick corrections.
+    var usePrimaryColor = (col + row) % 2;
+    usePrimaryColor = this.invertColors_ ? !usePrimaryColor : usePrimaryColor;
+
+    var selectedColors = pskl.app.selectedColorsService.getColors();
+    var ditheringColor = usePrimaryColor ? selectedColors[0] : selectedColors[1];
+    this.superclass.applyToolAt.call(this, col, row, ditheringColor, frame, overlay, event);
+  };
+})();