Drawclosedpath - How to add points to already created path?

Dash Python
1

Hi,

I want to build a small app for annotating images. The user can draw a path like in the example below with the “drawclosedpath” button in Dash. Now when selecting the path, by double-clicking on a point of this path, it is possible to remove this point. My question: Is there any possibility to do the reverse? By that I mean: How can I add a point to the path after it is already created?

import plotly.express as px
from dash import Dash, dcc, html, Input, Output, no_update, callback
from skimage import data

img = data.chelsea()
fig = px.imshow(img)
fig.update_layout(dragmode="drawclosedpath")
config = {
    "modeBarButtonsToAdd": [
        "drawclosedpath",
        "eraseshape",
    ],
    "doubleClickDelay": 1000,
}

# Build App
app = Dash(__name__)
app.layout = html.Div(
    [
        dcc.Graph(id="fig-image", figure=fig, config=config),
    ]
)

app.run()

Thanks for your help

2

Oh wow, I didn’t know that.

I don’t know of the reverse operation neither (if any). A cumbersome workaround could be:

  • parse the shape (the shape contains the coordinates of each point of the shape)
  • add an eventListener listening to clicks while the ctrl button has been held
  • get the coordinates of the click
  • search in parsed points for the two nearest points with respect to the click coordinates
  • create new point between two nearest points at click coordinates
  • redraw the shape