Resizing safeguards to ensure we only return positive

src/Umbraco.Web.UI.Client/src/common/directives/imaging/umbimagecrop.directive.js

@@ -185,15 +185,22 @@ angular.module("umbraco.directives")
 							top = constraints.top.min;
 						}
 
-						scope.dimensions.image.left = left;
-						scope.dimensions.image.top = top;
+						if(scope.dimensions.image.left !== left){
+							scope.dimensions.image.left = left;
+						}	
+						
+						if(scope.dimensions.image.top !== top){
+							scope.dimensions.image.top = top;
+						}
 					};	
-					
+
+
 					//sets scope.crop to the recalculated % based crop	
 					var calculateCropBox = function(){
 						scope.crop = cropperHelper.pixelsToCoordinates(scope.dimensions.image, scope.dimensions.cropper.width, scope.dimensions.cropper.height, scope.dimensions.margin);	
 					};
 
+
 					//Drag and drop positioning, using jquery ui draggable
 					var onStartDragPosition, top, left;
 					$overlay.draggable({
@@ -204,6 +211,9 @@ angular.module("umbraco.directives")
 						},
 						stop: function(event, ui){
 							scope.$apply(function(){
+								//make sure that every validates one more time...
+								validatePosition(ui.position.left, ui.position.top);
+
 								calculateCropBox();
 								scope.dimensions.image.rnd = Math.random();
 							});
@@ -227,8 +237,6 @@ angular.module("umbraco.directives")
 
 						//sets constaints for the cropper
 						setConstraints();
-
-
 						scope.loaded = true;
 					};
 
@@ -243,11 +251,16 @@ angular.module("umbraco.directives")
 							}
 					});
 
+					var throttledResizing = _.throttle(function(){
+						resizeImageToScale(scope.dimensions.scale.current);
+						calculateCropBox();	
+					}, 300);
+
+					
 					//happens when we change the scale
 					scope.$watch("dimensions.scale.current", function(){
 						if(scope.loaded){
-							resizeImageToScale(scope.dimensions.scale.current);
-							calculateCropBox();
+							throttledResizing();
 						}
 					});
 

src/Umbraco.Web.UI.Client/src/common/services/cropperhelper.service.js

@@ -85,9 +85,7 @@ function cropperHelper(umbRequestHelper, $http) {
 			return style;
 		},
 
-		//returns a ng-style object with top,left,width,height pixel measurements
-		//expects {left,right,top,bottom} - {width,height}, {width,height}, int
-		//offset is just to push the image position a number of pixels from top,left    
+		 
 		coordinatesToPixels : function(coordinates, originalSize, offset){
 
 			var coordinates_px = {
@@ -116,6 +114,12 @@ function cropperHelper(umbRequestHelper, $http) {
 			crop.x2 = x2_px / image.width;
 			crop.y2 = y2_px / image.height;
 
+			_.forEach(crop, function(coord){
+				if(coord < 0){
+					coord = 0;
+				}
+			});
+
 			return crop;
 		},
 

src/Umbraco.Web.UI.Client/src/views/directives/imaging/umb-image-crop.html

@@ -12,7 +12,7 @@
 				type="range" 
 				min="{{dimensions.scale.min}}" 
 				max="{{dimensions.scale.max}}" 
-				step="0.01" 
+				step="0.001" 
 				ng-model="dimensions.scale.current" />			
 				<i class="icon-picture" style="font-size: 22px"></i>	
 	</div>