Added secondary color support.

Added :
- second color picker
- removed automatic switch to eraser when using right click
- colors are automatically added to palette when selected

css/tools.css

@@ -9,6 +9,7 @@
 
 .tool-icon {
   float: left;
+  cursor : pointer;
   width: 30px;
   height: 30px;
   background-color: transparent;
@@ -74,17 +75,25 @@
 }
 
 .tool-icon:hover {
-  cursor: pointer;
   background-color: #eee;
 }
 
+.tool-color-picker {
+  padding: 5px 0 0 5px;
+  cursor : default;
+}
+
 .tool-color-picker input {
-  width: 12px; height: 12px;
+  width: 8px; height: 8px;
   border: 1px solid black;
   padding: 1px;
   background: white;
-  margin: 7px 0 0 7px;
   cursor: pointer;
+  position : relative;
+}
+
+#secondary-color-picker {
+  top : 8px;
 }
 
 .tool-palette {

index.html

@@ -40,6 +40,7 @@
       </li>
       <li class="tool-icon tool-color-picker">
         <input id="color-picker" class="color {hash:true}" type="text" value="" />
+        <input id="secondary-color-picker" class="color {hash:true}" type="text" value="" />
       </li>
     </ul>
 

js/Palette.js

@@ -14,9 +14,9 @@ pskl.Palette = (function() {
 	/**
 	 * @private
 	 */
-	 var onPickerChange_ = function(evt) {
+	 var onPickerChange_ = function(evt, isPrimary) {
         var inputPicker = $(evt.target);
-        $.publish(Events.COLOR_SELECTED, [inputPicker.val()]);
+        $.publish(Events.COLOR_SELECTED, [inputPicker.val(), evt.data.isPrimary]);
 	 };
 
 	 /**
@@ -52,8 +52,17 @@ pskl.Palette = (function() {
      */
     var onPaletteColorClick_ = function (event) {
       var selectedColor = $(event.target).data("color");
-      var colorPicker = $('#color-picker');
+      if (event.which == 1) { // left button 
-      if (selectedColor == Constants.TRANSPARENT_COLOR) {
+        updateColorPicker(selectedColor, $('#color-picker')[0]);
+        $.publish(Events.COLOR_SELECTED, [selectedColor, true]);
+      } else if (event.which == 3) { // right button
+        updateColorPicker(selectedColor, $('#secondary-color-picker')[0]);
+        $.publish(Events.COLOR_SELECTED, [selectedColor, false]);
+      }
+    };
+
+    var updateColorPicker = function (color, colorPicker) {
+      if (color == Constants.TRANSPARENT_COLOR) {
         // We can set the current palette color to transparent.
         // You can then combine this transparent color with an advanced
         // tool for customized deletions. 
@@ -63,13 +72,12 @@ pskl.Palette = (function() {
         // The colorpicker can't be set to a transparent state.
         // We set its background to white and insert the
         // string "TRANSPARENT" to mimic this state:
-        colorPicker[0].color.fromString("#fff");
+        colorPicker.color.fromString("#fff");
-        colorPicker.val("TRANSPARENT");
+        colorPicker.val(Constants.TRANSPARENT_COLOR);
       } else {
-        colorPicker[0].color.fromString(selectedColor);
+        colorPicker.color.fromString(color);
       }
-      $.publish(Events.COLOR_SELECTED, [selectedColor])
+    }
-    };
 
 	return {
 		init: function(framesheet) {
@@ -83,15 +91,20 @@ pskl.Palette = (function() {
       			createPalette_(framesheet.getUsedColors());
       		});
 
-      		paletteRoot.click(onPaletteColorClick_);
+      		paletteRoot.mouseup(onPaletteColorClick_);
-      		$.subscribe(Events.COLOR_USED, function(evt, color) {
+      		$.subscribe(Events.COLOR_SELECTED, function(evt, color) {
       			addColorToPalette_(color);
       		});
 
       		// Initialize colorpicker:
       		var colorPicker = $('#color-picker');
       		colorPicker.val(Constants.DEFAULT_PEN_COLOR);
-      		colorPicker.change(onPickerChange_);
+      		colorPicker.change({isPrimary : true}, onPickerChange_);
+
+
+          var secondaryColorPicker = $('#secondary-color-picker');
+          secondaryColorPicker.val(Constants.TRANSPARENT_COLOR);
+          secondaryColorPicker.change({isPrimary : false}, onPickerChange_);
 
 		}
 	};

js/ToolSelector.js

@@ -74,18 +74,6 @@ pskl.ToolSelector = (function() {
 			selectTool_(toolInstances.simplePen);
 			// Activate listener on tool panel:
 			$("#tools-container").click(onToolIconClicked_);
-
-			// Special right click handlers (select the eraser tool)
-			$.subscribe(Events.CANVAS_RIGHT_CLICKED, function() {
-				previousSelectedTool = currentSelectedTool;
-				currentSelectedTool = toolInstances.eraser;
-				$.publish(Events.TOOL_SELECTED, [currentSelectedTool]);
-			});
-
-			$.subscribe(Events.CANVAS_RIGHT_CLICK_RELEASED, function() {
-				currentSelectedTool = previousSelectedTool;
-				$.publish(Events.TOOL_SELECTED, [currentSelectedTool]);
-			});
 		}
 	};
 })();

js/piskel.js

@@ -39,7 +39,10 @@ $.namespace("pskl");
       isRightClicked = false, 
       activeFrameIndex = -1, 
       animIndex = 0,
-      penColor = Constants.DEFAULT_PEN_COLOR,
+
+      primaryColor = Constants.DEFAULT_PEN_COLOR,
+      secondaryColor = Constants.TRANSPARENT_COLOR,
+
       currentFrame = null;
       currentToolBehavior = null,
       previousMousemoveTime = 0;
@@ -98,9 +101,13 @@ $.namespace("pskl");
         currentToolBehavior = toolBehavior;
       });
 
-      $.subscribe(Events.COLOR_SELECTED, function(evt, color) {
+      $.subscribe(Events.COLOR_SELECTED, function(evt, color, isPrimary) {
         console.log("Color selected: ", color);
-        penColor = color;
+        if (isPrimary) {
+          primaryColor = color;
+        } else {
+          secondaryColor = color;
+        }
       });
 
       $.subscribe(Events.REFRESH, function() {
@@ -176,7 +183,7 @@ $.namespace("pskl");
         drawingAreaContainer.addEventListener('mousemove', this.onMousemove.bind(this));
         drawingAreaContainer.style.width = framePixelWidth * drawingCanvasDpi + "px";
         drawingAreaContainer.style.height = framePixelHeight * drawingCanvasDpi + "px";
-        drawingAreaContainer.addEventListener('contextmenu', this.onCanvasContextMenu);
+        document.body.addEventListener('contextmenu', this.onCanvasContextMenu);
     },
 
     removeFrame: function(frameIndex) {     
@@ -190,6 +197,14 @@ $.namespace("pskl");
       this.setActiveFrameAndRedraw(frameIndex + 1);
     },
 
+    getCurrentColor : function () {
+      if(isRightClicked) {
+        return secondaryColor;
+      } else {
+        return primaryColor;
+      }
+    },
+
     onMousedown : function (event) {
       isClicked = true;
       
@@ -197,11 +212,12 @@ $.namespace("pskl");
         isRightClicked = true;
         $.publish(Events.CANVAS_RIGHT_CLICKED);
       }
+
       var spriteCoordinate = this.getSpriteCoordinate(event);
       currentToolBehavior.applyToolAt(
         spriteCoordinate.col,
         spriteCoordinate.row,
-        penColor,
+        this.getCurrentColor(),
         this.drawingController
       );
         
@@ -218,7 +234,7 @@ $.namespace("pskl");
           currentToolBehavior.moveToolAt(
             spriteCoordinate.col,
             spriteCoordinate.row,
-            penColor,
+            this.getCurrentColor(),
             this.drawingController
           );
           
@@ -251,7 +267,7 @@ $.namespace("pskl");
         currentToolBehavior.releaseToolAt(
           spriteCoordinate.col,
           spriteCoordinate.row,
-          penColor,
+          this.getCurrentColor(),
           this.drawingController
         );