#3358 Another set of review changes

mermaid-js · Jan 30, 2024 · b99b1bf · b99b1bf
1 parent 907006f
commit b99b1bf
Show file tree

Hide file tree

Showing 9 changed files with 38 additions and 674 deletions.
diff --git a/cypress/integration/rendering/block.spec.ts b/cypress/integration/rendering/block.spec.ts
@@ -304,7 +304,7 @@ describe('Block diagram', () => {
   it('BL22: sizing - it should be possible to make a block wider', () => {
     imgSnapshotTest(
       `block-beta
-      A("rounded):2
+      A("rounded"):2
       B:2
       C
       `,

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
@@ -65,7 +65,7 @@
   <body>
     <pre id="diagram" class="mermaid">
       block-beta
-  blockArrowId<["`Label`"]>(right)
+  blockArrowId<["Label"]>(right)
   blockArrowId2<["Label"]>(left)
   blockArrowId3<["Label"]>(up)
   blockArrowId4<["Label"]>(down)

diff --git a/packages/mermaid/src/diagrams/block/parser/block.jison b/packages/mermaid/src/diagrams/block/parser/block.jison
@@ -79,7 +79,7 @@ accDescr\s*":"\s*                                               { this.pushState
 accDescr\s*"{"\s*                                { this.pushState("acc_descr_multiline");}
 <acc_descr_multiline>[\}]                       { this.popState(); }
 <acc_descr_multiline>[^\}]*                     return "acc_descr_multiline_value";
-
+"end"\b\s*            return 'end';
 
 // Node end of shape
 <NODE>"((("             { this.popState();yy.getLogger().debug('Lex: (('); return "NODE_DEND"; }
@@ -229,8 +229,8 @@ nodeStatement
       {id: $3.id, label: $3.label, type: yy.typeStr2Type($3.typeStr), directions: $3.directions}
       ];
     }
-  | node SIZE { yy.getLogger().debug('Rule: nodeStatement (abc88 node size) ', $1, $2); $$ = {id: $1.id, label: $1.label, type: yy.typeStr2Type($1.typeStr), directions: $1.directions, w: parseInt($2,10)}; }
-  | node { yy.getLogger().debug('Rule: nodeStatement (node) ', $1); $$ = {id: $1.id, label: $1.label, type: yy.typeStr2Type($1.typeStr), directions: $1.directions, w:1}; }
+  | node SIZE { yy.getLogger().debug('Rule: nodeStatement (abc88 node size) ', $1, $2); $$ = {id: $1.id, label: $1.label, type: yy.typeStr2Type($1.typeStr), directions: $1.directions, widthInColumns: parseInt($2,10)}; }
+  | node { yy.getLogger().debug('Rule: nodeStatement (node) ', $1); $$ = {id: $1.id, label: $1.label, type: yy.typeStr2Type($1.typeStr), directions: $1.directions, widthInColumns:1}; }
   ;
 
 

diff --git a/packages/mermaid/src/diagrams/block/renderHelpers.ts b/packages/mermaid/src/diagrams/block/renderHelpers.ts
@@ -21,85 +21,80 @@ function getNodeFromBlock(block: Block, db: BlockDB, positioned = false) {
   classStr = classStr + ' flowchart-label';
 
   // We create a SVG label, either by delegating to addHtmlLabel or manually
-  let radious = 0;
-  let _shape = '';
+  let radius = 0;
+  let shape = '';
   let layoutOptions = {};
   let padding;
   // Set the shape based parameters
   switch (vertex.type) {
     case 'round':
-      radious = 5;
-      _shape = 'rect';
+      radius = 5;
+      shape = 'rect';
       break;
-    // case 'composite-subgraph':
-    //   radious = 0;
-    //   _shape = 'composite';
-    //   break;
     case 'composite':
-      radious = 0;
-      _shape = 'composite';
+      radius = 0;
+      shape = 'composite';
       padding = 0;
       break;
     case 'square':
-      _shape = 'rect';
+      shape = 'rect';
       break;
     case 'diamond':
-      _shape = 'question';
+      shape = 'question';
       layoutOptions = {
         portConstraints: 'FIXED_SIDE',
       };
       break;
     case 'hexagon':
-      _shape = 'hexagon';
+      shape = 'hexagon';
       break;
     case 'block_arrow':
-      _shape = 'block_arrow';
+      shape = 'block_arrow';
       break;
     case 'odd':
-      _shape = 'rect_left_inv_arrow';
+      shape = 'rect_left_inv_arrow';
       break;
     case 'lean_right':
-      _shape = 'lean_right';
+      shape = 'lean_right';
       break;
     case 'lean_left':
-      _shape = 'lean_left';
+      shape = 'lean_left';
       break;
     case 'trapezoid':
-      _shape = 'trapezoid';
+      shape = 'trapezoid';
       break;
     case 'inv_trapezoid':
-      _shape = 'inv_trapezoid';
+      shape = 'inv_trapezoid';
       break;
     case 'rect_left_inv_arrow':
-      _shape = 'rect_left_inv_arrow';
+      shape = 'rect_left_inv_arrow';
       break;
     case 'circle':
-      _shape = 'circle';
+      shape = 'circle';
       break;
     case 'ellipse':
-      _shape = 'ellipse';
+      shape = 'ellipse';
       break;
     case 'stadium':
-      _shape = 'stadium';
+      shape = 'stadium';
       break;
     case 'subroutine':
-      _shape = 'subroutine';
+      shape = 'subroutine';
       break;
     case 'cylinder':
-      _shape = 'cylinder';
+      shape = 'cylinder';
       break;
     case 'group':
-      _shape = 'rect';
+      shape = 'rect';
       break;
     case 'doublecircle':
-      _shape = 'doublecircle';
+      shape = 'doublecircle';
       break;
     default:
-      _shape = 'rect';
+      shape = 'rect';
   }
 
   const styles = getStylesFromArray(vertex?.styles || []);
-  // const styles = getStylesFromArray([]);
 
   // Use vertex id as text in the box if no text is provided by the graph definition
   const vertexText = vertex.label;
@@ -108,13 +103,12 @@ function getNodeFromBlock(block: Block, db: BlockDB, positioned = false) {
   // Add the node
   const node = {
     labelStyle: styles.labelStyle,
-    shape: _shape,
+    shape: shape,
     labelText: vertexText,
-    // labelType: vertex.labelType,
-    rx: radious,
-    ry: radious,
+    rx: radius,
+    ry: radius,
     class: classStr,
-    style: styles.style, // + 'fill:#9f9;stroke:#333;stroke-width:4px;',
+    style: styles.style,
     id: vertex.id,
     directions: vertex.directions,
     width: bounds.width,
@@ -124,8 +118,7 @@ function getNodeFromBlock(block: Block, db: BlockDB, positioned = false) {
     positioned,
     intersect: undefined,
     type: vertex.type,
-    // props: vertex.props,
-    padding: padding ?? (getConfig()?.flowchart?.padding || 0),
+    padding: padding ?? (getConfig()?.block?.padding || 0),
   };
   return node;
 }

diff --git a/packages/mermaid/src/diagrams/block/styles.ts b/packages/mermaid/src/diagrams/block/styles.ts
@@ -1,8 +1,7 @@
-// import khroma from 'khroma';
 import * as khroma from 'khroma';
 
 /** Returns the styles given options */
-export interface FlowChartStyleOptions {
+export interface BlockChartStyleOptions {
   arrowheadColor: string;
   border2: string;
   clusterBkg: string;
@@ -30,7 +29,7 @@ const fade = (color: string, opacity: number) => {
   return khroma.rgba(r, g, b, opacity);
 };
 
-const getStyles = (options: FlowChartStyleOptions) =>
+const getStyles = (options: BlockChartStyleOptions) =>
   `.label {
     font-family: ${options.fontFamily};
     color: ${options.nodeTextColor || options.textColor};