Draft of first set of shapes

cypress/platform/knsv-recursive.html

@@ -95,7 +95,7 @@
       }
 
       .mermaid svg {
-        /* font-size: 18px !important; */
+        font-size: 16px !important;
         font-family: 'Recursive', serif;
         font-optical-sizing: auto;
         font-weight: 500;
@@ -128,10 +128,10 @@ flowchart TD
     A("ss") --- n1["Rectangle"] & n2["Rounded"] & n3(["Stadium"])
     n1 --x n4["Diamond"]
     n2 --o n5["Hexagon"]
-    n3 --> n6["Lean Left"]
+    n3 --> n6["Parallelogram"]
     n5 o--o n7["Trapezoid"]
     n4 x--x n8["Lean Right"]
-    n6 <--> n9["Lined Doc"]
+    n6 <--> n9(("Circle"))
     n8 --> n10["Rose"]
     n7 --> n11["Pine"]
     n9 --> n12["Peach"]
@@ -141,7 +141,6 @@ flowchart TD
     n6@{ shape: lean-l}
     n7@{ shape: trap-b}
     n8@{ shape: lean-r}
-    n9@{ shape: lin-doc}
      n10:::Rose
      n11:::Pine
      n12:::Peach
@@ -217,7 +216,7 @@ flowchart TD
         kanban: {
           htmlLabels: false,
         },
-        fontSize: 12,
+        fontSize: 16,
         logLevel: 0,
         securityLevel: 'loose',
         callback,

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

@@ -26,11 +26,14 @@ export const createHexagonPathD = (
 
 export async function hexagon<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
   const { labelStyles, nodeStyles } = styles2String(node);
-  const f = 4;
+  const f = node.look === 'neo' ? 3.5 : 4;
   node.labelStyle = labelStyles;
   const nodePadding = node.padding ?? 0;
-  const labelPaddingX = node.look === 'neo' ? nodePadding * 3 : nodePadding;
-  const labelPaddingY = node.look === 'neo' ? nodePadding * 1.5 : nodePadding;
+  const wa = 70;
+  const ha = 32;
+
+  const labelPaddingX = node.look === 'neo' ? wa : nodePadding;
+  const labelPaddingY = node.look === 'neo' ? ha : nodePadding;
   if (node.width || node.height) {
     const originalHeight = node.height ?? 0;
     const m = originalHeight / f;
@@ -43,7 +46,11 @@ export async function hexagon<T extends SVGGraphicsElement>(parent: D3Selection<
   const h = (node?.height ? node?.height : bbox.height) + labelPaddingX;
   const m = h / f;
 
-  const w = (node?.width ? node?.width : bbox.width) + 2 * m + labelPaddingY;
+  const w =
+    (node?.width ? node?.width : bbox.width) +
+    2 * m +
+    labelPaddingY -
+    (node.look === 'neo' ? 20 : 0);
   const points = [
     { x: m, y: 0 },
     { x: w - m, y: 0 },

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

@@ -10,7 +10,8 @@ export async function lean_left<T extends SVGGraphicsElement>(parent: D3Selectio
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
   const nodePadding = node.padding ?? 0;
-  const labelPaddingY = node.look === 'neo' ? nodePadding * 1.5 : nodePadding;
+  const labelPaddingY = node.look === 'neo' ? 24 : nodePadding;
+  const labelPaddingX = node.look === 'neo' ? 9 : 0;
 
   if (node.width || node.height) {
     node.width = node?.width ?? 0;
@@ -29,7 +30,7 @@ export async function lean_left<T extends SVGGraphicsElement>(parent: D3Selectio
 
   const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
   const h = (node?.height ? node?.height : bbox.height) + labelPaddingY;
-  const w = node?.width ? node?.width : bbox.width;
+  const w = node?.width ? node?.width : bbox.width + labelPaddingX * 2;
   const points = [
     { x: 0, y: 0 },
     { x: w + (3 * h) / 6, y: 0 },

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

@@ -10,7 +10,8 @@ export async function lean_right<T extends SVGGraphicsElement>(parent: D3Selecti
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
   const nodePadding = node.padding ?? 0;
-  const labelPaddingY = node.look === 'neo' ? nodePadding * 1.5 : nodePadding;
+  const labelPaddingY = node.look === 'neo' ? 24 : nodePadding;
+  const labelPaddingX = node.look === 'neo' ? 9 : 0;
 
   if (node.width || node.height) {
     node.width = node?.width ?? 0;
@@ -30,7 +31,7 @@ export async function lean_right<T extends SVGGraphicsElement>(parent: D3Selecti
   const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
 
   const h = (node?.height ? node?.height : bbox.height) + labelPaddingY;
-  const w = node?.width ? node?.width : bbox.width;
+  const w = node?.width ? node?.width : bbox.width + labelPaddingX * 2;
 
   const points = [
     { x: (-3 * h) / 6, y: 0 },

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

@@ -56,8 +56,8 @@ export async function stadium<T extends SVGGraphicsElement>(parent: D3Selection<
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
   const nodePadding = node.padding ?? 0;
-  const labelPaddingX = node.look === 'neo' ? nodePadding * 3 : nodePadding;
-  const labelPaddingY = node.look === 'neo' ? nodePadding * 1.5 : nodePadding;
+  const labelPaddingX = node.look === 'neo' ? 20 : nodePadding;
+  const labelPaddingY = node.look === 'neo' ? 12 : nodePadding;
   // 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),

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

@@ -25,7 +25,8 @@ export async function trapezoid<T extends SVGGraphicsElement>(parent: D3Selectio
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
   const nodePadding = node.padding ?? 0;
-  const labelPaddingY = node.look === 'neo' ? nodePadding * 1.5 : nodePadding;
+  const labelPaddingY = node.look === 'neo' ? 24 : nodePadding;
+  const labelPaddingX = node.look === 'neo' ? 9 : 0;
 
   if (node.width || node.height) {
     node.width = node?.width ?? 0;
@@ -43,7 +44,7 @@ export async function trapezoid<T extends SVGGraphicsElement>(parent: D3Selectio
   }
   const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
   const h = (node?.height ? node?.height : bbox.height) + labelPaddingY;
-  const w = node?.width ? node?.width : bbox.width;
+  const w = node?.width ? node?.width : bbox.width + labelPaddingX * 2;
 
   const points = [
     { x: (-3 * h) / 6, y: 0 },