From 4c611d80c5e9708283b647ce1bb37573e6b1cd44 Mon Sep 17 00:00:00 2001 From: Vince Date: Mon, 3 Sep 2012 22:30:53 +0200 Subject: [PATCH] Create palette component Create Palette component (was inside the ToolSelector before) Fix the palette generation as well. --- index.html | 1 + js/Events.js | 8 +++- js/Palette.js | 101 ++++++++++++++++++++++++++++++++++++++++++ js/ToolSelector.js | 62 -------------------------- js/frameSheetModel.js | 15 +++++++ js/piskel.js | 1 + 6 files changed, 125 insertions(+), 63 deletions(-) create mode 100644 js/Palette.js diff --git a/index.html b/index.html index 0e08365e..209d828a 100644 --- a/index.html +++ b/index.html @@ -77,6 +77,7 @@ + diff --git a/js/Events.js b/js/Events.js index abcee5dc..54d8b48f 100644 --- a/js/Events.js +++ b/js/Events.js @@ -15,11 +15,17 @@ Events = { CANVAS_RIGHT_CLICK_RELEASED: "CANVAS_RIGHT_CLICK_RELEASED", /** - * Event to requset a refresh of the display. + * Event to request a refresh of the display. * A bit overkill but, it's just workaround in our current drawing system. * TODO: Remove or rework when redraw system is refactored. */ REFRESH: "REFRESH", + + /** + * The framesheet was reseted and is now probably drastically different. + * Number of frames, content of frames, color used for the palette may have changed. + */ + FRAMESHEET_RESET: "FRAMESHEET_RESET", SHOW_NOTIFICATION: "SHOW_NOTIFICATION", HIDE_NOTIFICATION: "HIDE_NOTIFICATION" diff --git a/js/Palette.js b/js/Palette.js new file mode 100644 index 00000000..e0336c92 --- /dev/null +++ b/js/Palette.js @@ -0,0 +1,101 @@ +/* + * @provide pskl.Palette + * + * @require Constants + * @require Events + */ +$.namespace("pskl"); + +pskl.Palette = (function() { + + var paletteRoot, + paletteColors = []; + + /** + * @private + */ + var onPickerChange_ = function(evt) { + var inputPicker = $(evt.target); + $.publish(Events.COLOR_SELECTED, [inputPicker.val()]); + }; + + /** + * @private + */ + var createPalette_ = function (colors) { + // Always adding transparent color + paletteRoot.html(''); + for(var color in colors) { + if(color != Constants.TRANSPARENT_COLOR) { + addColorToPalette_(color); + } + } + }; + + /** + * @private + */ + var addColorToPalette_ = function (color) { + if (paletteColors.indexOf(color) == -1) { + var colorEl = document.createElement("li"); + colorEl.className = "palette-color"; + colorEl.setAttribute("data-color", color); + colorEl.setAttribute("title", color); + colorEl.style.background = color; + paletteRoot[0].appendChild(colorEl); + paletteColors.push(color); + } + }; + + /** + * @private + */ + var 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(framesheet) { + + paletteRoot = $("#palette"); + + // Initialize palette: + createPalette_(framesheet.getUsedColors()); + + $.subscribe(Events.FRAMESHEET_RESET, function(evt) { + createPalette_(framesheet.getUsedColors()); + }); + + paletteRoot.click(onPaletteColorClick_); + $.subscribe(Events.COLOR_USED, function(evt, color) { + addColorToPalette_(color); + }); + + // Initialize colorpicker: + var colorPicker = $('#color-picker'); + colorPicker.val(Constants.DEFAULT_PEN_COLOR); + colorPicker.change(onPickerChange_); + + } + }; +})(); + + + diff --git a/js/ToolSelector.js b/js/ToolSelector.js index 5b630c59..1cf873fb 100644 --- a/js/ToolSelector.js +++ b/js/ToolSelector.js @@ -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; diff --git a/js/frameSheetModel.js b/js/frameSheetModel.js index f6feafd6..efd77a4e 100644 --- a/js/frameSheetModel.js +++ b/js/frameSheetModel.js @@ -57,6 +57,20 @@ pskl.FrameSheetModel = (function() { return pixels; }, + getUsedColors: function() { + var colors = {}; + for (var frameIndex=0; frameIndex < frames.length; frameIndex++) { + var currentFrame = frames[frameIndex]; + for (var i = 0 ; i < currentFrame.length ; i++) { + var line = currentFrame[i]; + for (var j = 0 ; j < line.length ; j++) { + colors[line[j]] = line[j]; + } + } + } + return colors; + }, + // Could be used to pass around model using long GET param (good enough for simple models) and // do some temporary locastorage serialize: function() { @@ -71,6 +85,7 @@ pskl.FrameSheetModel = (function() { deserialize : function (serialized) { try { frames = JSON.parse(serialized); + $.publish(Events.FRAMESHEET_RESET); } catch (e) { throw "Could not load serialized framesheet." + e.message } diff --git a/js/piskel.js b/js/piskel.js index fabb0bfc..b9683d71 100644 --- a/js/piskel.js +++ b/js/piskel.js @@ -100,6 +100,7 @@ $.namespace("pskl"); this.startAnimation(); pskl.ToolSelector.init(); + pskl.Palette.init(frameSheet); }, getFramesheetIdFromUrl : function() {