diff --git a/src/js/components/ImageEditor/RulerHandler.js b/src/js/components/ImageEditor/RulerHandler.js index ce0c799..e5cc6b7 100644 --- a/src/js/components/ImageEditor/RulerHandler.js +++ b/src/js/components/ImageEditor/RulerHandler.js @@ -1,6 +1,8 @@ 'use strict'; + var util = require('../util'); var TextButton = require('./TextButton'); +var config = require('../config'); function RulerHandler(viewport) { var _enabled = false; @@ -35,14 +37,7 @@ function RulerHandler(viewport) { 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 - }); + ], config.rulerHandle.line(axis, bounds)); } /** @@ -75,33 +70,17 @@ function RulerHandler(viewport) { viewport.canvas.add(_lines.h); viewport.canvas.add(_lines.v); - var textSettings = { - width: 75, - height: 20, - color: '#3f3', - }; + _rect.h = new TextButton('H', config.rulerHandle.text) + .set(config.rulerHandle.h(_lines, bounds)) + .addTo(viewport.canvas) + .on('moving', Event.onMove) + .trigger('moving'); - _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, - moveCursor: 'ew-resize', - hoverCursor: 'ew-resize', - }).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, - moveCursor: 'ns-resize', - hoverCursor: 'ns-resize', - }).addTo(viewport.canvas).on('moving', Event.onMove).trigger('moving'); + _rect.v = new TextButton('V', config.rulerHandle.text) + .set(config.rulerHandle.v(_lines, bounds)) + .addTo(viewport.canvas) + .on('moving', Event.onMove) + .trigger('moving'); viewport.canvas.renderAll(); diff --git a/src/js/components/ImageEditor/TextButton.js b/src/js/components/ImageEditor/TextButton.js index ef7c6d4..6a31273 100644 --- a/src/js/components/ImageEditor/TextButton.js +++ b/src/js/components/ImageEditor/TextButton.js @@ -14,43 +14,15 @@ function TextButton(text, settings) { var _rect = null; var _text = null; - settings = $.extend({}, config.textButton, settings, { + var _rectSettings = config.textButton.rect(settings.width, settings.height); + var _textSettings = $.extend({}, config.textButton.text, { text: Array.isArray(text) ? text[0] : text, textActive: Array.isArray(text) ? text[1] : text, }); - var _rectSettings = { - fill: settings.fill, - width: settings.width, - height: settings.height, - originX: settings.originX, - originY: settings.originY, - }; - - var _textSettings = { - fill: settings.color, - fontFamily: settings.fontFamily, - fontSize: settings.fontSize, - originX: settings.originX, - originY: settings.originY, - }; - - // 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.width) { - settings.dynamicW = true; - _rectSettings.width = 1; - } - if (!settings.height) { - settings.dynamicH = true; - _rectSettings.height = 1; - } - // Make sure we're interactive this.selectable = true; - this.hoverCursor = settings.cursor; + this.hoverCursor = config.textButton.cursor; // Initialize text and rectangle _text = new fabric.Text('', _textSettings); @@ -65,12 +37,12 @@ function TextButton(text, settings) { this.setText = function(text) { _text.setText((text || '').toString()).setCoords(); - if (settings.dynamicW) { - this.width = _rect.width = _text.width + settings.padding; + if (_rectSettings.dynamicW) { + this.width = _rect.width = _text.width + config.textButton.padding; } - if (settings.dynamicH) { - this.height = _rect.height = _text.height + settings.padding; + if (_rectSettings.dynamicH) { + this.height = _rect.height = _text.height + config.textButton.padding; } return this.setCoords(); @@ -86,8 +58,8 @@ function TextButton(text, settings) { function handleMouseDown(e) { this.__active = !this.__active; - _rect.setFill(settings[this.isActive() ? 'activeFill' : 'fill']); - this.setText(settings[this.isActive() ? 'textActive' : 'text']); + _rect.setFill(_rectSettings[this.isActive() ? 'activeFill' : 'fill']); + this.setText(_textSettings[this.isActive() ? 'textActive' : 'text']); _callback.call(this, e); if (this.__group) { @@ -101,8 +73,8 @@ function TextButton(text, settings) { return this; }; - if (settings.text) { - this.setText(settings.text); + if (_textSettings.text) { + this.setText(_textSettings.text); } } diff --git a/src/js/components/config/ruler-handle.js b/src/js/components/config/ruler-handle.js index fe91ea4..297a2bc 100644 --- a/src/js/components/config/ruler-handle.js +++ b/src/js/components/config/ruler-handle.js @@ -1,6 +1,46 @@ 'use strict'; module.exports = { - fontSize: 12, - activeFill: '#000000', + + line: function(axis, bounds) { + return { + 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 + } + }, + + text: { + width: 75, + height: 20, + color: '#33ff33', + }, + + h: function(lines, bounds) { + return { + axis: 'left', + marker: lines.v, + top: Math.ceil(bounds.top + bounds.height + 5), + left: lines.v.left, + originX: 'center', + lockMovementY: true, + moveCursor: 'ew-resize', + hoverCursor: 'ew-resize', + } + }, + v: function(lines, bounds) { + return { + axis: 'top', + marker: lines.h, + top: lines.h.top, + left: Math.ceil(bounds.left + bounds.width + 5), + originY: 'center', + lockMovementX: true, + moveCursor: 'ns-resize', + hoverCursor: 'ns-resize', + } + } }; diff --git a/src/js/components/config/text-button.js b/src/js/components/config/text-button.js index 743319c..37b148b 100644 --- a/src/js/components/config/text-button.js +++ b/src/js/components/config/text-button.js @@ -1,13 +1,28 @@ 'use strict'; module.exports = { - color: '#ffffff', - fontFamily: 'breuer', - fontSize: 14, - fill: '#000000', - activeFill: '#444444', + + rect: function(width, height) { + return { + fill: '#000000', + activeFill: '#444444', + originX: 'center', + originY: 'center', + width: width || 1, + dynamicW: !width, + height: height || 1, + dynamicH: !height, + } + }, + + text: { + fill: '#ffffff', + fontFamily: 'breuer', + fontSize: 14, + originX: 'center', + originY: 'center', + }, + cursor: 'pointer', - originX: 'center', - originY: 'center', padding: 20, };