eclipsesource / papyrus-gefx

A new Editor kind for Papyrus, based on GEFx and GMF Runtime
0 stars 2 forks source link

[Renderer] Improve Shapes rendering #16

Closed CamilleLetavernier closed 5 years ago

CamilleLetavernier commented 6 years ago

Currently, we use JavaFX Shapes (Via Region#setShape) to render special nodes, such as Packages or Comments.

However, Shapes work fine when there is an external border, or when segments don't overlap each other. For Package and Comment, this isn't the case, and using a Path or a Polyline will give the same incorrect result: JavaFX will try to close the shape by itself to draw the gradient inside it, which will typically result in double-width borders where the closing happens.

I'm not sure what's the best way to draw these figures in JavaFX, while still keeping the easy Background/Border customization capabilities.

For now, I've taken some shortcuts, by only drawing the outer border of these shapes:

shapesborders

(On the left, what we have now; on the right, what we want)

When trying to draw the entire border, we can see that it creates a double border (Even if the Path doesn't specify it):

invaliddoublebordershape

The comment tried to overcome this issue by drawing a triangle in the top-right corner, on top of the base shape, but I had to remove it because of Issue #12. It might still be a way to make it work (Overlaying the missing pieces), but we need to be careful about the lifecycle of the figures and parts. Another approach could be to investigate the Border customization capabilities of JavaFX; although the Javadoc seems to indicate that this wouldn't work in our custom-shape scenario:

When applied to a Region with a defined shape, the border width and stroking information for the top is used, while the other attributes are ignored.

For the Package, another alternative would be to style the Label separately from the Package body/compartment (Use a Left/Top/Right border for the label tab, and a full border around the Package body). However, this might make it difficult to have a clean gradient that covers both the Label and Body, as we have today.

CamilleLetavernier commented 5 years ago

Decoration overlays have been added on top of the Shape:

image

Both the shape and the overlay position are bound to the Region's size (width & height properties) so they don't need to be explicitly "refreshed". For the overlay colors and borders, I'm still using an explicit refresh, but it should be possible to use the region's background and border for that as well.

While positioning the package tab overlay, I noticed that the border behaves inconsistently when using Region#setShape compared to a null shape (Standard rounded rectangle region): borders and backgrounds no longer affect the layout, causing labels to be placed differently. In general this isn't really an issue, as we mostly use shapes for some specific cases (e.g. All Packages will have the Package shape; we usually won't dynamically change that - even though it's supported), but for custom diagrams relying heavily on dynamic shapes customization this could become an issue.