diff --git a/src/js/components/ImageEditor/3dHandler.js b/src/js/components/ImageEditor/3dHandler.js index b4bd69f..57313a8 100644 --- a/src/js/components/ImageEditor/3dHandler.js +++ b/src/js/components/ImageEditor/3dHandler.js @@ -5,15 +5,17 @@ function ThreeDHandler(canvas) { var _image; function init() { + + // Width is made bigger as this works better with resizing the editor _overlay .set({ visible: false, left: 0 }) .addWithUpdate(new fabric.Rect({ - width: canvas.width, - height: canvas.height - 50, - top: 50, + width: canvas.width * 2, + height: canvas.height, + top: 0, left: 0, fill: canvas.backgroundColor, })); @@ -39,7 +41,10 @@ function ThreeDHandler(canvas) { .set({ width: canvas.width, visible: true - }).bringToFront().canvas.renderAll(); + }).bringToFront(); + + canvas.getButtonMenu().bringToFront(); + canvas.renderAll(); return this; }; diff --git a/src/js/components/ImageEditor/Canvas.js b/src/js/components/ImageEditor/Canvas.js index 1d61b82..3c83925 100644 --- a/src/js/components/ImageEditor/Canvas.js +++ b/src/js/components/ImageEditor/Canvas.js @@ -23,7 +23,7 @@ var Canvas = fabric.util.createClass(fabric.Canvas, { }); this.on('mouse:up', function () { - if (this.getImage().__cropped) { + if (this.getImage().__cropped && !this.get3dHandler().isEnabled()) { this.getApertures().setTransparent(false); // Trigger event to tell the image has been dragged. @@ -142,6 +142,11 @@ var Canvas = fabric.util.createClass(fabric.Canvas, { }, toggle3D: function (showAs3d) { + this.getButtonMenu().getItems().forEach(function(button) { + var buttonState = button.getId() === '3d' ? showAs3d : !showAs3d; + button.setActive(buttonState); + }); + if (!showAs3d) { return this.get3dHandler().disable(); } diff --git a/src/js/init.js b/src/js/init.js index 28f6305..b7f40bb 100644 --- a/src/js/init.js +++ b/src/js/init.js @@ -17,7 +17,7 @@ var imageUrl = '//images.photowall.com/products/' + $input.image_id.val() + '.jpg?h=450'; - var editor = new ImageEditor('canvas-editor', {'type': 'wallpaper'}) + var editor = new ImageEditor('canvas-editor', {'type': 'canvas'}) .loadImage(imageUrl, function() { $input.w.trigger('input'); Event.handleResize();