Prepare for 3D image

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

@@ -0,0 +1,51 @@
+'use strict';
+
+function ThreeDHandler(canvas) {
+    var _overlay = new fabric.Group();
+    var _image;
+    var self = this;
+
+    function init() {
+        _overlay.addWithUpdate(new fabric.Rect({
+            width: canvas.width,
+            height: canvas.height - 60,
+            top: 60,
+            left: 0,
+            fill: canvas.backgroundColor,
+        }));
+        canvas.add(_overlay);
+    }
+
+    init();
+
+    this.disable = function () {
+        canvas.remove(_overlay);
+        canvas.renderAll();
+        return this;
+    };
+
+    this.enable = function () {
+        if (!_overlay.canvas) {
+            canvas.add(_overlay);
+        }
+        canvas.renderAll();
+        return this;
+    };
+
+    this.setImage = function (img) {
+        this.enable();
+        img.set({
+            originX: 'center',
+            originY: 'center',
+        });
+
+        _overlay
+            .remove(_image)
+            .add(_image = img);
+
+        return this;
+    };
+
+}
+
+module.exports = ThreeDHandler;

src/js/components/ImageEditor/Canvas.js

@@ -5,6 +5,7 @@ var ApertureHandler = require('./ApertureHandler');
 var ButtonMenu = require('./ButtonMenu');
 var DragbarHandler = require('./DragbarHandler');
 var Viewport = require('./Viewport');
+var ThreeDHandler = require('./3dHandler');
 
 var Canvas = fabric.util.createClass(fabric.Canvas, {
     initialize: function (id) {
@@ -30,6 +31,11 @@ var Canvas = fabric.util.createClass(fabric.Canvas, {
         });
     },
 
+    get3dHandler: function () {
+      return this.__3dHandler ||
+          (this.__3dHandler = new ThreeDHandler(this));
+    },
+
     getApertures: function () {
         return this.__aperturehandler ||
             (this.__aperturehandler = new ApertureHandler(this));

src/js/components/ImageEditor/ImageEditor.js

@@ -6,6 +6,7 @@ var config = require('../config');
 
 function ImageEditor(canvasId, args) {
     var _canvas;
+    var self = this;
 
     var _settings = $.extend({
         'type': 'wallpaper'
@@ -25,8 +26,12 @@ function ImageEditor(canvasId, args) {
      */
     if (_canvas.__type === 'canvas') {
         _canvas.getButtonMenu()
-            .addItem('3D', function () {})
-            .addItem('Flat', function () {}, true)
+            .addItem('3D', function () {
+                self.toggle3D(true);
+            })
+            .addItem('Flat', function () {
+                self.toggle3D(false);
+            })
             .render();
     } else {
         _canvas.getButtonMenu()
@@ -63,6 +68,22 @@ 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
@@ -70,8 +91,9 @@ function ImageEditor(canvasId, args) {
      */
     this.loadImage = function (url, callback) {
         callback = typeof callback === 'function' ? callback : function () {};
-        fabric.Image.fromURL(url, function (img) {
+        fabric.Image.fromURL(this._url = url, function (img) {
             _canvas.setImage(img);
+            img.sendToBack();
             callback(img);
         });
         return this;
@@ -87,6 +109,16 @@ function ImageEditor(canvasId, args) {
         return this;
     };
 
+    this.toggle3D = function (showAs3d) {
+        if (!showAs3d) {
+            return this.loadImage(this._url);
+        }
+
+        fabric.Image.fromURL(this.get3dUrl(), function (img) {
+            _canvas.get3dHandler().setImage(img);
+        });
+    };
+
     util.setProperties(this, {
         canvas: {
             get: function () {