2458 lines
66 KiB
JavaScript
2458 lines
66 KiB
JavaScript
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
|
|
'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;
|
|
|
|
},{}],2:[function(require,module,exports){
|
|
'use strict';
|
|
/* globals fabric */
|
|
|
|
/**
|
|
* ApertureHandler takes care of the bars around the image to show what area has been/will be cropped.
|
|
* @param {canvas} canvas
|
|
*/
|
|
function ApertureHandler(canvas) {
|
|
var _items = {x: [], y: []};
|
|
|
|
function init() {
|
|
var bounds = canvas;
|
|
var xRect = new fabric.Rect({
|
|
width: bounds.width,
|
|
height: bounds.height / 2,
|
|
fill: canvas.backgroundColor,
|
|
opacity: 0.7,
|
|
});
|
|
|
|
var yRect = xRect.clone().set({
|
|
width: bounds.width / 2,
|
|
height: bounds.height
|
|
});
|
|
|
|
_items.x = [].concat([xRect, xRect.clone()]);
|
|
_items.y= [].concat([yRect, yRect.clone()]);
|
|
|
|
[].concat(_items.x, _items.y).forEach(function (o) {
|
|
canvas.add(o);
|
|
});
|
|
canvas.renderAll();
|
|
}
|
|
init();
|
|
|
|
/**
|
|
* Applies configuration to the apertures apertures on the viewport
|
|
* @param {string} axis
|
|
* @param {viewport} viewport
|
|
*/
|
|
this.apply = function (axis, viewport) {
|
|
this.getApertures(axis).forEach(function (o) {
|
|
o.visible = false;
|
|
});
|
|
|
|
var active = this.getApertures(axis === 'x' ? 'y' : 'x');
|
|
|
|
active.forEach(function (o) {
|
|
o.visible = true;
|
|
});
|
|
|
|
active[0].width= active[1].width = canvas.width;
|
|
active[0].height = active[1].height = canvas.height;
|
|
|
|
if (axis === 'y') {
|
|
active[0].top = viewport.top - active[0].height + 0.5;
|
|
active[1].top = viewport.top + viewport.height - 0.5;
|
|
} else {
|
|
active[0].left = viewport.left - active[0].width + 0.5;
|
|
active[1].left = viewport.left + viewport.width - 0.5;
|
|
}
|
|
|
|
this.getApertures().forEach(function (o) {
|
|
o.setCoords();
|
|
});
|
|
|
|
canvas.renderAll();
|
|
};
|
|
|
|
/**
|
|
* Gets the apertures on specified axis. If no axis is provided, both x and y are returned.
|
|
* @param {string} axis
|
|
* @returns {Array}
|
|
*/
|
|
this.getApertures = function (axis) {
|
|
return axis ? _items[axis] : [].concat(_items.x, _items.y);
|
|
};
|
|
|
|
/**
|
|
* Sets transparency of the apertures depending on the crop status
|
|
* @param {boolean} apply
|
|
* @returns {ApertureHandler}
|
|
*/
|
|
this.setTransparent = function (apply) {
|
|
this.getApertures().forEach(function (o) {
|
|
o.opacity = apply ? 0.7 : 1;
|
|
});
|
|
|
|
canvas.renderAll();
|
|
return this;
|
|
};
|
|
|
|
this.disable = function () {
|
|
this.getApertures().forEach(function (o) {
|
|
o.visible = false;
|
|
});
|
|
};
|
|
}
|
|
|
|
module.exports = ApertureHandler;
|
|
|
|
},{}],3:[function(require,module,exports){
|
|
'use strict';
|
|
|
|
var TextButton = require('./TextButton');
|
|
|
|
/**
|
|
* Creates the menu with text-buttons settings provided. Settings will override
|
|
* the defaults from the config files.
|
|
* @param {Object} canvas
|
|
* @param {Object=} settings
|
|
*/
|
|
function ButtonMenu(canvas, settings) {
|
|
var _textButtons = [];
|
|
var _width = 0;
|
|
|
|
/**
|
|
* Calculates the width of all contained items
|
|
* @return {Number}
|
|
*/
|
|
function setWidth() {
|
|
var startWidth = 0;
|
|
_textButtons.forEach(function(textButton) {
|
|
startWidth += textButton.width;
|
|
});
|
|
_width = startWidth += settings.margin * (_textButtons.length - 1);
|
|
}
|
|
|
|
/**
|
|
* Adds items to the button-menu.
|
|
* @param {String} text
|
|
* @param {Function} callback
|
|
* @return {ButtonMenu}
|
|
*/
|
|
this.addItem = function(id, text, callback, isActive) {
|
|
_textButtons.push(
|
|
new TextButton(id, text, settings, isActive)
|
|
.onClick(callback)
|
|
.set({__group: this})
|
|
);
|
|
|
|
return this;
|
|
};
|
|
|
|
/**
|
|
* Brings the buttons to the front inside the canvas
|
|
* @return {ButtonMenu}
|
|
*/
|
|
this.bringToFront = function() {
|
|
_textButtons.forEach(function(textButton) {
|
|
textButton.bringToFront();
|
|
});
|
|
return this;
|
|
};
|
|
|
|
/**
|
|
* Gets all buttons inside the menu.
|
|
* @return {Array}
|
|
*/
|
|
this.getItems = function() {
|
|
return _textButtons;
|
|
};
|
|
|
|
/**
|
|
* Gets the full width of the buttonMenu.
|
|
* @return {Number}
|
|
*/
|
|
this.getWidth = function() {
|
|
return _width;
|
|
};
|
|
|
|
/**
|
|
* Sets the button with id=buttonId to active/not active mode
|
|
*/
|
|
this.setButtonActive = function(buttonId, isActive) {
|
|
_textButtons.forEach(function (button) {
|
|
if (button.getId() === buttonId) {
|
|
button.setActive(isActive);
|
|
}
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Sets the button with id=buttonId to disabled/enabled mode
|
|
*/
|
|
this.setButtonDisabled = function(buttonId, isDisabled) {
|
|
_textButtons.forEach(function (button) {
|
|
if (button.getId() === buttonId) {
|
|
button.setDisabled(isDisabled);
|
|
}
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Hides the buttons
|
|
*/
|
|
this.hide = function() {
|
|
_textButtons.forEach(function(textButton) {
|
|
textButton.set({
|
|
opacity: 0,
|
|
disabled: true
|
|
});
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Shows all the buttons
|
|
*/
|
|
this.show = function() {
|
|
_textButtons.forEach(function(textButton) {
|
|
textButton.set({
|
|
opacity: 1,
|
|
disabled: false
|
|
});
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Recalculate boundaries and add all items to canvas if required
|
|
* @return {ButtonMenu}
|
|
*/
|
|
this.render = function() {
|
|
setWidth();
|
|
|
|
var start = canvas.width / 2 - this.getWidth() / 2;
|
|
var currPos = Math.round(start);
|
|
|
|
_textButtons.forEach(function(textButton) {
|
|
textButton
|
|
.set({
|
|
top: 10,
|
|
left: currPos
|
|
})
|
|
.setCoords();
|
|
|
|
if (!textButton.canvas) {
|
|
textButton.addTo(canvas);
|
|
}
|
|
currPos += Math.round(textButton.width + settings.margin);
|
|
|
|
// Disable moving of text-buttons
|
|
textButton.lockMovementX = textButton.lockMovementY = true;
|
|
});
|
|
|
|
canvas.renderAll();
|
|
|
|
this.show();
|
|
|
|
return this;
|
|
};
|
|
}
|
|
|
|
module.exports = ButtonMenu;
|
|
|
|
},{"./TextButton":14}],4:[function(require,module,exports){
|
|
'use strict';
|
|
/* globals $, fabric */
|
|
|
|
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 MirrorHandler = require('./MirrorHandler');
|
|
var ImageDataHandler = require('./ImageDataHandler');
|
|
|
|
var $document = $(document);
|
|
|
|
/**
|
|
* Canvas is using fabric to create the canvas and initiate it with its initial settings.
|
|
* It is also here most of the interaction is taking place. And most files are connected to this file.
|
|
* Fe. getDragbars method can be called from most places as the Canvas class is available in most places.
|
|
*/
|
|
var Canvas = fabric.util.createClass(fabric.Canvas, {
|
|
initialize: function (id, dimensions) {
|
|
this.callSuper('initialize', id, {
|
|
enableRetinaScaling: true,
|
|
renderOnAddRemove: false,
|
|
// Allow touch scrolling on touch-devices larger than mobile screen sizes.
|
|
allowTouchScrolling: !util.isMobile(),
|
|
stateful: false,
|
|
backgroundColor: '#ededed',
|
|
preserveObjectStacking: true,
|
|
selection: false,
|
|
width: dimensions.width,
|
|
height: dimensions.height
|
|
});
|
|
},
|
|
|
|
resize: function (args) {
|
|
args = args || { height: this.height, width: this.width};
|
|
if (!args.width || !args.height) {
|
|
return;
|
|
}
|
|
|
|
this.setHeight(args.height);
|
|
this.setWidth(args.width);
|
|
this.getButtonMenu().render();
|
|
if (this.get3dHandler().isEnabled()) {
|
|
this.get3dHandler().refreshImage();
|
|
} else {
|
|
this.refreshImage(this.getResizedImage(this.getImage()));
|
|
this.getViewport().reset();
|
|
}
|
|
this.sendToBack(this.getImage());
|
|
this.getImage().center();
|
|
this.getDragbars().resetPosition();
|
|
this.renderAll();
|
|
},
|
|
|
|
disableScroll: function() {
|
|
this.set({
|
|
allowTouchScrolling: false
|
|
});
|
|
return this;
|
|
},
|
|
|
|
enableScroll: function() {
|
|
this.set({
|
|
allowTouchScrolling: true
|
|
});
|
|
return this;
|
|
},
|
|
|
|
get3dHandler: function () {
|
|
return this.__3dHandler ||
|
|
(this.__3dHandler = new ThreeDHandler(this));
|
|
},
|
|
|
|
/**
|
|
* @return {String}
|
|
*/
|
|
get3dUrl: function () {
|
|
var imageData = this.getImageData().getData();
|
|
var params = [
|
|
'h=400',
|
|
'canvas[edge]=' + imageData.edge,
|
|
'crop[w]=' + imageData.width,
|
|
'crop[h]=' + imageData.height,
|
|
'crop[x]=' + imageData.x,
|
|
'crop[y]=' + imageData.y,
|
|
];
|
|
|
|
if (imageData.mirrored) {
|
|
params.push('mirror=1');
|
|
}
|
|
|
|
return this.getImage().__url.replace(/\?h=\d+$/, '?') + params.join('&');
|
|
},
|
|
|
|
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 {MirrorHandler}
|
|
*/
|
|
getMirror: function () {
|
|
return this.__mirror ||
|
|
(this.__mirror = new MirrorHandler(this.getImage()));
|
|
},
|
|
|
|
/**
|
|
* @return {MirrorHandler}
|
|
*/
|
|
getImageData: function () {
|
|
return this.__imageData ||
|
|
(this.__imageData = new ImageDataHandler(this.getImage()));
|
|
},
|
|
|
|
/**
|
|
* @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;
|
|
},
|
|
|
|
/**
|
|
* Reloads the 3D view, if it is present
|
|
* @return {Canvas}
|
|
*/
|
|
refresh3dView: function () {
|
|
if (this.get3dHandler().isEnabled()) {
|
|
this.toggle3D(true);
|
|
}
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* @return {Canvas}
|
|
*/
|
|
removeImage: function () {
|
|
if (!this.__image) {
|
|
return this;
|
|
}
|
|
this.__imageData = null;
|
|
return this.remove(this.__image);
|
|
},
|
|
|
|
refreshImage: function(img) {
|
|
this.__image = img;
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* @param {fabric.Image} img
|
|
* @return {Canvas}
|
|
*/
|
|
setImage: function (img) {
|
|
this.removeImage();
|
|
this.__image = img;
|
|
this.__image.__dragged = false;
|
|
this.__image.__cropped = false;
|
|
this.__image.addTo(this).center().on('mousedown', function () {
|
|
img.canvas.getApertures().setTransparent(true);
|
|
}).setCoords();
|
|
this.getViewport().reset();
|
|
return this;
|
|
},
|
|
|
|
getResizedImage: function(img) {
|
|
// Calculate maxHeight and maxWidth of the 3d image
|
|
// and scale the image accoring to those values
|
|
var maxHeight = this.getHeight() - 100;
|
|
var maxWidth = this.getWidth() - 100;
|
|
|
|
img.scaleToHeight(maxHeight < img.height ? maxHeight : img.height);
|
|
img.scaleToWidth(maxWidth < (img.width * img.scaleX) ? maxWidth : img.width * img.scaleX);
|
|
|
|
return img;
|
|
},
|
|
|
|
toggle3D: function (showAs3d) {
|
|
|
|
this.getButtonMenu().setButtonActive('toggle3d', showAs3d);
|
|
|
|
if (!showAs3d) {
|
|
return this.get3dHandler().disable();
|
|
}
|
|
|
|
$document.trigger('PIE:image-start-load');
|
|
|
|
$.ajax({
|
|
url: this.get3dUrl(),
|
|
crossDomain: true,
|
|
type: "HEAD",
|
|
cache: true,
|
|
}).done(function() {
|
|
fabric.Image.fromURL(encodeURI(this.get3dUrl()), function (img) {
|
|
if (!img._element) {
|
|
$document.trigger('PIE:image-error-load');
|
|
return;
|
|
}
|
|
|
|
this.get3dHandler().setImage(img);
|
|
$document.trigger('PIE:image-end-load');
|
|
}.bind(this));
|
|
}.bind(this));
|
|
},
|
|
});
|
|
|
|
module.exports = Canvas;
|
|
|
|
},{"./3dHandler":1,"./ApertureHandler":2,"./ButtonMenu":3,"./DragbarHandler":6,"./ImageDataHandler":10,"./MirrorHandler":12,"./Viewport":15,"./config":16,"./util":25}],5:[function(require,module,exports){
|
|
'use strict';
|
|
/* globals $, fabric */
|
|
|
|
var config = require('./config');
|
|
var util = require('./util');
|
|
|
|
var DragHandle = function (handler) {
|
|
var _currentAxis;
|
|
var _dragHandle;
|
|
var _clickHandle = false;
|
|
var _movedHandle;
|
|
|
|
// Event declarations
|
|
var events = {
|
|
mouseDown: function () {
|
|
if(handler.canvas.__type !== 'wallpaper') {
|
|
_dragHandle = true;
|
|
}
|
|
|
|
_clickHandle = true;
|
|
_currentAxis = this.axis;
|
|
handler.canvas.getImage().trigger('mousedown');
|
|
},
|
|
mouseUp: function () {
|
|
if (!_dragHandle && !_clickHandle) {
|
|
return;
|
|
}
|
|
|
|
if (_clickHandle) {
|
|
$(document).trigger('PIE:dragbar-click', { axis: _currentAxis });
|
|
_clickHandle = false;
|
|
}
|
|
|
|
_dragHandle = false;
|
|
_movedHandle = false;
|
|
_currentAxis = null;
|
|
util.MouseMetrics.deletePreviousMouseData();
|
|
handler.canvas.getImage().trigger('mouseup');
|
|
},
|
|
mouseMove: function (e) {
|
|
if (!_dragHandle) {
|
|
return;
|
|
}
|
|
|
|
//Android devices have different structure of TouchEvent so e.e.touches[0] element uses in this case
|
|
var pageX = (typeof e.e.pageX !== 'undefined' ? e.e.pageX : e.e.touches[0].pageX);
|
|
var pageY = (typeof e.e.pageY !== 'undefined' ? e.e.pageY : e.e.touches[0].pageY);
|
|
|
|
// We're using a polyfill to calculate moude/touch movement if the browser/device
|
|
// does not support movementX/movementY.
|
|
var previousMouseData = util.MouseMetrics.previousMouseData;
|
|
var movement = {
|
|
x: 'movementX' in e.e ? e.e.movementX : (previousMouseData.x ? pageX - previousMouseData.x : 0),
|
|
y: 'movementY' in e.e ? e.e.movementY : (previousMouseData.y ? pageY - previousMouseData.y : 0)
|
|
};
|
|
util.MouseMetrics.setPreviousMouseData({x: pageX, y: pageY});
|
|
_movedHandle = true;
|
|
|
|
if (_currentAxis === 'x') {
|
|
handler.canvas.getImage().left -= movement.x;
|
|
} else {
|
|
handler.canvas.getImage().top -= movement.y;
|
|
}
|
|
// Trigger moving for image, to stay within bounds
|
|
handler.canvas.getImage().setCoords().trigger('moving');
|
|
handler.canvas.renderAll();
|
|
}
|
|
};
|
|
|
|
function getRect(text, width) {
|
|
var txt = new fabric.Text(text, config.dragHandle.text);
|
|
var rect = new fabric.Rect($.extend({}, config.dragHandle.rect, {
|
|
width: width,
|
|
}));
|
|
|
|
return new fabric.Group([rect, txt]).set({
|
|
evented: false,
|
|
});
|
|
}
|
|
|
|
this.getCanvas = function () {
|
|
return handler.canvas;
|
|
};
|
|
|
|
this.getHandles = function () {
|
|
if (!this.__handles) {
|
|
return [];
|
|
}
|
|
|
|
return [].concat(this.__handles.x, this.__handles.y);
|
|
};
|
|
|
|
this.setHandlePosition = function() {
|
|
this.__handles.y.set({left: handler.getTracks().y.left}).setCoords();
|
|
this.__handles.x.set({top: handler.getTracks().x.top}).setCoords();
|
|
return this;
|
|
};
|
|
|
|
this.init = function () {
|
|
var viewportData = this.getCanvas().getViewport().getData();
|
|
var tracks = handler.getTracks();
|
|
|
|
if (this.__handles) {
|
|
this.getCanvas().remove(this.__handles.x);
|
|
this.getCanvas().remove(this.__handles.y);
|
|
}
|
|
|
|
this.__handles = {
|
|
x: getRect(viewportData.dim.width + ' ' + viewportData.dim.units, viewportData.width),
|
|
y: getRect(viewportData.dim.height + ' ' + viewportData.dim.units, viewportData.height)
|
|
};
|
|
|
|
this.__handles.x.addTo(this.getCanvas()).centerH().set({ top: tracks.x.top }).setCoords();
|
|
this.__handles.y.addTo(this.getCanvas())
|
|
.setAngle(-90)
|
|
.centerV().set({ left: tracks.y.left })
|
|
.setCoords();
|
|
|
|
this.getCanvas()
|
|
.on('mouse:move', events.mouseMove)
|
|
.on('mouse:up', events.mouseUp);
|
|
|
|
tracks.x.on('mousedown', events.mouseDown.bind(tracks.x));
|
|
tracks.y.on('mousedown', events.mouseDown.bind(tracks.y));
|
|
};
|
|
};
|
|
|
|
module.exports = DragHandle;
|
|
|
|
},{"./config":16,"./util":25}],6:[function(require,module,exports){
|
|
'use strict';
|
|
/* globals $, fabric */
|
|
|
|
var DragHandle = require('./DragHandle');
|
|
var config = require('./config');
|
|
|
|
function DragbarHandler(canvas) {
|
|
var _dragbars = {
|
|
x: null,
|
|
y: null
|
|
};
|
|
|
|
/**
|
|
* @return {DragbarHandler}
|
|
*/
|
|
this.apply = function () {
|
|
if (!canvas.__hasDragbars) {
|
|
this.init();
|
|
canvas.__hasDragbars = true;
|
|
}
|
|
this.sync();
|
|
|
|
if (!this.__handles) {
|
|
this.__handles = new DragHandle(this);
|
|
}
|
|
|
|
this.__handles.init();
|
|
|
|
this.bringToFront();
|
|
|
|
canvas.renderAll();
|
|
return this;
|
|
};
|
|
|
|
this.canvas = canvas;
|
|
|
|
this.bringToFront = function() {
|
|
[].concat(_dragbars.x, _dragbars.y).forEach(function (dragbar) {
|
|
dragbar.bringToFront();
|
|
});
|
|
|
|
this.__handles.getHandles().forEach(function (handle) {
|
|
handle.bringToFront();
|
|
});
|
|
};
|
|
/**
|
|
* Removes dragbars from canvas
|
|
*/
|
|
this.clear = function () {
|
|
canvas
|
|
.remove(_dragbars.x)
|
|
.remove(_dragbars.y)
|
|
.renderAll();
|
|
return this;
|
|
};
|
|
|
|
this.getTracks = function () {
|
|
return _dragbars;
|
|
};
|
|
|
|
this.resetPosition = function() {
|
|
if (!_dragbars.y || !_dragbars.x) {
|
|
return this;
|
|
}
|
|
|
|
_dragbars.y.set({
|
|
left: canvas.width - 30,
|
|
height: canvas.getImage().height * canvas.getImage().scaleY,
|
|
}).setCoords();
|
|
|
|
_dragbars.x.set({
|
|
top: canvas.height - 30,
|
|
width: canvas.getImage().width * canvas.getImage().scaleY,
|
|
}).setCoords();
|
|
|
|
this.__handles.setHandlePosition();
|
|
|
|
return this;
|
|
};
|
|
|
|
/**
|
|
* @return {DragbarHandler}
|
|
*/
|
|
this.init = function () {
|
|
this.clear();
|
|
var typeIsWallpaper = canvas.__type === 'wallpaper';
|
|
|
|
_dragbars.x = new fabric.Rect($.extend({}, config.dragBar, {
|
|
axis: 'x',
|
|
width: canvas.getImage().width * canvas.getImage().scaleY,
|
|
height: config.dragBar.size,
|
|
lockMovementY: true,
|
|
// Movement should also be disabled when the user is on wallpaper (repeating paterns)
|
|
lockMovementX: typeIsWallpaper,
|
|
selectable: true,
|
|
hoverCursor: typeIsWallpaper ? 'pointer' : 'ew-resize',
|
|
moveCursor: typeIsWallpaper ? 'pointer' : 'ew-resize',
|
|
}))
|
|
.addTo(canvas)
|
|
.centerH().set({ top: canvas.height - 30 }).setCoords();
|
|
|
|
_dragbars.y = new fabric.Rect($.extend({}, config.dragBar, {
|
|
axis: 'y',
|
|
width: config.dragBar.size,
|
|
height: canvas.getImage().height * canvas.getImage().scaleY,
|
|
lockMovementX: true,
|
|
// Movement should also be disabled when the user is on wallpaper (repeating paterns)
|
|
lockMovementY: typeIsWallpaper,
|
|
selectable: true,
|
|
hoverCursor: typeIsWallpaper ? 'pointer': 'ns-resize',
|
|
moveCursor: typeIsWallpaper ? 'pointer': 'ns-resize',
|
|
}))
|
|
.addTo(canvas)
|
|
.set({ left: canvas.width - 30 }).setCoords();
|
|
|
|
canvas.getImage().on('moving', this.sync);
|
|
|
|
return this;
|
|
};
|
|
|
|
/**
|
|
* @return {DragbarHandler}
|
|
*/
|
|
this.sync = function () {
|
|
_dragbars.x.set({left: canvas.getImage().left}).setCoords();
|
|
_dragbars.y.set({top: canvas.getImage().top}).setCoords();
|
|
return this;
|
|
};
|
|
}
|
|
|
|
module.exports = DragbarHandler;
|
|
|
|
},{"./DragHandle":5,"./config":16}],7:[function(require,module,exports){
|
|
'use strict';
|
|
/* globals $ */
|
|
var util = require('./util');
|
|
|
|
/**
|
|
* @param {fabric.Image} img
|
|
* @param {fabric.Rect} boundingRect
|
|
*/
|
|
function Draggable(img, boundingRect) {
|
|
var _bounds = boundingRect;
|
|
var _img = img;
|
|
|
|
/**
|
|
* Triggers when object is moved
|
|
*/
|
|
function onMove() {
|
|
/*jshint validthis: true */
|
|
if (!this.__dragging) {
|
|
//Trigger start-drag on first 'moving' trigger.
|
|
$(document).trigger('PIE:start-drag');
|
|
this.__dragging = true;
|
|
}
|
|
this.canvas.disableScroll();
|
|
|
|
util.setPositionInside(this, _bounds);
|
|
}
|
|
|
|
this.onMouseUp = function () {
|
|
if (this.__dragging) {
|
|
this.__dragged = true;
|
|
this.__dragging = false;
|
|
this.canvas.getImageData().setCropData();
|
|
if (!util.isMobile()) {
|
|
this.canvas.enableScroll();
|
|
}
|
|
// Trigger event to tell the image has been dragged.
|
|
$(document).trigger('PIE:dragged');
|
|
}
|
|
if (this.__dragged) {
|
|
// Always set aperture transparency to false even if image hasn't been dragged this click.
|
|
this.canvas.getApertures().setTransparent(false);
|
|
}
|
|
this.canvas.renderAll();
|
|
};
|
|
|
|
// Attach onMove event to image
|
|
_img.on('moving', onMove);
|
|
|
|
// Attach mouse up event to canvas, can't do mouse up events on canvas objects.
|
|
_img.canvas.on('mouse:up', this.onMouseUp.bind(_img));
|
|
|
|
/**
|
|
* @param {fabric.Rect} localBoundingRect
|
|
* @return {Draggable}
|
|
*/
|
|
this.enable = function (localBoundingRect) {
|
|
if (localBoundingRect) {
|
|
_bounds = localBoundingRect;
|
|
}
|
|
|
|
// @TODO Refactor this, see Viewport.calcMinMaxBoundsForRect
|
|
if (_img.canvas.getViewport().getData().axis === 'x') {
|
|
_bounds.top.min = _bounds.top.max = _img.top;
|
|
} else {
|
|
_bounds.left.min = _bounds.left.max = _img.left;
|
|
}
|
|
|
|
_img.lockMovementX = _img.lockMovementY = false;
|
|
_img.selectable = true;
|
|
_img.hoverCursor = 'move';
|
|
return this;
|
|
};
|
|
}
|
|
|
|
module.exports = Draggable;
|
|
|
|
},{"./util":25}],8:[function(require,module,exports){
|
|
'use strict';
|
|
/* globals fabric */
|
|
|
|
var config = require('./config');
|
|
|
|
function FrameHandler(viewport) {
|
|
var _frames;
|
|
var _frameType = viewport.canvas.__canvasFrameType;
|
|
|
|
function getFramesAsArray() {
|
|
return [
|
|
_frames.top, _frames.right, _frames.bottom, _frames.left
|
|
];
|
|
}
|
|
|
|
/**
|
|
* Sets the 4 rectangles which are used when current canvas should be framed
|
|
*/
|
|
function initFrames() {
|
|
var frame = new fabric.Rect(config.frames.default);
|
|
|
|
_frames = {
|
|
top: frame.clone(),
|
|
right: frame.clone(),
|
|
bottom: frame.clone(),
|
|
left: frame.clone()
|
|
};
|
|
|
|
getFramesAsArray().forEach(function (o) {
|
|
viewport.canvas.add(o);
|
|
});
|
|
}
|
|
|
|
function init() {
|
|
initFrames();
|
|
}
|
|
|
|
init();
|
|
|
|
/**
|
|
* @return {String}
|
|
*/
|
|
this.getFrameType = function () {
|
|
return _frameType;
|
|
};
|
|
|
|
this.setVisible = function (isVisible) {
|
|
isVisible = typeof isVisible === 'undefined' ? true : !!isVisible;
|
|
|
|
getFramesAsArray().forEach(function (frame) {
|
|
frame.set({ visible: isVisible });
|
|
});
|
|
|
|
viewport.canvas.renderAll();
|
|
|
|
return this;
|
|
};
|
|
|
|
/**
|
|
* Sets passed frametype to passed viewwport
|
|
* @param {string} frameType none|image|black|white
|
|
* @return {FrameHandler}
|
|
*/
|
|
this.setFrames = function (frameType) {
|
|
var bounds = viewport.getBounds();
|
|
|
|
frameType = frameType || _frameType || 'image';
|
|
_frameType = frameType;
|
|
|
|
if (!frameType) {
|
|
return;
|
|
}
|
|
|
|
if (frameType === 'none') {
|
|
return this.setVisible(false);
|
|
}
|
|
|
|
this.setVisible(true);
|
|
|
|
getFramesAsArray().forEach(function (o) {
|
|
o.set(config.frames[frameType]);
|
|
});
|
|
|
|
var vpData = viewport.getData();
|
|
var frameSize = 29;
|
|
if (vpData.dim.units === 'inch') {
|
|
frameSize /= 2.54;
|
|
}
|
|
|
|
_frames.top.height =
|
|
_frames.bottom.height =
|
|
_frames.right.width =
|
|
_frames.left.width = vpData.ppmm * frameSize * viewport.canvas.getImage().scaleX;
|
|
|
|
_frames.top.width = _frames.bottom.width = vpData.width;
|
|
_frames.right.height = _frames.left.height = vpData.height;
|
|
|
|
if (frameType === 'image') {
|
|
_frames.top.width -= (vpData.ppmm * frameSize * viewport.canvas.getImage().scaleX) * 2;
|
|
_frames.bottom.width = _frames.top.width;
|
|
_frames.right.height -= (vpData.ppmm * frameSize * viewport.canvas.getImage().scaleX) * 2;
|
|
_frames.left.height = _frames.right.height;
|
|
|
|
_frames.top.set({
|
|
top: bounds.top,
|
|
}).centerH().setCoords();
|
|
|
|
_frames.bottom.set({
|
|
top: (bounds.top + bounds.height - _frames.bottom.height) - 1
|
|
}).centerH().setCoords();
|
|
|
|
_frames.right.set({
|
|
left: (bounds.left + bounds.width - _frames.right.width) - 1
|
|
}).centerV().setCoords();
|
|
|
|
_frames.left.set({
|
|
left: bounds.left
|
|
}).centerV().setCoords();
|
|
} else {
|
|
_frames.top.set({
|
|
top: (bounds.top - _frames.top.height) + 1,
|
|
}).centerH().setCoords();
|
|
|
|
_frames.bottom.set({
|
|
top: (bounds.top + bounds.height) - 1,
|
|
}).centerH().setCoords();
|
|
|
|
_frames.right.set({
|
|
left: (bounds.left + bounds.width) - 1
|
|
}).centerV().setCoords();
|
|
|
|
_frames.left.set({
|
|
left: (bounds.left - _frames.left.width) + 1
|
|
}).centerV().setCoords();
|
|
}
|
|
|
|
viewport.canvas.renderAll();
|
|
|
|
return this;
|
|
};
|
|
}
|
|
|
|
module.exports = FrameHandler;
|
|
|
|
},{"./config":16}],9:[function(require,module,exports){
|
|
'use strict';
|
|
/* globals fabric */
|
|
|
|
function GoreHandler(viewport) {
|
|
var _enabled = false;
|
|
var _lines = [];
|
|
|
|
/**
|
|
* @return {fabric.Line}
|
|
*/
|
|
function getLine(left) {
|
|
return new fabric.Line([0, 0, 0, viewport.getData().height], {
|
|
evented: false,
|
|
strokeDashArray: [5, 5],
|
|
stroke: '#F31FB3',
|
|
strokeWidth: 1,
|
|
left: left,
|
|
top: viewport.getBounds().top
|
|
});
|
|
}
|
|
|
|
/**
|
|
* @return {GoreHandler}
|
|
*/
|
|
this.clear = function () {
|
|
_lines.forEach(function (line) {
|
|
viewport.canvas.remove(line);
|
|
});
|
|
_lines = [];
|
|
return this;
|
|
};
|
|
|
|
/**
|
|
* @param {Boolean} enabled
|
|
* @return {GoreHandler}
|
|
*/
|
|
this.enable = function (enabled) {
|
|
_enabled = enabled;
|
|
this.clear();
|
|
|
|
if (!_enabled) {
|
|
viewport.canvas.renderAll();
|
|
return this;
|
|
}
|
|
|
|
var viewportData = viewport.getData();
|
|
var bounds = viewport.getBounds();
|
|
var step = viewportData.ppmm * viewportData.image.scaleX * 450;
|
|
|
|
/*
|
|
* First round to 5 digits to fix pixel rounding issues when requested width is an even multiplier of 450mm.
|
|
* Could set precision higher but 5 decimals places should be enough, pixel rounding issues show somewhere
|
|
* around 15 decimals places.
|
|
* Then round up to get correct number of gores.
|
|
*/
|
|
var count = Math.ceil((bounds.width / step).toFixed(5));
|
|
|
|
for (var i = 1; i < count; i++) {
|
|
_lines.push(getLine(bounds.left + step * i));
|
|
}
|
|
|
|
_lines.forEach(function (o) {
|
|
viewport.canvas.add(o);
|
|
});
|
|
|
|
viewport.canvas.renderAll();
|
|
|
|
return this;
|
|
};
|
|
|
|
/**
|
|
* @return {GoreHandler}
|
|
*/
|
|
this.reset = function () {
|
|
return this.enable(_enabled);
|
|
};
|
|
}
|
|
|
|
module.exports = GoreHandler;
|
|
|
|
},{}],10:[function(require,module,exports){
|
|
'use strict';
|
|
/* globals $ */
|
|
|
|
function ImageDataHandler(img) {
|
|
|
|
var _cropData;
|
|
|
|
/**
|
|
* Gets information about how the cropped image is dragged
|
|
* @return {Object}
|
|
*/
|
|
this.getCropData = function () {
|
|
return _cropData;
|
|
};
|
|
|
|
this.setCropData = function() {
|
|
var viewportBounds = img.canvas.getViewport().getBounds();
|
|
if (!viewportBounds) {
|
|
return;
|
|
}
|
|
|
|
var dragAxis = img.canvas.getViewport().getData().axis;
|
|
|
|
var leftDiff = viewportBounds.left - img.left;
|
|
var topDiff = viewportBounds.top - img.top;
|
|
|
|
// Robustness measure to handle the extreme precision of shape positioning in canvas.
|
|
var countAsZeroLimit = 1e-5;
|
|
leftDiff = Math.abs(leftDiff) < countAsZeroLimit ? 0 : leftDiff;
|
|
topDiff = Math.abs(topDiff) < countAsZeroLimit ? 0 : topDiff;
|
|
|
|
_cropData = {
|
|
x: dragAxis === 'x' ? (leftDiff) / (img.width * img.scaleX) : 0,
|
|
y: dragAxis === 'y' ? (topDiff) / (img.height * img.scaleY) : 0,
|
|
viewportWidth: viewportBounds.width,
|
|
viewportHeight: viewportBounds.height,
|
|
};
|
|
};
|
|
|
|
this.removeCropData = function() {
|
|
_cropData = null;
|
|
};
|
|
|
|
/**
|
|
* Gets an object containing applied transformations for the Image and also
|
|
* how it is cropped and dragged.
|
|
* @return {Object}
|
|
*/
|
|
this.getData = function () {
|
|
var viewportData = img.canvas.getViewport().getData();
|
|
|
|
var returnValue = $.extend(
|
|
{},
|
|
{
|
|
mirrored: img.canvas.getMirror().getStatus(),
|
|
width: viewportData.dim.width,
|
|
height: viewportData.dim.height,
|
|
},
|
|
this.getCropData()
|
|
);
|
|
|
|
if (img.canvas.__type === 'canvas') {
|
|
var frameHandler = img.canvas.getViewport().getFrameHandler();
|
|
returnValue.edge = frameHandler.getFrameType();
|
|
returnValue.framed = returnValue.edge !== 'none';
|
|
}
|
|
|
|
return returnValue;
|
|
};
|
|
}
|
|
|
|
module.exports = ImageDataHandler;
|
|
|
|
},{}],11:[function(require,module,exports){
|
|
'use strict';
|
|
/* globals $, fabric */
|
|
|
|
var Canvas = require('./Canvas');
|
|
var util = require('./util');
|
|
|
|
function ImageEditor(canvasId, args) {
|
|
var _canvas;
|
|
|
|
var _settings = $.extend({
|
|
// Type defaults to wallpaper
|
|
type: 'wallpaper',
|
|
// canvasFrameType defaults to image on frame
|
|
canvasFrameType: 'image',
|
|
// Default texts on the buttons
|
|
texts: {
|
|
showThreeD: '3d',
|
|
hideThreeD: 'Flat',
|
|
showMurals: 'Show Murals Panel',
|
|
hideMurals: 'Hide Murals Panel',
|
|
showRulers: 'Show Ruler',
|
|
hideRulers: 'Hide Ruler',
|
|
showFullscreen: 'Fullscreen',
|
|
exitFullscreen: 'Exit Fullscreen',
|
|
cm: 'cm',
|
|
inch: 'inch'
|
|
},
|
|
// Default dimensions
|
|
dimensions: {
|
|
width: 800,
|
|
height: 600
|
|
},
|
|
// Default unit
|
|
unit: 'cm',
|
|
isVisibleFullscreenButton: true
|
|
}, args);
|
|
|
|
|
|
// Initialize canvas
|
|
_canvas = new Canvas(canvasId, _settings.dimensions);
|
|
|
|
// Let Canvas know which type it is, canvas or wallpaper since it is
|
|
// accessible for all objects contained within.
|
|
_canvas.set({
|
|
__type: _settings.type,
|
|
__texts: _settings.texts
|
|
});
|
|
|
|
// 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('toggle3d', [_settings.texts.showThreeD, _settings.texts.hideThreeD], function () {
|
|
_canvas.toggle3D(this.isActive());
|
|
});
|
|
_canvas.set({
|
|
__canvasFrameType: _settings.canvasFrameType
|
|
});
|
|
} else {
|
|
_canvas.getButtonMenu()
|
|
.addItem('toggleMurals', [_settings.texts.showMurals, _settings.texts.hideMurals], function () {
|
|
_canvas.getViewport().getGores().enable(this.isActive());
|
|
})
|
|
.addItem('toggleRulers', [_settings.texts.showRulers, _settings.texts.hideRulers], function () {
|
|
_canvas.getViewport().getRulers().enable(this.isActive());
|
|
});
|
|
}
|
|
|
|
if (util.supportsFullscreen() && _settings.isVisibleFullscreenButton) {
|
|
_canvas.getButtonMenu()
|
|
.addItem('toggleFullscreen', [_settings.texts.showFullscreen, _settings.texts.exitFullscreen], function () {
|
|
util.toggleFullscreen(_canvas.getSelectionElement().parentNode);
|
|
});
|
|
}
|
|
|
|
_canvas.getButtonMenu().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() {
|
|
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} unit cm|inch
|
|
* @return {ImageEditor}
|
|
*/
|
|
this.crop = function (width, height, unit, removeTransparency) {
|
|
removeTransparency = typeof removeTransparency !== 'undefined' ? removeTransparency : false;
|
|
|
|
if (!width || !height) {
|
|
return this;
|
|
}
|
|
|
|
unit = typeof unit !== 'undefined' ? unit : _settings.unit;
|
|
_canvas.getViewport().set(width, height, unit);
|
|
|
|
var shouldBeCropped = util.isAspectChanged(_canvas.getImage().width, _canvas.getImage().height, width, height);
|
|
if (shouldBeCropped) {
|
|
_canvas.getImage().__dragged = false;
|
|
_canvas.getImage().__cropped = true;
|
|
}
|
|
else {
|
|
_canvas.getImage().__cropped = false;
|
|
}
|
|
|
|
if (removeTransparency) {
|
|
_canvas.getApertures().setTransparent(false);
|
|
}
|
|
|
|
return this;
|
|
};
|
|
|
|
this.getCropRatio = function () {
|
|
var image = _canvas.getImage();
|
|
var cropData = _canvas.getImageData().getCropData();
|
|
if (!cropData) {
|
|
return false;
|
|
}
|
|
var scaledImageWidth = image.width * image.scaleX;
|
|
var scaledImageHeight = image.height * image.scaleY;
|
|
var ratioWidth = Math.round(cropData.viewportWidth / scaledImageWidth * 100) / 100;
|
|
var ratioHeight = Math.round(cropData.viewportHeight / scaledImageHeight * 100) / 100;
|
|
|
|
return {width: ratioWidth, height: ratioHeight};
|
|
};
|
|
|
|
/**
|
|
* @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.util.loadImage(this._url = url, function (obj) {
|
|
if(obj === null) {
|
|
throw new Error('Error loading ' + url);
|
|
}
|
|
var img = new fabric.Image(obj);
|
|
_canvas.setImage(img);
|
|
img.__url = url;
|
|
img.sendToBack();
|
|
callback(img);
|
|
}, { crossOrigin: 'anonymous' });
|
|
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;
|
|
|
|
},{"./Canvas":4,"./util":25}],12:[function(require,module,exports){
|
|
'use strict';
|
|
|
|
function MirrorHandler(img) {
|
|
|
|
var _mirrored = 0;
|
|
|
|
/**
|
|
* @param {Boolean} checked
|
|
* @return {MirrorHandler}
|
|
*/
|
|
this.set = function(checked) {
|
|
_mirrored = (img.flipX = checked) ? 1 : 0;
|
|
img.setCoords().canvas.renderAll();
|
|
|
|
return this;
|
|
};
|
|
|
|
this.getStatus = function() {
|
|
return _mirrored;
|
|
};
|
|
|
|
|
|
}
|
|
|
|
module.exports = MirrorHandler;
|
|
|
|
},{}],13:[function(require,module,exports){
|
|
'use strict';
|
|
/* globals fabric */
|
|
|
|
var util = require('./util');
|
|
var TextButton = require('./TextButton');
|
|
var config = require('./config');
|
|
|
|
function RulerHandler(viewport) {
|
|
var _enabled = false;
|
|
var _lines = { x: null, y: null };
|
|
var _rect = { x: null, y: null };
|
|
|
|
function updateRulerText(ruler) {
|
|
var axis = ruler.axis;
|
|
var bounds = viewport.getBounds();
|
|
var pos = util.assertBetween(ruler[axis], bounds.min[axis], bounds.max[axis]);
|
|
ruler.marker[axis] = ruler[axis] = pos;
|
|
var dim = (ruler[axis] - bounds[axis]) / (viewport.getData().ppmm * 10 * viewport.canvas.getImage().scaleX);
|
|
|
|
if (axis === 'top') {
|
|
dim = viewport.getData().dim.height - dim;
|
|
}
|
|
var units = viewport.getData().dim.units;
|
|
var value = Math.round(dim * 100) / 100;
|
|
if(units === 'cm') {
|
|
value = Math.round(value);
|
|
}
|
|
var label = viewport.canvas.__texts[units] || 'cm';
|
|
ruler.setText(value + ' ' + label);
|
|
}
|
|
|
|
var Event = {
|
|
/**
|
|
* Triggers when handlebar is moved
|
|
*/
|
|
onMove: function () {
|
|
updateRulerText(this);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* @return {fabric.Line}
|
|
*/
|
|
function getLine(axis) {
|
|
var bounds = viewport.getBounds();
|
|
return new fabric.Line([
|
|
0, 0,
|
|
axis === 'x' ? bounds.width : 0,
|
|
axis === 'y' ? bounds.height : 0
|
|
], {
|
|
evented: false,
|
|
strokeDashArray: [5, 5],
|
|
stroke: '#000',
|
|
strokeWidth: 1,
|
|
top: axis === 'x' ? bounds.top + bounds.height / 2 : bounds.top,
|
|
left: axis === 'y' ? bounds.left + bounds.width / 2 : bounds.left
|
|
});
|
|
}
|
|
|
|
/**
|
|
* @return {RulerHandler}
|
|
*/
|
|
this.clear = function () {
|
|
[].concat(_rect.x, _rect.y, _lines.x, _lines.y).forEach(function (o) {
|
|
viewport.canvas.remove(o);
|
|
});
|
|
return this;
|
|
};
|
|
|
|
/**
|
|
* @param {Boolean} enabled
|
|
* @return {RulerHandler}
|
|
*/
|
|
this.enable = function (enabled) {
|
|
var bounds = viewport.getBounds();
|
|
|
|
var keepPosition = (
|
|
enabled && (_enabled === enabled) &&
|
|
_lines.x && (Math.abs(_lines.x.width - bounds.width) < 1) &&
|
|
_lines.y && (Math.abs(_lines.y.height - bounds.height) < 1)
|
|
);
|
|
|
|
if (keepPosition) {
|
|
updateRulerText(_rect.x);
|
|
updateRulerText(_rect.y);
|
|
return this;
|
|
}
|
|
|
|
_enabled = enabled;
|
|
|
|
this.clear();
|
|
|
|
if (!_enabled) {
|
|
viewport.canvas.renderAll();
|
|
return this;
|
|
}
|
|
|
|
_lines = { x: getLine('x'), y: getLine('y') };
|
|
|
|
viewport.canvas.add(_lines.x);
|
|
viewport.canvas.add(_lines.y);
|
|
|
|
_rect.x = new TextButton('horizontalRuler', 'H', config.rulerHandle, true)
|
|
.set(config.rulerHandle.x(_lines, bounds))
|
|
.addTo(viewport.canvas)
|
|
.on('moving', Event.onMove)
|
|
.trigger('moving');
|
|
|
|
_rect.y = new TextButton('verticalRuler', 'V', config.rulerHandle, true)
|
|
.set(config.rulerHandle.y(_lines, bounds))
|
|
.addTo(viewport.canvas)
|
|
.on('moving', Event.onMove)
|
|
.trigger('moving');
|
|
|
|
viewport.canvas.renderAll();
|
|
|
|
return this;
|
|
};
|
|
|
|
/**
|
|
* @return {RulerHandler}
|
|
*/
|
|
this.reset = function () {
|
|
return this.enable(_enabled);
|
|
};
|
|
}
|
|
|
|
module.exports = RulerHandler;
|
|
|
|
},{"./TextButton":14,"./config":16,"./util":25}],14:[function(require,module,exports){
|
|
'use strict';
|
|
/* globals $, fabric */
|
|
|
|
var config = require('./config');
|
|
|
|
/**
|
|
* Creates a text-button with text/settings provided.
|
|
* @param {string} id
|
|
* @param {string} text - text to be shown inside the button
|
|
* @param {Object} settings
|
|
* @param {bool} isActive
|
|
*/
|
|
function TextButton(id, text, settings, isActive) {
|
|
/* jshint unused:false */
|
|
|
|
fabric.Group.call(this);
|
|
|
|
var __active = isActive || false;
|
|
var _callback = null;
|
|
var _rect = null;
|
|
var _text = null;
|
|
var _id = id;
|
|
var width = settings.rect ? settings.rect.width : 0;
|
|
var height = settings.rect ? settings.rect.height : 0;
|
|
|
|
var _rectSettings = $.extend({}, config.textButton.rect(width, height), settings.rect);
|
|
var _textSettings = $.extend({}, config.textButton.text, settings.text, {
|
|
text: Array.isArray(text) ? text[0] : text,
|
|
textActive: Array.isArray(text) ? text[1] : text,
|
|
});
|
|
|
|
this.selectable = true;
|
|
|
|
// Make sure we're interactive
|
|
this.disabled = false;
|
|
this.hoverCursor = config.textButton.cursor;
|
|
|
|
// Initialize text and rectangle
|
|
_text = new fabric.Text('', _textSettings);
|
|
_rect = new fabric.Rect(_rectSettings);
|
|
|
|
this.addWithUpdate(_rect).addWithUpdate(_text);
|
|
|
|
/**
|
|
* @param {String} text
|
|
* @return {TextButton}
|
|
*/
|
|
this.setText = function(text) {
|
|
_text.setText((text || '').toString()).setCoords();
|
|
|
|
if (_rectSettings.dynamicW) {
|
|
this.width = _rect.width = _text.width + config.textButton.padding;
|
|
}
|
|
|
|
if (_rectSettings.dynamicH) {
|
|
this.height = _rect.height = _text.height + config.textButton.padding;
|
|
}
|
|
|
|
return this.setCoords();
|
|
};
|
|
|
|
this.getId = function() {
|
|
return _id;
|
|
};
|
|
|
|
/**
|
|
* @return {Boolean}
|
|
*/
|
|
this.isActive = function() {
|
|
return this.__active;
|
|
};
|
|
|
|
function toggleActiveStyle() {
|
|
/*jshint validthis: true */
|
|
_rect.setFill(_rectSettings[this.isActive() ? 'activeFill' : 'fill']);
|
|
_text.setFill(_textSettings[this.isActive() ? 'activeFill' : 'fill']);
|
|
this.setText(_textSettings[this.isActive() ? 'textActive' : 'text']);
|
|
}
|
|
|
|
function handleMouseDown(e) {
|
|
/*jshint validthis: true */
|
|
toggleActiveStyle.call(this);
|
|
_callback.call(this, e);
|
|
|
|
if (this.__group) {
|
|
this.__group.render();
|
|
}
|
|
}
|
|
|
|
this.onClick = function(callback) {
|
|
_callback = callback || function() {};
|
|
this.on('mousedown', function (e) {
|
|
// As inactive buttons are still clickable, we first check if the button is disabled.
|
|
// Only then we should do stuff.
|
|
if (!this.disabled) {
|
|
this.__active = !this.__active;
|
|
handleMouseDown.call(this, e);
|
|
}
|
|
}.bind(this));
|
|
return this;
|
|
};
|
|
|
|
this.setActive = function (isActive) {
|
|
this.__active = typeof isActive === 'undefined' ? true : !!isActive;
|
|
toggleActiveStyle.call(this);
|
|
};
|
|
|
|
this.setDisabled = function (isDisabled)
|
|
{
|
|
this.disabled = isDisabled;
|
|
|
|
_rect.setFill(_rectSettings[this.disabled ? 'disabledFill' : 'fill']);
|
|
_text.setFill(_textSettings[this.disabled ? 'disabledFill' : 'fill']);
|
|
|
|
this.hoverCursor = this.disabled ? config.textButton.disabledCursor : config.textButton.cursor;
|
|
};
|
|
|
|
if (_textSettings.text) {
|
|
this.setText(_textSettings.text);
|
|
}
|
|
}
|
|
|
|
TextButton.prototype = Object.create(fabric.Group.prototype);
|
|
TextButton.prototype.constructor = TextButton;
|
|
|
|
module.exports = TextButton;
|
|
|
|
},{"./config":16}],15:[function(require,module,exports){
|
|
'use strict';
|
|
/* globals $, fabric */
|
|
|
|
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;
|
|
|
|
/**
|
|
* Render the diagonal lines from viewport to edge of the canvas
|
|
*/
|
|
function drawBeams() {
|
|
_beams.forEach(function (beam) {
|
|
canvas.remove(beam);
|
|
});
|
|
|
|
_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 * img.scaleX),
|
|
max: rect.left
|
|
},
|
|
top: {
|
|
min: rect.top + rect.height - (img.height * img.scaleY),
|
|
max: rect.top
|
|
}
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Applies viewport to page
|
|
*/
|
|
function apply() {
|
|
var cropData = canvas.getImageData().getCropData();
|
|
canvas.remove(_rect);
|
|
|
|
_rect = new fabric.Rect({
|
|
evented: false,
|
|
fill: 'transparent',
|
|
width: _data.width,
|
|
height: _data.height,
|
|
stroke: canvas.__type === 'canvas' ? 'transparent' : '#fff',
|
|
strokeWidth: _borderWidth,
|
|
});
|
|
|
|
_rect.width += _borderWidth;
|
|
_rect.height += _borderWidth;
|
|
_rect.addTo(canvas).center().setCoords();
|
|
|
|
if (cropData) {
|
|
var viewportBounds = _rect.getInsideBoundingRect();
|
|
|
|
// Calculate the new position after screenresize and when the
|
|
// image already has been cropped to a certain position.
|
|
var left = viewportBounds.left - (canvas.getImage().width * canvas.getImage().scaleX * cropData.x);
|
|
var top = viewportBounds.top - (canvas.getImage().height * canvas.getImage().scaleY * cropData.y);
|
|
|
|
canvas.getImage().set({ left: left, top: top }).setCoords();
|
|
} else {
|
|
canvas.getImage().center().setCoords();
|
|
canvas.getImageData().setCropData();
|
|
}
|
|
|
|
if(canvas.__type !== 'wallpaper') {
|
|
canvas.getImage().drag.enable(calcMinMaxBoundsForRect(_rect.getInsideBoundingRect(), canvas.getImage()));
|
|
canvas.getApertures().apply(_data.axis, _rect.getBoundingRect());
|
|
} else {
|
|
canvas.getApertures().disable();
|
|
}
|
|
|
|
if (canvas.__type !== 'canvas') {
|
|
drawBeams();
|
|
} else {
|
|
self.setFrame(self.getFrameHandler().getFrameType());
|
|
}
|
|
|
|
canvas.getDragbars().apply();
|
|
// Apertures sometimes overlaps the viewports bounding rect.
|
|
// Solve this by bringing it to the front after apertures are applied.
|
|
_rect.bringToFront();
|
|
}
|
|
|
|
this.canvas = canvas;
|
|
|
|
this.getBounds = function () {
|
|
return _rect ? _rect.getInsideBoundingRect() : null;
|
|
};
|
|
|
|
/**
|
|
* @return {Viewport}
|
|
*/
|
|
this.reset = function () {
|
|
if (_data) {
|
|
return this.set(_data.dim.width, _data.dim.height, _data.dim.units);
|
|
}
|
|
return this;
|
|
};
|
|
|
|
/**
|
|
* @param {Number} width
|
|
* @param {Number} height
|
|
* @param {string} units
|
|
* @return {Viewport}
|
|
*/
|
|
this.set = function (width, height, units) {
|
|
if (!width || !height) {
|
|
return this;
|
|
}
|
|
|
|
_data = util.calcCrop(canvas.getImage(), width, height, units);
|
|
|
|
var cropData = canvas.getImageData().getCropData();
|
|
var isAspectTheSame = !!(cropData && !util.isAspectChanged(cropData.viewportWidth, cropData.viewportHeight, width, height));
|
|
|
|
if (!isAspectTheSame) {
|
|
canvas.getImageData().removeCropData();
|
|
}
|
|
|
|
apply();
|
|
this.getGores().reset();
|
|
this.getRulers().reset();
|
|
|
|
if (canvas.getImage().__cropped && !isAspectTheSame) {
|
|
canvas.getApertures().setTransparent(true);
|
|
|
|
// Trigger event to tell the image needs to be dragged.
|
|
$(document).trigger('PIE:needs-dragging', { axis: _data.axis });
|
|
}
|
|
|
|
canvas.getButtonMenu().bringToFront();
|
|
|
|
return this;
|
|
};
|
|
|
|
/**
|
|
* @param {string} frameType white|black|image|none
|
|
* @return {Viewport}
|
|
*/
|
|
this.setFrame = function (frameType) {
|
|
this.getFrameHandler().setFrames(frameType);
|
|
|
|
var buttons = canvas.getButtonMenu().getItems();
|
|
if (frameType === 'none') {
|
|
buttons[0].setDisabled(true);
|
|
}
|
|
else {
|
|
buttons[0].setDisabled(false);
|
|
}
|
|
canvas.getButtonMenu().bringToFront();
|
|
|
|
canvas.refresh3dView();
|
|
};
|
|
|
|
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;
|
|
|
|
},{"./FrameHandler":8,"./GoreHandler":9,"./RulerHandler":13,"./util":25}],16:[function(require,module,exports){
|
|
'use strict';
|
|
|
|
module.exports = {
|
|
frames: require('./config/frames'),
|
|
textButton: require('./config/text-button'),
|
|
buttonMenu: require('./config/button-menu'),
|
|
rulerHandle: require('./config/ruler-handle'),
|
|
dragHandle: require('./config/drag-handle'),
|
|
dragBar: require('./config/drag-bar')
|
|
};
|
|
|
|
},{"./config/button-menu":17,"./config/drag-bar":18,"./config/drag-handle":19,"./config/frames":20,"./config/ruler-handle":21,"./config/text-button":22}],17:[function(require,module,exports){
|
|
'use strict';
|
|
|
|
module.exports = {
|
|
|
|
canvas: {
|
|
margin: 5,
|
|
text: {
|
|
fill: '#ffffff',
|
|
activeFill: '#ffffff',
|
|
},
|
|
rect: {
|
|
fill: '#343434',
|
|
activeFill: '#494949',
|
|
},
|
|
},
|
|
|
|
'photo-wallpaper': {
|
|
margin: 5,
|
|
text: {
|
|
fill: '#ffffff',
|
|
activeFill: '#ffffff',
|
|
},
|
|
rect: {
|
|
fill: '#000000',
|
|
activeFill: '#444444',
|
|
},
|
|
},
|
|
|
|
wallpaper: {
|
|
margin: 5,
|
|
text: {
|
|
fill: '#ffffff',
|
|
activeFill: '#ffffff',
|
|
},
|
|
rect: {
|
|
fill: '#343434',
|
|
activeFill: '#494949',
|
|
},
|
|
}
|
|
|
|
};
|
|
|
|
},{}],18:[function(require,module,exports){
|
|
'use strict';
|
|
|
|
module.exports = {
|
|
fill: '#bbbbbb',
|
|
size: 20,
|
|
};
|
|
|
|
},{}],19:[function(require,module,exports){
|
|
'use strict';
|
|
|
|
module.exports = {
|
|
text: {
|
|
fontFamily: 'breuer',
|
|
fontSize: 12,
|
|
fill: '#ffffff',
|
|
originX: 'center',
|
|
top: 2,
|
|
},
|
|
rect: {
|
|
fill: '#666666',
|
|
height: 20,
|
|
originX: 'center',
|
|
},
|
|
};
|
|
|
|
},{}],20:[function(require,module,exports){
|
|
'use strict';
|
|
|
|
module.exports = {
|
|
|
|
default: {
|
|
fill: '#000000',
|
|
stroke: '#f31fb3',
|
|
width: 1,
|
|
height: 1,
|
|
},
|
|
|
|
image: {
|
|
fill: 'rgba(0,0,0,0.2)',
|
|
strokeWidth: 1,
|
|
},
|
|
|
|
black: {
|
|
fill: '#000000',
|
|
strokeWidth: 0,
|
|
},
|
|
|
|
white: {
|
|
fill: '#ffffff',
|
|
strokeWidth: 0,
|
|
},
|
|
|
|
};
|
|
|
|
},{}],21:[function(require,module,exports){
|
|
'use strict';
|
|
|
|
module.exports = {
|
|
|
|
line: function(axis, bounds) {
|
|
return {
|
|
evented: false,
|
|
strokeDashArray: [5, 5],
|
|
stroke: '#000',
|
|
strokeWidth: 1,
|
|
top: axis === 'x' ? bounds.top + bounds.height / 2 : bounds.top,
|
|
left: axis === 'y' ? bounds.left + bounds.width / 2 : bounds.left
|
|
};
|
|
},
|
|
|
|
text: {
|
|
fontSize: 12,
|
|
width: 75,
|
|
height: 20,
|
|
fill: '#FFFFFF',
|
|
},
|
|
|
|
x: function(lines, bounds) {
|
|
return {
|
|
axis: 'left',
|
|
marker: lines.y,
|
|
top: Math.ceil(bounds.top + bounds.height + 5),
|
|
left: lines.y.left,
|
|
originX: 'center',
|
|
lockMovementY: true,
|
|
moveCursor: 'ew-resize',
|
|
hoverCursor: 'ew-resize',
|
|
};
|
|
},
|
|
y: function(lines, bounds) {
|
|
return {
|
|
axis: 'top',
|
|
marker: lines.x,
|
|
top: lines.x.top,
|
|
left: Math.ceil(bounds.left + bounds.width + 5),
|
|
originY: 'center',
|
|
lockMovementX: true,
|
|
moveCursor: 'ns-resize',
|
|
hoverCursor: 'ns-resize',
|
|
};
|
|
}
|
|
};
|
|
|
|
},{}],22:[function(require,module,exports){
|
|
'use strict';
|
|
|
|
module.exports = {
|
|
|
|
rect: function(width, height) {
|
|
return {
|
|
fill: '#343434',
|
|
activeFill: '#494949',
|
|
disabledFill: '#494949',
|
|
originX: 'center',
|
|
originY: 'center',
|
|
width: width || 1,
|
|
dynamicW: !width,
|
|
height: height || 1,
|
|
dynamicH: !height,
|
|
};
|
|
},
|
|
|
|
text: {
|
|
fill: '#ffffff',
|
|
disabledFill: '#999999',
|
|
fontFamily: 'breuer',
|
|
fontSize: 14,
|
|
originX: 'center',
|
|
originY: 'center',
|
|
},
|
|
|
|
cursor: 'pointer',
|
|
disabledCursor: 'default',
|
|
padding: 20,
|
|
};
|
|
|
|
},{}],23:[function(require,module,exports){
|
|
'use strict';
|
|
/* globals $, fabric */
|
|
|
|
var Draggable = require('./Draggable');
|
|
var util = require('./util');
|
|
|
|
function ExtendFabricFunctionality() {
|
|
|
|
// Set default values for the fabric canvas
|
|
$.extend(fabric.Object.prototype, {
|
|
cornerSize: 0,
|
|
hasBorders: false,
|
|
hasControls: false,
|
|
padding: 0,
|
|
selectable: false,
|
|
strokeWidth: 0,
|
|
addTo: function(canvas) {
|
|
canvas.add(this);
|
|
return this;
|
|
},
|
|
});
|
|
|
|
|
|
util.setProperties(fabric.Image.prototype, {
|
|
drag: {
|
|
get: function() {
|
|
return this.__draggable || (this.__draggable = new Draggable(this));
|
|
}
|
|
}
|
|
});
|
|
|
|
$.extend(fabric.Rect.prototype, {
|
|
/**
|
|
* Gets the inner bounds of this fabric.Rect
|
|
* @return {Object}
|
|
*/
|
|
getInsideBoundingRect: function() {
|
|
var bounds = this.getBoundingRect();
|
|
var returnValue = {
|
|
left: bounds.left + this.strokeWidth,
|
|
top: bounds.top + this.strokeWidth,
|
|
width: bounds.width - this.strokeWidth * 2,
|
|
height: bounds.height - this.strokeWidth * 2
|
|
};
|
|
|
|
returnValue.right = returnValue.left + returnValue.width;
|
|
returnValue.bottom = returnValue.top + returnValue.height;
|
|
|
|
returnValue.min = {
|
|
left: returnValue.left,
|
|
top: returnValue.top
|
|
};
|
|
|
|
returnValue.max = {
|
|
left: returnValue.left + returnValue.width,
|
|
top: returnValue.top + returnValue.height
|
|
};
|
|
|
|
return returnValue;
|
|
}
|
|
});
|
|
}
|
|
|
|
module.exports = ExtendFabricFunctionality;
|
|
|
|
},{"./Draggable":7,"./util":25}],24:[function(require,module,exports){
|
|
'use strict';
|
|
/* globals window */
|
|
|
|
(function() {
|
|
|
|
/**
|
|
* Fabric functionality is extended with some custom functionality. This is done before
|
|
* we do anything else.
|
|
*/
|
|
require('./extend-fabric-functionality')();
|
|
|
|
/**
|
|
* ImageEditor is the starting point of all files. Here the image editor is created and
|
|
* it receives attributes from the initialisation. As this is done from outside of this file,
|
|
* the ImageEditor should be available on globally.
|
|
*/
|
|
window.ImageEditor = require('./ImageEditor');
|
|
|
|
}());
|
|
|
|
},{"./ImageEditor":11,"./extend-fabric-functionality":23}],25:[function(require,module,exports){
|
|
'use strict';
|
|
|
|
module.exports = {
|
|
|
|
assertKeyValuePair: require('./utils/assert-key-value-pair'),
|
|
assertBetween: require('./utils/assert-between'),
|
|
calcCrop: require('./utils/calc-crop'),
|
|
setPositionInside: require('./utils/set-position-inside'),
|
|
setProperties: require('./utils/set-properties'),
|
|
toggleFullscreen: require('./utils/toggle-fullscreen'),
|
|
isMobile: require('./utils/is-mobile'),
|
|
MouseMetrics: require('./utils/mouse-metrics'),
|
|
supportsFullscreen: require('./utils/supports-fullscreen'),
|
|
isFullscreen: require('./utils/is-fullscreen'),
|
|
isAspectChanged: require('./utils/is-aspect-changed'),
|
|
};
|
|
|
|
},{"./utils/assert-between":26,"./utils/assert-key-value-pair":27,"./utils/calc-crop":28,"./utils/is-aspect-changed":29,"./utils/is-fullscreen":30,"./utils/is-mobile":31,"./utils/mouse-metrics":32,"./utils/set-position-inside":33,"./utils/set-properties":34,"./utils/supports-fullscreen":35,"./utils/toggle-fullscreen":36}],26:[function(require,module,exports){
|
|
'use strict';
|
|
|
|
function assertBetween(value, min, max) {
|
|
if (value < min) {
|
|
return min;
|
|
}
|
|
if (value > max) {
|
|
return max;
|
|
}
|
|
return value;
|
|
}
|
|
|
|
module.exports = assertBetween;
|
|
|
|
},{}],27:[function(require,module,exports){
|
|
'use strict';
|
|
|
|
function assertKeyValuePair(key, value) {
|
|
if (typeof key === 'object') {
|
|
return key;
|
|
}
|
|
|
|
var returnValue = {};
|
|
returnValue[key] = value;
|
|
|
|
return returnValue;
|
|
}
|
|
|
|
module.exports = assertKeyValuePair;
|
|
|
|
},{}],28:[function(require,module,exports){
|
|
'use strict';
|
|
|
|
/**
|
|
* @param {fabric.Image} obj
|
|
* @param {int} width
|
|
* @param {int} height
|
|
* @param {string} units
|
|
* @return {Object}
|
|
* axis: STRING,
|
|
* dim: OBJECT( width: NUMBER, height: NUMBER),
|
|
* width: NUMBER,
|
|
* height: NUMBER,
|
|
* ppmm: NUMBER
|
|
*/
|
|
function calcCrop(obj, width, height, units) {
|
|
var cropRatio = width / height;
|
|
var objRatio = obj.width / obj.height;
|
|
var inchToCm = units === "inch" ? 2.54 : 1;
|
|
|
|
var returnValue = {
|
|
image: obj,
|
|
axis: objRatio > cropRatio ? 'x' : 'y',
|
|
dim: {
|
|
width: Number(width),
|
|
height: Number(height),
|
|
units: units
|
|
},
|
|
width: obj.width * obj.scaleX,
|
|
height: obj.height * obj.scaleY,
|
|
objectRatio: objRatio,
|
|
cropRatio: cropRatio
|
|
};
|
|
|
|
if (objRatio > cropRatio) {
|
|
returnValue.width *= cropRatio / objRatio;
|
|
} else {
|
|
returnValue.height /= cropRatio / objRatio;
|
|
}
|
|
|
|
// Pixels per millimeter
|
|
var ppmm = returnValue.width / ((returnValue.dim.width * inchToCm * obj.scaleX) * 10);
|
|
|
|
//Round to four decimal places to avoid precision issues. At least 4 decimals is needed though
|
|
//for correct calculation of number of gores on wide wallpaperes in editor.
|
|
returnValue.ppmm = Math.round(ppmm * 1e4) / 1e4;
|
|
|
|
return returnValue;
|
|
}
|
|
|
|
module.exports = calcCrop;
|
|
|
|
},{}],29:[function(require,module,exports){
|
|
'use strict';
|
|
|
|
function isAspectChanged(x1, y1, x2, y2) {
|
|
return (Math.abs(x1 / y1 - x2 / y2) > 0.005);
|
|
}
|
|
|
|
module.exports = isAspectChanged;
|
|
|
|
},{}],30:[function(require,module,exports){
|
|
'use strict';
|
|
|
|
function isFullscreen() {
|
|
return document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
|
|
}
|
|
|
|
module.exports = isFullscreen;
|
|
|
|
},{}],31:[function(require,module,exports){
|
|
'use strict';
|
|
/* globals $, window */
|
|
|
|
function isMobile() {
|
|
return $(window).width() < 768;
|
|
}
|
|
|
|
module.exports = isMobile;
|
|
|
|
},{}],32:[function(require,module,exports){
|
|
'use strict';
|
|
|
|
var MouseMetrics = {
|
|
previousMouseData: {
|
|
x: null,
|
|
y: null
|
|
},
|
|
|
|
deletePreviousMouseData: function() {
|
|
MouseMetrics.previousMouseData = {
|
|
x: null,
|
|
y: null
|
|
};
|
|
},
|
|
|
|
setPreviousMouseData: function(values) {
|
|
MouseMetrics.previousMouseData = {
|
|
x: values.x || null,
|
|
y: values.y || null,
|
|
};
|
|
},
|
|
};
|
|
|
|
module.exports = MouseMetrics;
|
|
|
|
},{}],33:[function(require,module,exports){
|
|
'use strict';
|
|
|
|
/**
|
|
* @param {fabric.Object} obj
|
|
* @param {Object} bounds
|
|
* @return {fabric.Object}
|
|
*/
|
|
function setPositionInside(obj, bounds) {
|
|
['left', 'top'].forEach(function (v) {
|
|
if (obj[v] < bounds[v].min) {
|
|
obj.set(v, bounds[v].min).setCoords();
|
|
}
|
|
|
|
if (obj[v] > bounds[v].max) {
|
|
obj.set(v, bounds[v].max).setCoords();
|
|
}
|
|
});
|
|
return obj;
|
|
}
|
|
|
|
module.exports = setPositionInside;
|
|
|
|
},{}],34:[function(require,module,exports){
|
|
'use strict';
|
|
|
|
/**
|
|
* @param {Object} obj
|
|
* @param {Object} properties
|
|
*/
|
|
function setProperties(obj, properties) {
|
|
for (var o in properties) {
|
|
if (properties.hasOwnProperty(o)) {
|
|
Object.defineProperty(obj, o, properties[o]);
|
|
}
|
|
}
|
|
}
|
|
|
|
module.exports = setProperties;
|
|
|
|
},{}],35:[function(require,module,exports){
|
|
'use strict';
|
|
|
|
function supportsFullscreen() {
|
|
|
|
return document.documentElement.requestFullscreen || document.documentElement.webkitRequestFullScreen || document.documentElement.mozRequestFullScreen || document.documentElement.msRequestFullscreen;
|
|
|
|
}
|
|
|
|
module.exports = supportsFullscreen;
|
|
|
|
},{}],36:[function(require,module,exports){
|
|
'use strict';
|
|
|
|
var isFullscreen = require('./is-fullscreen');
|
|
/**
|
|
* Toggles the full screen state for passed DOM object
|
|
* @param {HTMLElement} elem
|
|
*/
|
|
function toggleFullscreen(elem) {
|
|
if (isFullscreen()) {
|
|
if (document.exitFullscreen) {
|
|
document.exitFullscreen();
|
|
} else if (document.msExitFullscreen) {
|
|
document.msExitFullscreen();
|
|
} else if (document.mozCancelFullScreen) {
|
|
document.mozCancelFullScreen();
|
|
} else if (document.webkitCancelFullScreen) {
|
|
document.webkitCancelFullScreen();
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (elem.requestFullscreen) {
|
|
elem.requestFullscreen();
|
|
} else if (elem.webkitRequestFullScreen) {
|
|
elem.webkitRequestFullScreen();
|
|
} else if (elem.mozRequestFullScreen) {
|
|
elem.mozRequestFullScreen();
|
|
} else if (elem.msRequestFullscreen) {
|
|
elem.msRequestFullscreen();
|
|
}
|
|
}
|
|
|
|
module.exports = toggleFullscreen;
|
|
|
|
},{"./is-fullscreen":30}]},{},[24]);
|