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

Replaced h and v by x and y

Browse Source
This commit is contained in:
Erik Tiekstra
2017-06-01 09:28:02 +02:00
parent 103a17decf
commit c377532138
13 changed files with 86 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/js/includes/ApertureHandler.js
+9 -9
View File
@@ -1,26 +1,26 @@
'use strict';
function ApertureHandler(canvas) {
var _items = {h: [], v: []};
var _items = {x: [], y: []};
function init() {
var bounds = canvas;
var hRect = new fabric.Rect({
var xRect = new fabric.Rect({
width: bounds.width,
height: bounds.height / 2,
fill: canvas.backgroundColor,
opacity: 0.7,
});
var vRect = hRect.clone().set({
var yRect = xRect.clone().set({
width: bounds.width / 2,
height: bounds.height
});
_items.h = [].concat([hRect, hRect.clone()]);
_items.v= [].concat([vRect, vRect.clone()]);
_items.x = [].concat([xRect, xRect.clone()]);
_items.y= [].concat([yRect, yRect.clone()]);
[].concat(_items.h, _items.v).forEach(function (o) {
[].concat(_items.x, _items.y).forEach(function (o) {
canvas.add(o);
});
canvas.renderAll();
@@ -32,13 +32,13 @@ function ApertureHandler(canvas) {
o.visible = false;
});
var active = this.getApertures(axis === 'h' ? 'v' : 'h');
var active = this.getApertures(axis === 'x' ? 'y' : 'x');
active.forEach(function (o) {
o.visible = true;
});
if (axis === 'v') {
if (axis === 'y') {
active[0].width= active[1].width = canvas.width;
active[0].top = viewport.top - active[0].height + 0.5;
active[1].top = viewport.top + viewport.height - 0.5;
@@ -56,7 +56,7 @@ function ApertureHandler(canvas) {
};
this.getApertures = function (axis) {
return axis ? _items[axis] : [].concat(_items.h, _items.v);
return axis ? _items[axis] : [].concat(_items.x, _items.y);
};
this.setTransparent = function (apply) {
src/js/includes/DragHandle.js
+13 -13
View File
@@ -36,7 +36,7 @@ var DragHandle = function (handler) {
_movedHandle = true;
if (_currentAxis === 'h') {
if (_currentAxis === 'x') {
handler.canvas.getImage().left -= e.e.movementX;
} else {
handler.canvas.getImage().top -= e.e.movementY;
@@ -67,12 +67,12 @@ var DragHandle = function (handler) {
return [];
}
return [].concat(this.__handles.h, this.__handles.v);
return [].concat(this.__handles.x, this.__handles.y);
};
this.setHandlePosition = function() {
this.__handles.v.set({left: handler.getTracks().v.left}).setCoords();
this.__handles.h.set({top: handler.getTracks().h.top}).setCoords();
this.__handles.y.set({left: handler.getTracks().y.left}).setCoords();
this.__handles.x.set({top: handler.getTracks().x.top}).setCoords();
return this;
}
@@ -81,27 +81,27 @@ var DragHandle = function (handler) {
var tracks = handler.getTracks();
if (this.__handles) {
this.getCanvas().remove(this.__handles.h);
this.getCanvas().remove(this.__handles.v);
this.getCanvas().remove(this.__handles.x);
this.getCanvas().remove(this.__handles.y);
}
this.__handles = {
h: getRect(viewportData.dim.width + ' cm', viewportData.width),
v: getRect(viewportData.dim.height + ' cm', viewportData.height)
x: getRect(viewportData.dim.width + ' cm', viewportData.width),
y: 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())
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.v.left })
.centerV().set({ left: tracks.y.left })
.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));
tracks.x.on('mousedown', events.mouseDown.bind(tracks.x));
tracks.y.on('mousedown', events.mouseDown.bind(tracks.y));
};
};
src/js/includes/DragbarHandler.js
+20 -17
View File
@@ -5,8 +5,8 @@ var config = require('./config');
function DragbarHandler(canvas) {
var _dragbars = {
h: null,
v: null
x: null,
y: null
};
/**
@@ -34,12 +34,12 @@ function DragbarHandler(canvas) {
this.canvas = canvas;
this.bringToFront = function() {
[].concat(_dragbars.h, _dragbars.v).forEach(function (o) {
o.bringToFront();
[].concat(_dragbars.x, _dragbars.y).forEach(function (dragbar) {
dragbar.bringToFront();
});
this.__handles.getHandles().forEach(function (o) {
o.bringToFront();
this.__handles.getHandles().forEach(function (handle) {
handle.bringToFront();
});
}
/**
@@ -47,8 +47,8 @@ function DragbarHandler(canvas) {
*/
this.clear = function () {
canvas
.remove(_dragbars.h)
.remove(_dragbars.v)
.remove(_dragbars.x)
.remove(_dragbars.y)
.renderAll();
return this;
};
@@ -58,19 +58,22 @@ function DragbarHandler(canvas) {
};
this.resetPosition = function() {
if (!_dragbars.v || !_dragbars.h) {
if (!_dragbars.y || !_dragbars.x) {
return this;
}
_dragbars.v.set({
_dragbars.y.set({
left: canvas.width - 30,
height: canvas.getImage().height * canvas.getImage().scaleY,
}).setCoords();
_dragbars.h.set({
_dragbars.x.set({
top: canvas.height - 30,
width: canvas.getImage().width * canvas.getImage().scaleY,
}).setCoords();
this.__handles.setHandlePosition();
return this;
};
@@ -80,8 +83,8 @@ function DragbarHandler(canvas) {
this.init = function () {
this.clear();
_dragbars.h = new fabric.Rect($.extend({}, config.dragBar, {
axis: 'h',
_dragbars.x = new fabric.Rect($.extend({}, config.dragBar, {
axis: 'x',
width: canvas.getImage().width,
height: config.dragBar.size,
lockMovementY: true,
@@ -92,8 +95,8 @@ function DragbarHandler(canvas) {
.addTo(canvas)
.centerH().set({ top: canvas.height - 30 }).setCoords();
_dragbars.v = new fabric.Rect($.extend({}, config.dragBar, {
axis: 'v',
_dragbars.y = new fabric.Rect($.extend({}, config.dragBar, {
axis: 'y',
width: config.dragBar.size,
height: canvas.getImage().height,
lockMovementX: true,
@@ -113,8 +116,8 @@ function DragbarHandler(canvas) {
* @return {DragbarHandler}
*/
this.sync = function () {
_dragbars.h.set({left: canvas.getImage().left}).setCoords();
_dragbars.v.set({top: canvas.getImage().top}).setCoords();
_dragbars.x.set({left: canvas.getImage().left}).setCoords();
_dragbars.y.set({top: canvas.getImage().top}).setCoords();
return this;
};
}
src/js/includes/Draggable.js
+1 -1
View File
@@ -31,7 +31,7 @@ function Draggable(img, boundingRect) {
}
// @TODO Refactor this, see Viewport.calcMinMaxBoundsForRect
if (img.canvas.getViewport().getData().axis === 'h') {
if (img.canvas.getViewport().getData().axis === 'x') {
_bounds.top.min = _bounds.top.max = img.top;
} else {
_bounds.left.min = _bounds.left.max = img.left;
src/js/includes/FrameHandler.js
+11 -24
View File
@@ -46,10 +46,8 @@ function FrameHandler(viewport) {
this.setVisible = function (isVisible) {
isVisible = typeof isVisible === 'undefined' ? true : !!isVisible;
getFramesAsArray().forEach(function (o) {
o.set({
visible: isVisible
});
getFramesAsArray().forEach(function (frame) {
frame.set({ visible: isVisible });
});
viewport.canvas.renderAll();
@@ -63,6 +61,8 @@ function FrameHandler(viewport) {
* @return {FrameHandler}
*/
this.setFrames = function (frameType) {
var bounds = viewport.getBounds();
frameType = frameType || _frameType || 'image';
_frameType = frameType;
@@ -76,37 +76,24 @@ function FrameHandler(viewport) {
this.setVisible(true);
getFramesAsArray().forEach(function (o) {
o.set(config.frames[frameType]);
});
_frames.top.height =
_frames.bottom.height =
_frames.right.width =
_frames.left.width = viewport.getData().ppmm * 29 * viewport.canvas.getImage().scaleX;
_frames.bottom.height =
_frames.right.width =
_frames.left.width = viewport.getData().ppmm * 29 * viewport.canvas.getImage().scaleX;
_frames.top.width = _frames.bottom.width = viewport.getData().width;
_frames.right.height = _frames.left.height = viewport.getData().height;
var frameargs;
if (frameType === 'image') {
_frames.top.width -= (viewport.getData().ppmm * 29) * 2;
_frames.bottom.width = _frames.top.width;
_frames.right.height -= (viewport.getData().ppmm * 29) * 2;
_frames.left.height = _frames.right.height;
frameargs = config.frames.image;
} else if (frameType === 'white') {
frameargs = config.frames.white;
} else if (frameType === 'black') {
frameargs = config.frames.black;
}
getFramesAsArray().forEach(function (o) {
o.set(frameargs);
});
var bounds = viewport.getBounds();
if (frameType === 'image') {
_frames.top.set({
top: bounds.top,
}).centerH().setCoords();
src/js/includes/GoreHandler.js
+2 -2
View File
@@ -22,8 +22,8 @@ function GoreHandler(viewport) {
* @return {GoreHandler}
*/
this.clear = function () {
_lines.forEach(function (o) {
viewport.canvas.remove(o);
_lines.forEach(function (line) {
viewport.canvas.remove(line);
});
_lines = [];
return this;
src/js/includes/ImageEditor.js
+1 -2
View File
@@ -18,8 +18,6 @@ function ImageEditor(canvasId, args) {
__type: _settings.type
});
/**
* @TODO: Refactor this. Since Canvas knows the type of editor it probably
* better could reside there.
@@ -69,6 +67,7 @@ function ImageEditor(canvasId, args) {
*/
this.crop = function (width, height) {
_canvas.getImage().__cropped = false;
_canvas.getImage().transformation.removeCropData();
_canvas.getViewport().set(width, height);
return this;
};
src/js/includes/ImageTransformationHandler.js
+2 -2
View File
@@ -18,8 +18,8 @@ function ImageTransformationHandler(img) {
var dragAxis = img.canvas.getViewport().getData().axis;
var cropData = {
x: dragAxis === 'h' ? (viewportBounds.left - img.left) / (img.width * img.scaleX) : 0,
y: dragAxis === 'v' ? (viewportBounds.top - img.top) / (img.height * img.scaleY) : 0,
x: dragAxis === 'x' ? (viewportBounds.left - img.left) / (img.width * img.scaleX) : 0,
y: dragAxis === 'y' ? (viewportBounds.top - img.top) / (img.height * img.scaleY) : 0,
}
sessionStorage.setItem('cropData', JSON.stringify(cropData));
src/js/includes/RulerHandler.js
+14 -14
View File
@@ -6,8 +6,8 @@ var config = require('./config');
function RulerHandler(viewport) {
var _enabled = false;
var _lines = { h: null, v: null };
var _rect = { h: null, v: null };
var _lines = { x: null, y: null };
var _rect = { x: null, y: null };
var Event = {
/**
@@ -35,15 +35,15 @@ function RulerHandler(viewport) {
var bounds = viewport.getBounds();
return new fabric.Line([
0, 0,
axis === 'h' ? bounds.width : 0,
axis === 'v' ? bounds.height : 0
axis === 'x' ? bounds.width : 0,
axis === 'y' ? 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
top: axis === 'x' ? bounds.top + bounds.height / 2 : bounds.top,
left: axis === 'y' ? bounds.left + bounds.width / 2 : bounds.left
});
}
@@ -51,7 +51,7 @@ function RulerHandler(viewport) {
* @return {RulerHandler}
*/
this.clear = function () {
[].concat(_rect.h, _rect.v, _lines.h, _lines.v).forEach(function (o) {
[].concat(_rect.x, _rect.y, _lines.x, _lines.y).forEach(function (o) {
viewport.canvas.remove(o);
});
return this;
@@ -72,19 +72,19 @@ function RulerHandler(viewport) {
var bounds = viewport.getBounds();
_lines = { h: getLine('h'), v: getLine('v') };
_lines = { x: getLine('x'), y: getLine('y') };
viewport.canvas.add(_lines.h);
viewport.canvas.add(_lines.v);
viewport.canvas.add(_lines.x);
viewport.canvas.add(_lines.y);
_rect.h = new TextButton('horizontalRuler', 'H', config.rulerHandle)
.set(config.rulerHandle.h(_lines, bounds))
_rect.x = new TextButton('horizontalRuler', 'H', config.rulerHandle)
.set(config.rulerHandle.x(_lines, bounds))
.addTo(viewport.canvas)
.on('moving', Event.onMove)
.trigger('moving');
_rect.v = new TextButton('verticalRuler', 'V', config.rulerHandle)
.set(config.rulerHandle.v(_lines, bounds))
_rect.y = new TextButton('verticalRuler', 'V', config.rulerHandle)
.set(config.rulerHandle.y(_lines, bounds))
.addTo(viewport.canvas)
.on('moving', Event.onMove)
.trigger('moving');
src/js/includes/Viewport.js
+2 -2
View File
@@ -62,8 +62,8 @@ function Viewport(canvas) {
* Render the diagonal lines from viewport to edge of the canvas
*/
function drawBeams() {
_beams.forEach(function (o) {
canvas.remove(o);
_beams.forEach(function (beam) {
canvas.remove(beam);
});
_beams = [];
src/js/includes/config/ruler-handle.js
+8 -8
View File
@@ -8,8 +8,8 @@ module.exports = {
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
top: axis === 'x' ? bounds.top + bounds.height / 2 : bounds.top,
left: axis === 'y' ? bounds.left + bounds.width / 2 : bounds.left
}
},
@@ -20,23 +20,23 @@ module.exports = {
fill: '#33ff33',
},
h: function(lines, bounds) {
x: function(lines, bounds) {
return {
axis: 'left',
marker: lines.v,
marker: lines.y,
top: Math.ceil(bounds.top + bounds.height + 5),
left: lines.v.left,
left: lines.y.left,
originX: 'center',
lockMovementY: true,
moveCursor: 'ew-resize',
hoverCursor: 'ew-resize',
}
},
v: function(lines, bounds) {
y: function(lines, bounds) {
return {
axis: 'top',
marker: lines.h,
top: lines.h.top,
marker: lines.x,
top: lines.x.top,
left: Math.ceil(bounds.left + bounds.width + 5),
originY: 'center',
lockMovementX: true,
src/js/includes/utils/calc-crop.js
+1 -1
View File
@@ -16,7 +16,7 @@ function calcCrop(obj, width, height) {
var returnValue = {
image: obj,
axis: objRatio > cropRatio ? 'h' : 'v',
axis: objRatio > cropRatio ? 'x' : 'y',
dim: {
width: Number(width),
height: Number(height)
src/js/init.js
+2 -2
View File
@@ -36,7 +36,6 @@
function handleDimensionChange() {
var noCropIsChecked = $input.noCrop.is(':checked');
var currentDimension = $(this).attr('name') === 'h' ? 'h' : 'w';
var data = editor.canvas.getViewport().getData();
var values = {
width: $input.w.val(),
@@ -44,6 +43,7 @@
};
if (noCropIsChecked) {
var currentDimension = $(this).attr('name') === 'h' ? 'h' : 'w';
values = getOptimalDimension(values, currentDimension, data.objectRatio);
}
@@ -101,7 +101,7 @@
function init() {
editor = new ImageEditor('canvas-editor', {
type: 'canvas',
type: 'wallpaper',
})
.loadImage(imageUrl, function() {
$input.w.trigger('input');