Shape drawing

[emmanuelle]

It would be interesting to port to plotly.js some shape-drawing features which exist in dash-canvas at the moment (https://dash.plot.ly/canvas). In an existing figure, the user would have the possibility to

• create new shapes such as rectangles, lines, freehand lines (paths), by selecting a specific type of drag mode in the modebar
• modify these shapes (moving them, and if possible scaling them and rotating them). Deleting the last shape would be a plus.
• retrieving the geometry of shapes would probably be done thanks to relayoutData events in Dash.

Also discussed:

• having a new_shape_style attribute to set the style of shapes individually.
• all the drag modes would not be in the modebar by default but could be added individually

[emmanuelle]

@etpinard @nicolaskruchten @alexcjohnson please comment and expand!

[alexcjohnson]

create new shapes such as rectangles, lines, freehand lines (paths), by selecting a specific type of drag mode in the modebar

For completeness, also circles, and freehand has a couple of distinct variants to consider: polylines where each click is a point; possibly also a curved variant of the same thing, where your clicks are connected by smooth bezier curves; and completely freehand where we try to follow the mouse path pixel-by-pixel - this last one we already do for lasso selection, with very minimal simplification along the way.

modify these shapes (moving them, and if possible scaling them and rotating them). Deleting the last shape would be a plus.

Rectangles and circles can already be moved and scaled, but still need rotation. Lines are already fully controllable. Freehand paths can be moved, but need scaling and rotation, and it would be nice to be able to at least optionally drag each individual point making up the path (along with the control points if in the Bezier case, perhaps). If you want to play with this, go to https://rreusser.github.io/plotly-mock-viewer/#shapes and turn on editable mode by opening the js console and typing: Plotly.newPlot(gd,gd.data,gd.layout,{editable:true})

One problem with this is it's hard to discover, even when you're already in editable mode. You can see what a drag is going to do though by paying close attention to the mouse pointer. Can we have some handles show up, perhaps when you hover over the shape? Along with, in the case of circles at least, maybe a dashed outline of the bounding box?

retrieving the geometry of shapes would probably be done thanks to relayoutData events in Dash.

"Live figure" discussion for dcc.Graph plotly/dash-core-components#584

Also discussed:

having a new_shape_style attribute to set the style of shapes individually.

no more underscores 😄 so newshapestyle perhaps.

all the drag modes would not be in the modebar by default but could be added individually

👍

[emmanuelle]

Based on the previous discussions, here is a more complete spec, with also a more restricted set to start with.

Modebar buttons for adding shapes (or one modebar menu).

Options

• Rectangles
• Circles/ellipses
• Lines
• Open polylines (straight segments)
• Closed polylines
• Smooth Bezier curves created from clicking at several points
• Freehand drawing
• Is it possible to have an eraser button to remove shapes?

New shapes

The polylines are versions of the existing polygon shape and the Bezier curve of the path shape. The only completely new one would be the freehand brush (following the mouse).

Setting shape appearance parameters (color, thickness, filled or not)

Appearance parameters can use the template default but it would be great to add a newshapestyle parameter (to the layout I guess), which could be set when creating the figure and modified through Dash components (colorpicker, slider etc.).

Modifying shapes after their creation

In editable mode the shapes can be modfied. @alexcjohnson mentioned the possibility of adding handles to the corners, points etc, which would be great. Also a finer control of shape modification, constraining some transformations (eg constrain circles to be circles and not anisotropic ellipses) would be great for UX, but can come later.

For a smooth user experience, after the creation of a shape it would be great to stay in shape creation mode (ie clicking and dragging creates a new shape), but to switch to shape modification when clicking on an existing shape.

Priorities

This is a suggestion of priorities based on my needs for CZI, but of course it can be modified because of feasibility issues.

1. Creating one or two types of shapes by click and drag user interaction (start for example with rectangle), making sure that shape creation triggers a relayoutData or another event that Dash can capture.
2. Modebar buttons to enable shape creation

With these two items we can start work on some Dash demos.

Then
3. Shape creation from user interaction and modebar buttons for the other types of existing shapes
4. Improvement of shape modification (adding handles, maybe constrained edits)
5. newshapestyle or equivalent parameter for controlling shape appearance
6. New freehand drawing mode

Please comment @archmoj @etpinard @antoinerg @nicolaskruchten @alexcjohnson

[archmoj]

Other use case which may require a new issue.
https://community.plot.ly/t/draw-polygon-in-mapbox-with-dash-python/34917

[archmoj]

#4592 could be of ineterst here as well.