Skip to content

Commit

Permalink
prettier
Browse files Browse the repository at this point in the history
  • Loading branch information
@AlexanderG2207
AlexanderG2207 committed Sep 3, 2023
1 parent c55a623 commit 52c5414
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 14 deletions.
31 changes: 18 additions & 13 deletions src/main/scenes/svg.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -201,12 +201,12 @@ export class Svg extends Component<Props, State> {

const svgElementDetails = (element: UMLElement, x: number, y: number) => {
return {
x: (x),
y: (y),
width: (element.bounds.width),
height: (element.bounds.height),
className: (element.name ? element.name.replace(/[<>]/g, '') : ''),
fill: (element.fillColor || theme.color.background)
x,
y,
width: element.bounds.width,
height: element.bounds.height,
className: element.name ? element.name.replace(/[<>]/g, '') : '',
fill: element.fillColor || theme.color.background,
};
};

Expand All @@ -227,14 +227,11 @@ export class Svg extends Component<Props, State> {
const ElementComponent = Components[element.type as UMLElementType | UMLRelationshipType];
switch (ElementComponent) {
case UMLClassifierComponent:
// If the ElementComponent is of type UMLClassifierComponent, create an array of all members (attributes and methods) for that component.
// If the ElementComponent is of type UMLClassifierComponent, create an array of all members (attributes and methods) for that component.
// Unlike other components, the UMLClassifierComponent needs its members to be children within the component to avoid border rendering issues.
const members = elements.filter((member) => member.owner === element.id);
return (
<svg
key={element.id}
{...svgElementDetails(element, element.bounds.x, element.bounds.y)}
>
<svg key={element.id} {...svgElementDetails(element, element.bounds.x, element.bounds.y)}>
<ElementComponent key={index} element={element} scale={this.props.options?.scale || 1.0}>
{members.map((memberElement, memberIndex) => {
// Nest the members within the UMLClassifierComponent so the border rectangle and path get rendered afterward.
Expand All @@ -244,7 +241,11 @@ export class Svg extends Component<Props, State> {
key={memberElement.id}
{...svgElementDetails(memberElement, 0, memberElement.bounds.y - element.bounds.y)}
>
<MemberElementComponent key={memberIndex} element={memberElement} scale={this.props.options?.scale || 1.0} />
<MemberElementComponent
key={memberIndex}
element={memberElement}
scale={this.props.options?.scale || 1.0}
/>
</svg>
);
})}
Expand All @@ -259,7 +260,11 @@ export class Svg extends Component<Props, State> {
return (
<svg
key={element.id}
{...svgElementDetails(element, element.bounds.x - translationFactor().minX, element.bounds.y - translationFactor().minY)}
{...svgElementDetails(
element,
element.bounds.x - translationFactor().minX,
element.bounds.y - translationFactor().minY,
)}
>
<ElementComponent key={index} element={element} scale={this.props.options?.scale || 1.0} />
</svg>
Expand Down
2 changes: 1 addition & 1 deletion src/tests/unit/test-resources/class-diagram-as-svg.json
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
"<svg width=\"851\" height=\"251\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" fill=\"#ffffff\"><defs><style>\n text {\n fill: #212529;\n font-family: Helvetica Neue, Helvetica, Arial, sans-serif;\n font-size: 16px;\n }\n\n marker, text {\n fill-opacity: 1;\n }\n\n * {\n overflow: visible;\n }\n</style></defs><svg x=\"15\" y=\"15\" width=\"350\" height=\"220\" class=\"Package\" fill=\"#ffffff\"><g><path style=\"transform: scale(1);\" d=\"M 0 10 V 0 H 40 V 10\" stroke=\"black\" fill=\"white\" ></path><rect y=\"10\" width=\"100%\" height=\"210\" stroke=\"black\" fill=\"white\" ></rect><text x=\"50%\" y=\"20\" dy=\"10\" text-anchor=\"middle\" font-weight=\"bold\" pointer-events=\"none\">Package</text></g></svg><svg x=\"95\" y=\"85\" width=\"200\" height=\"100\" class=\"Class\" fill=\"#ffffff\"><g><rect width=\"100%\" height=\"40\" stroke=\"none\" fill=\"white\" ></rect><rect y=\"40\" width=\"100%\" height=\"60\" stroke=\"none\" fill=\"white\" ></rect><svg height=\"40\"><text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" font-weight=\"bold\" pointer-events=\"none\">Class</text></svg><svg x=\"0\" y=\"40\" width=\"199\" height=\"30\" class=\"+ attribute: Type\" fill=\"#ffffff\"><g><rect width=\"100%\" height=\"100%\" stroke=\"none\" fill=\"white\" ></rect><text x=\"10\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"start\" font-weight=\"normal\" pointer-events=\"none\">+ attribute: Type</text></g></svg><svg x=\"0\" y=\"70\" width=\"199\" height=\"30\" class=\"+ method()\" fill=\"#ffffff\"><g><rect width=\"100%\" height=\"100%\" stroke=\"none\" fill=\"white\" ></rect><text x=\"10\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"start\" font-weight=\"normal\" pointer-events=\"none\">+ method()</text></g></svg><rect width=\"100%\" height=\"100%\" stroke=\"black\" fill=\"none\" ></rect><path d=\"M 0 40 H 200\" stroke=\"black\" fill=\"white\" ></path><path d=\"M 0 70 H 200\" stroke=\"black\" fill=\"white\" ></path></g></svg><svg x=\"635\" y=\"105\" width=\"200\" height=\"100\" class=\"Class\" fill=\"#ffffff\"><g><rect width=\"100%\" height=\"40\" stroke=\"none\" fill=\"white\" ></rect><rect y=\"40\" width=\"100%\" height=\"60\" stroke=\"none\" fill=\"white\" ></rect><svg height=\"40\"><text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" font-weight=\"bold\" pointer-events=\"none\">Class</text></svg><svg x=\"0\" y=\"40\" width=\"199\" height=\"30\" class=\"+ attribute: Type\" fill=\"#ffffff\"><g><rect width=\"100%\" height=\"100%\" stroke=\"none\" fill=\"white\" ></rect><text x=\"10\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"start\" font-weight=\"normal\" pointer-events=\"none\">+ attribute: Type</text></g></svg><svg x=\"0\" y=\"70\" width=\"199\" height=\"30\" class=\"+ method()\" fill=\"#ffffff\"><g><rect width=\"100%\" height=\"100%\" stroke=\"none\" fill=\"white\" ></rect><text x=\"10\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"start\" font-weight=\"normal\" pointer-events=\"none\">+ method()</text></g></svg><rect width=\"100%\" height=\"100%\" stroke=\"black\" fill=\"none\" ></rect><path d=\"M 0 40 H 200\" stroke=\"black\" fill=\"white\" ></path><path d=\"M 0 70 H 200\" stroke=\"black\" fill=\"white\" ></path></g></svg><svg x=\"295\" y=\"145\" width=\"340\" height=\"1\" class=\"\" fill=\"#ffffff\"><g><polyline points=\"340 0,0 0\" stroke-width=\"1\" marker-end=\"url(#marker-f5c4e20d-8347-4136-bc02-b7a016e017f5)\" stroke=\"black\" fill=\"none\" ></polyline><text x=\"332\" y=\"0\" dy=\"21\" text-anchor=\"end\" pointer-events=\"none\"></text><text x=\"8\" y=\"0\" dy=\"21\" text-anchor=\"start\" pointer-events=\"none\"></text><text x=\"332\" y=\"0\" dy=\"-10\" text-anchor=\"end\" pointer-events=\"none\"></text><text x=\"8\" y=\"0\" dy=\"-10\" text-anchor=\"start\" pointer-events=\"none\"></text></g></svg></svg>"
"<svg width=\"851\" height=\"251\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" fill=\"#ffffff\"><defs><style>\n text {\n fill: #212529;\n font-family: Helvetica Neue, Helvetica, Arial, sans-serif;\n font-size: 16px;\n }\n\n marker, text {\n fill-opacity: 1;\n }\n\n * {\n overflow: visible;\n }\n</style></defs><svg x=\"15\" y=\"15\" width=\"350\" height=\"220\" class=\"Package\" fill=\"#ffffff\"><g><path style=\"transform: scale(1);\" d=\"M 0 10 V 0 H 40 V 10\" stroke=\"black\" fill=\"white\" ></path><rect y=\"10\" width=\"100%\" height=\"210\" stroke=\"black\" fill=\"white\" ></rect><text x=\"50%\" y=\"20\" dy=\"10\" text-anchor=\"middle\" font-weight=\"bold\" pointer-events=\"none\">Package</text></g></svg><svg x=\"95\" y=\"85\" width=\"200\" height=\"100\" class=\"Class\" fill=\"#ffffff\"><g><rect width=\"100%\" height=\"40\" stroke=\"none\" fill=\"white\" ></rect><rect y=\"40\" width=\"100%\" height=\"60\" stroke=\"none\" fill=\"white\" ></rect><svg height=\"40\"><text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" font-weight=\"bold\" pointer-events=\"none\">Class</text></svg><svg x=\"0\" y=\"40\" width=\"199\" height=\"30\" class=\"+ attribute: Type\" fill=\"#ffffff\"><g><rect width=\"100%\" height=\"100%\" stroke=\"none\" fill=\"white\" ></rect><text x=\"10\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"start\" font-weight=\"normal\" pointer-events=\"none\">+ attribute: Type</text></g></svg><svg x=\"0\" y=\"70\" width=\"199\" height=\"30\" class=\"+ method()\" fill=\"#ffffff\"><g><rect width=\"100%\" height=\"100%\" stroke=\"none\" fill=\"white\" ></rect><text x=\"10\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"start\" font-weight=\"normal\" pointer-events=\"none\">+ method()</text></g></svg><rect width=\"100%\" height=\"100%\" stroke=\"black\" fill=\"none\" ></rect><path d=\"M 0 40 H 200\" stroke=\"black\" fill=\"white\" ></path><path d=\"M 0 70 H 200\" stroke=\"black\" fill=\"white\" ></path></g></svg><svg x=\"635\" y=\"105\" width=\"200\" height=\"100\" class=\"Class\" fill=\"#ffffff\"><g><rect width=\"100%\" height=\"40\" stroke=\"none\" fill=\"white\" ></rect><rect y=\"40\" width=\"100%\" height=\"60\" stroke=\"none\" fill=\"white\" ></rect><svg height=\"40\"><text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" font-weight=\"bold\" pointer-events=\"none\">Class</text></svg><svg x=\"0\" y=\"40\" width=\"199\" height=\"30\" class=\"+ attribute: Type\" fill=\"#ffffff\"><g><rect width=\"100%\" height=\"100%\" stroke=\"none\" fill=\"white\" ></rect><text x=\"10\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"start\" font-weight=\"normal\" pointer-events=\"none\">+ attribute: Type</text></g></svg><svg x=\"0\" y=\"70\" width=\"199\" height=\"30\" class=\"+ method()\" fill=\"#ffffff\"><g><rect width=\"100%\" height=\"100%\" stroke=\"none\" fill=\"white\" ></rect><text x=\"10\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"start\" font-weight=\"normal\" pointer-events=\"none\">+ method()</text></g></svg><rect width=\"100%\" height=\"100%\" stroke=\"black\" fill=\"none\" ></rect><path d=\"M 0 40 H 200\" stroke=\"black\" fill=\"white\" ></path><path d=\"M 0 70 H 200\" stroke=\"black\" fill=\"white\" ></path></g></svg><svg x=\"295\" y=\"145\" width=\"340\" height=\"1\" class=\"\" fill=\"#ffffff\"><g><polyline points=\"340 0,0 0\" stroke-width=\"1\" marker-end=\"url(#marker-f5c4e20d-8347-4136-bc02-b7a016e017f5)\" stroke=\"black\" fill=\"none\" ></polyline><text x=\"332\" y=\"0\" dy=\"21\" text-anchor=\"end\" pointer-events=\"none\"></text><text x=\"8\" y=\"0\" dy=\"21\" text-anchor=\"start\" pointer-events=\"none\"></text><text x=\"332\" y=\"0\" dy=\"-10\" text-anchor=\"end\" pointer-events=\"none\"></text><text x=\"8\" y=\"0\" dy=\"-10\" text-anchor=\"start\" pointer-events=\"none\"></text></g></svg></svg>"

0 comments on commit 52c5414

Please sign in to comment.