Media: Fix the initialization of imgAreaSelect when cropping a header image or a site icon or logo.

Props alshakero, arthur791004, nmutua, desrosj, audrasjb, ironprogrammer, obenland, costdev, ajmaurya.
Fixes #54308, #55377.
Built from https://develop.svn.wordpress.org/trunk@54903


git-svn-id: http://core.svn.wordpress.org/trunk@54455 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/js/imgareaselect/jquery.imgareaselect.js

@@ -1,6 +1,6 @@
 /*
  * imgAreaSelect jQuery plugin
- * version 0.9.10-wp
+ * version 0.9.10-wp2
  *
  * Copyright (c) 2008-2013 Michal Wojciechowski (odyniec.net)
  *
@@ -20,7 +20,7 @@
 var abs = Math.abs,
     max = Math.max,
     min = Math.min,
-    round = Math.round;
+    floor = Math.floor;
 
 /**
  * Create a new HTML div element
@@ -230,12 +230,12 @@ $.imgAreaSelect = function (img, options) {
     function getSelection(noScale) {
         var sx = noScale || scaleX, sy = noScale || scaleY;
 
-        return { x1: round(selection.x1 * sx),
-            y1: round(selection.y1 * sy),
-            x2: round(selection.x2 * sx),
-            y2: round(selection.y2 * sy),
-            width: round(selection.x2 * sx) - round(selection.x1 * sx),
-            height: round(selection.y2 * sy) - round(selection.y1 * sy) };
+        return { x1: floor(selection.x1 * sx),
+            y1: floor(selection.y1 * sy),
+            x2: floor(selection.x2 * sx),
+            y2: floor(selection.y2 * sy),
+            width: floor(selection.x2 * sx) - floor(selection.x1 * sx),
+            height: floor(selection.y2 * sy) - floor(selection.y1 * sy) };
     }
 
     /**
@@ -257,10 +257,10 @@ $.imgAreaSelect = function (img, options) {
         var sx = noScale || scaleX, sy = noScale || scaleY;
 
         selection = {
-            x1: round(x1 / sx || 0),
-            y1: round(y1 / sy || 0),
-            x2: round(x2 / sx || 0),
-            y2: round(y2 / sy || 0)
+            x1: floor(x1 / sx || 0),
+            y1: floor(y1 / sy || 0),
+            x2: floor(x2 / sx || 0),
+            y2: floor(y2 / sy || 0)
         };
 
         selection.width = selection.x2 - selection.x1;
@@ -283,7 +283,7 @@ $.imgAreaSelect = function (img, options) {
          * Get image offset. The .offset() method returns float values, so they
          * need to be rounded.
          */
-        imgOfs = { left: round($img.offset().left), top: round($img.offset().top) };
+        imgOfs = { left: floor($img.offset().left), top: floor($img.offset().top) };
 
         /* Get image dimensions */
         imgWidth = $img.innerWidth();
@@ -293,10 +293,10 @@ $.imgAreaSelect = function (img, options) {
         imgOfs.left += ($img.outerWidth() - imgWidth) >> 1;
 
         /* Set minimum and maximum selection area dimensions */
-        minWidth = round(options.minWidth / scaleX) || 0;
-        minHeight = round(options.minHeight / scaleY) || 0;
-        maxWidth = round(min(options.maxWidth / scaleX || 1<<24, imgWidth));
-        maxHeight = round(min(options.maxHeight / scaleY || 1<<24, imgHeight));
+        minWidth = floor(options.minWidth / scaleX) || 0;
+        minHeight = floor(options.minHeight / scaleY) || 0;
+        maxWidth = floor(min(options.maxWidth / scaleX || 1<<24, imgWidth));
+        maxHeight = floor(min(options.maxHeight / scaleY || 1<<24, imgHeight));
 
         /*
          * Workaround for jQuery 1.3.2 incorrect offset calculation, originally
@@ -311,8 +311,8 @@ $.imgAreaSelect = function (img, options) {
 
         /* Determine parent element offset */
         parOfs = /absolute|relative/.test($parent.css('position')) ?
-            { left: round($parent.offset().left) - $parent.scrollLeft(),
-                top: round($parent.offset().top) - $parent.scrollTop() } :
+            { left: floor($parent.offset().left) - $parent.scrollLeft(),
+                top: floor($parent.offset().top) - $parent.scrollTop() } :
             position == 'fixed' ?
                 { left: $(document).scrollLeft(), top: $(document).scrollTop() } :
                 { left: 0, top: 0 };
@@ -430,6 +430,13 @@ $.imgAreaSelect = function (img, options) {
     function doUpdate(resetKeyPress) {
         adjust();
         update(resetKeyPress);
+        updateSelectionRelativeToParentElement();
+    }
+
+    /**
+     * Set the correct values of x1, y1, x2, and y2.
+     */
+    function updateSelectionRelativeToParentElement() {
         x1 = viewX(selection.x1); y1 = viewY(selection.y1);
         x2 = viewX(selection.x2); y2 = viewY(selection.y2);
     }
@@ -571,16 +578,16 @@ $.imgAreaSelect = function (img, options) {
             if (xFirst) {
                 x2 = max(left, min(left + imgWidth,
                     x1 + abs(y2 - y1) * aspectRatio * (x2 > x1 || -1)));
-                y2 = round(max(top, min(top + imgHeight,
+                y2 = floor(max(top, min(top + imgHeight,
                     y1 + abs(x2 - x1) / aspectRatio * (y2 > y1 || -1))));
-                x2 = round(x2);
+                x2 = floor(x2);
             }
             else {
                 y2 = max(top, min(top + imgHeight,
                     y1 + abs(x2 - x1) / aspectRatio * (y2 > y1 || -1)));
-                x2 = round(max(left, min(left + imgWidth,
+                x2 = floor(max(left, min(left + imgWidth,
                     x1 + abs(y2 - y1) * aspectRatio * (x2 > x1 || -1))));
-                y2 = round(y2);
+                y2 = floor(y2);
             }
     }
 
@@ -589,6 +596,14 @@ $.imgAreaSelect = function (img, options) {
      * aspect ratio
      */
     function doResize() {
+        /*
+         * Make sure x1, x2, y1, y2 are initialized to avoid the following calculation
+         * getting incorrect results.
+         */
+        if ( x1 == null || x2 == null || y1 == null || y2 == null ) {
+            updateSelectionRelativeToParentElement();
+        }
+
         /*
          * Make sure the top left corner of the selection area stays within
          * image boundaries (it might not if the image source was dynamically

wp-includes/version.php

@@ -16,7 +16,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '6.2-alpha-54902';
+$wp_version = '6.2-alpha-54903';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.