Station property dialogue: Fit text length of deliveries to boxes

[bfrgottscma]

Sometimes, the names of deliveries are too long to fit in the delivery text box in the station property dialogue (see Example data set, Station properties of Case 4).

However, as a user, I do not want the text in the delivery boxes running over the margins of the respective text boxes since this looks buggy. Please fit the text length to the boxes (e.g. by adding a line break and another line of text in the box).

Think of Tests

• [ ] Excel testsheet needed
• [ ] E2e test needed
• [ ] Integration test needed
• [ ] Unit test needed

Additional context

• [ ] Mockup needed

[j-hha]

Debugging notes:

• white-space on<text>only seems to work in firefox and not in chrome, or safari (see https://developer.mozilla.org/en-US/docs/Web/CSS/white-space)
• a quick - tho not perfect fix - is to use textLength to shrink the text
• another alternative would be to use foreignObject to embed html and use string truncating (see also https://stuffandnonsense.co.uk/blog/a-quick-note-about-svg-foreignobject). We can't let the text wrap tho, as the rectangle has a fixed size and we might run into the same issue with the height if we don't truncate the string.
• we could also render lines and use textPath - this will truncate the text, but it will not add the dots you'll see in the html version. EDIT: Does not seem to work in Chrome. So not an option.

Examples Example textLength (effect is less visible when the overflow isn't quite that large):

Support: https://caniuse.com/?search=textLength

Example foreignObject:

Support: https://caniuse.com/?search=foreignObject

Example line + text path:

Conclusion I am in favour of using foreignObject.

[ruegenbfr]

Currently the node boxes have a fixed horizontal size. (200px).

Another option could be to measure the required space. And to adapt the box size up to a certain horizontal limit. This approach could be combined with the foreignObject approach. The foreignObject solution could be combined with a tooltip showing the complete node content.

In my eyes: The fastest and nice solution would be the foreignObject approach. An easy addon would be the tooltip to compensate for the clippings. A bit more expensive solution but more tidy solution would be to adapt the box sizes.

[j-hha]

@bfrgottscma we're assigning this to you for a decision on how to proceed

[bfrgottscma]

Go for the dots and the tool-tip.

[afalenski]

I just read this ticket by chance. Great that you like the 3-dot solution. This morning I also thought about this and the functionality adds to readability, see #942.