theia-ide / sprotty

A next-gen web-based graphics framework
Apache License 2.0
138 stars 23 forks source link

Improve edge anchoring with rotated rectangles #235

Open planger opened 6 years ago

planger commented 6 years ago

When a client uses transform="rotate(...)" on a RectangularView with a RectangularNode, the anchoring of edges doesn't fit nicely, as RectangularNode assumes a rectangle without rotation. Consequently, the client gets the following anchoring:

image

JanKoehnlein commented 6 years ago

Thanks a lot for the contribution. This is very interesting. IMHO, we're looking at two different topics here 1) Rotated figures and anchoring 2) Diamond / rhombus shaped nodes

My feeling is the more important usecase is 2) as there are a lot of diagram notations using it, e.g. flow charts. It usually does not require rotating the child elements, e.g. an inner label as well. Furthermore, a diamond is only a rotated rectangle when its a rotated square. So I'd prefer to have a DiamondNode instead, with independent width and height.

For 1) I'd prefer to have a more generic rotation wrapper that is applicable to all possible views, e.g. by adding an additional transform group. Could be I haven't thought this to the end.

planger commented 6 years ago

Thanks a lot for the fast feedback! You're right, these are indeed two use cases that could both be addressed in a more general way. Good idea!

Ad 1. I haven't tested it, but I believe that the implementation in RotatedRectangularNode#getTranslatedAnchor(...) should work for any type of node, given the anchoring is correct for the unrotated node. So it should be rather easy to generalize that. Ad 2. I should be able to provide the implementation of a DiamondNode in the next couple of days.

Do you want me to add them to the circles example or should we rather create a new example? I think it'd be nice to have an example where all basic node types are used. What do you think?