Layers:Review:Removed grid drawing routine : was never drawn

js/Constants.js

@@ -36,7 +36,6 @@ var Constants = {
   IMAGE_SERVICE_GET_URL : 'http://screenletstore.appspot.com/img/',
 
   GRID_STROKE_WIDTH: 1,
-  GRID_STROKE_COLOR: 'lightgray',
 
   LEFT_BUTTON : 'left_button_1',
   RIGHT_BUTTON : 'right_button_2'

js/controller/AnimatedPreviewController.js

@@ -66,6 +66,6 @@
 
   ns.AnimatedPreviewController.prototype.updateDPI_ = function () {
     this.dpi = this.calculateDPI_();
-    this.renderer.updateDPI(this.dpi);
+    this.renderer.setDPI(this.dpi);
   };
 })();

js/controller/DrawingController.js

@@ -16,9 +16,11 @@
      */
     this.container = container;
 
+    this.dpi = this.calculateDPI_();
+
     // TODO(vincz): Store user prefs in a localstorage string ?
     var renderingOptions = {
-      "dpi": this.calculateDPI_(),
+      "dpi": this.dpi,
       "supportGridRendering" : true
     };
 
@@ -248,7 +250,7 @@
 
   ns.DrawingController.prototype.renderFrame = function () {
     var frame = this.piskelController.getCurrentFrame();
-    var serializedFrame = frame.serialize();
+    var serializedFrame = this.dpi + "-" + frame.serialize();
     if (this.serializedFrame != serializedFrame) {
       if (!frame.isSameSize(this.overlayFrame)) {
         this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(frame);
@@ -259,7 +261,7 @@
   };
 
   ns.DrawingController.prototype.renderOverlay = function () {
-    var serializedOverlay = this.overlayFrame.serialize();
+    var serializedOverlay = this.dpi + "-" + this.overlayFrame.serialize();
     if (this.serializedOverlay != serializedOverlay) {
       this.serializedOverlay = serializedOverlay;
       this.overlayRenderer.render(this.overlayFrame);
@@ -271,8 +273,14 @@
     var currentFrameIndex = this.piskelController.currentFrameIndex;
     var currentLayerIndex = this.piskelController.currentLayerIndex;
 
-    var serialized = [currentFrameIndex, this.piskelController.currentLayerIndex, layers.length].join("-");
+    var serializedLayerFrame = [
-    if (this.serializedLayerFrame != serialized) {
+      this.dpi,
+      currentFrameIndex,
+      currentLayerIndex,
+      layers.length
+    ].join("-");
+
+    if (this.serializedLayerFrame != serializedLayerFrame) {
       this.layersAboveRenderer.clear();
       this.layersBelowRenderer.clear();
 
@@ -286,7 +294,7 @@
         this.layersAboveRenderer.render(upFrame);
       }
 
-      this.serializedLayerFrame = serialized;
+      this.serializedLayerFrame = serializedLayerFrame;
     }
   };
 
@@ -297,10 +305,6 @@
     return pskl.utils.FrameUtils.merge(frames);
   };
 
-  ns.DrawingController.prototype.forceRendering_ = function () {
-    this.serializedFrame = this.serializedOverlay = null;
-  };
-
   /**
    * @private
    */
@@ -327,17 +331,15 @@
    * @private
    */
   ns.DrawingController.prototype.updateDPI_ = function() {
-    var dpi = this.calculateDPI_();
+    this.dpi = this.calculateDPI_();
 
-    this.overlayRenderer.updateDPI(dpi);
+    this.overlayRenderer.setDPI(this.dpi);
-    this.renderer.updateDPI(dpi);
+    this.renderer.setDPI(this.dpi);
-    this.layersAboveRenderer.updateDPI(dpi);
+    this.layersAboveRenderer.setDPI(this.dpi);
-    this.layersBelowRenderer.updateDPI(dpi);
+    this.layersBelowRenderer.setDPI(this.dpi);
-
-    this.serializedLayerFrame = "";
 
     var currentFrameHeight =  this.piskelController.getCurrentFrame().getHeight();
-    var canvasHeight = currentFrameHeight * dpi;
+    var canvasHeight = currentFrameHeight * this.dpi;
     if (pskl.UserSettings.get(pskl.UserSettings.SHOW_GRID)) {
       canvasHeight += Constants.GRID_STROKE_WIDTH * currentFrameHeight;
     }
@@ -347,7 +349,5 @@
       'top': verticalGapInPixel + 'px',
       'height': canvasHeight + 'px'
     });
-
-    this.forceRendering_();
   };
 })();

js/rendering/FrameRenderer.js

@@ -39,8 +39,8 @@
     $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
   };
 
-  ns.FrameRenderer.prototype.updateDPI = function (newDPI) {
+  ns.FrameRenderer.prototype.setDPI = function (dpi) {
-    this.dpi = newDPI;
+    this.dpi = dpi;
     this.canvasConfigDirty = true;
   };
 
@@ -121,26 +121,6 @@
     return index * this.dpi + ((index - 1) * this.gridStrokeWidth);
   };
 
-  /**
-   * @private
-   */
-  ns.FrameRenderer.prototype.drawGrid_ = function(canvas, width, height, col, row) {
-    var ctx = canvas.getContext("2d");
-    ctx.lineWidth = Constants.GRID_STROKE_WIDTH;
-    ctx.strokeStyle = Constants.GRID_STROKE_COLOR;
-    for(var c=1; c < col; c++) {
-      ctx.moveTo(this.getFramePos_(c), 0);
-      ctx.lineTo(this.getFramePos_(c), height);
-      ctx.stroke();
-    }
-
-    for(var r=1; r < row; r++) {
-      ctx.moveTo(0, this.getFramePos_(r));
-      ctx.lineTo(width, this.getFramePos_(r));
-      ctx.stroke();
-    }
-  };
-
   /**
    * @private
    */
@@ -157,10 +137,6 @@
       var canvas = pskl.CanvasUtils.createCanvas(pixelWidth, pixelHeight, this.classes);
       this.container.append(canvas);
 
-      if(this.gridStrokeWidth > 0) {
-        this.drawGrid_(canvas, pixelWidth, pixelHeight, col, row);
-      }
-
       this.canvas = canvas;
       this.canvasConfigDirty = false;
     }

js/utils/Serializer.js

@@ -10,7 +10,6 @@
         piskel : {
           height : piskel.getHeight(),
           width : piskel.getWidth(),
-          fps : piskel.getFps(),
           layers : serializedLayers
         }
       });
@@ -33,7 +32,7 @@
         var layers = pData.layers.map(function (serializedLayer) {
           return pskl.utils.Serializer.deserializeLayer(serializedLayer);
         });
-        var piskel = new pskl.model.Piskel(pData.width, pData.height, pData.fps);
+        var piskel = new pskl.model.Piskel(pData.width, pData.height);
         layers.forEach(function (layer) {
           piskel.addLayer(layer);
         });