Merge branch 'alanaV11' of github.com:Mermaid-Chart/alana-mermaid into alanaV11

cypress/platform/ash.html

@@ -78,13 +78,20 @@
     <pre id="diagram" class="mermaid">
 flowchart
    node
+   rounded(rounded)
    id1([This is the text in the box])
    id2((circle))
    id3(((double circle)))
    id4>Asymetrical]
    id5{This is the text in the box}
    id6{{This is the text in the box}}
-            
+   id7[/This is the text in the box/]
+   id8[\This is the text in the box\]
+   A[/Christmas\]
+   B[\Christmas/]
+   sub[[subroutine]]
+   db[(Database)]
+    
 
       </pre
     >
@@ -96,12 +103,20 @@ config:
 ---
 flowchart
    node
+   rounded(rounded)
    id1([This is the text in the box])
    id2((circle))
    id3(((double circle)))
    id4>Asymetrical]
    id5{This is the text in the box}
    id6{{This is the text in the box}}
+   id7[/This is the text in the box/]
+   id8[\This is the text in the box\]
+   B[/Christmas\]
+   sub[[subroutine]]
+   db[(Database)]
+    
+
             
 
       </pre

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

@@ -51,10 +51,12 @@ export const createInnerCylinderPathD = (
 export const cylinder = async (parent: SVGAElement, node: Node) => {
   const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
 
-  const w = bbox.width + node.padding;
+  const labelPaddingX = node.look === 'neo' ? node.padding * 2 : node.padding;
+  const labelPaddingY = node.look === 'neo' ? node.padding * 1 : node.padding;
+  const w = bbox.width + labelPaddingY;
   const rx = w / 2;
   const ry = rx / (2.5 + w / 50);
-  const h = bbox.height + ry + node.padding;
+  const h = bbox.height + ry + labelPaddingX;
 
   let cylinder: d3.Selection<SVGPathElement | SVGGElement, unknown, null, undefined>;
   const { cssStyles } = node;

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

@@ -28,10 +28,11 @@ export const hexagon = async (parent: SVGAElement, node: Node): Promise<SVGAElem
   const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
 
   const f = 4;
-  const labelPaddingX = node.look === 'neo' ? node.padding * 2 : node.padding;
+  const labelPaddingX = node.look === 'neo' ? node.padding * 3 : node.padding;
+  const labelPaddingY = node.look === 'neo' ? node.padding * 1.5 : node.padding;
   const h = bbox.height + labelPaddingX;
   const m = h / f;
-  const w = bbox.width + 2 * m + node.padding;
+  const w = bbox.width + 2 * m + labelPaddingY;
   const points = [
     { x: m, y: 0 },
     { x: w - m, y: 0 },

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

@@ -22,9 +22,10 @@ export const createInvertedTrapezoidPathD = (
 
 export const inv_trapezoid = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
   const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
-
+  const labelPaddingX = node.look === 'neo' ? node.padding * 3 : node.padding;
-  const w = bbox.width + node.padding;
+  const labelPaddingY = node.look === 'neo' ? node.padding * 1.5 : node.padding;
-  const h = bbox.height + node.padding;
+  const w = bbox.width + labelPaddingY;
+  const h = bbox.height + labelPaddingX;
   const points = [
     { x: h / 6, y: 0 },
     { x: w - h / 6, y: 0 },

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

@@ -22,9 +22,10 @@ export const createLeanLeftPathD = (
 
 export const lean_left = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
   const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
-
+  const labelPaddingX = node.look === 'neo' ? node.padding * 3 : node.padding;
-  const w = bbox.width + node.padding;
+  const labelPaddingY = node.look === 'neo' ? node.padding * 1.5 : node.padding;
-  const h = bbox.height + node.padding;
+  const w = bbox.width + labelPaddingY;
+  const h = bbox.height + labelPaddingX;
   const points = [
     { x: (2 * h) / 6, y: 0 },
     { x: w + h / 6, y: 0 },

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

@@ -23,8 +23,10 @@ export const createLeanRightPathD = (
 export const lean_right = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
   const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
 
-  const w = bbox.width + node.padding;
+  const labelPaddingX = node.look === 'neo' ? node.padding * 3 : node.padding;
-  const h = bbox.height + node.padding;
+  const labelPaddingY = node.look === 'neo' ? node.padding * 1.5 : node.padding;
+  const w = bbox.width + labelPaddingY;
+  const h = bbox.height + labelPaddingX;
   const points = [
     { x: (-2 * h) / 6, y: 0 },
     { x: w - h / 6, y: 0 },

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

@@ -21,9 +21,10 @@ export const rect_left_inv_arrow = async (
   node: Node
 ): Promise<SVGAElement> => {
   const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
-  const labelPadding = node.look === 'neo' ? node.padding * 2 : node.padding;
+  const labelPaddingX = node.look === 'neo' ? node.padding * 3 : node.padding;
-  const w = bbox.width + labelPadding;
+  const labelPaddingY = node.look === 'neo' ? node.padding * 1.5 : node.padding;
-  const h = bbox.height + labelPadding;
+  const w = bbox.width + labelPaddingY;
+  const h = bbox.height + labelPaddingX;
   const points = [
     { x: -h / 2, y: 0 },
     { x: w, y: 0 },

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

@@ -53,12 +53,8 @@ export const createStadiumPathD = (
 export const stadium = async (parent: SVGAElement, node: Node) => {
   const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
 
-  let labelPaddingX = node.padding;
+  const labelPaddingX = node.look === 'neo' ? node.padding * 3 : node.padding;
-  const labelPaddingY = node.padding;
+  const labelPaddingY = node.look === 'neo' ? node.padding * 1.5 : node.padding;
-
-  if (node.look === 'neo') {
-    labelPaddingX = node.padding ? node.padding * 2 : 0;
-  }
 
   const h = bbox.height + labelPaddingX;
   const w = bbox.width + h / 4 + labelPaddingY;

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

@@ -34,10 +34,12 @@ export const createSubroutinePathD = (
 export const subroutine = async (parent: SVGAElement, node: Node) => {
   const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
   const halfPadding = (node?.padding || 0) / 2;
-  const w = bbox.width + node.padding;
+  const labelPaddingX = node.look === 'neo' ? node.padding * 3 : node.padding;
-  const h = bbox.height + node.padding;
+  const labelPaddingY = node.look === 'neo' ? node.padding * 1.5 : node.padding;
-  const x = -bbox.width / 2 - halfPadding;
+  const w = bbox.width + labelPaddingY;
-  const y = -bbox.height / 2 - halfPadding;
+  const h = bbox.height + labelPaddingX;
+  const x = -bbox.width / 2 - labelPaddingX / 2;
+  const y = -bbox.height / 2 - labelPaddingY / 2;
   let rect;
   const { cssStyles } = node;
   const points = [

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

@@ -22,9 +22,10 @@ export const createTrapezoidPathD = (
 
 export const trapezoid = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
   const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
-
+  const labelPaddingX = node.look === 'neo' ? node.padding * 3 : node.padding;
-  const w = bbox.width + node.padding;
+  const labelPaddingY = node.look === 'neo' ? node.padding * 1.5 : node.padding;
-  const h = bbox.height + node.padding;
+  const w = bbox.width + labelPaddingY;
+  const h = bbox.height + labelPaddingX;
   const points = [
     { x: (-2 * h) / 6, y: 0 },
     { x: w + (2 * h) / 6, y: 0 },

packages/mermaid/src/styles.ts

@@ -80,7 +80,8 @@ const getStyles = (
     filter: ${options.dropShadow};
   }
 
-  [data-look="neo"].node rect,  [data-look="neo"].node circle, [data-look="neo"].node polygon {
+
+  [data-look="neo"].node rect,  [data-look="neo"].node circle, [data-look="neo"].node polygon , [data-look="neo"].node path {
     stroke: ${options.useGradient ? 'url(' + svgId + '-gradient)' : options.nodeBorder};
     filter: ${options.dropShadow};
   }