[Shapes] `TextLayer`: Enable wrapping for large texts
Description
This PR updates the layout for Text shapes to improve the display of large texts (e.g. image captions) by enabling the text wrapping. Additionally, the text is not centered anymore on the obervation's x- and y-coordinates, which now represent its top-left corner.
Features list
- [x] Changed the calculation of
xandyso that text is now positioned directly at the observation's coordinates, rather than being centered using the implicit width and height. - [x] Set the
widthandheightof theTextelement to the remaining space from the observation center to the edge of the container, allowing for better text wrapping and layout. - [x] Updated
wrapModefromText.NoWraptoText.Wrapto allow text to wrap within the specified width, improving readability.
Codecov Report
:white_check_mark: All modified and coverable lines are covered by tests.
:white_check_mark: Project coverage is 80.86%. Comparing base (cff6ac5) to head (1cf9a27).
:warning: Report is 4 commits behind head on develop.
:white_check_mark: All tests successful. No failed tests found.
Additional details and impacted files
@@ Coverage Diff @@
## develop #2930 +/- ##
========================================
Coverage 80.86% 80.86%
========================================
Files 57 57
Lines 7792 7792
========================================
Hits 6301 6301
Misses 1491 1491
:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.
:rocket: New features to boost your workflow:
- :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.
I have two minor comments, up for discussion:
-
If I’m not mistaken, the shape
BaseLayercompletely fills theViewer2Dimage container. So, you could useparent.widthandparent.heightinstead of relying onShapeViewerHelper.containerWidthandShapeViewerHelper.containerHeight. That would help to keepShapeViewerHelperscope focused solely on the automatic positioning of shapes. -
If the coordinates of a
Textshape now represent the top-left corner, you might want to renametextLayer.observation.center.xandtextLayer.observation.center.y, for exemple:textLayer.observation.xtextLayer.observation.position.xtextLayer.observation.coordinates.xtextLayer.observation.topLeft.x- etc.
This change should only affect
TextLayer.qml, since this shape doesn’t have any associatedShapeAttribute. Might be best to do this now, before this shape gets widely used in JSON files.