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

Moved utils to seperate folder and fixed issue with textbuttons

Browse Source
This commit is contained in:
Erik Tiekstra
2017-05-12 09:25:45 +02:00
parent 4c0b388805
commit 31483537a5
20 changed files with 181 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/js/components/ImageEditor/Canvas.js
+1 -1
View File
@@ -1,5 +1,5 @@
'use strict';
var util = require('./Util');
var util = require('../util');
var ApertureHandler = require('./ApertureHandler');
var ButtonMenu = require('./ButtonMenu');
var DragbarHandler = require('./DragbarHandler');
src/js/components/ImageEditor/Draggable.js
+1 -1
View File
@@ -1,6 +1,6 @@
'use strict';
var util = require('./Util');
var util = require('../util');
/**
* @param {fabric.Image} img
src/js/components/ImageEditor/ImageEditor.js
+2 -2
View File
@@ -1,7 +1,7 @@
'use strict';
var Canvas = require('./Canvas');
var util = require('./Util');
var util = require('../util');
function ImageEditor(args) {
var _canvas;
@@ -21,7 +21,7 @@ function ImageEditor(args) {
_canvas.viewport.rulers.enable(this.isActive());
})
.addItem(['Fullscreen', 'Exit Fullscreen'], function () {
util.toggleFullScreen(_canvas.getSelectionElement().parentNode);
util.toggleFullscreen(_canvas.getSelectionElement().parentNode);
})
.render();
src/js/components/ImageEditor/RulerHandler.js
+1 -5
View File
@@ -1,5 +1,5 @@
'use strict';
var util = require('./Util');
var util = require('../util');
var TextButton = require('./TextButton');
function RulerHandler(viewport) {
@@ -18,10 +18,6 @@ function RulerHandler(viewport) {
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;
}
src/js/components/ImageEditor/TextButton.js
+3 -3
View File
@@ -14,13 +14,13 @@ function TextButton(text, settings) {
var _rect = null;
var _text = null;
settings = $.extend({}, settings, {
settings = $.extend({}, config.textButton, settings, {
text: Array.isArray(text) ? text[0] : text,
textActive: Array.isArray(text) ? text[1] : text,
});
var _rectSettings = {
fill: settings.background,
fill: settings.fill,
width: settings.width,
height: settings.height,
originX: settings.originX,
@@ -86,7 +86,7 @@ function TextButton(text, settings) {
function handleMouseDown(e) {
this.__active = !this.__active;
_rect.setFill(settings[this.isActive() ? 'activeBackground' : 'background']);
_rect.setFill(settings[this.isActive() ? 'activeFill' : 'fill']);
this.setText(settings[this.isActive() ? 'textActive' : 'text']);
_callback.call(this, e);
src/js/components/ImageEditor/Util.js
-124
View File
@@ -1,124 +0,0 @@
/* 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();
}
}
};
src/js/components/ImageEditor/Viewport.js
+1 -1
View File
@@ -2,7 +2,7 @@
var GoreHandler = require('./GoreHandler');
var RulerHandler = require('./RulerHandler');
var util = require('./Util');
var util = require('../util');
function Viewport(canvas) {
var _beams = [];
src/js/components/ImageEditor/fabric.ext/ObjectDefaults.js
+1 -1
View File
@@ -2,7 +2,7 @@
var Draggable = require('../Draggable');
var ImageTransformationHandler = require('../ImageTransformationHandler');
var util = require('../Util');
var util = require('../../util');
$.extend(fabric.Object.prototype, {
cornerSize: 0,
src/js/components/config.js
+2
View File
@@ -1,7 +1,9 @@
'use strict';
module.exports = {
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/js/components/config/button-menu.js
-9
View File
@@ -1,14 +1,5 @@
'use strict';
module.exports = {
color: '#ffffff',
fontFamily: 'breuer',
fontSize: 14,
background: '#000000',
activeBackground: '#444444',
cursor: 'pointer',
originX: 'center',
originY: 'center',
padding: 20,
margin: 5,
};
src/js/components/config/ruler-handle.js
+6
View File
@@ -0,0 +1,6 @@
'use strict';
module.exports = {
fontSize: 12,
activeFill: '#000000',
};
src/js/components/config/text-button.js
+13
View File
@@ -0,0 +1,13 @@
'use strict';
module.exports = {
color: '#ffffff',
fontFamily: 'breuer',
fontSize: 14,
fill: '#000000',
activeFill: '#444444',
cursor: 'pointer',
originX: 'center',
originY: 'center',
padding: 20,
};
src/js/components/util.js
+12
View File
@@ -0,0 +1,12 @@
'use strict';
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'),
};
src/js/components/utils/assert-between.js
+13
View File
@@ -0,0 +1,13 @@
'use strict';
function assertBetween(value, min, max) {
if (value < min) {
return min;
}
if (value > max) {
return max;
}
return value;
}
module.exports = assertBetween;
src/js/components/utils/assert-key-value-pair.js
+14
View File
@@ -0,0 +1,14 @@
'use strict';
function assertKeyValuePair(key, value) {
if (typeof key === 'object') {
return key;
}
var returnValue = {};
returnValue[key] = value;
return returnValue;
}
module.exports = assertKeyValuePair;
src/js/components/utils/calc-crop.js
+37
View File
@@ -0,0 +1,37 @@
'use strict';
/**
* @param {Integer} width
* @param {Integer} height
* @return {Object}
* axis: STRING,
* dim: OBJECT( width: NUMBER, height: NUMBER),
* width: NUMBER,
* height: NUMBER,
* ppmm: NUMBER
*/
function calcCrop(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;
}
module.exports = calcCrop;
src/js/components/utils/set-position-inside.js
+21
View File
@@ -0,0 +1,21 @@
'use strict';
/**
* @param {fabric.Object} obj
* @param {Object} bounds
* @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();
}
if (obj[v] > bounds[v].max) {
obj.set(v, bounds[v].max).setCoords();
}
});
return obj;
}
module.exports = setPositionInside;
src/js/components/utils/set-properties.js
+15
View File
@@ -0,0 +1,15 @@
'use strict';
/**
* @param {Object} obj
* @param {Object} properties
*/
function setProperties(obj, properties) {
for (var o in properties) {
if (properties.hasOwnProperty(o)) {
Object.defineProperty(obj, o, properties[o]);
}
}
}
module.exports = setProperties;
src/js/components/utils/toggle-fullscreen.js
+38
View File
@@ -0,0 +1,38 @@
'use strict';
/**
* Toggles the full screen state for passed DOM object
* @param {HTMLElement} elm
*/
function toggleFullscreen(elem) {
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.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();
}
}
module.exports = toggleFullscreen;