Merge branch 'master' into gh-pages

css/preview-animation-section.css

@@ -2,7 +2,7 @@
 .preview-container {
   position : absolute;
   bottom : 0; right : 0;
-  height : 256px;
+  height : 282px;
   width : 256px;
   background : white;
   border : 0px Solid black;
@@ -12,7 +12,6 @@
 
 .preview-container canvas {
   border : 0px Solid transparent;
-  border-radius:5px 0px 0px 5px;
 }
 
 #preview-fps {

js/Constants.js

@@ -1,4 +1,11 @@
 var Constants = {
+    DEFAULT_SIZE : {
+        height : 32,
+        width : 32
+    },
+
+    MAX_HEIGHT : 128,
+    MAX_WIDTH : 128,
 
     DEFAULT_PEN_COLOR : '#000000',  
     TRANSPARENT_COLOR : 'TRANSPARENT',

js/Events.js

@@ -35,6 +35,8 @@ Events = {
      */
     FRAMESHEET_RESET: "FRAMESHEET_RESET",
 
+    FRAME_SIZE_CHANGED : "FRAME_SIZE_CHANGED",
+
     CURRENT_FRAME_SET: "CURRENT_FRAME_SET",
 
     SELECTION_CREATED: "SELECTION_CREATED",

js/controller/AnimatedPreviewController.js

@@ -10,9 +10,11 @@
         this.fps = parseInt($("#preview-fps")[0].value, 10);
         
         var renderingOptions = {
-			"dpi": dpi
+            "dpi": this.calculateDPI_()
         };
         this.renderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions);
+
+        $.subscribe(Events.FRAME_SIZE_CHANGED, this.updateDPI_.bind(this));
     };
 
     ns.AnimatedPreviewController.prototype.init = function () {
@@ -37,4 +39,19 @@
         }
     };
 
+    /**
+     * Calculate the preview DPI depending on the framesheet size
+     */
+    ns.AnimatedPreviewController.prototype.calculateDPI_ = function () {
+        var framePixelHeight = this.framesheet.getCurrentFrame().getHeight(),
+            framePixelWidth = this.framesheet.getCurrentFrame().getWidth();
+        // TODO (julz) : should have a utility to get a Size from framesheet easily (what about empty framesheets though ?)
+        
+        return pskl.PixelUtils.calculateDPIForContainer($(".preview-container"), framePixelHeight, framePixelWidth);
+    };
+
+    ns.AnimatedPreviewController.prototype.updateDPI_ = function () {
+        this.dpi = this.calculateDPI_();
+        this.renderer.updateDPI(this.dpi);
+    }
 })();

js/controller/DrawingController.js

@@ -1,12 +1,6 @@
 (function () {
   var ns = $.namespace("pskl.controller");
-  ns.DrawingController = function (framesheet, container, dpi) {
+  ns.DrawingController = function (framesheet, container) {
-    // TODO(vincz): Store user prefs in a localstorage string ?
-    var renderingOptions = {
-      "dpi": dpi,
-      "hasGrid" : true
-    };
-
     /**
      * @public
      */
@@ -22,6 +16,12 @@
      */
     this.container = container;
 
+    // TODO(vincz): Store user prefs in a localstorage string ?
+    var renderingOptions = {
+      "dpi": this.calculateDPI_(),
+      "hasGrid" : true
+    };
+    
     this.renderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "drawing-canvas");
     this.overlayRenderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "canvas-overlay");
     
@@ -51,6 +51,11 @@
         this.secondaryColor = color;
       }
     }, this));
+
+    $(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)); 
   };
 
   ns.DrawingController.prototype.initMouseBehavior = function() {
@@ -63,6 +68,13 @@
         body.contextmenu(this.onCanvasContextMenu_);
   };
 
+
+
+  ns.DrawingController.prototype.startDPIUpdateTimer_ = function () {
+      if (this.dpiUpdateTimer) window.clearInterval(this.dpiUpdateTimer);
+      this.dpiUpdateTimer = window.setTimeout($.proxy(this.updateDPI_, this), 200);
+  },
+
   /**
    * @private
    */
@@ -186,12 +198,6 @@
       return false;
     };
 
-  ns.DrawingController.prototype.updateDPI = function (newDPI) {
-    this.renderer.updateDPI(newDPI);
-    this.overlayRenderer.updateDPI(newDPI);
-    this.forceRendering_();
-  };
-
   ns.DrawingController.prototype.render = function () {
     this.renderFrame();
     this.renderOverlay();
@@ -216,5 +222,45 @@
 
   ns.DrawingController.prototype.forceRendering_ = function () {
     this.serializedFrame = this.serializedOverlay = null;
+  };
+
+  /**
+   * @private
+   */
+  ns.DrawingController.prototype.calculateDPI_ = function() {
+    var userMessageGap = 80; // Reserve some height to show the user message at the bottom
+
+    var availableViewportHeight = $('.main-panel').height() - userMessageGap,
+        availableViewportWidth = $('.main-panel').width(),
+        previewHeight = $(".preview-container").height(),
+        previewWidth = $(".preview-container").width(),
+        framePixelHeight = this.framesheet.getCurrentFrame().getHeight(),
+        framePixelWidth = this.framesheet.getCurrentFrame().getWidth();
+    var dpi = pskl.PixelUtils.calculateDPI(availableViewportHeight, availableViewportWidth, framePixelHeight, framePixelWidth);
+
+    var drawingCanvasHeight = dpi * framePixelHeight;
+    var drawingCanvasWidth = dpi * framePixelWidth;
+
+    // Check if preview and drawing canvas overlap
+    var heightGap =  drawingCanvasHeight + previewHeight - availableViewportHeight,
+        widthGap = drawingCanvasWidth + previewWidth - availableViewportWidth;
+    if (heightGap > 0 && widthGap > 0) {
+        // Calculate the DPI change needed to bridge height and width gap
+        var gapDPI = pskl.PixelUtils.calculateDPI(heightGap, widthGap, framePixelHeight, framePixelWidth);
+        // substract gap dpi to initial dpi
+        dpi -= (gapDPI + 1);
     }
+    return dpi;
+  };
+
+  /**
+   * @private
+   */
+  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

@@ -2,14 +2,15 @@
     var ns = $.namespace("pskl.controller");
     ns.PreviewFilmController = function (framesheet, container, dpi) {
 
-		this.dpi = dpi;
         this.framesheet = framesheet;
         this.container = container;
+        this.dpi = this.calculateDPI_();
 
         this.redrawFlag = true;
 
         $.subscribe(Events.TOOL_RELEASED, this.flagForRedraw_.bind(this));
         $.subscribe(Events.FRAMESHEET_RESET, this.flagForRedraw_.bind(this));
+        $.subscribe(Events.FRAMESHEET_RESET, this.refreshDPI_.bind(this));
     };
 
     ns.PreviewFilmController.prototype.init = function() {
@@ -26,6 +27,10 @@
         this.redrawFlag = true;
     };
 
+    ns.PreviewFilmController.prototype.refreshDPI_ = function () {
+        this.dpi = this.calculateDPI_();
+    };
+
     ns.PreviewFilmController.prototype.render = function () {
         if (this.redrawFlag) {
             // TODO(vincz): Full redraw on any drawing modification, optimize.
@@ -223,4 +228,16 @@
         $.publish(Events.LOCALSTORAGE_REQUEST);  // Should come from model
         this.framesheet.setCurrentFrameIndex(index + 1);
     };
+
+    /**
+     * Calculate the preview DPI depending on the framesheet size
+     */
+    ns.PreviewFilmController.prototype.calculateDPI_ = function () {
+        var previewSize = 128,
+            framePixelHeight = this.framesheet.getCurrentFrame().getHeight(),
+            framePixelWidth = this.framesheet.getCurrentFrame().getWidth();
+        // TODO (julz) : should have a utility to get a Size from framesheet easily (what about empty framesheets though ?)
+
+        return pskl.PixelUtils.calculateDPI(previewSize, previewSize, framePixelHeight, framePixelWidth);
+    };
 })();

js/model/FrameSheet.js

@@ -1,6 +1,6 @@
 (function () {
 	var ns = $.namespace("pskl.model");
-	ns.FrameSheet = function (width, height) {
+	ns.FrameSheet = function (height, width) {
 		this.width = width;
 		this.height = height;
 		this.frames = [];
@@ -68,6 +68,14 @@
 		 		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);
 		} catch (e) {
 	 		throw "Could not load serialized framesheet : " + e.message

js/piskel.js

@@ -9,46 +9,21 @@ $.namespace("pskl");
   /**
    * FrameSheetModel instance.
    */
-  var frameSheet,
+  var frameSheet;
-
-      // Configuration:
-      // Canvas size in pixel size (not dpi related)
-      framePixelWidth = 32, 
-      framePixelHeight = 32,
-
-      // Scaling factors for a given frameSheet rendering:
-      // Main drawing area dpi is calculated dynamically
-      // Canvas preview film canvases:
-      previewTileCanvasDpi = 4,
-      // Animated canvas preview:
-      previewAnimationCanvasDpi = 8;
-
   /**
    * Main application controller
    */
   var piskel = {
 
     init : function () {
-      frameSheet = new pskl.model.FrameSheet(framePixelWidth, framePixelHeight);
+      var frameSize = this.readSizeFromURL_();
+      frameSheet = new pskl.model.FrameSheet(frameSize.height, frameSize.width);
+
       frameSheet.addEmptyFrame();
       
-      this.drawingController = new pskl.controller.DrawingController(
+      this.drawingController = new pskl.controller.DrawingController(frameSheet, $('#drawing-canvas-container'));
-        frameSheet,
+      this.animationController = new pskl.controller.AnimatedPreviewController(frameSheet, $('#preview-canvas-container'));
-        $('#drawing-canvas-container'), 
+      this.previewsController = new pskl.controller.PreviewFilmController(frameSheet, $('#preview-list'));
-        this.calculateDPIsForDrawingCanvas_()
-      );
-
-      this.animationController = new pskl.controller.AnimatedPreviewController(
-        frameSheet,
-        $('#preview-canvas-container'), 
-        previewAnimationCanvasDpi
-      );
-
-      this.previewsController = new pskl.controller.PreviewFilmController(
-        frameSheet,
-        $('#preview-list'), 
-        previewTileCanvasDpi
-      );
 
       // To catch the current active frame, the selection manager have to be initialized before
       // the 'frameSheet.setCurrentFrameIndex(0);' line below.
@@ -57,8 +32,7 @@ $.namespace("pskl");
       //                  - an event(s) triggering init
       // All listeners will be hook in a first step, then all event triggering inits will be called
       // in a second batch.
-      this.selectionManager =
+      this.selectionManager = new pskl.selection.SelectionManager(frameSheet, this.drawingController.overlayFrame);
-          new pskl.selection.SelectionManager(frameSheet, this.drawingController.overlayFrame);
 
       // DO NOT MOVE THIS LINE (see comment above)
       frameSheet.setCurrentFrameIndex(0);
@@ -79,7 +53,7 @@ $.namespace("pskl");
       this.localStorageService.init();
 
       // TODO: Add comments 
-      var framesheetId = this.getFramesheetIdFromUrl();
+      var framesheetId = this.readFramesheetIdFromURL_();
       if (framesheetId) {
         $.publish(Events.SHOW_NOTIFICATION, [{"content": "Loading animation with id : [" + framesheetId + "]"}]);
         this.loadFramesheetFromService(framesheetId);
@@ -96,8 +70,6 @@ $.namespace("pskl");
       $('body').tooltip({
         selector: '[rel=tooltip]'
       });
-
-      this.connectResizeToDpiUpdate_();
     },
 
     render : function (delta) {
@@ -106,55 +78,6 @@ $.namespace("pskl");
       this.previewsController.render(delta);
     },    
 
-    connectResizeToDpiUpdate_ : function () {
-      $(window).resize($.proxy(this.startDPIUpdateTimer_, this));
-    },
-
-    startDPIUpdateTimer_ : function () {
-      if (this.dpiUpdateTimer) window.clearInterval(this.dpiUpdateTimer);
-      this.dpiUpdateTimer = window.setTimeout($.proxy(this.updateDPIForViewport, this), 200);
-    },
-
-    updateDPIForViewport : function () {
-      var dpi = piskel.calculateDPIsForDrawingCanvas_();
-      this.drawingController.updateDPI(dpi);
-    },
-
-    /**
-     * @private
-     */
-    calculateDPIsForDrawingCanvas_ : function() {
-
-      var userMessageGap = 80; // Reserve some height to show the user message at the bottom
-
-      var availableViewportHeight = $('.main-panel').height() - userMessageGap,
-          availableViewportWidth = $('.main-panel').width(),
-          previewHeight = $(".preview-container").height(),
-          previewWidth = $(".preview-container").width();
-
-      var heightBoundDpi = Math.floor(availableViewportHeight / framePixelHeight),
-          widthBoundDpi = Math.floor(availableViewportWidth / framePixelWidth);
-
-      var dpi = Math.min(heightBoundDpi, widthBoundDpi);
-
-      var drawingCanvasHeight = dpi * framePixelHeight;
-      var drawingCanvasWidth = dpi * framePixelWidth;
-
-      // Check if preview and drawing canvas overlap
-      var heightGap =  drawingCanvasHeight + previewHeight - availableViewportHeight,
-          widthGap = drawingCanvasWidth + previewWidth - availableViewportWidth;
-      if (heightGap > 0 && widthGap > 0) {
-          // Calculate the DPI change needed to bridge height and width gap
-          var heightGapDpi = Math.ceil(heightGap / framePixelHeight),
-          widthGapDpi = Math.ceil(widthGap / framePixelWidth);
-
-          // substract smallest dpi change to initial dpi
-          dpi -= Math.min(heightGapDpi, widthGapDpi);
-      }
-      
-      return dpi;
-    },
-
     finishInit : function () {
       var toolController = new pskl.controller.ToolController();
       toolController.init();
@@ -163,12 +86,39 @@ $.namespace("pskl");
       paletteController.init(frameSheet);
     },
 
-    getFramesheetIdFromUrl : function() {
+    readSizeFromURL_ : function () {
-      var href = window.location.href;
+      var sizeParam = this.readUrlParameter_("size"), size;
-      // TODO: Change frameId to framesheetId on the backend
+      // parameter expected as size=64x48 => size=widthxheight
-      if (href.indexOf('frameId=') != -1) {
+      var parts = sizeParam.split("x");
-        return href.substring(href.indexOf('frameId=')+8);
+      if (parts && parts.length == 2 && !isNaN(parts[0]) && !isNaN(parts[1])) {
+        var width = parseInt(parts[0], 10),
+            height = parseInt(parts[1], 10);
+      
+        size = {
+          height : Math.min(height, Constants.MAX_HEIGHT),
+          width : Math.min(width, Constants.MAX_WIDTH)
+        };
+      } else {
+        size = Constants.DEFAULT_SIZE;
       }
+      return size;
+    },
+
+    readFramesheetIdFromURL_ : function() {
+      return this.readUrlParameter_("frameId");
+    },
+
+    readUrlParameter_ : function (paramName) {
+      var searchString = window.location.search.substring(1),
+      i, val, params = searchString.split("&");
+
+      for (i=0;i<params.length;i++) {
+        val = params[i].split("=");
+        if (val[0] == paramName) {
+          return unescape(val[1]);
+        }
+      }
+      return "";
     },
 
     loadFramesheetFromService : function (frameId) {

js/rendering/FrameRenderer.js

@@ -23,8 +23,6 @@
 		this.hasGrid = renderingOptions.hasGrid;
 		this.gridStrokeWidth = 0;
 
-		this.lastRenderedFrame = null;
-
 		// Flag to know if the config was altered
 		this.canvasConfigDirty = true;
 
@@ -51,10 +49,6 @@
 		}
 		
 		this.canvasConfigDirty = true;
-
-		if(this.lastRenderedFrame) {
-			this.render(this.lastRenderedFrame);
-		}
 	};
 
 	ns.FrameRenderer.prototype.render = function (frame) {

js/service/LocalStorageService.js

@@ -30,8 +30,8 @@
    */
   ns.LocalStorageService.prototype.persistToLocalStorage_ = function() {
     
-    console.log('[LocalStorage service]: Snapshot stored');
+   // console.log('[LocalStorage service]: Snapshot stored');
-    window.localStorage.snapShot = this.framesheet.serialize();
+   // window.localStorage.snapShot = this.framesheet.serialize();
   };
 
   /**

js/utils/pixelUtils.js

@@ -96,8 +96,6 @@
              *  12.             If the color of the node to the south of n is target-color, add that node to Q.
              *  13. Continue looping until Q is exhausted.
              *  14. Return.
-		     *
-		     * @private
              */
             var paintedPixels = [];
             var queue = [];
@@ -143,6 +141,34 @@
                 }
             }
             return paintedPixels;
-		}
+        },
+
+        /**
+         * Calculate and return the maximal DPI to display a picture in a given container.
+         *
+         * @param container jQueryObject Container where the picture should be displayed
+         * @param number pictureHeight height in pixels of the picture to display
+         * @param number pictureWidth width in pixels of the picture to display
+         * @return number maximal dpi
+         */
+        calculateDPIForContainer : function (container, pictureHeight, pictureWidth) {
+          return this.calculateDPI(container.height(), container.width(), pictureHeight, pictureWidth);
+        },
+
+        /**
+         * Calculate and return the maximal DPI to display a picture for a given height and width.
+         *
+         * @param height number Height available to display the picture
+         * @param width number Width available to display the picture
+         * @param number pictureHeight height in pixels of the picture to display
+         * @param number pictureWidth width in pixels of the picture to display
+         * @return number maximal dpi
+         */
+        calculateDPI : function (height, width, pictureHeight, pictureWidth) {
+          var heightBoundDpi = Math.floor(height / pictureHeight),
+              widthBoundDpi = Math.floor(width / pictureWidth);
+
+          return Math.min(heightBoundDpi, widthBoundDpi);
+        },
     };
 })();