Refactor properties into methods for canvas

index.php

@@ -16,6 +16,7 @@
                 <input type="text" name="w" value="100" />
                 <input type="text" name="h" value="100" />
                 Mirror: <input type="checkbox" class="image-control" name="mirror" />
+                No crop: <input type="checkbox" class="image-control" name="no-crop" />
             </div>
         </form>
         <br /><br />

src/js/components/ImageEditor/Canvas.js

@@ -17,20 +17,24 @@ var Canvas = fabric.util.createClass(fabric.Canvas, {
         });
 
         this.on('mouse:up', function () {
-            if (this.image.__moved) {
+            if (this.getImage().__moved) {
-                this.aperture.setTransparent(false);
+                this.getApertures().setTransparent(false);
             }
             $(this.upperCanvasEl).css('cursor', 'default');
             this.renderAll();
         });
     },
 
-    get_apertures: function () {
+    getApertures: function () {
         return this.__aperturehandler ||
             (this.__aperturehandler = new ApertureHandler(this));
     },
 
-    get_dragbars: function () {
+    /**
+     *
+     * @returns {DragbarHandler}
+     */
+    getDragbars: function () {
         return this.__dragbars ||
             (this.__dragbars = new DragbarHandler(this));
     },
@@ -38,18 +42,29 @@ var Canvas = fabric.util.createClass(fabric.Canvas, {
     /**
      * @return {fabric.Image}
      */
-    get_image: function () {
+    getImage: function () {
         return this.__image;
     },
 
     /**
      * @return {Viewport}
      */
-    get_viewport: function () {
+    getViewport: function () {
         return this.__viewport ||
             (this.__viewport = new Viewport(this));
     },
 
+    /**
+     * Gets the menu for this instance
+     * @returns {ButtonMenu}
+     */
+    getButtonMenu: function () {
+        if (!this.__buttonMenu) {
+            this.__buttonMenu = new ButtonMenu(this);
+        }
+        return this.__buttonMenu;
+    },
+
     /**
      * @return {Canvas}
      */
@@ -68,35 +83,11 @@ var Canvas = fabric.util.createClass(fabric.Canvas, {
         this.removeImage();
         this.__image = img;
         this.__image.addTo(this).center().on('mousedown', function () {
-            img.canvas.aperture.setTransparent(true);
+            img.canvas.getApertures().setTransparent(true);
         }).setCoords();
-        this.viewport.reset();
+        this.getViewport().reset();
         return this;
     }
 });
 
-// Define properties
-util.setProperties(Canvas.prototype, {
-    aperture: {
-        get: Canvas.prototype.get_apertures
-    },
-    dragbars: {
-        get: Canvas.prototype.get_dragbars
-    },
-    image: {
-        get: Canvas.prototype.get_image
-    },
-    buttonMenu: {
-        get: function () {
-            if (!this.__buttonMenu) {
-                this.__buttonMenu = new ButtonMenu(this);
-            }
-            return this.__buttonMenu;
-        }
-    },
-    viewport: {
-        get: Canvas.prototype.get_viewport
-    }
-});
-
 module.exports = Canvas;

src/js/components/ImageEditor/DragHandle.js

@@ -11,12 +11,12 @@ var DragHandle = function (handler) {
         mouseDown: function () {
             _dragging = true;
             _currentAxis = this.axis;
-            handler.canvas.image.trigger('mousedown');
+            handler.canvas.getImage().trigger('mousedown');
         },
         mouseUp: function () {
             _dragging = false;
             _currentAxis = null;
-            handler.canvas.image.trigger('mouseup');
+            handler.canvas.getImage().trigger('mouseup');
         },
         mouseMove: function (e) {
             if (!_dragging) {
@@ -24,12 +24,12 @@ var DragHandle = function (handler) {
             }
 
             if (_currentAxis === 'h') {
-                handler.canvas.image.left -= e.e.movementX;
+                handler.canvas.getImage().left -= e.e.movementX;
             } else {
-                handler.canvas.image.top -= e.e.movementY;
+                handler.canvas.getImage().top -= e.e.movementY;
             }
             // Trigger moving for image, to stay within bounds
-            handler.canvas.image.setCoords().trigger('moving');
+            handler.canvas.getImage().setCoords().trigger('moving');
             handler.canvas.renderAll();
         }
     };
@@ -58,7 +58,7 @@ var DragHandle = function (handler) {
     };
 
     this.init = function () {
-        var viewportData = this.getCanvas().viewport.data;
+        var viewportData = this.getCanvas().getViewport().data;
         var tracks = handler.getTracks();
 
         if (this.__handles) {

src/js/components/ImageEditor/DragbarHandler.js

@@ -62,7 +62,7 @@ function DragbarHandler(canvas) {
 
         _dragbars.h = new fabric.Rect($.extend({}, config.dragBar, {
             axis: 'h',
-            width: canvas.image.width,
+            width: canvas.getImage().width,
             height: config.dragBar.size,
         }))
             .addTo(canvas)
@@ -71,12 +71,12 @@ function DragbarHandler(canvas) {
         _dragbars.v = new fabric.Rect($.extend({}, config.dragBar, {
             axis: 'v',
             width: config.dragBar.size,
-            height: canvas.image.height
+            height: canvas.getImage().height
         }))
             .addTo(canvas)
             .set({ left: canvas.width - 40 }).setCoords();
 
-        canvas.image.on('moving', this.sync);
+        canvas.getImage().on('moving', this.sync);
 
         return this;
     };
@@ -85,8 +85,8 @@ function DragbarHandler(canvas) {
      * @return {DragbarHandler}
      */
     this.sync = function () {
-        _dragbars.h.set({left: canvas.image.left}).setCoords();
+        _dragbars.h.set({left: canvas.getImage().left}).setCoords();
-        _dragbars.v.set({top: canvas.image.top}).setCoords();
+        _dragbars.v.set({top: canvas.getImage().top}).setCoords();
         return this;
     };
 }

src/js/components/ImageEditor/ImageEditor.js

@@ -13,12 +13,12 @@ function ImageEditor(args) {
     // Initialize canvas
     _canvas = new Canvas('canvas');
 
-    _canvas.buttonMenu
+    _canvas.getButtonMenu()
         .addItem(['Show Murals Panel', 'Hide Murals Panel'], function () {
-            _canvas.viewport.gores.enable(this.isActive());
+            _canvas.getViewport().gores.enable(this.isActive());
         })
         .addItem(['Show Ruler', 'Hide Ruler'], function () {
-            _canvas.viewport.rulers.enable(this.isActive());
+            _canvas.getViewport().rulers.enable(this.isActive());
         })
         .addItem(['Fullscreen', 'Exit Fullscreen'], function () {
             util.toggleFullscreen(_canvas.getSelectionElement().parentNode);
@@ -32,7 +32,7 @@ function ImageEditor(args) {
      * @return {ImageEditor}
      */
     this.crop = function (width, height) {
-        _canvas.viewport.set(width, height);
+        _canvas.getViewport().set(width, height);
         return this;
     };
 

src/js/components/ImageEditor/Viewport.js

@@ -29,13 +29,13 @@ function Viewport(canvas) {
         _rect.height += _borderWidth;
         _rect.addTo(canvas).center().setCoords();
 
-        canvas.image
+        canvas.getImage()
             .center()
-            .drag.enable(calcMinMaxBoundsForRect(_rect.getInsideBoundingRect(), canvas.image));
+            .drag.enable(calcMinMaxBoundsForRect(_rect.getInsideBoundingRect(), canvas.getImage()));
-        canvas.aperture.apply(_data.axis, _rect.getBoundingRect());
+        canvas.getApertures().apply(_data.axis, _rect.getBoundingRect());
 
         drawBeams();
-        canvas.dragbars.apply();
+        canvas.getDragbars().apply();
 
         // Apertures sometimes overlaps the viewports bounding rect.
         // Solve this by bringing it to the front after apertures are applied.
@@ -115,13 +115,13 @@ function Viewport(canvas) {
      * @return {Viewport}
      */
     this.set = function (width, height) {
-        _data = util.calcCrop(canvas.image, width, height);
+        _data = util.calcCrop(canvas.getImage(), width, height);
         apply();
         this.gores.reset();
         this.rulers.reset();
-        canvas.aperture.setTransparent(true);
+        canvas.getApertures().setTransparent(true);
-        canvas.image.__moved = false;
+        canvas.getImage().__moved = false;
-        canvas.buttonMenu.bringToFront();
+        canvas.getButtonMenu().bringToFront();
     };
 
     util.setProperties(this, {

src/js/components/extend-fabric-functionality.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var Draggable = require('../Draggable');
+var Draggable = require('./ImageEditor/Draggable');
-var ImageTransformationHandler = require('../ImageTransformationHandler');
+var ImageTransformationHandler = require('./ImageEditor/ImageTransformationHandler');
-var util = require('../../util');
+var util = require('./util');
 
 function ExtendFabricFunctionality() {
 

src/js/main.js

@@ -6,7 +6,7 @@
     var ImageEditor = require('./components/ImageEditor/ImageEditor');
 
     ExtendFabricFunctionality();
-    ImageEditor();
+    window.ImageEditor = ImageEditor;
 
 }());
 
@@ -31,11 +31,15 @@ $(function () {
             editor.crop($input.w.val(), $input.h.val());
         },
         Mirror: function () {
-            editor.canvas.image.transformation.set('mirror', this.checked);
+            editor.canvas.getImage().transformation.set('mirror', this.checked);
-        }
+        },
+        NoCrop: function () {
+
+        },
     };
 
     $input.w.keyup(Event.DimensionChange);
     $input.h.keyup(Event.DimensionChange);
-    $input.mirror.click(Event.Mirror);
+    $input.mirror.change(Event.Mirror);
+    $input.mirror.change(Event.NoCrop);
 }());