From 0b508d15afb4aa1d49716b9e303cffe679918532 Mon Sep 17 00:00:00 2001
From: sofiekedvik <sofie.kedvik@gmail.com>
Date: Tue, 31 Oct 2017 12:20:47 +0100
Subject: [PATCH] added dist

---
 dist/image-editor.js | 3848 +++++++++++++++++++++---------------------
 1 file changed, 1924 insertions(+), 1924 deletions(-)

diff --git a/dist/image-editor.js b/dist/image-editor.js
index 1c24a90..e95c09b 100644
--- a/dist/image-editor.js
+++ b/dist/image-editor.js
@@ -1,1056 +1,1056 @@
 (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
-'use strict';
-
-var util = require('./util');
-
-/**
- * Handles 3d image of canvas products.
- * @param {canvas}
- */
-function ThreeDHandler(canvas) {
-    var _overlay = new fabric.Group();
-    var _image;
-
-    function init() {
-        _overlay
-            .set({
-                visible: false,
-                left: 0
-            })
-            .addWithUpdate(new fabric.Rect({
-                // Width is made bigger as this works better with resizing the editor
-                width: canvas.width * 2,
-                height: canvas.height,
-                top: 0,
-                left: 0,
-                fill: canvas.backgroundColor,
-            }));
-
-        canvas.add(_overlay);
-    }
-
-    init();
-
-    /**
-     * Disables the 3d image by removing visibility
-     * @return {ThreeDHandler}
-     */
-    this.disable = function () {
-        _overlay.setVisible(false).canvas.resize();
-        return this;
-    };
-
-    /**
-     * Enables the 3d image by setting the width and visibility of the overlay and moving elements which
-     * needs to be visible to the front.
-     * @return {ThreeDHandler}
-     */
-    this.enable = function () {
-        _overlay
-            .set({
-                width: canvas.width,
-                visible: true
-            }).bringToFront();
-
-        canvas.getButtonMenu().bringToFront();
-        canvas.renderAll();
-        return this;
-    };
-
-    /**
-     * Checks if 3d mode is enabled/visible.
-     * @returns {boolean}
-     */
-    this.isEnabled = function () {
-        return _overlay.visible;
-    };
-
-    /**
-     * Refreshes the image. This is mostly done upon resize of the window
-     */
-    this.refreshImage = function() {
-        _overlay.set({
-            width: canvas.width,
-        });
-
-        this.applyImage();
-    };
-
-    /**
-     * (Re)adds the new/existing image with new configuration to the overlay.
-     * @param {img}
-     */
-    this.applyImage = function(img) {
-        img = img || _image;
-
-        _overlay
-            .remove(_image)
-            .add(_image = canvas.getResizedImage(img));
-    };
-
-    /**
-     * Sets the image and enables 3d mode.
-     * @param {img}
-     * @return {ThreeDHandler}
-     */
-    this.setImage = function (img) {
-        img.set({
-            // Image should be about 20px lower than the center (because of the buttons)
-            top: 20,
-            originX: 'center',
-            originY: 'center',
-        });
-
-        this.applyImage(img);
-        return this.enable();
-    };
-
-}
-
-module.exports = ThreeDHandler;
+'use strict';
+
+var util = require('./util');
+
+/**
+ * Handles 3d image of canvas products.
+ * @param {canvas}
+ */
+function ThreeDHandler(canvas) {
+    var _overlay = new fabric.Group();
+    var _image;
+
+    function init() {
+        _overlay
+            .set({
+                visible: false,
+                left: 0
+            })
+            .addWithUpdate(new fabric.Rect({
+                // Width is made bigger as this works better with resizing the editor
+                width: canvas.width * 2,
+                height: canvas.height,
+                top: 0,
+                left: 0,
+                fill: canvas.backgroundColor,
+            }));
+
+        canvas.add(_overlay);
+    }
+
+    init();
+
+    /**
+     * Disables the 3d image by removing visibility
+     * @return {ThreeDHandler}
+     */
+    this.disable = function () {
+        _overlay.setVisible(false).canvas.resize();
+        return this;
+    };
+
+    /**
+     * Enables the 3d image by setting the width and visibility of the overlay and moving elements which
+     * needs to be visible to the front.
+     * @return {ThreeDHandler}
+     */
+    this.enable = function () {
+        _overlay
+            .set({
+                width: canvas.width,
+                visible: true
+            }).bringToFront();
+
+        canvas.getButtonMenu().bringToFront();
+        canvas.renderAll();
+        return this;
+    };
+
+    /**
+     * Checks if 3d mode is enabled/visible.
+     * @returns {boolean}
+     */
+    this.isEnabled = function () {
+        return _overlay.visible;
+    };
+
+    /**
+     * Refreshes the image. This is mostly done upon resize of the window
+     */
+    this.refreshImage = function() {
+        _overlay.set({
+            width: canvas.width,
+        });
+
+        this.applyImage();
+    };
+
+    /**
+     * (Re)adds the new/existing image with new configuration to the overlay.
+     * @param {img}
+     */
+    this.applyImage = function(img) {
+        img = img || _image;
+
+        _overlay
+            .remove(_image)
+            .add(_image = canvas.getResizedImage(img));
+    };
+
+    /**
+     * Sets the image and enables 3d mode.
+     * @param {img}
+     * @return {ThreeDHandler}
+     */
+    this.setImage = function (img) {
+        img.set({
+            // Image should be about 20px lower than the center (because of the buttons)
+            top: 20,
+            originX: 'center',
+            originY: 'center',
+        });
+
+        this.applyImage(img);
+        return this.enable();
+    };
+
+}
+
+module.exports = ThreeDHandler;
 
 },{"./util":25}],2:[function(require,module,exports){
-'use strict';
-
-/**
- * ApertureHandler takes care of the bars around the image to show what area has been/will be cropped.
- * @param {canvas}
- */
-function ApertureHandler(canvas) {
-    var _items = {x: [], y: []};
-
-    function init() {
-        var bounds = canvas;
-        var xRect = new fabric.Rect({
-            width: bounds.width,
-            height: bounds.height / 2,
-            fill: canvas.backgroundColor,
-            opacity: 0.7,
-        });
-
-        var yRect = xRect.clone().set({
-            width: bounds.width / 2,
-            height: bounds.height
-        });
-
-        _items.x = [].concat([xRect, xRect.clone()]);
-        _items.y= [].concat([yRect, yRect.clone()]);
-
-        [].concat(_items.x, _items.y).forEach(function (o) {
-            canvas.add(o);
-        });
-        canvas.renderAll();
-    }
-    init();
-
-    /**
-     * Applies configuration to the apertures apertures on the viewport
-     * @param {string} axis
-     * @param {viewport}
-     */
-    this.apply = function (axis, viewport) {
-        this.getApertures(axis).forEach(function (o) {
-            o.visible = false;
-        });
-
-        var active = this.getApertures(axis === 'x' ? 'y' : 'x');
-
-        active.forEach(function (o) {
-            o.visible = true;
-        });
-
-        active[0].width= active[1].width = canvas.width;
-        active[0].height = active[1].height = canvas.height;
-
-        if (axis === 'y') {
-            active[0].top = viewport.top - active[0].height + 0.5;
-            active[1].top = viewport.top + viewport.height - 0.5;
-        } else {
-            active[0].left = viewport.left - active[0].width + 0.5;
-            active[1].left = viewport.left + viewport.width - 0.5;
-        }
-
-        this.getApertures().forEach(function (o) {
-            o.setCoords();
-        });
-
-        canvas.renderAll();
-    };
-
-    /**
-     * Gets the apertures on specified axis. If no axis is provided, both x and y are returned.
-     * @param {string} axis
-     * @returns {Array}
-     */
-    this.getApertures = function (axis) {
-        return axis ? _items[axis] : [].concat(_items.x, _items.y);
-    };
-
-    /**
-     * Sets transparency of the apertures depending on the crop status
-     * @param {boolean} apply
-     * @returns {ApertureHandler}
-     */
-    this.setTransparent = function (apply) {
-        this.getApertures().forEach(function (o) {
-            o.opacity = apply ? 0.7 : 1;
-        });
-
-        canvas.renderAll();
-        return this;
-    };
-}
-
-module.exports = ApertureHandler;
+'use strict';
+
+/**
+ * ApertureHandler takes care of the bars around the image to show what area has been/will be cropped.
+ * @param {canvas}
+ */
+function ApertureHandler(canvas) {
+    var _items = {x: [], y: []};
+
+    function init() {
+        var bounds = canvas;
+        var xRect = new fabric.Rect({
+            width: bounds.width,
+            height: bounds.height / 2,
+            fill: canvas.backgroundColor,
+            opacity: 0.7,
+        });
+
+        var yRect = xRect.clone().set({
+            width: bounds.width / 2,
+            height: bounds.height
+        });
+
+        _items.x = [].concat([xRect, xRect.clone()]);
+        _items.y= [].concat([yRect, yRect.clone()]);
+
+        [].concat(_items.x, _items.y).forEach(function (o) {
+            canvas.add(o);
+        });
+        canvas.renderAll();
+    }
+    init();
+
+    /**
+     * Applies configuration to the apertures apertures on the viewport
+     * @param {string} axis
+     * @param {viewport}
+     */
+    this.apply = function (axis, viewport) {
+        this.getApertures(axis).forEach(function (o) {
+            o.visible = false;
+        });
+
+        var active = this.getApertures(axis === 'x' ? 'y' : 'x');
+
+        active.forEach(function (o) {
+            o.visible = true;
+        });
+
+        active[0].width= active[1].width = canvas.width;
+        active[0].height = active[1].height = canvas.height;
+
+        if (axis === 'y') {
+            active[0].top = viewport.top - active[0].height + 0.5;
+            active[1].top = viewport.top + viewport.height - 0.5;
+        } else {
+            active[0].left = viewport.left - active[0].width + 0.5;
+            active[1].left = viewport.left + viewport.width - 0.5;
+        }
+
+        this.getApertures().forEach(function (o) {
+            o.setCoords();
+        });
+
+        canvas.renderAll();
+    };
+
+    /**
+     * Gets the apertures on specified axis. If no axis is provided, both x and y are returned.
+     * @param {string} axis
+     * @returns {Array}
+     */
+    this.getApertures = function (axis) {
+        return axis ? _items[axis] : [].concat(_items.x, _items.y);
+    };
+
+    /**
+     * Sets transparency of the apertures depending on the crop status
+     * @param {boolean} apply
+     * @returns {ApertureHandler}
+     */
+    this.setTransparent = function (apply) {
+        this.getApertures().forEach(function (o) {
+            o.opacity = apply ? 0.7 : 1;
+        });
+
+        canvas.renderAll();
+        return this;
+    };
+}
+
+module.exports = ApertureHandler;
 
 },{}],3:[function(require,module,exports){
-'use strict';
-
-var TextButton = require('./TextButton');
-var config = require('./config');
-var util = require('./util');
-
-/**
- * Creates the menu with text-buttons settings provided. Settings will override
- * the defaults from the config files.
- * @param {Object} canvas
- * @param {Object=} settings
- */
-function ButtonMenu(canvas, settings) {
-    var _textButtons = [];
-    var _width = 0;
-
-    /**
-     * Calculates the width of all contained items
-     * @return {Number}
-     */
-    function setWidth() {
-        var startWidth = 0;
-        _textButtons.forEach(function(textButton) {
-            startWidth += textButton.width;
-        });
-        _width = startWidth += settings.margin * (_textButtons.length - 1);
-    }
-
-    /**
-     * Adds items to the button-menu.
-     * @param  {String} text
-     * @param  {Function} callback
-     * @return {ButtonMenu}
-     */
-    this.addItem = function(id, text, callback, isActive) {
-        _textButtons.push(
-            new TextButton(id, text, settings, isActive)
-                .onClick(callback)
-                .set({__group: this})
-        );
-
-        return this;
-    };
-
-    /**
-     * Brings the buttons to the front inside the canvas
-     * @return {ButtonMenu}
-     */
-    this.bringToFront = function() {
-        _textButtons.forEach(function(textButton) {
-            textButton.bringToFront();
-        });
-        return this;
-    };
-
-    /**
-     * Gets all buttons inside the menu.
-     * @return {Array}
-     */
-    this.getItems = function() {
-        return _textButtons;
-    };
-
-    /**
-     * Gets the full width of the buttonMenu.
-     * @return {Number}
-     */
-    this.getWidth = function() {
-        return _width;
-    };
-
-    /**
-     * Sets the button with id=buttonId to active/not active mode
-     */
-    this.setButtonActive = function(buttonId, isActive) {
-        _textButtons.forEach(function (button) {
-            if (button.getId() === buttonId) {
-                button.setActive(isActive);
-            }
-        });
-    };
-
-    /**
-     * Sets the button with id=buttonId to disabled/enabled mode
-     */
-    this.setButtonDisabled = function(buttonId, isDisabled) {
-        _textButtons.forEach(function (button) {
-            if (button.getId() === buttonId) {
-                button.setDisabled(isDisabled);
-            }
-        });
-    };
-
-    /**
-     * Hides the buttons
-     */
-    this.hide = function() {
-        _textButtons.forEach(function(textButton) {
-            textButton.set({
-                opacity: 0,
-                disabled: true
-            });
-        });
-    };
-
-    /**
-     * Shows all the buttons
-     */
-    this.show = function() {
-        _textButtons.forEach(function(textButton) {
-            textButton.set({
-                opacity: 1,
-                disabled: false
-            });
-        });
-    };
-
-    /**
-     * Recalculate boundaries and add all items to canvas if required
-     * @return {ButtonMenu}
-     */
-    this.render = function() {
-        setWidth();
-
-        var start = canvas.width / 2 - this.getWidth() / 2;
-        var currPos = Math.round(start);
-
-        _textButtons.forEach(function(textButton) {
-            textButton
-                .set({
-                    top: 10,
-                    left: currPos
-                })
-                .setCoords();
-
-            if (!textButton.canvas) {
-                textButton.addTo(canvas);
-            }
-            currPos += Math.round(textButton.width + settings.margin);
-
-            // Disable moving of text-buttons
-            textButton.lockMovementX = textButton.lockMovementY = true;
-        });
-
-        canvas.renderAll();
-
-        this.show();
-
-        return this;
-    };
-}
-
-module.exports = ButtonMenu;
+'use strict';
+
+var TextButton = require('./TextButton');
+var config = require('./config');
+var util = require('./util');
+
+/**
+ * Creates the menu with text-buttons settings provided. Settings will override
+ * the defaults from the config files.
+ * @param {Object} canvas
+ * @param {Object=} settings
+ */
+function ButtonMenu(canvas, settings) {
+    var _textButtons = [];
+    var _width = 0;
+
+    /**
+     * Calculates the width of all contained items
+     * @return {Number}
+     */
+    function setWidth() {
+        var startWidth = 0;
+        _textButtons.forEach(function(textButton) {
+            startWidth += textButton.width;
+        });
+        _width = startWidth += settings.margin * (_textButtons.length - 1);
+    }
+
+    /**
+     * Adds items to the button-menu.
+     * @param  {String} text
+     * @param  {Function} callback
+     * @return {ButtonMenu}
+     */
+    this.addItem = function(id, text, callback, isActive) {
+        _textButtons.push(
+            new TextButton(id, text, settings, isActive)
+                .onClick(callback)
+                .set({__group: this})
+        );
+
+        return this;
+    };
+
+    /**
+     * Brings the buttons to the front inside the canvas
+     * @return {ButtonMenu}
+     */
+    this.bringToFront = function() {
+        _textButtons.forEach(function(textButton) {
+            textButton.bringToFront();
+        });
+        return this;
+    };
+
+    /**
+     * Gets all buttons inside the menu.
+     * @return {Array}
+     */
+    this.getItems = function() {
+        return _textButtons;
+    };
+
+    /**
+     * Gets the full width of the buttonMenu.
+     * @return {Number}
+     */
+    this.getWidth = function() {
+        return _width;
+    };
+
+    /**
+     * Sets the button with id=buttonId to active/not active mode
+     */
+    this.setButtonActive = function(buttonId, isActive) {
+        _textButtons.forEach(function (button) {
+            if (button.getId() === buttonId) {
+                button.setActive(isActive);
+            }
+        });
+    };
+
+    /**
+     * Sets the button with id=buttonId to disabled/enabled mode
+     */
+    this.setButtonDisabled = function(buttonId, isDisabled) {
+        _textButtons.forEach(function (button) {
+            if (button.getId() === buttonId) {
+                button.setDisabled(isDisabled);
+            }
+        });
+    };
+
+    /**
+     * Hides the buttons
+     */
+    this.hide = function() {
+        _textButtons.forEach(function(textButton) {
+            textButton.set({
+                opacity: 0,
+                disabled: true
+            });
+        });
+    };
+
+    /**
+     * Shows all the buttons
+     */
+    this.show = function() {
+        _textButtons.forEach(function(textButton) {
+            textButton.set({
+                opacity: 1,
+                disabled: false
+            });
+        });
+    };
+
+    /**
+     * Recalculate boundaries and add all items to canvas if required
+     * @return {ButtonMenu}
+     */
+    this.render = function() {
+        setWidth();
+
+        var start = canvas.width / 2 - this.getWidth() / 2;
+        var currPos = Math.round(start);
+
+        _textButtons.forEach(function(textButton) {
+            textButton
+                .set({
+                    top: 10,
+                    left: currPos
+                })
+                .setCoords();
+
+            if (!textButton.canvas) {
+                textButton.addTo(canvas);
+            }
+            currPos += Math.round(textButton.width + settings.margin);
+
+            // Disable moving of text-buttons
+            textButton.lockMovementX = textButton.lockMovementY = true;
+        });
+
+        canvas.renderAll();
+
+        this.show();
+
+        return this;
+    };
+}
+
+module.exports = ButtonMenu;
 
 },{"./TextButton":14,"./config":16,"./util":25}],4:[function(require,module,exports){
-'use strict';
-
-var config = require('./config');
-var util = require('./util');
-var ApertureHandler = require('./ApertureHandler');
-var ButtonMenu = require('./ButtonMenu');
-var DragbarHandler = require('./DragbarHandler');
-var Viewport = require('./Viewport');
-var ThreeDHandler = require('./3dHandler');
-var MirrorHandler = require('./MirrorHandler');
-var ImageDataHandler = require('./ImageDataHandler');
-
-var $document = $(document);
-
-/**
- * Canvas is using fabric to create the canvas and initiate it with its initial settings.
- * It is also here most of the interaction is taking place. And most files are connected to this file.
- * Fe. getDragbars method can be called from most places as the Canvas class is available in most places.
- */
-var Canvas = fabric.util.createClass(fabric.Canvas, {
-    initialize: function (id, dimensions) {
-        this.callSuper('initialize', id, {
-            enableRetinaScaling: true,
-            renderOnAddRemove: false,
-            // Allow touch scrolling on touch-devices larger than mobile screen sizes.
-            allowTouchScrolling: !util.isMobile(),
-            stateful: false,
-            backgroundColor: '#d2d2d2',
-            preserveObjectStacking: true,
-            selection: false,
-            width: dimensions.width,
-            height: dimensions.height
-        });
-
-        // Eventhandler for mouseup events on the whole canvas.
-        // This should be rewritten a bit to not have that many events after the image has been cropped.
-        this.on('mouse:up', function () {
-            if (this.getImage().__dragged && !this.get3dHandler().isEnabled()) {
-                this.getApertures().setTransparent(false);
-
-                this.getImageData().setCropData();
-                if (!util.isMobile()) {
-                    this.enableScroll();
-                }
-                // Trigger event to tell the image has been dragged.
-                $document.trigger('PIE:dragged');
-            }
-            this.renderAll();
-        });
-    },
-
-    resize: function (args) {
-        args = args || { height: this.height, width: this.width};
-
-        this.setHeight(args.height);
-        this.setWidth(args.width);
-        this.getButtonMenu().render();
-        if (this.get3dHandler().isEnabled()) {
-            this.get3dHandler().refreshImage();
-        } else {
-            this.refreshImage(this.getResizedImage(this.getImage()));
-            this.getViewport().reset();
-        }
-        this.sendToBack(this.getImage());
-        this.getDragbars().resetPosition();
-        this.renderAll();
-    },
-
-    disableScroll: function() {
-        this.set({
-            allowTouchScrolling: false
-        });
-        return this;
-    },
-
-    enableScroll: function() {
-        this.set({
-            allowTouchScrolling: true
-        });
-        return this;
-    },
-
-    get3dHandler: function () {
-      return this.__3dHandler ||
-          (this.__3dHandler = new ThreeDHandler(this));
-    },
-
-    /**
-     * @return {String}
-     */
-    get3dUrl: function () {
-        var imageData = this.getImageData().getData();
-        var params = [
-            'h=400',
-            'canvas[edge]=' + imageData.edge,
-            'crop[w]=' + imageData.width,
-            'crop[h]=' + imageData.height,
-            'crop[x]=' + imageData.x,
-            'crop[y]=' + imageData.y,
-        ];
-
-        if (imageData.mirrored) {
-            params.push('mirror=1');
-        }
-
-        return this.getImage().__url.replace(/\?h=\d+$/, '?') + params.join('&');
-    },
-
-    getApertures: function () {
-        return this.__aperturehandler ||
-            (this.__aperturehandler = new ApertureHandler(this));
-    },
-
-    /**
-     *
-     * @returns {DragbarHandler}
-     */
-    getDragbars: function () {
-        return this.__dragbars ||
-            (this.__dragbars = new DragbarHandler(this));
-    },
-
-    /**
-     * @return {fabric.Image}
-     */
-    getImage: function () {
-        return this.__image;
-    },
-
-    /**
-     * @return {MirrorHandler}
-     */
-    getMirror: function () {
-        return this.__mirror ||
-            (this.__mirror = new MirrorHandler(this.getImage()));
-    },
-
-    /**
-     * @return {MirrorHandler}
-     */
-    getImageData: function () {
-        return this.__imageData ||
-            (this.__imageData = new ImageDataHandler(this.getImage()));
-    },
-
-    /**
-     * @return {Viewport}
-     */
-    getViewport: function () {
-        return this.__viewport ||
-            (this.__viewport = new Viewport(this));
-    },
-
-    /**
-     * Gets the menu for this instance
-     * @returns {ButtonMenu}
-     */
-    getButtonMenu: function (settings) {
-        if (!this.__buttonMenu) {
-            var defaults = config.buttonMenu[this.__type];
-            this.__buttonMenu = new ButtonMenu(this, $.extend({}, defaults, settings));
-        }
-        return this.__buttonMenu;
-    },
-
-    /**
-     * Reloads the 3D view, if it is present
-     * @return {Canvas}
-     */
-    refresh3dView: function () {
-        if (this.get3dHandler().isEnabled()) {
-            this.toggle3D(true);
-        }
-        return this;
-    },
-
-    /**
-     * @return {Canvas}
-     */
-    removeImage: function () {
-        if (!this.__image) {
-            return this;
-        }
-        this.__imageData = null;
-        return this.remove(this.__image);
-    },
-
-    refreshImage: function(img) {
-        this.__image = img;
-        return this;
-    },
-
-    /**
-     * @param  {fabric.Image} img
-     * @return {Canvas}
-     */
-    setImage: function (img) {
-        this.removeImage();
-        this.__image = img;
-        this.__image.__dragged = false;
-        this.__image.__cropped = false;
-        this.__image.addTo(this).center().on('mousedown', function () {
-            img.canvas.getApertures().setTransparent(true);
-        }).setCoords();
-        this.getViewport().reset();
-        return this;
-    },
-
-    getResizedImage: function(img) {
-        // Calculate maxHeight and maxWidth of the 3d image
-        // and scale the image accoring to those values
-        var maxHeight = this.getHeight() - 100;
-        var maxWidth = this.getWidth() - 100;
-
-        img.scaleToHeight(maxHeight < img.height ? maxHeight : img.height);
-        img.scaleToWidth(maxWidth < (img.width * img.scaleX) ? maxWidth : img.width * img.scaleX);
-
-        return img;
-    },
-
-    toggle3D: function (showAs3d) {
-
-        this.getButtonMenu().setButtonActive('toggle3d', showAs3d);
-
-        if (!showAs3d) {
-            return this.get3dHandler().disable();
-        }
-
-        $document.trigger('PIE:image-start-load');
-
-        $.ajax({
-            url: this.get3dUrl(),
-            crossDomain: true,
-            type: "HEAD",
-            cache: true,
-        }).done(function() {
-            fabric.Image.fromURL(encodeURI(this.get3dUrl()), function (img) {
-                if (!img._element) {
-                    $document.trigger('PIE:image-error-load');
-                    return;
-                }
-
-                this.get3dHandler().setImage(img);
-                $document.trigger('PIE:image-end-load');
-            }.bind(this));
-        }.bind(this));
-    },
-});
-
-module.exports = Canvas;
+'use strict';
+
+var config = require('./config');
+var util = require('./util');
+var ApertureHandler = require('./ApertureHandler');
+var ButtonMenu = require('./ButtonMenu');
+var DragbarHandler = require('./DragbarHandler');
+var Viewport = require('./Viewport');
+var ThreeDHandler = require('./3dHandler');
+var MirrorHandler = require('./MirrorHandler');
+var ImageDataHandler = require('./ImageDataHandler');
+
+var $document = $(document);
+
+/**
+ * Canvas is using fabric to create the canvas and initiate it with its initial settings.
+ * It is also here most of the interaction is taking place. And most files are connected to this file.
+ * Fe. getDragbars method can be called from most places as the Canvas class is available in most places.
+ */
+var Canvas = fabric.util.createClass(fabric.Canvas, {
+    initialize: function (id, dimensions) {
+        this.callSuper('initialize', id, {
+            enableRetinaScaling: true,
+            renderOnAddRemove: false,
+            // Allow touch scrolling on touch-devices larger than mobile screen sizes.
+            allowTouchScrolling: !util.isMobile(),
+            stateful: false,
+            backgroundColor: '#d2d2d2',
+            preserveObjectStacking: true,
+            selection: false,
+            width: dimensions.width,
+            height: dimensions.height
+        });
+
+        // Eventhandler for mouseup events on the whole canvas.
+        // This should be rewritten a bit to not have that many events after the image has been cropped.
+        this.on('mouse:up', function () {
+            if (this.getImage().__dragged && !this.get3dHandler().isEnabled()) {
+                this.getApertures().setTransparent(false);
+
+                this.getImageData().setCropData();
+                if (!util.isMobile()) {
+                    this.enableScroll();
+                }
+                // Trigger event to tell the image has been dragged.
+                $document.trigger('PIE:dragged');
+            }
+            this.renderAll();
+        });
+    },
+
+    resize: function (args) {
+        args = args || { height: this.height, width: this.width};
+
+        this.setHeight(args.height);
+        this.setWidth(args.width);
+        this.getButtonMenu().render();
+        if (this.get3dHandler().isEnabled()) {
+            this.get3dHandler().refreshImage();
+        } else {
+            this.refreshImage(this.getResizedImage(this.getImage()));
+            this.getViewport().reset();
+        }
+        this.sendToBack(this.getImage());
+        this.getDragbars().resetPosition();
+        this.renderAll();
+    },
+
+    disableScroll: function() {
+        this.set({
+            allowTouchScrolling: false
+        });
+        return this;
+    },
+
+    enableScroll: function() {
+        this.set({
+            allowTouchScrolling: true
+        });
+        return this;
+    },
+
+    get3dHandler: function () {
+      return this.__3dHandler ||
+          (this.__3dHandler = new ThreeDHandler(this));
+    },
+
+    /**
+     * @return {String}
+     */
+    get3dUrl: function () {
+        var imageData = this.getImageData().getData();
+        var params = [
+            'h=400',
+            'canvas[edge]=' + imageData.edge,
+            'crop[w]=' + imageData.width,
+            'crop[h]=' + imageData.height,
+            'crop[x]=' + imageData.x,
+            'crop[y]=' + imageData.y,
+        ];
+
+        if (imageData.mirrored) {
+            params.push('mirror=1');
+        }
+
+        return this.getImage().__url.replace(/\?h=\d+$/, '?') + params.join('&');
+    },
+
+    getApertures: function () {
+        return this.__aperturehandler ||
+            (this.__aperturehandler = new ApertureHandler(this));
+    },
+
+    /**
+     *
+     * @returns {DragbarHandler}
+     */
+    getDragbars: function () {
+        return this.__dragbars ||
+            (this.__dragbars = new DragbarHandler(this));
+    },
+
+    /**
+     * @return {fabric.Image}
+     */
+    getImage: function () {
+        return this.__image;
+    },
+
+    /**
+     * @return {MirrorHandler}
+     */
+    getMirror: function () {
+        return this.__mirror ||
+            (this.__mirror = new MirrorHandler(this.getImage()));
+    },
+
+    /**
+     * @return {MirrorHandler}
+     */
+    getImageData: function () {
+        return this.__imageData ||
+            (this.__imageData = new ImageDataHandler(this.getImage()));
+    },
+
+    /**
+     * @return {Viewport}
+     */
+    getViewport: function () {
+        return this.__viewport ||
+            (this.__viewport = new Viewport(this));
+    },
+
+    /**
+     * Gets the menu for this instance
+     * @returns {ButtonMenu}
+     */
+    getButtonMenu: function (settings) {
+        if (!this.__buttonMenu) {
+            var defaults = config.buttonMenu[this.__type];
+            this.__buttonMenu = new ButtonMenu(this, $.extend({}, defaults, settings));
+        }
+        return this.__buttonMenu;
+    },
+
+    /**
+     * Reloads the 3D view, if it is present
+     * @return {Canvas}
+     */
+    refresh3dView: function () {
+        if (this.get3dHandler().isEnabled()) {
+            this.toggle3D(true);
+        }
+        return this;
+    },
+
+    /**
+     * @return {Canvas}
+     */
+    removeImage: function () {
+        if (!this.__image) {
+            return this;
+        }
+        this.__imageData = null;
+        return this.remove(this.__image);
+    },
+
+    refreshImage: function(img) {
+        this.__image = img;
+        return this;
+    },
+
+    /**
+     * @param  {fabric.Image} img
+     * @return {Canvas}
+     */
+    setImage: function (img) {
+        this.removeImage();
+        this.__image = img;
+        this.__image.__dragged = false;
+        this.__image.__cropped = false;
+        this.__image.addTo(this).center().on('mousedown', function () {
+            img.canvas.getApertures().setTransparent(true);
+        }).setCoords();
+        this.getViewport().reset();
+        return this;
+    },
+
+    getResizedImage: function(img) {
+        // Calculate maxHeight and maxWidth of the 3d image
+        // and scale the image accoring to those values
+        var maxHeight = this.getHeight() - 100;
+        var maxWidth = this.getWidth() - 100;
+
+        img.scaleToHeight(maxHeight < img.height ? maxHeight : img.height);
+        img.scaleToWidth(maxWidth < (img.width * img.scaleX) ? maxWidth : img.width * img.scaleX);
+
+        return img;
+    },
+
+    toggle3D: function (showAs3d) {
+
+        this.getButtonMenu().setButtonActive('toggle3d', showAs3d);
+
+        if (!showAs3d) {
+            return this.get3dHandler().disable();
+        }
+
+        $document.trigger('PIE:image-start-load');
+
+        $.ajax({
+            url: this.get3dUrl(),
+            crossDomain: true,
+            type: "HEAD",
+            cache: true,
+        }).done(function() {
+            fabric.Image.fromURL(encodeURI(this.get3dUrl()), function (img) {
+                if (!img._element) {
+                    $document.trigger('PIE:image-error-load');
+                    return;
+                }
+
+                this.get3dHandler().setImage(img);
+                $document.trigger('PIE:image-end-load');
+            }.bind(this));
+        }.bind(this));
+    },
+});
+
+module.exports = Canvas;
 
 },{"./3dHandler":1,"./ApertureHandler":2,"./ButtonMenu":3,"./DragbarHandler":6,"./ImageDataHandler":10,"./MirrorHandler":12,"./Viewport":15,"./config":16,"./util":25}],5:[function(require,module,exports){
-'use strict';
-
-var config = require('./config');
-var util = require('./util');
-
-var DragHandle = function (handler) {
-    var _currentAxis;
-    var _dragHandle;
-    var _movedHandle;
-
-    // Event declarations
-    var events = {
-        mouseDown: function () {
-            _dragHandle = true;
-
-            _currentAxis = this.axis;
-            handler.canvas.getImage().trigger('mousedown');
-        },
-        mouseUp: function () {
-            if (!_dragHandle) {
-                return;
-            }
-
-            if (!_movedHandle) {
-                $(document).trigger('PIE:dragbar-click', { axis: _currentAxis });
-            }
-
-            _dragHandle = false;
-            _movedHandle = false;
-            _currentAxis = null;
-            util.MouseMetrics.deletePreviousMouseData();
-            handler.canvas.getImage().trigger('mouseup');
-        },
-        mouseMove: function (e) {
-            if (!_dragHandle) {
-                return;
-            }
-
-            // We're using a polyfill to calculate moude/touch movement if the browser/device
-            // does not support movementX/movementY.
-            var previousMouseData = util.MouseMetrics.previousMouseData;
-            var movement = {
-                x: 'movementX' in e.e ? e.e.movementX : (previousMouseData.x ? e.e.pageX - previousMouseData.x : 0),
-                y: 'movementY' in e.e ? e.e.movementY : (previousMouseData.y ? e.e.pageY - previousMouseData.y : 0)
-            };
-            util.MouseMetrics.setPreviousMouseData({x: e.e.pageX, y: e.e.pageY});
-            _movedHandle = true;
-
-            if (_currentAxis === 'x') {
-                handler.canvas.getImage().left -= movement.x;
-            } else {
-                handler.canvas.getImage().top -= movement.y;
-            }
-            // Trigger moving for image, to stay within bounds
-            handler.canvas.getImage().setCoords().trigger('moving');
-            handler.canvas.renderAll();
-        }
-    };
-
-    function getRect(text, width) {
-        var txt = new fabric.Text(text, config.dragHandle.text);
-        var rect = new fabric.Rect($.extend({}, config.dragHandle.rect, {
-            width: width,
-        }));
-
-        return new fabric.Group([rect, txt]).set({
-            evented: false,
-        });
-    }
-
-    this.getCanvas = function () {
-        return handler.canvas;
-    };
-
-    this.getHandles = function () {
-        if (!this.__handles) {
-            return [];
-        }
-
-        return [].concat(this.__handles.x, this.__handles.y);
-    };
-
-    this.setHandlePosition = function() {
-        this.__handles.y.set({left: handler.getTracks().y.left}).setCoords();
-        this.__handles.x.set({top: handler.getTracks().x.top}).setCoords();
-        return this;
-    };
-
-    this.init = function () {
-        var viewportData = this.getCanvas().getViewport().getData();
-        var tracks = handler.getTracks();
-
-        if (this.__handles) {
-            this.getCanvas().remove(this.__handles.x);
-            this.getCanvas().remove(this.__handles.y);
-        }
-
-        this.__handles = {
-            x: getRect(viewportData.dim.width + ' ' + viewportData.dim.units, viewportData.width),
-            y: getRect(viewportData.dim.height + ' ' + viewportData.dim.units, viewportData.height)
-        };
-
-        this.__handles.x.addTo(this.getCanvas()).centerH().set({ top: tracks.x.top }).setCoords();
-        this.__handles.y.addTo(this.getCanvas())
-            .setAngle(-90)
-            .centerV().set({ left: tracks.y.left })
-            .setCoords();
-
-        this.getCanvas()
-            .on('mouse:move', events.mouseMove)
-            .on('mouse:up', events.mouseUp);
-
-        tracks.x.on('mousedown', events.mouseDown.bind(tracks.x));
-        tracks.y.on('mousedown', events.mouseDown.bind(tracks.y));
-    };
-};
-
-module.exports = DragHandle;
+'use strict';
+
+var config = require('./config');
+var util = require('./util');
+
+var DragHandle = function (handler) {
+    var _currentAxis;
+    var _dragHandle;
+    var _movedHandle;
+
+    // Event declarations
+    var events = {
+        mouseDown: function () {
+            _dragHandle = true;
+
+            _currentAxis = this.axis;
+            handler.canvas.getImage().trigger('mousedown');
+        },
+        mouseUp: function () {
+            if (!_dragHandle) {
+                return;
+            }
+
+            if (!_movedHandle) {
+                $(document).trigger('PIE:dragbar-click', { axis: _currentAxis });
+            }
+
+            _dragHandle = false;
+            _movedHandle = false;
+            _currentAxis = null;
+            util.MouseMetrics.deletePreviousMouseData();
+            handler.canvas.getImage().trigger('mouseup');
+        },
+        mouseMove: function (e) {
+            if (!_dragHandle) {
+                return;
+            }
+
+            // We're using a polyfill to calculate moude/touch movement if the browser/device
+            // does not support movementX/movementY.
+            var previousMouseData = util.MouseMetrics.previousMouseData;
+            var movement = {
+                x: 'movementX' in e.e ? e.e.movementX : (previousMouseData.x ? e.e.pageX - previousMouseData.x : 0),
+                y: 'movementY' in e.e ? e.e.movementY : (previousMouseData.y ? e.e.pageY - previousMouseData.y : 0)
+            };
+            util.MouseMetrics.setPreviousMouseData({x: e.e.pageX, y: e.e.pageY});
+            _movedHandle = true;
+
+            if (_currentAxis === 'x') {
+                handler.canvas.getImage().left -= movement.x;
+            } else {
+                handler.canvas.getImage().top -= movement.y;
+            }
+            // Trigger moving for image, to stay within bounds
+            handler.canvas.getImage().setCoords().trigger('moving');
+            handler.canvas.renderAll();
+        }
+    };
+
+    function getRect(text, width) {
+        var txt = new fabric.Text(text, config.dragHandle.text);
+        var rect = new fabric.Rect($.extend({}, config.dragHandle.rect, {
+            width: width,
+        }));
+
+        return new fabric.Group([rect, txt]).set({
+            evented: false,
+        });
+    }
+
+    this.getCanvas = function () {
+        return handler.canvas;
+    };
+
+    this.getHandles = function () {
+        if (!this.__handles) {
+            return [];
+        }
+
+        return [].concat(this.__handles.x, this.__handles.y);
+    };
+
+    this.setHandlePosition = function() {
+        this.__handles.y.set({left: handler.getTracks().y.left}).setCoords();
+        this.__handles.x.set({top: handler.getTracks().x.top}).setCoords();
+        return this;
+    };
+
+    this.init = function () {
+        var viewportData = this.getCanvas().getViewport().getData();
+        var tracks = handler.getTracks();
+
+        if (this.__handles) {
+            this.getCanvas().remove(this.__handles.x);
+            this.getCanvas().remove(this.__handles.y);
+        }
+
+        this.__handles = {
+            x: getRect(viewportData.dim.width + ' ' + viewportData.dim.units, viewportData.width),
+            y: getRect(viewportData.dim.height + ' ' + viewportData.dim.units, viewportData.height)
+        };
+
+        this.__handles.x.addTo(this.getCanvas()).centerH().set({ top: tracks.x.top }).setCoords();
+        this.__handles.y.addTo(this.getCanvas())
+            .setAngle(-90)
+            .centerV().set({ left: tracks.y.left })
+            .setCoords();
+
+        this.getCanvas()
+            .on('mouse:move', events.mouseMove)
+            .on('mouse:up', events.mouseUp);
+
+        tracks.x.on('mousedown', events.mouseDown.bind(tracks.x));
+        tracks.y.on('mousedown', events.mouseDown.bind(tracks.y));
+    };
+};
+
+module.exports = DragHandle;
 
 },{"./config":16,"./util":25}],6:[function(require,module,exports){
-'use strict';
-
-var DragHandle = require('./DragHandle');
-var config = require('./config');
-
-function DragbarHandler(canvas) {
-    var _dragbars = {
-        x: null,
-        y: null
-    };
-
-    /**
-     * @return {DragbarHandler}
-     */
-    this.apply = function () {
-        if (!canvas.__hasDragbars) {
-            this.init();
-            canvas.__hasDragbars = true;
-        }
-        this.sync();
-
-        if (!this.__handles) {
-            this.__handles = new DragHandle(this);
-        }
-
-        this.__handles.init();
-
-        this.bringToFront();
-
-        canvas.renderAll();
-        return this;
-    };
-
-    this.canvas = canvas;
-
-    this.bringToFront = function() {
-        [].concat(_dragbars.x, _dragbars.y).forEach(function (dragbar) {
-            dragbar.bringToFront();
-        });
-
-        this.__handles.getHandles().forEach(function (handle) {
-            handle.bringToFront();
-        });
-    };
-    /**
-     * Removes dragbars from canvas
-     */
-    this.clear = function () {
-        canvas
-            .remove(_dragbars.x)
-            .remove(_dragbars.y)
-            .renderAll();
-        return this;
-    };
-
-    this.getTracks = function () {
-        return _dragbars;
-    };
-
-    this.resetPosition = function() {
-        if (!_dragbars.y || !_dragbars.x) {
-            return this;
-        }
-
-        _dragbars.y.set({
-            left: canvas.width - 30,
-            height: canvas.getImage().height * canvas.getImage().scaleY,
-        }).setCoords();
-
-        _dragbars.x.set({
-            top: canvas.height - 30,
-            width: canvas.getImage().width * canvas.getImage().scaleY,
-        }).setCoords();
-
-        this.__handles.setHandlePosition();
-
-        return this;
-    };
-
-    /**
-     * @return {DragbarHandler}
-     */
-    this.init = function () {
-        this.clear();
-
-        _dragbars.x = new fabric.Rect($.extend({}, config.dragBar, {
-            axis: 'x',
-            width: canvas.getImage().width,
-            height: config.dragBar.size,
-            lockMovementY: true,
-            selectable: true,
-            hoverCursor: 'ew-resize',
-            moveCursor: 'ew-resize',
-        }))
-            .addTo(canvas)
-            .centerH().set({ top: canvas.height - 30 }).setCoords();
-
-        _dragbars.y = new fabric.Rect($.extend({}, config.dragBar, {
-            axis: 'y',
-            width: config.dragBar.size,
-            height: canvas.getImage().height,
-            lockMovementX: true,
-            selectable: true,
-            hoverCursor: 'ns-resize',
-            moveCursor: 'ns-resize',
-        }))
-            .addTo(canvas)
-            .set({ left: canvas.width - 30 }).setCoords();
-
-        canvas.getImage().on('moving', this.sync);
-
-        return this;
-    };
-
-    /**
-     * @return {DragbarHandler}
-     */
-    this.sync = function () {
-        _dragbars.x.set({left: canvas.getImage().left}).setCoords();
-        _dragbars.y.set({top: canvas.getImage().top}).setCoords();
-        return this;
-    };
-}
-
-module.exports = DragbarHandler;
+'use strict';
+
+var DragHandle = require('./DragHandle');
+var config = require('./config');
+
+function DragbarHandler(canvas) {
+    var _dragbars = {
+        x: null,
+        y: null
+    };
+
+    /**
+     * @return {DragbarHandler}
+     */
+    this.apply = function () {
+        if (!canvas.__hasDragbars) {
+            this.init();
+            canvas.__hasDragbars = true;
+        }
+        this.sync();
+
+        if (!this.__handles) {
+            this.__handles = new DragHandle(this);
+        }
+
+        this.__handles.init();
+
+        this.bringToFront();
+
+        canvas.renderAll();
+        return this;
+    };
+
+    this.canvas = canvas;
+
+    this.bringToFront = function() {
+        [].concat(_dragbars.x, _dragbars.y).forEach(function (dragbar) {
+            dragbar.bringToFront();
+        });
+
+        this.__handles.getHandles().forEach(function (handle) {
+            handle.bringToFront();
+        });
+    };
+    /**
+     * Removes dragbars from canvas
+     */
+    this.clear = function () {
+        canvas
+            .remove(_dragbars.x)
+            .remove(_dragbars.y)
+            .renderAll();
+        return this;
+    };
+
+    this.getTracks = function () {
+        return _dragbars;
+    };
+
+    this.resetPosition = function() {
+        if (!_dragbars.y || !_dragbars.x) {
+            return this;
+        }
+
+        _dragbars.y.set({
+            left: canvas.width - 30,
+            height: canvas.getImage().height * canvas.getImage().scaleY,
+        }).setCoords();
+
+        _dragbars.x.set({
+            top: canvas.height - 30,
+            width: canvas.getImage().width * canvas.getImage().scaleY,
+        }).setCoords();
+
+        this.__handles.setHandlePosition();
+
+        return this;
+    };
+
+    /**
+     * @return {DragbarHandler}
+     */
+    this.init = function () {
+        this.clear();
+
+        _dragbars.x = new fabric.Rect($.extend({}, config.dragBar, {
+            axis: 'x',
+            width: canvas.getImage().width * canvas.getImage().scaleY,
+            height: config.dragBar.size,
+            lockMovementY: true,
+            selectable: true,
+            hoverCursor: 'ew-resize',
+            moveCursor: 'ew-resize',
+        }))
+            .addTo(canvas)
+            .centerH().set({ top: canvas.height - 30 }).setCoords();
+
+        _dragbars.y = new fabric.Rect($.extend({}, config.dragBar, {
+            axis: 'y',
+            width: config.dragBar.size,
+            height: canvas.getImage().height * canvas.getImage().scaleY,
+            lockMovementX: true,
+            selectable: true,
+            hoverCursor: 'ns-resize',
+            moveCursor: 'ns-resize',
+        }))
+            .addTo(canvas)
+            .set({ left: canvas.width - 30 }).setCoords();
+
+        canvas.getImage().on('moving', this.sync);
+
+        return this;
+    };
+
+    /**
+     * @return {DragbarHandler}
+     */
+    this.sync = function () {
+        _dragbars.x.set({left: canvas.getImage().left}).setCoords();
+        _dragbars.y.set({top: canvas.getImage().top}).setCoords();
+        return this;
+    };
+}
+
+module.exports = DragbarHandler;
 
 },{"./DragHandle":5,"./config":16}],7:[function(require,module,exports){
-'use strict';
-
-var util = require('./util');
-
-/**
- * @param {fabric.Image} img
- * @param {fabric.Rect} boundingRect
- */
-function Draggable(img, boundingRect) {
-    var _bounds = boundingRect;
-
-    /**
-     * Triggers when object is moved
-     */
-    function onMove() {
-        this.__dragged = true;
-
-        this.canvas.disableScroll();
-
-        util.setPositionInside(this, _bounds);
-    }
-
-    // Attach onMove event to image
-    img.on('moving', onMove);
-
-    /**
-     * @param  {fabric.Rect} localBoundingRect
-     * @return {Draggable}
-     */
-    this.enable = function (localBoundingRect) {
-        if (localBoundingRect) {
-            _bounds = localBoundingRect;
-        }
-
-        // @TODO Refactor this, see Viewport.calcMinMaxBoundsForRect
-        if (img.canvas.getViewport().getData().axis === 'x') {
-            _bounds.top.min = _bounds.top.max = img.top;
-        } else {
-            _bounds.left.min = _bounds.left.max = img.left;
-        }
-
-        img.lockMovementX = img.lockMovementY = false;
-        img.selectable = true;
-        img.hoverCursor = 'move';
-        return this;
-    };
-}
-
-module.exports = Draggable;
+'use strict';
+
+var util = require('./util');
+
+/**
+ * @param {fabric.Image} img
+ * @param {fabric.Rect} boundingRect
+ */
+function Draggable(img, boundingRect) {
+    var _bounds = boundingRect;
+
+    /**
+     * Triggers when object is moved
+     */
+    function onMove() {
+        this.__dragged = true;
+
+        this.canvas.disableScroll();
+
+        util.setPositionInside(this, _bounds);
+    }
+
+    // Attach onMove event to image
+    img.on('moving', onMove);
+
+    /**
+     * @param  {fabric.Rect} localBoundingRect
+     * @return {Draggable}
+     */
+    this.enable = function (localBoundingRect) {
+        if (localBoundingRect) {
+            _bounds = localBoundingRect;
+        }
+
+        // @TODO Refactor this, see Viewport.calcMinMaxBoundsForRect
+        if (img.canvas.getViewport().getData().axis === 'x') {
+            _bounds.top.min = _bounds.top.max = img.top;
+        } else {
+            _bounds.left.min = _bounds.left.max = img.left;
+        }
+
+        img.lockMovementX = img.lockMovementY = false;
+        img.selectable = true;
+        img.hoverCursor = 'move';
+        return this;
+    };
+}
+
+module.exports = Draggable;
 
 },{"./util":25}],8:[function(require,module,exports){
-'use strict';
-
-var config = require('./config');
-
-function FrameHandler(viewport) {
-    var _frames;
-    var _frameType = 'image';
-
-    function init() {
-        initFrames();
-    }
-
-    function getFramesAsArray() {
-        return [
-            _frames.top, _frames.right, _frames.bottom, _frames.left
-        ];
-    }
-
-    /**
-     * Sets the 4 rectangles which are used when current canvas should be framed
-     */
-    function initFrames() {
-        var frame = new fabric.Rect(config.frames.default);
-
-        _frames = {
-            top: frame.clone(),
-            right: frame.clone(),
-            bottom: frame.clone(),
-            left: frame.clone()
-        };
-
-        getFramesAsArray().forEach(function (o) {
-            viewport.canvas.add(o);
-        });
-    }
-
-    init();
-
-    /**
-     * @return {String}
-     */
-    this.getFrameType = function () {
-        return _frameType;
-    };
-
-    this.setVisible = function (isVisible) {
-        isVisible = typeof isVisible === 'undefined' ? true : !!isVisible;
-
-        getFramesAsArray().forEach(function (frame) {
-            frame.set({ visible: isVisible });
-        });
-
-        viewport.canvas.renderAll();
-
-        return this;
-    };
-
-    /**
-     * Sets passed frametype to passed viewwport
-     * @param  {string} frameType none|image|black|white
-     * @return {FrameHandler}
-     */
-    this.setFrames = function (frameType) {
-        var bounds = viewport.getBounds();
-
-        frameType = frameType || _frameType || 'image';
-        _frameType = frameType;
-
-        if (!frameType) {
-            return;
-        }
-
-        if (frameType === 'none') {
-            return this.setVisible(false);
-        }
-
-        this.setVisible(true);
-
-        getFramesAsArray().forEach(function (o) {
-            o.set(config.frames[frameType]);
-        });
-
-        var vpData = viewport.getData();
-        var frameSize = 29;
-        if (vpData.dim.units === 'inch') {
-            frameSize /= 2.54;
-        }
-
-        _frames.top.height =
-            _frames.bottom.height =
-                _frames.right.width =
-                    _frames.left.width = vpData.ppmm * frameSize * viewport.canvas.getImage().scaleX;
-
-        _frames.top.width = _frames.bottom.width = vpData.width;
-        _frames.right.height = _frames.left.height = vpData.height;
-
-        if (frameType === 'image') {
-            _frames.top.width -= (vpData.ppmm * frameSize * viewport.canvas.getImage().scaleX) * 2;
-            _frames.bottom.width = _frames.top.width;
-            _frames.right.height -= (vpData.ppmm * frameSize * viewport.canvas.getImage().scaleX) * 2;
-            _frames.left.height = _frames.right.height;
-
-            _frames.top.set({
-                top: bounds.top,
-            }).centerH().setCoords();
-
-            _frames.bottom.set({
-                top: (bounds.top + bounds.height - _frames.bottom.height) - 1
-            }).centerH().setCoords();
-
-            _frames.right.set({
-                left: (bounds.left + bounds.width - _frames.right.width) - 1
-            }).centerV().setCoords();
-
-            _frames.left.set({
-                left: bounds.left
-            }).centerV().setCoords();
-        } else {
-            _frames.top.set({
-                top: (bounds.top - _frames.top.height) + 1,
-            }).centerH().setCoords();
-
-            _frames.bottom.set({
-                top: (bounds.top + bounds.height) - 1,
-            }).centerH().setCoords();
-
-            _frames.right.set({
-                left: (bounds.left + bounds.width) - 1
-            }).centerV().setCoords();
-
-            _frames.left.set({
-                left: (bounds.left - _frames.left.width) + 1
-            }).centerV().setCoords();
-        }
-
-        viewport.canvas.renderAll();
-
-        return this;
-    };
-}
-
-module.exports = FrameHandler;
+'use strict';
+
+var config = require('./config');
+
+function FrameHandler(viewport) {
+    var _frames;
+    var _frameType = 'image';
+
+    function init() {
+        initFrames();
+    }
+
+    function getFramesAsArray() {
+        return [
+            _frames.top, _frames.right, _frames.bottom, _frames.left
+        ];
+    }
+
+    /**
+     * Sets the 4 rectangles which are used when current canvas should be framed
+     */
+    function initFrames() {
+        var frame = new fabric.Rect(config.frames.default);
+
+        _frames = {
+            top: frame.clone(),
+            right: frame.clone(),
+            bottom: frame.clone(),
+            left: frame.clone()
+        };
+
+        getFramesAsArray().forEach(function (o) {
+            viewport.canvas.add(o);
+        });
+    }
+
+    init();
+
+    /**
+     * @return {String}
+     */
+    this.getFrameType = function () {
+        return _frameType;
+    };
+
+    this.setVisible = function (isVisible) {
+        isVisible = typeof isVisible === 'undefined' ? true : !!isVisible;
+
+        getFramesAsArray().forEach(function (frame) {
+            frame.set({ visible: isVisible });
+        });
+
+        viewport.canvas.renderAll();
+
+        return this;
+    };
+
+    /**
+     * Sets passed frametype to passed viewwport
+     * @param  {string} frameType none|image|black|white
+     * @return {FrameHandler}
+     */
+    this.setFrames = function (frameType) {
+        var bounds = viewport.getBounds();
+
+        frameType = frameType || _frameType || 'image';
+        _frameType = frameType;
+
+        if (!frameType) {
+            return;
+        }
+
+        if (frameType === 'none') {
+            return this.setVisible(false);
+        }
+
+        this.setVisible(true);
+
+        getFramesAsArray().forEach(function (o) {
+            o.set(config.frames[frameType]);
+        });
+
+        var vpData = viewport.getData();
+        var frameSize = 29;
+        if (vpData.dim.units === 'inch') {
+            frameSize /= 2.54;
+        }
+
+        _frames.top.height =
+            _frames.bottom.height =
+                _frames.right.width =
+                    _frames.left.width = vpData.ppmm * frameSize * viewport.canvas.getImage().scaleX;
+
+        _frames.top.width = _frames.bottom.width = vpData.width;
+        _frames.right.height = _frames.left.height = vpData.height;
+
+        if (frameType === 'image') {
+            _frames.top.width -= (vpData.ppmm * frameSize * viewport.canvas.getImage().scaleX) * 2;
+            _frames.bottom.width = _frames.top.width;
+            _frames.right.height -= (vpData.ppmm * frameSize * viewport.canvas.getImage().scaleX) * 2;
+            _frames.left.height = _frames.right.height;
+
+            _frames.top.set({
+                top: bounds.top,
+            }).centerH().setCoords();
+
+            _frames.bottom.set({
+                top: (bounds.top + bounds.height - _frames.bottom.height) - 1
+            }).centerH().setCoords();
+
+            _frames.right.set({
+                left: (bounds.left + bounds.width - _frames.right.width) - 1
+            }).centerV().setCoords();
+
+            _frames.left.set({
+                left: bounds.left
+            }).centerV().setCoords();
+        } else {
+            _frames.top.set({
+                top: (bounds.top - _frames.top.height) + 1,
+            }).centerH().setCoords();
+
+            _frames.bottom.set({
+                top: (bounds.top + bounds.height) - 1,
+            }).centerH().setCoords();
+
+            _frames.right.set({
+                left: (bounds.left + bounds.width) - 1
+            }).centerV().setCoords();
+
+            _frames.left.set({
+                left: (bounds.left - _frames.left.width) + 1
+            }).centerV().setCoords();
+        }
+
+        viewport.canvas.renderAll();
+
+        return this;
+    };
+}
+
+module.exports = FrameHandler;
 
 },{"./config":16}],9:[function(require,module,exports){
 'use strict';
@@ -1349,587 +1349,587 @@ function ImageEditor(canvasId, args) {
 module.exports = ImageEditor;
 
 },{"./Canvas":4,"./util":25}],12:[function(require,module,exports){
-'use strict';
-
-function MirrorHandler(img) {
-
-    var _mirrored = 0;
-
-    /**
-     * @param  {Boolean} checked
-     * @return {MirrorHandler}
-     */
-    this.set = function(checked) {
-        _mirrored = (img.flipX = checked) ? 1 : 0;
-        img.setCoords().canvas.renderAll();
-
-        return this;
-    };
-
-    this.getStatus = function() {
-        return _mirrored;
-    };
-
-
-}
-
-module.exports = MirrorHandler;
+'use strict';
+
+function MirrorHandler(img) {
+
+    var _mirrored = 0;
+
+    /**
+     * @param  {Boolean} checked
+     * @return {MirrorHandler}
+     */
+    this.set = function(checked) {
+        _mirrored = (img.flipX = checked) ? 1 : 0;
+        img.setCoords().canvas.renderAll();
+
+        return this;
+    };
+
+    this.getStatus = function() {
+        return _mirrored;
+    };
+
+
+}
+
+module.exports = MirrorHandler;
 
 },{}],13:[function(require,module,exports){
-'use strict';
-
-var util = require('./util');
-var TextButton = require('./TextButton');
-var config = require('./config');
-
-function RulerHandler(viewport) {
-    var _enabled = false;
-    var _lines = { x: null, y: null };
-    var _rect = { x: null, y: null };
-
-    var Event = {
-        /**
-         * Triggers when handlebar is moved
-         */
-        onMove: function () {
-            updateRulerText(this);
-        }
-    };
-
-    function updateRulerText(ruler) {
-        var axis = ruler.axis;
-        var bounds = viewport.getBounds();
-        var pos = util.assertBetween(ruler[axis], bounds.min[axis], bounds.max[axis]);
-        ruler.marker[axis] = ruler[axis] = pos;
-        var dim = (ruler[axis] - bounds[axis]) / (viewport.getData().ppmm * 10 * viewport.canvas.getImage().scaleX);
-
-        if (axis === 'top') {
-            dim = viewport.getData().dim.height - dim;
-        }
-
-        ruler.setText(Math.round(dim * 100) / 100 + ' ' + viewport.getData().dim.units);
-    }
-
-    /**
-     * @return {fabric.Line}
-     */
-    function getLine(axis) {
-        var bounds = viewport.getBounds();
-        return new fabric.Line([
-                0, 0,
-                axis === 'x' ? bounds.width : 0,
-                axis === 'y' ? bounds.height : 0
-            ], {
-            evented: false,
-            strokeDashArray: [5, 5],
-            stroke: '#000',
-            strokeWidth: 1,
-            top: axis === 'x' ? bounds.top + bounds.height / 2 : bounds.top,
-            left: axis === 'y' ? bounds.left + bounds.width / 2 : bounds.left
-        });
-    }
-
-    /**
-     * @return {RulerHandler}
-     */
-    this.clear = function () {
-        [].concat(_rect.x, _rect.y, _lines.x, _lines.y).forEach(function (o) {
-            viewport.canvas.remove(o);
-        });
-        return this;
-    };
-
-    /**
-     * @param  {Boolean} enabled
-     * @return {RulerHandler}
-     */
-    this.enable = function (enabled) {
-        var bounds = viewport.getBounds();
-
-        var keepPosition = (
-            enabled && (_enabled === enabled) &&
-            _lines.x && (Math.abs(_lines.x.width - bounds.width) < 1) &&
-            _lines.y && (Math.abs(_lines.y.height - bounds.height) < 1)
-        );
-
-        if (keepPosition) {
-            updateRulerText(_rect.x);
-            updateRulerText(_rect.y);
-            return this;
-        }
-
-        _enabled = enabled;
-
-        this.clear();
-
-        if (!_enabled) {
-            viewport.canvas.renderAll();
-            return this;
-        }
-
-        _lines = { x: getLine('x'), y: getLine('y') };
-
-        viewport.canvas.add(_lines.x);
-        viewport.canvas.add(_lines.y);
-
-        _rect.x = new TextButton('horizontalRuler', 'H', config.rulerHandle, true)
-            .set(config.rulerHandle.x(_lines, bounds))
-            .addTo(viewport.canvas)
-            .on('moving', Event.onMove)
-            .trigger('moving');
-
-        _rect.y = new TextButton('verticalRuler', 'V', config.rulerHandle, true)
-            .set(config.rulerHandle.y(_lines, bounds))
-            .addTo(viewport.canvas)
-            .on('moving', Event.onMove)
-            .trigger('moving');
-
-        viewport.canvas.renderAll();
-
-        return this;
-    };
-
-    /**
-     * @return {RulerHandler}
-     */
-    this.reset = function () {
-        return this.enable(_enabled);
-    };
-}
-
-module.exports = RulerHandler;
+'use strict';
+
+var util = require('./util');
+var TextButton = require('./TextButton');
+var config = require('./config');
+
+function RulerHandler(viewport) {
+    var _enabled = false;
+    var _lines = { x: null, y: null };
+    var _rect = { x: null, y: null };
+
+    var Event = {
+        /**
+         * Triggers when handlebar is moved
+         */
+        onMove: function () {
+            updateRulerText(this);
+        }
+    };
+
+    function updateRulerText(ruler) {
+        var axis = ruler.axis;
+        var bounds = viewport.getBounds();
+        var pos = util.assertBetween(ruler[axis], bounds.min[axis], bounds.max[axis]);
+        ruler.marker[axis] = ruler[axis] = pos;
+        var dim = (ruler[axis] - bounds[axis]) / (viewport.getData().ppmm * 10 * viewport.canvas.getImage().scaleX);
+
+        if (axis === 'top') {
+            dim = viewport.getData().dim.height - dim;
+        }
+
+        ruler.setText(Math.round(dim * 100) / 100 + ' ' + viewport.getData().dim.units);
+    }
+
+    /**
+     * @return {fabric.Line}
+     */
+    function getLine(axis) {
+        var bounds = viewport.getBounds();
+        return new fabric.Line([
+                0, 0,
+                axis === 'x' ? bounds.width : 0,
+                axis === 'y' ? bounds.height : 0
+            ], {
+            evented: false,
+            strokeDashArray: [5, 5],
+            stroke: '#000',
+            strokeWidth: 1,
+            top: axis === 'x' ? bounds.top + bounds.height / 2 : bounds.top,
+            left: axis === 'y' ? bounds.left + bounds.width / 2 : bounds.left
+        });
+    }
+
+    /**
+     * @return {RulerHandler}
+     */
+    this.clear = function () {
+        [].concat(_rect.x, _rect.y, _lines.x, _lines.y).forEach(function (o) {
+            viewport.canvas.remove(o);
+        });
+        return this;
+    };
+
+    /**
+     * @param  {Boolean} enabled
+     * @return {RulerHandler}
+     */
+    this.enable = function (enabled) {
+        var bounds = viewport.getBounds();
+
+        var keepPosition = (
+            enabled && (_enabled === enabled) &&
+            _lines.x && (Math.abs(_lines.x.width - bounds.width) < 1) &&
+            _lines.y && (Math.abs(_lines.y.height - bounds.height) < 1)
+        );
+
+        if (keepPosition) {
+            updateRulerText(_rect.x);
+            updateRulerText(_rect.y);
+            return this;
+        }
+
+        _enabled = enabled;
+
+        this.clear();
+
+        if (!_enabled) {
+            viewport.canvas.renderAll();
+            return this;
+        }
+
+        _lines = { x: getLine('x'), y: getLine('y') };
+
+        viewport.canvas.add(_lines.x);
+        viewport.canvas.add(_lines.y);
+
+        _rect.x = new TextButton('horizontalRuler', 'H', config.rulerHandle, true)
+            .set(config.rulerHandle.x(_lines, bounds))
+            .addTo(viewport.canvas)
+            .on('moving', Event.onMove)
+            .trigger('moving');
+
+        _rect.y = new TextButton('verticalRuler', 'V', config.rulerHandle, true)
+            .set(config.rulerHandle.y(_lines, bounds))
+            .addTo(viewport.canvas)
+            .on('moving', Event.onMove)
+            .trigger('moving');
+
+        viewport.canvas.renderAll();
+
+        return this;
+    };
+
+    /**
+     * @return {RulerHandler}
+     */
+    this.reset = function () {
+        return this.enable(_enabled);
+    };
+}
+
+module.exports = RulerHandler;
 
 },{"./TextButton":14,"./config":16,"./util":25}],14:[function(require,module,exports){
-'use strict';
-
-var config = require('./config');
-
-/**
- * Creates a text-button with text/settings provided.
- * @param {String} text - text to be shown inside the button
- * @param {Object} settings
- */
-function TextButton(id, text, settings, isActive) {
-    fabric.Group.call(this);
-
-    var __active = isActive || false;
-    var _callback = null;
-    var _rect = null;
-    var _text = null;
-    var _id = id;
-    var width = settings.rect ? settings.rect.width : 0;
-    var height = settings.rect ? settings.rect.height : 0;
-
-    var _rectSettings = $.extend({}, config.textButton.rect(width, height), settings.rect);
-    var _textSettings = $.extend({}, config.textButton.text, settings.text, {
-        text: Array.isArray(text) ? text[0] : text,
-        textActive: Array.isArray(text) ? text[1] : text,
-    });
-
-    this.selectable = true;
-
-    // Make sure we're interactive
-    this.disabled = false;
-    this.hoverCursor = config.textButton.cursor;
-
-    // Initialize text and rectangle
-    _text = new fabric.Text('', _textSettings);
-    _rect = new fabric.Rect(_rectSettings);
-
-    this.addWithUpdate(_rect).addWithUpdate(_text);
-
-    /**
-     * @param  {String} text
-     * @return {TextButton}
-     */
-    this.setText = function(text) {
-        _text.setText((text || '').toString()).setCoords();
-
-        if (_rectSettings.dynamicW) {
-            this.width = _rect.width = _text.width + config.textButton.padding;
-        }
-
-        if (_rectSettings.dynamicH) {
-            this.height = _rect.height = _text.height + config.textButton.padding;
-        }
-
-        return this.setCoords();
-    };
-
-    this.getId = function() {
-        return _id;
-    };
-
-    /**
-     * @return {Boolean}
-     */
-    this.isActive = function() {
-        return this.__active;
-    };
-
-    function handleMouseDown(e) {
-        toggleActiveStyle.call(this);
-        _callback.call(this, e);
-
-        if (this.__group) {
-            this.__group.render();
-        }
-    }
-
-    function toggleActiveStyle() {
-        _rect.setFill(_rectSettings[this.isActive() ? 'activeFill' : 'fill']);
-        _text.setFill(_textSettings[this.isActive() ? 'activeFill' : 'fill']);
-        this.setText(_textSettings[this.isActive() ? 'textActive' : 'text']);
-    }
-
-    this.onClick = function(callback) {
-        _callback = callback || function() {};
-        this.on('mousedown', function (e) {
-            // As inactive buttons are still clickable, we first check if the button is disabled.
-            // Only then we should do stuff.
-            if (!this.disabled) {
-                this.__active = !this.__active;
-                handleMouseDown.call(this, e);
-            }
-        }.bind(this));
-        return this;
-    };
-
-    this.setActive = function (isActive) {
-        this.__active = typeof isActive === 'undefined' ? true : !!isActive;
-        toggleActiveStyle.call(this);
-    };
-
-    this.setDisabled = function (isDisabled)
-    {
-        this.disabled = isDisabled;
-
-        _rect.setFill(_rectSettings[this.disabled ? 'disabledFill' : 'fill']);
-        _text.setFill(_textSettings[this.disabled ? 'disabledFill' : 'fill']);
-    };
-
-    if (_textSettings.text) {
-        this.setText(_textSettings.text);
-    }
-}
-
-TextButton.prototype = Object.create(fabric.Group.prototype);
-TextButton.prototype.constructor = TextButton;
-
-module.exports = TextButton;
+'use strict';
+
+var config = require('./config');
+
+/**
+ * Creates a text-button with text/settings provided.
+ * @param {String} text - text to be shown inside the button
+ * @param {Object} settings
+ */
+function TextButton(id, text, settings, isActive) {
+    fabric.Group.call(this);
+
+    var __active = isActive || false;
+    var _callback = null;
+    var _rect = null;
+    var _text = null;
+    var _id = id;
+    var width = settings.rect ? settings.rect.width : 0;
+    var height = settings.rect ? settings.rect.height : 0;
+
+    var _rectSettings = $.extend({}, config.textButton.rect(width, height), settings.rect);
+    var _textSettings = $.extend({}, config.textButton.text, settings.text, {
+        text: Array.isArray(text) ? text[0] : text,
+        textActive: Array.isArray(text) ? text[1] : text,
+    });
+
+    this.selectable = true;
+
+    // Make sure we're interactive
+    this.disabled = false;
+    this.hoverCursor = config.textButton.cursor;
+
+    // Initialize text and rectangle
+    _text = new fabric.Text('', _textSettings);
+    _rect = new fabric.Rect(_rectSettings);
+
+    this.addWithUpdate(_rect).addWithUpdate(_text);
+
+    /**
+     * @param  {String} text
+     * @return {TextButton}
+     */
+    this.setText = function(text) {
+        _text.setText((text || '').toString()).setCoords();
+
+        if (_rectSettings.dynamicW) {
+            this.width = _rect.width = _text.width + config.textButton.padding;
+        }
+
+        if (_rectSettings.dynamicH) {
+            this.height = _rect.height = _text.height + config.textButton.padding;
+        }
+
+        return this.setCoords();
+    };
+
+    this.getId = function() {
+        return _id;
+    };
+
+    /**
+     * @return {Boolean}
+     */
+    this.isActive = function() {
+        return this.__active;
+    };
+
+    function handleMouseDown(e) {
+        toggleActiveStyle.call(this);
+        _callback.call(this, e);
+
+        if (this.__group) {
+            this.__group.render();
+        }
+    }
+
+    function toggleActiveStyle() {
+        _rect.setFill(_rectSettings[this.isActive() ? 'activeFill' : 'fill']);
+        _text.setFill(_textSettings[this.isActive() ? 'activeFill' : 'fill']);
+        this.setText(_textSettings[this.isActive() ? 'textActive' : 'text']);
+    }
+
+    this.onClick = function(callback) {
+        _callback = callback || function() {};
+        this.on('mousedown', function (e) {
+            // As inactive buttons are still clickable, we first check if the button is disabled.
+            // Only then we should do stuff.
+            if (!this.disabled) {
+                this.__active = !this.__active;
+                handleMouseDown.call(this, e);
+            }
+        }.bind(this));
+        return this;
+    };
+
+    this.setActive = function (isActive) {
+        this.__active = typeof isActive === 'undefined' ? true : !!isActive;
+        toggleActiveStyle.call(this);
+    };
+
+    this.setDisabled = function (isDisabled)
+    {
+        this.disabled = isDisabled;
+
+        _rect.setFill(_rectSettings[this.disabled ? 'disabledFill' : 'fill']);
+        _text.setFill(_textSettings[this.disabled ? 'disabledFill' : 'fill']);
+    };
+
+    if (_textSettings.text) {
+        this.setText(_textSettings.text);
+    }
+}
+
+TextButton.prototype = Object.create(fabric.Group.prototype);
+TextButton.prototype.constructor = TextButton;
+
+module.exports = TextButton;
 
 },{"./config":16}],15:[function(require,module,exports){
-'use strict';
-
-var FrameHandler = require('./FrameHandler');
-var GoreHandler = require('./GoreHandler');
-var RulerHandler = require('./RulerHandler');
-var util = require('./util');
-
-function Viewport(canvas) {
-    var _beams = [];
-    var _borderWidth = 2;
-    var _data = null;
-    var _rect;
-    var self = this;
-
-    /**
-     * Applies viewport to page
-     */
-    function apply() {
-        var cropData = canvas.getImageData().getCropData();
-        canvas.remove(_rect);
-
-        _rect = new fabric.Rect({
-            evented: false,
-            fill: 'transparent',
-            width: _data.width,
-            height: _data.height,
-            stroke: '#fff',
-            strokeWidth: canvas.__type === 'canvas' ? 0 : _borderWidth
-        });
-
-        _rect.width += _borderWidth;
-        _rect.height += _borderWidth;
-        _rect.addTo(canvas).center().setCoords();
-
-        if (cropData) {
-            // Calculate the new position after screenresize and when the
-            // image already has been cropped to a certain position.
-            var left = _rect.left + _rect.strokeWidth - (canvas.getImage().width * canvas.getImage().scaleX * cropData.x);
-            var top = _rect.top + _rect.strokeWidth - (canvas.getImage().height * canvas.getImage().scaleY * cropData.y);
-
-            canvas.getImage().set({ left: left, top: top }).setCoords();
-        } else {
-            canvas.getImage().center().setCoords();
-        }
-
-        canvas.getImage().drag.enable(calcMinMaxBoundsForRect(_rect.getInsideBoundingRect(), canvas.getImage()));
-        canvas.getApertures().apply(_data.axis, _rect.getBoundingRect());
-
-        if (canvas.__type !== 'canvas') {
-            drawBeams();
-        } else {
-            self.setFrame(self.getFrameHandler().getFrameType());
-        }
-
-        canvas.getDragbars().apply();
-        // Apertures sometimes overlaps the viewports bounding rect.
-        // Solve this by bringing it to the front after apertures are applied.
-        _rect.bringToFront();
-    }
-
-    /**
-     * Render the diagonal lines from viewport to edge of the canvas
-     */
-    function drawBeams() {
-        _beams.forEach(function (beam) {
-            canvas.remove(beam);
-        });
-
-        _beams = [];
-
-        // TOP LEFT
-        _beams.push(new fabric.Line(
-            [_rect.left, _rect.top, _rect.left - _rect.top, -1], {
-                stroke: '#fff',
-                strokeWidth: 2,
-            }
-        ));
-
-        // TOP RIGHT
-        _beams.push(_beams[0].clone().set({ flipX: true, left: _rect.left + _rect.width }));
-        // BOTTOM RIGHT
-        _beams.push(_beams[1].clone().set({ flipY: true, top: _rect.top + _rect.height }));
-        // BOTTOM LEFT
-        _beams.push(_beams[0].clone().set({ flipY: true, top: _rect.top + _rect.height }));
-
-        _beams.forEach(function (o) {
-            canvas.add(o);
-            o.bringToFront();
-        });
-    }
-
-    /**
-     * Gets an object with min / max values for each axis, based on the bounds
-     * of passed fabric.Rect
-     * @param  {fabric.Rect} rect
-     * @return {Object}
-     */
-    function calcMinMaxBoundsForRect(rect, img) {
-        return {
-            left: {
-                min: rect.left + rect.width - (img.width * img.scaleX),
-                max: rect.left
-            },
-            top: {
-                min: rect.top + rect.height - (img.height * img.scaleY),
-                max: rect.top
-            }
-        };
-    }
-
-    this.canvas = canvas;
-
-    this.getBounds = function () {
-        return _rect.getInsideBoundingRect();
-    };
-
-    /**
-     * @return {Viewport}
-     */
-    this.reset = function () {
-        if (_data) {
-            return this.set(_data.dim.width, _data.dim.height, _data.dim.units);
-        }
-        return this;
-    };
-
-    /**
-     * @param  {Number} width
-     * @param  {Number} height
-     * @param  {string} units
-     * @return {Viewport}
-     */
-    this.set = function (width, height, units) {
-        var oldData = _data;
-
-        _data = util.calcCrop(canvas.getImage(), width, height, units);
-
-        var keepCropping = (oldData && !util.isAspectChanged(oldData.dim.width, oldData.dim.height, width, height));
-        if (keepCropping) {
-            canvas.getImageData().setCropData();
-        }
-
-        apply();
-        this.getGores().reset();
-        this.getRulers().reset();
-
-        if (canvas.getImage().__cropped && !keepCropping) {
-            canvas.getApertures().setTransparent(true);
-
-            // Trigger event to tell the image needs to be dragged.
-            $(document).trigger('PIE:needs-dragging', { axis: _data.axis });
-        }
-
-        canvas.getButtonMenu().bringToFront();
-
-    };
-
-    /**
-     * @param  {string} frameType white|black|image|none
-     * @return {Viewport}
-     */
-    this.setFrame = function (frameType) {
-        this.getFrameHandler().setFrames(frameType);
-
-        var buttons = canvas.getButtonMenu().getItems();
-        if (frameType === 'none') {
-            buttons[0].setDisabled(true);
-        }
-        else {
-            buttons[0].setDisabled(false);
-        }
-        canvas.getButtonMenu().bringToFront();
-
-        canvas.refresh3dView();
-    };
-
-    this.getData = function () {
-        return _data;
-    };
-
-    var _frameHandler = null;
-
-    this.getFrameHandler = function () {
-        return _frameHandler || (_frameHandler = new FrameHandler(this));
-    };
-
-    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;
+'use strict';
+
+var FrameHandler = require('./FrameHandler');
+var GoreHandler = require('./GoreHandler');
+var RulerHandler = require('./RulerHandler');
+var util = require('./util');
+
+function Viewport(canvas) {
+    var _beams = [];
+    var _borderWidth = 2;
+    var _data = null;
+    var _rect;
+    var self = this;
+
+    /**
+     * Applies viewport to page
+     */
+    function apply() {
+        var cropData = canvas.getImageData().getCropData();
+        canvas.remove(_rect);
+
+        _rect = new fabric.Rect({
+            evented: false,
+            fill: 'transparent',
+            width: _data.width,
+            height: _data.height,
+            stroke: '#fff',
+            strokeWidth: canvas.__type === 'canvas' ? 0 : _borderWidth
+        });
+
+        _rect.width += _borderWidth;
+        _rect.height += _borderWidth;
+        _rect.addTo(canvas).center().setCoords();
+
+        if (cropData) {
+            // Calculate the new position after screenresize and when the
+            // image already has been cropped to a certain position.
+            var left = _rect.left + _rect.strokeWidth - (canvas.getImage().width * canvas.getImage().scaleX * cropData.x);
+            var top = _rect.top + _rect.strokeWidth - (canvas.getImage().height * canvas.getImage().scaleY * cropData.y);
+
+            canvas.getImage().set({ left: left, top: top }).setCoords();
+        } else {
+            canvas.getImage().center().setCoords();
+        }
+
+        canvas.getImage().drag.enable(calcMinMaxBoundsForRect(_rect.getInsideBoundingRect(), canvas.getImage()));
+        canvas.getApertures().apply(_data.axis, _rect.getBoundingRect());
+
+        if (canvas.__type !== 'canvas') {
+            drawBeams();
+        } else {
+            self.setFrame(self.getFrameHandler().getFrameType());
+        }
+
+        canvas.getDragbars().apply();
+        // Apertures sometimes overlaps the viewports bounding rect.
+        // Solve this by bringing it to the front after apertures are applied.
+        _rect.bringToFront();
+    }
+
+    /**
+     * Render the diagonal lines from viewport to edge of the canvas
+     */
+    function drawBeams() {
+        _beams.forEach(function (beam) {
+            canvas.remove(beam);
+        });
+
+        _beams = [];
+
+        // TOP LEFT
+        _beams.push(new fabric.Line(
+            [_rect.left, _rect.top, _rect.left - _rect.top, -1], {
+                stroke: '#fff',
+                strokeWidth: 2,
+            }
+        ));
+
+        // TOP RIGHT
+        _beams.push(_beams[0].clone().set({ flipX: true, left: _rect.left + _rect.width }));
+        // BOTTOM RIGHT
+        _beams.push(_beams[1].clone().set({ flipY: true, top: _rect.top + _rect.height }));
+        // BOTTOM LEFT
+        _beams.push(_beams[0].clone().set({ flipY: true, top: _rect.top + _rect.height }));
+
+        _beams.forEach(function (o) {
+            canvas.add(o);
+            o.bringToFront();
+        });
+    }
+
+    /**
+     * Gets an object with min / max values for each axis, based on the bounds
+     * of passed fabric.Rect
+     * @param  {fabric.Rect} rect
+     * @return {Object}
+     */
+    function calcMinMaxBoundsForRect(rect, img) {
+        return {
+            left: {
+                min: rect.left + rect.width - (img.width * img.scaleX),
+                max: rect.left
+            },
+            top: {
+                min: rect.top + rect.height - (img.height * img.scaleY),
+                max: rect.top
+            }
+        };
+    }
+
+    this.canvas = canvas;
+
+    this.getBounds = function () {
+        return _rect.getInsideBoundingRect();
+    };
+
+    /**
+     * @return {Viewport}
+     */
+    this.reset = function () {
+        if (_data) {
+            return this.set(_data.dim.width, _data.dim.height, _data.dim.units);
+        }
+        return this;
+    };
+
+    /**
+     * @param  {Number} width
+     * @param  {Number} height
+     * @param  {string} units
+     * @return {Viewport}
+     */
+    this.set = function (width, height, units) {
+        var oldData = _data;
+
+        _data = util.calcCrop(canvas.getImage(), width, height, units);
+
+        var keepCropping = (oldData && !util.isAspectChanged(oldData.dim.width, oldData.dim.height, width, height));
+        if (keepCropping) {
+            canvas.getImageData().setCropData();
+        }
+
+        apply();
+        this.getGores().reset();
+        this.getRulers().reset();
+
+        if (canvas.getImage().__cropped && !keepCropping) {
+            canvas.getApertures().setTransparent(true);
+
+            // Trigger event to tell the image needs to be dragged.
+            $(document).trigger('PIE:needs-dragging', { axis: _data.axis });
+        }
+
+        canvas.getButtonMenu().bringToFront();
+
+    };
+
+    /**
+     * @param  {string} frameType white|black|image|none
+     * @return {Viewport}
+     */
+    this.setFrame = function (frameType) {
+        this.getFrameHandler().setFrames(frameType);
+
+        var buttons = canvas.getButtonMenu().getItems();
+        if (frameType === 'none') {
+            buttons[0].setDisabled(true);
+        }
+        else {
+            buttons[0].setDisabled(false);
+        }
+        canvas.getButtonMenu().bringToFront();
+
+        canvas.refresh3dView();
+    };
+
+    this.getData = function () {
+        return _data;
+    };
+
+    var _frameHandler = null;
+
+    this.getFrameHandler = function () {
+        return _frameHandler || (_frameHandler = new FrameHandler(this));
+    };
+
+    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;
 
 },{"./FrameHandler":8,"./GoreHandler":9,"./RulerHandler":13,"./util":25}],16:[function(require,module,exports){
-'use strict';
-
-module.exports = {
-    frames: require('./config/frames'),
-    textButton: require('./config/text-button'),
-    buttonMenu: require('./config/button-menu'),
-    rulerHandle: require('./config/ruler-handle'),
-    dragHandle: require('./config/drag-handle'),
-    dragBar: require('./config/drag-bar')
-};
+'use strict';
+
+module.exports = {
+    frames: require('./config/frames'),
+    textButton: require('./config/text-button'),
+    buttonMenu: require('./config/button-menu'),
+    rulerHandle: require('./config/ruler-handle'),
+    dragHandle: require('./config/drag-handle'),
+    dragBar: require('./config/drag-bar')
+};
 
 },{"./config/button-menu":17,"./config/drag-bar":18,"./config/drag-handle":19,"./config/frames":20,"./config/ruler-handle":21,"./config/text-button":22}],17:[function(require,module,exports){
-'use strict';
-
-module.exports = {
-
-    canvas: {
-        margin: 5,
-        text: {
-            fill: '#ffffff',
-            activeFill: '#ffffff',
-            disabledFill: '#ffffff'
-        },
-        rect: {
-            fill: '#343434',
-            activeFill: '#494949',
-            disabledFill: '#999999'
-        },
-    },
-
-    'photo-wallpaper': {
-        margin: 5,
-        text: {
-            fill: '#ffffff',
-            activeFill: '#ffffff',
-        },
-        rect: {
-            fill: '#000000',
-            activeFill: '#444444',
-        },
-    },
-
-    wallpaper: {
-        margin: 5,
-        text: {
-            fill: '#ffffff',
-            activeFill: '#ffffff',
-            disabledFill: '#ffffff'
-        },
-        rect: {
-            fill: '#343434',
-            activeFill: '#494949',
-            disabledFill: '#999999'
-        },
-    }
-
-};
+'use strict';
+
+module.exports = {
+
+    canvas: {
+        margin: 5,
+        text: {
+            fill: '#ffffff',
+            activeFill: '#ffffff',
+            disabledFill: '#ffffff'
+        },
+        rect: {
+            fill: '#343434',
+            activeFill: '#494949',
+            disabledFill: '#999999'
+        },
+    },
+
+    'photo-wallpaper': {
+        margin: 5,
+        text: {
+            fill: '#ffffff',
+            activeFill: '#ffffff',
+        },
+        rect: {
+            fill: '#000000',
+            activeFill: '#444444',
+        },
+    },
+
+    wallpaper: {
+        margin: 5,
+        text: {
+            fill: '#ffffff',
+            activeFill: '#ffffff',
+            disabledFill: '#ffffff'
+        },
+        rect: {
+            fill: '#343434',
+            activeFill: '#494949',
+            disabledFill: '#999999'
+        },
+    }
+
+};
 
 },{}],18:[function(require,module,exports){
-'use strict';
-
-module.exports = {
-    fill: '#bbbbbb',
-    size: 20,
-};
+'use strict';
+
+module.exports = {
+    fill: '#bbbbbb',
+    size: 20,
+};
 
 },{}],19:[function(require,module,exports){
-'use strict';
-
-module.exports = {
-    text: {
-        fontFamily: 'breuer',
-        fontSize: 12,
-        fill: '#ffffff',
-        originX: 'center',
-        top: 2,
-    },
-    rect: {
-        fill: '#666666',
-        height: 20,
-        originX: 'center',
-    },
-};
+'use strict';
+
+module.exports = {
+    text: {
+        fontFamily: 'breuer',
+        fontSize: 12,
+        fill: '#ffffff',
+        originX: 'center',
+        top: 2,
+    },
+    rect: {
+        fill: '#666666',
+        height: 20,
+        originX: 'center',
+    },
+};
 
 },{}],20:[function(require,module,exports){
-'use strict';
-
-module.exports = {
-
-    default: {
-        fill: '#000000',
-        stroke: '#f31fb3',
-        width: 1,
-        height: 1,
-    },
-
-    image: {
-        fill: 'rgba(0,0,0,0.2)',
-        strokeWidth: 1,
-    },
-
-    black: {
-        fill: '#000000',
-        strokeWidth: 0,
-    },
-
-    white: {
-        fill: '#ffffff',
-        strokeWidth: 0,
-    },
-
-};
+'use strict';
+
+module.exports = {
+
+    default: {
+        fill: '#000000',
+        stroke: '#f31fb3',
+        width: 1,
+        height: 1,
+    },
+
+    image: {
+        fill: 'rgba(0,0,0,0.2)',
+        strokeWidth: 1,
+    },
+
+    black: {
+        fill: '#000000',
+        strokeWidth: 0,
+    },
+
+    white: {
+        fill: '#ffffff',
+        strokeWidth: 0,
+    },
+
+};
 
 },{}],21:[function(require,module,exports){
 'use strict';
@@ -1981,354 +1981,354 @@ module.exports = {
 };
 
 },{}],22:[function(require,module,exports){
-'use strict';
-
-module.exports = {
-
-    rect: function(width, height) {
-        return {
-            fill: '#343434',
-            activeFill: '#494949',
-            disabledFill: '#999999',
-            originX: 'center',
-            originY: 'center',
-            width: width || 1,
-            dynamicW: !width,
-            height: height || 1,
-            dynamicH: !height,
-        };
-    },
-
-    text: {
-        fill: '#ffffff',
-        fontFamily: 'breuer',
-        fontSize: 14,
-        originX: 'center',
-        originY: 'center',
-    },
-
-    cursor: 'pointer',
-    padding: 20,
-};
+'use strict';
+
+module.exports = {
+
+    rect: function(width, height) {
+        return {
+            fill: '#343434',
+            activeFill: '#494949',
+            disabledFill: '#999999',
+            originX: 'center',
+            originY: 'center',
+            width: width || 1,
+            dynamicW: !width,
+            height: height || 1,
+            dynamicH: !height,
+        };
+    },
+
+    text: {
+        fill: '#ffffff',
+        fontFamily: 'breuer',
+        fontSize: 14,
+        originX: 'center',
+        originY: 'center',
+    },
+
+    cursor: 'pointer',
+    padding: 20,
+};
 
 },{}],23:[function(require,module,exports){
-'use strict';
-
-var Draggable = require('./Draggable');
-var util = require('./util');
-
-function ExtendFabricFunctionality() {
-
-    // Set default values for the fabric canvas
-    $.extend(fabric.Object.prototype, {
-        cornerSize: 0,
-        hasBorders: false,
-        hasControls: false,
-        padding: 0,
-        selectable: false,
-        strokeWidth: 0,
-        addTo: function(canvas) {
-            canvas.add(this);
-            return this;
-        },
-    });
-
-
-    util.setProperties(fabric.Image.prototype, {
-        drag: {
-            get: function() {
-                return this.__draggable || (this.__draggable = new Draggable(this));
-            }
-        }
-    });
-
-    $.extend(fabric.Rect.prototype, {
-        /**
-         * Gets the inner bounds of this fabric.Rect
-         * @return {Object}
-         */
-        getInsideBoundingRect: function() {
-            var bounds = this.getBoundingRect();
-            var returnValue = {
-                left: bounds.left + this.strokeWidth,
-                top: bounds.top + this.strokeWidth,
-                width: bounds.width - this.strokeWidth * 2,
-                height: bounds.height - this.strokeWidth * 2
-            };
-
-            returnValue.right = returnValue.left + returnValue.width;
-            returnValue.bottom = returnValue.top + returnValue.height;
-
-            returnValue.min = {
-                left: returnValue.left,
-                top: returnValue.top
-            };
-
-            returnValue.max = {
-                left: returnValue.left + returnValue.width,
-                top: returnValue.top + returnValue.height
-            };
-
-            return returnValue;
-        }
-    });
-}
-
-module.exports = ExtendFabricFunctionality;
+'use strict';
+
+var Draggable = require('./Draggable');
+var util = require('./util');
+
+function ExtendFabricFunctionality() {
+
+    // Set default values for the fabric canvas
+    $.extend(fabric.Object.prototype, {
+        cornerSize: 0,
+        hasBorders: false,
+        hasControls: false,
+        padding: 0,
+        selectable: false,
+        strokeWidth: 0,
+        addTo: function(canvas) {
+            canvas.add(this);
+            return this;
+        },
+    });
+
+
+    util.setProperties(fabric.Image.prototype, {
+        drag: {
+            get: function() {
+                return this.__draggable || (this.__draggable = new Draggable(this));
+            }
+        }
+    });
+
+    $.extend(fabric.Rect.prototype, {
+        /**
+         * Gets the inner bounds of this fabric.Rect
+         * @return {Object}
+         */
+        getInsideBoundingRect: function() {
+            var bounds = this.getBoundingRect();
+            var returnValue = {
+                left: bounds.left + this.strokeWidth,
+                top: bounds.top + this.strokeWidth,
+                width: bounds.width - this.strokeWidth * 2,
+                height: bounds.height - this.strokeWidth * 2
+            };
+
+            returnValue.right = returnValue.left + returnValue.width;
+            returnValue.bottom = returnValue.top + returnValue.height;
+
+            returnValue.min = {
+                left: returnValue.left,
+                top: returnValue.top
+            };
+
+            returnValue.max = {
+                left: returnValue.left + returnValue.width,
+                top: returnValue.top + returnValue.height
+            };
+
+            return returnValue;
+        }
+    });
+}
+
+module.exports = ExtendFabricFunctionality;
 
 },{"./Draggable":7,"./util":25}],24:[function(require,module,exports){
-'use strict';
-
-(function() {
-
-    /**
-     * Fabric functionality is extended with some custom functionality. This is done before
-     * we do anything else.
-     */
-    require('./extend-fabric-functionality')();
-
-    /**
-     * ImageEditor is the starting point of all files. Here the image editor is created and
-     * it receives attributes from the initialisation. As this is done from outside of this file,
-     * the ImageEditor should be available on globally.
-     */
-    window.ImageEditor = require('./ImageEditor');
-
-}());
+'use strict';
+
+(function() {
+
+    /**
+     * Fabric functionality is extended with some custom functionality. This is done before
+     * we do anything else.
+     */
+    require('./extend-fabric-functionality')();
+
+    /**
+     * ImageEditor is the starting point of all files. Here the image editor is created and
+     * it receives attributes from the initialisation. As this is done from outside of this file,
+     * the ImageEditor should be available on globally.
+     */
+    window.ImageEditor = require('./ImageEditor');
+
+}());
 
 },{"./ImageEditor":11,"./extend-fabric-functionality":23}],25:[function(require,module,exports){
-'use strict';
-
-module.exports = {
-
-    assertKeyValuePair: require('./utils/assert-key-value-pair'),
-    assertBetween: require('./utils/assert-between'),
-    calcCrop: require('./utils/calc-crop'),
-    setPositionInside: require('./utils/set-position-inside'),
-    setProperties: require('./utils/set-properties'),
-    toggleFullscreen: require('./utils/toggle-fullscreen'),
-    isMobile: require('./utils/is-mobile'),
-    MouseMetrics: require('./utils/mouse-metrics'),
-    supportsFullscreen: require('./utils/supports-fullscreen'),
-    isFullscreen: require('./utils/is-fullscreen'),
-    isAspectChanged: require('./utils/is-aspect-changed'),
-};
+'use strict';
+
+module.exports = {
+
+    assertKeyValuePair: require('./utils/assert-key-value-pair'),
+    assertBetween: require('./utils/assert-between'),
+    calcCrop: require('./utils/calc-crop'),
+    setPositionInside: require('./utils/set-position-inside'),
+    setProperties: require('./utils/set-properties'),
+    toggleFullscreen: require('./utils/toggle-fullscreen'),
+    isMobile: require('./utils/is-mobile'),
+    MouseMetrics: require('./utils/mouse-metrics'),
+    supportsFullscreen: require('./utils/supports-fullscreen'),
+    isFullscreen: require('./utils/is-fullscreen'),
+    isAspectChanged: require('./utils/is-aspect-changed'),
+};
 
 },{"./utils/assert-between":26,"./utils/assert-key-value-pair":27,"./utils/calc-crop":28,"./utils/is-aspect-changed":29,"./utils/is-fullscreen":30,"./utils/is-mobile":31,"./utils/mouse-metrics":32,"./utils/set-position-inside":33,"./utils/set-properties":34,"./utils/supports-fullscreen":35,"./utils/toggle-fullscreen":36}],26:[function(require,module,exports){
-'use strict';
-
-function assertBetween(value, min, max) {
-    if (value < min) {
-        return min;
-    }
-    if (value > max) {
-        return max;
-    }
-    return value;
-}
-
-module.exports = assertBetween;
+'use strict';
+
+function assertBetween(value, min, max) {
+    if (value < min) {
+        return min;
+    }
+    if (value > max) {
+        return max;
+    }
+    return value;
+}
+
+module.exports = assertBetween;
 
 },{}],27:[function(require,module,exports){
-'use strict';
-
-function assertKeyValuePair(key, value) {
-    if (typeof key === 'object') {
-        return key;
-    }
-
-    var returnValue = {};
-    returnValue[key] = value;
-
-    return returnValue;
-}
-
-module.exports = assertKeyValuePair;
+'use strict';
+
+function assertKeyValuePair(key, value) {
+    if (typeof key === 'object') {
+        return key;
+    }
+
+    var returnValue = {};
+    returnValue[key] = value;
+
+    return returnValue;
+}
+
+module.exports = assertKeyValuePair;
 
 },{}],28:[function(require,module,exports){
-'use strict';
-
-/**
- * @param  {fabric.Image} obj
- * @param  {int} width
- * @param  {int} height
- * @param  {string} units
- * @return {Object}
- *          axis: STRING,
- *          dim: OBJECT( width: NUMBER, height: NUMBER),
- *          width: NUMBER,
- *          height: NUMBER,
- *          ppmm: NUMBER
- */
-function calcCrop(obj, width, height, units) {
-    var cropRatio = width / height;
-    var objRatio = obj.width / obj.height;
-
-    var returnValue = {
-        image: obj,
-        axis: objRatio > cropRatio ? 'x' : 'y',
-        dim: {
-            width: Number(width),
-            height: Number(height),
-            units: units
-        },
-        width: obj.width * obj.scaleX,
-        height: obj.height * obj.scaleY,
-        objectRatio: objRatio,
-        cropRatio: cropRatio
-    };
-
-    if (objRatio > cropRatio) {
-        returnValue.width *= cropRatio / objRatio;
-    } else {
-        returnValue.height /= cropRatio / objRatio;
-    }
-
-    // Pixels per millimeter
-    returnValue.ppmm = returnValue.width / ((returnValue.dim.width * obj.scaleX) * 10);
-
-    return returnValue;
-}
-
-module.exports = calcCrop;
+'use strict';
+
+/**
+ * @param  {fabric.Image} obj
+ * @param  {int} width
+ * @param  {int} height
+ * @param  {string} units
+ * @return {Object}
+ *          axis: STRING,
+ *          dim: OBJECT( width: NUMBER, height: NUMBER),
+ *          width: NUMBER,
+ *          height: NUMBER,
+ *          ppmm: NUMBER
+ */
+function calcCrop(obj, width, height, units) {
+    var cropRatio = width / height;
+    var objRatio = obj.width / obj.height;
+
+    var returnValue = {
+        image: obj,
+        axis: objRatio > cropRatio ? 'x' : 'y',
+        dim: {
+            width: Number(width),
+            height: Number(height),
+            units: units
+        },
+        width: obj.width * obj.scaleX,
+        height: obj.height * obj.scaleY,
+        objectRatio: objRatio,
+        cropRatio: cropRatio
+    };
+
+    if (objRatio > cropRatio) {
+        returnValue.width *= cropRatio / objRatio;
+    } else {
+        returnValue.height /= cropRatio / objRatio;
+    }
+
+    // Pixels per millimeter
+    returnValue.ppmm = returnValue.width / ((returnValue.dim.width * obj.scaleX) * 10);
+
+    return returnValue;
+}
+
+module.exports = calcCrop;
 
 },{}],29:[function(require,module,exports){
-'use strict';
-
-function isAspectChanged(x1, y1, x2, y2) {
-    return (Math.abs(x1 / y1 - x2 / y2) > 0.01);
-}
-
-module.exports = isAspectChanged;
+'use strict';
+
+function isAspectChanged(x1, y1, x2, y2) {
+    return (Math.abs(x1 / y1 - x2 / y2) > 0.01);
+}
+
+module.exports = isAspectChanged;
 
 },{}],30:[function(require,module,exports){
-'use strict';
-
-function isFullscreen() {
-    return document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
-}
-
-module.exports = isFullscreen;
+'use strict';
+
+function isFullscreen() {
+    return document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
+}
+
+module.exports = isFullscreen;
 
 },{}],31:[function(require,module,exports){
-'use strict';
-
-function isMobile() {
-    return $(window).width() < 768;
-}
-
-module.exports = isMobile;
+'use strict';
+
+function isMobile() {
+    return $(window).width() < 768;
+}
+
+module.exports = isMobile;
 
 },{}],32:[function(require,module,exports){
-'use strict';
-
-var MouseMetrics = {
-    previousMouseData: {
-        x: null,
-        y: null
-    },
-
-    deletePreviousMouseData: function() {
-        MouseMetrics.previousMouseData = {
-            x: null,
-            y: null
-        };
-    },
-
-    setPreviousMouseData: function(values) {
-        MouseMetrics.previousMouseData = {
-            x: values.x || null,
-            y: values.y || null,
-        };
-    },
-};
-
-module.exports = MouseMetrics;
+'use strict';
+
+var MouseMetrics = {
+    previousMouseData: {
+        x: null,
+        y: null
+    },
+
+    deletePreviousMouseData: function() {
+        MouseMetrics.previousMouseData = {
+            x: null,
+            y: null
+        };
+    },
+
+    setPreviousMouseData: function(values) {
+        MouseMetrics.previousMouseData = {
+            x: values.x || null,
+            y: values.y || null,
+        };
+    },
+};
+
+module.exports = MouseMetrics;
 
 },{}],33:[function(require,module,exports){
-'use strict';
-
-/**
- * @param  {fabric.Object} obj
- * @param  {Object} bounds
- * @return {fabric.Object}
- */
-function setPositionInside(obj, bounds) {
-    ['left', 'top'].forEach(function (v) {
-        if (obj[v] < bounds[v].min) {
-            obj.set(v, bounds[v].min).setCoords();
-        }
-
-        if (obj[v] > bounds[v].max) {
-            obj.set(v, bounds[v].max).setCoords();
-        }
-    });
-    return obj;
-}
-
-module.exports = setPositionInside;
+'use strict';
+
+/**
+ * @param  {fabric.Object} obj
+ * @param  {Object} bounds
+ * @return {fabric.Object}
+ */
+function setPositionInside(obj, bounds) {
+    ['left', 'top'].forEach(function (v) {
+        if (obj[v] < bounds[v].min) {
+            obj.set(v, bounds[v].min).setCoords();
+        }
+
+        if (obj[v] > bounds[v].max) {
+            obj.set(v, bounds[v].max).setCoords();
+        }
+    });
+    return obj;
+}
+
+module.exports = setPositionInside;
 
 },{}],34:[function(require,module,exports){
-'use strict';
-
-/**
- * @param  {Object} obj
- * @param  {Object} properties
- */
-function setProperties(obj, properties) {
-    for (var o in properties) {
-        if (properties.hasOwnProperty(o)) {
-            Object.defineProperty(obj, o, properties[o]);
-        }
-    }
-}
-
-module.exports = setProperties;
+'use strict';
+
+/**
+ * @param  {Object} obj
+ * @param  {Object} properties
+ */
+function setProperties(obj, properties) {
+    for (var o in properties) {
+        if (properties.hasOwnProperty(o)) {
+            Object.defineProperty(obj, o, properties[o]);
+        }
+    }
+}
+
+module.exports = setProperties;
 
 },{}],35:[function(require,module,exports){
-'use strict';
-
-function supportsFullscreen() {
-
-    return document.documentElement.requestFullscreen || document.documentElement.webkitRequestFullScreen || document.documentElement.mozRequestFullScreen || document.documentElement.msRequestFullscreen;
-
-}
-
-module.exports = supportsFullscreen;
+'use strict';
+
+function supportsFullscreen() {
+
+    return document.documentElement.requestFullscreen || document.documentElement.webkitRequestFullScreen || document.documentElement.mozRequestFullScreen || document.documentElement.msRequestFullscreen;
+
+}
+
+module.exports = supportsFullscreen;
 
 },{}],36:[function(require,module,exports){
-'use strict';
-
-var isFullscreen = require('./is-fullscreen');
-/**
- * Toggles the full screen state for passed DOM object
- * @param {HTMLElement} elm
- */
-function toggleFullscreen(elem) {
-    if (isFullscreen()) {
-        if (document.exitFullscreen) {
-            document.exitFullscreen();
-        } else if (document.msExitFullscreen) {
-            document.msExitFullscreen();
-        } else if (document.mozCancelFullScreen) {
-            document.mozCancelFullScreen();
-        } else if (document.webkitCancelFullScreen) {
-            document.webkitCancelFullScreen();
-        }
-        return;
-    }
-
-    if (elem.requestFullscreen) {
-        elem.requestFullscreen();
-    } else if (elem.webkitRequestFullScreen) {
-        elem.webkitRequestFullScreen();
-    } else if (elem.mozRequestFullScreen) {
-        elem.mozRequestFullScreen();
-    } else if (elem.msRequestFullscreen) {
-        elem.msRequestFullscreen();
-    }
-}
-
-module.exports = toggleFullscreen;
+'use strict';
+
+var isFullscreen = require('./is-fullscreen');
+/**
+ * Toggles the full screen state for passed DOM object
+ * @param {HTMLElement} elm
+ */
+function toggleFullscreen(elem) {
+    if (isFullscreen()) {
+        if (document.exitFullscreen) {
+            document.exitFullscreen();
+        } else if (document.msExitFullscreen) {
+            document.msExitFullscreen();
+        } else if (document.mozCancelFullScreen) {
+            document.mozCancelFullScreen();
+        } else if (document.webkitCancelFullScreen) {
+            document.webkitCancelFullScreen();
+        }
+        return;
+    }
+
+    if (elem.requestFullscreen) {
+        elem.requestFullscreen();
+    } else if (elem.webkitRequestFullScreen) {
+        elem.webkitRequestFullScreen();
+    } else if (elem.mozRequestFullScreen) {
+        elem.mozRequestFullScreen();
+    } else if (elem.msRequestFullscreen) {
+        elem.msRequestFullscreen();
+    }
+}
+
+module.exports = toggleFullscreen;
 
 },{"./is-fullscreen":30}]},{},[24]);