Merge pull request #101 from juliandescottes/add-colorpicker

Adding simple color picker

css/tools.css

@@ -78,6 +78,10 @@
   background-image: url(../img/tools/wand.png);
 }
 
+.tool-icon.tool-colorpicker {
+  background-image: url(../img/tools/dropper.png);
+}
+
 /*.tool-icon.tool-palette {
   background-image: url(../img/tools/color-palette.png);
 }*/
@@ -126,6 +130,10 @@
   cursor: url(../img/tools/wand.png) 15 15, pointer;
 }
 
+.tool-colorpicker .drawing-canvas-container:hover {
+  cursor: url(../img/tools/dropper.png) 0 15, pointer;
+}
+
 .tool-grid,
 .tool-grid label,
 .tool-grid input {

index.html

@@ -80,7 +80,7 @@
   <script src="js/lib/pubsub.js"></script>
   <script src="js/lib/bootstrap/bootstrap.js"></script> 
 
-  <!-- GIF Encoding DEVICES ! -->
+  <!-- GIF Encoding DEVICES ! OH YEAY! -->
   <script src="js/lib/gif/GIFEncoder.js"></script>
   <script src="js/lib/gif/b64.js"></script>
   <script src="js/lib/gif/NeuQuant.js"></script>
@@ -133,6 +133,7 @@
   <script src="js/drawingtools/selectiontools/BaseSelect.js"></script>
   <script src="js/drawingtools/selectiontools/RectangleSelect.js"></script>
   <script src="js/drawingtools/selectiontools/ShapeSelect.js"></script>
+  <script src="js/drawingtools/ColorPicker.js"></script>
   
   <!-- Application controller and initialization -->
   <script src="js/piskel.js"></script>

js/Events.js

@@ -2,7 +2,10 @@ Events = {
     
     TOOL_SELECTED : "TOOL_SELECTED",
     TOOL_RELEASED : "TOOL_RELEASED",
-    COLOR_SELECTED: "COLOR_SELECTED",
+    PRIMARY_COLOR_SELECTED: "PRIMARY_COLOR_SELECTED",
+    PRIMARY_COLOR_UPDATED: "PRIMARY_COLOR_UPDATED",
+    SECONDARY_COLOR_SELECTED: "SECONDARY_COLOR_SELECTED",
+    SECONDARY_COLOR_UPDATED: "SECONDARY_COLOR_UPDATED",
 
     /**
      *  When this event is emitted, a request is sent to the localstorage

js/controller/DrawingController.js

@@ -43,13 +43,19 @@
       this.currentToolBehavior = toolBehavior;
     }, this));
 
-    $.subscribe(Events.COLOR_SELECTED, $.proxy(function(evt, color, isPrimary) {
+    /**
-      console.log("Color selected: ", color);
+     * TODO(grosbouddha): Primary/secondary color state are kept in this general controller.
-      if (isPrimary) {
+     *     Find a better place to store that. Perhaps PaletteController?
-        this.primaryColor = color;
+     */
-      } else {
+    $.subscribe(Events.PRIMARY_COLOR_SELECTED, $.proxy(function(evt, color) {
-        this.secondaryColor = 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));

js/controller/PaletteController.js

@@ -11,7 +11,12 @@
    */
   ns.PaletteController.prototype.onPickerChange_ = function(evt, isPrimary) {
     var inputPicker = $(evt.target);
-    $.publish(Events.COLOR_SELECTED, [inputPicker.val(), evt.data.isPrimary]);
+    if(evt.data.isPrimary) {
+      $.publish(Events.PRIMARY_COLOR_SELECTED, [inputPicker.val()]);
+    }
+    else {
+      $.publish(Events.SECONDARY_COLOR_SELECTED, [inputPicker.val()]);
+    }
   };
 
   /**
@@ -57,12 +62,12 @@
    */
   ns.PaletteController.prototype.onPaletteColorClick_ = function (event) {
     var selectedColor = $(event.target).data("color");
-    if (event.which == 1) { // left button 
+    var isLeftClick = (event.which == 1);
-      this.updateColorPicker_(selectedColor, $('#color-picker'));
+    var isRightClick = (event.which == 3);
-      $.publish(Events.COLOR_SELECTED, [selectedColor, true]);
+    if (isLeftClick) {
-    } else if (event.which == 3) { // right button
+      $.publish(Events.PRIMARY_COLOR_SELECTED, [selectedColor]);
-      this.updateColorPicker_(selectedColor, $('#secondary-color-picker'));
+    } else if (isRightClick) {
-      $.publish(Events.COLOR_SELECTED, [selectedColor, false]);
+      $.publish(Events.SECONDARY_COLOR_SELECTED, [selectedColor]);
     }
   };
 
@@ -106,7 +111,14 @@
 
     this.paletteRoot.mouseup($.proxy(this.onPaletteColorClick_, this));
     
-    $.subscribe(Events.COLOR_SELECTED, $.proxy(function(evt, color) {
+    $.subscribe(Events.PRIMARY_COLOR_UPDATED, $.proxy(function(evt, color) {
+      this.updateColorPicker_(color, $('#color-picker'));
+      this.addColorToPalette_(color);
+      this.createPaletteMarkup_();
+    }, this));
+
+    $.subscribe(Events.SECONDARY_COLOR_UPDATED, $.proxy(function(evt, color) {
+      this.updateColorPicker_(color, $('#secondary-color-picker'));
       this.addColorToPalette_(color);
       this.createPaletteMarkup_();
     }, this));

js/controller/ToolController.js

@@ -14,7 +14,8 @@
             "circle" : new pskl.drawingtools.Circle(),
             "move" : new pskl.drawingtools.Move(),
             "rectangleSelect" : new pskl.drawingtools.RectangleSelect(),
-            "shapeSelect" : new pskl.drawingtools.ShapeSelect()
+            "shapeSelect" : new pskl.drawingtools.ShapeSelect(),
+            "colorPicker" : new pskl.drawingtools.ColorPicker()
         };
 
         this.currentSelectedTool = this.toolInstances.simplePen;

js/drawingtools/ColorPicker.js

@@ -0,0 +1,25 @@
+/*
+ * @provide pskl.drawingtools.ColorPicker
+ *
+ * @require pskl.utils
+ */
+(function() {
+	var ns = $.namespace("pskl.drawingtools");
+
+	ns.ColorPicker = function() {
+		this.toolId = "tool-colorpicker";
+		this.helpText = "Color picker";
+	};
+
+	pskl.utils.inherit(ns.ColorPicker, ns.BaseTool);
+	
+	/**
+	 * @override
+	 */
+	ns.ColorPicker.prototype.applyToolAt = function(col, row, color, frame, overlay) {
+		if (frame.containsPixel(col, row)) {
+			var sampledColor = frame.getPixel(col, row);
+			$.publish(Events.PRIMARY_COLOR_SELECTED, [sampledColor]);
+		}
+	};
+})();