From 8a799982b3ad7b22ac48eb0f2cc497f59be50021 Mon Sep 17 00:00:00 2001
From: Geoff Chirgwin <geoff@chirgwin.com>
Date: Sun, 17 Aug 2014 12:01:12 -0700
Subject: [PATCH] enforce intial 1:1 selection aspect ratio for square & circle
 selection types, as suggested by @paulflo150 in issue #6

---
 source/js/classes/crop-host.js | 19 +++++++++++++------
 source/js/ng-img-crop.js       |  2 +-
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/source/js/classes/crop-host.js b/source/js/classes/crop-host.js
index 20b1220b..6aca46af 100644
--- a/source/js/classes/crop-host.js
+++ b/source/js/classes/crop-host.js
@@ -62,7 +62,7 @@ crop.factory('cropHost', ['$document', 'cropAreaCircle', 'cropAreaSquare', 'crop
     }
 
     // Resets CropHost
-    var resetCropHost=function() {
+    var resetCropHost=function(areaType) {
       if(image!==null) {
         theArea.setImage(image);
         var imageDims=[image.width, image.height],
@@ -85,9 +85,16 @@ crop.factory('cropHost', ['$document', 'cropAreaCircle', 'cropAreaSquare', 'crop
         }
         elCanvas.prop('width',canvasDims[0]).prop('height',canvasDims[1]).css({'margin-left': -canvasDims[0]/2+'px', 'margin-top': -canvasDims[1]/2+'px'});
 
-        theArea.setSize({ w: Math.min(200, ctx.canvas.width/2),
-                          h: Math.min(200, ctx.canvas.height/2)});
+        var cw = ctx.canvas.width;
+        var ch = ctx.canvas.height;
 
+        // enforce 1:1 aspect ratio for square-like selections
+        if ((areaType === 'circle') || (areaType === 'square')) {
+          cw = ch = Math.min(cw, ch);
+        }
+
+        theArea.setSize({ w: Math.min(200, cw / 2),
+                          h: Math.min(200, ch / 2)});
         //TODO: set top left corner point
         theArea.setCenterPoint({x: ctx.canvas.width/2, y: ctx.canvas.height/2});
 
@@ -167,16 +174,16 @@ crop.factory('cropHost', ['$document', 'cropAreaCircle', 'cropAreaSquare', 'crop
       return retObj;
     };
 
-    this.setNewImageSource=function(imageSource) {
+    this.setNewImageSource=function(imageSource, areaType) {
       image=null;
-      resetCropHost();
+      resetCropHost(areaType);
       events.trigger('image-updated');
       if(!!imageSource) {
         var newImage = new Image();
         newImage.onload = function(){
           events.trigger('load-done');
           image=newImage;
-          resetCropHost();
+          resetCropHost(areaType);
           events.trigger('image-updated');
         };
         newImage.onerror=function() {
diff --git a/source/js/ng-img-crop.js b/source/js/ng-img-crop.js
index be509cdf..d1b72aa7 100644
--- a/source/js/ng-img-crop.js
+++ b/source/js/ng-img-crop.js
@@ -81,7 +81,7 @@ crop.directive('imgCrop', ['$timeout', 'cropHost', 'cropPubSub', function($timeo
 
       // Sync CropHost with Directive's options
       scope.$watch('image',function(){
-        cropHost.setNewImageSource(scope.image);
+        cropHost.setNewImageSource(scope.image, scope.areaType);
       });
       scope.$watch('areaType',function(){
         cropHost.setAreaType(scope.areaType);