Change updatemenus orientation/openreverse to simply 'direction'

Author: rreusser

src/components/updatemenus/attributes.js

@@ -57,15 +57,6 @@ module.exports = {
         ].join(' ')
     },
 
-    openreverse: {
-        valType: 'boolean',
-        role: 'info',
-        dflt: false,
-        description: [
-            'For dropdown menus, opens the menu in the reverse direction'
-        ].join(' ')
-    },
-
     type: {
         valType: 'enumerated',
         values: ['dropdown', 'buttons'],
@@ -77,14 +68,16 @@ module.exports = {
         ].join(' ')
     },
 
-    orientation: {
+    direction: {
         valType: 'enumerated',
-        values: ['h', 'v'],
-        dflt: 'v',
+        values: ['left', 'right', 'up', 'down'],
+        dflt: 'down',
         role: 'info',
         description: [
-            'Determines whether the menu and buttons are laid out vertically',
-            'or horizontally'
+            'Determines the direction in which the buttons are laid out, whether',
+            'in a dropdown menu or a row/column of buttons. For `left` and `up`,',
+            'the buttons will still appear in left-to-right or top-to-bottom order',
+            'respectively.'
         ].join(' ')
     },
 

src/components/updatemenus/defaults.js

@@ -49,9 +49,8 @@ function menuDefaults(menuIn, menuOut, layoutOut) {
     if(!visible) return;
 
     coerce('active');
-    coerce('orientation');
+    coerce('direction');
     coerce('type');
-    coerce('openreverse');
     coerce('showactive');
 
     coerce('x');

src/components/updatemenus/draw.js

@@ -256,20 +256,22 @@ function drawButtons(gd, gHeader, gButton, menuOpts) {
     var x0 = 0;
     var y0 = 0;
 
+    var isVertical = ['up', 'down'].indexOf(menuOpts.direction) !== -1;
+
     if(menuOpts.type === 'dropdown') {
-        if(menuOpts.orientation === 'v') {
+        if(isVertical) {
             y0 = menuOpts.headerHeight + constants.gapButtonHeader;
         } else {
             x0 = menuOpts.headerWidth + constants.gapButtonHeader;
         }
     }
 
-    if(menuOpts.type === 'dropdown' && menuOpts.openreverse) {
-        if(menuOpts.orientation === 'v') {
-            y0 = -constants.gapButtonHeader + constants.gapButton - menuOpts.openHeight;
-        } else {
-            x0 = -constants.gapButtonHeader + constants.gapButton - menuOpts.openWidth;
-        }
+    if(menuOpts.type === 'dropdown' && menuOpts.direction === 'up') {
+        y0 = -constants.gapButtonHeader + constants.gapButton - menuOpts.openHeight;
+    }
+
+    if(menuOpts.type === 'dropdown' && menuOpts.direction === 'left') {
+        x0 = -constants.gapButtonHeader + constants.gapButton - menuOpts.openWidth;
     }
 
     var posOpts = {
@@ -399,6 +401,8 @@ function findDimenstions(gd, menuOpts) {
     fakeButtons.enter().append('g')
         .classed(constants.dropdownButtonClassName, true);
 
+    var isVertical = ['up', 'down'].indexOf(menuOpts.direction) !== -1;
+
     // loop over fake buttons to find width / height
     fakeButtons.each(function(buttonOpts, i) {
         var button = d3.select(this);
@@ -429,7 +433,7 @@ function findDimenstions(gd, menuOpts) {
         menuOpts.height1 = Math.max(menuOpts.height1, hEff);
         menuOpts.width1 = Math.max(menuOpts.width1, wEff);
 
-        if(menuOpts.orientation === 'v') {
+        if(isVertical) {
             menuOpts.totalWidth = Math.max(menuOpts.totalWidth, wEff);
             menuOpts.openWidth = menuOpts.totalWidth;
             menuOpts.totalHeight += hEff + constants.gapButton;
@@ -442,7 +446,7 @@ function findDimenstions(gd, menuOpts) {
         }
     });
 
-    if(menuOpts.orientation === 'v') {
+    if(isVertical) {
         menuOpts.totalHeight -= constants.gapButton;
     } else {
         menuOpts.totalWidth -= constants.gapButton;
@@ -453,7 +457,7 @@ function findDimenstions(gd, menuOpts) {
     menuOpts.headerHeight = menuOpts.height1;
 
     if(menuOpts.type === 'dropdown') {
-        if(menuOpts.orientation === 'v') {
+        if(isVertical) {
             menuOpts.width1 += constants.arrowPadX;
             menuOpts.totalHeight = menuOpts.height1;
         } else {
@@ -514,11 +518,13 @@ function setItemPosition(item, menuOpts, posOpts, overrideOpts) {
 
     Lib.setTranslate(item, borderWidth + posOpts.x, borderWidth + posOpts.y);
 
+    var isVertical = ['up', 'down'].indexOf(menuOpts.direction) !== -1;
+
     rect.attr({
         x: 0,
         y: 0,
-        width: overrideOpts.width || (menuOpts.orientation === 'v' ? menuOpts.width1 : menuOpts.widths[index]),
-        height: overrideOpts.height || (menuOpts.orientation === 'v' ? menuOpts.heights[index] : menuOpts.height1)
+        width: overrideOpts.width || (isVertical ? menuOpts.width1 : menuOpts.widths[index]),
+        height: overrideOpts.height || (isVertical ? menuOpts.heights[index] : menuOpts.height1)
     });
 
     var tHeight = menuOpts.font.size * constants.fontSizeToHeight,
@@ -533,7 +539,7 @@ function setItemPosition(item, menuOpts, posOpts, overrideOpts) {
     text.attr(textAttrs);
     tspans.attr(textAttrs);
 
-    if(menuOpts.orientation === 'v') {
+    if(isVertical) {
         posOpts.y += menuOpts.heights[index] + posOpts.yPad;
     } else {
         posOpts.x += menuOpts.widths[index] + posOpts.xPad;

test/image/mocks/updatemenus_positioning.json

@@ -47,7 +47,7 @@
         "y": 0.66,
         "yanchor": "top",
         "xanchor": "left",
-        "orientation": "h"
+        "direction": "right"
       },
       {
         "buttons": [
@@ -61,8 +61,7 @@
         "y": 0.33,
         "yanchor": "top",
         "xanchor": "left",
-        "orientation": "h",
-        "openreverse": true
+        "direction": "left"
       },
       {
         "buttons": [
@@ -76,8 +75,7 @@
         "y": 0.0,
         "yanchor": "top",
         "xanchor": "left",
-        "orientation": "v",
-        "openreverse": true
+        "direction": "up"
       },
       {
         "buttons": [
@@ -107,7 +105,7 @@
         "y": 1.01,
         "yanchor": "bottom",
         "xanchor": "left",
-        "orientation": "h",
+        "direction": "right",
         "showactive": false
       },
       {
@@ -131,7 +129,7 @@
         "y": 0.02,
         "yanchor": "top",
         "xanchor": "right",
-        "orientation": "h"
+        "direction": "right"
       },
       {
         "buttons": [

test/jasmine/tests/updatemenus_test.js

@@ -158,14 +158,14 @@ describe('update menus defaults', function() {
         expect(layoutOut.updatemenus[0].type).toEqual('dropdown');
     });
 
-    it('should default \'orientation\' to \'v\'', function() {
+    it('should default \'direction\' to \'down\'', function() {
         layoutIn.updatemenus = [{
             buttons: [{method: 'relayout', args: ['title', 'Hello World']}]
         }];
 
         supply(layoutIn, layoutOut);
 
-        expect(layoutOut.updatemenus[0].orientation).toEqual('v');
+        expect(layoutOut.updatemenus[0].direction).toEqual('down');
     });
 
     it('should default \'showactive\' to true', function() {
@@ -177,16 +177,6 @@ describe('update menus defaults', function() {
 
         expect(layoutOut.updatemenus[0].showactive).toEqual(true);
     });
-
-    it('should default \'openreverse\' to false', function() {
-        layoutIn.updatemenus = [{
-            buttons: [{method: 'relayout', args: ['title', 'Hello World']}]
-        }];
-
-        supply(layoutIn, layoutOut);
-
-        expect(layoutOut.updatemenus[0].openreverse).toEqual(false);
-    });
 });
 
 describe('update menus buttons', function() {