Plotly_relayouting does not pass event data like plotly_hover does

plotly.js
1

I have two labels above the axes which I would like to be able to reposition as it is dragged. The first thing I thought was to use the relayouting event but the only thing that passes the moment of dragging are the xaxis.range ​​and the yaxi.range if you do not have activated the fixedrange, I think it would be a good idea to pass the event data as they do in the hover event so one can access the coordinates and another thing I don’t like is that there is no way to identify if the relayouting / relayout occurred by zooming or dragging, you have to do some calculations with the data that passes to know what caused it, but well now the issue is being able to position the labels when dragging, for the moment I am going to hide them since the spikes also disappear and wait for one day they add this suggestion

drag

2

If you want the labels to stay at a fixed location in graph x and y co-ordinates or at a fixed position on the ‘paper’ (or graph y + paper x etc) there may be easier ways to do it. Does this cover what you are trying to do?

3

Check the image, the gray labels on the axes move on them according to the position of the mouse, which I position with the mousemove event of the container, the problem is that when you drag the graph the container stops receiving mousemove events because plotly creates a layer above this (dragcover) which traps all the events and does not propagate them to the lower layers (stopPropagation), one of the solutions I applied but I did not like was to remove this layer (dragcover) in the mousedown event of the container so I can continue receiving mousemove events in the container but all other elements on the container also receive them

What I need is to be able to move those labels with the mouse position while dragging the graph, as seen in the image they do not move with the mouse while dragging because I have no way of obtaining the coordinates, the relayouting event that is launched During zooming or dragging, only the range property of the axis is passed as long as it does not have fixedrange activated.

Finally, I do not use annotations because it implies calling the Plotly.relayout function in each call to the container’s mousemove event and has a lot of lag.

4

Solved, since the dragcover layer that is created during zooming and dragging does not allow events to pass to the elements that are below, especially to the containing layer, so we trap the dracover events and pass them to the container in this way I can now move the labels on axes while dragging

this.layer.onmousedown = e => {
        if(e.layerX > 0 && e.layerX <= this.width && e.layerY > 0 && e.layerY <= this.height) {
            document.querySelector(".dragcover").onmousemove = e => {
                this.layer.dispatchEvent(new MouseEvent("mousemove", e))

The dragcover is created at the mousedown of the containing layer, so there we take the opportunity to add a listener to the mousemove of the dracover and pass the event to the mousemove of the container

drag2

The only problem left is to ensure that the stickies are not hidden when dragging

5

It has a lot of lag, I will continue looking for other options