From 766530fcd3880df48bd384f6f3119bd91086da42 Mon Sep 17 00:00:00 2001
From: Ronald Barendse <ronald@barend.se>
Date: Tue, 10 Aug 2021 17:17:40 +0200
Subject: [PATCH] Swap focal point order to left,top to match resize X,Y
 coordinates

---
 .../Media/ImageSharpImageUrlGenerator.cs               |  2 +-
 .../Media/ImageSharpImageUrlGeneratorTests.cs          | 10 +++++-----
 .../propertyeditors/grid/editors/media.controller.js   |  4 ++--
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/Umbraco.Infrastructure/Media/ImageSharpImageUrlGenerator.cs b/src/Umbraco.Infrastructure/Media/ImageSharpImageUrlGenerator.cs
index 8e0a8eb350..1f72a68aec 100644
--- a/src/Umbraco.Infrastructure/Media/ImageSharpImageUrlGenerator.cs
+++ b/src/Umbraco.Infrastructure/Media/ImageSharpImageUrlGenerator.cs
@@ -37,7 +37,7 @@ namespace Umbraco.Cms.Infrastructure.Media
 
             if (options.FocalPoint != null)
             {
-                AddQueryString("rxy", options.FocalPoint.Top, options.FocalPoint.Left);
+                AddQueryString("rxy", options.FocalPoint.Left, options.FocalPoint.Top);
             }
 
             if (options.Crop != null)
diff --git a/src/Umbraco.Tests.UnitTests/Umbraco.Infrastructure/Media/ImageSharpImageUrlGeneratorTests.cs b/src/Umbraco.Tests.UnitTests/Umbraco.Infrastructure/Media/ImageSharpImageUrlGeneratorTests.cs
index f6d87ef5a1..ab3ca6b23c 100644
--- a/src/Umbraco.Tests.UnitTests/Umbraco.Infrastructure/Media/ImageSharpImageUrlGeneratorTests.cs
+++ b/src/Umbraco.Tests.UnitTests/Umbraco.Infrastructure/Media/ImageSharpImageUrlGeneratorTests.cs
@@ -20,28 +20,28 @@ namespace Umbraco.Cms.Tests.UnitTests.Umbraco.Infrastructure.Media
         public void GetCropUrl_CropAliasTest()
         {
             var urlString = s_generator.GetImageUrl(new ImageUrlGenerationOptions(MediaPath) { Crop = s_crop, Width = 100, Height = 100 });
-            Assert.AreEqual(MediaPath + "?crop=0.58729977382575338,0.055768992440203169,0,0.32457553600198386&cropmode=percentage&width=100&height=100", urlString);
+            Assert.AreEqual(MediaPath + "?cc=0.58729977382575338,0.055768992440203169,0,0.32457553600198386&width=100&height=100", urlString);
         }
 
         [Test]
         public void GetCropUrl_WidthHeightTest()
         {
             var urlString = s_generator.GetImageUrl(new ImageUrlGenerationOptions(MediaPath) { FocalPoint = s_focus1, Width = 200, Height = 300 });
-            Assert.AreEqual(MediaPath + "?rxy=0.80827067669172936,0.96&width=200&height=300", urlString);
+            Assert.AreEqual(MediaPath + "?rxy=0.96,0.80827067669172936&width=200&height=300", urlString);
         }
 
         [Test]
         public void GetCropUrl_FocalPointTest()
         {
             var urlString = s_generator.GetImageUrl(new ImageUrlGenerationOptions(MediaPath) { FocalPoint = s_focus1, Width = 100, Height = 100 });
-            Assert.AreEqual(MediaPath + "?rxy=0.80827067669172936,0.96&width=100&height=100", urlString);
+            Assert.AreEqual(MediaPath + "?rxy=0.96,0.80827067669172936&width=100&height=100", urlString);
         }
 
         [Test]
         public void GetCropUrlFurtherOptionsTest()
         {
             var urlString = s_generator.GetImageUrl(new ImageUrlGenerationOptions(MediaPath) { FocalPoint = s_focus1, Width = 200, Height = 300, FurtherOptions = "&filter=comic&roundedcorners=radius-26|bgcolor-fff" });
-            Assert.AreEqual(MediaPath + "?rxy=0.80827067669172936,0.96&width=200&height=300&filter=comic&roundedcorners=radius-26|bgcolor-fff", urlString);
+            Assert.AreEqual(MediaPath + "?rxy=0.96,0.80827067669172936&width=200&height=300&filter=comic&roundedcorners=radius-26|bgcolor-fff", urlString);
         }
 
         /// <summary>
@@ -121,7 +121,7 @@ namespace Umbraco.Cms.Tests.UnitTests.Umbraco.Infrastructure.Media
         public void GetCropUrl_PreDefinedCropNoCoordinatesWithWidthAndFocalPointIgnore()
         {
             var urlString = s_generator.GetImageUrl(new ImageUrlGenerationOptions(MediaPath) { FocalPoint = s_focus2, Width = 270, Height = 161 });
-            Assert.AreEqual(MediaPath + "?rxy=0.41,0.4275&width=270&height=161", urlString);
+            Assert.AreEqual(MediaPath + "?rxy=0.4275,0.41&width=270&height=161", urlString);
         }
 
         /// <summary>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/media.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/media.controller.js
index d87d2c30bf..81a548a116 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/media.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/media.controller.js
@@ -70,11 +70,11 @@ angular.module("umbraco")
                     if ($scope.control.value.coordinates) {
                         // New way, crop by percent must come before width/height.
                         var coords = $scope.control.value.coordinates;
-                        url += `?crop=${coords.x1},${coords.y1},${coords.x2},${coords.y2}&cropmode=percentage`;
+                        url += `?cc=${coords.x1},${coords.y1},${coords.x2},${coords.y2}`;
                     } else {
                         // Here in order not to break existing content where focalPoint were used.
                         if ($scope.control.value.focalPoint) {
-                            url += `?rxy=${$scope.control.value.focalPoint.top},${$scope.control.value.focalPoint.left}`;
+                            url += `?rxy=${$scope.control.value.focalPoint.left},${$scope.control.value.focalPoint.top}`;
                         } else {
                             // Prevent black padding and no crop when focal point not set / changed from default
                             url += '?rxy=0.5,0.5';