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
* 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
* 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',

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

@ -13,35 +13,51 @@
pskl.utils.inherit(ns.BaseTool, pskl.tools.Tool);
ns.BaseTool.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {};
ns.BaseTool.prototype.applyToolAt = function (col, row, color, frame, overlay, event) {};
ns.BaseTool.prototype.moveToolAt = function(col, row, color, frame, overlay, event) {};
ns.BaseTool.prototype.moveToolAt = function (col, row, color, frame, overlay, event) {};
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 (!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;
this.updateHighlightedPixel(frame, overlay, col, row);
} else {
this.hideHighlightedPixel(overlay);
}
};
ns.BaseTool.prototype.hideHighlightedPixel = function(overlay) {
ns.BaseTool.prototype.updateHighlightedPixel = function (frame, overlay, col, row) {
if (!isNaN(this.highlightedPixelCol) &&
!isNaN(this.highlightedPixelRow) &&
(this.highlightedPixelRow != row ||
this.highlightedPixelCol != col)) {
// Clean the previously highlighted pixel:
overlay.clear();
}
var frameColor = frame.getPixel(col, row);
overlay.setPixel(col, row, this.getHighlightColor_(frameColor));
this.highlightedPixelCol = col;
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 {
return Constants.TOOL_HIGHLIGHT_COLOR_LIGHT;
}
};
ns.BaseTool.prototype.hideHighlightedPixel = function (overlay) {
if (this.highlightedPixelRow !== null && this.highlightedPixelCol !== null) {
try {
overlay.setPixel(this.highlightedPixelCol, this.highlightedPixelRow, Constants.TRANSPARENT_COLOR);
@ -61,7 +77,7 @@
});
};
ns.BaseTool.prototype.releaseToolAt = function(col, row, color, frame, overlay, event) {};
ns.BaseTool.prototype.releaseToolAt = function (col, row, color, frame, overlay, event) {};
/**
* Bresenham line algorithm: Get an array of pixels from
@ -72,7 +88,7 @@
*
* @private
*/
ns.BaseTool.prototype.getLinePixels_ = function(x0, x1, y0, y1) {
ns.BaseTool.prototype.getLinePixels_ = function (x0, x1, y0, y1) {
x1 = pskl.utils.normalize(x1, 0);
y1 = pskl.utils.normalize(y1, 0);