diff --git a/js/controller/DrawingController.js b/js/controller/DrawingController.js index da330fab..97997a9c 100644 --- a/js/controller/DrawingController.js +++ b/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 () { diff --git a/js/drawingtools/Move.js b/js/drawingtools/Move.js index 8a36e36f..2ff9ca73 100644 --- a/js/drawingtools/Move.js +++ b/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); diff --git a/js/model/Frame.js b/js/model/Frame.js index 72fcdd04..b8c7a5eb 100644 --- a/js/model/Frame.js +++ b/js/model/Frame.js @@ -2,8 +2,8 @@ var ns = $.namespace("pskl.model"); ns.Frame = function (pixels) { - this.pixels = pixels; - this.previousStates = [this._clonePixels()]; + this.pixels = this.clonePixels_(pixels); + 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 = []; - for (var col = 0 ; col < this.getWidth() ; col++) { - pixels[col] = this.pixels[col].slice(0 , this.getHeight()); + /** + * Returns a copy of the pixels used by the frame + */ + 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]); } }; })(); \ No newline at end of file diff --git a/js/piskel.js b/js/piskel.js index e1f9ac75..9e8d11c6 100644 --- a/js/piskel.js +++ b/js/piskel.js @@ -105,8 +105,32 @@ $.namespace("pskl"); * @private */ calculateDPIsForDrawingCanvas_ : function() { - var availableViewportHeight = $('.main-panel').height() - 50; - return Math.floor(availableViewportHeight / framePixelHeight); + var availableViewportHeight = $('.main-panel').height() - 50, + 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 () {