Fixed dynamic dpi update for drawing canvas, added throttle on resize event.

js/controller/DrawingController.js

@@ -189,24 +189,19 @@
   ns.DrawingController.prototype.updateDPI = function (newDPI) {
     this.renderer.updateDPI(newDPI);
     this.overlayRenderer.updateDPI(newDPI);
-
-		this.render();
+    this.forceRendering_();
   };
 
   ns.DrawingController.prototype.render = function () {
-    try {
     this.renderFrame();
     this.renderOverlay();
-    } catch (e) {
-      // TODO : temporary t/c for integration
-    }
   };
 
   ns.DrawingController.prototype.renderFrame = function () {
     var frame = this.framesheet.getCurrentFrame();
     var serializedFrame = frame.serialize();
     if (this.serializedFrame != serializedFrame) {
-      this.serializedFrame = serializedFrame
+      this.serializedFrame = serializedFrame;
       this.renderer.render(frame);
     }
   };
@@ -214,8 +209,12 @@
   ns.DrawingController.prototype.renderOverlay = function () {
     var serializedOverlay = this.overlayFrame.serialize();
     if (this.serializedOverlay != serializedOverlay) {
-      this.serializedOverlay = serializedOverlay
+      this.serializedOverlay = serializedOverlay;
       this.overlayRenderer.render(this.overlayFrame);
     }
   };
+
+  ns.DrawingController.prototype.forceRendering_ = function () {
+    this.serializedFrame = this.serializedOverlay = null;
+  }
 })();

js/piskel.js

@@ -17,8 +17,7 @@ $.namespace("pskl");
       framePixelHeight = 32,
 
       // Scaling factors for a given frameSheet rendering:
-      // Main drawing area:
-      drawingCanvasDpi = 20,   
+      // Main drawing area dpi is calculated dynamically
       // Canvas preview film canvases:
       previewTileCanvasDpi = 4,
       // Animated canvas preview:
@@ -30,15 +29,14 @@ $.namespace("pskl");
   var piskel = {
 
     init : function () {
-      piskel.initDPIs_();
-
       frameSheet = new pskl.model.FrameSheet(framePixelWidth, framePixelHeight);
       frameSheet.addEmptyFrame();
+      frameSheet.setCurrentFrameIndex(0);
       
       this.drawingController = new pskl.controller.DrawingController(
         frameSheet,
         $('#drawing-canvas-container'), 
-        drawingCanvasDpi
+        this.calculateDPIsForDrawingCanvas_()
       );
 
       this.animationController = new pskl.controller.AnimatedPreviewController(
@@ -47,7 +45,6 @@ $.namespace("pskl");
         previewAnimationCanvasDpi
       );
 
-
       this.previewsController = new pskl.controller.PreviewFilmController(
         frameSheet,
         $('#preview-list'), 
@@ -64,10 +61,6 @@ $.namespace("pskl");
       this.selectionManager =
           new pskl.selection.SelectionManager(this.drawingController.overlayFrame);
 
-      frameSheet.setCurrentFrameIndex(0);
-
-      
-
       this.animationController.init();
       this.previewsController.init();
 
@@ -92,6 +85,8 @@ $.namespace("pskl");
       var drawingLoop = new pskl.rendering.DrawingLoop();
       drawingLoop.addCallback(this.render, this);
       drawingLoop.start();
+
+      this.connectResizeToDpiUpdate_();
     },
 
     render : function (delta) {
@@ -100,18 +95,18 @@ $.namespace("pskl");
       this.previewsController.render(delta);
     },
 
-    /**
-     * Override default DPIs.
-     * @private
-     */
-    initDPIs_ : function() {
-      drawingCanvasDpi = piskel.calculateDPIsForDrawingCanvas_();
-      // TODO(vincz): Add throttling on window.resize event.
-      $(window).resize($.proxy(function() {
-        drawingCanvasDpi = piskel.calculateDPIsForDrawingCanvas_();
-        this.drawingController.updateDPI(drawingCanvasDpi);
-      }, this));
-      // TODO(vincz): Check for user settings eventually from localstorage.
+    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);
     },
 
     /**