Gallery: Random fixes for the Viewport class.

ui/file_manager/gallery/js/image_editor/image_view.js

 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 'use strict';
 
 /**
  * The overlay displaying the image.
  *
  * @param {HTMLElement} container The container element.
@@ skipping 101 matching lines @@
     this.setupDeviceBuffer(this.screenImage_);
 
     forceRepaint = true;
   }
 
   if (forceRepaint ||
       this.displayedContentGeneration_ !== this.contentGeneration_) {
     this.displayedContentGeneration_ = this.contentGeneration_;
 
     ImageUtil.trace.resetTimer('paint');
-    this.paintDeviceRect(this.viewport_.getDeviceClipped(),
-        this.contentCanvas_, this.viewport_.getImageClipped());
+    this.paintDeviceRect(this.contentCanvas_, new Rect(this.contentCanvas_));
     ImageUtil.trace.reportTimer('paint');
   }
 };
 
 /**
  * Applies the viewport change that does not affect the screen cache size (zoom
  * change or offset change) with animation.
  */
 ImageView.prototype.applyViewportChange = function() {
   this.setTransform(
@@ skipping 37 matching lines @@
  * @return {number} The content revision number.
  */
 ImageView.prototype.getContentRevision = function() {
   return this.contentRevision_;
 };
 
 /**
  * Copies an image fragment from a full resolution canvas to a device resolution
  * canvas.
  *
- * @param {Rect} deviceRect Rectangle in the device coordinates.
- * @param {HTMLCanvasElement} canvas Full resolution canvas.
- * @param {Rect} imageRect Rectangle in the full resolution canvas.
+ * @param {HTMLCanvasElement} canvas Canvas containing whole image. The canvas
+ *     may not be fullresolution (scaled).

[mtomasz, 2014/07/17 05:43:20]

nit: fullresolution -> full resolution

[hirono, 2014/07/17 05:56:47]

Done.

+ * @param {Rect} imageRect Rectangle region of the canvas to be rendered.
  */
-ImageView.prototype.paintDeviceRect = function(deviceRect, canvas, imageRect) {
-  // Map screen canvas (0,0) to (deviceBounds.left, deviceBounds.top)
-  var deviceBounds = this.viewport_.getDeviceClipped();
-  deviceRect = deviceRect.shift(-deviceBounds.left, -deviceBounds.top);
+ImageView.prototype.paintDeviceRect = function(canvas, imageRect) {
+  // Check canvas size.
+  var deviceBounds = this.viewport_.getDeviceBounds();
+  if (this.screenImage_.width != deviceBounds.width ||
+      this.screenImage_.height != deviceBounds.height) {
+    console.error('The size of canvas is invalid.', (new Error).stack);
+    return;
+  }
 
-  // The source canvas may have different physical size than the image size
-  // set at the viewport. Adjust imageRect accordingly.
-  var bounds = this.viewport_.getImageBounds();
-  var scaleX = canvas.width / bounds.width;
-  var scaleY = canvas.height / bounds.height;
-  imageRect = new Rect(imageRect.left * scaleX, imageRect.top * scaleY,
-                       imageRect.width * scaleX, imageRect.height * scaleY);
+  // Map the rectangle in full resolution image to the rectangle in the device
+  // canvas.
+  var scaleX = deviceBounds.width / canvas.width;
+  var scaleY = deviceBounds.height / canvas.height;
+  var deviceRect = new Rect(
+      imageRect.left * scaleX,
+      imageRect.top * scaleY,
+      imageRect.width * scaleX,
+      imageRect.height * scaleY);
+
   Rect.drawImage(
       this.screenImage_.getContext('2d'), canvas, deviceRect, imageRect);
 };
 
 /**
  * Creates an overlay canvas with properties similar to the screen canvas.
  * Useful for showing quick feedback when editing.
  *
  * @return {HTMLCanvasElement} Overlay canvas.
  */
 ImageView.prototype.createOverlayCanvas = function() {
   var canvas = this.document_.createElement('canvas');
   canvas.className = 'image';
   this.container_.appendChild(canvas);
   return canvas;
 };
 
 /**
  * Sets up the canvas as a buffer in the device resolution.
  *
  * @param {HTMLCanvasElement} canvas The buffer canvas.
  */
 ImageView.prototype.setupDeviceBuffer = function(canvas) {
-  var deviceRect = this.viewport_.getDeviceClipped();
-
   // Set the canvas position and size in device pixels.
+  var deviceRect = this.viewport_.getDeviceBounds();
   if (canvas.width !== deviceRect.width)
     canvas.width = deviceRect.width;
-
   if (canvas.height !== deviceRect.height)
     canvas.height = deviceRect.height;
 
-  canvas.style.left = deviceRect.left + 'px';
-  canvas.style.top = deviceRect.top + 'px';
+  // Center the image.
+  var imageBoudns = this.viewport_.getImageElementBoundsOnScreen();
+  canvas.style.left = imageBoudns.left + 'px';
+  canvas.style.top = imageBoudns.top + 'px';
 
   // Scale the canvas down to screen pixels.
   this.setTransform(canvas);
 };
 
 /**
  * @return {ImageData} A new ImageData object with a copy of the content.
  */
 ImageView.prototype.copyScreenImageData = function() {
   return this.screenImage_.getContext('2d').getImageData(
@@ skipping 721 matching lines @@
 };
 
 ImageView.Effect.Rotate.prototype = { __proto__: ImageView.Effect.prototype };
 
 /**
  * @override
  */
 ImageView.Effect.Rotate.prototype.transform = function(element, viewport) {
   return viewport.getInverseTransformForRotatedImage(this.orientation_);
 };