8000 Enable multiple selection for box/lasso tool by dy · Pull Request #1853 · plotly/plotly.js · GitHub
[go: up one dir, main page]
Skip to content

Enable multiple selection for box/lasso tool #1853

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

Closed
wants to merge 11 commits into from
Closed

Enable multiple selection for box/lasso tool #1853

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
842adab
Switch lasso-drag to ctrl
dy Jun 26, 2017
b4a9d35
Outline principle
dy Jun 26, 2017
1c615b5
Merge multipoly
dy Jun 28, 2017
bcaacfd
Make multiselect work properly
dy Jul 3, 2017
c046a47
Enable multiselect by shift
dy Jul 3, 2017
329e0a8
Enable selection for boxes
dy Jul 4, 2017
05d1fd2
Add clear names
dy Jul 4, 2017
f32a48f
Make intermode selection
dy Jul 4, 2017
66e480e
Fix merged polygons tracking
dy Jul 4, 2017
aabb27f
Show selection before interaction
dy Jul 4, 2017
f8a03b3
Make selection an object
dy Jul 4, 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
Prev Previous commit
Next Next commit
Enable selection for boxes
  • Loading branch information
@dy
dy committed Jul 4, 2017
commit 329e0a887b8a431002f5dd203e65612544ea5661
6 changes: 5 additions & 1 deletion src/lib/polygon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,11 @@ polygon.tester = function tester(ptsIn) {
* Test multiple polygons
*/
polygon.multitester = function multitester(list) {
var testers = [], xmin, xmax, ymin, ymax;
var testers = [],
xmin = list[0][0][0],
xmax = xmin,
ymin = list[0][0][1],
ymax = ymin;

for(var i = 0; i < list.length; i++) {
var tester = polygon.tester(list[i]);
Expand Down
4 changes: 2 additions & 2 deletions src/plots/cartesian/dragbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,10 +171,10 @@ module.exports = function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
else if(isSelectOrLasso(dragModeNow)) {
dragOptions.xaxes = xa;
dragOptions.yaxes = ya;
if(!e.shiftKey) {
if(!e.shiftKey || !dragOptions.polygons) {
// list of all prev polygons and their merge
dragOptions.polygons = [];
dragOptions.mergedPolygons = null;
dragOptions.mergedPolygons = [];
}
prepSelect(e, startX, startY, dragOptions, dragModeNow);
}
Expand Down
59 changes: 29 additions & 30 de 10000 letions src/plots/cartesian/select.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ module.exports = function prepSelect(e, startX, startY, dragOptions, mode) {
xAxisIds = dragOptions.xaxes.map(getAxId),
yAxisIds = dragOptions.yaxes.map(getAxId),
allAxes = dragOptions.xaxes.concat(dragOptions.yaxes),
currentPoly, mergedTester, mergedPolyPts, poly;
currentPoly, mergedPolyPts, poly, currentPts;

if(mode === 'lasso') {
currentPoly = filteredPolygon([[x0, y0]], constants.BENDPX);
Expand Down Expand Up @@ -120,57 +120,55 @@ module.exports = function prepSelect(e, startX, startY, dragOptions, mode) {
if(mode === 'select') {
if(dy < Math.min(dx * 0.6, MINSELECT)) {
// horizontal motion: make a vertical box
poly = polygonTester([[x0, 0], [x0, ph], [x1, ph], [x1, 0]]);
currentPts = [[x0, 0], [x0, ph], [x1, ph], [x1, 0]];
// extras to guide users in keeping a straight selection
corners.attr('d', 'M' + poly.xmin + ',' + (y0 - MINSELECT) +
corners.attr('d', 'M' + Math.min(x0, x1) + ',' + (y0 - MINSELECT) +
'h-4v' + (2 * MINSELECT) + 'h4Z' +
'M' + (poly.xmax - 1) + ',' + (y0 - MINSELECT) +
'M' + (Math.max(x0, x1) - 1) + ',' + (y0 - MINSELECT) +
'h4v' + (2 * MINSELECT) + 'h-4Z');

}
else if(dx < Math.min(dy * 0.6, MINSELECT)) {
// vertical motion: make a horizontal box
poly = polygonTester([[0, y0], [0, y1], [pw, y1], [pw, y0]]);
corners.attr('d', 'M' + (x0 - MINSELECT) + ',' + poly.ymin +
currentPts = [[0, y0], [0, y1], [pw, y1], [pw, y0]];
corners.attr('d', 'M' + (x0 - MINSELECT) + ',' + Math.min(y0, y1) +
'v-4h' + (2 * MINSELECT) + 'v4Z' +
'M' + (x0 - MINSELECT) + ',' + (poly.ymax - 1) +
'M' + (x0 - MINSELECT) + ',' + (Math.max(y0, y1) - 1) +
'v4h' + (2 * MINSELECT) + 'v-4Z');
}
else {
// diagonal motion
poly = polygonTester([[x0, y0], [x0, y1], [x1, y1], [x1, y0]]);
currentPts = [[x0, y0], [x0, y1], [x1, y1], [x1, y0]];
corners.attr('d', 'M0,0Z');
}
outlines.attr('d', 'M' + poly.xmin + ',' + poly.ymin +
'H' + (poly.xmax - 1) + 'V' + (poly.ymax - 1) +
'H' + poly.xmin + 'Z');
}
else if(mode === 'lasso') {
currentPoly.addPt([x1, y1]);
currentPts = currentPoly.filtered;
}

if(dragOptions.polygons.length) {
mergedPolyPts = polybool(dragOptions.mergedPolygons, [currentPoly.filtered], 'or');

var mergedPaths = [];
for(i = 0; i < mergedPolyPts.length; i++) {
var ppts = mergedPolyPts[i];
mergedPaths.push(ppts.join('L') + 'L' + ppts[0]);
}
mergedTester = multipolygonTester(dragOptions.polygons.concat([currentPoly.filtered]));
outlines.attr('d', 'M' + mergedPaths.join('M') + 'Z');
}
else {
mergedPolyPts = [currentPoly.filtered];
mergedTester = polygonTester(currentPoly.filtered);
outlines.attr('d', 'M' + mergedTester.pts.join('L') + 'Z');
// create outline & tester
if(dragOptions.polygons.length) {
mergedPolyPts = polybool(dragOptions.mergedPolygons, [currentPts], 'or');
poly = multipolygonTester(dragOptions.polygons.concat([currentPts]));
var mergedPaths = [];
for(i = 0; i < mergedPolyPts.length; i++) {
var ppts = mergedPolyPts[i];
mergedPaths.push(ppts.join('L') + 'L' + ppts[0]);
}
outlines.attr('d', 'M' + mergedPaths.join('M') + 'Z');
}
else {
mergedPolyPts = [currentPts];
poly = polygonTester(currentPts);
outlines.attr('d', 'M' + mergedPolyPts[0].join('L') + 'Z');
}

selection = [];
for(i = 0; i < searchTraces.length; i++) {
searchInfo = searchTraces[i];
[].push.apply(selection, fillSelectionItem(
searchInfo.selectPoints(searchInfo, mergedTester), searchInfo
searchInfo.selectPoints(searchInfo, poly), searchInfo
));
}

Expand All @@ -184,8 +182,8 @@ module.exports = function prepSelect(e, startX, startY, dragOptions, mode) {
ax = allAxes[i];
axLetter = ax._id.charAt(0);
ranges[ax._id] = [
ax.p2d(mergedTester[axLetter + 'min']),
ax.p2d(mergedTester[axLetter + 'max'])].sort(ascending);
ax.p2d(poly[axLetter + 'min']),
ax.p2d(poly[axLetter + 'max'])].sort(ascending);
}
}
else {
Expand Down Expand Up @@ -215,8 +213,9 @@ module.exports = function prepSelect(e, startX, startY, dragOptions, mode) {
dragOptions.gd.emit('plotly_selected', eventData);
}

// save last polygons
dragOptions.polygons.push(currentPts);
dragOptions.mergedPolygons = mergedPolyPts;
dragOptions.polygons.push(currentPoly.filtered);
};
};

Expand Down
0