Merge pull request #183 from juliandescottes/feature-lighten-darken-simple

Feature lighten darken simple

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/DrawingController.js

@@ -75,6 +75,7 @@
 
     window.addEventListener('mouseup', this.onMouseup_.bind(this));
     window.addEventListener('mousemove', this.onMousemove_.bind(this));
+    window.addEventListener('keyup', this.onKeyup_.bind(this));
 
     // Deactivate right click:
     body.contextmenu(this.onCanvasContextMenu_);
@@ -146,40 +147,54 @@
    * @private
    */
   ns.DrawingController.prototype.onMousemove_ = function (event) {
+    this._clientX = event.clientX;
+    this._clientY = event.clientY;
+
     var currentTime = new Date().getTime();
     // Throttling of the mousemove event:
 
     if ((currentTime - this.previousMousemoveTime) > Constants.MOUSEMOVE_THROTTLING ) {
-      var coords = this.renderer.getCoordinates(event.clientX, event.clientY);
+      this.moveTool_(this._clientX, this._clientY, event);
-      var currentFrame = this.piskelController.getCurrentFrame();
-
-      if (this.isClicked) {
-        // Warning : do not call setCurrentButton here
-        // mousemove do not have the correct mouse button information on all browsers
-        this.currentToolBehavior.moveToolAt(
-          coords.x | 0,
-          coords.y | 0,
-          this.getCurrentColor_(event),
-          currentFrame,
-          this.overlayFrame,
-          event
-        );
-      } else {
-
-        this.currentToolBehavior.moveUnactiveToolAt(
-          coords.x,
-          coords.y,
-          this.getCurrentColor_(event),
-          currentFrame,
-          this.overlayFrame,
-          event
-        );
-      }
-      $.publish(Events.CURSOR_MOVED, [coords.x, coords.y]);
       this.previousMousemoveTime = currentTime;
     }
   };
 
+  /**
+   * @private
+   */
+  ns.DrawingController.prototype.onKeyup_ = function (event) {
+    this.moveTool_(this._clientX, this._clientY, event);
+  };
+
+  ns.DrawingController.prototype.moveTool_ = function (x, y, event) {
+    var coords = this.renderer.getCoordinates(x, y);
+    var currentFrame = this.piskelController.getCurrentFrame();
+
+    if (this.isClicked) {
+      // Warning : do not call setCurrentButton here
+      // mousemove do not have the correct mouse button information on all browsers
+      this.currentToolBehavior.moveToolAt(
+        coords.x | 0,
+        coords.y | 0,
+        this.getCurrentColor_(),
+        currentFrame,
+        this.overlayFrame,
+        event
+      );
+    } else {
+
+      this.currentToolBehavior.moveUnactiveToolAt(
+        coords.x,
+        coords.y,
+        this.getCurrentColor_(),
+        currentFrame,
+        this.overlayFrame,
+        event
+      );
+    }
+    $.publish(Events.CURSOR_MOVED, [coords.x, coords.y]);
+  };
+
   ns.DrawingController.prototype.onMousewheel_ = function (jQueryEvent) {
     var event = jQueryEvent.originalEvent;
     var delta = event.wheelDeltaY || (-2 * event.deltaY);

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/Eraser.js

@@ -21,4 +21,10 @@
   ns.Eraser.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {
     this.superclass.applyToolAt.call(this, col, row, Constants.TRANSPARENT_COLOR, frame, overlay, event);
   };
+  /**
+   * @override
+   */
+  ns.Eraser.prototype.releaseToolAt = function(col, row, color, frame, overlay, event) {
+    this.superclass.releaseToolAt.call(this, col, row, Constants.TRANSPARENT_COLOR, frame, overlay, event);
+  };
 })();

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/ShapeTool.js

@@ -42,11 +42,6 @@
    */
   ns.ShapeTool.prototype.releaseToolAt = function(col, row, color, frame, overlay, event) {
     overlay.clear();
-    if (event.shiftKey) {
-      var scaled = this.getScaledCoordinates_(col, row);
-      col = scaled.col;
-      row = scaled.row;
-    }
     var coords = this.getCoordinates_(col, row, event);
     this.draw_(coords.col, coords.row, color, frame);
 

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",