Fixed button changing on canvas products

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,
+                width: canvas.width * 2,
-                height: canvas.height - 50,
+                height: canvas.height,
-                top: 50,
+                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;
     };
 

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();
         }

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();