Let Canvas handle 3D image

src/js/components/ImageEditor/3dHandler.js

@@ -37,6 +37,10 @@ function ThreeDHandler(canvas) {
         return this;
     };
 
+    this.isEnabled = function () {
+        return _overlay.visible;
+    };
+
     /**
      * @return {ThreeDHandler}
      */

src/js/components/ImageEditor/Canvas.js

@@ -46,6 +46,22 @@ var Canvas = fabric.util.createClass(fabric.Canvas, {
           (this.__3dHandler = new ThreeDHandler(this));
     },
 
+    /**
+     * @return {String}
+     */
+    get3dUrl: function () {
+        var cropData = this.getImage().transformation.getData();
+        return this.getImage().__url.replace(/\?h=\d+$/, '?') +
+            [
+                'h=313',
+                'canvas[edge]=' + cropData.edge,
+                'crop[w]=' + cropData.width,
+                'crop[h]=' + cropData.height,
+                'crop[x]=' + cropData.x,
+                'crop[y]=' + cropData.y,
+            ].join('&');
+    },
+
     getApertures: function () {
         return this.__aperturehandler ||
             (this.__aperturehandler = new ApertureHandler(this));
@@ -109,7 +125,17 @@ var Canvas = fabric.util.createClass(fabric.Canvas, {
         }).setCoords();
         this.getViewport().reset();
         return this;
-    }
+    },
+
+    toggle3D: function (showAs3d) {
+        if (!showAs3d) {
+            return this.get3dHandler().disable();
+        }
+
+        fabric.Image.fromURL(encodeURI(this.get3dUrl()), function (img) {
+            this.get3dHandler().setImage(img);
+        }.bind(this));
+    },
 });
 
 module.exports = Canvas;

src/js/components/ImageEditor/ImageEditor.js

@@ -26,10 +26,10 @@ function ImageEditor(canvasId, args) {
     if (_canvas.__type === 'canvas') {
         _canvas.getButtonMenu()
             .addItem('Flat', function () {
-                self.toggle3D(false);
+                _canvas.toggle3D(false);
             })
             .addItem('3D', function () {
-                self.toggle3D(true);
+                _canvas.toggle3D(true);
             })
             .render();
     } else {
@@ -67,22 +67,6 @@ function ImageEditor(canvasId, args) {
         return typeof value === 'undefined' ? defaultValue : value;
     };
 
-    /**
-     * @return {String}
-     */
-    this.get3dUrl = function () {
-        var cropData = _canvas.getImage().transformation.getData();
-        return this._url.replace(/\?h=\d+$/, '?') +
-            [
-                'h=313',
-                'canvas[edge]=' + cropData.edge,
-                'crop[w]=' + cropData.width,
-                'crop[h]=' + cropData.height,
-                'crop[x]=' + cropData.x,
-                'crop[y]=' + cropData.y,
-            ].join('&');
-    };
-
     /**
      * @param  {Number|String} url
      * @param  {Function} callback
@@ -92,6 +76,7 @@ function ImageEditor(canvasId, args) {
         callback = typeof callback === 'function' ? callback : function () {};
         fabric.Image.fromURL(this._url = url, function (img) {
             _canvas.setImage(img);
+            img.__url = url;
             img.sendToBack();
             callback(img);
         });
@@ -108,16 +93,6 @@ function ImageEditor(canvasId, args) {
         return this;
     };
 
-    this.toggle3D = function (showAs3d) {
-        if (!showAs3d) {
-            return _canvas.get3dHandler().disable();
-        }
-
-        fabric.Image.fromURL(encodeURI(this.get3dUrl()), function (img) {
-            _canvas.get3dHandler().setImage(img);
-        });
-    };
-
     util.setProperties(this, {
         canvas: {
             get: function () {

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