Skip to content

Replot on drag #3716

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 7 commits into from
Apr 5, 2019
Merged

Replot on drag #3716

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
ec82529
some linting in plot_api.js
etpinard Apr 2, 2019
869a42f
pass gd to clearSelect
etpinard Apr 2, 2019
d2bd951
first cut Plots.redrag
etpinard Apr 2, 2019
52fe1d1
a fixes for redraw calls in `plotly_selecting` handlers
etpinard Apr 2, 2019
8c04a94
rename x0/y0 -> xStart/yStart to avoid conflict for outer scope
etpinard Apr 3, 2019
8fea156
add _redrag tests
etpinard Apr 3, 2019
51b74b5
lint for mojtaba
etpinard Apr 5, 2019
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
43 changes: 18 additions & 25 deletions src/components/dragelement/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,13 @@
* LICENSE file in the root directory of this source tree.
*/


'use strict';

var mouseOffset = require('mouse-event-offset');
var hasHover = require('has-hover');
var supportsPassive = require('has-passive-events');

var Registry = require('../../registry');
var Lib = require('../../lib');

var removeElement = require('../../lib').removeElement;
var constants = require('../../plots/cartesian/constants');
var interactConstants = require('../../constants/interactions');

Expand All @@ -28,7 +25,6 @@ var unhover = require('./unhover');
dragElement.unhover = unhover.wrapped;
dragElement.unhoverRaw = unhover.raw;


/**
* Abstracts click & drag interactions
*
Expand Down Expand Up @@ -106,8 +102,7 @@ dragElement.init = function init(options) {

if(!supportsPassive) {
element.ontouchstart = onStart;
}
else {
} else {
if(element._ontouchstart) {
element.removeEventListener('touchstart', element._ontouchstart);
}
Expand Down Expand Up @@ -145,8 +140,7 @@ dragElement.init = function init(options) {
if(newMouseDownTime - gd._mouseDownTime < DBLCLICKDELAY) {
// in a click train
numClicks += 1;
}
else {
} else {
// new click train
numClicks = 1;
gd._mouseDownTime = newMouseDownTime;
Expand All @@ -157,8 +151,7 @@ dragElement.init = function init(options) {
if(hasHover && !rightClick) {
dragCover = coverSlip();
dragCover.style.cursor = window.getComputedStyle(element).cursor;
}
else if(!hasHover) {
} else if(!hasHover) {
// document acts as a dragcover for mobile, bc we can't create dragcover dynamically
dragCover = document;
cursor = window.getComputedStyle(document.documentElement).cursor;
Expand Down Expand Up @@ -191,12 +184,21 @@ dragElement.init = function init(options) {
dragElement.unhover(gd);
}

if(gd._dragged && options.moveFn && !rightClick) options.moveFn(dx, dy);
if(gd._dragged && options.moveFn && !rightClick) {
gd._dragdata = {
element: element,
dx: dx,
dy: dy
};
options.moveFn(dx, dy);
}

return;
}

function onDone(e) {
delete gd._dragdata;

if(options.dragmode !== false) {
e.preventDefault();
document.removeEventListener('mousemove', onMove);
Expand All @@ -207,9 +209,8 @@ dragElement.init = function init(options) {
document.removeEventListener('touchend', onDone);

if(hasHover) {
Lib.removeElement(dragCover);
}
else if(cursor) {
removeElement(dragCover);
} else if(cursor) {
dragCover.documentElement.style.cursor = cursor;
cursor = null;
}
Expand All @@ -228,8 +229,7 @@ dragElement.init = function init(options) {

if(gd._dragged) {
if(options.doneFn) options.doneFn();
}
else {
} else {
if(options.clickFn) options.clickFn(numClicks, initialEvent);

// If we haven't dragged, this should be a click. But because of the
Expand Down Expand Up @@ -258,10 +258,8 @@ dragElement.init = function init(options) {
}
}

finishDrag(gd);

gd._dragging = false;
gd._dragged = false;

return;
}
};
Expand All @@ -286,11 +284,6 @@ function coverSlip() {

dragElement.coverSlip = coverSlip;

function finishDrag(gd) {
gd._dragging = false;
if(gd._replotPending) Registry.call('plot', gd);
}

function pointerOffset(e) {
return mouseOffset(
e.changedTouches ? e.changedTouches[0] : e,
Expand Down
40 changes: 13 additions & 27 deletions src/plot_api/plot_api.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,18 +135,8 @@ exports.plot = function(gd, data, layout, config) {
gd.empty = false;
}

if(!gd.layout || graphWasEmpty) gd.layout = helpers.cleanLayout(layout);

// if the user is trying to drag the axes, allow new data and layout
// to come in but don't allow a replot.
if(gd._dragging && !gd._transitioning) {
// signal to drag handler that after everything else is done
// we need to replot, because something has changed
gd._replotPending = true;
return Promise.reject();
} else {
// we're going ahead with a replot now
gd._replotPending = false;
if(!gd.layout || graphWasEmpty) {
gd.layout = helpers.cleanLayout(layout);
}

Plots.supplyDefaults(gd);
Expand Down Expand Up @@ -195,7 +185,7 @@ exports.plot = function(gd, data, layout, config) {
if(gd._context.responsive) {
if(!gd._responsiveChartHandler) {
// Keep a reference to the resize handler to purge it down the road
gd._responsiveChartHandler = function() {Plots.resize(gd);};
gd._responsiveChartHandler = function() { Plots.resize(gd); };

// Listen to window resize
window.addEventListener('resize', gd._responsiveChartHandler);
Expand Down Expand Up @@ -242,10 +232,10 @@ exports.plot = function(gd, data, layout, config) {
return 'gl-canvas gl-canvas-' + d.key.replace('Layer', '');
})
.style({
'position': 'absolute',
'top': 0,
'left': 0,
'overflow': 'visible',
position: 'absolute',
top: 0,
left: 0,
overflow: 'visible',
'pointer-events': 'none'
});
}
Expand Down Expand Up @@ -384,6 +374,7 @@ exports.plot = function(gd, data, layout, config) {
initInteractions,
Plots.addLinks,
Plots.rehover,
Plots.redrag,
// TODO: doAutoMargin is only needed here for axis automargin, which
// happens outside of marginPushers where all the other automargins are
// calculated. Would be much better to separate margin calculations from
Expand Down Expand Up @@ -1402,7 +1393,7 @@ function restyle(gd, astr, val, _traces) {
seq.push(emitAfterPlot);
}

seq.push(Plots.rehover);
seq.push(Plots.rehover, Plots.redrag);

Queue.add(gd,
restyle, [gd, specs.undoit, specs.traces],
Expand Down Expand Up @@ -1911,7 +1902,7 @@ function relayout(gd, astr, val) {
seq.push(emitAfterPlot);
}

seq.push(Plots.rehover);
seq.push(Plots.rehover, Plots.redrag);

Queue.add(gd,
relayout, [gd, specs.undoit],
Expand Down Expand Up @@ -1992,13 +1983,8 @@ function addAxRangeSequence(seq, rangesAltered) {
return Axes.draw(gd, 'redraw');
};

var _clearSelect = function(gd) {
var zoomlayer = gd._fullLayout._zoomlayer;
if(zoomlayer) clearSelect(zoomlayer);
};

seq.push(
_clearSelect,
clearSelect,
subroutines.doAutoRangeAndConstraints,
drawAxes,
subroutines.drawData,
Expand Down Expand Up @@ -2449,7 +2435,7 @@ function update(gd, traceUpdate, layoutUpdate, _traces) {
seq.push(emitAfterPlot);
}

seq.push(Plots.rehover);
seq.push(Plots.rehover, Plots.redrag);

Queue.add(gd,
update, [gd, restyleSpecs.undoit, relayoutSpecs.undoit, restyleSpecs.traces],
Expand Down Expand Up @@ -2852,7 +2838,7 @@ exports.react = function(gd, data, layout, config) {
seq.push(emitAfterPlot);
}

seq.push(Plots.rehover);
seq.push(Plots.rehover, Plots.redrag);

plotDone = Lib.syncOrAsync(seq, gd);
if(!plotDone || !plotDone.then) plotDone = Promise.resolve(gd);
Expand Down
31 changes: 23 additions & 8 deletions src/plots/cartesian/dragbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
* LICENSE file in the root directory of this source tree.
*/


'use strict';

var d3 = require('d3');
Expand Down Expand Up @@ -38,7 +37,6 @@ var constants = require('./constants');
var MINDRAG = constants.MINDRAG;
var MINZOOM = constants.MINZOOM;


// flag for showing "doubleclick to zoom out" only at the beginning
var SHOWZOOMOUTTIP = true;

Expand Down Expand Up @@ -216,13 +214,30 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) {
}
}
}

gd._fullLayout._redrag = function() {
var dragDataNow = gd._dragdata;

if(dragDataNow && dragDataNow.element === dragger) {
var dragModeNow = gd._fullLayout.dragmode;

if(!isSelectOrLasso(dragModeNow)) {
recomputeAxisLists();
updateSubplots([0, 0, pw, ph]);
dragOptions.moveFn(dragDataNow.dx, dragDataNow.dy);
}

// TODO should we try to "re-select" under select/lasso modes?
// probably best to wait for https://github.com/plotly/plotly.js/issues/1851
}
};
};

function clearAndResetSelect() {
// clear selection polygon cache (if any)
dragOptions.plotinfo.selection = false;
// clear selection outlines
clearSelect(zoomlayer);
clearSelect(gd);
}

function clickFn(numClicks, evt) {
Expand Down Expand Up @@ -587,8 +602,8 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) {
else if(yActive === 's') dy = dz(yaxes, 0, -dy);
else if(!yActive) dy = 0;

var x0 = (xActive === 'w') ? dx : 0;
var y0 = (yActive === 'n') ? dy : 0;
var xStart = (xActive === 'w') ? dx : 0;
var yStart = (yActive === 'n') ? dy : 0;

if(links.isSubplotConstrained) {
var i;
Expand All @@ -600,21 +615,21 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) {
scaleZoom(xaxes[i], 1 - dy / ph);
}
dx = dy * pw / ph;
x0 = dx / 2;
xStart = dx / 2;
}
if(!yActive && xActive.length === 1) {
for(i = 0; i < yaxes.length; i++) {
yaxes[i].range = yaxes[i]._r.slice();
scaleZoom(yaxes[i], 1 - dx / pw);
}
dy = dx * ph / pw;
y0 = dy / 2;
yStart = dy / 2;
}
}

updateMatchedAxRange('x');
updateMatchedAxRange('y');
updateSubplots([x0, y0, pw - dx, ph - dy]);
updateSubplots([xStart, yStart, pw - dx, ph - dy]);
ticksAndAnnotations();
}

Expand Down
25 changes: 15 additions & 10 deletions src/plots/cartesian/select.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ var throttle = require('../../lib/throttle');
var makeEventData = require('../../components/fx/helpers').makeEventData;
var getFromId = require('./axis_ids').getFromId;
var clearGlCanvases = require('../../lib/clear_gl_canvases');

var redrawReglTraces = require('../../plot_api/subroutines').redrawReglTraces;

var constants = require('./constants');
Expand Down Expand Up @@ -465,14 +466,14 @@ function multiTester(list) {

function coerceSelectionsCache(evt, gd, dragOptions) {
var fullLayout = gd._fullLayout;
var zoomLayer = fullLayout._zoomlayer;
var plotinfo = dragOptions.plotinfo;

var selectingOnSameSubplot = (
fullLayout._lastSelectedSubplot &&
fullLayout._lastSelectedSubplot === plotinfo.id
fullLayout._lastSelectedSubplot &&
fullLayout._lastSelectedSubplot === plotinfo.id
);
var hasModifierKey = evt.shiftKey || evt.altKey;

if(selectingOnSameSubplot && hasModifierKey &&
(plotinfo.selection && plotinfo.selection.selectionDefs) && !dragOptions.selectionDefs) {
// take over selection definitions from prev mode, if any
Expand All @@ -484,7 +485,7 @@ function coerceSelectionsCache(evt, gd, dragOptions) {

// clear selection outline when selecting a different subplot
if(!selectingOnSameSubplot) {
clearSelect(zoomLayer);
clearSelect(gd);
fullLayout._lastSelectedSubplot = plotinfo.id;
}
}
Expand Down Expand Up @@ -669,7 +670,7 @@ function updateSelectedState(gd, searchTraces, eventData) {
// before anything else, update preGUI if necessary
for(i = 0; i < searchTraces.length; i++) {
var fullInputTrace = searchTraces[i].cd[0].trace._fullInput;
var tracePreGUI = gd._fullLayout._tracePreGUI[fullInputTrace.uid];
var tracePreGUI = gd._fullLayout._tracePreGUI[fullInputTrace.uid] || {};
if(tracePreGUI.selectedpoints === undefined) {
tracePreGUI.selectedpoints = fullInputTrace._input.selectedpoints || null;
}
Expand Down Expand Up @@ -774,11 +775,15 @@ function fillSelectionItem(selection, searchInfo) {
return selection;
}

function clearSelect(zoomlayer) {
// until we get around to persistent selections, remove the outline
// here. The selection itself will be removed when the plot redraws
// at the end.
zoomlayer.selectAll('.select-outline').remove();
// until we get around to persistent selections, remove the outline
// here. The selection itself will be removed when the plot redraws
// at the end.
function clearSelect(gd) {
var fullLayout = gd._fullLayout || {};
var zoomlayer = fullLayout._zoomlayer;
if(zoomlayer) {
zoomlayer.selectAll('.select-outline').remove();
}
}

module.exports = {
Expand Down
Loading