[x] I documented the TypeScript code using JSDoc style.
[x] I added multiple screenshots/screencasts of my UI changes
[x] I translated all the newly inserted strings into German and English
Motivation and Context
When creating a model and exporting it to an SVG, the borders of class elements are not rendered correctly (Before Image). This leads to class elements looking different when exported compared to what the user had modeled in the editor.
292 had an approach that reduced the element height if it was a class member. I found that the issue was regarding the border rect and path being rendered before the class members were rendered, making the class members overlap the rect and path and thus making the borders invisible. That is why a class diagram doesn't have any rendering issues with its border in the editor because the members are rendered before the rect and path (Apollon Editor Image).
Description
To fix this issue, the render order was changed for class members. Before, each Component for the SVG was rendered by creating each element and adding it to a map (Current SVG Export Image). With UMLClassifierComponents, the UMLMemberComponents were generated after the UMLClassifierComponent, making them block the rect and paths of the UMLClassifierComponent since they are rendered in the UMLClassifierComponent.
The UMLClassifierComponent allows ReactNodes (children) to be placed within the Component. This then firstly renders the children and then secondly the rect and paths (Updated SVG Export Image). So, by first checking if the given Element is of type UMLClassifierComponent and then creating an array of all children and placing them within the UMLClassifierComponent, they are rendered before the borders. This results in the borders being visible and the SVG being exported correctly (After Image).
Steps for Testing
Run Apollon locally.
Open Apollon in Google Chrome.
Create a test diagram with as many different diagram types as possible.
Export to SVG.
Take note of any border issues once the SVG is rendered.
Test Coverage
The "class-diagram-as-svg.json" file was adjusted in the unit test resources to get all the tests to pass. This is because the whole order of SVG element rendering was changed, and therefore, the test diagram needed to be adjusted accordingly.
Checklist
Motivation and Context
When creating a model and exporting it to an SVG, the borders of class elements are not rendered correctly (Before Image). This leads to class elements looking different when exported compared to what the user had modeled in the editor.
292 had an approach that reduced the element height if it was a class member. I found that the issue was regarding the border rect and path being rendered before the class members were rendered, making the class members overlap the rect and path and thus making the borders invisible. That is why a class diagram doesn't have any rendering issues with its border in the editor because the members are rendered before the rect and path (Apollon Editor Image).
Description
To fix this issue, the render order was changed for class members. Before, each Component for the SVG was rendered by creating each element and adding it to a map (Current SVG Export Image). With UMLClassifierComponents, the UMLMemberComponents were generated after the UMLClassifierComponent, making them block the rect and paths of the UMLClassifierComponent since they are rendered in the UMLClassifierComponent.
The UMLClassifierComponent allows ReactNodes (children) to be placed within the Component. This then firstly renders the children and then secondly the rect and paths (Updated SVG Export Image). So, by first checking if the given Element is of type UMLClassifierComponent and then creating an array of all children and placing them within the UMLClassifierComponent, they are rendered before the borders. This results in the borders being visible and the SVG being exported correctly (After Image).
Steps for Testing
Test Coverage
The "class-diagram-as-svg.json" file was adjusted in the unit test resources to get all the tests to pass. This is because the whole order of SVG element rendering was changed, and therefore, the test diagram needed to be adjusted accordingly.
Screenshots