diff --git a/js/Constants.js b/js/Constants.js
index abd47a3..38253dc 100644
--- a/js/Constants.js
+++ b/js/Constants.js
@@ -1,3 +1,3 @@
var Constants = {
- TRANSPARENT_COLOR : "tc"
+ TRANSPARENT_COLOR : "TRANSPARENT"
};
\ No newline at end of file
diff --git a/js/drawingtools/Stroke.js b/js/drawingtools/Stroke.js
index 68229d5..ca4cdc4 100644
--- a/js/drawingtools/Stroke.js
+++ b/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);
}
};
diff --git a/js/piskel.js b/js/piskel.js
index 6051bb5..04152da 100644
--- a/js/piskel.js
+++ b/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;
}