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.rulers.reset();
+        this.getGores().reset();
+        this.getRulers().reset();
         canvas.getApertures().setTransparent(true);
         canvas.getImage().__moved = false;
         canvas.getButtonMenu().bringToFront();
     };
 
-    util.setProperties(this, {
-        data: {
-            get: function () {
-                return _data;
-            }
-        },
-        gores: {
-            get: function () {
-                return this.__goreHandler ||
-                    (this.__goreHandler = new GoreHandler(this));
-            }
-        },
-        rulers: {
-            get: function () {
-                return this.__rulerHandler ||
-                    (this.__rulerHandler = new RulerHandler(this));
-            }
-        }
-    });
+    this.getCropData = function () {
+        return _data;
+    };
+
+    this.getGores = function () {
+        return this.__goreHandler || (this.__goreHandler = new GoreHandler(this));
+    };
+
+    this.getRulers = function () {
+        return this.__rulerHandler || (this.__rulerHandler = new RulerHandler(this));
+    };
+
 }
 
 module.exports = Viewport;