163 lines
4.2 KiB
JavaScript
163 lines
4.2 KiB
JavaScript
'use strict';
|
|
|
|
var FrameHandler = require('./FrameHandler');
|
|
var GoreHandler = require('./GoreHandler');
|
|
var RulerHandler = require('./RulerHandler');
|
|
var util = require('../util');
|
|
|
|
function Viewport(canvas) {
|
|
var _beams = [];
|
|
var _borderWidth = 2;
|
|
var _data = null;
|
|
var _rect;
|
|
var self = this;
|
|
|
|
/**
|
|
* Applies viewport to page
|
|
*/
|
|
function apply() {
|
|
canvas.remove(_rect);
|
|
|
|
_rect = new fabric.Rect({
|
|
evented: false,
|
|
fill: 'transparent',
|
|
width: _data.width,
|
|
height: _data.height,
|
|
stroke: '#fff',
|
|
strokeWidth: canvas.__type === 'canvas' ? 0 : _borderWidth
|
|
});
|
|
|
|
_rect.width += _borderWidth;
|
|
_rect.height += _borderWidth;
|
|
_rect.addTo(canvas).center().setCoords();
|
|
|
|
canvas.getImage()
|
|
.center()
|
|
.drag.enable(calcMinMaxBoundsForRect(_rect.getInsideBoundingRect(), canvas.getImage()));
|
|
canvas.getApertures().apply(_data.axis, _rect.getBoundingRect());
|
|
|
|
if (canvas.__type !== 'canvas') {
|
|
drawBeams();
|
|
} else {
|
|
// drawFrames
|
|
}
|
|
|
|
canvas.getDragbars().apply();
|
|
self.setFrame();
|
|
// Apertures sometimes overlaps the viewports bounding rect.
|
|
// Solve this by bringing it to the front after apertures are applied.
|
|
_rect.bringToFront();
|
|
}
|
|
|
|
|
|
/**
|
|
* Render the diagonal lines from viewport to edge of the canvas
|
|
*/
|
|
function drawBeams() {
|
|
_beams.forEach(function (o) {
|
|
canvas.remove(o);
|
|
});
|
|
|
|
_beams = [];
|
|
|
|
// TOP LEFT
|
|
_beams.push(new fabric.Line(
|
|
[_rect.left, _rect.top, _rect.left - _rect.top, -1], {
|
|
stroke: '#fff',
|
|
strokeWidth: 2,
|
|
}
|
|
));
|
|
|
|
// TOP RIGHT
|
|
_beams.push(_beams[0].clone().set({ flipX: true, left: _rect.left + _rect.width }));
|
|
// BOTTOM RIGHT
|
|
_beams.push(_beams[1].clone().set({ flipY: true, top: _rect.top + _rect.height }));
|
|
// BOTTOM LEFT
|
|
_beams.push(_beams[0].clone().set({ flipY: true, top: _rect.top + _rect.height }));
|
|
|
|
_beams.forEach(function (o) {
|
|
canvas.add(o);
|
|
o.bringToFront();
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Gets an object with min / max values for each axis, based on the bounds
|
|
* of passed fabric.Rect
|
|
* @param {fabric.Rect} rect
|
|
* @return {Object}
|
|
*/
|
|
function calcMinMaxBoundsForRect(rect, img) {
|
|
return {
|
|
left: {
|
|
min: rect.left + rect.width - img.width,
|
|
max: rect.left
|
|
},
|
|
top: {
|
|
min: rect.top + rect.height - img.height,
|
|
max: rect.top
|
|
}
|
|
};
|
|
}
|
|
|
|
this.canvas = canvas;
|
|
|
|
this.getBounds = function () {
|
|
return _rect.getInsideBoundingRect();
|
|
};
|
|
|
|
/**
|
|
* @return {Viewport}
|
|
*/
|
|
this.reset = function () {
|
|
if (_data) {
|
|
return this.set(_data.dim.width, _data.dim.height);
|
|
}
|
|
return this;
|
|
};
|
|
|
|
/**
|
|
* @param {Number} width
|
|
* @param {Number} height
|
|
* @return {Viewport}
|
|
*/
|
|
this.set = function (width, height) {
|
|
_data = util.calcCrop(canvas.getImage(), width, height);
|
|
apply();
|
|
this.getGores().reset();
|
|
this.getRulers().reset();
|
|
canvas.getApertures().setTransparent(true);
|
|
canvas.getImage().__moved = false;
|
|
canvas.getButtonMenu().bringToFront();
|
|
};
|
|
|
|
/**
|
|
* @param {string} frameType white|black|image|none
|
|
* @return {Viewport}
|
|
*/
|
|
this.setFrame = function (frameType) {
|
|
this.getFrameHandler().setFrames(frameType);
|
|
};
|
|
|
|
this.getData = function () {
|
|
return _data;
|
|
};
|
|
|
|
var _frameHandler = null;
|
|
|
|
this.getFrameHandler = function () {
|
|
return _frameHandler || (_frameHandler = new FrameHandler(this));
|
|
};
|
|
|
|
this.getGores = function () {
|
|
return this.__goreHandler || (this.__goreHandler = new GoreHandler(this));
|
|
};
|
|
|
|
this.getRulers = function () {
|
|
return this.__rulerHandler || (this.__rulerHandler = new RulerHandler(this));
|
|
};
|
|
|
|
}
|
|
|
|
module.exports = Viewport;
|