Fixed some config files

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();
 

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);
     }
 }
 

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',
+        }
+    }
 };

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,
 };