Merge branch 'perb-fix-circles-resize' into neo-new-shapes

cypress/platform/size-tester.html

@@ -56,16 +56,17 @@
         logLevel: 1,
       });
 
-      let shape = 'rect';
+      let shape = 'circle';
 
       let code = `
       flowchart TB
+          n80["APA ksldj hfaskljdh aklsjdhf klasjdhf klasjhf klsajdh klasjdhf klasjdhf klasjdh klasjhf klasjdh klajsdhfklasjdhf kljadh fklasjdhf klajsdhf lkasdhf klajsdhf klasjdhfklasjdh klasjhf klasdfh klasdfh aklsjfh akjshkasldfh klasdfh klasjh fklsjhf klasdhf kljasdhf klasdhf klj"]
+          n80@{ shape: '${shape}'}
           n81["APA ksldj hfaskljdh aklsjdhf klasjdhf klasjhf klsajdh klasjdhf klasjdhf klasjdh klasjhf klasjdh klajsdhfklasjdhf kljadh fklasjdhf klajsdhf lkasdhf klajsdhf klasjdhfklasjdh klasjhf klasdfh klasdfh aklsjfh akjshkasldfh klasdfh klasjh fklsjhf klasdhf kljasdhf klasdhf klj"]
           n82["A single line of text"]
           n81@{ shape: '${shape}'}
           n82@{ shape: '${shape}'}
           n83@{ label: "A single line of text", shape: '${shape}'}
-          n80["APA ksldj hfaskljdh aklsjdhf klasjdhf klasjhf klsajdh klasjdhf klasjdhf klasjdh klasjhf klasjdh klajsdhfklasjdhf kljadh fklasjdhf klajsdhf lkasdhf klajsdhf klasjdhfklasjdh klasjhf klasdfh klasdfh aklsjfh akjshkasldfh klasdfh klasjh fklsjhf klasdhf kljasdhf klasdhf klj"]
           n84@{ shape: '${shape}'}
           `;
 

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

@@ -8,10 +8,25 @@ 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));
+  // If incoming height & width are present, subtract the padding from them
+  // as labelHelper does not take padding into account
+  // also check if the width or height is less than minimum default values (50),
+  // if so set it to min value
+  if (node.width || node.height) {
+    const padding = node.padding ?? 0;
+    node.width = (node?.width ?? 0) - padding * 2;
+    if (node.width < 50) {
+      node.width = 50;
+    }
 
-  const labelPadding = node.look === 'neo' ? halfPadding * 2 : halfPadding;
+    node.height = (node?.height ?? 0) - (node.padding ?? 0) * 2;
-  const radius = Math.max(bbox.width / 2 + labelPadding, (node?.width ?? 0) / 2);
+    if (node.height < 50) {
+      node.height = 50;
+    }
+  }
+  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
+
+  const radius = Math.max(bbox.width / 2, (node?.width ?? 0) / 2) + (node.padding ?? 0);
   let circleElem;
   const { cssStyles } = node;
 

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

@@ -7,12 +7,29 @@ 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;
-  const labelPadding = node.look === 'neo' ? halfPadding * 2 : halfPadding;
+  node.labelStyle = labelStyles;
-  const outerRadius = bbox.width / 2 + labelPadding + gap;
+  // If incoming height & width are present, subtract the padding from them
-  const innerRadius = bbox.width / 2 + labelPadding;
+  // as labelHelper does not take padding into account
+  // also check if the width or height is less than minimum default values (50),
+  // if so set it to min value
+  if (node.width || node.height) {
+    const padding = node.padding ?? 0;
+    node.width = (node?.width ?? 0) - padding * 2;
+    if (node.width < 50) {
+      node.width = 50;
+    }
+
+    node.height = (node?.height ?? 0) - (node.padding ?? 0) * 2;
+    if (node.height < 50) {
+      node.height = 50;
+    }
+  }
+
+  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
+
+  const outerRadius = Math.max(bbox.width / 2, (node?.width ?? 0) / 2) + (node.padding ?? 0);
+  const innerRadius = outerRadius - gap;
 
   let circleGroup;
   const { cssStyles } = node;

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

@@ -12,11 +12,34 @@ export const filledCircle = (
   { config: { themeVariables } }: RenderOptions
 ) => {
   node.label = '';
+
+  // If incoming height & width are present, subtract the padding from them
+  // as labelHelper does not take padding into account
+  // also check if the width or height is less than minimum default values (50),
+  // if so set it to min value
+  if (node.width || node.height) {
+    if ((node.width ?? 0) < 50) {
+      node.width = 50;
+    }
+
+    if ((node.height ?? 0) < 50) {
+      node.height = 50;
+    }
+  }
+
+  if (!node.width) {
+    node.width = 50;
+  }
+
+  if (!node.height) {
+    node.width = 50;
+  }
+
   const shapeSvg = parent
     .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

@@ -14,6 +14,29 @@ export const stateEnd = (
   node.labelStyle = labelStyles;
   const { cssStyles } = node;
   const { lineColor, stateBorder, nodeBorder } = themeVariables;
+
+  // If incoming height & width are present, subtract the padding from them
+  // as labelHelper does not take padding into account
+  // also check if the width or height is less than minimum default values (50),
+  // if so set it to min value
+  if (node.width || node.height) {
+    if ((node.width ?? 0) < 50) {
+      node.width = 50;
+    }
+
+    if ((node.height ?? 0) < 50) {
+      node.height = 50;
+    }
+  }
+
+  if (!node.width) {
+    node.width = 50;
+  }
+
+  if (!node.height) {
+    node.width = 50;
+  }
+
   const shapeSvg = parent
     .insert('g')
     .attr('class', 'node default')
@@ -28,13 +51,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 +79,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

@@ -12,16 +12,38 @@ export const stateStart = (
 ) => {
   const { lineColor } = themeVariables;
 
+  // If incoming height & width are present, subtract the padding from them
+  // as labelHelper does not take padding into account
+  // also check if the width or height is less than minimum default values (50),
+  // if so set it to min value
+  if (node.width || node.height) {
+    if ((node.width ?? 0) < 50) {
+      node.width = 50;
+    }
+
+    if ((node.height ?? 0) < 50) {
+      node.height = 50;
+    }
+  }
+
+  if (!node.width) {
+    node.width = 50;
+  }
+
+  if (!node.height) {
+    node.width = 50;
+  }
+
   const shapeSvg = parent
     .insert('g')
     .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 +51,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);