Shape returns to its initial position when dragging

plotly.js
1

When dragging a shape it returns to its original position and only until the dragging is finished does it appear in the final position, this problem happens because of the following, in my graph I have a shape with a line along with an annotation that shows the position of the current price and its value both are being constantly updated as the data is received from the websocket. I found the problem when reviewing the shape drawing code and that is that in each update of the data of a shape the code deletes all the shapes and It redraws them using the information it stores in layer.layout.shapes, meaning that all the shapes that I have in the graph are constantly updated due to the update that I make in the price line and that is why when a shape is dragged when it is produces an update of the price line, the shape returns to its initial position since it is redrawn with the information that is stored in layer.layout.shapes and since the dragging of the information that is stored at that moment has not yet been completed It is the one of the initial position, it is strange because this problem does not occur when the shape is being drawn only when it is dragged, I think it is not optimal that all the shapes are deleted and redrawn when only one is updated and from what I understood in the documentation that is in the draw.js file, this happens because the index of the shape could change, the problem does not seem to end there because it seems that this same process is also applied with the strokes and annotations and I realize because the html code (svg, g, rect, path) that make up those elements which indicates that it is being rewritten, I hope that in the future they can correct this problem and find a better way to update the shapes, strokes and annotations, for static graphics there would not be problems but with dynamic graphics that are constantly updated it does not seem to me to be the best way

Animation

Of course, it is difficult to select the shape, there will be no way to increase the clickbox for greater precision in the selection and it will also not be possible to prevent the spikes from disappearing while dragging the shape, it is necessary to know where the mouse is being released in relation to to the axles

2

Ok, the solution was the following, since as I explained internally, the Plotly code deletes all the shapes and redraws them every time there is a modification in some shape, reading the data that is stored in layer.layout.shapes, so the solution consists of rewrite the values stored in layer.layout.shapes of the shape being dragged so that when the shape of the price line is updated, the data that is updated during the drag is read, and so that the movement looks more fluid We also update the d attribute of the path element during the drag, leaving the following:


    drag(x, y) {
        const xOffset = x - this.xd
        const yOffset = y - this.yd

        this.#x[0] = xOffset + this.#layer._fullLayout.xaxis.d2p(this.#layer.layout.shapes[this.index].x0)
        this.#y[0] = yOffset + this.#layer._fullLayout.yaxis.c2p(this.#layer.layout.shapes[this.index].y0)
        this.#x[1] = xOffset + this.#layer._fullLayout.xaxis.d2p(this.#layer.layout.shapes[this.index].x1)
        this.#y[1] = yOffset + this.#layer._fullLayout.yaxis.c2p(this.#layer.layout.shapes[this.index].y1)

        $(`.shapelayer > .shape-group[data-index=${this.index}] > path[data-index=${this.index}]`).attr("d", `M${this.#x[0]},${this.#y[0]}L${this.#x[1]},${this.#y[1]}`)
        
        this.#layer.layout.shapes[this.index].x0 = this.#layer._fullLayout.xaxis.p2d(this.#x[0])
        this.#layer.layout.shapes[this.index].y0 = this.#layer._fullLayout.yaxis.p2c(this.#y[0])
        this.#layer.layout.shapes[this.index].x1 = this.#layer._fullLayout.xaxis.p2d(this.#x[1])
        this.#layer.layout.shapes[this.index].y1 = this.#layer._fullLayout.yaxis.p2c(this.#y[1])

        this.xd = x
        this.yd = y
    }

Animation