Skip to content

scrollable dropdown menus #1214

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 21 commits into from
Feb 6, 2017
Merged

scrollable dropdown menus #1214

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
2ec79e7
updatemenus: don't setTranslate button container
n-riesco Nov 25, 2016
5a4ecf3
updatemenus: add scroll bars if needed
n-riesco Nov 24, 2016
66e503c
updatemenus: Fix image test failure
n-riesco Jan 26, 2017
9a0aa64
Merge branch 'master' into pr-20161121-scrollable-dropdown-menus
n-riesco Jan 26, 2017
8df8fd6
updatemenus: Update copyright notice
n-riesco Jan 26, 2017
7057bc7
updatemenus: make ScrollBox#setTranslate public
n-riesco Jan 30, 2017
8d1f333
updatemenus: fix positioning of scrollbars
n-riesco Jan 30, 2017
563009b
updatemenus: center dropmenu on active option
n-riesco Jan 30, 2017
ef5210e
updatemenus: hide scrollbar if header clicked
n-riesco Jan 30, 2017
f17773f
updatemenu: ScrollBox#setTranslate to take pixels
n-riesco Jan 31, 2017
9e3ac1b
updatemenus: fix smooth dropdown folding
n-riesco Jan 31, 2017
13508da
updatemenus: handle mouse wheel events
n-riesco Jan 31, 2017
8ab3ebe
updatemenus: refactor where scrollbox is created
n-riesco Feb 1, 2017
4975401
updatemenus: add <rect> background to scrollbox
n-riesco Feb 1, 2017
3b17d1d
updatemenus: remove un/foldDropdownMenu
n-riesco Feb 2, 2017
b155a8a
updatemenu: fix computation of scrollbox size
n-riesco Feb 2, 2017
109f284
updatemenus: fix positioning of scrollbox
n-riesco Feb 3, 2017
e7c3ae3
Lib: Fix regexp in getTranslate
n-riesco Feb 3, 2017
89c615d
updatemenus: test scrollbox
n-riesco Feb 3, 2017
a554ea6
Merge branch 'master' into PR #1214
n-riesco Feb 3, 2017
79f1107
Drawing: test setTranslate works with negatives
n-riesco Feb 3, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 56 additions & 5 deletions src/components/updatemenus/draw.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ var svgTextUtils = require('../../lib/svg_text_utils');
var anchorUtils = require('../legend/anchor_utils');

var constants = require('./constants');
var ScrollBox = require('./scrollbox');

module.exports = function draw(gd) {
var fullLayout = gd._fullLayout,
Expand Down Expand Up @@ -253,11 +254,19 @@ function drawButtons(gd, gHeader, gButton, menuOpts) {

exit.transition()
.attr('opacity', '0')
.remove();
.remove()
.each('end', function() {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

gifrecord_2017-01-31_143701

This makes the scrollbox disappear after the button exit transition is completed (you can chain .delay(1000) to the transition to make the problem easier to detect).

I would prefer making the scrollbox disappear at the same time as the buttons.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking good now 👍

// remove the scrollbox, if all the buttons have been removed
if(gButton.selectAll('g.' + klass).size() === 0) {
gButton.call(removeAllButtons);
}
});
} else {
exit.remove();
}

// if folding a dropdown menu, don't draw the buttons
if(!buttons.size()) return;

var x0 = 0;
var y0 = 0;
Expand All @@ -281,13 +290,23 @@ function drawButtons(gd, gHeader, gButton, menuOpts) {
}

var posOpts = {
x: x0 + menuOpts.pad.l,
y: y0 + menuOpts.pad.t,
x: menuOpts.lx + x0 + menuOpts.pad.l,
y: menuOpts.ly + y0 + menuOpts.pad.t,
yPad: constants.gapButton,
xPad: constants.gapButton,
index: 0,
};

var fullLayout = gd._fullLayout,
scrollBoxId = 'updatemenus' + fullLayout._uid + menuOpts._index,
scrollBoxPosition = {
l: menuOpts.lx + menuOpts.borderwidth + x0 + menuOpts.pad.l,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice job taking into account borderwidth 🎉

t: menuOpts.ly + menuOpts.borderwidth + y0 + menuOpts.pad.t,
w: Math.max(menuOpts.openWidth, menuOpts.headerWidth),
h: menuOpts.openHeight
},
scrollBox = new ScrollBox(gd, gButton, scrollBoxPosition, scrollBoxId);

buttons.each(function(buttonOpts, buttonIndex) {
var button = d3.select(this);

Expand All @@ -296,6 +315,9 @@ function drawButtons(gd, gHeader, gButton, menuOpts) {
.call(setItemPosition, menuOpts, posOpts);

button.on('click', function() {
// skip `dragend` events
if(d3.event.defaultPrevented) return;

setActive(gd, menuOpts, buttonOpts, gHeader, gButton, buttonIndex);

Plots.executeAPICommand(gd, buttonOpts.method, buttonOpts.args);
Expand All @@ -315,8 +337,32 @@ function drawButtons(gd, gHeader, gButton, menuOpts) {

buttons.call(styleButtons, menuOpts);

// translate button group
Lib.setTranslate(gButton, menuOpts.lx, menuOpts.ly);
scrollBox.enable();

var active = menuOpts.active,
i;
if(isVertical) {
if(scrollBox._vbar) {
var translateY = 0;
for(i = 0; i < active; i++) {
translateY += menuOpts.heights[i] + constants.gapButton;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks off for direction: 'up' when the updatemenu y isn't the default value:

var direction = 'up',
    data = [],
    layout = {
        updatemenus: [{
            y: 0,
            direction: direction,
            buttons: []
        }]
    };

for (var i = 0, n = 20; i < n; i++) {
    data.push({
        y: Array.apply(null, Array(10)).map(() => Math.random()),
        line: {
            shape: 'spline',
            color: 'red'
        },
        visible: i === 0,
        name: 'Data set ' + i,
    });

    var visible = Array.apply(null, Array(n)).map((_, j) => i === j);

    layout.updatemenus[0].buttons.push({
        method: 'restyle',
        args: ['visible', visible],
        label: 'Data set ' + i
    });
}

Plotly.plot('graph', data, layout);

gives (after clicking on the header)

image

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh! The position of the scrollbox is wrong! This happens in the up direction, when the scrollbox doesn't fit within the chart height. Something similar may happen in the left direction.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This one hasn't been addressed yet, correct?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking great now!

}
translateY -= constants.gapButton;

scrollBox.setTranslate(0, translateY);
}
}
else {
if(scrollBox._hbar) {
var translateX = 0;
for(i = 0; i < active; i++) {
translateX += menuOpts.widths[i] + constants.gapButton;
}
translateX -= constants.gapButton;

scrollBox.setTranslate(translateX, 0);
}
}
}

function setActive(gd, menuOpts, buttonOpts, gHeader, gButton, buttonIndex, isSilentUpdate) {
Expand Down Expand Up @@ -565,6 +611,11 @@ function setItemPosition(item, menuOpts, posOpts, overrideOpts) {

function removeAllButtons(gButton) {
gButton.selectAll('g.' + constants.dropdownButtonClassName).remove();

// remove scrollbox
gButton.selectAll('rect.scrollbar-horizontal').remove();
gButton.selectAll('rect.scrollbar-vertical').remove();
gButton.call(Drawing.setClipUrl, null);
}

function clearPushMargins(gd) {
Expand Down
Loading