Merge branch 'feature/bpmn-2.0-adaptions' of https://github.com/ls1in…

…tum/Apollon into feature/bpmn-2.0-adaptions
ls1intum · Nov 23, 2023 · a9572ad · a9572ad
2 parents 58af71a + ec3d131
commit a9572ad
Showing 1 changed file with 10 additions and 8 deletions.
diff --git a/src/main/scenes/svg.tsx b/src/main/scenes/svg.tsx
@@ -196,6 +196,7 @@ export class Svg extends Component<Props, State> {
           }
         }
       }
+
       return { minX: Math.min(minX, 0), minY: Math.min(minY, 0) };
     };
 
@@ -210,12 +211,14 @@ export class Svg extends Component<Props, State> {
       };
     };
 
+    const tfact = translationFactor();
+
     return (
       <StoreProvider initialState={state}>
         <ThemeProvider theme={theme}>
           <svg
-            width={bounds.width + 1}
-            height={bounds.height + 1}
+            width={bounds.width - tfact.minX + 1}
+            height={bounds.height - tfact.minY + 1}
             xmlns="http://www.w3.org/2000/svg"
             xmlnsXlink="http://www.w3.org/1999/xlink"
             fill={theme.color.background}
@@ -231,7 +234,10 @@ export class Svg extends Component<Props, State> {
                   // 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 - tfact.minX, element.bounds.y - tfact.minY)}
+                    >
                       <ElementComponent key={index} element={element}>
                         {members.map((memberElement, memberIndex) => {
                           // Nest the members within the UMLClassifierComponent so the border rectangle and path get rendered afterward.
@@ -256,11 +262,7 @@ 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 - tfact.minX, element.bounds.y - tfact.minY)}
                     >
                       <ElementComponent key={index} element={element} />
                     </svg>