pull/merge from master

js/controller/DrawingController.js

@@ -207,7 +207,7 @@
 		this.overlayRenderer.updateDPI(newDPI);
 
 		this.renderer.render(this.frame);
-		this.overlayRenderer.render(this.frame);
+		this.overlayRenderer.render(this.overlayFrame);
 	};
 
 	ns.DrawingController.prototype.renderFrame = function () {

js/drawingtools/Move.js

@@ -12,8 +12,6 @@
 		// Stroke's first point coordinates (set in applyToolAt)
 		this.startCol = null;
 		this.startRow = null;
-		
-		this.canvasOverlay = null;
 	};
 
 	pskl.utils.inherit(ns.Move, ns.BaseTool);

js/model/Frame.js

@@ -2,8 +2,8 @@
 	var ns = $.namespace("pskl.model");
 	
 	ns.Frame = function (pixels) {
-		this.pixels = pixels;
+		this.pixels = this.clonePixels_(pixels);
-		this.previousStates = [this._clonePixels()];
+		this.previousStates = [this.getPixels()];
 		this.stateIndex = 0;
 	};
 
@@ -24,15 +24,33 @@
 	};
 
 	ns.Frame.prototype.clone = function () {
-		return new ns.Frame(this._clonePixels());
+		return new ns.Frame(this.getPixels());
 	};
 
-	ns.Frame.prototype._clonePixels = function () {
+	/**
-		var pixels = [];
+	 * Returns a copy of the pixels used by the frame
-		for (var col = 0 ; col < this.getWidth() ; col++) {
+	 */
-			pixels[col] = this.pixels[col].slice(0 , this.getHeight());
+	ns.Frame.prototype.getPixels = function () {
+		return this.clonePixels_(this.pixels)
+	};
+
+	/**
+	 * Copies the passed pixels into the frame.
+	 */
+	ns.Frame.prototype.setPixels = function (pixels) {
+		this.pixels = this.clonePixels_(pixels);
+	};
+
+	/**
+	 * Clone a set of pixels. Should be static utility method
+	 * @private
+	 */
+	ns.Frame.prototype.clonePixels_ = function (pixels) {
+		var clonedPixels = [];
+		for (var col = 0 ; col < pixels.length ; col++) {
+			clonedPixels[col] = pixels[col].slice(0 , pixels[col].length);
 		}
-		return pixels;
+		return clonedPixels;
 	};
 
 	ns.Frame.prototype.serialize = function () {
@@ -63,7 +81,7 @@
 		// remove all states past current state
 		this.previousStates.length = this.stateIndex + 1;
 		// push new state
-		this.previousStates.push(this._clonePixels());
+		this.previousStates.push(this.getPixels());
 		// set the stateIndex to latest saved state
 		this.stateIndex = this.previousStates.length - 1;
 	};
@@ -71,14 +89,14 @@
 	ns.Frame.prototype.loadPreviousState = function () {
 		if (this.stateIndex > 0) {
 			this.stateIndex--;
-			this.pixels = this.previousStates[this.stateIndex];
+			this.setPixels(this.previousStates[this.stateIndex]);
 		}
 	};
 
 	ns.Frame.prototype.loadNextState = function () {
 		if (this.stateIndex < this.previousStates.length - 1) {
 			this.stateIndex++;
-			this.pixels = this.previousStates[this.stateIndex];
+			this.setPixels(this.previousStates[this.stateIndex]);
 		}	
 	};
 })();

js/piskel.js

@@ -105,8 +105,32 @@ $.namespace("pskl");
      * @private
      */
     calculateDPIsForDrawingCanvas_ : function() {
-      var availableViewportHeight = $('.main-panel').height() - 50;
+      var availableViewportHeight = $('.main-panel').height() - 50,
-      return Math.floor(availableViewportHeight / framePixelHeight);    
+          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 () {