HGustavs / LenaSYS

Code Viewer and Course Organization System used in some courses at University of Skövde
57 stars 31 forks source link

Diagram Module - Research on UML lines #11766

Open a20gabpa opened 2 years ago

a20gabpa commented 2 years ago

The purpose is to perform research on how lines and relations are displayed, and how they work in UML diagrams to prepare a foundation for discussion with the "customer". A sub-purpose is to research what kind of relations should be implemented in diagram dugga.

UML has a wide variety of lines and arrows to represent relation between elements. shown in following figure. Research on which lines are necessary to implement and how they possible can be edited in the diagram. For example, should it be a normal line where the cardinality / type can be changed through the options panel?

image

Research the possibility of making the lines "smarter". At the moment when connecting UML elements with lines, it chose the shortest path with sometimes leads to the lines going behind other elements. What if it is possible to make the lines "smarter" so when a UML is selected, the line will leave the UML element from the top if the connection is placed over the element? Or something similiar to the third picture where the lines are created by horizontal or vertical segements?

image

image

HGustavs commented 2 years ago

These symbols are partially decoration on the inheritance symbol and partly decoration on association symbols

I would say that this is a variant on the EER Information Engineering symbol (crows foot notation)

HGustavs commented 2 years ago

So we could show a crows foot instead of writing 1:N or 1..* or a diamond symbol or an arrow....

those are all variations on how we decorate the ends of associations.

a20gabpa commented 2 years ago

My suggestion is that UML lines should be drawn with only 90-degree angles. One of the reasons is that if the lines are angled, any symbols on the edges need to be redrawn to follow the same angle. This can lead to more complicated code as, for example, a diamond has to be redrawn at a 30-degree angle. Another reason is to be able to minimize lines appearing behind other elements when they are close to each other, as shown in the original comment.

What I have in mind is that the lines used for UML elements, instead consist of several line segments in different lengths that together form the connection between the elements. The image below is a quick sketch of a UML diagram.

image

In this case, the line could be divided into three separate segments (marked with the colors red, green, yellow).

image

Primary, I have thought that the breaking point of lines is based on the distance between the attachment points on the elements. The breakpoints of the lines are marked with a cross (only shown in the picture below). In the example below, the red line is connected to the left element and is connected to a point that is half the distance in the X-direction but the same y-value. The yellow line is connected to the right element and has another point that is half the distance in the X-direction but negative. The green line is connected to both points and together they form the complete line. The idea is that the x and y values should be saved for these points to possibly make it possible to move / adjust these lines in the future.

image

Another thought is that UML lines should have two texts, one text at the left connection and another at the right part, according to the picture below. Then the idea is that the options panel should have two text fields and either radio buttons or dropdowns with the available variants of relation symbols, for example association or composition, draft in the last picture.

image

image

b20thelo commented 2 years ago

A reminder that lines look as if they are disconnected from the inheritance symbol when zoomed in too close to it. Maybe the new solution suggested above will solve it?