diff --git a/js/Constants.js b/js/Constants.js index 1f676f0e..1290e5e9 100644 --- a/js/Constants.js +++ b/js/Constants.js @@ -8,6 +8,12 @@ var Constants = { * strokes and rectangles: */ SELECTION_TRANSPARENT_COLOR: 'rgba(255, 255, 255, 0.6)', + + /* + * When a tool is hovering the drawing canvas, we highlight the eventual + * pixel target with this color: + */ + TOOL_TARGET_HIGHLIGHT_COLOR: 'rgba(255, 255, 255, 0.2)', /* * Default entry point for piskel web service: diff --git a/js/drawingtools/BaseTool.js b/js/drawingtools/BaseTool.js index d2fd9477..b0c1dba5 100644 --- a/js/drawingtools/BaseTool.js +++ b/js/drawingtools/BaseTool.js @@ -12,7 +12,24 @@ ns.BaseTool.prototype.moveToolAt = function(col, row, color, frame, overlay) {}; - ns.BaseTool.prototype.moveUnactiveToolAt = function(col, row, color, frame, overlay) {}; + ns.BaseTool.prototype.moveUnactiveToolAt = function(col, row, color, frame, overlay) { + if (overlay.containsPixel(col, row)) { + if (!isNaN(this.highlightedPixelCol) && + !isNaN(this.highlightedPixelRow) && + (this.highlightedPixelRow != row || + this.highlightedPixelCol != col)) { + + // Clean the previously highlighted pixel: + overlay.clear(); + } + + // Show the current pixel targeted by the tool: + overlay.setPixel(col, row, Constants.TOOL_TARGET_HIGHLIGHT_COLOR); + + this.highlightedPixelCol = col; + this.highlightedPixelRow = row; + } + }; ns.BaseTool.prototype.releaseToolAt = function(col, row, color, frame, overlay) {};