Support secondary color for color picker

js/Constants.js

@@ -28,5 +28,8 @@ var Constants = {
     PISKEL_SERVICE_URL: 'http://3.piskel-app.appspot.com',
 
     GRID_STROKE_WIDTH: 1,
-    GRID_STROKE_COLOR: "lightgray"
+    GRID_STROKE_COLOR: "lightgray",
+
+    LEFT_BUTTON : "left_button_1",
+    RIGHT_BUTTON : "right_button_2",
 };

js/controller/DrawingController.js

@@ -98,7 +98,8 @@
         coords.col, coords.row,
         this.getCurrentColor_(),
         this.framesheet.getCurrentFrame(),
-        this.overlayFrame
+        this.overlayFrame,
+        this.wrapEvtInfo_(event)
       );      
         
       $.publish(Events.LOCALSTORAGE_REQUEST);
@@ -118,7 +119,8 @@
             coords.col, coords.row,
             this.getCurrentColor_(),
             this.framesheet.getCurrentFrame(),
-            this.overlayFrame
+            this.overlayFrame,
+            this.wrapEvtInfo_(event)
           );
       
           // TODO(vincz): Find a way to move that to the model instead of being at the interaction level.
@@ -131,7 +133,8 @@
             coords.col, coords.row,
             this.getCurrentColor_(),
             this.framesheet.getCurrentFrame(),
-            this.overlayFrame
+            this.overlayFrame,
+            this.wrapEvtInfo_(event)
           );
         }
         this.previousMousemoveTime = currentTime;
@@ -157,13 +160,27 @@
           coords.col, coords.row,
           this.getCurrentColor_(),
           this.framesheet.getCurrentFrame(),
-          this.overlayFrame
+          this.overlayFrame,
+          this.wrapEvtInfo_(event)
         );
 
         $.publish(Events.TOOL_RELEASED);
       }
     },
 
+    /**
+     * @private
+     */
+    ns.DrawingController.prototype.wrapEvtInfo_ = function (event) {
+      var evtInfo = {};
+      if (event.button == 0) {
+        evtInfo.button = Constants.LEFT_BUTTON;
+      } else if (event.button == 2) {
+        evtInfo.button = Constants.RIGHT_BUTTON;
+      }
+      return evtInfo;
+    },    
+
     /**
      * @private
      */

js/controller/PaletteController.js

@@ -18,27 +18,7 @@
       $.publish(Events.SECONDARY_COLOR_SELECTED, [inputPicker.val()]);
     }
   };
-
+  
-  /**
-   * @private
-   */
-  ns.PaletteController.prototype.createPaletteMarkup_ = function (colors) {
-    // Always adding transparent color
-    this.paletteRoot.html('<span class="palette-color transparent-color" data-color="TRANSPARENT" title="Transparent"></span>');
-    
-    for(var i=0, l=this.paletteColors.length; i<l; i++) {
-      if(color != Constants.TRANSPARENT_COLOR) {
-        var color = this.paletteColors[i];
-        var colorEl = document.createElement("li");    
-        colorEl.className = "palette-color";
-        colorEl.setAttribute("data-color", color);
-        colorEl.setAttribute("title", color);
-        colorEl.style.background = color;
-        this.paletteRoot.append(colorEl);
-      }
-    }
-  };
-
   /**
    * @private
    */
@@ -102,11 +82,9 @@
 
     // Initialize palette:
     this.addColorsToPalette_(this.framesheet.getUsedColors());
-    this.createPaletteMarkup_();
 
     $.subscribe(Events.FRAMESHEET_RESET, $.proxy(function(evt) {
       this.addColorsToPalette_(this.framesheet.getUsedColors());
-      this.createPaletteMarkup_();
     }, this));
 
     this.paletteRoot.mouseup($.proxy(this.onPaletteColorClick_, this));
@@ -114,13 +92,11 @@
     $.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));
 
     // Initialize colorpickers:

js/drawingtools/ColorPicker.js

@@ -16,10 +16,14 @@
 	/**
 	 * @override
 	 */
-	ns.ColorPicker.prototype.applyToolAt = function(col, row, color, frame, overlay) {
+	ns.ColorPicker.prototype.applyToolAt = function(col, row, color, frame, overlay, context) {
 		if (frame.containsPixel(col, row)) {
 			var sampledColor = frame.getPixel(col, row);
-			$.publish(Events.PRIMARY_COLOR_SELECTED, [sampledColor]);
+			if (context.button == Constants.LEFT_BUTTON) {
+				$.publish(Events.PRIMARY_COLOR_SELECTED, [sampledColor]);
+			} else if (context.button == Constants.RIGHT_BUTTON) {
+				$.publish(Events.SECONDARY_COLOR_SELECTED, [sampledColor]);
+			}
 		}
 	};
 })();