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

P5-1451: Add photo-wallpaper type

Browse Source
This commit is contained in:
Ruslan Getmansky
2017-11-30 14:45:28 +02:00
parent 59f8dfd8bc
commit f01921e024
6 changed files with 94 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/image-editor.js
Vendored
+26 -6
View File
@@ -199,6 +199,12 @@ function ApertureHandler(canvas) {
canvas.renderAll(); canvas.renderAll();
return this; return this;
}; };
this.disable = function () {
this.getApertures().forEach(function (o) {
o.visible = false;
});
};
} }
module.exports = ApertureHandler; module.exports = ApertureHandler;
@@ -623,23 +629,28 @@ var util = require('./util');
var DragHandle = function (handler) { var DragHandle = function (handler) {
var _currentAxis; var _currentAxis;
var _dragHandle; var _dragHandle;
var _clickHandle = false;
var _movedHandle; var _movedHandle;
// Event declarations // Event declarations
var events = { var events = {
mouseDown: function () { mouseDown: function () {
if(handler.canvas.__type !== 'wallpaper') {
_dragHandle = true; _dragHandle = true;
}
_clickHandle = true;
_currentAxis = this.axis; _currentAxis = this.axis;
handler.canvas.getImage().trigger('mousedown'); handler.canvas.getImage().trigger('mousedown');
}, },
mouseUp: function () { mouseUp: function () {
if (!_dragHandle) { if (!_dragHandle && !_clickHandle) {
return; return;
} }
if (!_movedHandle) { if (_clickHandle) {
$(document).trigger('PIE:dragbar-click', { axis: _currentAxis }); $(document).trigger('PIE:dragbar-click', { axis: _currentAxis });
_clickHandle = false;
} }
_dragHandle = false; _dragHandle = false;
@@ -824,15 +835,18 @@ function DragbarHandler(canvas) {
*/ */
this.init = function () { this.init = function () {
this.clear(); this.clear();
var typeIsWallpaper = canvas.__type === 'wallpaper';
_dragbars.x = new fabric.Rect($.extend({}, config.dragBar, { _dragbars.x = new fabric.Rect($.extend({}, config.dragBar, {
axis: 'x', axis: 'x',
width: canvas.getImage().width * canvas.getImage().scaleY, width: canvas.getImage().width * canvas.getImage().scaleY,
height: config.dragBar.size, height: config.dragBar.size,
lockMovementY: true, lockMovementY: true,
// Movement should also be disabled when the user is on wallpaper (repeating paterns)
lockMovementX: typeIsWallpaper,
selectable: true, selectable: true,
hoverCursor: 'ew-resize', hoverCursor: typeIsWallpaper ? 'pointer' : 'ew-resize',
moveCursor: 'ew-resize', moveCursor: typeIsWallpaper ? 'pointer' : 'ew-resize',
})) }))
.addTo(canvas) .addTo(canvas)
.centerH().set({ top: canvas.height - 30 }).setCoords(); .centerH().set({ top: canvas.height - 30 }).setCoords();
@@ -842,9 +856,11 @@ function DragbarHandler(canvas) {
width: config.dragBar.size, width: config.dragBar.size,
height: canvas.getImage().height * canvas.getImage().scaleY, height: canvas.getImage().height * canvas.getImage().scaleY,
lockMovementX: true, lockMovementX: true,
// Movement should also be disabled when the user is on wallpaper (repeating paterns)
lockMovementY: typeIsWallpaper,
selectable: true, selectable: true,
hoverCursor: 'ns-resize', hoverCursor: typeIsWallpaper ? 'pointer': 'ns-resize',
moveCursor: 'ns-resize', moveCursor: typeIsWallpaper ? 'pointer': 'ns-resize',
})) }))
.addTo(canvas) .addTo(canvas)
.set({ left: canvas.width - 30 }).setCoords(); .set({ left: canvas.width - 30 }).setCoords();
@@ -1746,8 +1762,12 @@ function Viewport(canvas) {
canvas.getImageData().setCropData(); canvas.getImageData().setCropData();
} }
if(canvas.__type !== 'wallpaper') {
canvas.getImage().drag.enable(calcMinMaxBoundsForRect(_rect.getInsideBoundingRect(), canvas.getImage())); canvas.getImage().drag.enable(calcMinMaxBoundsForRect(_rect.getInsideBoundingRect(), canvas.getImage()));
canvas.getApertures().apply(_data.axis, _rect.getBoundingRect()); canvas.getApertures().apply(_data.axis, _rect.getBoundingRect());
} else {
canvas.getApertures().disable();
}
if (canvas.__type !== 'canvas') { if (canvas.__type !== 'canvas') {
drawBeams(); drawBeams();
examples/repeating-wallpaper/index.html
+36
View File
@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<label>Width: <input type="text" id="width" name="width" value="500" /></label>
<label>Height: <input type="text" id="height" name="height" value="400" /></label>
<canvas id="image-editor" width="800" height="600"></canvas>
<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>
<script type="text/javascript">
var width = document.getElementById('width');
var height = document.getElementById('height');
var editor = new ImageEditor('image-editor', {
type: 'wallpaper',
dimensions: {width: 800, height: 600}
});
function loadImage() {
var image_url = '//images-dev.photowall.com/products/46955.jpg?h=450&repeat[tw]=45&repeat[th]=35&repeat[mw]=' + width.value + '&repeat[mh]=' + height.value;
editor.loadImage(image_url, function() {
editor.crop(width.value, height.value, 'cm');
});
}
//add event listeners
width.addEventListener('keyup', loadImage);
height.addEventListener('keyup', loadImage);
loadImage();
</script>
</body>
</html>
src/ApertureHandler.js
+6
View File
@@ -88,6 +88,12 @@ function ApertureHandler(canvas) {
canvas.renderAll(); canvas.renderAll();
return this; return this;
}; };
this.disable = function () {
this.getApertures().forEach(function (o) {
o.visible = false;
});
};
} }
module.exports = ApertureHandler; module.exports = ApertureHandler;
src/DragHandle.js
+7 -2
View File
@@ -7,23 +7,28 @@ var util = require('./util');
var DragHandle = function (handler) { var DragHandle = function (handler) {
var _currentAxis; var _currentAxis;
var _dragHandle; var _dragHandle;
var _clickHandle = false;
var _movedHandle; var _movedHandle;
// Event declarations // Event declarations
var events = { var events = {
mouseDown: function () { mouseDown: function () {
if(handler.canvas.__type !== 'wallpaper') {
_dragHandle = true; _dragHandle = true;
}
_clickHandle = true;
_currentAxis = this.axis; _currentAxis = this.axis;
handler.canvas.getImage().trigger('mousedown'); handler.canvas.getImage().trigger('mousedown');
}, },
mouseUp: function () { mouseUp: function () {
if (!_dragHandle) { if (!_dragHandle && !_clickHandle) {
return; return;
} }
if (!_movedHandle) { if (_clickHandle) {
$(document).trigger('PIE:dragbar-click', { axis: _currentAxis }); $(document).trigger('PIE:dragbar-click', { axis: _currentAxis });
_clickHandle = false;
} }
_dragHandle = false; _dragHandle = false;
src/DragbarHandler.js
+9 -4
View File
@@ -83,15 +83,18 @@ function DragbarHandler(canvas) {
*/ */
this.init = function () { this.init = function () {
this.clear(); this.clear();
var typeIsWallpaper = canvas.__type === 'wallpaper';
_dragbars.x = new fabric.Rect($.extend({}, config.dragBar, { _dragbars.x = new fabric.Rect($.extend({}, config.dragBar, {
axis: 'x', axis: 'x',
width: canvas.getImage().width * canvas.getImage().scaleY, width: canvas.getImage().width * canvas.getImage().scaleY,
height: config.dragBar.size, height: config.dragBar.size,
lockMovementY: true, lockMovementY: true,
// Movement should also be disabled when the user is on wallpaper (repeating paterns)
lockMovementX: typeIsWallpaper,
selectable: true, selectable: true,
hoverCursor: 'ew-resize', hoverCursor: typeIsWallpaper ? 'pointer' : 'ew-resize',
moveCursor: 'ew-resize', moveCursor: typeIsWallpaper ? 'pointer' : 'ew-resize',
})) }))
.addTo(canvas) .addTo(canvas)
.centerH().set({ top: canvas.height - 30 }).setCoords(); .centerH().set({ top: canvas.height - 30 }).setCoords();
@@ -101,9 +104,11 @@ function DragbarHandler(canvas) {
width: config.dragBar.size, width: config.dragBar.size,
height: canvas.getImage().height * canvas.getImage().scaleY, height: canvas.getImage().height * canvas.getImage().scaleY,
lockMovementX: true, lockMovementX: true,
// Movement should also be disabled when the user is on wallpaper (repeating paterns)
lockMovementY: typeIsWallpaper,
selectable: true, selectable: true,
hoverCursor: 'ns-resize', hoverCursor: typeIsWallpaper ? 'pointer': 'ns-resize',
moveCursor: 'ns-resize', moveCursor: typeIsWallpaper ? 'pointer': 'ns-resize',
})) }))
.addTo(canvas) .addTo(canvas)
.set({ left: canvas.width - 30 }).setCoords(); .set({ left: canvas.width - 30 }).setCoords();
src/Viewport.js
+4
View File
@@ -97,8 +97,12 @@ function Viewport(canvas) {
canvas.getImageData().setCropData(); canvas.getImageData().setCropData();
} }
if(canvas.__type !== 'wallpaper') {
canvas.getImage().drag.enable(calcMinMaxBoundsForRect(_rect.getInsideBoundingRect(), canvas.getImage())); canvas.getImage().drag.enable(calcMinMaxBoundsForRect(_rect.getInsideBoundingRect(), canvas.getImage()));
canvas.getApertures().apply(_data.axis, _rect.getBoundingRect()); canvas.getApertures().apply(_data.axis, _rect.getBoundingRect());
} else {
canvas.getApertures().disable();
}
if (canvas.__type !== 'canvas') { if (canvas.__type !== 'canvas') {
drawBeams(); drawBeams();