Merge pull request #118 from juliandescottes/fix-size-bugs

Fixed size related issues. Selection Manager no longer depends on the fr...

Gruntfile.js

@@ -20,7 +20,12 @@ module.exports = function(grunt) {
 				"eqnull": true
 			},*/
       options: {
-        indent:2
+        indent:2,
+        undef : true,
+        latedef : true,
+        browser : true,
+        jquery : true,
+        globals : {'pskl':true, 'Events':true, 'Constants':true, 'console' : true, 'module':true}
       },
       files: [
         'Gruntfile.js',

js/Constants.js

@@ -8,6 +8,8 @@ var Constants = {
   MAX_HEIGHT : 128,
   MAX_WIDTH : 128,
 
+  PREVIEW_FILM_SIZE : 120,
+
   DEFAULT_PEN_COLOR : '#000000',  
   TRANSPARENT_COLOR : 'TRANSPARENT',
   

js/controller/DrawingController.js

@@ -25,8 +25,6 @@
     this.renderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "drawing-canvas");
     this.overlayRenderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "canvas-overlay");
     
-    this.renderer.init(framesheet.getCurrentFrame());
-    this.overlayRenderer.init(this.overlayFrame);
 
     // State of drawing controller:
     this.isClicked = false;
@@ -35,12 +33,18 @@
     this.currentToolBehavior = null;
     this.primaryColor =  Constants.DEFAULT_PEN_COLOR;
     this.secondaryColor =  Constants.TRANSPARENT_COLOR;
+  };
 
+  ns.DrawingController.prototype.init = function () {
+    this.renderer.render(this.framesheet.getCurrentFrame());
+    this.overlayRenderer.render(this.overlayFrame);
+    
     this.initMouseBehavior();
 
     $.subscribe(Events.TOOL_SELECTED, $.proxy(function(evt, toolBehavior) {
       console.log("Tool selected: ", toolBehavior);
       this.currentToolBehavior = toolBehavior;
+      this.overlayFrame.clear();
     }, this));
 
     /**

js/controller/PreviewFilmController.js

@@ -7,7 +7,9 @@
     this.dpi = this.calculateDPI_();
 
     this.redrawFlag = true;
+  };
 
+  ns.PreviewFilmController.prototype.init = function() {
     $.subscribe(Events.TOOL_RELEASED, this.flagForRedraw_.bind(this));
     $.subscribe(Events.FRAMESHEET_RESET, this.flagForRedraw_.bind(this));
     $.subscribe(Events.FRAMESHEET_RESET, this.refreshDPI_.bind(this));
@@ -16,8 +18,6 @@
     this.updateScrollerOverflows();
   };
 
-  ns.PreviewFilmController.prototype.init = function() {};
-
   ns.PreviewFilmController.prototype.addFrame = function () {
     this.framesheet.addEmptyFrame();
     this.framesheet.setCurrentFrameIndex(this.framesheet.getFrameCount() - 1);
@@ -155,7 +155,7 @@
     // is to make this update function (#createPreviewTile) less aggressive.
     var renderingOptions = {"dpi": this.dpi };
     var currentFrameRenderer = new pskl.rendering.FrameRenderer($(canvasContainer), renderingOptions, "tile-view");
-    currentFrameRenderer.init(currentFrame);
+    currentFrameRenderer.render(currentFrame);
     
     previewTileRoot.appendChild(canvasContainer);
 
@@ -207,11 +207,14 @@
    * Calculate the preview DPI depending on the framesheet size
    */
   ns.PreviewFilmController.prototype.calculateDPI_ = function () {
-    var previewSize = 120,
+    var curFrame = this.framesheet.getCurrentFrame(),
-      framePixelHeight = this.framesheet.getCurrentFrame().getHeight(),
+      frameHeight = curFrame.getHeight(),
-      framePixelWidth = this.framesheet.getCurrentFrame().getWidth();
+      frameWidth = curFrame.getWidth(),
-    // TODO (julz) : should have a utility to get a Size from framesheet easily (what about empty framesheets though ?)
+      maxFrameDim = Math.max(frameWidth, frameHeight);
 
-    return pskl.PixelUtils.calculateDPI(previewSize, previewSize, framePixelHeight, framePixelWidth);
+    var previewHeight = Constants.PREVIEW_FILM_SIZE * frameHeight / maxFrameDim;
+    var previewWidth = Constants.PREVIEW_FILM_SIZE * frameWidth / maxFrameDim;
+
+    return pskl.PixelUtils.calculateDPI(previewHeight, previewWidth, frameHeight, frameWidth) || 1;
   };
 })();

js/controller/ToolController.js

@@ -22,6 +22,19 @@
     this.previousSelectedTool = this.toolInstances.simplePen;
   };
 
+  /**
+   * @public
+   */
+  ns.ToolController.prototype.init = function() {
+    this.createToolMarkup_();
+
+    // Initialize tool:
+    // Set SimplePen as default selected tool:
+    this.selectTool_(this.toolInstances.simplePen);
+    // Activate listener on tool panel:
+    $("#tool-section").click($.proxy(this.onToolIconClicked_, this));
+  };
+
   /**
    * @private
    */
@@ -53,18 +66,27 @@
     var clickedTool = target.closest(".tool-icon");
 
     if(clickedTool.length) {
-      for(var tool in this.toolInstances) {
+      var toolId = clickedTool.data().toolId;
-        if (this.toolInstances[tool].toolId == clickedTool.data().toolId) {
+      var tool = this.getToolById_(toolId);
-          this.selectTool_(this.toolInstances[tool]);
+      if (tool) {
+        this.selectTool_(tool);
 
-          // Show tool as selected:
+        // Show tool as selected:
-          $('#tool-section .tool-icon.selected').removeClass('selected');
+        $('#tool-section .tool-icon.selected').removeClass('selected');
-          clickedTool.addClass('selected');
+        clickedTool.addClass('selected');
-        }
       }
     }
   };
 
+  ns.ToolController.prototype.getToolById_ = function (toolId) {
+    for(var key in this.toolInstances) {
+      if (this.toolInstances[key].toolId == toolId) {
+        return this.toolInstances[key];
+      }
+    }
+    return null;
+  };
+
   /**
    * @private
    */
@@ -82,18 +104,4 @@
     }
     $('#tools-container').html(toolMarkup);
   };
-
-  /**
-   * @public
-   */
-  ns.ToolController.prototype.init = function() {
-
-    this.createToolMarkup_();
-
-    // Initialize tool:
-    // Set SimplePen as default selected tool:
-    this.selectTool_(this.toolInstances.simplePen);
-    // Activate listener on tool panel:
-    $("#tool-section").click($.proxy(this.onToolIconClicked_, this));
-  };
 })();

js/drawingtools/selectiontools/BaseSelect.js

@@ -63,7 +63,6 @@
    */
   ns.BaseSelect.prototype.releaseToolAt = function(col, row, color, frame, overlay) {   
     if(this.mode == "select") {
-      
       this.onSelectEnd_(col, row, color, frame, overlay);
     } else if(this.mode == "moveSelection") {
       
@@ -90,6 +89,17 @@
     }
   };
 
+  /**
+   * For each pixel in the selection draw it in white transparent on the tool overlay
+   * @protected
+   */
+  ns.BaseSelect.prototype.drawSelectionOnOverlay_ = function (selection, overlay) {
+    var pixels = selection.pixels;
+    for(var i=0, l=pixels.length; i<l; i++) {
+      overlay.setPixel(pixels[i].col, pixels[i].row, Constants.SELECTION_TRANSPARENT_COLOR);
+    }
+  };
+
   /**
    * Move the overlay frame filled with semi-transparent pixels that represent the selection.
    * @private
@@ -125,6 +135,7 @@
     // we clone it to have a reference for the later shifting process.
     this.overlayFrameReference = overlay.clone();
   };
+  
   /** @private */
   ns.BaseSelect.prototype.onSelectionDrag_ = function (col, row, color, frame, overlay) {
     var deltaCol = col - this.lastCol;
@@ -141,10 +152,9 @@
     this.lastCol = col;
     this.lastRow = row; 
   };
+
   /** @private */
   ns.BaseSelect.prototype.onSelectionDragEnd_ = function (col, row, color, frame, overlay) {
     this.onSelectionDrag_(col, row, color, frame, overlay);
   };
-
-
 })();

js/drawingtools/selectiontools/RectangleSelect.js

@@ -38,6 +38,7 @@
       var selection = new pskl.selection.RectangularSelection(
         this.startCol, this.startRow, col, row);
       $.publish(Events.SELECTION_CREATED, [selection]);
+      this.drawSelectionOnOverlay_(selection, overlay);
     }
   };
 

js/drawingtools/selectiontools/ShapeSelect.js

@@ -15,7 +15,6 @@
 
   pskl.utils.inherit(ns.ShapeSelect, ns.BaseSelect);
   
-
   /**
    * For the shape select tool, you just need to click one time to create a selection.
    * So we jsut need to implement onSelectStart_ (no need for onSelect_ & onSelectEnd_)
@@ -24,11 +23,14 @@
   ns.ShapeSelect.prototype.onSelectStart_ = function (col, row, color, frame, overlay) {
     // Clean previous selection:
     $.publish(Events.SELECTION_DISMISSED);
+    overlay.clear();
     
     // From the pixel cliked, get shape using an algorithm similar to the paintbucket one:
     var pixels = pskl.PixelUtils.getSimilarConnectedPixelsFromFrame(frame, col, row);
     var selection = new pskl.selection.ShapeSelection(pixels);
+
     $.publish(Events.SELECTION_CREATED, [selection]);
+    this.drawSelectionOnOverlay_(selection, overlay);
   };
 
 })();

js/lib/gif/GIFEncoder.js

@@ -16,7 +16,7 @@
 	//import flash.net.URLRequest;
 	//import flash.net.navigateToURL;
 	
-	GIFEncoder = function()
+window.GIFEncoder = function()
 	{
 	    for(var i = 0, chr = {}; i < 256; i++)
         chr[i] = String.fromCharCode(i);

js/lib/gif/b64.js

@@ -1,4 +1,4 @@
-function encode64(input) {
+window.encode64(input) {
 	var output = "", i = 0, l = input.length,
 	key = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=", 
 	chr1, chr2, chr3, enc1, enc2, enc3, enc4;

js/piskel.js

@@ -17,34 +17,24 @@
       var frameSize = this.readSizeFromURL_();
       frameSheet = new pskl.model.FrameSheet(frameSize.height, frameSize.width);
       frameSheet.addEmptyFrame();
-
-      /**
-       * True when piskel is running in static mode (no back end needed).
-       * When started from APP Engine, appEngineToken_ (Boolean) should be set on window.pskl
-       */
-      this.isStaticVersion = !pskl.appEngineToken_;
-      
-      this.drawingController = new pskl.controller.DrawingController(frameSheet, $('#drawing-canvas-container'));
-      this.animationController = new pskl.controller.AnimatedPreviewController(frameSheet, $('#preview-canvas-container'));
-      this.previewsController = new pskl.controller.PreviewFilmController(frameSheet, $('#preview-list'));
-      this.settingsController = new pskl.controller.SettingsController();
-
-      // To catch the current active frame, the selection manager have to be initialized before
-      // the 'frameSheet.setCurrentFrameIndex(0);' line below.
-      // TODO(vincz): Slice each constructor to have:
-      //                  - an event(s) listening init
-      //                  - 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 = new pskl.selection.SelectionManager(frameSheet, this.drawingController.overlayFrame);
-
-      // DO NOT MOVE THIS LINE (see comment above)
       frameSheet.setCurrentFrameIndex(0);
 
+      
+      this.drawingController = new pskl.controller.DrawingController(frameSheet, $('#drawing-canvas-container'));
+      this.drawingController.init();
+
+      this.animationController = new pskl.controller.AnimatedPreviewController(frameSheet, $('#preview-canvas-container'));
       this.animationController.init();
+      
+      this.previewsController = new pskl.controller.PreviewFilmController(frameSheet, $('#preview-list'));
       this.previewsController.init();
+
+      this.settingsController = new pskl.controller.SettingsController();
       this.settingsController.init();
 
+      this.selectionManager = new pskl.selection.SelectionManager(frameSheet);
+      this.selectionManager.init();
+
       this.historyService = new pskl.service.HistoryService(frameSheet);
       this.historyService.init();
 
@@ -57,21 +47,11 @@
       this.localStorageService = new pskl.service.LocalStorageService(frameSheet);
       this.localStorageService.init();
 
-      if (this.isStaticVersion) {
+      this.toolController = new pskl.controller.ToolController();
-        var framesheetId = this.readFramesheetIdFromURL_();
+      this.toolController.init();
-        if (framesheetId) {
+      
-          $.publish(Events.SHOW_NOTIFICATION, [{"content": "Loading animation with id : [" + framesheetId + "]"}]);
+      this.paletteController = new pskl.controller.PaletteController();
-          this.loadFramesheetFromService(framesheetId);
+      this.paletteController.init(frameSheet);
-        } else {
-          this.finishInit();
-          this.localStorageService.displayRestoreNotification();
-        }
-      } else {
-        if (pskl.framesheetData_) {
-          frameSheet.load(pskl.framesheetData_);
-        }
-        this.finishInit();
-      }
 
       var drawingLoop = new pskl.rendering.DrawingLoop();
       drawingLoop.addCallback(this.render, this);
@@ -81,6 +61,27 @@
       $('body').tooltip({
         selector: '[rel=tooltip]'
       });
+
+      
+      /**
+       * True when piskel is running in static mode (no back end needed).
+       * When started from APP Engine, appEngineToken_ (Boolean) should be set on window.pskl
+       */
+      this.isStaticVersion = !pskl.appEngineToken_;
+
+      if (this.isStaticVersion) {
+        var framesheetId = this.readFramesheetIdFromURL_();
+        if (framesheetId) {
+          $.publish(Events.SHOW_NOTIFICATION, [{"content": "Loading animation with id : [" + framesheetId + "]"}]);
+          this.loadFramesheetFromService(framesheetId);
+        } else {
+          this.localStorageService.displayRestoreNotification();
+        }
+      } else {
+        if (pskl.framesheetData_) {
+          frameSheet.load(pskl.framesheetData_);
+        }
+      }
     },
 
     render : function (delta) {
@@ -89,14 +90,6 @@
       this.previewsController.render(delta);
     },    
 
-    finishInit : function () {
-      var toolController = new pskl.controller.ToolController();
-      toolController.init();
-      
-      var paletteController = new pskl.controller.PaletteController();
-      paletteController.init(frameSheet);
-    },
-
     readSizeFromURL_ : function () {
       var sizeParam = this.readUrlParameter_("size"), size;
       // parameter expected as size=64x48 => size=widthxheight
@@ -126,7 +119,7 @@
       for (i=0;i<params.length;i++) {
         val = params[i].split("=");
         if (val[0] == paramName) {
-          return unescape(val[1]);
+          return window.unescape(val[1]);
         }
       }
       return "";
@@ -142,12 +135,10 @@
         frameSheet.load(res.framesheet);
         pskl.app.animationController.setFPS(res.fps);
         $.publish(Events.HIDE_NOTIFICATION);
-        pskl.app.finishInit();
       };
 
       xhr.onerror = function () {
         $.publish(Events.HIDE_NOTIFICATION);
-        pskl.app.finishInit();
       };
 
       xhr.send();

js/rendering/FrameRenderer.js

@@ -29,11 +29,6 @@
     $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
   };
 
-  ns.FrameRenderer.prototype.init = function (frame) {
-    this.render(frame);
-    this.lastRenderedFrame = frame;
-  };
-
   ns.FrameRenderer.prototype.updateDPI = function (newDPI) {
     this.dpi = newDPI;
     this.canvasConfigDirty = true;

js/rendering/SpritesheetRenderer.js

@@ -16,7 +16,7 @@
   };
 
   ns.SpritesheetRenderer.prototype.renderAsImageDataAnimatedGIF = function (fps) {
-    var encoder = new GIFEncoder(), dpi = 10;
+    var encoder = new window.GIFEncoder(), dpi = 10;
     encoder.setRepeat(0);
     encoder.setDelay(1000/fps);
 
@@ -29,7 +29,7 @@
     }
     encoder.finish();
 
-    var imageData = 'data:image/gif;base64,' + encode64(encoder.stream().getData());
+    var imageData = 'data:image/gif;base64,' + window.encode64(encoder.stream().getData());
     return imageData;
   };
 

js/selection/SelectionManager.js

@@ -1,14 +1,14 @@
 (function () {
   var ns = $.namespace("pskl.selection");
 
-  
+  ns.SelectionManager = function (framesheet) {
-  ns.SelectionManager = function (framesheet, overlayFrame) {
     
     this.framesheet = framesheet;
-    this.overlayFrame = overlayFrame;
     
     this.currentSelection = null;
-    
+  };
+
+  ns.SelectionManager.prototype.init = function () {
     $.subscribe(Events.SELECTION_CREATED, $.proxy(this.onSelectionCreated_, this));
     $.subscribe(Events.SELECTION_DISMISSED, $.proxy(this.onSelectionDismissed_, this)); 
     $.subscribe(Events.SELECTION_MOVE_REQUEST, $.proxy(this.onSelectionMoved_, this));
@@ -23,11 +23,10 @@
   /**
    * @private
    */
-  ns.SelectionManager.prototype.cleanSelection_ = function(selection) {
+  ns.SelectionManager.prototype.cleanSelection_ = function() {
     if(this.currentSelection) {
       this.currentSelection.reset();
     }
-    this.overlayFrame.clear();
   };
 
   /**
@@ -106,12 +105,7 @@
   ns.SelectionManager.prototype.onSelectionCreated_ = function(evt, selection) {
     if(selection) {
       this.currentSelection = selection;
-      var pixels = selection.pixels;
+    } else {
-      for(var i=0, l=pixels.length; i<l; i++) {
-        this.overlayFrame.setPixel(pixels[i].col, pixels[i].row, Constants.SELECTION_TRANSPARENT_COLOR);
-      }
-    }
-    else {
       throw "No selection set in SelectionManager";
     }
   };