Merge branch 'misc-updates'

Signed-off-by: Jim Fitzpatrick <fitzpatrick.jim@gmail.com>

lib/helpers.js

@@ -3,6 +3,26 @@
 var assign = require('object-assign'),
     clamp = require('clamp');
 
+/**
+ * Clamps the width of a resizer between a min and max.
+ *
+ * @param {Resizer} resizer Resizer instance
+ * @return {number} Clamped width value
+ */
+exports.clampWidth = function(resizer) {
+    return clamp(resizer.x, resizer.minWidth, resizer.maxWidth);
+};
+
+/**
+ * Clamps the height of a resizer between a min and max.
+ *
+ * @param {Resizer} resizer Resizer instance
+ * @return {number} Clamped height value
+ */
+exports.clampHeight = function(resizer) {
+    return clamp(resizer.y, resizer.minHeight, resizer.maxHeight);
+};
+
 /**
  * Return state given mouse coords and an element rectangle.
  *
@@ -59,21 +79,3 @@ exports.getGrabState = function(cursor, rect, threshold) {
         cursorState
     );
 };
-
-/**
- * Force the given dimension or value into the range specified
- * by the resizer's `maxDims` and `minDims`.
- *
- * @param {Object} resizer Resizer object
- * @param {String} [dimension='Width'] 'Width' or 'Height' dimension
- * @param {Number} [val=resizer[x|y]] Value to apply the clamp to.
- * @return {Number} Clamped value
- */
-exports.clampDimension = function(resizer, dimension, val) {
-    var dim = dimension || 'Width',
-        value = val || (dim === 'Width' ? resizer.x : resizer.y),
-        max = resizer['max' + dim],
-        min = resizer['min' + dim];
-
-    return clamp(value, min, max);
-};

lib/store.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var resizeCursor = require('resize-cursors');
 var assign = require('object-assign');
+var resizeCursor = require('resize-cursors');
 var helpers = require('./helpers');
 var getCursorState = helpers.getCursorState;
 var isResizing = helpers.isResizing;
@@ -37,27 +37,22 @@ function endResize(e) {
 }
 
 function renderResizer(resizer) {
-    var grab = resizer.grab,
-        newHeight,
-        newWidth;
+    var grab = resizer.grab;
 
     if (!(grab && isResizing(grab))) {
-        resizer.el.style.cursor = '';
+        resizer.el.style.cursor = cursorStyle(resizer) || '';
         return;
     }
 
     resizer.el.style.cursor = cursorStyle(grab);
 
     if (grab.onRightEdge) {
-        newWidth = helpers.clampDimension(resizer, 'Width');
+        resizer.el.style.width = helpers.clampWidth(resizer) + 'px';
     }
 
     if (grab.onBottomEdge) {
-        newHeight = helpers.clampDimension(resizer, 'Height');
+        resizer.el.style.height = helpers.clampHeight(resizer) + 'px';
     }
-
-    resizer.el.style.width = newWidth + 'px';
-    resizer.el.style.height = newHeight + 'px';
 }
 
 /**
@@ -166,7 +161,7 @@ Store.prototype.onTouchEnd = function(e) {
 Store.prototype.render = function() {
     if (this.resizers.length && this.shouldRedraw) {
         this.resizers.forEach(renderResizer);
-        this.shouldRender = false;
+        this.shouldRedraw = false;
     }
 
     this.window.requestAnimationFrame(this.render);

test/helpers/clamp.test.js

@@ -1,73 +1,42 @@
 'use strict';
 
 var test = require('tape');
-var clampDimension = require('../../lib/helpers').clampDimension;
+var helpers = require('../../lib/helpers');
+var clampWidth = helpers.clampWidth;
+var clampHeight = helpers.clampHeight;
 
-test('helpers.clampDimension()', function(t) {
-    function testcase(resizer, dimension, val, expected, msg) {
-        var actual = clampDimension(resizer, dimension, val);
+test('helpers.clampWidth()', function(t) {
+    function testcase(resizer, expected, msg) {
+        var actual = clampWidth(resizer);
         t.equal(actual, expected, msg);
     }
 
-    // Height too large
-    testcase({
-        x: 120,
-        y: 400,
-        maxWidth: 100,
-        maxHeight: 200,
-        minWidth: 1,
-        minHeight: 1
-    }, 'Height', null, 200, 'should clamp to maxHeight');
+    testcase({ x: 120, minWidth: 1, maxWidth: 100 }, 100,
+             'should clamp width value when > maxWidth');
 
-    // Height too small
-    testcase({
-        x: 120,
-        y: 3,
-        maxWidth: 100,
-        maxHeight: 200,
-        minWidth: 1,
-        minHeight: 10
-    }, 'Height', null, 10, 'should clamp to minHeight');
+    testcase({ x: 1, minWidth: 20, maxWidth: 100 }, 20,
+             'should clamp width value when < minWidth');
 
-    // Width too large
-    testcase({
-        x: 120,
-        y: 120,
-        maxWidth: 100,
-        maxHeight: 200,
-        minWidth: 1,
-        minHeight: 1
-    }, 'Width', null, 100, 'should clamp to maxWidth');
+    testcase({ x: 20, minWidth: 1, maxWidth: 100 }, 20,
+             'should use width value when between min and max');
 
-    // Width too small
-    testcase({
-        x: 1,
-        y: 120,
-        maxWidth: 100,
-        maxHeight: 200,
-        minWidth: 20,
-        minHeight: 1
-    }, 'Width', null, 20, 'should clamp to minWidth');
+    t.end();
+});
+
+test('helpers.clampHeight()', function(t) {
+    function testcase(resizer, expected, msg) {
+        var actual = clampHeight(resizer);
+        t.equal(actual, expected, msg);
+    }
+
+    testcase({ y: 120, minHeight: 1, maxHeight: 100 }, 100,
+             'should clamp width value when > maxHeight');
 
-    // Specified value, ignores actual value
-    testcase({
-        x: 20,
-        y: 120,
-        maxWidth: 100,
-        maxHeight: 200,
-        minWidth: 1,
-        minHeight: 1
-    }, 'Width', 120, 100, 'should clamp to maxWidth');
+    testcase({ y: 1, minHeight: 20, maxHeight: 100 }, 20,
+             'should clamp width value when < minHeight');
 
-    // Specified value, ignores actual value
-    testcase({
-        x: 20,
-        y: 120,
-        maxWidth: 100,
-        maxHeight: 200,
-        minWidth: 1,
-        minHeight: 1
-    }, null, 120, 100, 'should clamp to maxWidth');
+    testcase({ y: 20, minHeight: 1, maxHeight: 100 }, 20,
+             'should use width value when between min and max');
 
     t.end();
 });

test/store.test.js

@@ -15,7 +15,7 @@ function cursorStyle(state) {
         right: state.onRightEdge,
         bottom: state.onBottomEdge,
         left: state.onLeftEdge
-    });
+    }) || '';
 }
 
 function getEnv() {
@@ -191,6 +191,7 @@ test('Store#render()', function(t) {
             'should not apply styles when grab state is null');
 
     resizer.grab = {};
+    subject.shouldRedraw = true;
     subject.render();
     t.equal(resizer.el.style.cursor, '',
             'should not apply styles when grab state is not resizing');
@@ -199,10 +200,11 @@ test('Store#render()', function(t) {
         onRightEdge: true,
         onBottomEdge: true
     };
+    subject.shouldRedraw = true;
     subject.render();
     t.equal(resizer.el.style.cursor, cursorStyle(resizer.grab),
             'should apply styles when shouldRedraw is true');
-    t.equal(subject.shouldRender, false, 'redraw should reset shouldRedraw');
+    t.equal(subject.shouldRedraw, false, 'redraw should reset shouldRedraw');
 
     t.end();
 });