Merge branch 'P5-1859_panorama_canvas_breaks'

.gitignore

@@ -2,6 +2,5 @@ node_modules
 *.sublime-project
 *.sublime-workspace
 *.idea
-dist
 *.DS_Store
 package-lock.json

dist/image-editor.js

@@ -422,6 +422,7 @@ var Canvas = fabric.util.createClass(fabric.Canvas, {
             this.getViewport().reset();
         }
         this.sendToBack(this.getImage());
+        this.getImage().center();
         this.getDragbars().resetPosition();
         this.renderAll();
     },
@@ -819,7 +820,7 @@ function DragbarHandler(canvas) {
 
         _dragbars.x = new fabric.Rect($.extend({}, config.dragBar, {
             axis: 'x',
-            width: canvas.getImage().width,
+            width: canvas.getImage().width * canvas.getImage().scaleY,
             height: config.dragBar.size,
             lockMovementY: true,
             selectable: true,
@@ -832,7 +833,7 @@ function DragbarHandler(canvas) {
         _dragbars.y = new fabric.Rect($.extend({}, config.dragBar, {
             axis: 'y',
             width: config.dragBar.size,
-            height: canvas.getImage().height,
+            height: canvas.getImage().height * canvas.getImage().scaleY,
             lockMovementX: true,
             selectable: true,
             hoverCursor: 'ns-resize',

dist/js/init.js

@@ -0,0 +1,596 @@
+(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';
+
+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'),
+    screenSizes: require('./config/screen-sizes'),
+};
+
+},{"./config/button-menu":2,"./config/drag-bar":3,"./config/drag-handle":4,"./config/frames":5,"./config/ruler-handle":6,"./config/screen-sizes":7,"./config/text-button":8}],2:[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'
+        },
+    },
+
+    wallpaper: {
+        margin: 5,
+        text: {
+            fill: '#ffffff',
+            activeFill: '#ffffff',
+            disabledFill: '#ffffff'
+        },
+        rect: {
+            fill: '#343434',
+            activeFill: '#494949',
+            disabledFill: '#999999'
+        },
+    }
+
+};
+
+},{}],3:[function(require,module,exports){
+'use strict';
+
+module.exports = {
+    fill: '#bbbbbb',
+    size: 20,
+};
+
+},{}],4:[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',
+    },
+};
+
+},{}],5:[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,
+    },
+
+};
+
+},{}],6:[function(require,module,exports){
+'use strict';
+
+module.exports = {
+
+    line: function(axis, bounds) {
+        return {
+            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
+        }
+    },
+
+    text: {
+        fontSize: 12,
+        width: 75,
+        height: 20,
+        fill: '#33ff33',
+    },
+
+    x: function(lines, bounds) {
+        return {
+            axis: 'left',
+            marker: lines.y,
+            top: Math.ceil(bounds.top + bounds.height + 5),
+            left: lines.y.left,
+            originX: 'center',
+            lockMovementY: true,
+            moveCursor: 'ew-resize',
+            hoverCursor: 'ew-resize',
+        }
+    },
+    y: function(lines, bounds) {
+        return {
+            axis: 'top',
+            marker: lines.x,
+            top: lines.x.top,
+            left: Math.ceil(bounds.left + bounds.width + 5),
+            originY: 'center',
+            lockMovementX: true,
+            moveCursor: 'ns-resize',
+            hoverCursor: 'ns-resize',
+        }
+    }
+};
+
+},{}],7:[function(require,module,exports){
+'use strict';
+
+module.exports = {
+    mobile: {
+        min: 0,
+        max: 767
+    },
+    tablet: {
+        min: 768,
+        max: 983
+    },
+    desktop: {
+        min: 984,
+        max: 1311
+    },
+    hd: {
+        min: 1312,
+        max: 99999
+    }
+};
+
+},{}],8:[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,
+};
+
+},{}],9:[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'),
+};
+
+},{"./utils/assert-between":10,"./utils/assert-key-value-pair":11,"./utils/calc-crop":12,"./utils/is-aspect-changed":13,"./utils/is-fullscreen":14,"./utils/is-mobile":15,"./utils/mouse-metrics":16,"./utils/set-position-inside":17,"./utils/set-properties":18,"./utils/supports-fullscreen":19,"./utils/toggle-fullscreen":20}],10:[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;
+
+},{}],11:[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;
+
+},{}],12:[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;
+
+},{}],13:[function(require,module,exports){
+'use strict';
+
+function isAspectChanged(x1, y1, x2, y2) {
+    return (Math.abs(x1 / y1 - x2 / y2) > 0.01);
+}
+
+module.exports = isAspectChanged;
+
+},{}],14:[function(require,module,exports){
+'use strict';
+
+function isFullscreen() {
+    return document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
+}
+
+module.exports = isFullscreen;
+
+},{}],15:[function(require,module,exports){
+'use strict';
+
+function isMobile() {
+    return $(window).width() < 768;
+}
+
+module.exports = isMobile;
+
+},{}],16:[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;
+
+},{}],17:[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;
+
+},{}],18:[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;
+
+},{}],19:[function(require,module,exports){
+'use strict';
+
+function supportsFullscreen() {
+
+    return document.documentElement.requestFullscreen || document.documentElement.webkitRequestFullScreen || document.documentElement.mozRequestFullScreen || document.documentElement.msRequestFullscreen;
+
+}
+
+module.exports = supportsFullscreen;
+
+},{}],20:[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;
+
+},{"./is-fullscreen":14}],21:[function(require,module,exports){
+'use strict';
+
+var config = require('./includes/config');
+var util = require('./includes/util');
+
+/**
+ * This is just an example usage of the image editor. Also this is used for testing.
+ * This code can be pretty messy, but that is fine because nothing of this will come to
+ * production.
+ */
+
+(function() {
+    var $document = $(document);
+    var $window = $(window);
+    var $wrapper = $('#wrapper');
+    var $formControl = $('#form-control');
+    var editor = null;
+
+    // Inputs for the editor
+    var $input = {
+        w: $formControl.find('input[name="w"]'),
+        h: $formControl.find('input[name="h"]'),
+        units: $formControl.find('select[name="units"]'),
+        image_id: $formControl.find('input[name="image_id"]'),
+        mirror: $formControl.find('input[name="mirror"]'),
+        noCrop: $formControl.find('input[name="no-crop"]'),
+        border: $formControl.find('select[name="canvas-border"]'),
+    };
+    var imageUrl = '//images.photowall.com/products/' + $input.image_id.val() + '.jpg?h=450';
+
+    function getOptimalDimension(values, currentDimension, ratio) {
+        if (currentDimension === 'h') {
+            values.width = Math.round(values.height * ratio);
+        } else {
+            values.height = Math.round(values.width / ratio);
+        }
+
+        return values;
+    }
+
+    function handleDimensionChange() {
+        var noCropIsChecked = $input.noCrop.is(':checked');
+        var data = editor.canvas.getViewport().getData();
+        var values = {
+            width: $input.w.val(),
+            height: $input.h.val(),
+        };
+
+        if (noCropIsChecked) {
+            var currentDimension = $(this).attr('name') === 'h' ? 'h' : 'w';
+            values = getOptimalDimension(values, currentDimension, data.objectRatio);
+        }
+
+        $input.w.val(values.width);
+        $input.h.val(values.height);
+
+        editor.crop(values.width, values.height, $input.units.val());
+    }
+
+    function handleMirrorChange() {
+        editor.canvas.getMirror().set(this.checked);
+    }
+
+    function handleNoCropChange() {
+        $input.w.trigger('input');
+    }
+
+    function handleFrameChange() {
+
+        if ($(this).val() === 'none') {
+            editor.canvas.toggle3D(false);
+        }
+
+        editor.canvas.getViewport().setFrame($(this).val());
+    }
+
+    function handleResize() {
+        var width = $wrapper.width();
+        var height = util.isFullscreen() ? $window.height() : $wrapper.height();
+        if (util.isFullscreen()) {
+            editor.canvas.getHighResolutionUrl('//images.photowall.com/products/' + $input.image_id.val() + '.jpg?h=1000');
+            console.log('resized fullscreen');
+        }
+        editor.canvas.resize({width: width, height: height});
+    }
+
+    function getWrapperData() {
+        var $navbar = $('.image-editor__navbar');
+        var isFullScreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
+        var isMobile = $window.width() <= config.screenSizes.mobile.max;
+        var windowHeight = window.innerHeight ? window.innerHeight : $window.height();
+        var windowWidth = window.innerWidth ? window.innerWidth : $window.width();
+
+        return {
+            width: isFullScreen ? windowWidth : (isMobile ? windowWidth : $wrapper.width()),
+            height: isFullScreen ? windowHeight : (isMobile ? windowHeight - $navbar.height() : $wrapper.height())
+        };
+    }
+
+    function eventHandlers() {
+        $input.w.on('input', handleDimensionChange);
+        $input.h.on('input', handleDimensionChange);
+        $input.mirror.on('change', handleMirrorChange);
+        $input.noCrop.on('change', handleNoCropChange);
+        $input.border.on('change', handleFrameChange);
+
+        $document
+            .on('PIE:dragged', function() {
+                console.log('Dragged the image/dragbar!');
+            })
+            .on('PIE:needs-dragging', function(e, data) {
+                console.log('Image needs dragging on: ' + data.axis);
+            })
+            .on('PIE:dragbar-click', function(e, data) {
+                console.log('Clicked on a dragbar! Axis: ' + data.axis);
+            })
+            .on('PIE:image-start-load', function() {
+                console.log('Start loading image');
+            })
+            .on('PIE:image-end-load', function() {
+                console.log('Image loaded');
+            });
+
+        $window.on('resize', handleResize);
+    }
+
+    function init() {
+
+        editor = new ImageEditor('canvas-editor', {
+                type: 'canvas',
+                buttons: {
+                    showThreeD: '3d',
+                    hideThreeD: 'Flat',
+                    showMurals: 'show-murals',
+                    hideMurals: 'hide-murals',
+                    showRulers: 'show-rulers',
+                    hideRulers: 'hide-rulers',
+                    showFullscreen: 'show-fullscreen',
+                    hideFullscreen: 'exit-fullscreen',
+                },
+                dimensions: getWrapperData()
+            })
+            .loadImage(imageUrl, function() {
+                $input.w.trigger('input');
+                handleResize();
+            });
+
+        eventHandlers();
+    }
+
+    init();
+
+}());
+
+},{"./includes/config":1,"./includes/util":9}]},{},[21]);

src/Canvas.js

@@ -63,6 +63,7 @@ var Canvas = fabric.util.createClass(fabric.Canvas, {
             this.getViewport().reset();
         }
         this.sendToBack(this.getImage());
+        this.getImage().center();
         this.getDragbars().resetPosition();
         this.renderAll();
     },

src/DragbarHandler.js

@@ -86,7 +86,7 @@ function DragbarHandler(canvas) {
 
         _dragbars.x = new fabric.Rect($.extend({}, config.dragBar, {
             axis: 'x',
-            width: canvas.getImage().width,
+            width: canvas.getImage().width * canvas.getImage().scaleY,
             height: config.dragBar.size,
             lockMovementY: true,
             selectable: true,
@@ -99,7 +99,7 @@ function DragbarHandler(canvas) {
         _dragbars.y = new fabric.Rect($.extend({}, config.dragBar, {
             axis: 'y',
             width: config.dragBar.size,
-            height: canvas.getImage().height,
+            height: canvas.getImage().height * canvas.getImage().scaleY,
             lockMovementX: true,
             selectable: true,
             hoverCursor: 'ns-resize',