From 33514867ddb442f21717075176a6dfb5bcffa732 Mon Sep 17 00:00:00 2001
From: Adam Silverstein <adamsilverstein@git.wordpress.org>
Date: Fri, 15 Dec 2017 22:02:02 +0000
Subject: [PATCH] Media: improve flows for cropping on attachment details
 screen.

On the "Attachment Details" screen:
* The crop button is always 'enabled'.
* Clicking the crop button with no selection selects the entire image.
* Clicking the crop button with the entire image selected doesn't do anything.
* Clicking the crop button with a selection crops as expected.

Props sonjanyc, afercia, mikeschroder.
Fixes #30155.


git-svn-id: https://develop.svn.wordpress.org/trunk@42404 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/includes/image-edit.php |  2 +-
 src/wp-admin/js/image-edit.js        | 33 ++++++++++++++++++++++++----
 2 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/src/wp-admin/includes/image-edit.php b/src/wp-admin/includes/image-edit.php
index 2f474d4caa..4be465d3db 100644
--- a/src/wp-admin/includes/image-edit.php
+++ b/src/wp-admin/includes/image-edit.php
@@ -190,7 +190,7 @@ function wp_image_editor( $post_id, $msg = false ) {
 	<div class="imgedit-panel-content wp-clearfix">
 		<?php echo $note; ?>
 		<div class="imgedit-menu wp-clearfix">
-			<button type="button" onclick="imageEdit.crop(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-crop button disabled" disabled><span class="screen-reader-text"><?php esc_html_e( 'Crop' ); ?></span></button>
+			<button type="button" onclick="imageEdit.handleCropToolClick( <?php echo "$post_id, '$nonce'"; ?>, this )" class="imgedit-crop button disabled" disabled><span class="screen-reader-text"><?php esc_html_e( 'Crop' ); ?></span></button>
 																		<?php
 
 																		// On some setups GD library does not provide imagerotate() - Ticket #11536
diff --git a/src/wp-admin/js/image-edit.js b/src/wp-admin/js/image-edit.js
index a570c54297..e3278e0dcc 100644
--- a/src/wp-admin/js/image-edit.js
+++ b/src/wp-admin/js/image-edit.js
@@ -18,6 +18,31 @@
 	postid : '',
 	_view : false,
 
+	/**
+	 * Handle crop tool clicks.
+	 */
+	handleCropToolClick: function( postid, nonce, cropButton ) {
+		var img = $( '#image-preview-' + postid ),
+			selection = this.iasapi.getSelection();
+
+		// Ensure selection is available, otherwise reset to full image.
+		if ( isNaN( selection.x1 ) ) {
+			this.setCropSelection( postid, { 'x1': 0, 'y1': 0, 'x2': img.innerWidth(), 'y2': img.innerHeight(), 'width': img.innerWidth(), 'height': img.innerHeight() } );
+			selection = this.iasapi.getSelection();
+		}
+
+		// If we don't already have a selection, select the entire image.
+		if ( 0 === selection.x1 && 0 === selection.y1 && 0 === selection.x2 && 0 === selection.y2 ) {
+			this.iasapi.setSelection( 0, 0, img.innerWidth(), img.innerHeight(), true );
+			this.iasapi.setOptions( { show: true } );
+			this.iasapi.update();
+		} else {
+
+			// Otherwise, perform the crop.
+			imageEdit.crop( postid, nonce , cropButton );
+		}
+	},
+
 	/**
 	 * @summary Converts a value to an integer.
 	 *
@@ -351,7 +376,6 @@
 				t.hold.sizer = max1 > max2 ? max2 / max1 : 1;
 
 				t.initCrop(postid, img, parent);
-				t.setCropSelection(postid, 0);
 
 				if ( (typeof callback !== 'undefined') && callback !== null ) {
 					callback();
@@ -579,7 +603,8 @@
 		}
 
 		this.initCrop(postid, img, parent);
-		this.setCropSelection(postid, 0);
+		this.setCropSelection( postid, { 'x1': 0, 'y1': 0, 'x2': 0, 'y2': 0, 'width': img.innerWidth(), 'height': img.innerHeight() } );
+
 		this.toggleEditor(postid, 0);
 		// Editor is ready, move focus to the first focusable element.
 		$( '.imgedit-wrap .imgedit-help-toggle' ).eq( 0 ).focus();
@@ -703,8 +728,8 @@
 		c = c || 0;
 
 		if ( !c || ( c.width < 3 && c.height < 3 ) ) {
-			this.setDisabled($('.imgedit-crop', '#imgedit-panel-' + postid), 0);
-			this.setDisabled($('#imgedit-crop-sel-' + postid), 0);
+			this.setDisabled( $( '.imgedit-crop', '#imgedit-panel-' + postid ), 1 );
+			this.setDisabled( $( '#imgedit-crop-sel-' + postid ), 1 );
 			$('#imgedit-sel-width-' + postid).val('');
 			$('#imgedit-sel-height-' + postid).val('');
 			$('#imgedit-selection-' + postid).val('');