From 44bf3b77b397cd73f328b8766851f31bbe19c66a Mon Sep 17 00:00:00 2001
From: Kenn Jacobsen <kja@umbraco.dk>
Date: Fri, 24 Jan 2025 14:41:30 +0100
Subject: [PATCH] Make it possible to reset media picker crops (#18110)

Co-authored-by: Andy Butland <abutland73@gmail.com>
---
 .../mediaentryeditor.controller.js            | 43 +++++++++++--------
 1 file changed, 25 insertions(+), 18 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediaentryeditor/mediaentryeditor.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediaentryeditor/mediaentryeditor.controller.js
index 05be10c5d0..aed2133839 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediaentryeditor/mediaentryeditor.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediaentryeditor/mediaentryeditor.controller.js
@@ -3,15 +3,15 @@ angular.module("umbraco")
         function ($scope, localizationService, entityResource, editorService, overlayService, eventsService, mediaHelper) {
 
             var unsubscribe = [];
-            
+
             const vm = this;
-            
+
             vm.loading = true;
             vm.model = $scope.model;
             vm.mediaEntry = vm.model.mediaEntry;
             vm.currentCrop = null;
             vm.title = "";
-            
+
             vm.focalPointChanged = focalPointChanged;
             vm.onImageLoaded = onImageLoaded;
             vm.openMedia = openMedia;
@@ -20,7 +20,7 @@ angular.module("umbraco")
             vm.deselectCrop = deselectCrop;
             vm.resetCrop = resetCrop;
             vm.submitAndClose = submitAndClose;
-            vm.close = close;   
+            vm.close = close;
 
             function init() {
 
@@ -58,6 +58,12 @@ angular.module("umbraco")
                     return;
                 }
 
+                // the focal point can be null in some cases - most often right after a save. this throws the crop
+                // thumbnails (previews) off, so let's enforce the default focal point.
+                if (!vm.mediaEntry.focalPoint){
+                  vm.mediaEntry.focalPoint = {left: 0.5, top: 0.5};
+                }
+
                 vm.loading = true;
 
                 entityResource.getById(vm.mediaEntry.mediaKey, "Media").then(function (mediaEntity) {
@@ -85,12 +91,12 @@ angular.module("umbraco")
                     });
                 });
             }
-            
+
             function onImageLoaded(isCroppable, hasDimensions) {
                 vm.isCroppable = isCroppable;
                 vm.hasDimensions = hasDimensions;
             }
-            
+
             function repickMedia() {
                 vm.model.propertyEditor.changeMediaFor(vm.model.mediaEntry, onMediaReplaced);
             }
@@ -105,7 +111,7 @@ angular.module("umbraco")
 
                 updateMedia();
             }
-            
+
             function openMedia() {
 
                 const mediaEditor = {
@@ -117,7 +123,7 @@ angular.module("umbraco")
                         editorService.close();
                     }
                 };
-                
+
                 editorService.mediaEditor(mediaEditor);
             }
 
@@ -131,23 +137,24 @@ angular.module("umbraco")
                 // set form to dirty to track changes
                 setDirty();
             }
-            
+
             function selectCrop(targetCrop) {
                 vm.currentCrop = targetCrop;
                 setDirty();
                 // TODO: start watchin values of crop, first when changed set to dirty.
             }
-            
+
             function deselectCrop() {
                 vm.currentCrop = null;
             }
-            
+
             function resetCrop() {
                 if (vm.currentCrop) {
-                    $scope.$evalAsync( () => {
-                        vm.model.propertyEditor.resetCrop(vm.currentCrop);
-                        vm.forceUpdateCrop = Math.random();
-                    });
+                  vm.model.propertyEditor.resetCrop(vm.currentCrop);
+                  // deselecting the crop here has a dual purpose:
+                  // 1. it replicates the behaviour of the image cropper (e.g. on media items).
+                  // 2. it ensures that the newly reset crop does not get overwritten by a new crop with default values.
+                  deselectCrop();
                 }
             }
 
@@ -160,7 +167,7 @@ angular.module("umbraco")
                     vm.model.submit(vm.model);
                 }
             }
-            
+
             function close() {
                 if (vm.model && vm.model.close)
                 {
@@ -169,7 +176,7 @@ angular.module("umbraco")
                       const labelKeys = vm.model.createFlow === true
                           ? ["mediaPicker_confirmCancelMediaEntryCreationHeadline", "mediaPicker_confirmCancelMediaEntryCreationMessage"]
                           : ["prompt_discardChanges", "mediaPicker_confirmCancelMediaEntryHasChanges"];
-                        
+
                         localizationService.localizeMany(labelKeys).then(localizations => {
                             const confirm = {
                                 title: localizations[0],
@@ -196,7 +203,7 @@ angular.module("umbraco")
             }
 
             init();
-            
+
             $scope.$on("$destroy", function () {
                 unsubscribe.forEach(x => x());
             });