Gallery.app: Add buttons to the cropping mode to specifying the aspect ratio.

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.
 
 'use strict';
 
 /**
  * Crop mode.
  *
  * @extends {ImageEditor.Mode}
@@ skipping 59 matching lines @@
   addCropFrame('bottom horizontal');
   addCropFrame('right bottom corner');
 
   this.onResizedBound_ = this.onResized_.bind(this);
   window.addEventListener('resize', this.onResizedBound_);
 
   this.createDefaultCrop();
 };
 
 /**
+ * @override
+ */
+ImageEditor.Mode.Crop.prototype.createTools = function(toolbar) {
+  var aspects = {
+    GALLERY_ASPECT_RATIO_1_1: 1 / 1,
+    GALLERY_ASPECT_RATIO_6_4: 6 / 4,
+    GALLERY_ASPECT_RATIO_7_5: 7 / 5,
+    GALLERY_ASPECT_RATIO_16_9: 16 / 9
+  };
+  for (name in aspects) {
+    toolbar.addButton(
+        name,
+        name,
+        function(aspect, event) {
+          var button = event.target;
+          if (button.classList.contains('selected')) {
+            button.classList.remove('selected');
+            this.cropRect_.fixedAspectRatio = null;
+          } else {
+            var selectedButtons =
+                toolbar.element.querySelectorAll('button.selected');
+            for (var i = 0; i < selectedButtons.length; i++) {
+              selectedButtons[i].classList.remove('selected');
+            }
+            button.classList.add('selected');
+            this.cropRect_.fixedAspectRatio = aspect;
+          }
+        }.bind(this, aspects[name]));
+  }
+};
+
+/**
  * Handles resizing of the window and updates the crop rectangle.
  * @private
  */
 ImageEditor.Mode.Crop.prototype.onResized_ = function() {
   this.positionDOM();
 };
 
 /**
  * Resets the mode.
  */
@@ skipping 150 matching lines @@
   this.viewport_ = viewport;
 
   /**
    * Drag mode.
    *
    * @type {Object}
    * @private
    */
   this.dragMode_ = null;
 
+  /**
+   * Fixed aspect ratio.
+   * It does not fixed aspect ratio when it is null.

[mtomasz, 2014/07/02 07:56:53]

nit #284 -> The aspect ratio is not fixed when null.

[hirono, 2014/07/02 08:11:17]

Done.

+   * @type {?number}
+   */
+  this.fixedAspectRatio = null;
+
   Object.seal(this);
 }
 
 // Static members to simplify reflective access to the bounds.
 /**
  * @const
  * @type {string}
  */
 DraggableRect.LEFT = 'left';
 
@@ skipping 234 matching lines @@
           var top = this.bounds_.top;
           var bottom = this.bounds_.bottom;
           this.bounds_.top = bottom - 1;
           this.bounds_.bottom = top + 1;
           this.dragMode_.ySide =
               this.dragMode_.ySide === 'top' ? 'bottom' : 'top';
         }
       }
 
       // Update aspect ratio.
-      if (shiftKey)
+      if (this.fixedAspectRatio)
+        this.forceAspectRatio(this.fixedAspectRatio, clipRect);
+      else if (shiftKey)
         this.forceAspectRatio(initialWidth / initialHeight, clipRect);
     }.bind(this);
   }
 };
 
 /**
  * Obtains double tap action depending on the coordinate.
  *
  * @param {number} x X coordinate for cursor.
  * @param {number} y Y coordinate for cursor.
@@ skipping 88 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;
   }
 };