Merge pull request #29 from Mermaid-Chart/redux-theme

Updated html-label alignment for shapes

Author: ashishjain0512

packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceLeft.ts

@@ -116,11 +116,10 @@ export async function curlyBraceLeft<T extends SVGGraphicsElement>(
 
   curlyBraceLeftShape.attr('transform', `translate(${radius}, 0)`);
 
-  label.attr('transform', `translate(${-bbox.width / 2}, ${-bbox.height / 2})`);
-  // label.attr(
-  //   'transform',
-  //   `translate(${-w / 2 + radius - (bbox.x - (bbox.left ?? 0))},${-paddingY / 2 - (bbox.y - (bbox.top ?? 0))})`
-  // );
+  label.attr(
+    'transform',
+    `translate(${-w / 2 + (paddingX ?? 0) - (bbox.x - (bbox.left ?? 0))}, ${-bbox.height / 2})`
+  );
 
   updateNodeBounds(node, curlyBraceLeftShape);
 

packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceRight.ts

@@ -119,12 +119,10 @@ export async function curlyBraceRight<T extends SVGGraphicsElement>(
 
   curlyBraceRightShape.attr('transform', `translate(${-radius}, 0)`);
 
-  label.attr('transform', `translate(${-bbox.width / 2}, ${-bbox.height / 2})`);
-
-  // label.attr(
-  //   'transform',
-  //   `translate(${-w / 2 + labelPaddingX / 2 - (bbox.x - (bbox.left ?? 0))},${-(labelPaddingY / 2) - (bbox.y - (bbox.top ?? 0))})`
-  // );
+  label.attr(
+    'transform',
+    `translate(${-w / 2 + (labelPaddingX ?? 0) - (bbox.x - (bbox.left ?? 0))}, ${-bbox.height / 2})`
+  );
 
   updateNodeBounds(node, curlyBraceRightShape);
 

packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraces.ts

@@ -137,7 +137,10 @@ export async function curlyBraces<T extends SVGGraphicsElement>(
 
   curlyBracesShape.attr('transform', `translate(${radius - radius / 4}, 0)`);
 
-  label.attr('transform', `translate(${-bbox.width / 2}, ${-bbox.height / 2})`);
+  label.attr(
+    'transform',
+    `translate(${-w / 2 + (labelPaddingX ?? 0) - (bbox.x - (bbox.left ?? 0))}, ${-bbox.height / 2})`
+  );
   updateNodeBounds(node, curlyBracesShape);
 
   node.intersect = function (point) {

packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts

@@ -75,7 +75,7 @@ export async function dividedRectangle<T extends SVGGraphicsElement>(
   // place the label in the center of the lower half of the divided rectangle
   label.attr(
     'transform',
-    `translate(${-bbox.width / 2}, ${-bbox.height / 2 - rectOffset / 2 + rectOffset})`
+    `translate(${-w / 2 + (paddingX ?? 0) - (bbox.x - (bbox.left ?? 0))}, ${-bbox.height / 2 - rectOffset / 2 + rectOffset})`
   );
 
   updateNodeBounds(node, polygon);