109 lines
2.5 KiB
JavaScript
109 lines
2.5 KiB
JavaScript
'use strict';
|
|
/* globals fabric */
|
|
|
|
/**
|
|
* Handles 3d image of canvas products.
|
|
* @param {canvas} canvas
|
|
*/
|
|
function ThreeDHandler(canvas) {
|
|
var _overlay = new fabric.Group();
|
|
var _image;
|
|
|
|
function init() {
|
|
_overlay
|
|
.set({
|
|
visible: false,
|
|
left: 0
|
|
})
|
|
.addWithUpdate(new fabric.Rect({
|
|
// Width is made bigger as this works better with resizing the editor
|
|
width: canvas.width * 2,
|
|
height: canvas.height,
|
|
top: 0,
|
|
left: 0,
|
|
fill: canvas.backgroundColor,
|
|
}));
|
|
|
|
canvas.add(_overlay);
|
|
}
|
|
|
|
init();
|
|
|
|
/**
|
|
* Disables the 3d image by removing visibility
|
|
* @return {ThreeDHandler}
|
|
*/
|
|
this.disable = function () {
|
|
_overlay.setVisible(false).canvas.resize();
|
|
return this;
|
|
};
|
|
|
|
/**
|
|
* Enables the 3d image by setting the width and visibility of the overlay and moving elements which
|
|
* needs to be visible to the front.
|
|
* @return {ThreeDHandler}
|
|
*/
|
|
this.enable = function () {
|
|
_overlay
|
|
.set({
|
|
width: canvas.width,
|
|
visible: true
|
|
}).bringToFront();
|
|
|
|
canvas.getButtonMenu().bringToFront();
|
|
canvas.renderAll();
|
|
return this;
|
|
};
|
|
|
|
/**
|
|
* Checks if 3d mode is enabled/visible.
|
|
* @returns {boolean}
|
|
*/
|
|
this.isEnabled = function () {
|
|
return _overlay.visible;
|
|
};
|
|
|
|
/**
|
|
* Refreshes the image. This is mostly done upon resize of the window
|
|
*/
|
|
this.refreshImage = function() {
|
|
_overlay.set({
|
|
width: canvas.width,
|
|
});
|
|
|
|
this.applyImage();
|
|
};
|
|
|
|
/**
|
|
* (Re)adds the new/existing image with new configuration to the overlay.
|
|
* @param {img}
|
|
*/
|
|
this.applyImage = function(img) {
|
|
img = img || _image;
|
|
|
|
_overlay
|
|
.remove(_image)
|
|
.add(_image = canvas.getResizedImage(img));
|
|
};
|
|
|
|
/**
|
|
* Sets the image and enables 3d mode.
|
|
* @param {img}
|
|
* @return {ThreeDHandler}
|
|
*/
|
|
this.setImage = function (img) {
|
|
img.set({
|
|
// Image should be about 20px lower than the center (because of the buttons)
|
|
top: 20,
|
|
originX: 'center',
|
|
originY: 'center',
|
|
});
|
|
|
|
this.applyImage(img);
|
|
return this.enable();
|
|
};
|
|
|
|
}
|
|
|
|
module.exports = ThreeDHandler;
|