Merge pull request #13 from grosbouddha/add-transparent-color

Add transparent color

css/style.css

@@ -159,13 +159,44 @@ ul, li {
  * Tool section:
  */
 
+ .color-tool {
+  
+ }
+
 .palette .palette-color {
+  cursor: pointer;
   display : inline-block;
   height : 20px;
   width : 20px;
   margin : 5px;
 }
 
+.palette .palette-color.transparent-color {
+  background-color: white;
+  height : 16px;
+  width : 16px;
+  border: 2px solid #000;
+
+  background-image: -webkit-gradient(
+    linear,
+    left top,
+    right bottom,
+    color-stop(0, #fff),
+    color-stop(0.45, #fff),
+    color-stop(0.5, #ff0000),
+    color-stop(0.55, #fff),
+    color-stop(1, #fff)
+  );
+  background-image: -moz-linear-gradient(
+      left top,
+      #fff 0%,
+      #fff 45%,
+      #f00 50%,
+      #fff 55%,
+      #fff 100%
+  );
+}
+
 .tools-container {
   float: left;
 }

index.html

@@ -39,9 +39,13 @@
       <div class="tool-icon tool-paint-bucket" data-tool-id="tool-paint-bucket" title="Bucket tool"></div>
       <div class="tool-icon tool-stroke" data-tool-id="tool-stroke" title="Stroke tool"></div>
       
-      <input id="color-picker" class="color {hash:true}" type="text" value=""/>
-      
-      <ul id="palette" class="palette" onclick="piskel.onPaletteClick(event)"></ul>
+      <div class="color-tool">
+        <input id="color-picker" class="color {hash:true}" type="text" value=""/>
+        
+        <ul id="palette" class="palette" onclick="piskel.onPaletteClick(event)">
+          <span class="palette-color transparent-color" data-color="TRANSPARENT" title="Transparent"></span>
+        </ul>
+      </div>
     </div>
 
     <!-- Animation preview: -->

js/Constants.js

@@ -1,3 +1,3 @@
 var Constants = {
-	TRANSPARENT_COLOR : "tc"
+	TRANSPARENT_COLOR : "TRANSPARENT"
 };

js/drawingtools/Stroke.js

@@ -53,7 +53,17 @@
 			0, 0, this.canvasOverlay.width, this.canvasOverlay.height);
 		
 		// Drawing current stroke:
-		for(var i = 0; i< strokePoints.length; i++) {			
+		for(var i = 0; i< strokePoints.length; i++) {
+
+			if(color == Constants.TRANSPARENT_COLOR) {
+				// When mousemoving the stroke tool, we draw in the canvas overlay above the drawing canvas.
+				// If the stroke color is transparent, we won't be
+				// able to see it during the movement.
+				// We set it to a semi-opaque white during the tool mousemove allowing to see colors below the stroke.
+				// When the stroke tool will be released, It will draw a transparent stroke, 
+				// eg deleting the equivalent of a stroke.		
+				color = "rgba(255, 255, 255, 0.6)";
+			}			
 			this.drawPixelInCanvas(strokePoints[i].col, strokePoints[i].row, this.canvasOverlay, color, dpi);
 		}
 	};

js/piskel.js

@@ -467,9 +467,21 @@ $.namespace("pskl");
 
     onPaletteClick : function (event) {
       var color = $(event.target).data("color");
-      if (null !== color) {
-        //debugger;
-        var colorPicker = $('#color-picker');
+      var colorPicker = $('#color-picker');
+      if (color == "TRANSPARENT") {
+        // We can set the current palette color to transparent.
+        // You can then combine this transparent color with an advanced
+        // tool for customized deletions. 
+        // Eg: bucket + transparent: Delete a colored area
+        //     Stroke + transparent: hollow out the equivalent of a stroke
+        penColor = Constants.TRANSPARENT_COLOR;
+        
+        // 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.val("TRANSPARENT");
+      } else if (null !== color) {
         colorPicker[0].color.fromString(color);
         penColor = color;
       }