mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity

Issue #301 : Switch between light and dark highlighted pixel color

Browse Source
This commit is contained in:
jdescottes 2015-09-12 17:54:11 +02:00
parent 744709b15b
commit 8c629bd842
2 changed files with 40 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/js/Constants.js
View File

@ -28,13 +28,14 @@ var Constants = {
* Fake semi-transparent color used to highlight transparent * Fake semi-transparent color used to highlight transparent
* strokes and rectangles: * strokes and rectangles:
*/ */
SELECTION_TRANSPARENT_COLOR: 'rgba(255, 255, 255, 0.6)', SELECTION_TRANSPARENT_COLOR: 'rgba(160, 215, 240, 0.6)',
/* /*
* When a tool is hovering the drawing canvas, we highlight the eventual * When a tool is hovering the drawing canvas, we highlight the eventual
* pixel target with this color: * pixel target with this color:
*/ */
TOOL_TARGET_HIGHLIGHT_COLOR: 'rgba(255, 255, 255, 0.2)', TOOL_HIGHLIGHT_COLOR_LIGHT: 'rgba(255, 255, 255, 0.2)',
TOOL_HIGHLIGHT_COLOR_DARK: 'rgba(0, 0, 0, 0.2)',
ZOOMED_OUT_BACKGROUND_COLOR : '#A0A0A0', ZOOMED_OUT_BACKGROUND_COLOR : '#A0A0A0',

24
src/js/tools/drawing/BaseTool.js
View File

@ -20,8 +20,14 @@
ns.BaseTool.prototype.replay = Constants.ABSTRACT_FUNCTION; ns.BaseTool.prototype.replay = Constants.ABSTRACT_FUNCTION;
ns.BaseTool.prototype.moveUnactiveToolAt = function (col, row, color, frame, overlay, event) { ns.BaseTool.prototype.moveUnactiveToolAt = function (col, row, color, frame, overlay, event) {
if (overlay.containsPixel(col, row)) { if (overlay.containsPixel(col, row)) {
this.updateHighlightedPixel(frame, overlay, col, row);
} else {
this.hideHighlightedPixel(overlay);
}
};
ns.BaseTool.prototype.updateHighlightedPixel = function (frame, overlay, col, row) {
if (!isNaN(this.highlightedPixelCol) && if (!isNaN(this.highlightedPixelCol) &&
!isNaN(this.highlightedPixelRow) && !isNaN(this.highlightedPixelRow) &&
(this.highlightedPixelRow != row || (this.highlightedPixelRow != row ||
@ -31,13 +37,23 @@
overlay.clear(); overlay.clear();
} }
// Show the current pixel targeted by the tool: var frameColor = frame.getPixel(col, row);
overlay.setPixel(col, row, Constants.TOOL_TARGET_HIGHLIGHT_COLOR); overlay.setPixel(col, row, this.getHighlightColor_(frameColor));
this.highlightedPixelCol = col; this.highlightedPixelCol = col;
this.highlightedPixelRow = row; this.highlightedPixelRow = row;
};
ns.BaseTool.prototype.getHighlightColor_ = function (frameColor) {
if (!frameColor) {
return Constants.TOOL_HIGHLIGHT_COLOR_DARK;
}
var luminance = window.tinycolor(frameColor).toHsl().l;
if (luminance > 0.5) {
return Constants.TOOL_HIGHLIGHT_COLOR_DARK;
} else { } else {
this.hideHighlightedPixel(overlay); return Constants.TOOL_HIGHLIGHT_COLOR_LIGHT;
} }
}; };