Is there a way to make the spikes not hide while dragging?
It’s been a while since I published this post, I had forgotten about it, now that I’ve been fixing some problems with the spikes I’ve taken it up again and this is the solution I gave it, obviously by modifying the Plotly.js file.
Before starting, we must take into account the following, when dragging, a
layer is generated with the dracover class, whose function is similar to the background of the modals and is to prevent the elements that are below this layer from receiving mouse events, and since one of the layers that is below the dragcover is responsible for drawing the spikes, I needed a way to make it receive mouse events, mainly the mousemove, so the solution was to eliminate the dragcover, taking this into account we began.
First we look for the onStart function, below this are the onMove and onDone functions which are responsible for the operation of the drag, I modified these three functions to be as follows
function onStart(e) {
// make dragging and dragged into properties of gd
// so that others can look at and modify them
gd._dragged = false;
gd._dragging = true;
var offset = pointerOffset(e);
startX = offset[0];
startY = offset[1];
initialTarget = e.target;
initialEvent = e;
rightClick = e.buttons === 2 || e.ctrlKey;
// fix Fx.hover for touch events
if (typeof e.clientX === 'undefined' && typeof e.clientY === 'undefined') {
e.clientX = startX;
e.clientY = startY;
}
newMouseDownTime = new Date().getTime();
if (newMouseDownTime - gd._mouseDownTime < doubleClickDelay) {
// in a click train
numClicks += 1;
} else {
// new click train
numClicks = 1;
gd._mouseDownTime = newMouseDownTime;
}
if (options.prepFn) options.prepFn(e, startX, startY);
// if (hasHover && !rightClick) {
// dragCover = coverSlip();
// dragCover.style.cursor = 'grabbing';//window.getComputedStyle(element).cursor;
// } 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;
document.documentElement.style.cursor = window.getComputedStyle(element).cursor;
}
document.addEventListener('mouseup', onDone);
document.addEventListener('touchend', onDone);
if (options.dragmode !== false) {
e.preventDefault();
document.addEventListener('mousemove', onMove);
document.addEventListener('touchmove', onMove, {
passive: false
});
}
return;
}
function onMove(e) {
e.preventDefault();
var offset = pointerOffset(e);
var minDrag = options.minDrag || constants.MINDRAG;
var dxdy = clampFn(offset[0] - startX, offset[1] - startY, minDrag);
var dx = dxdy[0];
var dy = dxdy[1];
var subplot = e.target.attributes["data-subplot"] && e.target.attributes["data-subplot"].value
if (dx || dy) {
gd._dragged = true;
if(subplot) {
gd._fullLayout._rehover();
}
else {
dragElement.unhover(gd, e);
gd._fullLayout._hoversubplot = null
gd._fullLayout._lasthover = null
}
}
if (gd._dragged && options.moveFn && !rightClick) {
gd._dragdata = {
element: element,
dx: dx,
dy: dy
};
options.moveFn(dx, dy);
}
return;
}
function onDone(e) {
var subplot = e.target.attributes["data-subplot"] && e.target.attributes["data-subplot"].value
delete gd._dragdata;
if (options.dragmode !== false) {
e.preventDefault();
document.removeEventListener('mousemove', onMove);
document.removeEventListener('touchmove', onMove);
}
document.removeEventListener('mouseup', onDone);
document.removeEventListener('touchend', onDone);
// if (hasHover) {
// removeElement(dragCover);
// } else if (cursor) {
// dragCover.documentElement.style.cursor = cursor;
// cursor = null;
// }
if(!subplot) {
dragElement.unhover(gd, e);
}
if (!gd._dragging) {
gd._dragged = false;
return;
}
gd._dragging = false;
// don't count as a dblClick unless the mouseUp is also within
// the dblclick delay
if (new Date().getTime() - gd._mouseDownTime > doubleClickDelay) {
numClicks = Math.max(numClicks - 1, 1);
}
if (gd._dragged) {
if (options.doneFn) options.doneFn();
} else {
if (options.clickFn) options.clickFn(numClicks, initialEvent);
// If we haven't dragged, this should be a click. But because of the
// coverSlip changing the element, the natural system might not generate one,
// so we need to make our own. But right clicks don't normally generate
// click events, only contextmenu events, which happen on mousedown.
if (!rightClick) {
var e2;
try {
e2 = new MouseEvent('click', e);
} catch (err) {
var offset = pointerOffset(e);
e2 = document.createEvent('MouseEvents');
e2.initMouseEvent('click', e.bubbles, e.cancelable, e.view, e.detail, e.screenX, e.screenY, offset[0], offset[1], e.ctrlKey, e.altKey, e.shiftKey, e.metaKey, e.button, e.relatedTarget);
}
initialTarget.dispatchEvent(e2);
}
}
gd._dragging = false;
gd._dragged = false;
return;
}
};
Then modify the following condition of the _hover function since it had a condition that checks if the layer is being dragged and exits if it is true.
if (['x', 'y', 'closest', 'x unified', 'y unified'].indexOf(hovermode) === -1 || !gd.calcdata || gd.querySelector('.zoombox')) {
And this is the result
