piskel/src/js/drawingtools/Lighten.js
jdescottes 0c441c214b Feature : darken lighten
Added new tool to lighten/darken. By default is in lightening mode. If the
user holds ctrl/cmd while using the tool, switches to darkening mode.

If the user holds shift while using the tool, then each pixel can only be
modified once per tool usage (ie user keeps hovering the same pixel, it
won't get lighter/darker after the first time). Can be useful if you want
to keep control of the amount of colors in the sprite.

TODO :
- Ability to select explicitly lighten/darken (context menu for
tools).
- Ability to set the 'step' (ie the strength of the lighten/darken)
2014-05-16 23:51:04 +02:00

63 lines
1.6 KiB
JavaScript

/**
* @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
});
};
})();