mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
6528c7724b
!! NOT STABLE !! Initial implementation. No UI update yet. Check js/model/Piskel.js and js/model/Layer.js for an overview of the new API. Piskels can be saved on the existing service. Previous piskels cannot be loaded. This should be fixed soon.
85 lines
2.7 KiB
JavaScript
85 lines
2.7 KiB
JavaScript
(function () {
|
|
var ns = $.namespace("pskl.controller");
|
|
|
|
ns.PaletteController = function () {};
|
|
|
|
/**
|
|
* @public
|
|
*/
|
|
ns.PaletteController.prototype.init = function() {
|
|
var transparentColorPalette = $(".palette-color[data-color=TRANSPARENT]");
|
|
transparentColorPalette.mouseup($.proxy(this.onPaletteColorClick_, this));
|
|
|
|
$.subscribe(Events.PRIMARY_COLOR_UPDATED, $.proxy(function(evt, color) {
|
|
this.updateColorPicker_(color, $('#color-picker'));
|
|
this.addColorToPalette_(color);
|
|
}, this));
|
|
|
|
$.subscribe(Events.SECONDARY_COLOR_UPDATED, $.proxy(function(evt, color) {
|
|
this.updateColorPicker_(color, $('#secondary-color-picker'));
|
|
this.addColorToPalette_(color);
|
|
}, this));
|
|
|
|
// Initialize colorpickers:
|
|
var colorPicker = $('#color-picker');
|
|
colorPicker.val(Constants.DEFAULT_PEN_COLOR);
|
|
colorPicker.change({isPrimary : true}, $.proxy(this.onPickerChange_, this));
|
|
|
|
|
|
var secondaryColorPicker = $('#secondary-color-picker');
|
|
secondaryColorPicker.val(Constants.TRANSPARENT_COLOR);
|
|
secondaryColorPicker.change({isPrimary : false}, $.proxy(this.onPickerChange_, this));
|
|
|
|
};
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
ns.PaletteController.prototype.onPickerChange_ = function(evt, isPrimary) {
|
|
var inputPicker = $(evt.target);
|
|
if(evt.data.isPrimary) {
|
|
$.publish(Events.PRIMARY_COLOR_SELECTED, [inputPicker.val()]);
|
|
} else {
|
|
$.publish(Events.SECONDARY_COLOR_SELECTED, [inputPicker.val()]);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
ns.PaletteController.prototype.onPaletteColorClick_ = function (event) {
|
|
var selectedColor = $(event.target).data("color");
|
|
var isLeftClick = (event.which == 1);
|
|
var isRightClick = (event.which == 3);
|
|
if (isLeftClick) {
|
|
$.publish(Events.PRIMARY_COLOR_SELECTED, [selectedColor]);
|
|
} else if (isRightClick) {
|
|
$.publish(Events.SECONDARY_COLOR_SELECTED, [selectedColor]);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
ns.PaletteController.prototype.updateColorPicker_ = function (color, colorPicker) {
|
|
if (color == Constants.TRANSPARENT_COLOR) {
|
|
// We can set the current palette color to transparent.
|
|
// You can then combine this transparent color with an advanced
|
|
// tool for customized deletions.
|
|
// Eg: bucket + transparent: Delete a colored area
|
|
// Stroke + transparent: hollow out the equivalent of a stroke
|
|
|
|
// The colorpicker can't be set to a transparent state.
|
|
// We set its background to white and insert the
|
|
// string "TRANSPARENT" to mimic this state:
|
|
colorPicker[0].color.fromString("#fff");
|
|
colorPicker.val(Constants.TRANSPARENT_COLOR);
|
|
} else {
|
|
colorPicker[0].color.fromString(color);
|
|
}
|
|
};
|
|
})();
|
|
|
|
|
|
|