8000 Fix issue 359 (zoom overlay drawn beneath shapes) by n-riesco · Pull Request #448 · plotly/plotly.js · GitHub
[go: up one dir, main page]
Skip to content

Fix issue 359 (zoom overlay drawn beneath shapes) #448

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 11 commits into from
Apr 27, 2016
Merged

Fix issue 359 (zoom overlay drawn beneath shapes) #448

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
beccece
Add zoomlayer
n-riesco Apr 19, 2016
5df31d2
Add more tests to select_test.js
n-riesco Apr 5, 2016
2fa50c0
Add zoom tests
n-riesco Apr 5, 2016
319a83b
Fix test description in select_test.js
n-riesco Apr 20, 2016
78effe6
Rename zoom_test.js to cartesian_test.js
n-riesco Apr 20, 2016
b7de50f
dragBox: remove corners before emitting an event
n-riesco Apr 20, 2016
105bed9
Update select_test.js
n-riesco Apr 20, 2016
a360992
Use comma with translate transforms
n-riesco Apr 20, 2016
9032cb7
Pause before starting the drag-interaction tests
n-riesco Apr 20, 2016
03cad13
Revert "Pause before starting the drag-interaction tests"
n-riesco Apr 27, 2016
90700da
Fix failure in `click_test.js`
n-riesco Apr 27, 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
Next Next commit
Add zoomlayer 
Fixes #359
  • Loading branch information
@n-riesco
n-riesco committed Apr 26, 2016
commit becceceb9ef66977fcd91503da3198bc25b65fbc
1 change: 1 addition & 0 deletions src/plot_api/plot_api.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2654,6 +2654,7 @@ function makePlotFramework(gd) {
// these are in a different svg element normally, but get collapsed into a single
// svg when exporting (after inserting 3D)
fullLayout._infolayer = fullLayout._toppaper.append('g').classed('infolayer', true);
fullLayout._zoomlayer = fullLayout._toppaper.append('g').classed('zoomlayer', true);
fullLayout._hoverlayer = fullLayout._toppaper.append('g').classed('hoverlayer', true);

gd.emit('plotly_framework');
Expand Down
13 changes: 9 additions & 4 deletions src/plots/cartesian/dragbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,10 @@ module.exports = function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {

dragElement.init(dragOptions);

var x0,
var zoomlayer = gd._fullLayout._zoomlayer,
xs = plotinfo.x()._offset,
ys = plotinfo.y()._offset,
x0,
y0,
box,
lum,
Expand All @@ -161,22 +164,24 @@ module.exports = function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
dimmed = false;
zoomMode = 'xy';

zb = plotinfo.plot.append('path')
zb = zoomlayer.append('path')
.attr('class', 'zoombox')
.style({
'fill': lum>0.2 ? 'rgba(0,0,0,0)' : 'rgba(255,255,255,0)',
'stroke-width': 0
})
.attr('transform','translate(' + xs + ' ' + ys + ')')
.attr('d', path0 + 'Z');

corners = plotinfo.plot.append('path')
corners = zoomlayer.append('path')
.attr('class', 'zoombox-corners')
.style({
fill: Color.background,
stroke: Color.defaultLine,
'stroke-width': 1,
opacity: 0
})
.attr('transform','translate(' + xs + ' ' + ys + ')')
.attr('d','M0,0Z');

clearSelect();
Expand All @@ -187,7 +192,7 @@ module.exports = function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
// until we get around to persistent selections, remove the outline
// here. The selection itself will be removed when the plot redraws
// at the end.
plotinfo.plot.selectAll('.select-outline').remove();
zoomlayer.selectAll('.select-outline').remove();
}

function zoomMove(dx0, dy0) {
Expand Down
6 changes: 5 additions & 1 deletion src/plots/cartesian/select.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,10 @@ var MINSELECT = constants.MINSELECT;
function getAxId(ax) { return ax._id; }

module.exports = function prepSelect(e, startX, startY, dragOptions, mode) {
var plot = dragOptions.plotinfo.plot,
var plot = dragOptions.gd._fullLayout._zoomlayer,
dragBBox = dragOptions.element.getBoundingClientRect(),
xs = dragOptions.plotinfo.x()._offset,
ys = dragOptions.plotinfo.y()._offset,
x0 = startX - dragBBox.left,
y0 = startY - dragBBox.top,
x1 = x0,
Expand All @@ -45,6 +47,7 @@ module.exports = function prepSelect(e, startX, startY, dragOptions, mode) {
outlines.enter()
.append('path')
.attr('class', function(d) { return 'select-outline select-outline-' + d; })
.attr('transform','translate(' + xs + ' ' + ys + ')')
Copy link
Contributor

Choose a reason for hiding this comment

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

Could you add a , between the translate values? I know it's not strictly necessary but we use them nearly everywhere else in the codebase.

.attr('d', path0 + 'Z');

var corners = plot.append('path')
Expand All @@ -54,6 +57,7 @@ module.exports = function prepSelect(e, startX, startY, dragOptions, mode) {
stroke: color.defaultLine,
'stroke-width': 1
})
.attr('transform','translate(' + xs + ' ' + ys + ')')
.attr('d','M0,0Z');


Expand Down
0