update curlyBraces shape to new curlyBraceLeft shape

cypress/integration/rendering/newShapes.spec.ts

@@ -1,7 +1,7 @@
 import { imgSnapshotTest } from '../../helpers/util.ts';
 
-const looks = ['classic', 'handDrawn'] as const;
+const looks = ['classic'] as const;
-const directions = ['TB', 'BT', 'LR', 'RL'] as const;
+const directions = ['TB'] as const;
 const newShapesSet1 = [
   'triangle',
   'slopedRect',
@@ -36,19 +36,13 @@ const newShapesSet4 = [
 const newShapesSet5 = [
   'linedWaveEdgedRect',
   'taggedWaveEdgedRectangle',
-  'curlyBraces',
+  'curlyBraceLeft',
   'curvedTrapezoid',
   'waveRectangle',
 ] as const;
 
 // Aggregate all shape sets into a single array
-const newShapesSets = [
+const newShapesSets = [newShapesSet2] as const;
-  newShapesSet1,
-  newShapesSet2,
-  newShapesSet3,
-  newShapesSet4,
-  newShapesSet5,
-] as const;
 
 looks.forEach((look) => {
   directions.forEach((direction) => {

packages/mermaid/src/rendering-util/rendering-elements/nodes.js

@@ -48,7 +48,7 @@ import { multiWaveEdgedRectangle } from './shapes/multiWaveEdgedRectangle.js';
 import { windowPane } from './shapes/windowPane.js';
 import { linedWaveEdgedRect } from './shapes/linedWaveEdgedRect.js';
 import { taggedWaveEdgedRectangle } from './shapes/taggedWaveEdgedRectangle.js';
-import { curlyBraces } from './shapes/curlyBraces.js';
+import { curlyBraceLeft } from './shapes/curlyBraceLeft.js';
 
 //Use these names as the left side to render shapes.
 const shapes = {
@@ -213,9 +213,9 @@ const shapes = {
   lightningBolt,
   bolt: lightningBolt,
   'com-link': lightningBolt,
-  curlyBraces,
+  curlyBraceLeft,
-  brace: curlyBraces,
+  brace: curlyBraceLeft,
-  comment: curlyBraces,
+  comment: curlyBraceLeft,
   hourglass,
   odd: rect_left_inv_arrow,
   labelRect,

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

@@ -31,13 +31,13 @@ function generateCirclePoints(
     const angle = startAngleRad + i * angleStep;
     const x = centerX + radius * Math.cos(angle);
     const y = centerY + radius * Math.sin(angle);
-    points.push({ x, y });
+    points.push({ x: -x, y: -y });
   }
 
   return points;
 }
 
-export const curlyBraces = async (parent: SVGAElement, node: Node) => {
+export const curlyBraceLeft = async (parent: SVGAElement, node: Node) => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
   const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
@@ -48,25 +48,25 @@ export const curlyBraces = async (parent: SVGAElement, node: Node) => {
   const { cssStyles } = node;
 
   const points = [
-    ...generateCirclePoints(w / 2, -h / 2, radius, 20, -90, 0),
+    ...generateCirclePoints(w / 2, -h / 2, 10, 30, -90, 0),
-    { x: w / 2 + radius, y: -radius },
+    { x: -w / 2 - radius, y: radius },
     ...generateCirclePoints(w / 2 + w * 0.1, -radius, radius, 20, -180, -270),
     ...generateCirclePoints(w / 2 + w * 0.1, radius, radius, 20, -90, -180),
-    { x: w / 2 + radius, y: h / 2 },
+    { x: -w / 2 - radius, y: -h / 2 },
     ...generateCirclePoints(w / 2, h / 2, radius, 20, 0, 90),
   ];
 
   const rectPoints = [
-    { x: -w / 2, y: -h / 2 - radius },
     { x: w / 2, y: -h / 2 - radius },
+    { x: -w / 2, y: -h / 2 - radius },
     ...generateCirclePoints(w / 2, -h / 2, radius, 20, -90, 0),
-    { x: w / 2 + radius, y: -radius },
+    { x: -w / 2 - radius, y: -radius },
     ...generateCirclePoints(w / 2 + w * 0.1, -radius, radius, 20, -180, -270),
     ...generateCirclePoints(w / 2 + w * 0.1, radius, radius, 20, -90, -180),
-    { x: w / 2 + radius, y: h / 2 },
+    { x: -w / 2 - radius, y: h / 2 },
     ...generateCirclePoints(w / 2, h / 2, radius, 20, 0, 90),
-    { x: w / 2, y: h / 2 + radius },
     { x: -w / 2, y: h / 2 + radius },
+    { x: w / 2, y: h / 2 + radius },
   ];
 
   // @ts-ignore - rough is not typed
@@ -95,11 +95,11 @@ export const curlyBraces = async (parent: SVGAElement, node: Node) => {
     bowTieRectShape.selectAll('path').attr('style', nodeStyles);
   }
 
-  bowTieRectShape.attr('transform', `translate(${-radius}, 0)`);
+  bowTieRectShape.attr('transform', `translate(${radius}, 0)`);
 
   label.attr(
     'transform',
-    `translate(${-w / 2 - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0))})`
+    `translate(${-w / 2 + radius - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0))})`
   );
 
   updateNodeBounds(node, bowTieRectShape);