Merge branch 'master' into gh-pages

css/preview-film-section.css

@@ -39,8 +39,7 @@
 }
 
 .preview-tile .tile-action {
-  display: none;
-  float: right;
+  display: block;
   cursor: pointer;
   width: 30px;
   height: 30px;
@@ -50,8 +49,14 @@
   border: none;
 }
 
-.preview-tile:hover .tile-action {
-  display: block;
+.preview-tile .tile-action-container {
+  float: right;
+  visibility : hidden;
+  overflow: hidden;
+}
+
+.preview-tile:hover .tile-action-container {
+  visibility : visible;
 }
 
 .preview-tile .tile-action.duplicate-frame-action {

js/Constants.js

@@ -25,7 +25,7 @@ var Constants = {
     /*
      * Default entry point for piskel web service:
      */
-    PISKEL_SERVICE_URL: 'http://2.piskel-app.appspot.com',
+    PISKEL_SERVICE_URL: 'http://3.piskel-app.appspot.com',
 
     GRID_STROKE_WIDTH: 1,
     GRID_STROKE_COLOR: "lightgray"

js/controller/AnimatedPreviewController.js

@@ -22,8 +22,12 @@
     };
 
     ns.AnimatedPreviewController.prototype.onFPSSliderChange = function(evt) {
-        this.fps = parseInt($("#preview-fps")[0].value, 10);
-        $("#display-fps").html(this.fps + " FPS")
+        this.setFPS(parseInt($("#preview-fps")[0].value, 10));
+    };
+
+    ns.AnimatedPreviewController.prototype.setFPS = function (fps) {
+        this.fps = fps;
+        $("#display-fps").html(this.fps + " FPS");
     };
 
     ns.AnimatedPreviewController.prototype.render = function (delta) {

js/controller/DrawingController.js

@@ -207,6 +207,9 @@
     var frame = this.framesheet.getCurrentFrame();
     var serializedFrame = frame.serialize();
     if (this.serializedFrame != serializedFrame) {
+      if (!frame.isSameSize(this.overlayFrame)) {
+        this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(frame);
+      }
       this.serializedFrame = serializedFrame;
       this.renderer.render(frame);
     }
@@ -258,7 +261,6 @@
    */
   ns.DrawingController.prototype.updateDPI_ = function() {
     var dpi = this.calculateDPI_();
-    console.log("dpi", dpi);
     this.renderer.updateDPI(dpi);
     this.overlayRenderer.updateDPI(dpi);
     this.forceRendering_();

js/controller/PreviewFilmController.js

@@ -181,11 +181,15 @@
         
         previewTileRoot.addEventListener('click', this.onPreviewClick_.bind(this, tileNumber));
 
+        var actionContainer = document.createElement("DIV");
+        actionContainer.className = "tile-action-container";
+
         var canvasPreviewDuplicateAction = document.createElement("button");
         canvasPreviewDuplicateAction.setAttribute('rel', 'tooltip');
         canvasPreviewDuplicateAction.setAttribute('data-placement', 'right');
         canvasPreviewDuplicateAction.setAttribute('title', 'Duplicate this frame');
-        canvasPreviewDuplicateAction.className = "tile-action duplicate-frame-action"
+        canvasPreviewDuplicateAction.className = "tile-action duplicate-frame-action";
+        actionContainer.appendChild(canvasPreviewDuplicateAction);
         
         canvasPreviewDuplicateAction.addEventListener('click', this.onAddButtonClick_.bind(this, tileNumber));
 
@@ -196,7 +200,6 @@
         currentFrameRenderer.init(currentFrame);
         
         previewTileRoot.appendChild(canvasContainer);
-        previewTileRoot.appendChild(canvasPreviewDuplicateAction);
 
         if(tileNumber > 0 || this.framesheet.getFrameCount() > 1) {
             var canvasPreviewDeleteAction = document.createElement("button");
@@ -206,8 +209,11 @@
             canvasPreviewDeleteAction.className = "tile-action delete-frame-action"
             canvasPreviewDeleteAction.addEventListener('click', this.onDeleteButtonClick_.bind(this, tileNumber));
             previewTileRoot.appendChild(canvasPreviewDeleteAction);
+            actionContainer.appendChild(canvasPreviewDeleteAction);
         }
 
+        previewTileRoot.appendChild(actionContainer);
+
         return previewTileRoot;
     };
 

js/model/Frame.js

@@ -111,4 +111,8 @@
 			this.setPixels(this.previousStates[this.stateIndex]);
 		}	
 	};
+
+	ns.Frame.prototype.isSameSize = function (otherFrame) {
+		return this.getHeight() == otherFrame.getHeight() && this.getWidth() == otherFrame.getWidth();
+	};
 })();

js/model/FrameSheet.js

@@ -64,16 +64,28 @@
 	};
 
 	/**
-	 * Load a framesheet from a string that might have been persisted in db / localstorage
+	 * Load a framesheet from a model that might have been persisted in db / localstorage
 	 * Overrides existing frames.
 	 * @param {String} serialized
 	 */
 	ns.FrameSheet.prototype.deserialize = function (serialized) {
 		try {
-		 	var frameConfigurations = JSON.parse(serialized);
+		 	this.load(JSON.parse(serialized));
+		} catch (e) {
+	 		throw "Could not load serialized framesheet : " + e.message
+		}	
+	};
+
+
+	/**
+	 * Load a framesheet from a model that might have been persisted in db / localstorage
+	 * Overrides existing frames.
+	 * @param {String} serialized
+	 */
+	ns.FrameSheet.prototype.load = function (framesheet) {
 	 	this.frames = [];
-		 	for (var i = 0 ; i < frameConfigurations.length ; i++) {
-		 		var frameCfg = frameConfigurations[i];
+	 	for (var i = 0 ; i < framesheet.length ; i++) {
+	 		var frameCfg = framesheet[i];
 	 		this.addFrame(new ns.Frame(frameCfg));
 	 	}
 
@@ -85,9 +97,6 @@
 	 	}
 
 	 	$.publish(Events.FRAMESHEET_RESET);
-		} catch (e) {
-	 		throw "Could not load serialized framesheet : " + e.message
-		}	
 	};
 
 	

js/piskel.js

@@ -128,7 +128,9 @@ $.namespace("pskl");
       xhr.responseType = 'text';
 
       xhr.onload = function(e) {
-        frameSheet.deserialize(this.responseText);
+        var res = JSON.parse(this.responseText);
+        frameSheet.load(res.framesheet);
+        piskel.animationController.setFPS(res.fps);
         $.publish(Events.HIDE_NOTIFICATION);
         piskel.finishInit();
       };