Fixed optimal dimensions when no cropping is chosen

src/js/main.js

@@ -27,27 +27,51 @@ $(function() {
             $input.w.trigger('input');
         });
 
+    function getOptimalDimension(currentDimension, ratio) {
+        var width = $input.w.val();
+        var height = $input.h.val();
+
+        if (currentDimension === 'h') {
+            width = Math.round(height / ratio);
+        } else {
+            height = Math.round(width / ratio);
+        }
+
+        return {
+            width: width,
+            height: height
+        };
+    }
+
     var Event = {
         DimensionChange: function() {
             var noCropIsChecked = $input.noCrop.is(':checked');
-            var dimension = $(this).attr('name');
+            var currentDimension = $(this).attr('name') === 'h' ? 'h' : 'w';
             var data = editor.canvas.getViewport().getData();
+            var values = {
+                width: $input.w.val(),
+                height: $input.h.val(),
+            };
 
+            if (noCropIsChecked) {
+                values = getOptimalDimension(values, currentDimension, data.objectRatio);
+            }
 
-            editor.crop($input.w.val(), $input.h.val());
+            $input.w.val(values.width);
+            $input.h.val(values.height);
+
+            editor.crop(values.width, values.height);
         },
         Mirror: function() {
             editor.canvas.getImage().transformation.set('mirror', this.checked);
         },
         NoCrop: function() {
-            var data = editor.canvas.getViewport().getData();
+            $input.w.trigger('input');
-
-            $input.h.val(parseInt(data.dim.height / data.objectRatio)).trigger('input');
         },
     };
 
     $input.w.on('input', Event.DimensionChange);
     $input.h.on('input', Event.DimensionChange);
-    $input.mirror.change(Event.Mirror);
+    $input.mirror.on('change', Event.Mirror);
-    $input.noCrop.change(Event.NoCrop);
+    $input.noCrop.on('change', Event.NoCrop);
 }());