diff --git a/src/js/components/ImageEditor/3dHandler.js b/src/js/components/ImageEditor/3dHandler.js index 57313a8..b0b56e9 100644 --- a/src/js/components/ImageEditor/3dHandler.js +++ b/src/js/components/ImageEditor/3dHandler.js @@ -52,6 +52,40 @@ function ThreeDHandler(canvas) { return _overlay.visible; }; + this.getResizedImage = function(img) { + // Calculate maxHeight and maxWidth of the 3d image + // and scale the image accoring to those values + var maxHeight = canvas.getHeight() - 100; + var maxWidth = canvas.getWidth() - 100; + + img.scaleX = img.scaleY = 1; + + if (maxHeight < img.height) { + img.scaleToHeight(maxHeight); + } + if (maxWidth < (img.width * img.scaleX)) { + img.scaleToWidth(maxWidth); + } + + return img; + }; + + this.refreshImage = function() { + _overlay.set({ + width: canvas.width, + }); + + this.applyImage(); + }; + + this.applyImage = function(img) { + img = img || _image; + + _overlay + .remove(_image) + .add(_image = this.getResizedImage(img)); + }; + /** * @return {ThreeDHandler} */ @@ -61,10 +95,7 @@ function ThreeDHandler(canvas) { originY: 'center', }); - _overlay - .remove(_image) - .add(_image = img); - + this.applyImage(img); return this.enable(); }; diff --git a/src/js/components/ImageEditor/Canvas.js b/src/js/components/ImageEditor/Canvas.js index 3c83925..e32bc2e 100644 --- a/src/js/components/ImageEditor/Canvas.js +++ b/src/js/components/ImageEditor/Canvas.js @@ -37,7 +37,11 @@ var Canvas = fabric.util.createClass(fabric.Canvas, { this.setHeight(args.height); this.setWidth(args.width); this.getButtonMenu().render(); - this.getViewport().reset(); + if (this.get3dHandler().isEnabled()) { + this.get3dHandler().refreshImage(); + } else { + this.getViewport().reset(); + } this.sendToBack(this.getImage()); this.getDragbars().resetPosition(); this.renderAll(); @@ -53,16 +57,20 @@ var Canvas = fabric.util.createClass(fabric.Canvas, { */ get3dUrl: function () { var cropData = this.getImage().transformation.getData(); - return this.getImage().__url.replace(/\?h=\d+$/, '?') + - [ - 'h=313', - 'mirror=' + (cropData.mirrored ? 1 : 0), - 'canvas[edge]=' + cropData.edge, - 'crop[w]=' + cropData.width, - 'crop[h]=' + cropData.height, - 'crop[x]=' + cropData.x, - 'crop[y]=' + cropData.y, - ].join('&'); + var params = [ + 'h=400', + 'canvas[edge]=' + cropData.edge, + 'crop[w]=' + cropData.width, + 'crop[h]=' + cropData.height, + 'crop[x]=' + cropData.x, + 'crop[y]=' + cropData.y, + ]; + + if (cropData.mirrored) { + params.push('mirror=1'); + } + + return this.getImage().__url.replace(/\?h=\d+$/, '?') + params.join('&'); }, getApertures: function () { diff --git a/src/js/components/ImageEditor/Viewport.js b/src/js/components/ImageEditor/Viewport.js index 3b84a93..ddef26e 100644 --- a/src/js/components/ImageEditor/Viewport.js +++ b/src/js/components/ImageEditor/Viewport.js @@ -56,7 +56,6 @@ function Viewport(canvas) { // Apertures sometimes overlaps the viewports bounding rect. // Solve this by bringing it to the front after apertures are applied. _rect.bringToFront(); - canvas.refresh3dView(); } function getCroppedData() {