Initial commit
This commit is contained in:
Rikard Bartholf
@@ -0,0 +1,2 @@
|
|||||||
|
node_modules
|
||||||
|
dist
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
{
|
||||||
|
"globalstrict": true,
|
||||||
|
|
||||||
|
"globals": {
|
||||||
|
"$": false,
|
||||||
|
"console": false,
|
||||||
|
"document": false,
|
||||||
|
"fabric": false,
|
||||||
|
"jQuery": false,
|
||||||
|
"module": false,
|
||||||
|
"QUnit": false,
|
||||||
|
"require": false,
|
||||||
|
"strict": false,
|
||||||
|
"node": false
|
||||||
|
},
|
||||||
|
"browserify": false,
|
||||||
|
"strict": true,
|
||||||
|
"curly": true,
|
||||||
|
"forin": true,
|
||||||
|
"latedef": true,
|
||||||
|
"noarg": true,
|
||||||
|
"nonbsp": true,
|
||||||
|
"undef": true,
|
||||||
|
"unused": true,
|
||||||
|
"eqeqeq": true,
|
||||||
|
"esversion": 5,
|
||||||
|
"freeze": true,
|
||||||
|
"futurehostile": true,
|
||||||
|
"scripturl": true
|
||||||
|
}
|
||||||
@@ -0,0 +1,35 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
const gulp = require('gulp');
|
||||||
|
const path = require('path');
|
||||||
|
const browserify = require('browserify');
|
||||||
|
const source = require('vinyl-source-stream');
|
||||||
|
const buffer = require('vinyl-buffer');
|
||||||
|
const uglifyJs = require('gulp-uglify');
|
||||||
|
const sourcemaps = require('gulp-sourcemaps');
|
||||||
|
const concat = require('gulp-concat');
|
||||||
|
const rename = require('gulp-rename');
|
||||||
|
const merge = require('merge-stream');
|
||||||
|
|
||||||
|
module.exports = () => {
|
||||||
|
const debug = browserify(path.join('src', 'js', 'main.js'), {
|
||||||
|
debug: true
|
||||||
|
})
|
||||||
|
.bundle()
|
||||||
|
.pipe(source('main.js'))
|
||||||
|
.pipe(buffer())
|
||||||
|
.pipe(sourcemaps.init({ loadMaps: true }))
|
||||||
|
.pipe(sourcemaps.write())
|
||||||
|
.pipe(gulp.dest(path.join('dist', 'js')));
|
||||||
|
|
||||||
|
const min = browserify(path.join('src', 'js', 'main.js'), {
|
||||||
|
debug: false
|
||||||
|
})
|
||||||
|
.bundle()
|
||||||
|
.pipe(source('main.min.js'))
|
||||||
|
.pipe(buffer())
|
||||||
|
.pipe(uglifyJs())
|
||||||
|
.pipe(gulp.dest(path.join('dist', 'js')));
|
||||||
|
|
||||||
|
return merge(debug, min);
|
||||||
|
};
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
const gulp = require('gulp');
|
||||||
|
const path = require('path');
|
||||||
|
const watch = require('gulp-watch');
|
||||||
|
|
||||||
|
module.exports = () => {
|
||||||
|
const less = watch(path.join('src', 'less', '**', '*.less'), () => {
|
||||||
|
gulp.start('compile-less');
|
||||||
|
});
|
||||||
|
|
||||||
|
const js = watch(path.join('src', 'js', '**', '*.js'), () => {
|
||||||
|
gulp.start('compile-js');
|
||||||
|
});
|
||||||
|
/*
|
||||||
|
const vendorJs = watch(path.join('src', 'vendor', '**', '*.js'), () => {
|
||||||
|
gulp.start('compile-vendor-js');
|
||||||
|
});
|
||||||
|
|
||||||
|
const handlebars = watch(path.join('src', 'js', 'handlebars', '**', '*.hbs'), () => {
|
||||||
|
gulp.start('compile-handlebars');
|
||||||
|
});
|
||||||
|
*/
|
||||||
|
};
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
+20
@@ -0,0 +1,20 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
const gulp = require('gulp');
|
||||||
|
const mkdirp = require('mkdirp');
|
||||||
|
const del = require('del');
|
||||||
|
const path = require('path');
|
||||||
|
const buildTasks = path.join(process.cwd(), 'build-tasks');
|
||||||
|
|
||||||
|
gulp.task('clean-dist', () => del('dist'));
|
||||||
|
//gulp.task('compile-vendor-js', require(path.join(buildTasks, 'compile-vendor-js')));
|
||||||
|
gulp.task('compile-js', require(path.join(buildTasks, 'compile-js')));
|
||||||
|
gulp.task('watcher', require(path.join(buildTasks, 'watcher')));
|
||||||
|
|
||||||
|
gulp.task('build', ['clean-dist'], () => {
|
||||||
|
mkdirp.sync('dist');
|
||||||
|
gulp.start('compile-js');
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('watch', ['build', 'watcher']);
|
||||||
|
gulp.task('default', ['build']);
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||||
|
<link rel="stylesheet" href="/main.css?123" />
|
||||||
|
<title>Crop - dev</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="container">
|
||||||
|
<h1>Test</h1>
|
||||||
|
<form id="form-control">
|
||||||
|
<div>
|
||||||
|
<input type="text" name="image_id" value="45809" />
|
||||||
|
<input type="text" name="w" value="100" />
|
||||||
|
<input type="text" name="h" value="100" />
|
||||||
|
Mirror: <input type="checkbox" class="image-control" name="mirror" />
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<br /><br />
|
||||||
|
<div id="wrapper">
|
||||||
|
<canvas id="canvas" width="1253" height="600" data-image-id="45809"></canvas>
|
||||||
|
</div>
|
||||||
|
<br /><br /><br />
|
||||||
|
</div>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.11/fabric.js"></script>
|
||||||
|
<script src="/dist/js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: breuer;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: normal;
|
||||||
|
src: url('/fonts/breuertext-regular-webfont.woff') format('woff'),
|
||||||
|
url('/fonts/breuertext-regular-webfont.ttf') format('truetype');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: breuerMedium;
|
||||||
|
src: url('/fonts/breuertext-medium-webfont.woff') format('woff'),
|
||||||
|
url('/fonts/breuertext-medium-webfont.ttf') format('truetype');
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
font-family: breuer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#container {
|
||||||
|
background: #fff;
|
||||||
|
text-align:center;
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.canvas-container {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
@@ -0,0 +1,39 @@
|
|||||||
|
{
|
||||||
|
"name": "Croppy",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"description": "Croppy",
|
||||||
|
"main": "gulpfile.js",
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git@bitbucket.org:rikbar/croppy.git"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"browserify": "^13.1.1",
|
||||||
|
"del": "^2.2.2",
|
||||||
|
"gulp": "^3.9.0",
|
||||||
|
"gulp-autoprefixer": "^3.1.1",
|
||||||
|
"gulp-concat": "^2.6.0",
|
||||||
|
"gulp-declare": "^0.3.0",
|
||||||
|
"gulp-handlebars": "^4.0.0",
|
||||||
|
"gulp-jscs": "^4.0.0",
|
||||||
|
"gulp-jshint": "^2.0.4",
|
||||||
|
"gulp-less": "^3.0.3",
|
||||||
|
"gulp-pxtorem": "^2.0.0",
|
||||||
|
"gulp-rename": "^1.2.2",
|
||||||
|
"gulp-sourcemaps": "^1.9.1",
|
||||||
|
"gulp-strip-comments": "^2.4.3",
|
||||||
|
"gulp-uglify": "^2.0.0",
|
||||||
|
"gulp-uglifycss": "^1.0.6",
|
||||||
|
"gulp-watch": "^4.3.11",
|
||||||
|
"gulp-wrap": "^0.13.0",
|
||||||
|
"handlebars": "^4.0.6",
|
||||||
|
"jshint": "^2.9.4",
|
||||||
|
"gulp-wrap": "^0.13.0",
|
||||||
|
"handlebars": "^4.0.6",
|
||||||
|
"jshint-stylish": "^2.2.1",
|
||||||
|
"merge-stream": "^1.0.1",
|
||||||
|
"mkdirp": "^0.5.1",
|
||||||
|
"vinyl-buffer": "^1.0.0",
|
||||||
|
"vinyl-source-stream": "^1.1.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,69 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
function ApertureHandler(canvas) {
|
||||||
|
var _items = {x: [], y: []};
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
var bounds = canvas;
|
||||||
|
var hRect = new fabric.Rect({
|
||||||
|
width: bounds.width,
|
||||||
|
height: bounds.height / 2,
|
||||||
|
fill: canvas.backgroundColor,
|
||||||
|
opacity: 0.7,
|
||||||
|
});
|
||||||
|
|
||||||
|
var vRect = hRect.clone().set({
|
||||||
|
width: bounds.width / 2,
|
||||||
|
height: bounds.height
|
||||||
|
});
|
||||||
|
|
||||||
|
_items.x = [].concat([hRect, hRect.clone()]);
|
||||||
|
_items.y = [].concat([vRect, vRect.clone()]);
|
||||||
|
|
||||||
|
[].concat(_items.x, _items.y).forEach(function (o) {
|
||||||
|
canvas.add(o);
|
||||||
|
});
|
||||||
|
canvas.renderAll();
|
||||||
|
}
|
||||||
|
init();
|
||||||
|
|
||||||
|
this.apply = function (axis, viewport) {
|
||||||
|
this.getApertures(axis).forEach(function (o) {
|
||||||
|
o.visible = false;
|
||||||
|
});
|
||||||
|
|
||||||
|
var active = this.getApertures(axis === 'x' ? 'y' : 'x');
|
||||||
|
|
||||||
|
active.forEach(function (o) {
|
||||||
|
o.visible = true;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (axis === 'y') {
|
||||||
|
active[0].top = viewport.top - active[0].height + 0.5;
|
||||||
|
active[1].top = viewport.top + viewport.height - 0.5;
|
||||||
|
} else {
|
||||||
|
active[0].left = viewport.left - active[0].width + 0.5;
|
||||||
|
active[1].left = viewport.left + viewport.width - 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.getApertures().forEach(function (o) {
|
||||||
|
o.setCoords();
|
||||||
|
});
|
||||||
|
|
||||||
|
canvas.renderAll();
|
||||||
|
};
|
||||||
|
|
||||||
|
this.getApertures = function (axis) {
|
||||||
|
return axis ? _items[axis] : [].concat(_items.x, _items.y);
|
||||||
|
};
|
||||||
|
|
||||||
|
this.setTransparent = function (apply) {
|
||||||
|
this.getApertures().forEach(function (o) {
|
||||||
|
o.opacity = apply ? 0.7 : 1;
|
||||||
|
});
|
||||||
|
canvas.renderAll();
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = ApertureHandler;
|
||||||
@@ -0,0 +1,95 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
var TextButton = require('./TextButton');
|
||||||
|
|
||||||
|
function ButtonMenu(canvas, settings) {
|
||||||
|
var _items = [];
|
||||||
|
var _width = 0;
|
||||||
|
|
||||||
|
var _settings = $.extend({}, settings, {
|
||||||
|
background: '#444',
|
||||||
|
fontSize: 14,
|
||||||
|
height: 30,
|
||||||
|
margin: 5,
|
||||||
|
padding: 20
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Calculates the width of all contained items
|
||||||
|
* @return {Number}
|
||||||
|
*/
|
||||||
|
function calcWidth() {
|
||||||
|
var width = 0;
|
||||||
|
_items.forEach(function (o) {
|
||||||
|
width += o.width;
|
||||||
|
});
|
||||||
|
width += _settings.margin * (_items.length - 1);
|
||||||
|
return width;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {String} text
|
||||||
|
* @param {Function} callback
|
||||||
|
* @return {ButtonMenu}
|
||||||
|
*/
|
||||||
|
this.addItem = function (text, callback) {
|
||||||
|
_items.push(
|
||||||
|
new TextButton(text, _settings)
|
||||||
|
.onClick(callback)
|
||||||
|
.set({ __group: this })
|
||||||
|
);
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @return {ButtonMenu}
|
||||||
|
*/
|
||||||
|
this.bringToFront = function () {
|
||||||
|
_items.forEach(function (o) {
|
||||||
|
o.bringToFront();
|
||||||
|
});
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @return {Array}
|
||||||
|
*/
|
||||||
|
this.getItems = function () {
|
||||||
|
return _items;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @return {Number}
|
||||||
|
*/
|
||||||
|
this.getWidth = function () {
|
||||||
|
_width = calcWidth();
|
||||||
|
return _width;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Recalculate boundaries and add all items to canvas if required
|
||||||
|
* @return {ButtonMenu}
|
||||||
|
*/
|
||||||
|
this.render = function () {
|
||||||
|
var start = canvas.width / 2 - this.getWidth() / 2;
|
||||||
|
var currPos = Math.round(start);
|
||||||
|
|
||||||
|
_items.forEach(function (o) {
|
||||||
|
o.set({ top: 10, left: currPos })
|
||||||
|
.setCoords();
|
||||||
|
|
||||||
|
if (!o.canvas) {
|
||||||
|
o.addTo(canvas);
|
||||||
|
}
|
||||||
|
currPos += Math.round(o.width + _settings.margin);
|
||||||
|
|
||||||
|
// Disable moving of buttons
|
||||||
|
o.lockMovementX = o.lockMovementY = true;
|
||||||
|
});
|
||||||
|
|
||||||
|
canvas.renderAll();
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = ButtonMenu;
|
||||||
@@ -0,0 +1,102 @@
|
|||||||
|
'use strict';
|
||||||
|
var util = require('./Util');
|
||||||
|
var ApertureHandler = require('./ApertureHandler');
|
||||||
|
var ButtonMenu = require('./ButtonMenu');
|
||||||
|
var DragbarHandler = require('./DragbarHandler');
|
||||||
|
var Viewport = require('./Viewport');
|
||||||
|
|
||||||
|
var Canvas = fabric.util.createClass(fabric.Canvas, {
|
||||||
|
initialize: function (id) {
|
||||||
|
this.callSuper('initialize', id, {
|
||||||
|
enableRetinaScaling: true,
|
||||||
|
renderOnAddRemove: false,
|
||||||
|
stateful: false,
|
||||||
|
backgroundColor: '#d4d4d4',
|
||||||
|
preserveObjectStacking: true,
|
||||||
|
selection: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
this.on('mouse:up', function () {
|
||||||
|
if (this.image.__moved) {
|
||||||
|
this.aperture.setTransparent(false);
|
||||||
|
}
|
||||||
|
$(this.upperCanvasEl).css('cursor', 'default');
|
||||||
|
this.renderAll();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
get_apertures: function () {
|
||||||
|
return this.__aperturehandler ||
|
||||||
|
(this.__aperturehandler = new ApertureHandler(this));
|
||||||
|
},
|
||||||
|
|
||||||
|
get_dragbars: function () {
|
||||||
|
return this.__dragbars ||
|
||||||
|
(this.__dragbars = new DragbarHandler(this));
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @return {fabric.Image}
|
||||||
|
*/
|
||||||
|
get_image: function () {
|
||||||
|
return this.__image;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @return {Viewport}
|
||||||
|
*/
|
||||||
|
get_viewport: function () {
|
||||||
|
return this.__viewport ||
|
||||||
|
(this.__viewport = new Viewport(this));
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @return {Canvas}
|
||||||
|
*/
|
||||||
|
removeImage: function () {
|
||||||
|
if (!this.__image) {
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
return this.remove(this.__image);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {fabric.Image} img
|
||||||
|
* @return {Canvas}
|
||||||
|
*/
|
||||||
|
setImage: function (img) {
|
||||||
|
this.removeImage();
|
||||||
|
this.__image = img;
|
||||||
|
this.__image.addTo(this).center().on('mousedown', function () {
|
||||||
|
img.canvas.aperture.setTransparent(true);
|
||||||
|
}).setCoords();
|
||||||
|
this.viewport.reset();
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Define properties
|
||||||
|
util.setProperties(Canvas.prototype, {
|
||||||
|
aperture: {
|
||||||
|
get: Canvas.prototype.get_apertures
|
||||||
|
},
|
||||||
|
dragbars: {
|
||||||
|
get: Canvas.prototype.get_dragbars
|
||||||
|
},
|
||||||
|
image: {
|
||||||
|
get: Canvas.prototype.get_image
|
||||||
|
},
|
||||||
|
topMenu: {
|
||||||
|
get: function () {
|
||||||
|
if (!this.__topMenu) {
|
||||||
|
this.__topMenu = new ButtonMenu(this);
|
||||||
|
}
|
||||||
|
return this.__topMenu;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
viewport: {
|
||||||
|
get: Canvas.prototype.get_viewport
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
module.exports = Canvas;
|
||||||
@@ -0,0 +1,97 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
var DragHandle = function (handler) {
|
||||||
|
var _currentAxis;
|
||||||
|
var _dragging;
|
||||||
|
|
||||||
|
// Event declarations
|
||||||
|
var events = {
|
||||||
|
mouseDown: function () {
|
||||||
|
_dragging = true;
|
||||||
|
_currentAxis = this.axis;
|
||||||
|
handler.canvas.image.trigger('mousedown');
|
||||||
|
},
|
||||||
|
mouseUp: function () {
|
||||||
|
_dragging = false;
|
||||||
|
_currentAxis = null;
|
||||||
|
handler.canvas.image.trigger('mouseup');
|
||||||
|
},
|
||||||
|
mouseMove: function (e) {
|
||||||
|
if (!_dragging) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (_currentAxis === 'h') {
|
||||||
|
handler.canvas.image.left -= e.e.movementX;
|
||||||
|
} else {
|
||||||
|
handler.canvas.image.top -= e.e.movementY;
|
||||||
|
}
|
||||||
|
// Trigger moving for image, to stay within bounds
|
||||||
|
handler.canvas.image.setCoords().trigger('moving');
|
||||||
|
handler.canvas.renderAll();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function getRect(text, width) {
|
||||||
|
var txt = new fabric.Text(text, {
|
||||||
|
fontFamily: 'breuer',
|
||||||
|
fontSize: 12,
|
||||||
|
fill: '#fff',
|
||||||
|
originX: 'center',
|
||||||
|
top: 2
|
||||||
|
});
|
||||||
|
|
||||||
|
var rect = new fabric.Rect({
|
||||||
|
fill: '#666',
|
||||||
|
width: width,
|
||||||
|
height: 20,
|
||||||
|
originX: 'center',
|
||||||
|
});
|
||||||
|
|
||||||
|
return new fabric.Group([rect, txt]).set({
|
||||||
|
evented: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
this.getCanvas = function () {
|
||||||
|
return handler.canvas;
|
||||||
|
};
|
||||||
|
|
||||||
|
this.getHandles = function () {
|
||||||
|
if (!this.__handles) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
return [].concat(this.__handles.h, this.__handles.v);
|
||||||
|
};
|
||||||
|
|
||||||
|
this.init = function () {
|
||||||
|
var viewportData = this.getCanvas().viewport.data;
|
||||||
|
var tracks = handler.getTracks();
|
||||||
|
|
||||||
|
if (this.__handles) {
|
||||||
|
this.getCanvas().remove(this.__handles.h);
|
||||||
|
this.getCanvas().remove(this.__handles.v);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.__handles = {
|
||||||
|
h: getRect(viewportData.dim.width + ' cm', viewportData.width),
|
||||||
|
v: getRect(viewportData.dim.height + ' cm', viewportData.height)
|
||||||
|
};
|
||||||
|
|
||||||
|
this.__handles.h.addTo(this.getCanvas()).centerH().set({ top: tracks.h.top }).setCoords();
|
||||||
|
this.__handles.v.addTo(this.getCanvas())
|
||||||
|
.setAngle(90)
|
||||||
|
.centerV().set({ left: tracks.v.left + tracks.v.width })
|
||||||
|
.setCoords();
|
||||||
|
|
||||||
|
this.getCanvas()
|
||||||
|
.on('mouse:move', events.mouseMove)
|
||||||
|
.on('mouse:up', events.mouseUp);
|
||||||
|
|
||||||
|
tracks.h.on('mousedown', events.mouseDown.bind(tracks.h));
|
||||||
|
tracks.v.on('mousedown', events.mouseDown.bind(tracks.v));
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = DragHandle;
|
||||||
@@ -0,0 +1,81 @@
|
|||||||
|
'use strict';
|
||||||
|
var DragHandle = require('./DragHandle');
|
||||||
|
|
||||||
|
function DragbarHandler(canvas) {
|
||||||
|
var _items = { h: null, v: null };
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @return {DragbarHandler}
|
||||||
|
*/
|
||||||
|
this.apply = function () {
|
||||||
|
if (!canvas.__hasDragbars) {
|
||||||
|
this.init();
|
||||||
|
canvas.__hasDragbars = true;
|
||||||
|
}
|
||||||
|
this.sync();
|
||||||
|
|
||||||
|
if (!this.__handles) {
|
||||||
|
this.__handles = new DragHandle(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.__handles.init();
|
||||||
|
|
||||||
|
[].concat(_items.h, _items.v).forEach(function (o) {
|
||||||
|
o.bringToFront();
|
||||||
|
});
|
||||||
|
|
||||||
|
this.__handles.getHandles().forEach(function (o) {
|
||||||
|
o.bringToFront();
|
||||||
|
});
|
||||||
|
|
||||||
|
canvas.renderAll();
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
this.canvas = canvas;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Removes dragbars from canvas
|
||||||
|
*/
|
||||||
|
this.clear = function () {
|
||||||
|
canvas
|
||||||
|
.remove(_items.h)
|
||||||
|
.remove(_items.v)
|
||||||
|
.renderAll();
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
this.getTracks = function () {
|
||||||
|
return _items;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @return {DragbarHandler}
|
||||||
|
*/
|
||||||
|
this.init = function () {
|
||||||
|
this.clear();
|
||||||
|
|
||||||
|
_items.h = new fabric.Rect({ axis: 'h', fill: '#bbb', width: canvas.image.width, height: 20 })
|
||||||
|
.addTo(canvas)
|
||||||
|
.centerH().set({top: canvas.height - 30}).setCoords();
|
||||||
|
|
||||||
|
_items.v = new fabric.Rect({ axis: 'v', fill: '#bbb', width: 20, height: canvas.image.height })
|
||||||
|
.addTo(canvas)
|
||||||
|
.set({left: canvas.width - 30}).setCoords();
|
||||||
|
|
||||||
|
canvas.image.on('moving', this.sync);
|
||||||
|
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @return {DragbarHandler}
|
||||||
|
*/
|
||||||
|
this.sync = function () {
|
||||||
|
_items.h.set({left: canvas.image.left}).setCoords();
|
||||||
|
_items.v.set({top: canvas.image.top}).setCoords();
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = DragbarHandler;
|
||||||
@@ -0,0 +1,37 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
var util = require('./Util');
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {fabric.Image} img
|
||||||
|
* @param {fabric.Rect} boundingRect
|
||||||
|
*/
|
||||||
|
function Draggable(img, boundingRect) {
|
||||||
|
var _bounds = boundingRect;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Triggers when object is moved
|
||||||
|
*/
|
||||||
|
function onMove() {
|
||||||
|
this.__moved = true;
|
||||||
|
util.setPositionInside(this, _bounds);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Attach onMove event to image
|
||||||
|
img.on('moving', onMove);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {fabric.Rect} localBoundingRect
|
||||||
|
* @return {Draggable}
|
||||||
|
*/
|
||||||
|
this.enable = function (localBoundingRect) {
|
||||||
|
if (localBoundingRect) {
|
||||||
|
_bounds = localBoundingRect;
|
||||||
|
}
|
||||||
|
img.lockMovementX = img.lockMovementY = false;
|
||||||
|
img.selectable = true;
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = Draggable;
|
||||||
@@ -0,0 +1,70 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
function GoreHandler(viewport) {
|
||||||
|
var _enabled = false;
|
||||||
|
var _lines = [];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @return {fabric.Line}
|
||||||
|
*/
|
||||||
|
function getLine(left) {
|
||||||
|
return new fabric.Line([0, 0, 0, viewport.data.height], {
|
||||||
|
evented: false,
|
||||||
|
strokeDashArray: [5, 5],
|
||||||
|
stroke: '#000',
|
||||||
|
strokeWidth: 1,
|
||||||
|
left: left,
|
||||||
|
top: viewport.getBounds().top
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @return {GoreHandler}
|
||||||
|
*/
|
||||||
|
this.clear = function () {
|
||||||
|
_lines.forEach(function (o) {
|
||||||
|
viewport.canvas.remove(o);
|
||||||
|
});
|
||||||
|
_lines = [];
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {Boolean} enabled
|
||||||
|
* @return {GoreHandler}
|
||||||
|
*/
|
||||||
|
this.enable = function (enabled) {
|
||||||
|
_enabled = enabled;
|
||||||
|
this.clear();
|
||||||
|
|
||||||
|
if (!_enabled) {
|
||||||
|
viewport.canvas.renderAll();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var bounds = viewport.getBounds();
|
||||||
|
var step = viewport.data.ppmm * 450;
|
||||||
|
var count = Math.ceil(bounds.width / step);
|
||||||
|
|
||||||
|
for (var i = 1; i < count; i++) {
|
||||||
|
_lines.push(getLine(bounds.left + step * i));
|
||||||
|
}
|
||||||
|
|
||||||
|
_lines.forEach(function (o) {
|
||||||
|
viewport.canvas.add(o);
|
||||||
|
});
|
||||||
|
|
||||||
|
viewport.canvas.renderAll();
|
||||||
|
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @return {GoreHandler}
|
||||||
|
*/
|
||||||
|
this.reset = function () {
|
||||||
|
return this.enable(_enabled);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = GoreHandler;
|
||||||
@@ -0,0 +1,110 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
var Canvas = require('./Canvas');
|
||||||
|
var util = require('./Util');
|
||||||
|
|
||||||
|
function ImageEditor(args) {
|
||||||
|
var _canvas;
|
||||||
|
|
||||||
|
var _settings = $.extend({
|
||||||
|
'type': 'wallpaper'
|
||||||
|
}, args);
|
||||||
|
|
||||||
|
// Initialize canvas
|
||||||
|
_canvas = new Canvas('canvas');
|
||||||
|
|
||||||
|
_canvas.topMenu
|
||||||
|
.addItem(['Show Murals Panel', 'Hide Murals Panel'], function () {
|
||||||
|
_canvas.viewport.gores.enable(this.isActive());
|
||||||
|
})
|
||||||
|
.addItem(['Show Ruler', 'Hide Ruler'], function () {
|
||||||
|
_canvas.viewport.rulers.enable(this.isActive());
|
||||||
|
})
|
||||||
|
.addItem(['Fullscreen', 'Exit Fullscreen'], function () {
|
||||||
|
util.toggleFullScreen(_canvas.getSelectionElement().parentNode);
|
||||||
|
})
|
||||||
|
.render();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Crops image to desired dimensions
|
||||||
|
* @param {int} width [description]
|
||||||
|
* @param {int} height [description]
|
||||||
|
* @return {ImageEditor}
|
||||||
|
*/
|
||||||
|
this.crop = function (width, height) {
|
||||||
|
_canvas.viewport.set(width, height);
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {string|object} key
|
||||||
|
* @param {object} defaultValue
|
||||||
|
* @return {object}
|
||||||
|
*/
|
||||||
|
this.get = function (key, defaultValue) {
|
||||||
|
var value = _settings[key];
|
||||||
|
return typeof value === 'undefined' ? defaultValue : value;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {Number|String} url
|
||||||
|
* @param {Function} callback
|
||||||
|
* @return {ImageEditor}
|
||||||
|
*/
|
||||||
|
this.loadImage = function (url, callback) {
|
||||||
|
callback = typeof callback === 'function' ? callback : function () {};
|
||||||
|
fabric.Image.fromURL(url, function (img) {
|
||||||
|
_canvas.setImage(img);
|
||||||
|
callback(img);
|
||||||
|
});
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {string|object} key
|
||||||
|
* @param {object} value
|
||||||
|
* @return {ImageEditor}
|
||||||
|
*/
|
||||||
|
this.set = function (key, value) {
|
||||||
|
$.extend(_settings, util.assertKeyValuePair(key, value));
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
util.setProperties(this, {
|
||||||
|
canvas: {
|
||||||
|
get: function () {
|
||||||
|
return _canvas;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
$(function () {
|
||||||
|
// Inputs for the editor
|
||||||
|
var $input = {
|
||||||
|
w: $('#form-control input[name="w"]'),
|
||||||
|
h: $('#form-control input[name="h"]'),
|
||||||
|
image_id: $('#form-control input[name="image_id"]'),
|
||||||
|
mirror: $('#form-control input[name="mirror"]')
|
||||||
|
};
|
||||||
|
|
||||||
|
var imageUrl = '//images.photowall.com/products/' + $input.image_id.val() + '.jpg?h=450';
|
||||||
|
|
||||||
|
var editor = new ImageEditor({ 'type': 'canvas' })
|
||||||
|
.loadImage(imageUrl, function () {
|
||||||
|
$input.w.trigger('keyup');
|
||||||
|
});
|
||||||
|
|
||||||
|
var Event = {
|
||||||
|
DimensionChange: function () {
|
||||||
|
editor.crop($input.w.val(), $input.h.val());
|
||||||
|
},
|
||||||
|
Mirror: function () {
|
||||||
|
editor.canvas.image.transformation.set('mirror', this.checked);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
$input.w.keyup(Event.DimensionChange);
|
||||||
|
$input.h.keyup(Event.DimensionChange);
|
||||||
|
$input.mirror.click(Event.Mirror);
|
||||||
|
});
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
function ImageTransformationHandler(img) {
|
||||||
|
var _transformations = {};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {String} name
|
||||||
|
* @param {*} args
|
||||||
|
* @return {ImageTransformationHandler}
|
||||||
|
*/
|
||||||
|
this.set = function (name, args) {
|
||||||
|
switch (name) {
|
||||||
|
case 'mirror':
|
||||||
|
_transformations.mirror = (img.flipX = args);
|
||||||
|
}
|
||||||
|
img.setCoords().canvas.renderAll();
|
||||||
|
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = ImageTransformationHandler;
|
||||||
@@ -0,0 +1,119 @@
|
|||||||
|
'use strict';
|
||||||
|
var util = require('./Util');
|
||||||
|
var TextButton = require('./TextButton');
|
||||||
|
|
||||||
|
function RulerHandler(viewport) {
|
||||||
|
var _enabled = false;
|
||||||
|
var _lines = { h: null, v: null };
|
||||||
|
var _rect = { h: null, v: null };
|
||||||
|
|
||||||
|
var Event = {
|
||||||
|
/**
|
||||||
|
* Triggers when handlebar is moved
|
||||||
|
*/
|
||||||
|
onMove: function () {
|
||||||
|
var axis = this.axis;
|
||||||
|
var bounds = viewport.getBounds();
|
||||||
|
var pos = util.assertBetween(this[axis], bounds.min[axis], bounds.max[axis]);
|
||||||
|
this.marker[axis] = this[axis] = pos;
|
||||||
|
var dim = (this[axis] - bounds[axis]) / (viewport.data.ppmm * 10);
|
||||||
|
|
||||||
|
if (axis === 'left') {
|
||||||
|
dim = viewport.data.dim.width - dim;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (axis === 'top') {
|
||||||
|
dim = viewport.data.dim.height - dim;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.setText(Math.round(dim * 100) / 100 + ' cm');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @return {fabric.Line}
|
||||||
|
*/
|
||||||
|
function getLine(axis) {
|
||||||
|
var bounds = viewport.getBounds();
|
||||||
|
return new fabric.Line([
|
||||||
|
0, 0,
|
||||||
|
axis === 'h' ? bounds.width : 0,
|
||||||
|
axis === 'v' ? bounds.height : 0
|
||||||
|
], {
|
||||||
|
evented: false,
|
||||||
|
strokeDashArray: [5, 5],
|
||||||
|
stroke: '#000',
|
||||||
|
strokeWidth: 1,
|
||||||
|
top: axis === 'h' ? bounds.top + bounds.height / 2 : bounds.top,
|
||||||
|
left: axis === 'v' ? bounds.left + bounds.width / 2 : bounds.left
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @return {RulerHandler}
|
||||||
|
*/
|
||||||
|
this.clear = function () {
|
||||||
|
[].concat(_rect.h, _rect.v, _lines.h, _lines.v).forEach(function (o) {
|
||||||
|
viewport.canvas.remove(o);
|
||||||
|
});
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {Boolean} enabled
|
||||||
|
* @return {RulerHandler}
|
||||||
|
*/
|
||||||
|
this.enable = function (enabled) {
|
||||||
|
_enabled = enabled;
|
||||||
|
this.clear();
|
||||||
|
|
||||||
|
if (!_enabled) {
|
||||||
|
viewport.canvas.renderAll();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var bounds = viewport.getBounds();
|
||||||
|
|
||||||
|
_lines = { h: getLine('h'), v: getLine('v') };
|
||||||
|
|
||||||
|
viewport.canvas.add(_lines.h);
|
||||||
|
viewport.canvas.add(_lines.v);
|
||||||
|
|
||||||
|
var textSettings = {
|
||||||
|
width: 75,
|
||||||
|
height: 20,
|
||||||
|
color: '#3f3',
|
||||||
|
};
|
||||||
|
|
||||||
|
_rect.h = new TextButton('H', textSettings).set({
|
||||||
|
axis: 'left',
|
||||||
|
marker: _lines.v,
|
||||||
|
top: Math.ceil(bounds.top + bounds.height + 5),
|
||||||
|
left: _lines.v.left,
|
||||||
|
originX: 'center',
|
||||||
|
lockMovementY: true,
|
||||||
|
}).addTo(viewport.canvas).on('moving', Event.onMove).trigger('moving');
|
||||||
|
|
||||||
|
_rect.v = new TextButton('V', textSettings).set({
|
||||||
|
axis: 'top',
|
||||||
|
marker: _lines.h,
|
||||||
|
top: _lines.h.top,
|
||||||
|
left: Math.ceil(bounds.left + bounds.width + 5),
|
||||||
|
originY: 'center',
|
||||||
|
lockMovementX: true,
|
||||||
|
}).addTo(viewport.canvas).on('moving', Event.onMove).trigger('moving');
|
||||||
|
|
||||||
|
viewport.canvas.renderAll();
|
||||||
|
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @return {RulerHandler}
|
||||||
|
*/
|
||||||
|
this.reset = function () {
|
||||||
|
return this.enable(_enabled);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = RulerHandler;
|
||||||
@@ -0,0 +1,120 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
var defaults = {
|
||||||
|
activeBackground: '#000',
|
||||||
|
background: '#000',
|
||||||
|
color: '#fff',
|
||||||
|
fontFamily: 'breuer',
|
||||||
|
fontSize: 12,
|
||||||
|
padding: 10,
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {String} text
|
||||||
|
* @param {Object} settings
|
||||||
|
*/
|
||||||
|
function TextButton(text, settings) {
|
||||||
|
fabric.Group.call(this);
|
||||||
|
|
||||||
|
var _callback = function () {};
|
||||||
|
|
||||||
|
var _rect = null;
|
||||||
|
var _text = null;
|
||||||
|
|
||||||
|
settings = $.extend({}, defaults, settings);
|
||||||
|
|
||||||
|
settings.text = Array.isArray(text) ? text[0] : text;
|
||||||
|
settings.textActive = Array.isArray(text) ? text[1] : text;
|
||||||
|
|
||||||
|
var _rectSettings = {
|
||||||
|
fill: settings.background,
|
||||||
|
width: settings.width,
|
||||||
|
height: settings.height,
|
||||||
|
originX: 'center',
|
||||||
|
originY: 'center',
|
||||||
|
};
|
||||||
|
|
||||||
|
var _textSettings = {
|
||||||
|
fill: settings.color,
|
||||||
|
fontFamily: settings.fontFamily,
|
||||||
|
fontSize: settings.fontSize,
|
||||||
|
originX: 'center',
|
||||||
|
originY: 'center',
|
||||||
|
};
|
||||||
|
|
||||||
|
// If width or height is omitted, the size for this button needs to be
|
||||||
|
// calculated when setting Text.
|
||||||
|
// An initial value for width and height needs to be set, else we won't
|
||||||
|
// render correctly.
|
||||||
|
if ((settings.dynamicW = !settings.width)) {
|
||||||
|
_rectSettings.width = 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ((settings.dynamicH = !settings.height)) {
|
||||||
|
_rectSettings.height = 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Make sure we're interactive
|
||||||
|
this.selectable = true;
|
||||||
|
|
||||||
|
this.hoverCursor = 'default';
|
||||||
|
|
||||||
|
// Initialize text and rectangle
|
||||||
|
_text = new fabric.Text('', _textSettings);
|
||||||
|
_rect = new fabric.Rect(_rectSettings);
|
||||||
|
this.addWithUpdate(_rect)
|
||||||
|
.addWithUpdate(_text);
|
||||||
|
|
||||||
|
var Event = {
|
||||||
|
mouseDown: function (e) {
|
||||||
|
this.__active = !this.__active;
|
||||||
|
_rect.setFill(this.__active ? settings.activeBackground : settings.background);
|
||||||
|
this.setText(settings[this.isActive() ? 'textActive' : 'text']);
|
||||||
|
_callback.call(this, e);
|
||||||
|
|
||||||
|
if (this.__group) {
|
||||||
|
this.__group.render();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @return {Boolean}
|
||||||
|
*/
|
||||||
|
this.isActive = function () {
|
||||||
|
return this.__active;
|
||||||
|
};
|
||||||
|
|
||||||
|
this.onClick = function (callback) {
|
||||||
|
_callback = callback || function () {};
|
||||||
|
this.on('mousedown', Event.mouseDown);
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {String} text
|
||||||
|
* @return {TextButton}
|
||||||
|
*/
|
||||||
|
this.setText = function (text) {
|
||||||
|
_text.setText((text || '').toString()).setCoords();
|
||||||
|
|
||||||
|
if (settings.dynamicW) {
|
||||||
|
this.width = _rect.width = _text.width + settings.padding;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (settings.dynamicH) {
|
||||||
|
this.height = _rect.height = _text.height + settings.padding;
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.setCoords();
|
||||||
|
};
|
||||||
|
|
||||||
|
if (settings.text) {
|
||||||
|
this.setText(settings.text);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
TextButton.prototype = Object.create(fabric.Group.prototype);
|
||||||
|
TextButton.prototype.constructor = TextButton;
|
||||||
|
|
||||||
|
module.exports = TextButton;
|
||||||
@@ -0,0 +1,124 @@
|
|||||||
|
/* jshint -W097 */
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
assertKeyValuePair: function (key, value) {
|
||||||
|
if (typeof key === 'object') {
|
||||||
|
return key;
|
||||||
|
}
|
||||||
|
|
||||||
|
var returnValue = {};
|
||||||
|
returnValue[key] = value;
|
||||||
|
|
||||||
|
return returnValue;
|
||||||
|
},
|
||||||
|
|
||||||
|
assertBetween: function (value, min, max) {
|
||||||
|
if (value < min) {
|
||||||
|
return min;
|
||||||
|
}
|
||||||
|
if (value > max) {
|
||||||
|
return max;
|
||||||
|
}
|
||||||
|
return value;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {Integer} width
|
||||||
|
* @param {Integer} height
|
||||||
|
* @return {Object}
|
||||||
|
* axis: STRING,
|
||||||
|
* dim: OBJECT( width: NUMBER, height: NUMBER),
|
||||||
|
* width: NUMBER,
|
||||||
|
* height: NUMBER,
|
||||||
|
* ppmm: NUMBER
|
||||||
|
*/
|
||||||
|
calcCrop: function (obj, width, height) {
|
||||||
|
var cropRatio = width / height;
|
||||||
|
var objRatio = obj.width / obj.height;
|
||||||
|
|
||||||
|
var returnValue = {
|
||||||
|
image: obj,
|
||||||
|
axis: objRatio > cropRatio ? 'x' : 'y',
|
||||||
|
dim: { width: width, height: height },
|
||||||
|
width: obj.width,
|
||||||
|
height: obj.height
|
||||||
|
};
|
||||||
|
|
||||||
|
if (objRatio > cropRatio) {
|
||||||
|
returnValue.width *= cropRatio / objRatio;
|
||||||
|
} else {
|
||||||
|
returnValue.height /= cropRatio / objRatio;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Pixels per milimeter
|
||||||
|
returnValue.ppmm = returnValue.width / (returnValue.dim.width * 10);
|
||||||
|
|
||||||
|
return returnValue;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {fabric.Object} obj
|
||||||
|
* @param {Object} bounds
|
||||||
|
* @return {fabric.Object}
|
||||||
|
*/
|
||||||
|
setPositionInside: function (obj, bounds) {
|
||||||
|
['left', 'top'].forEach(function (v) {
|
||||||
|
if (obj[v] < bounds[v].min) {
|
||||||
|
obj.set(v, bounds[v].min).setCoords();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (obj[v] > bounds[v].max) {
|
||||||
|
obj.set(v, bounds[v].max).setCoords();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return obj;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {Object} obj
|
||||||
|
* @param {Object} properties
|
||||||
|
*/
|
||||||
|
setProperties: function (obj, properties) {
|
||||||
|
for (var o in properties) {
|
||||||
|
if (properties.hasOwnProperty(o)) {
|
||||||
|
Object.defineProperty(obj, o, properties[o]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Toggles the full screen state for passed DOM object
|
||||||
|
* @param {HTMLElement} elm
|
||||||
|
*/
|
||||||
|
toggleFullScreen: function (elm) {
|
||||||
|
var isFullScreen =
|
||||||
|
document.fullscreenElement ||
|
||||||
|
document.mozFullScreenElement ||
|
||||||
|
document.webkitFullscreenElement ||
|
||||||
|
document.msFullscreenElement;
|
||||||
|
|
||||||
|
if (isFullScreen) {
|
||||||
|
if (document.exitFullscreen) {
|
||||||
|
document.exitFullscreen();
|
||||||
|
} else if (document.msExitFullscreen) {
|
||||||
|
document.msExitFullscreen();
|
||||||
|
} else if (document.mozCancelFullScreen) {
|
||||||
|
document.mozCancelFullScreen();
|
||||||
|
} else if (document.webkitExitFullscreen) {
|
||||||
|
document.webkitExitFullscreen();
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(elm.requestFullScreen) {
|
||||||
|
elm.requestFullScreen();
|
||||||
|
}
|
||||||
|
else if(elm.webkitRequestFullScreen) {
|
||||||
|
elm.webkitRequestFullScreen();
|
||||||
|
}
|
||||||
|
else if(elm.mozRequestFullScreen) {
|
||||||
|
elm.mozRequestFullScreen();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
@@ -0,0 +1,148 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
var GoreHandler = require('./GoreHandler');
|
||||||
|
var RulerHandler = require('./RulerHandler');
|
||||||
|
var util = require('./Util');
|
||||||
|
|
||||||
|
function Viewport(canvas) {
|
||||||
|
var _beams = [];
|
||||||
|
var _borderWidth = 2;
|
||||||
|
var _data = null;
|
||||||
|
var _rect;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Applies viewport to page
|
||||||
|
*/
|
||||||
|
function apply() {
|
||||||
|
canvas.remove(_rect);
|
||||||
|
|
||||||
|
_rect = new fabric.Rect({
|
||||||
|
evented: false,
|
||||||
|
fill: 'transparent',
|
||||||
|
width: _data.width,
|
||||||
|
height: _data.height,
|
||||||
|
stroke: '#fff',
|
||||||
|
strokeWidth: _borderWidth,
|
||||||
|
});
|
||||||
|
|
||||||
|
_rect.width += _borderWidth;
|
||||||
|
_rect.height += _borderWidth;
|
||||||
|
_rect.addTo(canvas).center().setCoords();
|
||||||
|
|
||||||
|
canvas.image
|
||||||
|
.center()
|
||||||
|
.drag.enable(calcMinMaxBoundsForRect(_rect.getInsideBoundingRect(), canvas.image));
|
||||||
|
canvas.aperture.apply(_data.axis, _rect.getBoundingRect());
|
||||||
|
|
||||||
|
drawBeams();
|
||||||
|
canvas.dragbars.apply();
|
||||||
|
|
||||||
|
// Apertures sometimes overlaps the viewports bounding rect.
|
||||||
|
// Solve this by bringing it to the front after apertures are applied.
|
||||||
|
_rect.bringToFront();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Render the diagonal lines from viewport to edge of the canvas
|
||||||
|
*/
|
||||||
|
function drawBeams() {
|
||||||
|
_beams.forEach(function (o) {
|
||||||
|
canvas.remove(o);
|
||||||
|
});
|
||||||
|
|
||||||
|
_beams = [];
|
||||||
|
|
||||||
|
// TOP LEFT
|
||||||
|
_beams.push(new fabric.Line(
|
||||||
|
[_rect.left, _rect.top, _rect.left - _rect.top, -1], {
|
||||||
|
stroke: '#fff',
|
||||||
|
strokeWidth: 2,
|
||||||
|
}
|
||||||
|
));
|
||||||
|
|
||||||
|
// TOP RIGHT
|
||||||
|
_beams.push(_beams[0].clone().set({ flipX: true, left: _rect.left + _rect.width }));
|
||||||
|
// BOTTOM RIGHT
|
||||||
|
_beams.push(_beams[1].clone().set({ flipY: true, top: _rect.top + _rect.height }));
|
||||||
|
// BOTTOM LEFT
|
||||||
|
_beams.push(_beams[0].clone().set({ flipY: true, top: _rect.top + _rect.height }));
|
||||||
|
|
||||||
|
_beams.forEach(function (o) {
|
||||||
|
canvas.add(o);
|
||||||
|
o.bringToFront();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Gets an object with min / max values for each axis, based on the bounds
|
||||||
|
* of passed fabric.Rect
|
||||||
|
* @param {fabric.Rect} rect
|
||||||
|
* @return {Object}
|
||||||
|
*/
|
||||||
|
function calcMinMaxBoundsForRect(rect, img) {
|
||||||
|
return {
|
||||||
|
left: {
|
||||||
|
min: rect.left + rect.width - img.width,
|
||||||
|
max: rect.left
|
||||||
|
},
|
||||||
|
top: {
|
||||||
|
min: rect.top + rect.height - img.height,
|
||||||
|
max: rect.top
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
this.canvas = canvas;
|
||||||
|
|
||||||
|
this.getBounds = function () {
|
||||||
|
return _rect.getInsideBoundingRect();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @return {Viewport}
|
||||||
|
*/
|
||||||
|
this.reset = function () {
|
||||||
|
if (_data) {
|
||||||
|
return this.set(_data.dim.width, _data.dim.height);
|
||||||
|
}
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {Number} width
|
||||||
|
* @param {Number} height
|
||||||
|
* @return {Viewport}
|
||||||
|
*/
|
||||||
|
this.set = function (width, height) {
|
||||||
|
_data = util.calcCrop(canvas.image, width, height);
|
||||||
|
apply();
|
||||||
|
this.gores.reset();
|
||||||
|
this.rulers.reset();
|
||||||
|
canvas.aperture.setTransparent(true);
|
||||||
|
canvas.image.__moved = false;
|
||||||
|
canvas.topMenu.bringToFront();
|
||||||
|
};
|
||||||
|
|
||||||
|
util.setProperties(this, {
|
||||||
|
data: {
|
||||||
|
get: function () {
|
||||||
|
return _data;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
gores: {
|
||||||
|
get: function () {
|
||||||
|
return this.__goreHandler ||
|
||||||
|
(this.__goreHandler = new GoreHandler(this));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
rulers: {
|
||||||
|
get: function () {
|
||||||
|
return this.__rulerHandler ||
|
||||||
|
(this.__rulerHandler = new RulerHandler(this));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = Viewport;
|
||||||
@@ -0,0 +1,61 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
var Draggable = require('../Draggable');
|
||||||
|
var ImageTransformationHandler = require('../ImageTransformationHandler');
|
||||||
|
var util = require('../Util');
|
||||||
|
|
||||||
|
$.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));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
transformation: {
|
||||||
|
get: function () {
|
||||||
|
return this.__ImageTransformationHandler ||
|
||||||
|
(this.__ImageTransformationHandler = new ImageTransformationHandler(this));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$.extend(fabric.Rect.prototype, {
|
||||||
|
/**
|
||||||
|
* Gets the inner bounds of this fabric.Rect
|
||||||
|
* @return {Object}
|
||||||
|
*/
|
||||||
|
getInsideBoundingRect: function () {
|
||||||
|
var bounds = this.getBoundingRect();
|
||||||
|
var returnValue = {
|
||||||
|
left: bounds.left + this.strokeWidth,
|
||||||
|
top: bounds.top + this.strokeWidth,
|
||||||
|
width: bounds.width - this.strokeWidth * 2,
|
||||||
|
height: bounds.height - this.strokeWidth * 2
|
||||||
|
};
|
||||||
|
|
||||||
|
returnValue.min = {
|
||||||
|
left: returnValue.left,
|
||||||
|
top: returnValue.top
|
||||||
|
};
|
||||||
|
|
||||||
|
returnValue.max = {
|
||||||
|
left: returnValue.left + returnValue.width,
|
||||||
|
top: returnValue.top + returnValue.height
|
||||||
|
};
|
||||||
|
|
||||||
|
return returnValue;
|
||||||
|
}
|
||||||
|
});
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
activeBackground: '#000',
|
||||||
|
background: '#444',
|
||||||
|
fontSize: 14,
|
||||||
|
height: 30,
|
||||||
|
padding: 20
|
||||||
|
};
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
(function () {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
require('./components/ImageEditor/fabric.ext/ObjectDefaults');
|
||||||
|
//require('./components/ImageEditor/fabric.ext/BaseEventHandlers');
|
||||||
|
require('./components/ImageEditor/ImageEditor');
|
||||||
|
}());
|
||||||
Reference in New Issue
Block a user