Merge pull request #22 from grosbouddha/create-palette-component

Create palette component

index.html

@@ -77,6 +77,7 @@
   <!-- Application libraries-->
   <script src="js/FrameSheetModel.js"></script>
   <script src="js/LocalStorageService.js"></script>
+  <script src="js/Palette.js"></script>
   <script src="js/Notification.js"></script>
   <script src="js/drawingtools/BaseTool.js"></script>
   <script src="js/drawingtools/SimplePen.js"></script>

js/Events.js

@@ -15,12 +15,18 @@ 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"
 };

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
 			}	

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('<span class="palette-color transparent-color" data-color="TRANSPARENT" title="Transparent"></span>');
+	 	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_);
+
+		}
+	};
+})();
+
+
+

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;

js/piskel.js

@@ -100,6 +100,7 @@ $.namespace("pskl");
       this.startAnimation();
       
       pskl.ToolSelector.init();
+      pskl.Palette.init(frameSheet);
     },
 
     getFramesheetIdFromUrl : function() {