112 lines
2.8 KiB
JavaScript
112 lines
2.8 KiB
JavaScript
'use strict';
|
|
var config = require('../config');
|
|
var util = require('../util');
|
|
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) {
|
|
this.callSuper('initialize', id, {
|
|
enableRetinaScaling: true,
|
|
renderOnAddRemove: false,
|
|
stateful: false,
|
|
backgroundColor: '#d4d4d4',
|
|
preserveObjectStacking: true,
|
|
selection: false,
|
|
width: 1253,
|
|
height: 600
|
|
});
|
|
|
|
this.on('mouse:up', function () {
|
|
if (this.getImage().__moved) {
|
|
this.getApertures().setTransparent(false);
|
|
|
|
// Trigger event to tell the image has been dragged.
|
|
$(document).trigger('PIE:dragged');
|
|
}
|
|
this.renderAll();
|
|
});
|
|
},
|
|
|
|
resize: function (args) {
|
|
this.setHeight(args.height);
|
|
this.setWidth(args.width);
|
|
this.renderAll();
|
|
},
|
|
|
|
get3dHandler: function () {
|
|
return this.__3dHandler ||
|
|
(this.__3dHandler = new ThreeDHandler(this));
|
|
},
|
|
|
|
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 (settings) {
|
|
if (!this.__buttonMenu) {
|
|
var defaults = config.buttonMenu[this.__type];
|
|
this.__buttonMenu = new ButtonMenu(this, $.extend({}, defaults, settings));
|
|
}
|
|
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;
|