move auto-anchor logic to own module + add tests

Author: etpinard

src/components/legend/anchor_utils.js

@@ -0,0 +1,47 @@
+/**
+* Copyright 2012-2016, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+
+'use strict';
+
+
+/**
+ * Determine the position anchor property of x/y xanchor/yanchor components.
+ *
+ * - values < 1/3 align the low side at that fraction,
+ * - values [1/3, 2/3] align the center at that fraction,
+ * - values > 2/3 align the right at that fraction.
+ */
+
+exports.isRightAnchor = function isRightAnchor(opts) {
+    return (
+        opts.xanchor === 'right' ||
+        (opts.xanchor === 'auto' && opts.x >= 2 / 3)
+    );
+};
+
+exports.isCenterAnchor = function isCenterAnchor(opts) {
+    return (
+        opts.xanchor === 'center' ||
+        (opts.xanchor === 'auto' && opts.x > 1 / 3 && opts.x < 2 / 3)
+    );
+};
+
+exports.isBottomAnchor = function isTopAnchor(opts) {
+    return (
+        opts.yanchor === 'bottom' ||
+        (opts.yanchor === 'auto' && opts.y <= 1 / 3)
+    );
+};
+
+exports.isMiddleAnchor = function isMiddleAnchor(opts) {
+    return (
+        opts.yanchor === 'middle' ||
+        (opts.yanchor === 'auto' && opts.y > 1 / 3 && opts.y < 2 / 3)
+    );
+};

test/jasmine/tests/legend_test.js

@@ -2,6 +2,7 @@ var Legend = require('@src/components/legend');
 var Plots = require('@src/plots/plots');
 
 var helpers = require('@src/components/legend/helpers');
+var anchorUtils = require('@src/components/legend/anchor_utils');
 describe('Test legend:', function() {
     'use strict';
 
@@ -361,4 +362,90 @@ describe('Test legend:', function() {
         });
     });
 
+    describe('isRightAnchor anchor util', function() {
+        var isRightAnchor = anchorUtils.isRightAnchor;
+        var threshold = 2/3;
+
+        it('should return true when \'xanchor\' is set to \'right\'', function() {
+            expect(isRightAnchor({ xanchor: 'left' })).toBe(false);
+            expect(isRightAnchor({ xanchor: 'center' })).toBe(false);
+            expect(isRightAnchor({ xanchor: 'right' })).toBe(true);
+        });
+
+        it('should return true when \'xanchor\' is set to \'auto\' and \'x\' >= 2/3', function() {
+            var opts = { xanchor: 'auto' };
+
+            [0, 0.4, 0.7, 1].forEach(function(v) {
+                opts.x = v;
+                expect(isRightAnchor(opts))
+                    .toBe(v > threshold, 'case ' + v);
+            });
+        });
+    });
+
+    describe('isCenterAnchor anchor util', function() {
+        var isCenterAnchor = anchorUtils.isCenterAnchor;
+        var threshold0 = 1/3;
+        var threshold1 = 2/3;
+
+        it('should return true when \'xanchor\' is set to \'center\'', function() {
+            expect(isCenterAnchor({ xanchor: 'left' })).toBe(false);
+            expect(isCenterAnchor({ xanchor: 'center' })).toBe(true);
+            expect(isCenterAnchor({ xanchor: 'right' })).toBe(false);
+        });
+
+        it('should return true when \'xanchor\' is set to \'auto\' and 1/3 < \'x\' < 2/3', function() {
+            var opts = { xanchor: 'auto' };
+
+            [0, 0.4, 0.7, 1].forEach(function(v) {
+                opts.x = v;
+                expect(isCenterAnchor(opts))
+                    .toBe(v > threshold0 && v < threshold1, 'case ' + v);
+            });
+        });
+    });
+
+    describe('isBottomAnchor anchor util', function() {
+        var isBottomAnchor = anchorUtils.isBottomAnchor;
+        var threshold = 1/3;
+
+        it('should return true when \'yanchor\' is set to \'right\'', function() {
+            expect(isBottomAnchor({ yanchor: 'top' })).toBe(false);
+            expect(isBottomAnchor({ yanchor: 'middle' })).toBe(false);
+            expect(isBottomAnchor({ yanchor: 'bottom' })).toBe(true);
+        });
+
+        it('should return true when \'yanchor\' is set to \'auto\' and \'y\' <= 1/3', function() {
+            var opts = { yanchor: 'auto' };
+
+            [0, 0.4, 0.7, 1].forEach(function(v) {
+                opts.y = v;
+                expect(isBottomAnchor(opts))
+                    .toBe(v < threshold, 'case ' + v);
+            });
+        });
+    });
+
+    describe('isMiddleAnchor anchor util', function() {
+        var isMiddleAnchor = anchorUtils.isMiddleAnchor;
+        var threshold0 = 1/3;
+        var threshold1 = 2/3;
+
+        it('should return true when \'yanchor\' is set to \'center\'', function() {
+            expect(isMiddleAnchor({ yanchor: 'top' })).toBe(false);
+            expect(isMiddleAnchor({ yanchor: 'middle' })).toBe(true);
+            expect(isMiddleAnchor({ yanchor: 'bottom' })).toBe(false);
+        });
+
+        it('should return true when \'yanchor\' is set to \'auto\' and 1/3 < \'y\' < 2/3', function() {
+            var opts = { yanchor: 'auto' };
+
+            [0, 0.4, 0.7, 1].forEach(function(v) {
+                opts.y = v;
+                expect(isMiddleAnchor(opts))
+                    .toBe(v > threshold0 && v < threshold1, 'case ' + v);
+            });
+        });
+    });
+
 });