P5-1922 fix jslint warnings
This commit is contained in:
Vendored
+97
-79
@@ -1,11 +1,10 @@
|
|||||||
(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){
|
(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';
|
'use strict';
|
||||||
|
/* globals fabric */
|
||||||
var util = require('./util');
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Handles 3d image of canvas products.
|
* Handles 3d image of canvas products.
|
||||||
* @param {canvas}
|
* @param {canvas} canvas
|
||||||
*/
|
*/
|
||||||
function ThreeDHandler(canvas) {
|
function ThreeDHandler(canvas) {
|
||||||
var _overlay = new fabric.Group();
|
var _overlay = new fabric.Group();
|
||||||
@@ -109,12 +108,13 @@ function ThreeDHandler(canvas) {
|
|||||||
|
|
||||||
module.exports = ThreeDHandler;
|
module.exports = ThreeDHandler;
|
||||||
|
|
||||||
},{"./util":25}],2:[function(require,module,exports){
|
},{}],2:[function(require,module,exports){
|
||||||
'use strict';
|
'use strict';
|
||||||
|
/* globals fabric */
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ApertureHandler takes care of the bars around the image to show what area has been/will be cropped.
|
* ApertureHandler takes care of the bars around the image to show what area has been/will be cropped.
|
||||||
* @param {canvas}
|
* @param {canvas} canvas
|
||||||
*/
|
*/
|
||||||
function ApertureHandler(canvas) {
|
function ApertureHandler(canvas) {
|
||||||
var _items = {x: [], y: []};
|
var _items = {x: [], y: []};
|
||||||
@@ -146,7 +146,7 @@ function ApertureHandler(canvas) {
|
|||||||
/**
|
/**
|
||||||
* Applies configuration to the apertures apertures on the viewport
|
* Applies configuration to the apertures apertures on the viewport
|
||||||
* @param {string} axis
|
* @param {string} axis
|
||||||
* @param {viewport}
|
* @param {viewport} viewport
|
||||||
*/
|
*/
|
||||||
this.apply = function (axis, viewport) {
|
this.apply = function (axis, viewport) {
|
||||||
this.getApertures(axis).forEach(function (o) {
|
this.getApertures(axis).forEach(function (o) {
|
||||||
@@ -207,8 +207,6 @@ module.exports = ApertureHandler;
|
|||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
var TextButton = require('./TextButton');
|
var TextButton = require('./TextButton');
|
||||||
var config = require('./config');
|
|
||||||
var util = require('./util');
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Creates the menu with text-buttons settings provided. Settings will override
|
* Creates the menu with text-buttons settings provided. Settings will override
|
||||||
@@ -358,8 +356,9 @@ function ButtonMenu(canvas, settings) {
|
|||||||
|
|
||||||
module.exports = ButtonMenu;
|
module.exports = ButtonMenu;
|
||||||
|
|
||||||
},{"./TextButton":14,"./config":16,"./util":25}],4:[function(require,module,exports){
|
},{"./TextButton":14}],4:[function(require,module,exports){
|
||||||
'use strict';
|
'use strict';
|
||||||
|
/* globals $, fabric */
|
||||||
|
|
||||||
var config = require('./config');
|
var config = require('./config');
|
||||||
var util = require('./util');
|
var util = require('./util');
|
||||||
@@ -612,6 +611,7 @@ 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){
|
},{"./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';
|
'use strict';
|
||||||
|
/* globals $, fabric */
|
||||||
|
|
||||||
var config = require('./config');
|
var config = require('./config');
|
||||||
var util = require('./util');
|
var util = require('./util');
|
||||||
@@ -732,6 +732,7 @@ module.exports = DragHandle;
|
|||||||
|
|
||||||
},{"./config":16,"./util":25}],6:[function(require,module,exports){
|
},{"./config":16,"./util":25}],6:[function(require,module,exports){
|
||||||
'use strict';
|
'use strict';
|
||||||
|
/* globals $, fabric */
|
||||||
|
|
||||||
var DragHandle = require('./DragHandle');
|
var DragHandle = require('./DragHandle');
|
||||||
var config = require('./config');
|
var config = require('./config');
|
||||||
@@ -873,6 +874,7 @@ function Draggable(img, boundingRect) {
|
|||||||
* Triggers when object is moved
|
* Triggers when object is moved
|
||||||
*/
|
*/
|
||||||
function onMove() {
|
function onMove() {
|
||||||
|
/*jshint validthis: true */
|
||||||
this.__dragged = true;
|
this.__dragged = true;
|
||||||
|
|
||||||
this.canvas.disableScroll();
|
this.canvas.disableScroll();
|
||||||
@@ -910,6 +912,7 @@ module.exports = Draggable;
|
|||||||
|
|
||||||
},{"./util":25}],8:[function(require,module,exports){
|
},{"./util":25}],8:[function(require,module,exports){
|
||||||
'use strict';
|
'use strict';
|
||||||
|
/* globals fabric */
|
||||||
|
|
||||||
var config = require('./config');
|
var config = require('./config');
|
||||||
|
|
||||||
@@ -917,10 +920,6 @@ function FrameHandler(viewport) {
|
|||||||
var _frames;
|
var _frames;
|
||||||
var _frameType = 'image';
|
var _frameType = 'image';
|
||||||
|
|
||||||
function init() {
|
|
||||||
initFrames();
|
|
||||||
}
|
|
||||||
|
|
||||||
function getFramesAsArray() {
|
function getFramesAsArray() {
|
||||||
return [
|
return [
|
||||||
_frames.top, _frames.right, _frames.bottom, _frames.left
|
_frames.top, _frames.right, _frames.bottom, _frames.left
|
||||||
@@ -945,6 +944,10 @@ function FrameHandler(viewport) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
initFrames();
|
||||||
|
}
|
||||||
|
|
||||||
init();
|
init();
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -1054,6 +1057,7 @@ module.exports = FrameHandler;
|
|||||||
|
|
||||||
},{"./config":16}],9:[function(require,module,exports){
|
},{"./config":16}],9:[function(require,module,exports){
|
||||||
'use strict';
|
'use strict';
|
||||||
|
/* globals fabric */
|
||||||
|
|
||||||
function GoreHandler(viewport) {
|
function GoreHandler(viewport) {
|
||||||
var _enabled = false;
|
var _enabled = false;
|
||||||
@@ -1094,7 +1098,7 @@ function GoreHandler(viewport) {
|
|||||||
|
|
||||||
if (!_enabled) {
|
if (!_enabled) {
|
||||||
viewport.canvas.renderAll();
|
viewport.canvas.renderAll();
|
||||||
return;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
var bounds = viewport.getBounds();
|
var bounds = viewport.getBounds();
|
||||||
@@ -1126,6 +1130,7 @@ module.exports = GoreHandler;
|
|||||||
|
|
||||||
},{}],10:[function(require,module,exports){
|
},{}],10:[function(require,module,exports){
|
||||||
'use strict';
|
'use strict';
|
||||||
|
/* globals $ */
|
||||||
|
|
||||||
function ImageDataHandler(img) {
|
function ImageDataHandler(img) {
|
||||||
|
|
||||||
@@ -1185,6 +1190,7 @@ module.exports = ImageDataHandler;
|
|||||||
|
|
||||||
},{}],11:[function(require,module,exports){
|
},{}],11:[function(require,module,exports){
|
||||||
'use strict';
|
'use strict';
|
||||||
|
/* globals $, fabric */
|
||||||
|
|
||||||
var Canvas = require('./Canvas');
|
var Canvas = require('./Canvas');
|
||||||
var util = require('./util');
|
var util = require('./util');
|
||||||
@@ -1254,7 +1260,7 @@ function ImageEditor(canvasId, args) {
|
|||||||
_canvas.getButtonMenu().render();
|
_canvas.getButtonMenu().render();
|
||||||
|
|
||||||
// Binding fullscreen change event to the image-editor wrapper. This way we can set the correct button active.
|
// 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(e) {
|
$(_canvas.getSelectionElement().parentNode).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function() {
|
||||||
var isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
|
var isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
|
||||||
|
|
||||||
if (isFullscreen) {
|
if (isFullscreen) {
|
||||||
@@ -1315,7 +1321,7 @@ function ImageEditor(canvasId, args) {
|
|||||||
this.loadImage = function (url, callback) {
|
this.loadImage = function (url, callback) {
|
||||||
callback = typeof callback === 'function' ? callback : function () {};
|
callback = typeof callback === 'function' ? callback : function () {};
|
||||||
fabric.util.loadImage(this._url = url, function (obj) {
|
fabric.util.loadImage(this._url = url, function (obj) {
|
||||||
if(obj == null) {
|
if(obj === null) {
|
||||||
throw new Error('Error loading ' + url);
|
throw new Error('Error loading ' + url);
|
||||||
}
|
}
|
||||||
var img = new fabric.Image(obj);
|
var img = new fabric.Image(obj);
|
||||||
@@ -1377,6 +1383,7 @@ module.exports = MirrorHandler;
|
|||||||
|
|
||||||
},{}],13:[function(require,module,exports){
|
},{}],13:[function(require,module,exports){
|
||||||
'use strict';
|
'use strict';
|
||||||
|
/* globals fabric */
|
||||||
|
|
||||||
var util = require('./util');
|
var util = require('./util');
|
||||||
var TextButton = require('./TextButton');
|
var TextButton = require('./TextButton');
|
||||||
@@ -1387,15 +1394,6 @@ function RulerHandler(viewport) {
|
|||||||
var _lines = { x: null, y: null };
|
var _lines = { x: null, y: null };
|
||||||
var _rect = { x: null, y: null };
|
var _rect = { x: null, y: null };
|
||||||
|
|
||||||
var Event = {
|
|
||||||
/**
|
|
||||||
* Triggers when handlebar is moved
|
|
||||||
*/
|
|
||||||
onMove: function () {
|
|
||||||
updateRulerText(this);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
function updateRulerText(ruler) {
|
function updateRulerText(ruler) {
|
||||||
var axis = ruler.axis;
|
var axis = ruler.axis;
|
||||||
var bounds = viewport.getBounds();
|
var bounds = viewport.getBounds();
|
||||||
@@ -1410,6 +1408,15 @@ function RulerHandler(viewport) {
|
|||||||
ruler.setText(Math.round(dim * 100) / 100 + ' ' + viewport.getData().dim.units);
|
ruler.setText(Math.round(dim * 100) / 100 + ' ' + viewport.getData().dim.units);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
var Event = {
|
||||||
|
/**
|
||||||
|
* Triggers when handlebar is moved
|
||||||
|
*/
|
||||||
|
onMove: function () {
|
||||||
|
updateRulerText(this);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @return {fabric.Line}
|
* @return {fabric.Line}
|
||||||
*/
|
*/
|
||||||
@@ -1501,15 +1508,20 @@ module.exports = RulerHandler;
|
|||||||
|
|
||||||
},{"./TextButton":14,"./config":16,"./util":25}],14:[function(require,module,exports){
|
},{"./TextButton":14,"./config":16,"./util":25}],14:[function(require,module,exports){
|
||||||
'use strict';
|
'use strict';
|
||||||
|
/* globals $, fabric */
|
||||||
|
|
||||||
var config = require('./config');
|
var config = require('./config');
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Creates a text-button with text/settings provided.
|
* Creates a text-button with text/settings provided.
|
||||||
* @param {String} text - text to be shown inside the button
|
* @param {string} id
|
||||||
|
* @param {string} text - text to be shown inside the button
|
||||||
* @param {Object} settings
|
* @param {Object} settings
|
||||||
|
* @param {bool} isActive
|
||||||
*/
|
*/
|
||||||
function TextButton(id, text, settings, isActive) {
|
function TextButton(id, text, settings, isActive) {
|
||||||
|
/* jshint unused:false */
|
||||||
|
|
||||||
fabric.Group.call(this);
|
fabric.Group.call(this);
|
||||||
|
|
||||||
var __active = isActive || false;
|
var __active = isActive || false;
|
||||||
@@ -1567,7 +1579,15 @@ function TextButton(id, text, settings, isActive) {
|
|||||||
return this.__active;
|
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) {
|
function handleMouseDown(e) {
|
||||||
|
/*jshint validthis: true */
|
||||||
toggleActiveStyle.call(this);
|
toggleActiveStyle.call(this);
|
||||||
_callback.call(this, e);
|
_callback.call(this, e);
|
||||||
|
|
||||||
@@ -1576,12 +1596,6 @@ function TextButton(id, text, settings, isActive) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggleActiveStyle() {
|
|
||||||
_rect.setFill(_rectSettings[this.isActive() ? 'activeFill' : 'fill']);
|
|
||||||
_text.setFill(_textSettings[this.isActive() ? 'activeFill' : 'fill']);
|
|
||||||
this.setText(_textSettings[this.isActive() ? 'textActive' : 'text']);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.onClick = function(callback) {
|
this.onClick = function(callback) {
|
||||||
_callback = callback || function() {};
|
_callback = callback || function() {};
|
||||||
this.on('mousedown', function (e) {
|
this.on('mousedown', function (e) {
|
||||||
@@ -1620,6 +1634,7 @@ module.exports = TextButton;
|
|||||||
|
|
||||||
},{"./config":16}],15:[function(require,module,exports){
|
},{"./config":16}],15:[function(require,module,exports){
|
||||||
'use strict';
|
'use strict';
|
||||||
|
/* globals $, fabric */
|
||||||
|
|
||||||
var FrameHandler = require('./FrameHandler');
|
var FrameHandler = require('./FrameHandler');
|
||||||
var GoreHandler = require('./GoreHandler');
|
var GoreHandler = require('./GoreHandler');
|
||||||
@@ -1633,52 +1648,6 @@ function Viewport(canvas) {
|
|||||||
var _rect;
|
var _rect;
|
||||||
var self = this;
|
var self = this;
|
||||||
|
|
||||||
/**
|
|
||||||
* 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: '#fff',
|
|
||||||
strokeWidth: canvas.__type === 'canvas' ? 0 : _borderWidth
|
|
||||||
});
|
|
||||||
|
|
||||||
_rect.width += _borderWidth;
|
|
||||||
_rect.height += _borderWidth;
|
|
||||||
_rect.addTo(canvas).center().setCoords();
|
|
||||||
|
|
||||||
if (cropData) {
|
|
||||||
// Calculate the new position after screenresize and when the
|
|
||||||
// image already has been cropped to a certain position.
|
|
||||||
var left = _rect.left + _rect.strokeWidth - (canvas.getImage().width * canvas.getImage().scaleX * cropData.x);
|
|
||||||
var top = _rect.top + _rect.strokeWidth - (canvas.getImage().height * canvas.getImage().scaleY * cropData.y);
|
|
||||||
|
|
||||||
canvas.getImage().set({ left: left, top: top }).setCoords();
|
|
||||||
} else {
|
|
||||||
canvas.getImage().center().setCoords();
|
|
||||||
}
|
|
||||||
|
|
||||||
canvas.getImage().drag.enable(calcMinMaxBoundsForRect(_rect.getInsideBoundingRect(), canvas.getImage()));
|
|
||||||
canvas.getApertures().apply(_data.axis, _rect.getBoundingRect());
|
|
||||||
|
|
||||||
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();
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Render the diagonal lines from viewport to edge of the canvas
|
* Render the diagonal lines from viewport to edge of the canvas
|
||||||
*/
|
*/
|
||||||
@@ -1729,6 +1698,52 @@ function Viewport(canvas) {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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: '#fff',
|
||||||
|
strokeWidth: canvas.__type === 'canvas' ? 0 : _borderWidth
|
||||||
|
});
|
||||||
|
|
||||||
|
_rect.width += _borderWidth;
|
||||||
|
_rect.height += _borderWidth;
|
||||||
|
_rect.addTo(canvas).center().setCoords();
|
||||||
|
|
||||||
|
if (cropData) {
|
||||||
|
// Calculate the new position after screenresize and when the
|
||||||
|
// image already has been cropped to a certain position.
|
||||||
|
var left = _rect.left + _rect.strokeWidth - (canvas.getImage().width * canvas.getImage().scaleX * cropData.x);
|
||||||
|
var top = _rect.top + _rect.strokeWidth - (canvas.getImage().height * canvas.getImage().scaleY * cropData.y);
|
||||||
|
|
||||||
|
canvas.getImage().set({ left: left, top: top }).setCoords();
|
||||||
|
} else {
|
||||||
|
canvas.getImage().center().setCoords();
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas.getImage().drag.enable(calcMinMaxBoundsForRect(_rect.getInsideBoundingRect(), canvas.getImage()));
|
||||||
|
canvas.getApertures().apply(_data.axis, _rect.getBoundingRect());
|
||||||
|
|
||||||
|
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.canvas = canvas;
|
||||||
|
|
||||||
this.getBounds = function () {
|
this.getBounds = function () {
|
||||||
@@ -2013,6 +2028,7 @@ module.exports = {
|
|||||||
|
|
||||||
},{}],23:[function(require,module,exports){
|
},{}],23:[function(require,module,exports){
|
||||||
'use strict';
|
'use strict';
|
||||||
|
/* globals $, fabric */
|
||||||
|
|
||||||
var Draggable = require('./Draggable');
|
var Draggable = require('./Draggable');
|
||||||
var util = require('./util');
|
var util = require('./util');
|
||||||
@@ -2078,6 +2094,7 @@ module.exports = ExtendFabricFunctionality;
|
|||||||
|
|
||||||
},{"./Draggable":7,"./util":25}],24:[function(require,module,exports){
|
},{"./Draggable":7,"./util":25}],24:[function(require,module,exports){
|
||||||
'use strict';
|
'use strict';
|
||||||
|
/* globals window */
|
||||||
|
|
||||||
(function() {
|
(function() {
|
||||||
|
|
||||||
@@ -2212,6 +2229,7 @@ module.exports = isFullscreen;
|
|||||||
|
|
||||||
},{}],31:[function(require,module,exports){
|
},{}],31:[function(require,module,exports){
|
||||||
'use strict';
|
'use strict';
|
||||||
|
/* globals $, window */
|
||||||
|
|
||||||
function isMobile() {
|
function isMobile() {
|
||||||
return $(window).width() < 768;
|
return $(window).width() < 768;
|
||||||
@@ -2302,7 +2320,7 @@ module.exports = supportsFullscreen;
|
|||||||
var isFullscreen = require('./is-fullscreen');
|
var isFullscreen = require('./is-fullscreen');
|
||||||
/**
|
/**
|
||||||
* Toggles the full screen state for passed DOM object
|
* Toggles the full screen state for passed DOM object
|
||||||
* @param {HTMLElement} elm
|
* @param {HTMLElement} elem
|
||||||
*/
|
*/
|
||||||
function toggleFullscreen(elem) {
|
function toggleFullscreen(elem) {
|
||||||
if (isFullscreen()) {
|
if (isFullscreen()) {
|
||||||
|
|||||||
+2
-3
@@ -1,10 +1,9 @@
|
|||||||
'use strict';
|
'use strict';
|
||||||
|
/* globals fabric */
|
||||||
var util = require('./util');
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Handles 3d image of canvas products.
|
* Handles 3d image of canvas products.
|
||||||
* @param {canvas}
|
* @param {canvas} canvas
|
||||||
*/
|
*/
|
||||||
function ThreeDHandler(canvas) {
|
function ThreeDHandler(canvas) {
|
||||||
var _overlay = new fabric.Group();
|
var _overlay = new fabric.Group();
|
||||||
|
|||||||
@@ -1,8 +1,9 @@
|
|||||||
'use strict';
|
'use strict';
|
||||||
|
/* globals fabric */
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ApertureHandler takes care of the bars around the image to show what area has been/will be cropped.
|
* ApertureHandler takes care of the bars around the image to show what area has been/will be cropped.
|
||||||
* @param {canvas}
|
* @param {canvas} canvas
|
||||||
*/
|
*/
|
||||||
function ApertureHandler(canvas) {
|
function ApertureHandler(canvas) {
|
||||||
var _items = {x: [], y: []};
|
var _items = {x: [], y: []};
|
||||||
@@ -34,7 +35,7 @@ function ApertureHandler(canvas) {
|
|||||||
/**
|
/**
|
||||||
* Applies configuration to the apertures apertures on the viewport
|
* Applies configuration to the apertures apertures on the viewport
|
||||||
* @param {string} axis
|
* @param {string} axis
|
||||||
* @param {viewport}
|
* @param {viewport} viewport
|
||||||
*/
|
*/
|
||||||
this.apply = function (axis, viewport) {
|
this.apply = function (axis, viewport) {
|
||||||
this.getApertures(axis).forEach(function (o) {
|
this.getApertures(axis).forEach(function (o) {
|
||||||
|
|||||||
@@ -1,8 +1,6 @@
|
|||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
var TextButton = require('./TextButton');
|
var TextButton = require('./TextButton');
|
||||||
var config = require('./config');
|
|
||||||
var util = require('./util');
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Creates the menu with text-buttons settings provided. Settings will override
|
* Creates the menu with text-buttons settings provided. Settings will override
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
'use strict';
|
'use strict';
|
||||||
|
/* globals $, fabric */
|
||||||
|
|
||||||
var config = require('./config');
|
var config = require('./config');
|
||||||
var util = require('./util');
|
var util = require('./util');
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
'use strict';
|
'use strict';
|
||||||
|
/* globals $, fabric */
|
||||||
|
|
||||||
var config = require('./config');
|
var config = require('./config');
|
||||||
var util = require('./util');
|
var util = require('./util');
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
'use strict';
|
'use strict';
|
||||||
|
/* globals $, fabric */
|
||||||
|
|
||||||
var DragHandle = require('./DragHandle');
|
var DragHandle = require('./DragHandle');
|
||||||
var config = require('./config');
|
var config = require('./config');
|
||||||
|
|||||||
@@ -13,6 +13,7 @@ function Draggable(img, boundingRect) {
|
|||||||
* Triggers when object is moved
|
* Triggers when object is moved
|
||||||
*/
|
*/
|
||||||
function onMove() {
|
function onMove() {
|
||||||
|
/*jshint validthis: true */
|
||||||
this.__dragged = true;
|
this.__dragged = true;
|
||||||
|
|
||||||
this.canvas.disableScroll();
|
this.canvas.disableScroll();
|
||||||
|
|||||||
+5
-4
@@ -1,4 +1,5 @@
|
|||||||
'use strict';
|
'use strict';
|
||||||
|
/* globals fabric */
|
||||||
|
|
||||||
var config = require('./config');
|
var config = require('./config');
|
||||||
|
|
||||||
@@ -6,10 +7,6 @@ function FrameHandler(viewport) {
|
|||||||
var _frames;
|
var _frames;
|
||||||
var _frameType = 'image';
|
var _frameType = 'image';
|
||||||
|
|
||||||
function init() {
|
|
||||||
initFrames();
|
|
||||||
}
|
|
||||||
|
|
||||||
function getFramesAsArray() {
|
function getFramesAsArray() {
|
||||||
return [
|
return [
|
||||||
_frames.top, _frames.right, _frames.bottom, _frames.left
|
_frames.top, _frames.right, _frames.bottom, _frames.left
|
||||||
@@ -34,6 +31,10 @@ function FrameHandler(viewport) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
initFrames();
|
||||||
|
}
|
||||||
|
|
||||||
init();
|
init();
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
+2
-1
@@ -1,4 +1,5 @@
|
|||||||
'use strict';
|
'use strict';
|
||||||
|
/* globals fabric */
|
||||||
|
|
||||||
function GoreHandler(viewport) {
|
function GoreHandler(viewport) {
|
||||||
var _enabled = false;
|
var _enabled = false;
|
||||||
@@ -39,7 +40,7 @@ function GoreHandler(viewport) {
|
|||||||
|
|
||||||
if (!_enabled) {
|
if (!_enabled) {
|
||||||
viewport.canvas.renderAll();
|
viewport.canvas.renderAll();
|
||||||
return;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
var bounds = viewport.getBounds();
|
var bounds = viewport.getBounds();
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
'use strict';
|
'use strict';
|
||||||
|
/* globals $ */
|
||||||
|
|
||||||
function ImageDataHandler(img) {
|
function ImageDataHandler(img) {
|
||||||
|
|
||||||
|
|||||||
+3
-2
@@ -1,4 +1,5 @@
|
|||||||
'use strict';
|
'use strict';
|
||||||
|
/* globals $, fabric */
|
||||||
|
|
||||||
var Canvas = require('./Canvas');
|
var Canvas = require('./Canvas');
|
||||||
var util = require('./util');
|
var util = require('./util');
|
||||||
@@ -68,7 +69,7 @@ function ImageEditor(canvasId, args) {
|
|||||||
_canvas.getButtonMenu().render();
|
_canvas.getButtonMenu().render();
|
||||||
|
|
||||||
// Binding fullscreen change event to the image-editor wrapper. This way we can set the correct button active.
|
// 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(e) {
|
$(_canvas.getSelectionElement().parentNode).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function() {
|
||||||
var isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
|
var isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
|
||||||
|
|
||||||
if (isFullscreen) {
|
if (isFullscreen) {
|
||||||
@@ -129,7 +130,7 @@ function ImageEditor(canvasId, args) {
|
|||||||
this.loadImage = function (url, callback) {
|
this.loadImage = function (url, callback) {
|
||||||
callback = typeof callback === 'function' ? callback : function () {};
|
callback = typeof callback === 'function' ? callback : function () {};
|
||||||
fabric.util.loadImage(this._url = url, function (obj) {
|
fabric.util.loadImage(this._url = url, function (obj) {
|
||||||
if(obj == null) {
|
if(obj === null) {
|
||||||
throw new Error('Error loading ' + url);
|
throw new Error('Error loading ' + url);
|
||||||
}
|
}
|
||||||
var img = new fabric.Image(obj);
|
var img = new fabric.Image(obj);
|
||||||
|
|||||||
+10
-9
@@ -1,4 +1,5 @@
|
|||||||
'use strict';
|
'use strict';
|
||||||
|
/* globals fabric */
|
||||||
|
|
||||||
var util = require('./util');
|
var util = require('./util');
|
||||||
var TextButton = require('./TextButton');
|
var TextButton = require('./TextButton');
|
||||||
@@ -9,15 +10,6 @@ function RulerHandler(viewport) {
|
|||||||
var _lines = { x: null, y: null };
|
var _lines = { x: null, y: null };
|
||||||
var _rect = { x: null, y: null };
|
var _rect = { x: null, y: null };
|
||||||
|
|
||||||
var Event = {
|
|
||||||
/**
|
|
||||||
* Triggers when handlebar is moved
|
|
||||||
*/
|
|
||||||
onMove: function () {
|
|
||||||
updateRulerText(this);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
function updateRulerText(ruler) {
|
function updateRulerText(ruler) {
|
||||||
var axis = ruler.axis;
|
var axis = ruler.axis;
|
||||||
var bounds = viewport.getBounds();
|
var bounds = viewport.getBounds();
|
||||||
@@ -32,6 +24,15 @@ function RulerHandler(viewport) {
|
|||||||
ruler.setText(Math.round(dim * 100) / 100 + ' ' + viewport.getData().dim.units);
|
ruler.setText(Math.round(dim * 100) / 100 + ' ' + viewport.getData().dim.units);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
var Event = {
|
||||||
|
/**
|
||||||
|
* Triggers when handlebar is moved
|
||||||
|
*/
|
||||||
|
onMove: function () {
|
||||||
|
updateRulerText(this);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @return {fabric.Line}
|
* @return {fabric.Line}
|
||||||
*/
|
*/
|
||||||
|
|||||||
+14
-7
@@ -1,13 +1,18 @@
|
|||||||
'use strict';
|
'use strict';
|
||||||
|
/* globals $, fabric */
|
||||||
|
|
||||||
var config = require('./config');
|
var config = require('./config');
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Creates a text-button with text/settings provided.
|
* Creates a text-button with text/settings provided.
|
||||||
* @param {String} text - text to be shown inside the button
|
* @param {string} id
|
||||||
|
* @param {string} text - text to be shown inside the button
|
||||||
* @param {Object} settings
|
* @param {Object} settings
|
||||||
|
* @param {bool} isActive
|
||||||
*/
|
*/
|
||||||
function TextButton(id, text, settings, isActive) {
|
function TextButton(id, text, settings, isActive) {
|
||||||
|
/* jshint unused:false */
|
||||||
|
|
||||||
fabric.Group.call(this);
|
fabric.Group.call(this);
|
||||||
|
|
||||||
var __active = isActive || false;
|
var __active = isActive || false;
|
||||||
@@ -65,7 +70,15 @@ function TextButton(id, text, settings, isActive) {
|
|||||||
return this.__active;
|
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) {
|
function handleMouseDown(e) {
|
||||||
|
/*jshint validthis: true */
|
||||||
toggleActiveStyle.call(this);
|
toggleActiveStyle.call(this);
|
||||||
_callback.call(this, e);
|
_callback.call(this, e);
|
||||||
|
|
||||||
@@ -74,12 +87,6 @@ function TextButton(id, text, settings, isActive) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggleActiveStyle() {
|
|
||||||
_rect.setFill(_rectSettings[this.isActive() ? 'activeFill' : 'fill']);
|
|
||||||
_text.setFill(_textSettings[this.isActive() ? 'activeFill' : 'fill']);
|
|
||||||
this.setText(_textSettings[this.isActive() ? 'textActive' : 'text']);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.onClick = function(callback) {
|
this.onClick = function(callback) {
|
||||||
_callback = callback || function() {};
|
_callback = callback || function() {};
|
||||||
this.on('mousedown', function (e) {
|
this.on('mousedown', function (e) {
|
||||||
|
|||||||
+47
-46
@@ -1,4 +1,5 @@
|
|||||||
'use strict';
|
'use strict';
|
||||||
|
/* globals $, fabric */
|
||||||
|
|
||||||
var FrameHandler = require('./FrameHandler');
|
var FrameHandler = require('./FrameHandler');
|
||||||
var GoreHandler = require('./GoreHandler');
|
var GoreHandler = require('./GoreHandler');
|
||||||
@@ -12,52 +13,6 @@ function Viewport(canvas) {
|
|||||||
var _rect;
|
var _rect;
|
||||||
var self = this;
|
var self = this;
|
||||||
|
|
||||||
/**
|
|
||||||
* 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: '#fff',
|
|
||||||
strokeWidth: canvas.__type === 'canvas' ? 0 : _borderWidth
|
|
||||||
});
|
|
||||||
|
|
||||||
_rect.width += _borderWidth;
|
|
||||||
_rect.height += _borderWidth;
|
|
||||||
_rect.addTo(canvas).center().setCoords();
|
|
||||||
|
|
||||||
if (cropData) {
|
|
||||||
// Calculate the new position after screenresize and when the
|
|
||||||
// image already has been cropped to a certain position.
|
|
||||||
var left = _rect.left + _rect.strokeWidth - (canvas.getImage().width * canvas.getImage().scaleX * cropData.x);
|
|
||||||
var top = _rect.top + _rect.strokeWidth - (canvas.getImage().height * canvas.getImage().scaleY * cropData.y);
|
|
||||||
|
|
||||||
canvas.getImage().set({ left: left, top: top }).setCoords();
|
|
||||||
} else {
|
|
||||||
canvas.getImage().center().setCoords();
|
|
||||||
}
|
|
||||||
|
|
||||||
canvas.getImage().drag.enable(calcMinMaxBoundsForRect(_rect.getInsideBoundingRect(), canvas.getImage()));
|
|
||||||
canvas.getApertures().apply(_data.axis, _rect.getBoundingRect());
|
|
||||||
|
|
||||||
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();
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Render the diagonal lines from viewport to edge of the canvas
|
* Render the diagonal lines from viewport to edge of the canvas
|
||||||
*/
|
*/
|
||||||
@@ -108,6 +63,52 @@ function Viewport(canvas) {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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: '#fff',
|
||||||
|
strokeWidth: canvas.__type === 'canvas' ? 0 : _borderWidth
|
||||||
|
});
|
||||||
|
|
||||||
|
_rect.width += _borderWidth;
|
||||||
|
_rect.height += _borderWidth;
|
||||||
|
_rect.addTo(canvas).center().setCoords();
|
||||||
|
|
||||||
|
if (cropData) {
|
||||||
|
// Calculate the new position after screenresize and when the
|
||||||
|
// image already has been cropped to a certain position.
|
||||||
|
var left = _rect.left + _rect.strokeWidth - (canvas.getImage().width * canvas.getImage().scaleX * cropData.x);
|
||||||
|
var top = _rect.top + _rect.strokeWidth - (canvas.getImage().height * canvas.getImage().scaleY * cropData.y);
|
||||||
|
|
||||||
|
canvas.getImage().set({ left: left, top: top }).setCoords();
|
||||||
|
} else {
|
||||||
|
canvas.getImage().center().setCoords();
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas.getImage().drag.enable(calcMinMaxBoundsForRect(_rect.getInsideBoundingRect(), canvas.getImage()));
|
||||||
|
canvas.getApertures().apply(_data.axis, _rect.getBoundingRect());
|
||||||
|
|
||||||
|
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.canvas = canvas;
|
||||||
|
|
||||||
this.getBounds = function () {
|
this.getBounds = function () {
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
'use strict';
|
'use strict';
|
||||||
|
/* globals $, fabric */
|
||||||
|
|
||||||
var Draggable = require('./Draggable');
|
var Draggable = require('./Draggable');
|
||||||
var util = require('./util');
|
var util = require('./util');
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
'use strict';
|
'use strict';
|
||||||
|
/* globals window */
|
||||||
|
|
||||||
(function() {
|
(function() {
|
||||||
|
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
'use strict';
|
'use strict';
|
||||||
|
/* globals $, window */
|
||||||
|
|
||||||
function isMobile() {
|
function isMobile() {
|
||||||
return $(window).width() < 768;
|
return $(window).width() < 768;
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
var isFullscreen = require('./is-fullscreen');
|
var isFullscreen = require('./is-fullscreen');
|
||||||
/**
|
/**
|
||||||
* Toggles the full screen state for passed DOM object
|
* Toggles the full screen state for passed DOM object
|
||||||
* @param {HTMLElement} elm
|
* @param {HTMLElement} elem
|
||||||
*/
|
*/
|
||||||
function toggleFullscreen(elem) {
|
function toggleFullscreen(elem) {
|
||||||
if (isFullscreen()) {
|
if (isFullscreen()) {
|
||||||
|
|||||||
@@ -20,7 +20,7 @@
|
|||||||
assert.strictEqual(data.width, 400, 'sets image width');
|
assert.strictEqual(data.width, 400, 'sets image width');
|
||||||
assert.strictEqual(data.height, 200, 'sets image height');
|
assert.strictEqual(data.height, 200, 'sets image height');
|
||||||
assert.strictEqual(data.x, 0, 'sets crop x');
|
assert.strictEqual(data.x, 0, 'sets crop x');
|
||||||
assert.strictEqual(data.y.toFixed(7), 0.12482117310443483.toFixed(7), 'sets crop y');
|
assert.strictEqual(data.y.toFixed(7), (0.12482117310443483).toFixed(7), 'sets crop y');
|
||||||
done();
|
done();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user