Skip to content

Fixedrange click #2279

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 2 commits into from
Jan 23, 2018
Merged

Fixedrange click #2279

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b3102ac
re-enable click for fixedrange plots
alexcjohnson Jan 22, 2018
a26d400
extend cartesian drag tests for new fixedrange/click handling
alexcjohnson Jan 23, 2018
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
45 changes: 26 additions & 19 deletions src/plots/cartesian/dragbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,12 +113,14 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) {

var dragger = makeRectDragger(plotinfo, ns + ew + 'drag', cursor, x, y, w, h);

var allFixedRanges = !yActive && !xActive;

// still need to make the element if the axes are disabled
// but nuke its events (except for maindrag which needs them for hover)
// and stop there
if(!yActive && !xActive && !isSelectOrLasso(fullLayout.dragmode)) {
if(allFixedRanges && !isMainDrag) {
dragger.onmousedown = null;
dragger.style.pointerEvents = isMainDrag ? 'all' : 'none';
dragger.style.pointerEvents = 'none';
Copy link
Contributor

Choose a reason for hiding this comment

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

That is called just once per dragger element, right? Ie. it does not need to be reset to pointerEvents 'all'.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Good thinking - I had to check, but yes, if you change it later so this needs pointerEvents, it will be reinstated by dragElement.init

return dragger;
}

Expand All @@ -129,24 +131,34 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) {
prepFn: function(e, startX, startY) {
var dragModeNow = gd._fullLayout.dragmode;

if(isMainDrag) {
// main dragger handles all drag modes, and changes
// to pan (or to zoom if it already is pan) on shift
if(e.shiftKey) {
if(dragModeNow === 'pan') dragModeNow = 'zoom';
else if(!isSelectOrLasso(dragModeNow)) dragModeNow = 'pan';
}
else if(e.ctrlKey) {
dragModeNow = 'pan';
if(!allFixedRanges) {
if(isMainDrag) {
// main dragger handles all drag modes, and changes
// to pan (or to zoom if it already is pan) on shift
if(e.shiftKey) {
if(dragModeNow === 'pan') dragModeNow = 'zoom';
else if(!isSelectOrLasso(dragModeNow)) dragModeNow = 'pan';
}
else if(e.ctrlKey) {
dragModeNow = 'pan';
}
}
// all other draggers just pan
else dragModeNow = 'pan';
}
// all other draggers just pan
else dragModeNow = 'pan';

if(dragModeNow === 'lasso') dragOptions.minDrag = 1;
else dragOptions.minDrag = undefined;

if(dragModeNow === 'zoom') {
if(isSelectOrLasso(dragModeNow)) {
dragOptions.xaxes = xa;
dragOptions.yaxes = ya;
prepSelect(e, startX, startY, dragOptions, dragModeNow);
}
else if(allFixedRanges) {
clearSelect(zoomlayer);
}
else if(dragModeNow === 'zoom') {
dragOptions.moveFn = zoomMove;
dragOptions.doneFn = zoomDone;

Expand All @@ -162,11 +174,6 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) {
dragOptions.doneFn = dragTail;
clearSelect(zoomlayer);
}
else if(isSelectOrLasso(dragModeNow)) {
dragOptions.xaxes = xa;
dragOptions.yaxes = ya;
prepSelect(e, startX, startY, dragOptions, dragModeNow);
}
},
clickFn: function(numClicks, evt) {
removeZoombox(gd);
Expand Down
108 changes: 62 additions & 46 deletions test/jasmine/tests/cartesian_interact_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,8 +63,8 @@ describe('zoom box element', function() {

describe('main plot pan', function() {

var mock = require('@mocks/10.json'),
gd, modeBar, relayoutCallback;
var mock = require('@mocks/10.json');
var gd, modeBar, relayoutCallback;

beforeEach(function(done) {
gd = createGraphDiv();
Expand Down Expand Up @@ -106,70 +106,86 @@ describe('main plot pan', function() {
expect(gd.layout.xaxis.range).toBeCloseToArray(originalX, precision);
expect(gd.layout.yaxis.range).toBeCloseToArray(originalY, precision);

delay(MODEBAR_DELAY)()
.then(function() {
function _drag(x0, y0, x1, y1) {
mouseEvent('mousedown', x0, y0);
mouseEvent('mousemove', x1, y1);
mouseEvent('mouseup', x1, y1);
}

expect(relayoutCallback).toHaveBeenCalledTimes(1);
relayoutCallback.calls.reset();
function _checkAxes(xRange, yRange) {
expect(gd.layout.xaxis.range).toBeCloseToArray(xRange, precision);
expect(gd.layout.yaxis.range).toBeCloseToArray(yRange, precision);
}

function _runDrag(xr0, xr1, yr0, yr1) {
// Drag scene along the X axis

mouseEvent('mousedown', 110, 150);
mouseEvent('mousemove', 220, 150);
mouseEvent('mouseup', 220, 150);

expect(gd.layout.xaxis.range).toBeCloseToArray(newX, precision);
expect(gd.layout.yaxis.range).toBeCloseToArray(originalY, precision);
_drag(110, 150, 220, 150);
_checkAxes(xr1, yr0);

// Drag scene back along the X axis (not from the same starting point but same X delta)

mouseEvent('mousedown', 280, 150);
mouseEvent('mousemove', 170, 150);
mouseEvent('mouseup', 170, 150);

expect(gd.layout.xaxis.range).toBeCloseToArray(originalX, precision);
expect(gd.layout.yaxis.range).toBeCloseToArray(originalY, precision);
_drag(280, 150, 170, 150);
_checkAxes(xr0, yr0);

// Drag scene along the Y axis

mouseEvent('mousedown', 110, 150);
mouseEvent('mousemove', 110, 190);
mouseEvent('mouseup', 110, 190);

expect(gd.layout.xaxis.range).toBeCloseToArray(originalX, precision);
expect(gd.layout.yaxis.range).toBeCloseToArray(newY, precision);
_drag(110, 150, 110, 190);
_checkAxes(xr0, yr1);

// Drag scene back along the Y axis (not from the same starting point but same Y delta)

mouseEvent('mousedown', 280, 130);
mouseEvent('mousemove', 280, 90);
mouseEvent('mouseup', 280, 90);

expect(gd.layout.xaxis.range).toBeCloseToArray(originalX, precision);
expect(gd.layout.yaxis.range).toBeCloseToArray(originalY, precision);
_drag(280, 130, 280, 90);
_checkAxes(xr0, yr0);

// Drag scene along both the X and Y axis

mouseEvent('mousedown', 110, 150);
mouseEvent('mousemove', 220, 190);
mouseEvent('mouseup', 220, 190);

expect(gd.layout.xaxis.range).toBeCloseToArray(newX, precision);
expect(gd.layout.yaxis.range).toBeCloseToArray(newY, precision);
_drag(110, 150, 220, 190);
_checkAxes(xr1, yr1);

// Drag scene back along the X and Y axis (not from the same starting point but same delta vector)
_drag(280, 130, 170, 90);
_checkAxes(xr0, yr0);
}

mouseEvent('mousedown', 280, 130);
mouseEvent('mousemove', 170, 90);
mouseEvent('mouseup', 170, 90);
delay(MODEBAR_DELAY)()
.then(function() {

expect(gd.layout.xaxis.range).toBeCloseToArray(originalX, precision);
expect(gd.layout.yaxis.range).toBeCloseToArray(originalY, precision);
expect(relayoutCallback).toHaveBeenCalledTimes(1);
relayoutCallback.calls.reset();
_runDrag(originalX, newX, originalY, newY);
})
.then(delay(MODEBAR_DELAY))
.then(function() {
// X and back; Y and back; XY and back
expect(relayoutCallback).toHaveBeenCalledTimes(6);
return Plotly.relayout(gd, {'xaxis.fixedrange': true});
})
.then(function() {
relayoutCallback.calls.reset();
_runDrag(originalX, originalX, originalY, newY);
})
.then(delay(MODEBAR_DELAY))
.then(function() {
// Y and back; XY and back
// should perhaps be 4, but the noop drags still generate a relayout call.
// TODO: should we try and remove this call?
expect(relayoutCallback).toHaveBeenCalledTimes(6);
return Plotly.relayout(gd, {'yaxis.fixedrange': true});
})
.then(function() {
relayoutCallback.calls.reset();
_runDrag(originalX, originalX, originalY, originalY);
})
.then(delay(MODEBAR_DELAY))
.then(function() {
// both axes are fixed - no changes
expect(relayoutCallback).toHaveBeenCalledTimes(0);
return Plotly.relayout(gd, {'xaxis.fixedrange': false, dragmode: 'pan'});
})
.then(function() {
relayoutCallback.calls.reset();
_runDrag(originalX, newX, originalY, originalY);
})
.then(delay(MODEBAR_DELAY))
.then(function() {
// X and back; XY and back
expect(relayoutCallback).toHaveBeenCalledTimes(6);
})
.catch(failTest)
.then(done);
Expand Down
25 changes: 25 additions & 0 deletions test/jasmine/tests/click_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,31 @@ describe('Test click interactions:', function() {
expect(evt.clientY).toEqual(pointPos[1]);
});

it('works with fixedrange axes', function(done) {
Plotly.relayout(gd, {'xaxis.fixedrange': true, 'yaxis.fixedrange': true}).then(function() {
click(pointPos[0], pointPos[1]);
expect(futureData.points.length).toEqual(1);
expect(clickPassthroughs).toBe(2);
expect(contextPassthroughs).toBe(0);

var pt = futureData.points[0];
expect(Object.keys(pt)).toEqual([
'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex',
'x', 'y', 'xaxis', 'yaxis'
]);
expect(pt.curveNumber).toEqual(0);
expect(pt.pointNumber).toEqual(11);
expect(pt.x).toEqual(0.125);
expect(pt.y).toEqual(2.125);

var evt = futureData.event;
expect(evt.clientX).toEqual(pointPos[0]);
expect(evt.clientY).toEqual(pointPos[1]);
})
.catch(fail)
.then(done);
});

var modClickOpts = {
altKey: true,
ctrlKey: true, // this makes it effectively into a right-click
Expand Down
5 changes: 3 additions & 2 deletions test/jasmine/tests/fx_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,11 +231,12 @@ describe('relayout', function() {

return Plotly.relayout(gd, 'yaxis.fixedrange', true);
}).then(function() {
assertMainDrag('pointer', false);
// still active with fixedrange because we're handling clicks here too.
assertMainDrag('pointer', true);

return Plotly.relayout(gd, 'dragmode', 'drag');
}).then(function() {
assertMainDrag('pointer', false);
assertMainDrag('pointer', true);

return Plotly.relayout(gd, 'dragmode', 'lasso');
}).then(function() {
Expand Down