136 lines
4.3 KiB
JavaScript
136 lines
4.3 KiB
JavaScript
'use strict';
|
|
|
|
var Canvas = require('./Canvas');
|
|
var util = require('./util');
|
|
|
|
function ImageEditor(canvasId, args) {
|
|
var _canvas;
|
|
|
|
var _settings = $.extend({
|
|
// Type defaults to wallpaper
|
|
type: 'wallpaper',
|
|
// Default texts on the buttons
|
|
buttons: {
|
|
flat: 'Flat',
|
|
threeD: '3d',
|
|
showMurals: 'Show Murals Panel',
|
|
hideMurals: 'Hide Murals Panel',
|
|
showRulers: 'Show Ruler',
|
|
hideRulers: 'Hide Ruler',
|
|
showFullscreen: 'Fullscreen',
|
|
hideFullscreen: 'Exit Fullscreen',
|
|
}
|
|
}, 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
|
|
});
|
|
|
|
// Adding buttons to the canvas depending on which type is active.
|
|
// It might be better that this resides somewhere else, either in Canvas or
|
|
// during the initialization of the image editor.
|
|
if (_canvas.__type === 'canvas') {
|
|
_canvas.getButtonMenu()
|
|
.addItem('flat', _settings.buttons.flat, function () {
|
|
_canvas.toggle3D(false);
|
|
}, true)
|
|
.addItem('3d', _settings.buttons.threeD, function () {
|
|
_canvas.toggle3D(true);
|
|
})
|
|
.render();
|
|
} else {
|
|
_canvas.getButtonMenu()
|
|
.addItem('toggleMurals', [_settings.buttons.showMurals, _settings.buttons.hideMurals], function () {
|
|
_canvas.getViewport().getGores().enable(this.isActive());
|
|
})
|
|
.addItem('toggleRulers', [_settings.buttons.showRulers, _settings.buttons.hideRulers], function () {
|
|
_canvas.getViewport().getRulers().enable(this.isActive());
|
|
})
|
|
.addItem('toggleFullscreen', [_settings.buttons.showFullscreen, _settings.buttons.hideFullscreen], function () {
|
|
util.toggleFullscreen(_canvas.getSelectionElement().parentNode);
|
|
})
|
|
.render();
|
|
}
|
|
|
|
// Binding fullscreen change event to the image-editor wrapper. This way we can set the correct button active.
|
|
$(_canvas.getSelectionElement().parentNode).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
|
|
var isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
|
|
|
|
if (isFullscreen) {
|
|
return;
|
|
}
|
|
|
|
_canvas.getButtonMenu().getItems().forEach(function(button) {
|
|
if (button.getId() === 'toggleFullscreen') {
|
|
button.setActive(false);
|
|
}
|
|
});
|
|
});
|
|
|
|
/**
|
|
* Crops image to desired dimensions
|
|
* @param {int} width [description]
|
|
* @param {int} height [description]
|
|
* @param {string} units cm|inch
|
|
* @return {ImageEditor}
|
|
*/
|
|
this.crop = function (width, height, units) {
|
|
_canvas.getImage().__cropped = false;
|
|
_canvas.getImageData().removeCropData();
|
|
_canvas.getViewport().set(width, height, units);
|
|
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;
|
|
};
|
|
|
|
/**
|
|
* Loads the image into the canvas.
|
|
* @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.__url = url;
|
|
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;
|
|
};
|
|
|
|
util.setProperties(this, {
|
|
canvas: {
|
|
get: function () {
|
|
return _canvas;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
module.exports = ImageEditor;
|