OLD | NEW |
1 // Copyright 2014 The Chromium Authors. All rights reserved. | 1 // Copyright 2014 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 'use strict'; | 5 'use strict'; |
6 | 6 |
7 /** | 7 /** |
8 * Crop mode. | 8 * Crop mode. |
9 * | 9 * |
10 * @extends {ImageEditor.Mode} | 10 * @extends {ImageEditor.Mode} |
(...skipping 59 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
70 addCropFrame('bottom horizontal'); | 70 addCropFrame('bottom horizontal'); |
71 addCropFrame('right bottom corner'); | 71 addCropFrame('right bottom corner'); |
72 | 72 |
73 this.onResizedBound_ = this.onResized_.bind(this); | 73 this.onResizedBound_ = this.onResized_.bind(this); |
74 window.addEventListener('resize', this.onResizedBound_); | 74 window.addEventListener('resize', this.onResizedBound_); |
75 | 75 |
76 this.createDefaultCrop(); | 76 this.createDefaultCrop(); |
77 }; | 77 }; |
78 | 78 |
79 /** | 79 /** |
| 80 * @override |
| 81 */ |
| 82 ImageEditor.Mode.Crop.prototype.createTools = function(toolbar) { |
| 83 var aspects = { |
| 84 GALLERY_ASPECT_RATIO_1_1: 1 / 1, |
| 85 GALLERY_ASPECT_RATIO_6_4: 6 / 4, |
| 86 GALLERY_ASPECT_RATIO_7_5: 7 / 5, |
| 87 GALLERY_ASPECT_RATIO_16_9: 16 / 9 |
| 88 }; |
| 89 for (name in aspects) { |
| 90 toolbar.addButton( |
| 91 name, |
| 92 name, |
| 93 function(aspect, event) { |
| 94 var button = event.target; |
| 95 if (button.classList.contains('selected')) { |
| 96 button.classList.remove('selected'); |
| 97 this.cropRect_.fixedAspectRatio = null; |
| 98 } else { |
| 99 var selectedButtons = |
| 100 toolbar.element.querySelectorAll('button.selected'); |
| 101 for (var i = 0; i < selectedButtons.length; i++) { |
| 102 selectedButtons[i].classList.remove('selected'); |
| 103 } |
| 104 button.classList.add('selected'); |
| 105 this.cropRect_.fixedAspectRatio = aspect; |
| 106 } |
| 107 }.bind(this, aspects[name])); |
| 108 } |
| 109 }; |
| 110 |
| 111 /** |
80 * Handles resizing of the window and updates the crop rectangle. | 112 * Handles resizing of the window and updates the crop rectangle. |
81 * @private | 113 * @private |
82 */ | 114 */ |
83 ImageEditor.Mode.Crop.prototype.onResized_ = function() { | 115 ImageEditor.Mode.Crop.prototype.onResized_ = function() { |
84 this.positionDOM(); | 116 this.positionDOM(); |
85 }; | 117 }; |
86 | 118 |
87 /** | 119 /** |
88 * Resets the mode. | 120 * Resets the mode. |
89 */ | 121 */ |
(...skipping 150 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
240 this.viewport_ = viewport; | 272 this.viewport_ = viewport; |
241 | 273 |
242 /** | 274 /** |
243 * Drag mode. | 275 * Drag mode. |
244 * | 276 * |
245 * @type {Object} | 277 * @type {Object} |
246 * @private | 278 * @private |
247 */ | 279 */ |
248 this.dragMode_ = null; | 280 this.dragMode_ = null; |
249 | 281 |
| 282 /** |
| 283 * Fixed aspect ratio. |
| 284 * The aspect ratio is not fixed when null. |
| 285 * @type {?number} |
| 286 */ |
| 287 this.fixedAspectRatio = null; |
| 288 |
250 Object.seal(this); | 289 Object.seal(this); |
251 } | 290 } |
252 | 291 |
253 // Static members to simplify reflective access to the bounds. | 292 // Static members to simplify reflective access to the bounds. |
254 /** | 293 /** |
255 * @const | 294 * @const |
256 * @type {string} | 295 * @type {string} |
257 */ | 296 */ |
258 DraggableRect.LEFT = 'left'; | 297 DraggableRect.LEFT = 'left'; |
259 | 298 |
(...skipping 234 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
494 var top = this.bounds_.top; | 533 var top = this.bounds_.top; |
495 var bottom = this.bounds_.bottom; | 534 var bottom = this.bounds_.bottom; |
496 this.bounds_.top = bottom - 1; | 535 this.bounds_.top = bottom - 1; |
497 this.bounds_.bottom = top + 1; | 536 this.bounds_.bottom = top + 1; |
498 this.dragMode_.ySide = | 537 this.dragMode_.ySide = |
499 this.dragMode_.ySide === 'top' ? 'bottom' : 'top'; | 538 this.dragMode_.ySide === 'top' ? 'bottom' : 'top'; |
500 } | 539 } |
501 } | 540 } |
502 | 541 |
503 // Update aspect ratio. | 542 // Update aspect ratio. |
504 if (shiftKey) | 543 if (this.fixedAspectRatio) |
| 544 this.forceAspectRatio(this.fixedAspectRatio, clipRect); |
| 545 else if (shiftKey) |
505 this.forceAspectRatio(initialWidth / initialHeight, clipRect); | 546 this.forceAspectRatio(initialWidth / initialHeight, clipRect); |
506 }.bind(this); | 547 }.bind(this); |
507 } | 548 } |
508 }; | 549 }; |
509 | 550 |
510 /** | 551 /** |
511 * Obtains double tap action depending on the coordinate. | 552 * Obtains double tap action depending on the coordinate. |
512 * | 553 * |
513 * @param {number} x X coordinate for cursor. | 554 * @param {number} x X coordinate for cursor. |
514 * @param {number} y Y coordinate for cursor. | 555 * @param {number} y Y coordinate for cursor. |
(...skipping 88 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
603 break; | 644 break; |
604 case 'bottom': | 645 case 'bottom': |
605 this.bounds_.bottom = this.bounds_.top + newHeight; | 646 this.bounds_.bottom = this.bounds_.top + newHeight; |
606 break; | 647 break; |
607 case 'none': | 648 case 'none': |
608 this.bounds_.top = middle - newHeight / 2; | 649 this.bounds_.top = middle - newHeight / 2; |
609 this.bounds_.bottom = middle + newHeight / 2; | 650 this.bounds_.bottom = middle + newHeight / 2; |
610 break; | 651 break; |
611 } | 652 } |
612 }; | 653 }; |
OLD | NEW |