Feature : darken lighten

Added new tool to lighten/darken. By default is in lightening mode. If the
user holds ctrl/cmd while using the tool, switches to darkening mode.

If the user holds shift while using the tool, then each pixel can only be
modified once per tool usage (ie user keeps hovering the same pixel, it
won't get lighter/darker after the first time). Can be useful if you want
to keep control of the amount of colors in the sprite.

TODO :
- Ability to select explicitly lighten/darken (context menu for
tools).
- Ability to set the 'step' (ie the strength of the lighten/darken)

src/css/tools.css

@@ -6,6 +6,7 @@
 }
 
 .tool-icon {
+  position : relative;
   cursor : pointer;
   width: 46px;
   height: 46px;
@@ -19,10 +20,16 @@
 .tool-icon.selected {
   cursor: default;
   background-color: #444;
+}
+
+.tool-icon.selected:before {
+  content:"";
+  position : absolute;
+  height : 100%;
+  width : 100%;
   border: 3px solid gold;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
-  background-position: 9px 9px;
 }
 
 .tool-icon:hover {
@@ -42,10 +49,6 @@
   background-size: 38px 27px;
 }
 
-.tool-icon.tool-vertical-mirror-pen.selected {
-  background-position: -3px 7px;
-}
-
 .tool-icon.tool-paint-bucket {
   background-image: url(../img/tools/paintbucket.png);
 }
@@ -79,15 +82,16 @@
   background-size: 24px 20px;
 }
 
-.tool-icon.tool-rectangle.selected,
-.tool-icon.tool-rectangle-select.selected {
-  background-position: 9px 11px;
-}
-
 .tool-icon.tool-shape-select {
   background-image: url(../img/tools/magicwand.png);
 }
 
+.tool-icon.tool-lighten {
+  background-image: url(../img/tools/lighten.png);
+  background-size: 30px 30px;
+  background-position: 8px 8px;
+}
+
 .tool-icon.tool-colorpicker {
   background-image: url(../img/tools/eyedropper.png);
   background-size: 23px 23px;
@@ -105,7 +109,8 @@
   cursor: url(../img/icons/vertical-mirror-pen.png) 5 15, pointer;
 }
 
-.tool-pen .drawing-canvas-container:hover {
+.tool-pen .drawing-canvas-container:hover,
+.tool-lighten .drawing-canvas-container:hover {
   cursor: url(../img/icons/pen.png) 0 15, pointer;
 }
 

src/js/controller/ToolController.js

@@ -17,6 +17,7 @@
       toDescriptor('move', 'M', new pskl.drawingtools.Move()),
       toDescriptor('rectangleSelect', 'S', new pskl.drawingtools.RectangleSelect()),
       toDescriptor('shapeSelect', 'Z', new pskl.drawingtools.ShapeSelect()),
+      toDescriptor('lighten', 'U', new pskl.drawingtools.Lighten()),
       toDescriptor('colorPicker', 'O', new pskl.drawingtools.ColorPicker())
     ];
 

src/js/drawingtools/Lighten.js

@@ -0,0 +1,63 @@
+/**
+ * @provide pskl.drawingtools.Eraser
+ *
+ * @require Constants
+ * @require pskl.utils
+ */
+(function() {
+  var ns = $.namespace("pskl.drawingtools");
+
+  ns.Lighten = function() {
+    this.superclass.constructor.call(this);
+    this.toolId = "tool-lighten";
+    this.helpText = "Lighten / Darken";
+    this.step = 3;
+    this.resetUsedPixels_();
+  };
+
+  pskl.utils.inherit(ns.Lighten, ns.SimplePen);
+
+  ns.Lighten.prototype.resetUsedPixels_ = function() {
+    this.usedPixels_ = {
+      darken : {},
+      lighten : {}
+    };
+  };
+  /**
+   * @override
+   */
+  ns.Lighten.prototype.applyToolAt = function(col, row, color, frame, overlay, event, mouseButton) {
+    var isDarken = event.ctrlKey || event.cmdKey;
+    var isSinglePass = event.shiftKey;
+
+    var usedPixels = isDarken ? this.usedPixels_.darken : this.usedPixels_.lighten;
+
+    var key = col+'-'+row;
+    if (isSinglePass && usedPixels[key]) {
+      return;
+    }
+
+    var step = isSinglePass ? this.step * 2 : this.step;
+    var pixelColor = frame.getPixel(col, row);
+    if (pixelColor === Constants.TRANSPARENT_COLOR) {
+      pixelColor = isDarken ? 'white' : 'black';
+    }
+    if (isDarken) {
+      color = window.tinycolor.darken(pixelColor, step);
+    } else {
+      color = window.tinycolor.lighten(pixelColor, step);
+    }
+
+    if (color) {
+      usedPixels[key] = true;
+      this.superclass.applyToolAt.call(this, col, row, color.toRgbString(), frame, overlay, event);
+    }
+  };
+
+  ns.Lighten.prototype.releaseToolAt = function(col, row, color, frame, overlay, event) {
+    this.resetUsedPixels_();
+    $.publish(Events.PISKEL_SAVE_STATE, {
+      type : pskl.service.HistoryService.SNAPSHOT
+    });
+  };
+})();

src/js/drawingtools/SimplePen.js

@@ -46,7 +46,7 @@
       }
     }
     else {
-      this.applyToolAt(col, row, color, frame, overlay);
+      this.applyToolAt(col, row, color, frame, overlay, event);
     }
 
     this.previousCol = col;

src/piskel-script-list.js

@@ -114,6 +114,7 @@
   "js/drawingtools/BaseTool.js",
   "js/drawingtools/ShapeTool.js",
   "js/drawingtools/SimplePen.js",
+  "js/drawingtools/Lighten.js",
   "js/drawingtools/VerticalMirrorPen.js",
   "js/drawingtools/Eraser.js",
   "js/drawingtools/Stroke.js",