Gallery: Random fixes for the Viewport class.

The CL do:

* Remove the device rect argument from paintDeviceRect because the rectangle can
be calculated from other arguments.

* Remove setByFrame(AndFit) helper functions that are used only once each to simplify
the Viewport class.

* Rename getScreenClipped with getImageBoundsOnScreenClipped. The old name
  sounds it retuns the bounds of screen.

* Add getImageElementBounds to obtain the bounds before applying zoom and
  offset.

BUG=245926
TEST=manually

Review URL: https://codereview.chromium.org/398263002

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@283719 0039d316-1c4b-4281-b951-d872f2087c98

ui/file_manager/gallery/js/image_editor/commands.js

@@ -415,9 +415,7 @@ Command.Filter.prototype = { __proto__: Command.prototype };
 Command.Filter.prototype.execute = function(
     document, srcCanvas, callback, uiContext) {
   var result = this.createCanvas_(document, srcCanvas);
-
   var self = this;
-
   var previousRow = 0;
 
   function onProgressVisible(updatedRow, rowCount) {
@@ -438,8 +436,7 @@ Command.Filter.prototype.execute = function(
       screenStrip.height =
           Math.round(viewport.imageToScreenY(updatedRow)) - screenStrip.top;
 
-      uiContext.imageView.paintDeviceRect(
-          viewport.screenToDeviceRect(screenStrip), result, imageStrip);
+      uiContext.imageView.paintDeviceRect(result, imageStrip);
       previousRow = updatedRow;
     }
   }

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

@@ -30,7 +30,8 @@ function ImageEditor(
   ImageUtil.removeChildren(this.container_);
 
   this.viewport_ = viewport;
-  this.viewport_.sizeByFrame(this.container_);
+  this.viewport_.setScreenSize(
+      this.container_.clientWidth, this.container_.clientHeight);
 
   this.imageView_ = imageView;
   this.imageView_.addContentCallback(this.onContentUpdate_.bind(this));

ui/file_manager/gallery/js/image_editor/image_transform.js

@@ -128,7 +128,7 @@ ImageEditor.Mode.Crop.prototype.reset = function() {
  * Updates the position of DOM elements.
  */
 ImageEditor.Mode.Crop.prototype.positionDOM = function() {
-  var screenClipped = this.viewport_.getScreenClipped();
+  var screenClipped = this.viewport_.getImageBoundsOnScreenClipped();
 
   var screenCrop = this.viewport_.imageToScreenRect(this.cropRect_.getRect());
   var delta = ImageEditor.Mode.Crop.MOUSE_GRAB_RADIUS;
@@ -190,7 +190,8 @@ ImageEditor.Mode.Crop.prototype.getCommand = function() {
  * Creates default (initial) crop.
  */
 ImageEditor.Mode.Crop.prototype.createDefaultCrop = function() {
-  var rect = new Rect(this.getViewport().getImageClipped());
+  var rect = this.getViewport().screenToImageRect(
+      new Rect(this.getViewport().getImageBoundsOnScreenClipped()));
   rect = rect.inflate(
       -Math.round(rect.width / 6), -Math.round(rect.height / 6));
   this.cropRect_ = new DraggableRect(rect, this.getViewport());
@@ -465,7 +466,8 @@ DraggableRect.prototype.getDragHandler = function(
   var initialY = this.viewport_.screenToImageY(initialScreenY);
   var initialWidth = this.bounds_.right - this.bounds_.left;
   var initialHeight = this.bounds_.bottom - this.bounds_.top;
-  var clipRect = this.viewport_.getImageClipped();
+  var clipRect = this.viewport_.screenToImageRect(
+      this.viewport_.getImageBoundsOnScreenClipped());
   if (!clipRect.inside(initialX, initialY))
     return null;
 
@@ -557,10 +559,7 @@ DraggableRect.prototype.getDragHandler = function(
  * @return {ImageBuffer.DoubleTapAction} Double tap action.
  */
 DraggableRect.prototype.getDoubleTapAction = function(x, y, touch) {
-  x = this.viewport_.screenToImageX(x);
-  y = this.viewport_.screenToImageY(y);
-
-  var clipRect = this.viewport_.getImageClipped();
+  var clipRect = this.viewport_.getImageBoundsOnScreenClipped();
   if (clipRect.inside(x, y))
     return ImageBuffer.DoubleTapAction.COMMIT;
   else

ui/file_manager/gallery/js/image_editor/image_util.js

@@ -139,6 +139,28 @@ function Rect() {
        Array.apply(null, arguments));
 }
 
+Rect.prototype = {
+  /**
+   * Obtains the x coordinate of right edge. The most right pixels in the
+   * rectangle are (x = right - 1) and the pixels (x = right) are not included
+   * in the rectangle.
+   * @return {number}
+   */
+  get right() {
+    return this.left + this.width;
+  },
+
+  /**
+   * Obtains the y coordinate of bottom edge. The most bottom pixels in the
+   * rectanlge are (y = buttom - 1) and the pixels (y = bottom) are not included
+   * in the rectangle.
+   * @return {number}
+   */
+  get bottom() {
+    return this.top + this.height;
+  }
+};
+
 /**
  * @param {number} factor Factor to scale.
  * @return {Rect} A rectangle with every dimension scaled.

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

@@ -119,8 +119,7 @@ ImageView.prototype.draw = function() {
     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');
   }
 };
@@ -178,22 +177,29 @@ ImageView.prototype.getContentRevision = function() {
  * 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.
- */
-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);
-
-  // 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);
+ * @param {HTMLCanvasElement} canvas Canvas containing whole image. The canvas
+ *     may not be full resolution (scaled).
+ * @param {Rect} imageRect Rectangle region of the canvas to be rendered.
+ */
+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;
+  }
+
+  // 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);
 };
@@ -217,17 +223,17 @@ ImageView.prototype.createOverlayCanvas = function() {
  * @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);

ui/file_manager/gallery/js/slide_mode.js

@@ -394,7 +394,7 @@ SlideMode.prototype.getSelectedImageRect = function() {
   if (this.getSelectedIndex() < 0)
     return null;
   else
-    return this.viewport_.getScreenClipped();
+    return this.viewport_.getImageBoundsOnScreen();
 };
 
 /**
@@ -889,8 +889,8 @@ SlideMode.prototype.onKeyDown = function(event) {
  * @private
  */
 SlideMode.prototype.onResize_ = function() {
-  this.viewport_.sizeByFrameAndFit(this.container_);
-  this.viewport_.update();
+  this.viewport_.setScreenSize(
+      this.container_.clientWidth, this.container_.clientHeight);
   this.editor_.getBuffer().draw();
 };
 
@@ -1047,7 +1047,7 @@ SlideMode.prototype.isSlideshowOn_ = function() {
 SlideMode.prototype.startSlideshow = function(opt_interval, opt_event) {
   // Reset zoom.
   this.viewport_.setZoomIndex(0);
-  this.imageView_.draw();
+  this.imageView_.applyViewportChange();
 
   // Set the attribute early to prevent the toolbar from flashing when
   // the slideshow is being started from the mosaic view.
@@ -1202,7 +1202,7 @@ SlideMode.prototype.toggleEditor = function(opt_event) {
   if (this.isEditing()) { // isEditing has just been flipped to a new value.
     // Reset zoom.
     this.viewport_.setZoomIndex(0);
-    this.imageView_.draw();
+    this.imageView_.applyViewportChange();
     if (this.context_.readonlyDirName) {
       this.editor_.getPrompt().showAt(
           'top', 'GALLERY_READONLY_WARNING', 0, this.context_.readonlyDirName);