Refactor properties into methods for viewport

src/js/components/ImageEditor/DragHandle.js

@@ -58,7 +58,7 @@ var DragHandle = function (handler) {
     };
 
     this.init = function () {
-        var viewportData = this.getCanvas().getViewport().data;
+        var viewportData = this.getCanvas().getViewport().getCropData();
         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.data.height], {
+        return new fabric.Line([0, 0, 0, viewport.getCropData().height], {
             evented: false,
             strokeDashArray: [5, 5],
             stroke: '#000',
@@ -43,7 +43,7 @@ function GoreHandler(viewport) {
         }
 
         var bounds = viewport.getBounds();
-        var step   = viewport.data.ppmm * 450;
+        var step   = viewport.getCropData().ppmm * 450;
         var count  = Math.ceil(bounds.width / step);
 
         for (var i = 1; i < count; i++) {

src/js/components/ImageEditor/ImageEditor.js

@@ -15,10 +15,10 @@ function ImageEditor(args) {
 
     _canvas.getButtonMenu()
         .addItem(['Show Murals Panel', 'Hide Murals Panel'], function () {
-            _canvas.getViewport().gores.enable(this.isActive());
+            _canvas.getViewport().getGores().enable(this.isActive());
         })
         .addItem(['Show Ruler', 'Hide Ruler'], function () {
-            _canvas.getViewport().rulers.enable(this.isActive());
+            _canvas.getViewport().getRulers().enable(this.isActive());
         })
         .addItem(['Fullscreen', 'Exit Fullscreen'], function () {
             util.toggleFullscreen(_canvas.getSelectionElement().parentNode);

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.data.ppmm * 10);
+            var dim = (this[axis] - bounds[axis]) / (viewport.getCropData().ppmm * 10);
 
             if (axis === 'top') {
-                dim = viewport.data.dim.height - dim;
+                dim = viewport.getCropData().dim.height - dim;
             }
 
             this.setText(Math.round(dim * 100) / 100 + ' cm');

src/js/components/ImageEditor/Viewport.js

@@ -117,32 +117,25 @@ function Viewport(canvas) {
     this.set = function (width, height) {
         _data = util.calcCrop(canvas.getImage(), width, height);
         apply();
-        this.gores.reset();
+        this.getGores().reset();
-        this.rulers.reset();
+        this.getRulers().reset();
         canvas.getApertures().setTransparent(true);
         canvas.getImage().__moved = false;
         canvas.getButtonMenu().bringToFront();
     };
 
-    util.setProperties(this, {
+    this.getCropData = function () {
-        data: {
+        return _data;
-            get: function () {
+    };
-                return _data;
+
-            }
+    this.getGores = function () {
-        },
+        return this.__goreHandler || (this.__goreHandler = new GoreHandler(this));
-        gores: {
+    };
-            get: function () {
+
-                return this.__goreHandler ||
+    this.getRulers = function () {
-                    (this.__goreHandler = new GoreHandler(this));
+        return this.__rulerHandler || (this.__rulerHandler = new RulerHandler(this));
-            }
+    };
-        },
+
-        rulers: {
-            get: function () {
-                return this.__rulerHandler ||
-                    (this.__rulerHandler = new RulerHandler(this));
-            }
-        }
-    });
 }
 
 module.exports = Viewport;

src/js/main.js

@@ -1,6 +1,6 @@
 'use strict';
 
-(function () {
+(function() {
 
     var ExtendFabricFunctionality = require('./components/extend-fabric-functionality');
     var ImageEditor = require('./components/ImageEditor/ImageEditor');
@@ -10,30 +10,32 @@
 
 }());
 
-$(function () {
+$(function() {
     // Inputs for the editor
     var $input = {
         w: $('#form-control input[name="w"]'),
         h: $('#form-control input[name="h"]'),
         image_id: $('#form-control input[name="image_id"]'),
-        mirror: $('#form-control input[name="mirror"]')
+        mirror: $('#form-control input[name="mirror"]'),
+        noCrop: $('#form-control input[name="no-crop"]')
     };
 
     var imageUrl = '//images.photowall.com/products/' + $input.image_id.val() + '.jpg?h=450';
 
-    var editor = new ImageEditor({ 'type': 'canvas' })
+    var editor = new ImageEditor({'type': 'canvas'})
-        .loadImage(imageUrl, function () {
+        .loadImage(imageUrl, function() {
             $input.w.trigger('keyup');
         });
 
     var Event = {
-        DimensionChange: function () {
+        DimensionChange: function() {
             editor.crop($input.w.val(), $input.h.val());
         },
-        Mirror: function () {
+        Mirror: function() {
             editor.canvas.getImage().transformation.set('mirror', this.checked);
         },
-        NoCrop: function () {
+        NoCrop: function() {
+            // editor.canvas
             
         },
     };
@@ -41,5 +43,5 @@ $(function () {
     $input.w.keyup(Event.DimensionChange);
     $input.h.keyup(Event.DimensionChange);
     $input.mirror.change(Event.Mirror);
-    $input.mirror.change(Event.NoCrop);
+    $input.noCrop.change(Event.NoCrop);
 }());