diff --git a/src/css/tools.css b/src/css/tools.css index 6f38e313..4fe7d559 100644 --- a/src/css/tools.css +++ b/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; } diff --git a/src/img/tools/lighten.png b/src/img/tools/lighten.png new file mode 100644 index 00000000..59e036fb Binary files /dev/null and b/src/img/tools/lighten.png differ diff --git a/src/js/controller/DrawingController.js b/src/js/controller/DrawingController.js index b9db4ed3..d2fcd37d 100644 --- a/src/js/controller/DrawingController.js +++ b/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); - 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.moveTool_(this._clientX, this._clientY, event); 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); diff --git a/src/js/controller/ToolController.js b/src/js/controller/ToolController.js index e3e77b07..0ea26d64 100644 --- a/src/js/controller/ToolController.js +++ b/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()) ]; diff --git a/src/js/drawingtools/Eraser.js b/src/js/drawingtools/Eraser.js index 27e169c7..27243f7e 100644 --- a/src/js/drawingtools/Eraser.js +++ b/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); + }; })(); \ No newline at end of file diff --git a/src/js/drawingtools/Lighten.js b/src/js/drawingtools/Lighten.js new file mode 100644 index 00000000..36b0440c --- /dev/null +++ b/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 + }); + }; +})(); \ No newline at end of file diff --git a/src/js/drawingtools/ShapeTool.js b/src/js/drawingtools/ShapeTool.js index a99965d2..df9d12b5 100644 --- a/src/js/drawingtools/ShapeTool.js +++ b/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); diff --git a/src/js/drawingtools/SimplePen.js b/src/js/drawingtools/SimplePen.js index ffbfa845..dd9ab9ce 100644 --- a/src/js/drawingtools/SimplePen.js +++ b/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; diff --git a/src/piskel-script-list.js b/src/piskel-script-list.js index 7b666532..c3f4c034 100644 --- a/src/piskel-script-list.js +++ b/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",