diff --git a/src/js/components/ImageEditor/3dHandler.js b/src/js/components/ImageEditor/3dHandler.js new file mode 100644 index 0000000..7f5ba88 --- /dev/null +++ b/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; diff --git a/src/js/components/ImageEditor/Canvas.js b/src/js/components/ImageEditor/Canvas.js index fb85195..793103e 100644 --- a/src/js/components/ImageEditor/Canvas.js +++ b/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)); diff --git a/src/js/components/ImageEditor/ImageEditor.js b/src/js/components/ImageEditor/ImageEditor.js index 252ccba..363bdfb 100644 --- a/src/js/components/ImageEditor/ImageEditor.js +++ b/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 () {