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/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/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/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() {