Fixed size related issues. Selection Manager no longer depends on the frameoverlay which is now only manipulated by the tools

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,
-            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 ?)
+        var curFrame = this.framesheet.getCurrentFrame(),
+            frameHeight = curFrame.getHeight(),
+            frameWidth = curFrame.getWidth(),
+            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);
     };
 })();

js/controller/ToolController.js

@@ -22,6 +22,20 @@
         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
      */
@@ -82,18 +96,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

@@ -90,6 +90,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

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

@@ -24,11 +24,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/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) {
-        var framesheetId = this.readFramesheetIdFromURL_();
-        if (framesheetId) {
-          $.publish(Events.SHOW_NOTIFICATION, [{"content": "Loading animation with id : [" + framesheetId + "]"}]);
-          this.loadFramesheetFromService(framesheetId);
-        } else {
-          this.finishInit();
-          this.localStorageService.displayRestoreNotification();
-        }
-      } else {
-        if (pskl.framesheetData_) {
-          frameSheet.load(pskl.framesheetData_);
-        }
-        this.finishInit();
-      }
+      this.toolController = new pskl.controller.ToolController();
+      this.toolController.init();
+      
+      this.paletteController = new pskl.controller.PaletteController();
+      this.paletteController.init(frameSheet);
 
       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
@@ -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/selection/SelectionManager.js

@@ -2,13 +2,14 @@
 	var ns = $.namespace("pskl.selection");
 
 	
-	ns.SelectionManager = function (framesheet, overlayFrame) {
+	ns.SelectionManager = function (framesheet) {
 		
 		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 +24,10 @@
 	/**
 	 * @private
 	 */
-	ns.SelectionManager.prototype.cleanSelection_ = function(selection) {
+	ns.SelectionManager.prototype.cleanSelection_ = function() {
 		if(this.currentSelection) {
 			this.currentSelection.reset();
 		}
-		this.overlayFrame.clear();
 	};
 
 	/**
@@ -106,12 +106,7 @@
 	ns.SelectionManager.prototype.onSelectionCreated_ = function(evt, selection) {
 		if(selection) {
 			this.currentSelection = selection;
-			var pixels = selection.pixels;
-			for(var i=0, l=pixels.length; i<l; i++) {
-				this.overlayFrame.setPixel(pixels[i].col, pixels[i].row, Constants.SELECTION_TRANSPARENT_COLOR);
-			}
-		}
-		else {
+		} else {
 			throw "No selection set in SelectionManager";
 		}
 	};