merge from master

js/Palette.js

@@ -36,7 +36,7 @@ pskl.Palette = (function() {
 	  * @private
 	  */
 	 var addColorToPalette_ = function (color) {
-      if (paletteColors.indexOf(color) == -1) {
+      if (paletteColors.indexOf(color) == -1 && color != Constants.TRANSPARENT_COLOR) {
       	var colorEl = document.createElement("li");    
         colorEl.className = "palette-color";
         colorEl.setAttribute("data-color", color);
@@ -53,10 +53,10 @@ pskl.Palette = (function() {
     var onPaletteColorClick_ = function (event) {
       var selectedColor = $(event.target).data("color");
       if (event.which == 1) { // left button 
-        updateColorPicker(selectedColor, $('#color-picker')[0]);
+        updateColorPicker(selectedColor, $('#color-picker'));
         $.publish(Events.COLOR_SELECTED, [selectedColor, true]);
       } else if (event.which == 3) { // right button
-        updateColorPicker(selectedColor, $('#secondary-color-picker')[0]);
+        updateColorPicker(selectedColor, $('#secondary-color-picker'));
         $.publish(Events.COLOR_SELECTED, [selectedColor, false]);
       }
     };
@@ -72,10 +72,10 @@ pskl.Palette = (function() {
         // 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.color.fromString("#fff");
+        colorPicker[0].color.fromString("#fff");
         colorPicker.val(Constants.TRANSPARENT_COLOR);
       } else {
-        colorPicker.color.fromString(color);
+        colorPicker[0].color.fromString(color);
       }
     }
 

js/model/Frame.js

@@ -1,85 +1,84 @@
-(function () {
+(function () {
-	var ns = $.namespace("pskl.model");
+	var ns = $.namespace("pskl.model");
-	
+	
-	ns.Frame = function (pixels) {
+	ns.Frame = function (pixels) {
-		this.pixels = pixels;
+		this.pixels = pixels;
-		this.previousStates = [this._clonePixels()];
+		this.previousStates = [this._clonePixels()];
-		this.stateIndex = 0;
+		this.stateIndex = 0;
-	};
+	};
-
+
-	ns.Frame.createEmpty = function (width, height) {
+	ns.Frame.createEmpty = function (width, height) {
-		var pixels = []; //new Array(width);
+		var pixels = []; //new Array(width);
-		for (var columnIndex=0; columnIndex < width; columnIndex++) {
+		for (var columnIndex=0; columnIndex < width; columnIndex++) {
-			var columnArray = [];
+			var columnArray = [];
-			for(var heightIndex = 0; heightIndex < height; heightIndex++) {
+			for(var heightIndex = 0; heightIndex < height; heightIndex++) {
-				columnArray.push(Constants.TRANSPARENT_COLOR);
+				columnArray.push(Constants.TRANSPARENT_COLOR);
-			}
+			}
-			pixels[columnIndex] = columnArray;
+			pixels[columnIndex] = columnArray;
-    	}
+    	}
-		return new ns.Frame(pixels);
+		return new ns.Frame(pixels);
-	};
+	};
-
+
-	ns.Frame.createEmptyFromFrame = function (frame) {
+	ns.Frame.createEmptyFromFrame = function (frame) {
-		return ns.Frame.createEmpty(frame.getWidth(), frame.getHeight());
+		return ns.Frame.createEmpty(frame.getWidth(), frame.getHeight());
-	};
+	};
-
+
-	ns.Frame.prototype.clone = function () {
+	ns.Frame.prototype.clone = function () {
-		return new ns.Frame(this._clonePixels());
+		return new ns.Frame(this._clonePixels());
-	};
+	};
-
+
-	ns.Frame.prototype._clonePixels = function () {
+	ns.Frame.prototype._clonePixels = function () {
-		var pixels = [];
+		var pixels = [];
-		for (var col = 0 ; col < this.getWidth() ; col++) {
+		for (var col = 0 ; col < this.getWidth() ; col++) {
-			pixels[col] = this.pixels[col].slice(0 , this.getHeight());
+			pixels[col] = this.pixels[col].slice(0 , this.getHeight());
-		}
+		}
-		return pixels;
+		return pixels;
-	};
+	};
-
+
-	ns.Frame.prototype.serialize = function () {
+	ns.Frame.prototype.serialize = function () {
-		return JSON.stringify(this.pixels);
+		return JSON.stringify(this.pixels);
-	};
+	};
-
+
-	ns.Frame.prototype.setPixel = function (col, row, color) {
+	ns.Frame.prototype.setPixel = function (col, row, color) {
-		this.pixels[col][row] = color;
+		this.pixels[col][row] = color;
-	};
+	};
-
+
-	ns.Frame.prototype.getPixel = function (col, row) {
+	ns.Frame.prototype.getPixel = function (col, row) {
-		return this.pixels[col][row];
+		return this.pixels[col][row];
-	};
+	};
-
+
-	ns.Frame.prototype.getWidth = function () {
+	ns.Frame.prototype.getWidth = function () {
-		return this.pixels.length;
+		return this.pixels.length;
-	};
+	};
-
+
-	ns.Frame.prototype.getHeight = function () {
+	ns.Frame.prototype.getHeight = function () {
-		return this.pixels[0].length;
+		return this.pixels[0].length;
-	};
+	};
-
+
-	ns.Frame.prototype.containsPixel = function (col, row) {
+	ns.Frame.prototype.containsPixel = function (col, row) {
-		return col >= 0 && row >= 0 && col < this.pixels.length && row < this.pixels[0].length;
+		return col >= 0 && row >= 0 && col < this.pixels.length && row < this.pixels[0].length;
-	};
+	};
-
+
-	ns.Frame.prototype.saveState = function () {
+	ns.Frame.prototype.saveState = function () {
-		// remove all states past current state
+		// remove all states past current state
-		this.previousStates.length = this.stateIndex + 1;
+		this.previousStates.length = this.stateIndex + 1;
-		// push new state
+		// push new state
-		this.previousStates.push(this._clonePixels());
+		this.previousStates.push(this._clonePixels());
-		// set the stateIndex to latest saved state
+		// set the stateIndex to latest saved state
-		this.stateIndex = this.previousStates.length - 1;
+		this.stateIndex = this.previousStates.length - 1;
-	};
+	};
-
+
-	ns.Frame.prototype.loadPreviousState = function () {
+	ns.Frame.prototype.loadPreviousState = function () {
-		if (this.stateIndex > 0) {
+		if (this.stateIndex > 0) {
-			this.stateIndex--;
+			this.stateIndex--;
-			this.pixels = this.previousStates[this.stateIndex];
+			this.pixels = this.previousStates[this.stateIndex];
-		}
+		}
-	};
+	};
-
+
-	ns.Frame.prototype.loadNextState = function () {
+	ns.Frame.prototype.loadNextState = function () {
-		if (this.stateIndex < this.previousStates.length - 1) {
+		if (this.stateIndex < this.previousStates.length - 1) {
-			this.stateIndex++;
+			this.stateIndex++;
-			this.pixels = this.previousStates[this.stateIndex];
+			this.pixels = this.previousStates[this.stateIndex];
-		}	
+		}	
-	};
+	};
-
 })();