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

Create palette component

Browse Source 
Create Palette component (was inside the ToolSelector before)
Fix the palette generation as well.
This commit is contained in:
Vince
2012-09-03 22:30:53 +02:00
parent 2a20cc90ea
commit 4c611d80c5
6 changed files with 125 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
js/ToolSelector.js
View File

@@ -9,8 +9,6 @@ $.namespace("pskl");
pskl.ToolSelector = (function() {
var paletteColors = [];
var toolInstances = {
"simplePen" : new pskl.drawingtools.SimplePen(),
"eraser" : new pskl.drawingtools.Eraser(),
@@ -68,54 +66,6 @@ pskl.ToolSelector = (function() {
}
};
/**
* @private
*/
var onPickerChange_ = function(evt) {
var inputPicker = $(evt.target);
$.publish(Events.COLOR_SELECTED, [inputPicker.val()]);
};
/**
* @private
*/
var addColorToPalette_ = function (color) {
if (paletteColors.indexOf(color) == -1) {
var paletteEl = $("#palette");
var colorEl = document.createElement("li");
colorEl.className = "palette-color";
colorEl.setAttribute("data-color", color);
colorEl.setAttribute("title", color);
colorEl.style.background = color;
paletteEl[0].appendChild(colorEl);
paletteColors.push(color);
}
},
/**
* @private
*/
onPaletteColorClick_ = function (event) {
var selectedColor = $(event.target).data("color");
var colorPicker = $('#color-picker');
if (selectedColor == 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("TRANSPARENT");
} else {
colorPicker[0].color.fromString(selectedColor);
}
$.publish(Events.COLOR_SELECTED, [selectedColor])
};
return {
init: function() {
@@ -125,18 +75,6 @@ pskl.ToolSelector = (function() {
// Activate listener on tool panel:
$("#tools-container").click(onToolIconClicked_);
// Initialize colorpicker:
var colorPicker = $('#color-picker');
colorPicker.val(Constants.DEFAULT_PEN_COLOR);
colorPicker.change(onPickerChange_);
// Initialize palette:
$("#palette").click(onPaletteColorClick_);
$.subscribe(Events.COLOR_USED, function(evt, color) {
addColorToPalette_(color);
});
// Special right click handlers (select the eraser tool)
$.subscribe(Events.CANVAS_RIGHT_CLICKED, function() {
previousSelectedTool = currentSelectedTool;