-
-
Notifications
You must be signed in to change notification settings - Fork 1.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Shape drawing #4374
Comments
@etpinard @nicolaskruchten @alexcjohnson please comment and expand! |
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.
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: 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?
"Live figure" discussion for
no more underscores 😄 so
👍 |
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
New shapesThe polylines are versions of the existing Setting shape appearance parameters (color, thickness, filled or not)Appearance parameters can use the template default but it would be great to add a Modifying shapes after their creationIn 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. PrioritiesThis is a suggestion of priorities based on my needs for CZI, but of course it can be modified because of feasibility issues.
With these two items we can start work on some Dash demos. Then Please comment @archmoj @etpinard @antoinerg @nicolaskruchten @alexcjohnson |
Other use case which may require a new issue. |
#4592 could be of ineterst here as well. |
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
relayoutData
events in Dash.Also discussed:
new_shape_style
attribute to set the style of shapes individually.The text was updated successfully, but these errors were encountered: