diff --git a/packages/mermaid/src/dagre-wrapper/nodes.js b/packages/mermaid/src/dagre-wrapper/nodes.js index b95265f31..78bcfea99 100644 --- a/packages/mermaid/src/dagre-wrapper/nodes.js +++ b/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', diff --git a/packages/mermaid/src/diagrams/block/blockDB.ts b/packages/mermaid/src/diagrams/block/blockDB.ts index f9578a4e7..6b787009d 100644 --- a/packages/mermaid/src/diagrams/block/blockDB.ts +++ b/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 = {}; @@ -37,7 +38,16 @@ const populateBlockDatabase = (blockList: Block[], parent: Block): void => { populateBlockDatabase(block.children, block); } - children.push(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'; } diff --git a/packages/mermaid/src/diagrams/block/layout.ts b/packages/mermaid/src/diagrams/block/layout.ts index 741445806..f9a6cd3f9 100644 --- a/packages/mermaid/src/diagrams/block/layout.ts +++ b/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, diff --git a/packages/mermaid/src/diagrams/block/parser/block.jison b/packages/mermaid/src/diagrams/block/parser/block.jison index 32b7c28e2..b2975b610 100644 --- a/packages/mermaid/src/diagrams/block/parser/block.jison +++ b/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"); ["] this.popState(); [^"]* 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'; } +[^"]* return "STR"; "style" return 'STYLE'; "default" return 'DEFAULT'; "linkStyle" return 'LINKSTYLE'; @@ -64,7 +68,7 @@ accDescr\s*"{"\s* { this.pushState("acc_descr_mul .*direction\s+LR[^\n]* return 'direction_lr'; // Start of nodes with shapes and description -"-)" { yy.getLogger().info('Lex: -)'); this.pushState('NODE');return 'NODE_D START'; } +"-)" { yy.getLogger().info('Lex: -)'); this.pushState('NODE');return 'NODE_DSTART'; } "(-" { yy.getLogger().info('Lex: (-'); this.pushState('NODE');return 'NODE_DSTART'; } "))" { yy.getLogger().info('Lex: ))'); this.pushState('NODE');return 'NODE_DSTART'; } ")" { yy.getLogger().info('Lex: )'); this.pushState('NODE');return 'NODE_DSTART'; } @@ -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 diff --git a/packages/mermaid/src/diagrams/block/parser/block.spec.ts b/packages/mermaid/src/diagrams/block/parser/block.spec.ts index adb814be2..bf32afc5e 100644 --- a/packages/mermaid/src/diagrams/block/parser/block.spec.ts +++ b/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); }); diff --git a/packages/mermaid/src/diagrams/block/renderHelpers.ts b/packages/mermaid/src/diagrams/block/renderHelpers.ts index 7c1f7c6f9..78cce974c 100644 --- a/packages/mermaid/src/diagrams/block/renderHelpers.ts +++ b/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,15 +145,17 @@ 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); - const nodeEl = await insertNode(elem, node); - positionNode(node); + if (obj.type !== 'space') { + const nodeEl = await insertNode(elem, node); + positionNode(node); + } } export async function performOperations(