From 31483537a599a1c89362c765ef11c3d7a1f9a7d0 Mon Sep 17 00:00:00 2001 From: Erik Tiekstra Date: Fri, 12 May 2017 09:25:45 +0200 Subject: [PATCH] Moved utils to seperate folder and fixed issue with textbuttons --- src/js/components/ImageEditor/Canvas.js | 2 +- src/js/components/ImageEditor/Draggable.js | 2 +- src/js/components/ImageEditor/ImageEditor.js | 4 +- src/js/components/ImageEditor/RulerHandler.js | 6 +- src/js/components/ImageEditor/TextButton.js | 6 +- src/js/components/ImageEditor/Util.js | 124 ------------------ src/js/components/ImageEditor/Viewport.js | 2 +- .../ImageEditor/fabric.ext/ObjectDefaults.js | 2 +- src/js/components/config.js | 2 + src/js/components/config/button-menu.js | 9 -- src/js/components/config/ruler-handle.js | 6 + src/js/components/config/text-button.js | 13 ++ src/js/components/util.js | 12 ++ src/js/components/utils/assert-between.js | 13 ++ .../components/utils/assert-key-value-pair.js | 14 ++ src/js/components/utils/calc-crop.js | 37 ++++++ .../components/utils/set-position-inside.js | 21 +++ src/js/components/utils/set-properties.js | 15 +++ src/js/components/utils/toggle-fullscreen.js | 38 ++++++ src/js/main.js | 1 - 20 files changed, 181 insertions(+), 148 deletions(-) delete mode 100644 src/js/components/ImageEditor/Util.js create mode 100644 src/js/components/config/ruler-handle.js create mode 100644 src/js/components/config/text-button.js create mode 100644 src/js/components/util.js create mode 100644 src/js/components/utils/assert-between.js create mode 100644 src/js/components/utils/assert-key-value-pair.js create mode 100644 src/js/components/utils/calc-crop.js create mode 100644 src/js/components/utils/set-position-inside.js create mode 100644 src/js/components/utils/set-properties.js create mode 100644 src/js/components/utils/toggle-fullscreen.js diff --git a/src/js/components/ImageEditor/Canvas.js b/src/js/components/ImageEditor/Canvas.js index 42c7309..4f5d81a 100644 --- a/src/js/components/ImageEditor/Canvas.js +++ b/src/js/components/ImageEditor/Canvas.js @@ -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'); diff --git a/src/js/components/ImageEditor/Draggable.js b/src/js/components/ImageEditor/Draggable.js index 258f72d..b8aceeb 100644 --- a/src/js/components/ImageEditor/Draggable.js +++ b/src/js/components/ImageEditor/Draggable.js @@ -1,6 +1,6 @@ 'use strict'; -var util = require('./Util'); +var util = require('../util'); /** * @param {fabric.Image} img diff --git a/src/js/components/ImageEditor/ImageEditor.js b/src/js/components/ImageEditor/ImageEditor.js index 9f24c52..67154ec 100644 --- a/src/js/components/ImageEditor/ImageEditor.js +++ b/src/js/components/ImageEditor/ImageEditor.js @@ -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(); diff --git a/src/js/components/ImageEditor/RulerHandler.js b/src/js/components/ImageEditor/RulerHandler.js index 47eed1f..e7384e8 100644 --- a/src/js/components/ImageEditor/RulerHandler.js +++ b/src/js/components/ImageEditor/RulerHandler.js @@ -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; } diff --git a/src/js/components/ImageEditor/TextButton.js b/src/js/components/ImageEditor/TextButton.js index 515902c..ef7c6d4 100644 --- a/src/js/components/ImageEditor/TextButton.js +++ b/src/js/components/ImageEditor/TextButton.js @@ -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); diff --git a/src/js/components/ImageEditor/Util.js b/src/js/components/ImageEditor/Util.js deleted file mode 100644 index aea888f..0000000 --- a/src/js/components/ImageEditor/Util.js +++ /dev/null @@ -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(); - } - } -}; diff --git a/src/js/components/ImageEditor/Viewport.js b/src/js/components/ImageEditor/Viewport.js index 6c5188b..e39ac8f 100644 --- a/src/js/components/ImageEditor/Viewport.js +++ b/src/js/components/ImageEditor/Viewport.js @@ -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 = []; diff --git a/src/js/components/ImageEditor/fabric.ext/ObjectDefaults.js b/src/js/components/ImageEditor/fabric.ext/ObjectDefaults.js index fc62591..6045420 100644 --- a/src/js/components/ImageEditor/fabric.ext/ObjectDefaults.js +++ b/src/js/components/ImageEditor/fabric.ext/ObjectDefaults.js @@ -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, diff --git a/src/js/components/config.js b/src/js/components/config.js index 6020b14..e3d1487 100644 --- a/src/js/components/config.js +++ b/src/js/components/config.js @@ -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'), }; diff --git a/src/js/components/config/button-menu.js b/src/js/components/config/button-menu.js index 58d70ef..9347ea5 100644 --- a/src/js/components/config/button-menu.js +++ b/src/js/components/config/button-menu.js @@ -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, }; diff --git a/src/js/components/config/ruler-handle.js b/src/js/components/config/ruler-handle.js new file mode 100644 index 0000000..fe91ea4 --- /dev/null +++ b/src/js/components/config/ruler-handle.js @@ -0,0 +1,6 @@ +'use strict'; + +module.exports = { + fontSize: 12, + activeFill: '#000000', +}; diff --git a/src/js/components/config/text-button.js b/src/js/components/config/text-button.js new file mode 100644 index 0000000..743319c --- /dev/null +++ b/src/js/components/config/text-button.js @@ -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, +}; diff --git a/src/js/components/util.js b/src/js/components/util.js new file mode 100644 index 0000000..90dd49c --- /dev/null +++ b/src/js/components/util.js @@ -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'), + +}; diff --git a/src/js/components/utils/assert-between.js b/src/js/components/utils/assert-between.js new file mode 100644 index 0000000..3d70a1b --- /dev/null +++ b/src/js/components/utils/assert-between.js @@ -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; diff --git a/src/js/components/utils/assert-key-value-pair.js b/src/js/components/utils/assert-key-value-pair.js new file mode 100644 index 0000000..e793059 --- /dev/null +++ b/src/js/components/utils/assert-key-value-pair.js @@ -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; diff --git a/src/js/components/utils/calc-crop.js b/src/js/components/utils/calc-crop.js new file mode 100644 index 0000000..398143c --- /dev/null +++ b/src/js/components/utils/calc-crop.js @@ -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; diff --git a/src/js/components/utils/set-position-inside.js b/src/js/components/utils/set-position-inside.js new file mode 100644 index 0000000..06c2115 --- /dev/null +++ b/src/js/components/utils/set-position-inside.js @@ -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; diff --git a/src/js/components/utils/set-properties.js b/src/js/components/utils/set-properties.js new file mode 100644 index 0000000..078b63a --- /dev/null +++ b/src/js/components/utils/set-properties.js @@ -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; diff --git a/src/js/components/utils/toggle-fullscreen.js b/src/js/components/utils/toggle-fullscreen.js new file mode 100644 index 0000000..d3b8c6b --- /dev/null +++ b/src/js/components/utils/toggle-fullscreen.js @@ -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; diff --git a/src/js/main.js b/src/js/main.js index 5c75fa8..a4a97f1 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -3,7 +3,6 @@ (function () { require('./components/ImageEditor/fabric.ext/ObjectDefaults'); - //require('./components/ImageEditor/fabric.ext/BaseEventHandlers'); require('./components/ImageEditor/ImageEditor'); }());