Drag error when removing shapes during drag

plotly.js
1

I have the following problem when dragging, I have a line which has two circles at the ends that serve as draggers to manipulate the length of it, when you click on the line the draggers appear and when you click outside they are hidden, at the same time Time to drag, if the line is selected it stays stuck and does not move and apparently the graph does move but when you release the mouse it returns to its original position as you can see in the image

sticky

This does not happen if the line is not selected

drag

The difference between the first and the second is that in the first, when starting the drag, the draggers are removed from the line, each dragger is an object with its corresponding function to remove which is the following

remove() {
    this.#updateIndex()

    Plotly.relayout(this.#layer, {
        "stop": true,
        [`shapes[${this.index}]`]: null
    })

    dispatchEvent(new CustomEvent("removeShape", { bubbles: true, detail: { id: this.#id } }))
}

And which is called when deselecting the line with the following code

#unselectShape(e) {//mousedown
    if(!this.#active) return

    for(let i = this.#draggers.length - 1; i >= 0;  i -= 1) {
        if(this.#draggers[i]) {
            this.#draggers[i].remove()
            this.#draggers[i] = null
        }
    }}

I tried to reproduce the same situation in the codepen but there the error only occurs with the Plotly.update function and not with Plotly.relayout, it must also be taken into account that in the codepen I am using a simple configuration for the graph unlike the app where I have more configured parameters and possibly some also cause the error in the relayout

I hope you can review it and correct it in the future.

2

This error was very difficult to solve but in the end I managed to do it, I could not find the cause why the “shapes” did not move during the drag and not only that I also realized that neither the axes nor the grid moved, this error also extended to the annotations, the ticks and any graphic element (except the strokes) that was drawn in the graph since the function “ticksAndAnnotations ()” is responsible for rendering all these elements during the drag, after tracing and tracing all the functions inside and before the invocation of this function I found that the problem was caused because the value of the “range” was not updated, before the function “ticksAndAnnotations ()” is executed the function “dragAxList ()” is executed which updates the values ​​of the range of a copy of the object xaxi or yaxi according to the axis that is updated, so the only thing I did was update the value of the ranges of the axes that are saved in the fullLayout.xaxis (xaxis2, …) or fullLayout.yaxis (yaxis2, …) with the ranges that were calculated in the dragAxList() function, leaving the function as follows

function dragAxList(gd, axList, pix) {
  for (var i = 0; i < axList.length; i++) {
    var axi = axList[i];
    if (!axi.fixedrange) {
      if (axi.rangebreaks) {
        var p0 = 0;
        var p1 = axi._length;
        var d0 = axi.p2l(p0 + pix) - axi.p2l(p0);
        var d1 = axi.p2l(p1 + pix) - axi.p2l(p1);
        var delta = (d0 + d1) / 2;
        axi.range = [axi.l2r(axi._rl[0] - delta), axi.l2r(axi._rl[1] - delta)];
      } else {
        axi.range = [axi.l2r(axi._rl[0] - pix / axi._m), axi.l2r(axi._rl[1] - pix / axi._m)];
      }
      if (axi.limitRange) axi.limitRange();
    }
    gd._fullLayout[axi._attr].range = axi.range
  }
}

And the result

drag