8000 Lasso & rectangular selections by alexcjohnson · Pull Request #154 · plotly/plotly.js · GitHub
[go: up one dir, main page]
Skip to content

Lasso & rectangular selections #154

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 35 commits into from
Jan 6, 2016
Merged

Lasso & rectangular selections #154

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
d6f983e
agignore dist
alexcjohnson Dec 27, 2015
e536a91
point in polygon routine, with tests
alexcjohnson Dec 27, 2015
5cad4ff
lasso and selectbox skeleton
alexcjohnson Dec 28, 2015
ca60e63
propagate dragbox cursor to coverSlip while dragging
alexcjohnson Dec 29, 2015
76926d7
fix modebar logic and tests for select dragmodes
alexcjohnson Dec 29, 2015
78d2867
change polygon and its tests to multi-exports form
alexcjohnson Dec 29, 2015
f0e6cfb
polygon filtering algorithm
alexcjohnson Dec 29, 2015
c0a94f7
polygon filtering test
alexcjohnson Dec 29, 2015
12b43c6
special case of polygon for rectangles
alexcjohnson Dec 30, 2015
07e5cef
selection on scatter points
alexcjohnson Dec 31, 2015
b1a1c24
clear hover when drag starts
alexcjohnson Dec 31, 2015
1958475
didn't end up using a separate lasso handler
alexcjohnson Dec 31, 2015
3c40c41
crosshair it is
alexcjohnson Jan 4, 2016
188a0db
inline rectFirstEdgeTest
alexcjohnson Jan 4, 2016
8d0afb5
Merge branch 'master' into lasso
alexcjohnson Jan 4, 2016
1c5f325
lasso like it's 2016 baby!
alexcjohnson Jan 4, 2016
d0203c8
scatter.selectPoints uses scatter.hasMarkers
alexcjohnson Jan 4, 2016
5be72de
:cow2:
alexcjohnson Jan 4, 2016
057e4ac
prep for adding selection bounds to event data
alexcjohnson Jan 5, 2016
556cb83
split out scatter.selectPoints to a new file
alexcjohnson Jan 5, 2016
7b07a25
support selecting scatter text
alexcjohnson Jan 5, 2016
2a970fc
fx constants file
alexcjohnson Jan 5, 2016
d7abd18
more fx constants
alexcjohnson Jan 6, 2016
7addcec
BENDPX into constants
alexcjohnson Jan 6, 2016
d02d612
horizontal and vertical select boxes
alexcjohnson Jan 6, 2016
698376e
off-by-one error in select outline
alexcjohnson Jan 6, 2016
89c1655
clear selection on zoom/pan
alexcjohnson Jan 6, 2016
d8ed7a7
selection range event data
alexcjohnson Jan 6, 2016
7d897a4
show select icons only when they apply
alexcjohnson Jan 6, 2016
96e01b6
update modebar tests for new select icon logic
alexcjohnson Jan 6, 2016
bc04a15
desciption attribute value delimiters
alexcjohnson Jan 6, 2016
710791d
fix nonlinear axes in select
alexcjohnson Jan 6, 2016
342f991
:cow2:
alexcjohnson Jan 6, 2016
b5c090f
MINSELECT bigger than MINDRAG
alexcjohnson Jan 6, 2016
1d7745f
add lasso and selectbox icon
etpinard Jan 6, 2016
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
MINSELECT bigger than MINDRAG
  • Loading branch information
@alexcjohnson
alexcjohnson committed Jan 6, 2016
commit b5c090f2146a90f764cea1b607993b04c6148992
3 changes: 3 additions & 0 deletions src/plots/cartesian/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@ module.exports = {
// pixels to move mouse before you stop clamping to starting point
MINDRAG: 8,
Copy link
Contributor

Choose a reason for hiding this comment

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

Minor point:

I'd vote for making MINDRAG for select box bigger. I find it kind of hard 1d-selecting over large ranges.

Maybe @chriddyp, @cldougl @mdtusz could try it out.

Copy link
Contributor

Choose a reason for hiding this comment

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

Would be a bit more code, but making the MINDRAG a function of the main drag distance would be useful I think. Something with a log scale would be useful. If I 1D drag the width of my screen, it's likely going to fluctuate a whole lot more than if I drag 100px.

Copy link
Member

Choose a reason for hiding this comment

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

+1 for a larger MINDRAG from me too

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

OK, I've made a MINSELECT that's a little bigger than MINDRAG (12 instead of 8). b5c090f

I don't want to make it as big as MINZOOM (or make it an increasing function of distance) because this limits how thin a rectangle you can select. Which is not a problem with MINZOOM because you can always zoom a second time.


// smallest dimension allowed for a select box
MINSELECT: 12,

// smallest dimension allowed for a zoombox
MINZOOM: 20,

Expand Down
22 changes: 11 additions & 11 deletions src/plots/cartesian/select.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ var constants = require('./constants');

var filteredPolygon = polygon.filter;
var polygonTester = polygon.tester;
var MINDRAG = constants.MINDRAG;
var MINSELECT = constants.MINSELECT;

function getAxId(ax) { return ax._id; }

Expand Down Expand Up @@ -98,23 +98,23 @@ module.exports = function prepSelect(e, startX, startY, dragOptions, mode) {
dy = Math.abs(y1 - y0);

if(mode === 'select') {
if(dy < Math.min(dx * 0.6, MINDRAG)) {
if(dy < Math.min(dx * 0.6, MINSELECT)) {
// horizontal motion: make a vertical box
poly = polygonTester([[x0, 0], [x0, ph], [x1, ph], [x1, 0]]);
// extras to guide users in keeping a straight selection
corners.attr('d', 'M' + poly.xmin + ',' + (y0 - MINDRAG) +
'h-4v' + (2 * MINDRAG) + 'h4Z' +
'M' + (poly.xmax - 1) + ',' + (y0 - MINDRAG) +
'h4v' + (2 * MINDRAG) + 'h-4Z');
corners.attr('d', 'M' + poly.xmin + ',' + (y0 - MINSELECT) +
'h-4v' + (2 * MINSELECT) + 'h4Z' +
'M' + (poly.xmax - 1) + ',' + (y0 - MINSELECT) +
'h4v' + (2 * MINSELECT) + 'h-4Z');

}
else if(dx < Math.min(dy * 0.6, MINDRAG)) {
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 - MINDRAG) + ',' + poly.ymin +
'v-4h' + (2 * MINDRAG) + 'v4Z' +
'M' + (x0 - MINDRAG) + ',' + (poly.ymax - 1) +
'v4h' + (2 * MINDRAG) + 'v-4Z');
corners.attr('d', 'M' + (x0 - MINSELECT) + ',' + poly.ymin +
'v-4h' + (2 * MINSELECT) + 'v4Z' +
'M' + (x0 - MINSELECT) + ',' + (poly.ymax - 1) +
'v4h' + (2 * MINSELECT) + 'v-4Z');
}
else {
// diagonal motion
Expand Down
0