WIP no crop functionality

src/js/components/ImageEditor/DragHandle.js

@@ -58,7 +58,7 @@ var DragHandle = function (handler) {
     };
 
     this.init = function () {
-        var viewportData = this.getCanvas().getViewport().getCropData();
+        var viewportData = this.getCanvas().getViewport().getData();
         var tracks = handler.getTracks();
 
         if (this.__handles) {

src/js/components/ImageEditor/GoreHandler.js

@@ -8,7 +8,7 @@ function GoreHandler(viewport) {
      * @return {fabric.Line}
      */
     function getLine(left) {
-        return new fabric.Line([0, 0, 0, viewport.getCropData().height], {
+        return new fabric.Line([0, 0, 0, viewport.getData().height], {
             evented: false,
             strokeDashArray: [5, 5],
             stroke: '#000',
@@ -43,7 +43,7 @@ function GoreHandler(viewport) {
         }
 
         var bounds = viewport.getBounds();
-        var step   = viewport.getCropData().ppmm * 450;
+        var step   = viewport.getData().ppmm * 450;
         var count  = Math.ceil(bounds.width / step);
 
         for (var i = 1; i < count; i++) {

src/js/components/ImageEditor/RulerHandler.js

@@ -16,10 +16,10 @@ function RulerHandler(viewport) {
             var bounds = viewport.getBounds();
             var pos = util.assertBetween(this[axis], bounds.min[axis], bounds.max[axis]);
             this.marker[axis] = this[axis] = pos;
-            var dim = (this[axis] - bounds[axis]) / (viewport.getCropData().ppmm * 10);
+            var dim = (this[axis] - bounds[axis]) / (viewport.getData().ppmm * 10);
 
             if (axis === 'top') {
-                dim = viewport.getCropData().dim.height - dim;
+                dim = viewport.getData().dim.height - dim;
             }
 
             this.setText(Math.round(dim * 100) / 100 + ' cm');

src/js/components/ImageEditor/Viewport.js

@@ -124,7 +124,7 @@ function Viewport(canvas) {
         canvas.getButtonMenu().bringToFront();
     };
 
-    this.getCropData = function () {
+    this.getData = function () {
         return _data;
     };
 

src/js/components/utils/calc-crop.js

@@ -17,9 +17,14 @@ function calcCrop(obj, width, height) {
     var returnValue = {
         image: obj,
         axis: objRatio > cropRatio ? 'x' : 'y',
-        dim: { width: width, height: height },
+        dim: {
+            width: Number(width),
+            height: Number(height)
+        },
         width:  obj.width,
-        height: obj.height
+        height: obj.height,
+        objectRatio: objRatio,
+        cropRatio: cropRatio
     };
 
     if (objRatio > cropRatio) {

src/js/main.js

@@ -24,24 +24,30 @@ $(function() {
 
     var editor = new ImageEditor({'type': 'canvas'})
         .loadImage(imageUrl, function() {
-            $input.w.trigger('keyup');
+            $input.w.trigger('input');
         });
 
     var Event = {
         DimensionChange: function() {
+            var noCropIsChecked = $input.noCrop.is(':checked');
+            var dimension = $(this).attr('name');
+            var data = editor.canvas.getViewport().getData();
+
+
             editor.crop($input.w.val(), $input.h.val());
         },
         Mirror: function() {
             editor.canvas.getImage().transformation.set('mirror', this.checked);
         },
         NoCrop: function() {
-            // editor.canvas
-            
+            var data = editor.canvas.getViewport().getData();
+
+            $input.h.val(parseInt(data.dim.height / data.objectRatio)).trigger('input');
         },
     };
 
-    $input.w.keyup(Event.DimensionChange);
-    $input.h.keyup(Event.DimensionChange);
+    $input.w.on('input', Event.DimensionChange);
+    $input.h.on('input', Event.DimensionChange);
     $input.mirror.change(Event.Mirror);
     $input.noCrop.change(Event.NoCrop);
 }());