photowall/image-editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

P5-3564 - Add eslint and run with --fix

Browse Source
This commit is contained in:
Anders Gustafsson
2019-02-22 14:25:19 +01:00
parent 8c1fc65d72
commit c89c1ce609
47 changed files with 4355 additions and 3393 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.eslintrc
+34
View File
@@ -0,0 +1,34 @@
{
"env": {
"browser": true,
"commonjs": true
},
"extends": ["eslint:recommended"],
"rules": {
"no-console": 0,
"strict": [
"error",
"safe"
],
"indent": [
"error",
2
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
],
"comma-dangle": [
"error",
"only-multiline"
]
}
}
README.md
+6 -1
View File
@@ -1,3 +1,8 @@
Photowall Image Editor
======================
Image editor for the Photowall web project
Image editor for the Photowall web project
# Linting
Linting can be run manually with
`npm run lint`
dist/image-editor.js
Vendored
+1598 -1598
View File
File diff suppressed because it is too large Load Diff
examples/.eslintrc
+7
View File
@@ -0,0 +1,7 @@
{
"globals": {
"$": false,
"ImageEditor": false,
"QUnit": false
}
}
examples/basic/app.js
+151 -151
View File
@@ -8,174 +8,174 @@
(function() {
var $document = $(document);
var $window = $(window);
var $wrapper = $('#wrapper');
var $formControl = $('#form-control');
var editor = null;
var widthInCm, heightInCm;
var $document = $(document);
var $window = $(window);
var $wrapper = $('#wrapper');
var $formControl = $('#form-control');
var editor = null;
var widthInCm, heightInCm;
// Inputs for the editor
var $input = {
w: $formControl.find('input[name="w"]'),
h: $formControl.find('input[name="h"]'),
units: $formControl.find('select[name="units"]'),
image_id: $formControl.find('input[name="image_id"]'),
mirror: $formControl.find('input[name="mirror"]'),
noCrop: $formControl.find('input[name="no-crop"]'),
border: $formControl.find('select[name="canvas-border"]'),
// Inputs for the editor
var $input = {
w: $formControl.find('input[name="w"]'),
h: $formControl.find('input[name="h"]'),
units: $formControl.find('select[name="units"]'),
image_id: $formControl.find('input[name="image_id"]'),
mirror: $formControl.find('input[name="mirror"]'),
noCrop: $formControl.find('input[name="no-crop"]'),
border: $formControl.find('select[name="canvas-border"]'),
};
var imageUrl = '//images.photowall.com/products/' + $input.image_id.val() + '.jpg?h=450';
widthInCm = $input.w.val();
heightInCm = $input.h.val();
function isFullscreen() {
return document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
}
function getOptimalDimension(values, currentDimension, ratio) {
if (currentDimension === 'h') {
values.width = Math.round(values.height * ratio);
} else {
values.height = Math.round(values.width / ratio);
}
return values;
}
function handleDimensionChange() {
var noCropIsChecked = $input.noCrop.is(':checked');
var data = editor.canvas.getViewport().getData();
var values = {
width: $input.w.val(),
height: $input.h.val(),
};
var imageUrl = '//images.photowall.com/products/' + $input.image_id.val() + '.jpg?h=450';
widthInCm = $input.w.val();
heightInCm = $input.h.val();
function isFullscreen() {
return document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
if (noCropIsChecked) {
var currentDimension = $(this).attr('name') === 'h' ? 'h' : 'w';
values = getOptimalDimension(values, currentDimension, data.objectRatio);
}
function getOptimalDimension(values, currentDimension, ratio) {
if (currentDimension === 'h') {
values.width = Math.round(values.height * ratio);
} else {
values.height = Math.round(values.width / ratio);
}
$input.w.val(values.width);
$input.h.val(values.height);
return values;
if ($input.units.val() == 'inch') {
widthInCm = Math.round(values.width * 2.54);
heightInCm = Math.round(values.height * 2.54);
}
else {
widthInCm = values.width;
heightInCm = values.height;
}
function handleDimensionChange() {
var noCropIsChecked = $input.noCrop.is(':checked');
var data = editor.canvas.getViewport().getData();
var values = {
width: $input.w.val(),
height: $input.h.val(),
};
editor.crop(values.width, values.height, $input.units.val());
}
if (noCropIsChecked) {
var currentDimension = $(this).attr('name') === 'h' ? 'h' : 'w';
values = getOptimalDimension(values, currentDimension, data.objectRatio);
}
function handleMirrorChange() {
editor.canvas.getMirror().set(this.checked);
}
$input.w.val(values.width);
$input.h.val(values.height);
function handleNoCropChange() {
$input.w.trigger('input');
}
if ($input.units.val() == 'inch') {
widthInCm = Math.round(values.width * 2.54);
heightInCm = Math.round(values.height * 2.54);
}
else {
widthInCm = values.width;
heightInCm = values.height;
}
function handleFrameChange() {
editor.crop(values.width, values.height, $input.units.val());
if ($(this).val() === 'none') {
editor.canvas.toggle3D(false);
}
function handleMirrorChange() {
editor.canvas.getMirror().set(this.checked);
}
editor.canvas.getViewport().setFrame($(this).val());
}
function handleNoCropChange() {
function handleResize() {
var width = $wrapper.width();
var height = isFullscreen() ? $window.height() : $wrapper.height();
editor.canvas.resize({width: width, height: height});
}
function getWrapperData() {
var $navbar = $('.image-editor__navbar');
var isFullScreen = isFullscreen();
var isMobile = $window.width() <= 767;
var windowHeight = window.innerHeight ? window.innerHeight : $window.height();
var windowWidth = window.innerWidth ? window.innerWidth : $window.width();
return {
width: isFullScreen ? windowWidth : (isMobile ? windowWidth : $wrapper.width()),
height: isFullScreen ? windowHeight : (isMobile ? windowHeight - $navbar.height() : $wrapper.height())
};
}
function handleUnitsChange() {
switch ($input.units.val()) {
case 'inch':
$input.w.val(Math.round(widthInCm / 2.54 * 100) / 100);
$input.h.val(Math.round(heightInCm / 2.54 * 100) / 100);
break;
case 'cm':
default:
$input.w.val(widthInCm);
$input.h.val(heightInCm);
break;
}
handleDimensionChange();
}
function eventHandlers() {
$input.w.on('input', handleDimensionChange);
$input.h.on('input', handleDimensionChange);
$input.mirror.on('change', handleMirrorChange);
$input.noCrop.on('change', handleNoCropChange);
$input.border.on('change', handleFrameChange);
$input.units.on('change', handleUnitsChange);
$document
.on('PIE:dragged', function() {
console.log('Dragged the image/dragbar!');
})
.on('PIE:needs-dragging', function(e, data) {
console.log('Image needs dragging on: ' + data.axis);
})
.on('PIE:dragbar-click', function(e, data) {
console.log('Clicked on a dragbar! Axis: ' + data.axis);
})
.on('PIE:image-start-load', function() {
console.log('Start loading image');
})
.on('PIE:image-end-load', function() {
console.log('Image loaded');
});
$window.on('resize', handleResize);
}
function init() {
editor = new ImageEditor('canvas-editor', {
type: 'wallpaper',
buttons: {
showThreeD: '3d',
hideThreeD: 'Flat',
showMurals: 'show-murals',
hideMurals: 'hide-murals',
showRulers: 'show-rulers',
hideRulers: 'hide-rulers',
showFullscreen: 'show-fullscreen',
exitFullscreen: 'exit-fullscreen',
},
dimensions: getWrapperData()
})
.loadImage(imageUrl, function() {
$input.w.trigger('input');
}
handleResize();
});
function handleFrameChange() {
eventHandlers();
}
if ($(this).val() === 'none') {
editor.canvas.toggle3D(false);
}
editor.canvas.getViewport().setFrame($(this).val());
}
function handleResize() {
var width = $wrapper.width();
var height = isFullscreen() ? $window.height() : $wrapper.height();
editor.canvas.resize({width: width, height: height});
}
function getWrapperData() {
var $navbar = $('.image-editor__navbar');
var isFullScreen = isFullscreen();
var isMobile = $window.width() <= 767;
var windowHeight = window.innerHeight ? window.innerHeight : $window.height();
var windowWidth = window.innerWidth ? window.innerWidth : $window.width();
return {
width: isFullScreen ? windowWidth : (isMobile ? windowWidth : $wrapper.width()),
height: isFullScreen ? windowHeight : (isMobile ? windowHeight - $navbar.height() : $wrapper.height())
};
}
function handleUnitsChange() {
switch ($input.units.val()) {
case 'inch':
$input.w.val(Math.round(widthInCm / 2.54 * 100) / 100);
$input.h.val(Math.round(heightInCm / 2.54 * 100) / 100);
break;
case 'cm':
default:
$input.w.val(widthInCm);
$input.h.val(heightInCm);
break;
}
handleDimensionChange();
}
function eventHandlers() {
$input.w.on('input', handleDimensionChange);
$input.h.on('input', handleDimensionChange);
$input.mirror.on('change', handleMirrorChange);
$input.noCrop.on('change', handleNoCropChange);
$input.border.on('change', handleFrameChange);
$input.units.on('change', handleUnitsChange);
$document
.on('PIE:dragged', function() {
console.log('Dragged the image/dragbar!');
})
.on('PIE:needs-dragging', function(e, data) {
console.log('Image needs dragging on: ' + data.axis);
})
.on('PIE:dragbar-click', function(e, data) {
console.log('Clicked on a dragbar! Axis: ' + data.axis);
})
.on('PIE:image-start-load', function() {
console.log('Start loading image');
})
.on('PIE:image-end-load', function() {
console.log('Image loaded');
});
$window.on('resize', handleResize);
}
function init() {
editor = new ImageEditor('canvas-editor', {
type: 'wallpaper',
buttons: {
showThreeD: '3d',
hideThreeD: 'Flat',
showMurals: 'show-murals',
hideMurals: 'hide-murals',
showRulers: 'show-rulers',
hideRulers: 'hide-rulers',
showFullscreen: 'show-fullscreen',
exitFullscreen: 'exit-fullscreen',
},
dimensions: getWrapperData()
})
.loadImage(imageUrl, function() {
$input.w.trigger('input');
handleResize();
});
eventHandlers();
}
init();
init();
}());
gulpfile.js
+10 -10
View File
@@ -1,5 +1,5 @@
var gulp = require('gulp');
var browserify = require('browserify')
var browserify = require('browserify');
var buffer = require('vinyl-buffer');
var rename = require('gulp-rename');
var source = require('vinyl-source-stream');
@@ -7,17 +7,17 @@ var jshint = require('gulp-jshint');
var qunit = require('gulp-qunit');
gulp.task('build', function() {
return browserify('./src/main.js')
.bundle()
.pipe(source('main.js'))
.pipe(buffer())
.pipe(rename('image-editor.js'))
.pipe(gulp.dest('./dist'));
return browserify('./src/main.js')
.bundle()
.pipe(source('main.js'))
.pipe(buffer())
.pipe(rename('image-editor.js'))
.pipe(gulp.dest('./dist'));
});
gulp.task('test', ['build'], function() {
return gulp.src('./test/index.html')
.pipe(qunit({timeout: 1}));
return gulp.src('./test/index.html')
.pipe(qunit({timeout: 1}));
});
gulp.task('lint', function() {
@@ -27,7 +27,7 @@ gulp.task('lint', function() {
});
gulp.task('watch', function() {
gulp.watch('./src/**/*.js', ['build']);
gulp.watch('./src/**/*.js', ['build']);
});
gulp.task('default', ['lint', 'build']);
package-lock.json
Generated
+910 -11
View File
File diff suppressed because it is too large Load Diff
package.json
+8 -4
View File
@@ -8,13 +8,17 @@
},
"devDependencies": {
"browserify": "^13.1.1",
"eslint": "^5.14.1",
"gulp": "^3.9.0",
"gulp-jshint": "^2.0.4",
"gulp-qunit": "^1.5.0",
"gulp-rename": "^1.2.2",
"jshint": "^2.9.5",
"qunit": "^1.0.0",
"gulp-jshint": "^2.0.4",
"gulp-rename": "^1.2.2",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"gulp-qunit": "^1.5.0"
"vinyl-source-stream": "^1.1.0"
},
"scripts": {
"lint": "eslint gulpfile.js 'examples/**/*.js' 'test/unit/**/*.js' 'src/**/*.js'"
}
}
src/.eslintrc
+7
View File
@@ -0,0 +1,7 @@
{
"rules": {
"no-console":[
"error"
]
}
}
src/3dHandler.js
+64 -64
View File
@@ -6,102 +6,102 @@
* @param {canvas} canvas
*/
function ThreeDHandler(canvas) {
var _overlay = new fabric.Group();
var _image;
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,
}));
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);
}
canvas.add(_overlay);
}
init();
init();
/**
/**
* Disables the 3d image by removing visibility
* @return {ThreeDHandler}
*/
this.disable = function () {
_overlay.setVisible(false).canvas.resize();
return this;
};
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();
this.enable = function () {
_overlay
.set({
width: canvas.width,
visible: true
}).bringToFront();
canvas.getButtonMenu().bringToFront();
canvas.renderAll();
return this;
};
canvas.getButtonMenu().bringToFront();
canvas.renderAll();
return this;
};
/**
/**
* Checks if 3d mode is enabled/visible.
* @returns {boolean}
*/
this.isEnabled = function () {
return _overlay.visible;
};
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.refreshImage = function() {
_overlay.set({
width: canvas.width,
});
this.applyImage();
};
this.applyImage();
};
/**
/**
* (Re)adds the new/existing image with new configuration to the overlay.
* @param {img}
*/
this.applyImage = function(img) {
img = img || _image;
this.applyImage = function(img) {
img = img || _image;
_overlay
.remove(_image)
.add(_image = canvas.getResizedImage(img));
};
_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.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();
};
this.applyImage(img);
return this.enable();
};
}
src/ApertureHandler.js
+61 -61
View File
@@ -6,94 +6,94 @@
* @param {canvas} canvas
*/
function ApertureHandler(canvas) {
var _items = {x: [], y: []};
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,
});
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
});
var yRect = xRect.clone().set({
width: bounds.width / 2,
height: bounds.height
});
_items.x = [].concat([xRect, xRect.clone()]);
_items.y= [].concat([yRect, yRect.clone()]);
_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();
[].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;
});
this.apply = function (axis, viewport) {
this.getApertures(axis).forEach(function (o) {
o.visible = false;
});
var active = this.getApertures(axis === 'x' ? 'y' : 'x');
var active = this.getApertures(axis === 'x' ? 'y' : 'x');
active.forEach(function (o) {
o.visible = true;
});
active.forEach(function (o) {
o.visible = true;
});
active[0].width= active[1].width = canvas.width;
active[0].height = active[1].height = canvas.height;
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;
}
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();
});
this.getApertures().forEach(function (o) {
o.setCoords();
});
canvas.renderAll();
};
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);
};
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;
});
this.setTransparent = function (apply) {
this.getApertures().forEach(function (o) {
o.opacity = apply ? 0.7 : 1;
});
canvas.renderAll();
return this;
};
canvas.renderAll();
return this;
};
this.disable = function () {
this.getApertures().forEach(function (o) {
o.visible = false;
});
};
this.disable = function () {
this.getApertures().forEach(function (o) {
o.visible = false;
});
};
}
module.exports = ApertureHandler;
src/ButtonMenu.js
+91 -91
View File
@@ -9,143 +9,143 @@ var TextButton = require('./TextButton');
* @param {Object=} settings
*/
function ButtonMenu(canvas, settings) {
var _textButtons = [];
var _width = 0;
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);
}
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})
);
this.addItem = function(id, text, callback, isActive) {
_textButtons.push(
new TextButton(id, text, settings, isActive)
.onClick(callback)
.set({__group: this})
);
return 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;
};
this.bringToFront = function() {
_textButtons.forEach(function(textButton) {
textButton.bringToFront();
});
return this;
};
/**
/**
* Gets all buttons inside the menu.
* @return {Array}
*/
this.getItems = function() {
return _textButtons;
};
this.getItems = function() {
return _textButtons;
};
/**
/**
* Gets the full width of the buttonMenu.
* @return {Number}
*/
this.getWidth = function() {
return _width;
};
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);
}
});
};
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);
}
});
};
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
});
});
};
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
});
});
};
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();
this.render = function() {
setWidth();
var start = canvas.width / 2 - this.getWidth() / 2;
var currPos = Math.round(start);
var start = canvas.width / 2 - this.getWidth() / 2;
var currPos = Math.round(start);
_textButtons.forEach(function(textButton) {
textButton
.set({
top: 10,
left: currPos
})
.setCoords();
_textButtons.forEach(function(textButton) {
textButton
.set({
top: 10,
left: currPos
})
.setCoords();
if (!textButton.canvas) {
textButton.addTo(canvas);
}
currPos += Math.round(textButton.width + settings.margin);
if (!textButton.canvas) {
textButton.addTo(canvas);
}
currPos += Math.round(textButton.width + settings.margin);
// Disable moving of text-buttons
textButton.lockMovementX = textButton.lockMovementY = true;
});
// Disable moving of text-buttons
textButton.lockMovementX = textButton.lockMovementY = true;
});
canvas.renderAll();
canvas.renderAll();
this.show();
this.show();
return this;
};
return this;
};
}
module.exports = ButtonMenu;
src/Canvas.js
+158 -158
View File
@@ -19,221 +19,221 @@ var $document = $(document);
* 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
});
},
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;
}
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();
},
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;
},
disableScroll: function() {
this.set({
allowTouchScrolling: false
});
return this;
},
enableScroll: function() {
this.set({
allowTouchScrolling: true
});
return this;
},
enableScroll: function() {
this.set({
allowTouchScrolling: true
});
return this;
},
get3dHandler: function () {
return this.__3dHandler ||
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,
];
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');
}
if (imageData.mirrored) {
params.push('mirror=1');
}
return this.getImage().__url.replace(/\?h=\d+$/, '?') + params.join('&');
},
return this.getImage().__url.replace(/\?h=\d+$/, '?') + params.join('&');
},
getApertures: function () {
return this.__aperturehandler ||
getApertures: function () {
return this.__aperturehandler ||
(this.__aperturehandler = new ApertureHandler(this));
},
},
/**
/**
*
* @returns {DragbarHandler}
*/
getDragbars: function () {
return this.__dragbars ||
getDragbars: function () {
return this.__dragbars ||
(this.__dragbars = new DragbarHandler(this));
},
},
/**
/**
* @return {fabric.Image}
*/
getImage: function () {
return this.__image;
},
getImage: function () {
return this.__image;
},
/**
/**
* @return {MirrorHandler}
*/
getMirror: function () {
return this.__mirror ||
getMirror: function () {
return this.__mirror ||
(this.__mirror = new MirrorHandler(this.getImage()));
},
},
/**
/**
* @return {MirrorHandler}
*/
getImageData: function () {
return this.__imageData ||
getImageData: function () {
return this.__imageData ||
(this.__imageData = new ImageDataHandler(this.getImage()));
},
},
/**
/**
* @return {Viewport}
*/
getViewport: function () {
return this.__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;
},
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;
},
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);
},
removeImage: function () {
if (!this.__image) {
return this;
}
this.__imageData = null;
return this.remove(this.__image);
},
refreshImage: function(img) {
this.__image = img;
return this;
},
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;
},
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;
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);
img.scaleToHeight(maxHeight < img.height ? maxHeight : img.height);
img.scaleToWidth(maxWidth < (img.width * img.scaleX) ? maxWidth : img.width * img.scaleX);
return img;
},
return img;
},
toggle3D: function (showAs3d) {
toggle3D: function (showAs3d) {
this.getButtonMenu().setButtonActive('toggle3d', showAs3d);
this.getButtonMenu().setButtonActive('toggle3d', showAs3d);
if (!showAs3d) {
return this.get3dHandler().disable();
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;
}
$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));
},
this.get3dHandler().setImage(img);
$document.trigger('PIE:image-end-load');
}.bind(this));
}.bind(this));
},
});
module.exports = Canvas;
src/DragHandle.js
+124 -124
View File
@@ -5,145 +5,145 @@ var config = require('./config');
var util = require('./util');
var DragHandle = function (handler) {
var _currentAxis;
var _dragHandle;
var _clickHandle = false;
var _movedHandle;
var _currentAxis;
var _dragHandle;
var _clickHandle = false;
var _movedHandle;
// Event declarations
var events = {
mouseDown: function () {
if(handler.canvas.__type !== 'wallpaper') {
_dragHandle = true;
}
// 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;
}
_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;
}
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;
}
_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);
//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;
// 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();
}
};
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,
}));
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,
});
return new fabric.Group([rect, txt]).set({
evented: false,
});
}
this.getCanvas = function () {
return handler.canvas;
};
this.getHandles = function () {
if (!this.__handles) {
return [];
}
this.getCanvas = function () {
return handler.canvas;
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 canvas = this.getCanvas();
var viewport = canvas.getViewport();
var viewportData = viewport.getData();
var frameHandler = viewport.getFrameHandler();
var tracks = handler.getTracks();
if (this.__handles) {
this.getCanvas().remove(this.__handles.x);
this.getCanvas().remove(this.__handles.y);
}
var frameWidth = frameHandler.getFrameSize(); // Rendered frameWidth, in pixels.
var realFrameWidth = canvas.__canvasFrameSize; // Real frame size, in cm.
var frameType = frameHandler.getFrameType();
var handleWidth = viewportData.width;
var handleHeight = viewportData.height;
var widthToDisplay = viewportData.dim.width;
var heightToDisplay = viewportData.dim.height;
var unit = viewportData.dim.units;
if (frameType == 'image') {
var doubleRealFrameWidth = realFrameWidth * 2;
handleWidth -= frameWidth * 2;
handleHeight -= frameWidth * 2;
widthToDisplay -= unit == 'inch' ? doubleRealFrameWidth / 2.54 : doubleRealFrameWidth;
heightToDisplay -= unit == 'inch' ? doubleRealFrameWidth / 2.54 : doubleRealFrameWidth;
}
this.__handles = {
x: getRect(widthToDisplay + ' ' + unit, handleWidth),
y: getRect(heightToDisplay + ' ' + unit, handleHeight)
};
this.getHandles = function () {
if (!this.__handles) {
return [];
}
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();
return [].concat(this.__handles.x, this.__handles.y);
};
this.getCanvas()
.on('mouse:move', events.mouseMove)
.on('mouse:up', events.mouseUp);
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 canvas = this.getCanvas();
var viewport = canvas.getViewport();
var viewportData = viewport.getData();
var frameHandler = viewport.getFrameHandler();
var tracks = handler.getTracks();
if (this.__handles) {
this.getCanvas().remove(this.__handles.x);
this.getCanvas().remove(this.__handles.y);
}
var frameWidth = frameHandler.getFrameSize(); // Rendered frameWidth, in pixels.
var realFrameWidth = canvas.__canvasFrameSize; // Real frame size, in cm.
var frameType = frameHandler.getFrameType();
var handleWidth = viewportData.width;
var handleHeight = viewportData.height;
var widthToDisplay = viewportData.dim.width;
var heightToDisplay = viewportData.dim.height;
var unit = viewportData.dim.units;
if (frameType == 'image') {
var doubleRealFrameWidth = realFrameWidth * 2;
handleWidth -= frameWidth * 2;
handleHeight -= frameWidth * 2;
widthToDisplay -= unit == 'inch' ? doubleRealFrameWidth / 2.54 : doubleRealFrameWidth;
heightToDisplay -= unit == 'inch' ? doubleRealFrameWidth / 2.54 : doubleRealFrameWidth;
}
this.__handles = {
x: getRect(widthToDisplay + ' ' + unit, handleWidth),
y: getRect(heightToDisplay + ' ' + unit, handleHeight)
};
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));
};
tracks.x.on('mousedown', events.mouseDown.bind(tracks.x));
tracks.y.on('mousedown', events.mouseDown.bind(tracks.y));
};
};
module.exports = DragHandle;
src/DragbarHandler.js
+93 -93
View File
@@ -5,127 +5,127 @@ var DragHandle = require('./DragHandle');
var config = require('./config');
function DragbarHandler(canvas) {
var _dragbars = {
x: null,
y: null
};
var _dragbars = {
x: null,
y: null
};
/**
/**
* @return {DragbarHandler}
*/
this.apply = function () {
if (!canvas.__hasDragbars) {
this.init();
canvas.__hasDragbars = true;
}
this.sync();
this.apply = function () {
if (!canvas.__hasDragbars) {
this.init();
canvas.__hasDragbars = true;
}
this.sync();
if (!this.__handles) {
this.__handles = new DragHandle(this);
}
if (!this.__handles) {
this.__handles = new DragHandle(this);
}
this.__handles.init();
this.__handles.init();
this.bringToFront();
this.bringToFront();
canvas.renderAll();
return this;
};
canvas.renderAll();
return this;
};
this.canvas = canvas;
this.canvas = canvas;
this.bringToFront = function() {
[].concat(_dragbars.x, _dragbars.y).forEach(function (dragbar) {
dragbar.bringToFront();
});
this.bringToFront = function() {
[].concat(_dragbars.x, _dragbars.y).forEach(function (dragbar) {
dragbar.bringToFront();
});
this.__handles.getHandles().forEach(function (handle) {
handle.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.clear = function () {
canvas
.remove(_dragbars.x)
.remove(_dragbars.y)
.renderAll();
return this;
};
this.getTracks = function () {
return _dragbars;
};
this.getTracks = function () {
return _dragbars;
};
this.resetPosition = function() {
if (!_dragbars.y || !_dragbars.x) {
return this;
}
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.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();
_dragbars.x.set({
top: canvas.height - 30,
width: canvas.getImage().width * canvas.getImage().scaleY,
}).setCoords();
this.__handles.setHandlePosition();
this.__handles.setHandlePosition();
return this;
};
return this;
};
/**
/**
* @return {DragbarHandler}
*/
this.init = function () {
this.clear();
var typeIsWallpaper = canvas.__type === 'wallpaper';
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.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();
_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);
canvas.getImage().on('moving', this.sync);
return this;
};
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;
};
this.sync = function () {
_dragbars.x.set({left: canvas.getImage().left}).setCoords();
_dragbars.y.set({top: canvas.getImage().top}).setCoords();
return this;
};
}
module.exports = DragbarHandler;
src/Draggable.js
+50 -50
View File
@@ -7,69 +7,69 @@ var util = require('./util');
* @param {fabric.Rect} boundingRect
*/
function Draggable(img, boundingRect) {
var _bounds = boundingRect;
var _img = img;
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);
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();
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();
};
util.setPositionInside(this, _bounds);
}
// Attach onMove event to image
_img.on('moving', onMove);
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 mouse up event to canvas, can't do mouse up events on canvas objects.
_img.canvas.on('mouse:up', this.onMouseUp.bind(_img));
// 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;
}
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;
}
// @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;
};
_img.lockMovementX = _img.lockMovementY = false;
_img.selectable = true;
_img.hoverCursor = 'move';
return this;
};
}
module.exports = Draggable;
src/FrameHandler.js
+97 -97
View File
@@ -4,146 +4,146 @@
var config = require('./config');
function FrameHandler(viewport) {
var _frames;
var _frameType = viewport.canvas.__canvasFrameType;
var _frameSize;
var _frames;
var _frameType = viewport.canvas.__canvasFrameType;
var _frameSize;
function getFramesAsArray() {
return [
_frames.top, _frames.right, _frames.bottom, _frames.left
];
}
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);
function initFrames() {
var frame = new fabric.Rect(config.frames.default);
_frames = {
top: frame.clone(),
right: frame.clone(),
bottom: frame.clone(),
left: frame.clone()
};
_frames = {
top: frame.clone(),
right: frame.clone(),
bottom: frame.clone(),
left: frame.clone()
};
getFramesAsArray().forEach(function (o) {
viewport.canvas.add(o);
});
}
getFramesAsArray().forEach(function (o) {
viewport.canvas.add(o);
});
}
function init() {
initFrames();
}
function init() {
initFrames();
}
init();
init();
/**
/**
* @return {String}
*/
this.getFrameType = function () {
return _frameType;
};
this.getFrameType = function () {
return _frameType;
};
this.getFrameSize = function() {
return _frameSize;
};
this.getFrameSize = function() {
return _frameSize;
};
this.setVisible = function (isVisible) {
isVisible = typeof isVisible === 'undefined' ? true : !!isVisible;
this.setVisible = function (isVisible) {
isVisible = typeof isVisible === 'undefined' ? true : !!isVisible;
getFramesAsArray().forEach(function (frame) {
frame.set({ visible: isVisible });
});
getFramesAsArray().forEach(function (frame) {
frame.set({ visible: isVisible });
});
viewport.canvas.renderAll();
viewport.canvas.renderAll();
return this;
};
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();
this.setFrames = function (frameType) {
var bounds = viewport.getBounds();
frameType = frameType || _frameType || 'image';
_frameType = frameType;
frameType = frameType || _frameType || 'image';
_frameType = frameType;
if (!frameType) {
return;
}
if (!frameType) {
return;
}
if (frameType === 'none') {
viewport.canvas.getDragbars().apply();
return this.setVisible(false);
}
if (frameType === 'none') {
viewport.canvas.getDragbars().apply();
return this.setVisible(false);
}
this.setVisible(true);
this.setVisible(true);
getFramesAsArray().forEach(function (o) {
o.set(config.frames[frameType]);
});
getFramesAsArray().forEach(function (o) {
o.set(config.frames[frameType]);
});
var vpData = viewport.getData();
var realFrameSize = 29; // Actual real life frame size width in mm.
var vpData = viewport.getData();
var realFrameSize = 29; // Actual real life frame size width in mm.
_frameSize = vpData.ppmm * realFrameSize * viewport.canvas.getImage().scaleX;
_frameSize = vpData.ppmm * realFrameSize * viewport.canvas.getImage().scaleX;
_frames.top.height =
_frames.top.height =
_frames.bottom.height =
_frames.right.width =
_frames.left.width = _frameSize;
_frames.top.width = _frames.bottom.width = vpData.width;
_frames.right.height = _frames.left.height = vpData.height;
_frames.top.width = _frames.bottom.width = vpData.width;
_frames.right.height = _frames.left.height = vpData.height;
if (frameType === 'image') {
_frames.top.width -= _frameSize * 2;
_frames.bottom.width = _frames.top.width;
_frames.right.height -= _frameSize * 2;
_frames.left.height = _frames.right.height;
if (frameType === 'image') {
_frames.top.width -= _frameSize * 2;
_frames.bottom.width = _frames.top.width;
_frames.right.height -= _frameSize * 2;
_frames.left.height = _frames.right.height;
_frames.top.set({
top: bounds.top,
}).centerH().setCoords();
_frames.top.set({
top: bounds.top,
}).centerH().setCoords();
_frames.bottom.set({
top: (bounds.top + bounds.height - _frames.bottom.height) - 1
}).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.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.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.bottom.set({
top: (bounds.top + bounds.height) - 1,
}).centerH().setCoords();
_frames.right.set({
left: (bounds.left + bounds.width) - 1
}).centerV().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.getDragbars().apply();
viewport.canvas.renderAll();
_frames.left.set({
left: (bounds.left - _frames.left.width) + 1
}).centerV().setCoords();
}
viewport.canvas.getDragbars().apply();
viewport.canvas.renderAll();
return this;
};
return this;
};
}
module.exports = FrameHandler;
src/GoreHandler.js
+47 -47
View File
@@ -2,78 +2,78 @@
/* globals fabric */
function GoreHandler(viewport) {
var _enabled = false;
var _lines = [];
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
});
}
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;
};
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();
this.enable = function (enabled) {
_enabled = enabled;
this.clear();
if (!_enabled) {
viewport.canvas.renderAll();
return this;
}
if (!_enabled) {
viewport.canvas.renderAll();
return this;
}
var viewportData = viewport.getData();
var bounds = viewport.getBounds();
var step = viewportData.ppmm * viewportData.image.scaleX * 450;
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));
var count = Math.ceil((bounds.width / step).toFixed(5));
for (var i = 1; i < count; i++) {
_lines.push(getLine(bounds.left + step * i));
}
for (var i = 1; i < count; i++) {
_lines.push(getLine(bounds.left + step * i));
}
_lines.forEach(function (o) {
viewport.canvas.add(o);
});
_lines.forEach(function (o) {
viewport.canvas.add(o);
});
viewport.canvas.renderAll();
viewport.canvas.renderAll();
return this;
};
return this;
};
/**
/**
* @return {GoreHandler}
*/
this.reset = function () {
return this.enable(_enabled);
};
this.reset = function () {
return this.enable(_enabled);
};
}
module.exports = GoreHandler;
src/ImageDataHandler.js
+50 -50
View File
@@ -3,70 +3,70 @@
function ImageDataHandler(img) {
var _cropData;
var _cropData;
/**
/**
* Gets information about how the cropped image is dragged
* @return {Object}
*/
this.getCropData = function () {
return _cropData;
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.setCropData = function() {
var viewportBounds = img.canvas.getViewport().getBounds();
if (!viewportBounds) {
return;
}
this.removeCropData = function() {
_cropData = null;
};
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();
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()
);
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';
}
if (img.canvas.__type === 'canvas') {
var frameHandler = img.canvas.getViewport().getFrameHandler();
returnValue.edge = frameHandler.getFrameType();
returnValue.framed = returnValue.edge !== 'none';
}
return returnValue;
};
return returnValue;
};
}
module.exports = ImageDataHandler;
src/ImageEditor.js
+150 -150
View File
@@ -5,198 +5,198 @@ var Canvas = require('./Canvas');
var util = require('./util');
function ImageEditor(canvasId, args) {
var _canvas;
var _canvas;
var _settings = $.extend({
// Type defaults to wallpaper
type: 'wallpaper',
// canvasFrameType defaults to image on frame
canvasFrameType: 'image',
canvasFrameSize: 2.9,
// 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);
var _settings = $.extend({
// Type defaults to wallpaper
type: 'wallpaper',
// canvasFrameType defaults to image on frame
canvasFrameType: 'image',
canvasFrameSize: 2.9,
// 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);
// 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.
// 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({
__type: _settings.type,
__texts: _settings.texts
__canvasFrameType: _settings.canvasFrameType,
__canvasFrameSize: _settings.canvasFrameSize,
});
} 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());
});
}
// 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,
__canvasFrameSize: _settings.canvasFrameSize,
});
} 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;
}
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);
}
});
_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;
this.crop = function (width, height, unit, removeTransparency) {
removeTransparency = typeof removeTransparency !== 'undefined' ? removeTransparency : false;
if (!width || !height) {
return this;
}
if (!width || !height) {
return this;
}
unit = typeof unit !== 'undefined' ? unit : _settings.unit;
var viewport = _canvas.getViewport();
var frameType = _canvas.__canvasFrameType;
unit = typeof unit !== 'undefined' ? unit : _settings.unit;
var viewport = _canvas.getViewport();
var frameType = _canvas.__canvasFrameType;
if (frameType === 'image') {
var canvasFrameSize = unit === 'inch' ? _canvas.__canvasFrameSize / 2.54 : _canvas.__canvasFrameSize;
width += 2 * canvasFrameSize;
height += 2 * canvasFrameSize;
}
viewport.set(width, height, unit);
if (frameType === 'image') {
var canvasFrameSize = unit === 'inch' ? _canvas.__canvasFrameSize / 2.54 : _canvas.__canvasFrameSize;
width += 2 * canvasFrameSize;
height += 2 * canvasFrameSize;
}
viewport.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;
}
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);
}
if (removeTransparency) {
_canvas.getApertures().setTransparent(false);
}
return this;
};
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;
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};
};
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;
};
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;
};
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;
};
this.set = function (key, value) {
$.extend(_settings, util.assertKeyValuePair(key, value));
return this;
};
util.setProperties(this, {
canvas: {
get: function () {
return _canvas;
}
}
});
util.setProperties(this, {
canvas: {
get: function () {
return _canvas;
}
}
});
}
module.exports = ImageEditor;
src/MirrorHandler.js
+10 -10
View File
@@ -2,22 +2,22 @@
function MirrorHandler(img) {
var _mirrored = 0;
var _mirrored = 0;
/**
/**
* @param {Boolean} checked
* @return {MirrorHandler}
*/
this.set = function(checked) {
_mirrored = (img.flipX = checked) ? 1 : 0;
img.setCoords().canvas.renderAll();
this.set = function(checked) {
_mirrored = (img.flipX = checked) ? 1 : 0;
img.setCoords().canvas.renderAll();
return this;
};
return this;
};
this.getStatus = function() {
return _mirrored;
};
this.getStatus = function() {
return _mirrored;
};
}
src/RulerHandler.js
+92 -92
View File
@@ -6,130 +6,130 @@ 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 };
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 posWithinBounds = ruler[axis] - bounds[axis];
var viewportData = viewport.getData();
var imageData = viewport.canvas.getImage();
var pixelsPerCm = viewportData.ppmm * 10 * imageData.scaleX;
var dim = posWithinBounds / pixelsPerCm;
var units = viewportData.dim.units;
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 posWithinBounds = ruler[axis] - bounds[axis];
var viewportData = viewport.getData();
var imageData = viewport.canvas.getImage();
var pixelsPerCm = viewportData.ppmm * 10 * imageData.scaleX;
var dim = posWithinBounds / pixelsPerCm;
var units = viewportData.dim.units;
if (units === 'inch') {
dim /= 2.54;
}
if (axis === 'top') {
dim = viewportData.dim.height - dim;
}
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);
if (units === 'inch') {
dim /= 2.54;
}
if (axis === 'top') {
dim = viewportData.dim.height - dim;
}
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 = {
/**
var Event = {
/**
* Triggers when handlebar is moved
*/
onMove: function () {
updateRulerText(this);
}
};
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
});
}
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;
};
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();
this.enable = function (enabled) {
var bounds = viewport.getBounds();
var keepPosition = (
enabled && (_enabled === enabled) &&
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;
}
if (keepPosition) {
updateRulerText(_rect.x);
updateRulerText(_rect.y);
return this;
}
_enabled = enabled;
_enabled = enabled;
this.clear();
this.clear();
if (!_enabled) {
viewport.canvas.renderAll();
return this;
}
if (!_enabled) {
viewport.canvas.renderAll();
return this;
}
_lines = { x: getLine('x'), y: getLine('y') };
_lines = { x: getLine('x'), y: getLine('y') };
viewport.canvas.add(_lines.x);
viewport.canvas.add(_lines.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.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');
_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();
viewport.canvas.renderAll();
return this;
};
return this;
};
/**
/**
* @return {RulerHandler}
*/
this.reset = function () {
return this.enable(_enabled);
};
this.reset = function () {
return this.enable(_enabled);
};
}
module.exports = RulerHandler;
src/TextButton.js
+81 -81
View File
@@ -11,113 +11,113 @@ var config = require('./config');
* @param {bool} isActive
*/
function TextButton(id, text, settings, isActive) {
/* jshint unused:false */
/* jshint unused:false */
fabric.Group.call(this);
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 __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,
});
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;
this.selectable = true;
// Make sure we're interactive
this.disabled = false;
this.hoverCursor = config.textButton.cursor;
// 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);
// Initialize text and rectangle
_text = new fabric.Text('', _textSettings);
_rect = new fabric.Rect(_rectSettings);
this.addWithUpdate(_rect).addWithUpdate(_text);
this.addWithUpdate(_rect).addWithUpdate(_text);
/**
/**
* @param {String} text
* @return {TextButton}
*/
this.setText = function(text) {
_text.setText((text || '').toString()).setCoords();
this.setText = function(text) {
_text.setText((text || '').toString()).setCoords();
if (_rectSettings.dynamicW) {
this.width = _rect.width = _text.width + config.textButton.padding;
}
if (_rectSettings.dynamicW) {
this.width = _rect.width = _text.width + config.textButton.padding;
}
if (_rectSettings.dynamicH) {
this.height = _rect.height = _text.height + config.textButton.padding;
}
if (_rectSettings.dynamicH) {
this.height = _rect.height = _text.height + config.textButton.padding;
}
return this.setCoords();
};
return this.setCoords();
};
this.getId = function() {
return _id;
};
this.getId = function() {
return _id;
};
/**
/**
* @return {Boolean}
*/
this.isActive = function() {
return this.__active;
};
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 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();
}
}
function handleMouseDown(e) {
/*jshint validthis: true */
toggleActiveStyle.call(this);
_callback.call(this, e);
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;
};
if (this.__group) {
this.__group.render();
}
}
this.setActive = function (isActive) {
this.__active = typeof isActive === 'undefined' ? true : !!isActive;
toggleActiveStyle.call(this);
};
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.setDisabled = function (isDisabled)
{
this.disabled = isDisabled;
this.setActive = function (isActive) {
this.__active = typeof isActive === 'undefined' ? true : !!isActive;
toggleActiveStyle.call(this);
};
_rect.setFill(_rectSettings[this.disabled ? 'disabledFill' : 'fill']);
_text.setFill(_textSettings[this.disabled ? 'disabledFill' : 'fill']);
this.setDisabled = function (isDisabled)
{
this.disabled = isDisabled;
this.hoverCursor = this.disabled ? config.textButton.disabledCursor : config.textButton.cursor;
};
_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);
}
if (_textSettings.text) {
this.setText(_textSettings.text);
}
}
TextButton.prototype = Object.create(fabric.Group.prototype);
src/Viewport.js
+145 -145
View File
@@ -7,203 +7,203 @@ var RulerHandler = require('./RulerHandler');
var util = require('./util');
function Viewport(canvas) {
var _beams = [];
var _borderWidth = 2;
var _data = null;
var _rect;
var self = this;
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);
});
function drawBeams() {
_beams.forEach(function (beam) {
canvas.remove(beam);
});
_beams = [];
_beams = [];
// TOP LEFT
_beams.push(new fabric.Line(
[_rect.left, _rect.top, _rect.left - _rect.top, -1], {
stroke: '#fff',
strokeWidth: 2,
}
));
// 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 }));
// 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();
});
}
_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
}
};
}
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);
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 = 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();
_rect.width += _borderWidth;
_rect.height += _borderWidth;
_rect.addTo(canvas).center().setCoords();
if (cropData) {
var viewportBounds = _rect.getInsideBoundingRect();
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);
// 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(canvas.__canvasFrameType);
}
canvas.getDragbars().apply();
// Apertures sometimes overlaps the viewports bounding rect.
// Solve this by bringing it to the front after apertures are applied.
_rect.bringToFront();
canvas.getImage().set({ left: left, top: top }).setCoords();
} else {
canvas.getImage().center().setCoords();
canvas.getImageData().setCropData();
}
this.canvas = canvas;
if(canvas.__type !== 'wallpaper') {
canvas.getImage().drag.enable(calcMinMaxBoundsForRect(_rect.getInsideBoundingRect(), canvas.getImage()));
canvas.getApertures().apply(_data.axis, _rect.getBoundingRect());
} else {
canvas.getApertures().disable();
}
this.getBounds = function () {
return _rect ? _rect.getInsideBoundingRect() : null;
};
if (canvas.__type !== 'canvas') {
drawBeams();
} else {
self.setFrame(canvas.__canvasFrameType);
}
/**
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;
};
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;
}
this.set = function (width, height, units) {
if (!width || !height) {
return this;
}
_data = util.calcCrop(canvas.getImage(), width, height, units);
_data = util.calcCrop(canvas.getImage(), width, height, units);
var cropData = canvas.getImageData().getCropData();
var isAspectTheSame = !!(cropData && !util.isAspectChanged(cropData.viewportWidth, cropData.viewportHeight, width, height));
var cropData = canvas.getImageData().getCropData();
var isAspectTheSame = !!(cropData && !util.isAspectChanged(cropData.viewportWidth, cropData.viewportHeight, width, height));
if (!isAspectTheSame) {
canvas.getImageData().removeCropData();
}
if (!isAspectTheSame) {
canvas.getImageData().removeCropData();
}
apply();
this.getGores().reset();
this.getRulers().reset();
apply();
this.getGores().reset();
this.getRulers().reset();
if (canvas.getImage().__cropped && !isAspectTheSame) {
canvas.getApertures().setTransparent(true);
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 });
}
// Trigger event to tell the image needs to be dragged.
$(document).trigger('PIE:needs-dragging', { axis: _data.axis });
}
canvas.getButtonMenu().bringToFront();
canvas.getButtonMenu().bringToFront();
return this;
};
return this;
};
/**
/**
* @param {string} frameType white|black|image|none
* @return {Viewport}
*/
this.setFrame = function (frameType) {
this.getFrameHandler().setFrames(frameType);
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();
var buttons = canvas.getButtonMenu().getItems();
if (frameType === 'none') {
buttons[0].setDisabled(true);
}
else {
buttons[0].setDisabled(false);
}
canvas.getButtonMenu().bringToFront();
canvas.refresh3dView();
};
canvas.refresh3dView();
};
this.getData = function () {
return _data;
};
this.getData = function () {
return _data;
};
var _frameHandler = null;
var _frameHandler = null;
this.getFrameHandler = function () {
return _frameHandler || (_frameHandler = new FrameHandler(this));
};
this.getFrameHandler = function () {
return _frameHandler || (_frameHandler = new FrameHandler(this));
};
this.getGores = function () {
return this.__goreHandler || (this.__goreHandler = new GoreHandler(this));
};
this.getGores = function () {
return this.__goreHandler || (this.__goreHandler = new GoreHandler(this));
};
this.getRulers = function () {
return this.__rulerHandler || (this.__rulerHandler = new RulerHandler(this));
};
this.getRulers = function () {
return this.__rulerHandler || (this.__rulerHandler = new RulerHandler(this));
};
}
src/config.js
+6 -6
View File
@@ -1,10 +1,10 @@
'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')
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')
};
src/config/button-menu.js
+32 -32
View File
@@ -2,40 +2,40 @@
module.exports = {
canvas: {
margin: 5,
text: {
fill: '#ffffff',
activeFill: '#ffffff',
},
rect: {
fill: '#343434',
activeFill: '#494949',
},
canvas: {
margin: 5,
text: {
fill: '#ffffff',
activeFill: '#ffffff',
},
'photo-wallpaper': {
margin: 5,
text: {
fill: '#ffffff',
activeFill: '#ffffff',
},
rect: {
fill: '#000000',
activeFill: '#444444',
},
rect: {
fill: '#343434',
activeFill: '#494949',
},
},
wallpaper: {
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',
},
}
};
src/config/drag-bar.js
+2 -2
View File
@@ -1,6 +1,6 @@
'use strict';
module.exports = {
fill: '#bbbbbb',
size: 20,
fill: '#bbbbbb',
size: 20,
};
src/config/drag-handle.js
+12 -12
View File
@@ -1,16 +1,16 @@
'use strict';
module.exports = {
text: {
fontFamily: 'breuer',
fontSize: 12,
fill: '#ffffff',
originX: 'center',
top: 2,
},
rect: {
fill: '#666666',
height: 20,
originX: 'center',
},
text: {
fontFamily: 'breuer',
fontSize: 12,
fill: '#ffffff',
originX: 'center',
top: 2,
},
rect: {
fill: '#666666',
height: 20,
originX: 'center',
},
};
src/config/frames.js
+18 -18
View File
@@ -2,26 +2,26 @@
module.exports = {
default: {
fill: '#000000',
stroke: '#f31fb3',
width: 1,
height: 1,
},
default: {
fill: '#000000',
stroke: '#f31fb3',
width: 1,
height: 1,
},
image: {
fill: 'rgba(0,0,0,0.2)',
strokeWidth: 1,
},
image: {
fill: 'rgba(0,0,0,0.2)',
strokeWidth: 1,
},
black: {
fill: '#000000',
strokeWidth: 0,
},
black: {
fill: '#000000',
strokeWidth: 0,
},
white: {
fill: '#ffffff',
strokeWidth: 0,
},
white: {
fill: '#ffffff',
strokeWidth: 0,
},
};
src/config/ruler-handle.js
+40 -40
View File
@@ -2,46 +2,46 @@
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
};
},
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',
},
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',
};
}
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',
};
}
};
src/config/text-button.js
+24 -24
View File
@@ -2,30 +2,30 @@
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,
};
},
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',
},
text: {
fill: '#ffffff',
disabledFill: '#999999',
fontFamily: 'breuer',
fontSize: 14,
originX: 'center',
originY: 'center',
},
cursor: 'pointer',
disabledCursor: 'default',
padding: 20,
cursor: 'pointer',
disabledCursor: 'default',
padding: 20,
};
src/extend-fabric-functionality.js
+43 -43
View File
@@ -6,59 +6,59 @@ 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;
},
});
// 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));
}
}
});
util.setProperties(fabric.Image.prototype, {
drag: {
get: function() {
return this.__draggable || (this.__draggable = new Draggable(this));
}
}
});
$.extend(fabric.Rect.prototype, {
/**
$.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
};
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.right = returnValue.left + returnValue.width;
returnValue.bottom = returnValue.top + returnValue.height;
returnValue.min = {
left: returnValue.left,
top: returnValue.top
};
returnValue.min = {
left: returnValue.left,
top: returnValue.top
};
returnValue.max = {
left: returnValue.left + returnValue.width,
top: returnValue.top + returnValue.height
};
returnValue.max = {
left: returnValue.left + returnValue.width,
top: returnValue.top + returnValue.height
};
return returnValue;
}
});
return returnValue;
}
});
}
module.exports = ExtendFabricFunctionality;
src/main.js
+4 -4
View File
@@ -3,17 +3,17 @@
(function() {
/**
/**
* Fabric functionality is extended with some custom functionality. This is done before
* we do anything else.
*/
require('./extend-fabric-functionality')();
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');
window.ImageEditor = require('./ImageEditor');
}());
src/util.js
+11 -11
View File
@@ -2,15 +2,15 @@
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'),
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'),
};
src/utils/assert-between.js
+7 -7
View File
@@ -1,13 +1,13 @@
'use strict';
function assertBetween(value, min, max) {
if (value < min) {
return min;
}
if (value > max) {
return max;
}
return value;
if (value < min) {
return min;
}
if (value > max) {
return max;
}
return value;
}
module.exports = assertBetween;
src/utils/assert-key-value-pair.js
+6 -6
View File
@@ -1,14 +1,14 @@
'use strict';
function assertKeyValuePair(key, value) {
if (typeof key === 'object') {
return key;
}
if (typeof key === 'object') {
return key;
}
var returnValue = {};
returnValue[key] = value;
var returnValue = {};
returnValue[key] = value;
return returnValue;
return returnValue;
}
module.exports = assertKeyValuePair;
src/utils/calc-crop.js
+27 -27
View File
@@ -13,38 +13,38 @@
* 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 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
};
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;
}
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);
// 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;
//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;
return returnValue;
}
module.exports = calcCrop;
src/utils/is-aspect-changed.js
+1 -1
View File
@@ -1,7 +1,7 @@
'use strict';
function isAspectChanged(x1, y1, x2, y2) {
return (Math.abs(x1 / y1 - x2 / y2) > 0.005);
return (Math.abs(x1 / y1 - x2 / y2) > 0.005);
}
module.exports = isAspectChanged;
src/utils/is-fullscreen.js
+1 -1
View File
@@ -1,7 +1,7 @@
'use strict';
function isFullscreen() {
return document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
return document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
}
module.exports = isFullscreen;
src/utils/is-mobile.js
+1 -1
View File
@@ -2,7 +2,7 @@
/* globals $, window */
function isMobile() {
return $(window).width() < 768;
return $(window).width() < 768;
}
module.exports = isMobile;
src/utils/mouse-metrics.js
+16 -16
View File
@@ -1,24 +1,24 @@
'use strict';
var MouseMetrics = {
previousMouseData: {
x: null,
y: null
},
previousMouseData: {
x: null,
y: null
},
deletePreviousMouseData: function() {
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,
};
},
setPreviousMouseData: function(values) {
MouseMetrics.previousMouseData = {
x: values.x || null,
y: values.y || null,
};
},
};
module.exports = MouseMetrics;
src/utils/set-position-inside.js
+9 -9
View File
@@ -6,16 +6,16 @@
* @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();
}
['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;
if (obj[v] > bounds[v].max) {
obj.set(v, bounds[v].max).setCoords();
}
});
return obj;
}
module.exports = setPositionInside;
src/utils/set-properties.js
+4 -4
View File
@@ -5,11 +5,11 @@
* @param {Object} properties
*/
function setProperties(obj, properties) {
for (var o in properties) {
if (properties.hasOwnProperty(o)) {
Object.defineProperty(obj, o, properties[o]);
}
for (var o in properties) {
if (properties.hasOwnProperty(o)) {
Object.defineProperty(obj, o, properties[o]);
}
}
}
module.exports = setProperties;
src/utils/supports-fullscreen.js
+1 -1
View File
@@ -2,7 +2,7 @@
function supportsFullscreen() {
return document.documentElement.requestFullscreen || document.documentElement.webkitRequestFullScreen || document.documentElement.mozRequestFullScreen || document.documentElement.msRequestFullscreen;
return document.documentElement.requestFullscreen || document.documentElement.webkitRequestFullScreen || document.documentElement.mozRequestFullScreen || document.documentElement.msRequestFullscreen;
}
src/utils/toggle-fullscreen.js
+20 -20
View File
@@ -6,28 +6,28 @@ var isFullscreen = require('./is-fullscreen');
* @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 (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();
}
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;
test/.eslintrc
+6
View File
@@ -0,0 +1,6 @@
{
"globals": {
"QUnit": false,
"ImageEditor": false
}
}
test/unit/image-editor.js
+20 -20
View File
@@ -1,28 +1,28 @@
(function() {
QUnit.module('ImageEditor');
QUnit.module('ImageEditor');
QUnit.test('load image', function(assert) {
var done = assert.async();
var editor = new ImageEditor('canvas');
editor.loadImage('fixtures/dog.jpg', function() {
assert.ok(editor.canvas.getImage(), 'image loaded');
done();
});
QUnit.test('load image', function(assert) {
var done = assert.async();
var editor = new ImageEditor('canvas');
editor.loadImage('fixtures/dog.jpg', function() {
assert.ok(editor.canvas.getImage(), 'image loaded');
done();
});
});
QUnit.test('crop image', function(assert) {
var done = assert.async();
var editor = new ImageEditor('canvas');
editor.loadImage('fixtures/dog.jpg', function() {
editor.crop(400, 200, 'cm');
var data = editor.canvas.getImageData().getData();
assert.strictEqual(data.width, 400, 'sets image width');
assert.strictEqual(data.height, 200, 'sets image height');
assert.strictEqual(data.x, 0, 'sets crop x');
assert.strictEqual(data.y.toFixed(7), (0.12482117310443483).toFixed(7), 'sets crop y');
done();
});
QUnit.test('crop image', function(assert) {
var done = assert.async();
var editor = new ImageEditor('canvas');
editor.loadImage('fixtures/dog.jpg', function() {
editor.crop(400, 200, 'cm');
var data = editor.canvas.getImageData().getData();
assert.strictEqual(data.width, 400, 'sets image width');
assert.strictEqual(data.height, 200, 'sets image height');
assert.strictEqual(data.x, 0, 'sets crop x');
assert.strictEqual(data.y.toFixed(7), (0.12482117310443483).toFixed(7), 'sets crop y');
done();
});
});
})();