yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Don't let the image cropper reuse crop states between crops

Browse Source
This commit is contained in:
Kenn Jacobsen
2019-02-14 18:40:32 +01:00
committed by Sebastiaan Janssen
parent 8fe8a0dfa3
commit 013fa2e454
2 changed files with 29 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.controller.js
View File

@@ -1,6 +1,6 @@
angular.module('umbraco')
.controller("Umbraco.PropertyEditors.ImageCropperController",
function ($scope, fileManager) {
function ($scope, fileManager, $timeout) {
var config = angular.copy($scope.model.config);
@@ -127,15 +127,32 @@ angular.module('umbraco')
/**
* crop a specific crop
* @param {any} crop
* @param {any} targetCrop
*/
function crop(crop) {
// clone the crop so we can discard the changes
$scope.currentCrop = angular.copy(crop);
$scope.currentPoint = null;
function crop(targetCrop) {
if (!$scope.currentCrop) {
// clone the crop so we can discard the changes
$scope.currentCrop = angular.copy(targetCrop);
$scope.currentPoint = null;
//set form to dirty to track changes
$scope.imageCropperForm.$setDirty();
//set form to dirty to track changes
$scope.imageCropperForm.$setDirty();
}
else {
// we have a crop open already - close the crop (this will discard any changes made)
close();
// the crop editor needs a digest cycle to close down properly, otherwise its state
// is reused for the new crop... and that's really bad
$timeout(function () {
crop(targetCrop);
$scope.pendingCrop = false;
});
// this is necessary to keep the screen from flickering too badly while we wait for the new crop to open
// - check the view for its usage (basically it makes sure we keep the space reserved for the new crop)
$scope.pendingCrop = true;
}
};
/** done cropping */

8
src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.html
View File

@@ -12,10 +12,10 @@
<div class="imagecropper clearfix">
<div ng-if="currentCrop" style="float:left; max-width: 100%;" class="clearfix">
<div ng-if="currentCrop || pendingCrop" style="float:left; max-width: 100%;" class="clearfix">
<div class="umb-cropper__container">
<div>
<div ng-if="currentCrop">
<umb-image-crop height="{{currentCrop.height}}"
width="{{currentCrop.width}}"
crop="currentCrop.coordinates"
@@ -25,7 +25,7 @@
</umb-image-crop>
</div>
<div class="button-drawer">
<div class="button-drawer" ng-if="currentCrop">
<button class="btn btn-link" ng-click="reset()"><localize key="imagecropper_reset">Reset this crop</localize></button>
<button class="btn" ng-click="close()"><localize key="imagecropper_undoEditCrop">Undo edits</localize></button>
<button class="btn btn-success" ng-click="done()"><localize key="imagecropper_updateEditCrop">Done</localize></button>
@@ -34,7 +34,7 @@
</div>
</div>
<div ng-if="!currentCrop" class="umb-cropper-imageholder clearfix">
<div ng-if="!currentCrop && !pendingCrop" class="umb-cropper-imageholder clearfix">
<umb-image-gravity src="imageSrc"
center="model.value.focalPoint"
on-value-changed="focalPointChanged(left, top)"