Integration (with myself) fixes

- Adding default value in empty frames to avoid artifact when paint
bucketing (you may have issues with previously stored model before this
commit, no migration plan for papybrossette :D)
 - Fix issue: Model does not show up when loading a remote GAE model
 - Removing FRAMESHEET_UPDATED events (remains of history manager
implementation)

js/Constants.js

@@ -1,6 +1,16 @@
 var Constants = {
 
-	DEFAULT_PEN_COLOR : '#000000',
+	DEFAULT_PEN_COLOR : '#000000',	
-	TRANSPARENT_COLOR : "TRANSPARENT",
+	TRANSPARENT_COLOR : 'TRANSPARENT',
+	
+	/*
+	 * Fake semi-transparent color used to highlight transparent
+	 * strokes and rectangles:
+	 */
+	SELECTION_TRANSPARENT_COLOR: 'rgba(255, 255, 255, 0.6)',
+	
+	/*
+	 * Default entry point for piskel web service:
+	 */
 	PISKEL_SERVICE_URL: 'http://2.piskel-app.appspot.com'
 };

js/drawingtools/BaseTool.js

@@ -21,8 +21,10 @@
 			context.clearRect(col * dpi, row * dpi, dpi, dpi);   
 		} 
 		else {
-			// TODO(vincz): Found a better design to update the palette, it's called too frequently.
+			if(color != Constants.SELECTION_TRANSPARENT_COLOR) {
-			$.publish(Events.COLOR_USED, [color]);
+				// TODO(vincz): Found a better design to update the palette, it's called too frequently.
+				$.publish(Events.COLOR_USED, [color]);
+			}
 			context.fillStyle = color;
 			context.fillRect(col * dpi, row * dpi, dpi, dpi);
 		}

js/drawingtools/Eraser.js

@@ -32,10 +32,4 @@
 	ns.Eraser.prototype.moveToolAt = function(col, row, frame, color, canvas, dpi) {
 		this.applyToolAt(col, row, frame, color, canvas, dpi);
 	};
-
-	ns.Eraser.prototype.releaseToolAt = function(col, row, frame, color, canvas, dpi) {
-		// TODO: Create a afterRelease event hook or put that deep in the model
-		$.publish(Events.FRAMESHEET_UPDATED);   
-	};
-
 })();

js/drawingtools/PaintBucket.js

@@ -21,18 +21,12 @@
 		var targetColor = pskl.utils.normalizeColor(frame[col][row]);
 		//this.recursiveFloodFill_(frame, col, row, targetColor, color);
 		this.queueLinearFloodFill_(frame, col, row, targetColor, color);
-		$.publish(Events.FRAMESHEET_UPDATED);
+		
-        
 		// Draw in canvas:
 		// TODO: Remove that when we have the centralized redraw loop
 		this.drawFrameInCanvas(frame, canvas, dpi);
 	};
 
-	ns.PaintBucket.prototype.releaseToolAt = function(col, row, frame, color, canvas, dpi) {
-		// TODO: Create a afterRelease event hook or put that deep in the model
-		$.publish(Events.FRAMESHEET_UPDATED);   
-	};
-	
 	/**
 	 *  Flood-fill (node, target-color, replacement-color):
 	 *	 1. Set Q to the empty queue.

js/drawingtools/Rectangle.js

@@ -49,7 +49,7 @@
 		for(var i = 0; i< strokePoints.length; i++) {
 
 			if(color == Constants.TRANSPARENT_COLOR) {
-				color = "rgba(255, 255, 255, 0.6)";
+				color = Constants.SELECTION_TRANSPARENT_COLOR;
 			}			
 			this.drawPixelInCanvas(strokePoints[i].col, strokePoints[i].row, this.canvasOverlay, color, dpi);
 		}
@@ -84,9 +84,6 @@
 		
 		// For now, we are done with the stroke tool and don't need an overlay anymore:
 		this.removeCanvasOverlays();
-
-		// TODO: Create a afterRelease event hook or put that deep in the model
-		$.publish(Events.FRAMESHEET_UPDATED);   
 	};
 
 	/**

js/drawingtools/SimplePen.js

@@ -52,9 +52,4 @@
 		this.previousCol = col;
 		this.previousRow = row;
 	};
-
-	ns.SimplePen.prototype.releaseToolAt = function(col, row, frame, color, canvas, dpi) {
-		// TODO: Create a afterRelease event hook or out that deep in the model
-		$.publish(Events.FRAMESHEET_UPDATED);   
-	};
 })();

js/drawingtools/Stroke.js

@@ -62,7 +62,7 @@
 				// We set it to a semi-opaque white during the tool mousemove allowing to see colors below the stroke.
 				// When the stroke tool will be released, It will draw a transparent stroke, 
 				// eg deleting the equivalent of a stroke.		
-				color = "rgba(255, 255, 255, 0.6)";
+				color = Constants.SELECTION_TRANSPARENT_COLOR;
 			}			
 			this.drawPixelInCanvas(strokePoints[i].col, strokePoints[i].row, this.canvasOverlay, color, dpi);
 		}
@@ -96,10 +96,7 @@
 		}
 
 		// For now, we are done with the stroke tool and don't need an overlay anymore:
-		this.removeCanvasOverlays();
+		this.removeCanvasOverlays();   
-
-		// TODO: Create a afterRelease event hook or out that deep in the model
-		$.publish(Events.FRAMESHEET_UPDATED);     
 	};
 
 })();

js/frameSheetModel.js

@@ -9,14 +9,21 @@ pskl.FrameSheetModel = (function() {
     var height;
 
     /**
+     * Create empty frame of dimension [width * height] with Constants.TRANSPARENT_COLOR
+     * as a default value.
+     * 
      * @private
      */
     var createEmptyFrame_ = function() {
-    	var emptyFrame = new Array(width);
+    	var emptyFrame = []; //new Array(width);
 		for (var columnIndex=0; columnIndex < width; columnIndex++) {
-			emptyFrame[columnIndex] = new Array(height);
+			var columnArray = [];
+			for(var heightIndex = 0; heightIndex < height; heightIndex++) {
+				columnArray.push(Constants.TRANSPARENT_COLOR);
+			}
+			emptyFrame[columnIndex] = columnArray;
     	}
-        return emptyFrame;
+    	return emptyFrame;
     };
 
     /**

js/piskel.js

@@ -62,15 +62,15 @@ $.namespace("pskl");
       frameSheet = pskl.FrameSheetModel.getInstance(framePixelWidth, framePixelHeight);
       frameSheet.addEmptyFrame();
       this.setActiveFrame(0);
-      
+          
       pskl.NotificationService.init();
       pskl.LocalStorageService.init(frameSheet);
 
       // TODO: Add comments 
-      var frameId = this.getFrameIdFromUrl();
+      var framesheetId = this.getFramesheetIdFromUrl();
-      if (frameId) {
+      if (framesheetId) {
-        $.publish(Events.SHOW_NOTIFICATION, [{"content": "Loading animation with id : [" + frameId + "]"}]);
+        $.publish(Events.SHOW_NOTIFICATION, [{"content": "Loading animation with id : [" + framesheetId + "]"}]);
-        this.loadFramesheetFromService(frameId);
+        this.loadFramesheetFromService(framesheetId);
       } else {
         this.finishInit();
         pskl.LocalStorageService.displayRestoreNotification();
@@ -102,8 +102,9 @@ $.namespace("pskl");
       pskl.ToolSelector.init();
     },
 
-    getFrameIdFromUrl : function() {
+    getFramesheetIdFromUrl : function() {
       var href = window.location.href;
+      // TODO: Change frameId to framesheetId on the backend
       if (href.indexOf('frameId=') != -1) {
         return href.substring(href.indexOf('frameId=')+8);
       }
@@ -111,18 +112,22 @@ $.namespace("pskl");
 
     loadFramesheetFromService : function (frameId) {
       var xhr = new XMLHttpRequest();
+      // TODO: Change frameId to framesheetId on the backend
       xhr.open('GET', Constants.PISKEL_SERVICE_URL + '/get?l=' + frameId, true);
       xhr.responseType = 'text';
 
       xhr.onload = function(e) {
         frameSheet.deserialize(this.responseText);
+        piskel.setActiveFrame(0);  
         $.publish(Events.HIDE_NOTIFICATION);
         piskel.finishInit();
+        piskel.setActiveFrameAndRedraw(0);  
       };
 
       xhr.onerror = function () {
         $.publish(Events.HIDE_NOTIFICATION);
         piskel.finishInit();
+        piskel.setActiveFrameAndRedraw(0);
       };
 
       xhr.send();
@@ -136,12 +141,13 @@ $.namespace("pskl");
     setActiveFrameAndRedraw: function(index) {
       this.setActiveFrame(index);
       
+      // When redraw engine is refactored, remove the following crap and
+      // trigger an event instead:
+
       // Update drawing canvas:
-      this.drawFrameToCanvas(currentFrame, drawingAreaCanvas, drawingCanvasDpi);
+      this.drawFrameToCanvas(currentFrame, drawingAreaCanvas, drawingCanvasDpi);   
-      
       // Update slideshow:
       this.createPreviews();
-
       // Update animation preview:
       animIndex = 0;
     },