Super duper Studio canvas update

[philipsens]

The Studio canvas has some work left to be done to match the Figma design I did a year ago. Some functionalities in the design are really helping with UX, like circle color and line type.

Items are better alighted than now and attributes have ellipses when to long.

The forwards were hard to draw. So ignore the line shape (and missing label)

For a better overview, sub-issues need to be created

[philipsens]

Forwards

Label position

Problem

Labels on long forwards are difficult to read and require a lot of pan-zooming.

Solution

Add the label just a bit after and before the connection circles on both sides.
If possible, only one in the middle if the forward is really short.

Connection circles

Problem

In zoomed-out mode, the circles are difficult to see. And when merged, it is not possible to see the difference.

Solution

Add the colors to the labels. When wanting to drag a new forward, the dropdown can be used.