Gallery: change size of crop overlay to cover entire window.

ui/file_manager/gallery/js/image_editor/image_transform.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.
 
 /**
  * Crop mode.
  *
  * @extends {ImageEditor.Mode}
  * @constructor
  * @struct
@@ skipping 195 matching lines @@
  */
 ImageEditor.Mode.Crop.prototype.reset = function() {
   ImageEditor.Mode.prototype.reset.call(this);
   this.createDefaultCrop();
 };
 
 /**
  * Updates the position of DOM elements.
  */
 ImageEditor.Mode.Crop.prototype.positionDOM = function() {
-  var screenClipped = this.viewport_.getImageBoundsOnScreenClipped();
+  var screenCrop = this.viewport_.imageToScreenRect(this.cropRect_.getRect());
 
-  var screenCrop = this.viewport_.imageToScreenRect(this.cropRect_.getRect());
-  var delta = ImageEditor.Mode.Crop.MOUSE_GRAB_RADIUS;
-  this.editor_.hideOverlappingTools(
-      screenCrop.inflate(delta, delta),
-      screenCrop.inflate(-delta, -delta));
-
-  this.domOverlay_.style.left = screenClipped.left + 'px';
-  this.domOverlay_.style.top = screenClipped.top + 'px';
-  this.domOverlay_.style.width = screenClipped.width + 'px';
-  this.domOverlay_.style.height = screenClipped.height + 'px';
-
-  this.shadowLeft_.style.width = screenCrop.left - screenClipped.left + 'px';
-
-  this.shadowTop_.style.height = screenCrop.top - screenClipped.top + 'px';
-
-  this.shadowRight_.style.width = screenClipped.left + screenClipped.width -
-      (screenCrop.left + screenCrop.width) + 'px';
-
-  this.shadowBottom_.style.height = screenClipped.top + screenClipped.height -
-      (screenCrop.top + screenCrop.height) + 'px';
+  this.shadowLeft_.style.width = screenCrop.left + 'px';
+  this.shadowTop_.style.height = screenCrop.top + 'px';
+  this.shadowRight_.style.width = window.innerWidth - screenCrop.right + 'px';
+  this.shadowBottom_.style.height =
+      window.innerHeight - screenCrop.bottom + 'px';
 };
 
 /**
  * Removes the overlay elements from the document.
  */
 ImageEditor.Mode.Crop.prototype.cleanUpUI = function() {
   ImageEditor.Mode.prototype.cleanUpUI.apply(this, arguments);
   this.domOverlay_.parentNode.removeChild(this.domOverlay_);
   this.domOverlay_ = null;
-  this.editor_.hideOverlappingTools();
   this.getViewport().removeEventListener(
       'resize', this.onViewportResizedBound_);
   this.onViewportResizedBound_ = null;
 
   // Restore the screen to the full size of window.
   this.getViewport().setScreenTop(0);
   this.getViewport().setScreenBottom(0);
   this.getImageView().applyViewportChange();
 };
 
@@ skipping 298 matching lines @@
  * Obtains the drag handler depending on the coordinate.
  *
  * @param {number} initialScreenX X coordinate for cursor in the screen.
  * @param {number} initialScreenY Y coordinate for cursor in the screen.
  * @param {boolean} touch Whether the operation is done by touch or not.
  * @return {?function(number,number,boolean)} Drag handler that takes x
  *     coordinate value, y coordinate value, and shift key flag.
  */
 DraggableRect.prototype.getDragHandler = function(
     initialScreenX, initialScreenY, touch) {
-  // Check if the initial coordinate in the clip rect.
+  // Check if the initial coordinate is in the image rect.
+  var boundsOnScreen = this.viewport_.getImageBoundsOnScreenClipped();
+  var handlerRadius = touch ? ImageEditor.Mode.Crop.TOUCH_GRAB_RADIUS :
+      ImageEditor.Mode.Crop.MOUSE_GRAB_RADIUS;
+  var draggableAreas = [
+      boundsOnScreen,
+      new Circle(boundsOnScreen.left, boundsOnScreen.top, handlerRadius),
+      new Circle(boundsOnScreen.right, boundsOnScreen.top, handlerRadius),
+      new Circle(boundsOnScreen.left, boundsOnScreen.bottom, handlerRadius),
+      new Circle(boundsOnScreen.right, boundsOnScreen.bottom, handlerRadius)
+  ];
+
+  if (!draggableAreas.some(
+      (area) => area.inside(initialScreenX, initialScreenY))) {
+    return null;
+  }
+
+  // Convert coordinates.
   var initialX = this.viewport_.screenToImageX(initialScreenX);
   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_.screenToImageRect(
-      this.viewport_.getImageBoundsOnScreenClipped());
-  if (!clipRect.inside(initialX, initialY))
-    return null;
+  var clipRect = this.viewport_.screenToImageRect(boundsOnScreen);
 
   // Obtain the drag mode.
   this.dragMode_ = this.getDragMode(initialX, initialY, touch);
 
   if (this.dragMode_.whole) {
     // Calc constant values during the operation.
     var mouseBiasX = this.bounds_.left - initialX;
     var mouseBiasY = this.bounds_.top - initialY;
     var maxX = clipRect.left + clipRect.width - initialWidth;
     var maxY = clipRect.top + clipRect.height - initialHeight;
@@ skipping 163 matching lines @@
       break;
     case 'bottom':
       this.bounds_.bottom = this.bounds_.top + newHeight;
       break;
     case 'none':
       this.bounds_.top = middle - newHeight / 2;
       this.bounds_.bottom = middle + newHeight / 2;
       break;
   }
 };