fix remaining rendering of circles

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

@@ -8,10 +8,24 @@ import rough from 'roughjs';
 export const circle = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
-  const { shapeSvg, bbox, halfPadding } = await labelHelper(parent, node, getNodeClasses(node));
+  const padding = node.padding ?? 0;
 
+  if (node.width || node.height) {
+    node.width = (node?.width ?? 0) - padding * 2;
+    if (node.width < 50) {
+      node.width = 50;
+    }
+
+    node.height = (node?.height ?? 0) - padding * 2;
+    if (node.height < 50) {
+      node.height = 50;
+    }
+  }
+
+  const { shapeSvg, halfPadding } = await labelHelper(parent, node, getNodeClasses(node));
   const labelPadding = node.look === 'neo' ? halfPadding * 2 : halfPadding;
-  const radius = Math.max(bbox.width / 2 + labelPadding, (node?.width ?? 0) / 2);
+
+  const radius = (node.width ?? 0) / 2 + labelPadding;
   let circleElem;
   const { cssStyles } = node;
 

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

@@ -7,12 +7,27 @@ import rough from 'roughjs';
 
 export const doublecircle = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
   const { labelStyles, nodeStyles } = styles2String(node);
-  node.labelStyle = labelStyles;
-  const { shapeSvg, bbox, halfPadding } = await labelHelper(parent, node, getNodeClasses(node));
   const gap = 5;
+  node.labelStyle = labelStyles;
+  const padding = node.padding ?? 0;
+
+  if (node.width || node.height) {
+    node.width = (node?.width ?? 0) - padding * 2 - gap * 2;
+    if (node.width < 50) {
+      node.width = 50;
+    }
+
+    node.height = (node?.height ?? 0) - padding * 2 - gap * 2;
+    if (node.height < 50) {
+      node.height = 50;
+    }
+  }
+
+  const { shapeSvg, halfPadding } = await labelHelper(parent, node, getNodeClasses(node));
   const labelPadding = node.look === 'neo' ? halfPadding * 2 : halfPadding;
-  const outerRadius = bbox.width / 2 + labelPadding + gap;
+
-  const innerRadius = bbox.width / 2 + labelPadding;
+  const outerRadius = (node.width ?? 0) / 2 + labelPadding + gap;
+  const innerRadius = outerRadius - gap;
 
   let circleGroup;
   const { cssStyles } = node;

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

@@ -16,7 +16,7 @@ export const filledCircle = (
     .insert('g')
     .attr('class', getNodeClasses(node))
     .attr('id', node.domId ?? node.id);
-  const radius = 7;
+  const radius = (node.width ?? 0) / 2;
   const { cssStyles } = node;
 
   // @ts-ignore - rough is not typed

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

@@ -28,13 +28,14 @@ export const stateEnd = (
     options.fillStyle = 'solid';
   }
 
-  const roughNode = rc.circle(0, 0, 14, {
+  const roughNode = rc.circle(0, 0, node.width, {
     ...options,
     stroke: lineColor,
     strokeWidth: 2,
   });
   const innerFill = stateBorder ?? nodeBorder;
-  const roughInnerNode = rc.circle(0, 0, 5, {
+  const innerNodeRadius = ((node.width ?? 0) * 5) / 14;
+  const roughInnerNode = rc.circle(0, 0, innerNodeRadius, {
     ...options,
     fill: innerFill,
     stroke: innerFill,
@@ -55,7 +56,7 @@ export const stateEnd = (
   updateNodeBounds(node, circle);
 
   node.intersect = function (point) {
-    return intersect.circle(node, 7, point);
+    return intersect.circle(node, (node.width ?? 0) / 2, point);
   };
 
   return shapeSvg;

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

@@ -17,11 +17,11 @@ export const stateStart = (
     .attr('class', 'node default')
     .attr('id', node.domId || node.id);
 
-  let circle;
+  let circle: d3.Selection<SVGCircleElement, unknown, Element | null, unknown>;
   if (node.look === 'handDrawn') {
     // @ts-ignore TODO: Fix rough typings
     const rc = rough.svg(shapeSvg);
-    const roughNode = rc.circle(0, 0, 14, solidStateFill(lineColor));
+    const roughNode = rc.circle(0, 0, node.width, solidStateFill(lineColor));
     circle = shapeSvg.insert(() => roughNode);
   } else {
     circle = shapeSvg.insert('circle', ':first-child');
@@ -29,7 +29,11 @@ export const stateStart = (
 
   // center the circle around its coordinate
   // @ts-ignore TODO: Fix typings
-  circle.attr('class', 'state-start').attr('r', 7).attr('width', 14).attr('height', 14);
+  circle
+    .attr('class', 'state-start')
+    .attr('r', (node.width ?? 0) / 2)
+    .attr('width', node.width ?? 0)
+    .attr('height', node.height ?? 0);
 
   updateNodeBounds(node, circle);