Skip to content

Commit b042f93

Browse files
etpinardetpinard
authored
Merge pull request #2668 from plotly/fix-select-pan-clickfn-swap
Fix select <-> pan double-click behavior
2 parents 887cae6 + 1be1742 commit b042f93

File tree

2 files changed

+183
-73
lines changed

2 files changed

+183
-73
lines changed

‎src/plots/cartesian/dragbox.js‎

Lines changed: 76 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -144,40 +144,44 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) {
144144
var dragOptions = {
145145
element: dragger,
146146
gd: gd,
147-
plotinfo: plotinfo,
148-
prepFn: function(e, startX, startY) {
149-
var dragModeNow = gd._fullLayout.dragmode;
150-
151-
recomputeAxisLists();
152-
153-
if(!allFixedRanges) {
154-
if(isMainDrag) {
155-
// main dragger handles all drag modes, and changes
156-
// to pan (or to zoom if it already is pan) on shift
157-
if(e.shiftKey) {
158-
if(dragModeNow === 'pan') dragModeNow = 'zoom';
159-
else if(!isSelectOrLasso(dragModeNow)) dragModeNow = 'pan';
160-
}
161-
else if(e.ctrlKey) {
162-
dragModeNow = 'pan';
163-
}
147+
plotinfo: plotinfo
148+
};
149+
150+
dragOptions.prepFn = function(e, startX, startY) {
151+
var dragModeNow = gd._fullLayout.dragmode;
152+
153+
recomputeAxisLists();
154+
155+
if(!allFixedRanges) {
156+
if(isMainDrag) {
157+
// main dragger handles all drag modes, and changes
158+
// to pan (or to zoom if it already is pan) on shift
159+
if(e.shiftKey) {
160+
if(dragModeNow === 'pan') dragModeNow = 'zoom';
161+
else if(!isSelectOrLasso(dragModeNow)) dragModeNow = 'pan';
162+
}
163+
else if(e.ctrlKey) {
164+
dragModeNow = 'pan';
164165
}
165-
// all other draggers just pan
166-
else dragModeNow = 'pan';
167166
}
167+
// all other draggers just pan
168+
else dragModeNow = 'pan';
169+
}
168170

169-
if(dragModeNow === 'lasso') dragOptions.minDrag = 1;
170-
else dragOptions.minDrag = undefined;
171+
if(dragModeNow === 'lasso') dragOptions.minDrag = 1;
172+
else dragOptions.minDrag = undefined;
171173

172-
if(isSelectOrLasso(dragModeNow)) {
173-
dragOptions.xaxes = xaxes;
174-
dragOptions.yaxes = yaxes;
175-
prepSelect(e, startX, startY, dragOptions, dragModeNow);
176-
}
177-
else if(allFixedRanges) {
174+
if(isSelectOrLasso(dragModeNow)) {
175+
dragOptions.xaxes = xaxes;
176+
dragOptions.yaxes = yaxes;
177+
// this attaches moveFn, clickFn, doneFn on dragOptions
178+
prepSelect(e, startX, startY, dragOptions, dragModeNow);
179+
} else {
180+
dragOptions.clickFn = clickFn;
181+
182+
if(allFixedRanges) {
178183
clearSelect(zoomlayer);
179-
}
180-
else if(dragModeNow === 'zoom') {
184+
} else if(dragModeNow === 'zoom') {
181185
dragOptions.moveFn = zoomMove;
182186
dragOptions.doneFn = zoomDone;
183187

@@ -187,58 +191,58 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) {
187191
dragOptions.minDrag = 1;
188192

189193
zoomPrep(e, startX, startY);
190-
}
191-
else if(dragModeNow === 'pan') {
194+
} else if(dragModeNow === 'pan') {
192195
dragOptions.moveFn = plotDrag;
193196
dragOptions.doneFn = dragTail;
194197
clearSelect(zoomlayer);
195198
}
196-
},
197-
clickFn: function(numClicks, evt) {
198-
removeZoombox(gd);
199+
}
200+
};
199201

200-
if(numClicks === 2 && !singleEnd) doubleClick();
202+
function clickFn(numClicks, evt) {
203+
removeZoombox(gd);
201204

202-
if(isMainDrag) {
203-
Fx.click(gd, evt, plotinfo.id);
205+
if(numClicks === 2 && !singleEnd) doubleClick();
206+
207+
if(isMainDrag) {
208+
Fx.click(gd, evt, plotinfo.id);
209+
}
210+
else if(numClicks === 1 && singleEnd) {
211+
var ax = ns ? ya0 : xa0,
212+
end = (ns === 's' || ew === 'w') ? 0 : 1,
213+
attrStr = ax._name + '.range[' + end + ']',
214+
initialText = getEndText(ax, end),
215+
hAlign = 'left',
216+
vAlign = 'middle';
217+
218+
if(ax.fixedrange) return;
219+
220+
if(ns) {
221+
vAlign = (ns === 'n') ? 'top' : 'bottom';
222+
if(ax.side === 'right') hAlign = 'right';
204223
}
205-
else if(numClicks === 1 && singleEnd) {
206-
var ax = ns ? ya0 : xa0,
207-
end = (ns === 's' || ew === 'w') ? 0 : 1,
208-
attrStr = ax._name + '.range[' + end + ']',
209-
initialText = getEndText(ax, end),
210-
hAlign = 'left',
211-
vAlign = 'middle';
212-
213-
if(ax.fixedrange) return;
214-
215-
if(ns) {
216-
vAlign = (ns === 'n') ? 'top' : 'bottom';
217-
if(ax.side === 'right') hAlign = 'right';
218-
}
219-
else if(ew === 'e') hAlign = 'right';
220-
221-
if(gd._context.showAxisRangeEntryBoxes) {
222-
d3.select(dragger)
223-
.call(svgTextUtils.makeEditable, {
224-
gd: gd,
225-
immediate: true,
226-
background: gd._fullLayout.paper_bgcolor,
227-
text: String(initialText),
228-
fill: ax.tickfont ? ax.tickfont.color : '#444',
229-
horizontalAlign: hAlign,
230-
verticalAlign: vAlign
231-
})
232-
.on('edit', function(text) {
233-
var v = ax.d2r(text);
234-
if(v !== undefined) {
235-
Registry.call('relayout', gd, attrStr, v);
236-
}
237-
});
238-
}
224+
else if(ew === 'e') hAlign = 'right';
225+
226+
if(gd._context.showAxisRangeEntryBoxes) {
227+
d3.select(dragger)
228+
.call(svgTextUtils.makeEditable, {
229+
gd: gd,
230+
immediate: true,
231+
background: gd._fullLayout.paper_bgcolor,
232+
text: String(initialText),
233+
fill: ax.tickfont ? ax.tickfont.color : '#444',
234+
horizontalAlign: hAlign,
235+
verticalAlign: vAlign
236+
})
237+
.on('edit', function(text) {
238+
var v = ax.d2r(text);
239+
if(v !== undefined) {
240+
Registry.call('relayout', gd, attrStr, v);
241+
}
242+
});
239243
}
240244
}
241-
};
245+
}
242246

243247
dragElement.init(dragOptions);
244248

‎test/jasmine/tests/select_test.js‎

Lines changed: 107 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -612,9 +612,115 @@ describe('@flaky Test select box and lasso in general:', function() {
612612
})
613613
.catch(failTest)
614614
.then(done);
615-
616615
});
617616

617+
it('should clear selected points on double click only on pan/lasso modes', function(done) {
618+
var gd = createGraphDiv();
619+
var fig = Lib.extendDeep({}, require('@mocks/0.json'));
620+
fig.data = [fig.data[0]];
621+
fig.layout.xaxis.autorange = false;
622+
fig.layout.xaxis.range = [2, 8];
623+
fig.layout.yaxis.autorange = false;
624+
fig.layout.yaxis.range = [0, 3];
625+
626+
function _assert(msg, exp) {
627+
expect(gd.layout.xaxis.range)
628+
.toBeCloseToArray(exp.xrng, 2, 'xaxis range - ' + msg);
629+
expect(gd.layout.yaxis.range)
630+
.toBeCloseToArray(exp.yrng, 2, 'yaxis range - ' + msg);
631+
632+
if(exp.selpts === null) {
633+
expect('selectedpoints' in gd.data[0])
634+
.toBe(false, 'cleared selectedpoints - ' + msg);
635+
} else {
636+
expect(gd.data[0].selectedpoints)
637+
.toBeCloseToArray(exp.selpts, 2, 'selectedpoints - ' + msg);
638+
}
639+
}
640+
641+
Plotly.plot(gd, fig).then(function() {
642+
_assert('base', {
643+
xrng: [2, 8],
644+
yrng: [0, 3],
645+
selpts: null
646+
});
647+
return Plotly.relayout(gd, 'xaxis.range', [0, 10]);
648+
})
649+
.then(function() {
650+
_assert('after xrng relayout', {
651+
xrng: [0, 10],
652+
yrng: [0, 3],
653+
selpts: null
654+
});
655+
return doubleClick(200, 200);
656+
})
657+
.then(function() {
658+
_assert('after double-click under dragmode zoom', {
659+
xrng: [2, 8],
660+
yrng: [0, 3],
661+
selpts: null
662+
});
663+
return Plotly.relayout(gd, 'dragmode', 'select');
664+
})
665+
.then(function() {
666+
_assert('after relayout to select', {
667+
xrng: [2, 8],
668+
yrng: [0, 3],
669+
selpts: null
670+
});
671+
return drag([[100, 100], [400, 400]]);
672+
})
673+
.then(function() {
674+
_assert('after selection', {
675+
xrng: [2, 8],
676+
yrng: [0, 3],
677+
selpts: [40, 41, 42, 43, 44, 45, 46, 47, 48]
678+
});
679+
return doubleClick(200, 200);
680+
})
681+
.then(function() {
682+
_assert('after double-click under dragmode select', {
683+
xrng: [2, 8],
684+
yrng: [0, 3],
685+
selpts: null
686+
});
687+
return drag([[100, 100], [400, 400]]);
688+
})
689+
.then(function() {
690+
_assert('after selection 2', {
691+
xrng: [2, 8],
692+
yrng: [0, 3],
693+
selpts: [40, 41, 42, 43, 44, 45, 46, 47, 48]
694+
});
695+
return Plotly.relayout(gd, 'dragmode', 'pan');
696+
})
697+
.then(function() {
698+
_assert('after relayout to pan', {
699+
xrng: [2, 8],
700+
yrng: [0, 3],
701+
selpts: [40, 41, 42, 43, 44, 45, 46, 47, 48]
702+
});
703+
return Plotly.relayout(gd, 'yaxis.range', [0, 20]);
704+
})
705+
.then(function() {
706+
_assert('after yrng relayout', {
707+
xrng: [2, 8],
708+
yrng: [0, 20],
709+
selpts: [40, 41, 42, 43, 44, 45, 46, 47, 48]
710+
});
711+
return doubleClick(200, 200);
712+
})
713+
.then(function() {
714+
_assert('after double-click under dragmode pan', {
715+
xrng: [2, 8],
716+
yrng: [0, 3],
717+
// N.B. does not clear selection!
718+
selpts: [40, 41, 42, 43, 44, 45, 46, 47, 48]
719+
});
720+
})
721+
.catch(failTest)
722+
.then(done);
723+
});
618724
});
619725

620726
describe('@flaky Test select box and lasso per trace:', function() {

0 commit comments

Comments
 (0)