diff --git a/src/js/components/ImageEditor/Canvas.js b/src/js/components/ImageEditor/Canvas.js index b447b11..0ac2411 100644 --- a/src/js/components/ImageEditor/Canvas.js +++ b/src/js/components/ImageEditor/Canvas.js @@ -26,6 +26,7 @@ var Canvas = fabric.util.createClass(fabric.Canvas, { if (this.getImage().__cropped && !this.get3dHandler().isEnabled()) { this.getApertures().setTransparent(false); + this.getImage().transformation.setCropData(); // Trigger event to tell the image has been dragged. $document.trigger('PIE:dragged'); } @@ -57,17 +58,17 @@ var Canvas = fabric.util.createClass(fabric.Canvas, { * @return {String} */ get3dUrl: function () { - var cropData = this.getImage().transformation.getData(); + var imageData = this.getImage().transformation.getData(); var params = [ 'h=400', - 'canvas[edge]=' + cropData.edge, - 'crop[w]=' + cropData.width, - 'crop[h]=' + cropData.height, - 'crop[x]=' + cropData.x, - 'crop[y]=' + cropData.y, + 'canvas[edge]=' + imageData.edge, + 'crop[w]=' + imageData.width, + 'crop[h]=' + imageData.height, + 'crop[x]=' + imageData.x, + 'crop[y]=' + imageData.y, ]; - if (cropData.mirrored) { + if (imageData.mirrored) { params.push('mirror=1'); } @@ -137,12 +138,7 @@ var Canvas = fabric.util.createClass(fabric.Canvas, { }, refreshImage: function(img) { - this.removeImage(); this.__image = img; - this.__image.addTo(this).on('mousedown', function () { - img.canvas.getApertures().setTransparent(true); - }).setCoords(); - this.getViewport().reset(); return this; }, diff --git a/src/js/components/ImageEditor/ImageTransformationHandler.js b/src/js/components/ImageEditor/ImageTransformationHandler.js index b705c44..8420903 100644 --- a/src/js/components/ImageEditor/ImageTransformationHandler.js +++ b/src/js/components/ImageEditor/ImageTransformationHandler.js @@ -10,14 +10,24 @@ function ImageTransformationHandler(img) { * @return {Object} */ this.getCropData = function () { + return JSON.parse(sessionStorage.getItem('cropData')); + }; + + this.setCropData = function() { var viewportBounds = img.canvas.getViewport().getBounds(); var dragAxis = img.canvas.getViewport().getData().axis; - return { - x: dragAxis === 'h' ? (viewportBounds.left - img.left) / img.width : 0, - y: dragAxis === 'v' ? (viewportBounds.top - img.top) / img.height : 0, - }; - }; + var cropData = { + x: dragAxis === 'h' ? (viewportBounds.left - img.left) / (img.width * img.scaleX) : 0, + y: dragAxis === 'v' ? (viewportBounds.top - img.top) / (img.height * img.scaleY) : 0, + } + + sessionStorage.setItem('cropData', JSON.stringify(cropData)); + } + + this.removeCropData = function() { + sessionStorage.removeItem('cropData'); + } /** * Gets an object containing applied transformations for the Image and also diff --git a/src/js/components/ImageEditor/Viewport.js b/src/js/components/ImageEditor/Viewport.js index 82b00b9..d88333b 100644 --- a/src/js/components/ImageEditor/Viewport.js +++ b/src/js/components/ImageEditor/Viewport.js @@ -16,7 +16,7 @@ function Viewport(canvas) { * Applies viewport to page */ function apply() { - var croppedData = getCroppedData(); + var cropData = canvas.getImage().transformation.getCropData(); canvas.remove(_rect); _rect = new fabric.Rect({ @@ -32,11 +32,11 @@ function Viewport(canvas) { _rect.height += _borderWidth; _rect.addTo(canvas).center().setCoords(); - if (croppedData) { + 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 * croppedData.x); - var top = _rect.top + _rect.strokeWidth - (canvas.getImage().height * croppedData.y); + 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 { @@ -58,10 +58,6 @@ function Viewport(canvas) { _rect.bringToFront(); } - function getCroppedData() { - return canvas.getImage().__cropped ? canvas.getImage().transformation.getCropData() : null; - } - /** * Render the diagonal lines from viewport to edge of the canvas */ @@ -143,6 +139,7 @@ function Viewport(canvas) { } else { canvas.getApertures().setTransparent(true); + canvas.getImage().transformation.removeCropData(); // Trigger event to tell the image needs to be dragged. $(document).trigger('PIE:needs-dragging', { axis: _data.axis });