Files
image-editor/src/js/components/ImageEditor/Canvas.js
T

94 lines
2.3 KiB
JavaScript

'use strict';
var util = require('../util');
var ApertureHandler = require('./ApertureHandler');
var ButtonMenu = require('./ButtonMenu');
var DragbarHandler = require('./DragbarHandler');
var Viewport = require('./Viewport');
var Canvas = fabric.util.createClass(fabric.Canvas, {
initialize: function (id) {
this.callSuper('initialize', id, {
enableRetinaScaling: true,
renderOnAddRemove: false,
stateful: false,
backgroundColor: '#d4d4d4',
preserveObjectStacking: true,
selection: false,
});
this.on('mouse:up', function () {
if (this.getImage().__moved) {
this.getApertures().setTransparent(false);
}
$(this.upperCanvasEl).css('cursor', 'default');
this.renderAll();
});
},
getApertures: function () {
return this.__aperturehandler ||
(this.__aperturehandler = new ApertureHandler(this));
},
/**
*
* @returns {DragbarHandler}
*/
getDragbars: function () {
return this.__dragbars ||
(this.__dragbars = new DragbarHandler(this));
},
/**
* @return {fabric.Image}
*/
getImage: function () {
return this.__image;
},
/**
* @return {Viewport}
*/
getViewport: function () {
return this.__viewport ||
(this.__viewport = new Viewport(this));
},
/**
* Gets the menu for this instance
* @returns {ButtonMenu}
*/
getButtonMenu: function () {
if (!this.__buttonMenu) {
this.__buttonMenu = new ButtonMenu(this);
}
return this.__buttonMenu;
},
/**
* @return {Canvas}
*/
removeImage: function () {
if (!this.__image) {
return this;
}
return this.remove(this.__image);
},
/**
* @param {fabric.Image} img
* @return {Canvas}
*/
setImage: function (img) {
this.removeImage();
this.__image = img;
this.__image.addTo(this).center().on('mousedown', function () {
img.canvas.getApertures().setTransparent(true);
}).setCoords();
this.getViewport().reset();
return this;
}
});
module.exports = Canvas;