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

@@ -55,7 +55,7 @@
     $(window).resize($.proxy(this.startDPIUpdateTimer_, this));
 
     $.subscribe(Events.FRAME_SIZE_CHANGED, $.proxy(this.updateDPI_, this));
-     $.subscribe(Events.GRID_DISPLAY_STATE_CHANGED, $.proxy(this.forceRendering_, this)); 
+    $.subscribe(Events.GRID_DISPLAY_STATE_CHANGED, $.proxy(this.forceRendering_, this)); 
   };
 
   ns.DrawingController.prototype.initMouseBehavior = function() {
@@ -133,8 +133,8 @@
     };
 
     /**
-   * @private
-   */
+     * @private
+     */
     ns.DrawingController.prototype.onMouseup_ = function (event) {
       if(this.isClicked || this.isRightClicked) {
         // A mouse button was clicked on the drawing canvas before this mouseup event,
@@ -159,8 +159,8 @@
     },
 
     /**
-   * @private
-   */
+     * @private
+     */
     ns.DrawingController.prototype.getRelativeCoordinates = function (clientX, clientY) {
       var canvasPageOffset = this.container.offset();
       return {
@@ -170,16 +170,16 @@
     };
 
     /**
-   * @private
-   */
+     * @private
+     */
     ns.DrawingController.prototype.getSpriteCoordinates = function(event) {
         var coords = this.getRelativeCoordinates(event.clientX, event.clientY);
         return this.renderer.convertPixelCoordinatesIntoSpriteCoordinate(coords);
     };
 
     /**
-   * @private
-   */
+     * @private
+     */
     ns.DrawingController.prototype.getCurrentColor_ = function () {
       if(this.isRightClicked) {
         return this.secondaryColor;
@@ -189,8 +189,8 @@
     };
 
     /**
-   * @private
-   */
+     * @private
+     */
     ns.DrawingController.prototype.onCanvasContextMenu_ = function (event) {
       event.preventDefault();
       event.stopPropagation();
@@ -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,32 +64,41 @@
 	};
 
 	/**
-	 * 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.frames = [];
-		 	for (var i = 0 ; i < frameConfigurations.length ; i++) {
-		 		var frameCfg = frameConfigurations[i];
-		 		this.addFrame(new ns.Frame(frameCfg));
-		 	}
-
-		 	if (this.hasFrameAtIndex(0)) {
-			 	this.height = this.getFrameByIndex(0).getHeight();
-			 	this.width = this.getFrameByIndex(0).getWidth();
-			 	this.setCurrentFrameIndex(0);
-		 		$.publish(Events.FRAME_SIZE_CHANGED);
-		 	}
-
-		 	$.publish(Events.FRAMESHEET_RESET);
+		 	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 < framesheet.length ; i++) {
+	 		var frameCfg = framesheet[i];
+	 		this.addFrame(new ns.Frame(frameCfg));
+	 	}
+
+	 	if (this.hasFrameAtIndex(0)) {
+		 	this.height = this.getFrameByIndex(0).getHeight();
+		 	this.width = this.getFrameByIndex(0).getWidth();
+		 	this.setCurrentFrameIndex(0);
+	 		$.publish(Events.FRAME_SIZE_CHANGED);
+	 	}
+
+	 	$.publish(Events.FRAMESHEET_RESET);
+	};
+
 	
 	ns.FrameSheet.prototype.hasFrameAtIndex = function(index) {
 		return (index >= 0 && index < this.getFrameCount());

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();
       };