#3358 Adding support for space blocks and different shapes

packages/mermaid/src/dagre-wrapper/nodes.js

@@ -358,7 +358,6 @@ const rect = async (parent, node) => {
 };
 
 const composite = async (parent, node) => {
-  console.log('This got called');
   const { shapeSvg, bbox, halfPadding } = await labelHelper(
     parent,
     node,
@@ -1075,7 +1074,6 @@ export const clear = () => {
 };
 
 export const positionNode = (node) => {
-  console.log('Node id = ', node.id);
   const el = nodeElems[node.id];
   log.trace(
     'Transforming node',

packages/mermaid/src/diagrams/block/blockDB.ts

@@ -13,6 +13,7 @@ import {
   clear as commonClear,
 } from '../../commonDb.js';
 import { log } from '../../logger.js';
+import clone from 'lodash-es/clone.js';
 
 // Initialize the node database for simple lookups
 let blockDatabase: Record<string, Block> = {};
@@ -37,9 +38,18 @@ const populateBlockDatabase = (blockList: Block[], parent: Block): void => {
         populateBlockDatabase(block.children, block);
       }
 
+      if (block.type === 'space') {
+        for (let j = 0; j < block.width; j++) {
+          const newBlock = clone(block);
+          newBlock.id = newBlock.id + '-' + j;
+          blockDatabase[newBlock.id] = newBlock;
+          children.push(newBlock);
+        }
+      } else {
         children.push(block);
       }
     }
+  }
   parent.children = children;
 };
 
@@ -57,12 +67,38 @@ const clear = (): void => {
 
 type ITypeStr2Type = (typeStr: string) => BlockType;
 export function typeStr2Type(typeStr: string) {
+  log.debug('typeStr2Type', typeStr);
   // TODO: add all types
   switch (typeStr) {
     case '[]':
       return 'square';
     case '()':
+      log.debug('we have a round');
       return 'round';
+    case '(())':
+      return 'circle';
+    case '>]':
+      return 'rect_left_inv_arrow';
+    case '{}':
+      return 'question';
+    case '{{}}':
+      return 'hexagon';
+    case '([])':
+      return 'stadium';
+    case '[[]]':
+      return 'subroutine';
+    case '[()]':
+      return 'cylinder';
+    case '((()))':
+      return 'doublecircle';
+    case '[//]':
+      return 'lean_right';
+    case '[\\\\]':
+      return 'lean_left';
+    case '[/\\]':
+      return 'trapezoid';
+    case '[\\/]':
+      return 'inv_trapezoid';
     default:
       return 'square';
   }

packages/mermaid/src/diagrams/block/layout.ts

@@ -104,11 +104,8 @@ function calcBlockSizes(block: Block, db: BlockDB) {
       block.children.length
     );
 
-    const numChildren = block.children.length;
     block.size = {
-      // width: numChildren * (maxWidth + padding) + padding,
       width: xSize * (maxWidth + padding) + padding,
-      // height: maxHeight + 2 * padding,
       height: ySize * (maxHeight + padding) + padding,
       x: 0,
       y: 0,

packages/mermaid/src/diagrams/block/parser/block.jison

@@ -13,6 +13,7 @@
 %x acc_descr
 %x acc_descr_multiline
 %x string
+%x space
 %x md_string
 %x NODE
 
@@ -43,6 +44,9 @@ CRLF \u000D\u000A
 ["]                     this.pushState("string");
 <string>["]             this.popState();
 <string>[^"]*           return "STR";
+space[:]\d+            {  yytext = yytext.replace(/space\:/,'');yy.getLogger().info('SPACE NUM (LEX)', yytext); return 'SPACE_BLOCK'; }
+space                  { yytext = '1'; yy.getLogger().info('COLUMNS (LEX)', yytext); return 'SPACE_BLOCK'; }
+<string>[^"]*           return "STR";
 "style"               return 'STYLE';
 "default"             return 'DEFAULT';
 "linkStyle"           return 'LINKSTYLE';
@@ -167,6 +171,8 @@ link
 statement
   : nodeStatement
   | columnsStatement
+  | SPACE_BLOCK
+    { const num=parseInt($1); const spaceId = yy.generateId(); $$ = { id: spaceId, type:'space', label:'', width: num, children: [] }}
   | blockStatement
 //   SPACELIST node       { yy.getLogger().info('Node: ',$2.id);yy.addNode($1.length, $2.id, $2.descr, $2.type);  }
 // 	| SPACELIST ICON       { yy.getLogger().info('Icon: ',$2);yy.decorateNode({icon: $2}); }
@@ -182,7 +188,7 @@ statement
 
 nodeStatement
   : nodeStatement link node { yy.getLogger().info('Rule: nodeStatement (nodeStatement link node) '); $$ = {id: $1.id}; }
-  | node { yy.getLogger().info('Rule: nodeStatement (node) ', $1); $$ = {id: $1.id, label: $1.label, type: yy.typeStr2Type($1)}; }
+  | node { yy.getLogger().info('Rule: nodeStatement (node) ', $1); $$ = {id: $1.id, label: $1.label, type: yy.typeStr2Type($1.typeStr)}; }
   ;
 
 columnsStatement

packages/mermaid/src/diagrams/block/parser/block.spec.ts

@@ -163,7 +163,7 @@ describe('Block diagram', function () {
 
       expect(blocks[0].children.length).toBe(2);
       expect(blocks[0].id).not.toBe(undefined);
-      expect(blocks[0].label).toBe(blocks[0].id);
+      expect(blocks[0].label).toBe('');
       expect(blocks[0].type).toBe('composite');
 
       const aBlock = blocks[0].children[0];
@@ -196,12 +196,12 @@ describe('Block diagram', function () {
 
       expect(blocks[0].children.length).toBe(2);
       expect(blocks[0].id).not.toBe(undefined);
-      expect(blocks[0].label).toBe(blocks[0].id);
+      expect(blocks[0].label).toBe('');
       expect(blocks[0].type).toBe('composite');
 
       expect(secondComposite.children.length).toBe(1);
       expect(secondComposite.id).not.toBe(undefined);
-      expect(secondComposite.label).toBe(secondComposite.id);
+      expect(secondComposite.label).toBe('');
       expect(secondComposite.type).toBe('composite');
 
       expect(aBlock.id).not.toBe(aBlock);
@@ -284,7 +284,7 @@ describe('Block diagram', function () {
 
       block.parse(str);
     });
-    it.skip('empty blocks', async () => {
+    it('empty blocks', async () => {
       const str = `block-beta
         columns 3
         space
@@ -308,7 +308,7 @@ describe('Block diagram', function () {
         columns 2
         mc["Memcache"]:2::black
         `;
-
+      const apa = 'apan hopar i träden';
       block.parse(str);
     });
 

packages/mermaid/src/diagrams/block/renderHelpers.ts

@@ -22,15 +22,21 @@ function getNodeFromBlock(block: Block, db: BlockDB, positioned = false) {
   let radious = 0;
   let _shape = '';
   let layoutOptions = {};
+  let padding;
   // Set the shape based parameters
   switch (vertex.type) {
     case 'round':
       radious = 5;
       _shape = 'rect';
       break;
+    // case 'composite-subgraph':
+    //   radious = 0;
+    //   _shape = 'composite';
+    //   break;
     case 'composite':
-      radious = 4;
+      radious = 0;
       _shape = 'composite';
+      padding = 0;
       break;
     case 'square':
       _shape = 'rect';
@@ -119,7 +125,7 @@ function getNodeFromBlock(block: Block, db: BlockDB, positioned = false) {
     positioned,
     type: vertex.type,
     // props: vertex.props,
-    padding: getConfig()?.flowchart?.padding || 0,
+    padding: padding ?? (getConfig()?.flowchart?.padding || 0),
   };
   return node;
 }
@@ -139,16 +145,18 @@ async function calculateBlockSize(elem: any, block: any, db: any) {
   nodeEl.remove();
 }
 
-export async function insertBlockPositioned(elem: any, block: any, db: any) {
+export async function insertBlockPositioned(elem: any, block: Block, db: any) {
   const node = getNodeFromBlock(block, db, true);
   // if (node.type === 'composite') {
   //   return;
   // }
   // Add the element to the DOM to size it
   const obj = db.getBlock(node.id);
+  if (obj.type !== 'space') {
     const nodeEl = await insertNode(elem, node);
     positionNode(node);
   }
+}
 
 export async function performOperations(
   elem: ContainerElement,