Skip to content

Fix scatterternary lasso/select drag modes #1831

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 5 commits into from
Jun 28, 2017
Merged

Fix scatterternary lasso/select drag modes #1831

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
14ae77c
rename variable `plot` to more appropriate `zoomLayer`
etpinard Jun 28, 2017
ec6e360
rm ternary-only zoom layer
etpinard Jun 28, 2017
e3a2c84
DRY up select_test.js
etpinard Jun 28, 2017
4bbbe5c
fix select/lasso on ternary subplots
etpinard Jun 28, 2017
5a48568
add select/lasso for scattercarpet traces
etpinard Jun 28, 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
6 changes: 3 additions & 3 deletions src/plots/cartesian/select.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ var MINSELECT = constants.MINSELECT;
function getAxId(ax) { return ax._id; }

module.exports = function prepSelect(e, startX, startY, dragOptions, mode) {
var plot = dragOptions.gd._fullLayout._zoomlayer,
var zoomLayer = dragOptions.gd._fullLayout._zoomlayer,
dragBBox = dragOptions.element.getBoundingClientRect(),
xs = dragOptions.plotinfo.xaxis._offset,
ys = dragOptions.plotinfo.yaxis._offset,
Expand All @@ -43,15 +43,15 @@ module.exports = function prepSelect(e, startX, startY, dragOptions, mode) {
pts = filteredPolygon([[x0, y0]], constants.BENDPX);
}

var outlines = plot.selectAll('path.select-outline').data([1, 2]);
var outlines = zoomLayer.selectAll('path.select-outline').data([1, 2]);

outlines.enter()
.append('path')
.attr('class', function(d) { return 'select-outline select-outline-' + d; })
.attr('transform', 'translate(' + xs + ', ' + ys + ')')
.attr('d', path0 + 'Z');

var corners = plot.append('path')
var corners = zoomLayer.append('path')
.attr('class', 'zoombox-corners')
.style({
fill: color.background,
Expand Down
4 changes: 4 additions & 0 deletions src/plots/ternary/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,4 +69,8 @@ exports.clean = function(newFullData, newFullLayout, oldFullData, oldFullLayout)
oldTernary.clipDef.remove();
}
}

if(oldFullLayout._zoomlayer) {
oldFullLayout._zoomlayer.selectAll('.select-outline').remove();
}
};
22 changes: 13 additions & 9 deletions src/plots/ternary/ternary.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,6 @@ proto.makeFramework = function() {
'backplot',
'grids',
'frontplot',
'zoom',
'aaxis', 'baxis', 'caxis', 'axlines'
];
var toplevel = _this.plotContainer.selectAll('g.toplevel')
Expand Down Expand Up @@ -123,10 +122,6 @@ proto.makeFramework = function() {

_this.plotContainer.selectAll('.backplot,.frontplot,.grids')
.call(Drawing.setClipUrl, clipId);

if(!_this.graphDiv._context.staticPlot) {
_this.initInteractions();
}
};

var w_over_h = Math.sqrt(4 / 3);
Expand Down Expand Up @@ -263,7 +258,7 @@ proto.adjustLayout = function(ternaryLayout, graphSize) {
_this.layers.plotbg.select('path').attr('d', triangleClip);

var plotTransform = 'translate(' + x0 + ',' + y0 + ')';
_this.plotContainer.selectAll('.scatterlayer,.maplayer,.zoom')
_this.plotContainer.selectAll('.scatterlayer,.maplayer')
.attr('transform', plotTransform);

// TODO: shift axes to accommodate linewidth*sin(30) tick mark angle
Expand Down Expand Up @@ -303,6 +298,10 @@ proto.adjustLayout = function(ternaryLayout, graphSize) {
'M' + (x0 + w / 2) + ',' + y0 + 'l' + (w / 2) + ',' + h : 'M0,0')
.call(Color.stroke, caxis.linecolor || '#000')
.style('stroke-width', (caxis.linewidth || 0) + 'px');

if(!_this.graphDiv._context.staticPlot) {
_this.initInteractions();
}
};

proto.drawAxes = function(doTitles) {
Expand Down Expand Up @@ -382,13 +381,16 @@ proto.initInteractions = function() {
var _this = this,
dragger = _this.layers.plotbg.select('path').node(),
gd = _this.graphDiv,
zoomContainer = _this.layers.zoom;
zoomContainer = gd._fullLayout._zoomlayer;

// use plotbg for the main interactions
var dragOptions = {
element: dragger,
gd: gd,
plotinfo: {plot: zoomContainer},
plotinfo: {
xaxis: _this.xaxis,
yaxis: _this.yaxis
},
doubleclick: doubleClick,
subplot: _this.id,
prepFn: function(e, startX, startY) {
Expand Down Expand Up @@ -441,6 +443,7 @@ proto.initInteractions = function() {

zb = zoomContainer.append('path')
.attr('class', 'zoombox')
.attr('transform', 'translate(' + _this.x0 + ', ' + _this.y0 + ')')
.style({
'fill': lum > 0.2 ? 'rgba(0,0,0,0)' : 'rgba(255,255,255,0)',
'stroke-width': 0
Expand All @@ -449,6 +452,7 @@ proto.initInteractions = function() {

corners = zoomContainer.append('path')
.attr('class', 'zoombox-corners')
.attr('transform', 'translate(' + _this.x0 + ', ' + _this.y0 + ')')
.style({
fill: Color.background,
stroke: Color.defaultLine,
Expand Down Expand Up @@ -603,7 +607,7 @@ proto.initInteractions = function() {
// until we get around to persistent selections, remove the outline
// here. The selection itself will be removed when the plot redraws
// at the end.
_this.plotContainer.selectAll('.select-outline').remove();
zoomContainer.selectAll('.select-outline').remove();
}

function doubleClick() {
Expand Down
135 changes: 108 additions & 27 deletions test/jasmine/tests/select_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ var doubleClick = require('../assets/double_click');

var createGraphDiv = require('../assets/create_graph_div');
var destroyGraphDiv = require('../assets/destroy_graph_div');
var fail = require('../assets/fail_test');
var mouseEvent = require('../assets/mouse_event');
var customMatchers = require('../assets/custom_matchers');

Expand All @@ -16,7 +17,7 @@ describe('select box and lasso', function() {
var selectPath = [[93, 193], [143, 193]];
var lassoPath = [[316, 171], [318, 239], [335, 243], [328, 169]];

beforeEach(function() {
beforeAll(function() {
jasmine.addMatchers(customMatchers);
});

Expand Down Expand Up @@ -59,6 +60,13 @@ describe('select box and lasso', function() {
});
}

function assertSelectionNodes(cornerCnt, outlineCnt) {
expect(d3.selectAll('.zoomlayer > .zoombox-corners').size())
.toBe(cornerCnt, 'selection corner count');
expect(d3.selectAll('.zoomlayer > .select-outline').size())
.toBe(outlineCnt, 'selection outline count');
}

describe('select elements', function() {
var mockCopy = Lib.extendDeep({}, mock);
mockCopy.layout.dragmode = 'select';
Expand All @@ -80,30 +88,21 @@ describe('select box and lasso', function() {
y2 = 50;

gd.once('plotly_selecting', function() {
expect(d3.selectAll('.zoomlayer > .zoombox-corners').size())
.toEqual(1);
expect(d3.selectAll('.zoomlayer > .select-outline').size())
.toEqual(2);
assertSelectionNodes(1, 2);
});

gd.once('plotly_selected', function() {
expect(d3.selectAll('.zoomlayer > .zoombox-corners').size())
.toEqual(0);
expect(d3.selectAll('.zoomlayer > .select-outline').size())
.toEqual(2);
assertSelectionNodes(0, 2);
});

gd.once('plotly_deselect', function() {
expect(d3.selectAll('.zoomlayer > .select-outline').size())
.toEqual(0);
assertSelectionNodes(0, 0);
});

mouseEvent('mousemove', x0, y0);
expect(d3.selectAll('.zoomlayer > .zoombox-corners').size())
.toEqual(0);
assertSelectionNodes(0, 0);

drag([[x0, y0], [x1, y1]]);

doubleClick(x2, y2).then(done);
});
});
Expand All @@ -129,30 +128,21 @@ describe('select box and lasso', function() {
y2 = 50;

gd.once('plotly_selecting', function() {
expect(d3.selectAll('.zoomlayer > .zoombox-corners').size())
.toEqual(1);
expect(d3.selectAll('.zoomlayer > .select-outline').size())
.toEqual(2);
assertSelectionNodes(1, 2);
});

gd.once('plotly_selected', function() {
expect(d3.selectAll('.zoomlayer > .zoombox-corners').size())
.toEqual(0);
expect(d3.selectAll('.zoomlayer > .select-outline').size())
.toEqual(2);
assertSelectionNodes(0, 2);
});

gd.once('plotly_deselect', function() {
expect(d3.selectAll('.zoomlayer > .select-outline').size())
.toEqual(0);
assertSelectionNodes(0, 0);
});

mouseEvent('mousemove', x0, y0);
expect(d3.selectAll('.zoomlayer > .zoombox-corners').size())
.toEqual(0);
assertSelectionNodes(0, 0);

drag([[x0, y0], [x1, y1]]);

doubleClick(x2, y2).then(done);
});
});
Expand Down Expand Up @@ -379,4 +369,95 @@ describe('select box and lasso', function() {
})
.then(done);
});

it('should work on scatterternary traces', function(done) {
var fig = Lib.extendDeep({}, require('@mocks/ternary_simple'));
var gd = createGraphDiv();
var pts = [];

fig.layout.width = 800;
fig.layout.dragmode = 'select';

function assertPoints(expected) {
expect(pts.length).toBe(expected.length, 'selected points length');

pts.forEach(function(p, i) {
var e = expected[i];
expect(p.a).toBe(e.a, 'selected pt a val');
expect(p.b).toBe(e.b, 'selected pt b val');
expect(p.c).toBe(e.c, 'selected pt c val');
});
pts = [];
}

Plotly.plot(gd, fig).then(function() {
gd.on('plotly_selected', function(data) {
pts = data.points;
});

assertSelectionNodes(0, 0);
drag([[400, 200], [445, 235]]);
assertSelectionNodes(0, 2);
assertPoints([{ a: 0.5, b: 0.25, c: 0.25 }]);

return Plotly.relayout(gd, 'dragmode', 'lasso');
})
.then(function() {
assertSelectionNodes(0, 0);
drag([[400, 200], [445, 200], [445, 235], [400, 235], [400, 200]]);
assertSelectionNodes(0, 2);
assertPoints([{ a: 0.5, b: 0.25, c: 0.25 }]);

// should work after a relayout too
return Plotly.relayout(gd, 'width', 400);
})
.then(function() {
assertSelectionNodes(0, 0);
drag([[200, 200], [230, 200], [230, 230], [200, 230], [200, 200]]);
assertSelectionNodes(0, 2);
assertPoints([{ a: 0.5, b: 0.25, c: 0.25 }]);
})
.catch(fail)
.then(done);
});

it('should work on scattercarpet traces', function(done) {
var fig = Lib.extendDeep({}, require('@mocks/scattercarpet'));
var gd = createGraphDiv();
var pts = [];

fig.layout.dragmode = 'select';

function assertPoints(expected) {
expect(pts.length).toBe(expected.length, 'selected points length');

pts.forEach(function(p, i) {
var e = expected[i];
expect(p.a).toBe(e.a, 'selected pt a val');
expect(p.b).toBe(e.b, 'selected pt b val');
});
pts = [];
}

Plotly.plot(gd, fig).then(function() {
gd.on('plotly_selected', function(data) {
pts = data.points;
});

assertSelectionNodes(0, 0);
drag([[300, 200], [400, 250]]);
assertSelectionNodes(0, 2);
assertPoints([{ a: 0.2, b: 1.5 }]);

return Plotly.relayout(gd, 'dragmode', 'lasso');
})
.then(function() {
assertSelectionNodes(0, 0);
drag([[300, 200], [400, 200], [400, 250], [300, 250], [300, 200]]);
assertSelectionNodes(0, 2);
assertPoints([{ a: 0.2, b: 1.5 }]);
})
.catch(fail)
.then(done);
});
});