marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-31 14:16:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

#3358 Adding support for space blocks and different shapes

Browse Source
This commit is contained in:
Knut Sveidqvist
2023-10-20 12:30:25 +02:00
parent 5619f8771b
commit f3f25c7874
6 changed files with 63 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/mermaid/src/dagre-wrapper/nodes.js
View File

@@ -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',

38
packages/mermaid/src/diagrams/block/blockDB.ts
View File

@@ -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,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';
}

3
packages/mermaid/src/diagrams/block/layout.ts
View File

@@ -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,

10
packages/mermaid/src/diagrams/block/parser/block.jison
View File

@@ -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';
@@ -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

10
packages/mermaid/src/diagrams/block/parser/block.spec.ts
View File

@@ -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);
});

18
packages/mermaid/src/diagrams/block/renderHelpers.ts
View File

@@ -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(