132 lines
3.6 KiB
JavaScript
132 lines
3.6 KiB
JavaScript
'use strict';
|
|
|
|
var Canvas = require('./Canvas');
|
|
var util = require('../util');
|
|
var config = require('../config');
|
|
|
|
function ImageEditor(canvasId, args) {
|
|
var _canvas;
|
|
var self = this;
|
|
|
|
var _settings = $.extend({
|
|
'type': 'wallpaper'
|
|
}, args);
|
|
|
|
// Initialize canvas
|
|
_canvas = new Canvas(canvasId);
|
|
// Let Canvas know which type it is, canvas or wallpaper since it is
|
|
// accessible for all objects contained within.
|
|
_canvas.set({
|
|
__type: _settings.type
|
|
});
|
|
|
|
/**
|
|
* @TODO: Refactor this. Since Canvas knows the type of editor it probably
|
|
* better could reside there.
|
|
*/
|
|
if (_canvas.__type === 'canvas') {
|
|
_canvas.getButtonMenu()
|
|
.addItem('3D', function () {
|
|
self.toggle3D(true);
|
|
})
|
|
.addItem('Flat', function () {
|
|
self.toggle3D(false);
|
|
})
|
|
.render();
|
|
} else {
|
|
_canvas.getButtonMenu()
|
|
.addItem(['Show Murals Panel', 'Hide Murals Panel'], function () {
|
|
_canvas.getViewport().getGores().enable(this.isActive());
|
|
})
|
|
.addItem(['Show Ruler', 'Hide Ruler'], function () {
|
|
_canvas.getViewport().getRulers().enable(this.isActive());
|
|
})
|
|
.addItem(['Fullscreen', 'Exit Fullscreen'], function () {
|
|
util.toggleFullscreen(_canvas.getSelectionElement().parentNode);
|
|
})
|
|
.render();
|
|
}
|
|
|
|
/**
|
|
* Crops image to desired dimensions
|
|
* @param {int} width [description]
|
|
* @param {int} height [description]
|
|
* @return {ImageEditor}
|
|
*/
|
|
this.crop = function (width, height) {
|
|
_canvas.getViewport().set(width, height);
|
|
return this;
|
|
};
|
|
|
|
/**
|
|
* @param {string|object} key
|
|
* @param {object} defaultValue
|
|
* @return {object}
|
|
*/
|
|
this.get = function (key, defaultValue) {
|
|
var value = _settings[key];
|
|
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
|
|
* @return {ImageEditor}
|
|
*/
|
|
this.loadImage = function (url, callback) {
|
|
callback = typeof callback === 'function' ? callback : function () {};
|
|
fabric.Image.fromURL(this._url = url, function (img) {
|
|
_canvas.setImage(img);
|
|
img.sendToBack();
|
|
callback(img);
|
|
});
|
|
return this;
|
|
};
|
|
|
|
/**
|
|
* @param {string|object} key
|
|
* @param {object} value
|
|
* @return {ImageEditor}
|
|
*/
|
|
this.set = function (key, value) {
|
|
$.extend(_settings, util.assertKeyValuePair(key, value));
|
|
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 () {
|
|
return _canvas;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
module.exports = ImageEditor;
|