marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-19 07:19:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

#3358 Sieblinmg height alignment

Browse Source
This commit is contained in:
Knut Sveidqvist
2024-01-08 15:48:59 +01:00
parent 7043892e87
commit 1d1875718d
4 changed files with 68 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
cypress/platform/knsv2.html
View File

@@ -64,33 +64,21 @@
<body> <body>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
block-beta block-beta
columns 3 columns 2
space Browser space db(("This is the text "))
space:3
A
B
C
space:3
space
db{{"This is the text in the box"}}
classDef green fill:#9f6,stroke:#333,stroke-width:2px;
style B fill:#f9F,stroke:#333,stroke-width:4px
class A green
Browser --> A
Browser --> B
Browser --> C
A --> db
B --> db
C--> db
block block
D A
E
end end
</pre>
<pre id="diagram" class="mermaid">
block-beta
A1:3
A2:1
A3
</pre> </pre>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
block-beta block-beta

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

@@ -173,7 +173,6 @@ const populateBlockDatabase = (_blockList: Block[], parent: Block): void => {
if (block.children) { if (block.children) {
populateBlockDatabase(block.children, block); populateBlockDatabase(block.children, block);
} }
if (block.type === 'space') { if (block.type === 'space') {
const w = block.width || 1; const w = block.width || 1;
for (let j = 0; j < w; j++) { for (let j = 0; j < w; j++) {
@@ -186,6 +185,14 @@ const populateBlockDatabase = (_blockList: Block[], parent: Block): void => {
if (newBlock) { if (newBlock) {
children.push(block); children.push(block);
} }
// const w = block.w || 1;
// for (let j = 1; j < w; j++) {
// const newBlock = clone(block);
// newBlock.type = 'space';
// newBlock.id = newBlock.id + '-' + j;
// blockDatabase[newBlock.id] = newBlock;
// children.push(newBlock);
// }
} }
} }
} }

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

@@ -16,7 +16,7 @@ export function calculateBlockPosition(columns: number, position: number): Block
// Ensure that position is a non-negative integer // Ensure that position is a non-negative integer
if (position < 0 || !Number.isInteger(position)) { if (position < 0 || !Number.isInteger(position)) {
throw new Error('Position must be a non-negative integer.'); throw new Error('Position must be a non-negative integer.' + position);
} }
if (columns < 0) { if (columns < 0) {
@@ -40,7 +40,6 @@ const getMaxChildSize = (block: Block) => {
// find max width of children // find max width of children
for (const child of block.children) { for (const child of block.children) {
const { width, height, x, y } = child.size || { width: 0, height: 0, x: 0, y: 0 }; const { width, height, x, y } = child.size || { width: 0, height: 0, x: 0, y: 0 };
log.debug('abc88', child.id, width, height, x, y);
if (width > maxWidth) { if (width > maxWidth) {
maxWidth = width; maxWidth = width;
} }
@@ -51,7 +50,12 @@ const getMaxChildSize = (block: Block) => {
return { width: maxWidth, height: maxHeight }; return { width: maxWidth, height: maxHeight };
}; };
function setBlockSizes(block: Block, db: BlockDB, sieblingWidth: number = 0) { function setBlockSizes(
block: Block,
db: BlockDB,
sieblingWidth: number = 0,
sieblingHeight: number = 0
) {
log.debug('calculateSize abc88 (start)', block.id, block?.size?.x, block?.size?.width); log.debug('calculateSize abc88 (start)', block.id, block?.size?.x, block?.size?.width);
const totalWidth = 0; const totalWidth = 0;
const totalHeight = 0; const totalHeight = 0;
@@ -70,27 +74,28 @@ function setBlockSizes(block: Block, db: BlockDB, sieblingWidth: number = 0) {
// set width of block to max width of children // set width of block to max width of children
for (const child of block.children) { for (const child of block.children) {
if (child.size) { if (child.size) {
child.size.width = maxWidth; child.size.width = maxWidth * child.w + padding * (child.w - 1);
child.size.height = maxHeight; child.size.height = maxHeight;
child.size.x = 0; child.size.x = 0;
child.size.y = 0; child.size.y = 0;
} }
} }
for (const child of block.children) { for (const child of block.children) {
setBlockSizes(child, db, maxWidth); setBlockSizes(child, db, maxWidth, maxHeight);
} }
const columns = block.columns || -1; const columns = block.columns || -1;
const numItems = block.children.length; const numItems = block.children.length;
// The width and height in number blocks // The width and height in number blocks
let xSize = block.children?.length; let xSize = block.children.length;
if (columns > 0 && columns < numItems) { if (columns > 0 && columns < numItems) {
xSize = columns; xSize = columns;
} }
const ySize = Math.ceil(numItems / xSize); const ySize = Math.ceil(numItems / xSize);
let width = xSize * (maxWidth + padding) + padding; let width = xSize * (maxWidth + padding) + padding;
let height = ySize * (maxHeight + padding) + padding;
// If maxWidth // If maxWidth
if (width < sieblingWidth) { if (width < sieblingWidth) {
console.log( console.log(
@@ -98,19 +103,24 @@ function setBlockSizes(block: Block, db: BlockDB, sieblingWidth: number = 0) {
block.id, block.id,
'sieblingWidth', 'sieblingWidth',
sieblingWidth, sieblingWidth,
'sieblingHeight',
sieblingHeight,
'width', 'width',
width width
); );
width = sieblingWidth; width = sieblingWidth;
height = sieblingHeight;
const childWidth = (sieblingWidth - xSize * padding - padding) / xSize; const childWidth = (sieblingWidth - xSize * padding - padding) / xSize;
const childHeight = (sieblingHeight - ySize * padding - padding) / ySize;
log.debug('Size indata abc88', block.id, 'childWidth', childWidth, 'maxWidth', maxWidth); log.debug('Size indata abc88', block.id, 'childWidth', childWidth, 'maxWidth', maxWidth);
log.debug('Size indata abc88', block.id, 'childHeight', childHeight, 'maxHeight', maxHeight);
log.debug('Size indata abc88 xSize', xSize, 'paddiong', padding); log.debug('Size indata abc88 xSize', xSize, 'paddiong', padding);
// // set width of block to max width of children // set width of block to max width of children
for (const child of block.children) { for (const child of block.children) {
if (child.size) { if (child.size) {
child.size.width = childWidth; child.size.width = childWidth;
child.size.height = maxHeight; child.size.height = childHeight;
child.size.x = 0; child.size.x = 0;
child.size.y = 0; child.size.y = 0;
} }
@@ -131,26 +141,35 @@ function setBlockSizes(block: Block, db: BlockDB, sieblingWidth: number = 0) {
block.size = { block.size = {
width, width,
height: ySize * (maxHeight + padding) + padding, height,
x: 0, x: 0,
y: 0, y: 0,
}; };
} }
log.debug('calculateSize abc88 (done)', block.id, block?.size?.x, block?.size?.width); log.debug(
'setBlockSizes abc88 (done)',
block.id,
block?.size?.x,
block?.size?.width,
block?.size?.y,
block?.size?.height
);
} }
function layoutBlocks(block: Block, db: BlockDB) { function layoutBlocks(block: Block, db: BlockDB) {
log.debug( log.debug(
'layout blocks (=>layoutBlocks)', 'abc88 layout blocks (=>layoutBlocks)',
block.id, block.id,
'x:', 'x:',
block?.size?.x, block?.size?.x,
'y:',
block?.size?.y,
'width:', 'width:',
block?.size?.width block?.size?.width
); );
const columns = block.columns || -1; const columns = block.columns || -1;
log.debug('layoutBlocks columns', block.id, '=>', columns); log.debug('layoutBlocks columns abc88', block.id, '=>', columns);
if ( if (
block.children && // find max width of children block.children && // find max width of children
block.children.length > 0 block.children.length > 0
@@ -158,26 +177,12 @@ function layoutBlocks(block: Block, db: BlockDB) {
const width = block?.children[0]?.size?.width || 0; const width = block?.children[0]?.size?.width || 0;
const widthOfChildren = block.children.length * width + (block.children.length - 1) * padding; const widthOfChildren = block.children.length * width + (block.children.length - 1) * padding;
log.debug('widthOfChildren', widthOfChildren, 'posX'); log.debug('widthOfChildren 88', widthOfChildren, 'posX');
// let first = true; // let first = true;
let columnPos = -1; let columnPos = 0;
for (const child of block.children) { for (const child of block.children) {
columnPos++; // columnPos++;
// log.debug(
// 'layout blocks (child)',
// child.id,
// 'x:',
// child?.size?.x,
// 'width:',
// child?.size?.width,
// 'posX:',
// posX,
// block?.size?.x,
// widthOfChildren / 2,
// widthOfChildren / 2
// );
if (!child.size) { if (!child.size) {
continue; continue;
@@ -185,7 +190,12 @@ function layoutBlocks(block: Block, db: BlockDB) {
const { width, height } = child.size; const { width, height } = child.size;
const { px, py } = calculateBlockPosition(columns, columnPos); const { px, py } = calculateBlockPosition(columns, columnPos);
log.debug( log.debug(
'layout blocks (child) px, py (', 'abc88 layout blocks (child) id:',
child.id,
' (px, py)',
px,
py,
' (',
block?.size?.x, block?.size?.x,
',', ',',
block?.size?.y, block?.size?.y,
@@ -205,7 +215,7 @@ function layoutBlocks(block: Block, db: BlockDB) {
block.size.y - block.size.height / 2 + py * (height + padding) + height / 2 + padding; block.size.y - block.size.height / 2 + py * (height + padding) + height / 2 + padding;
log.debug( log.debug(
'layout blocks (calc) px, py', 'abc88 layout blocks (calc) px, py',
'id:', 'id:',
child.id, child.id,
'=>', '=>',
@@ -220,6 +230,8 @@ function layoutBlocks(block: Block, db: BlockDB) {
if (child.children) { if (child.children) {
layoutBlocks(child, db); layoutBlocks(child, db);
} }
columnPos += parseInt(child?.w || 1);
console.log('abc88', child, columnPos);
} }
} }
log.debug( log.debug(
@@ -227,6 +239,8 @@ function layoutBlocks(block: Block, db: BlockDB) {
block.id, block.id,
'x:', 'x:',
block?.size?.x, block?.size?.x,
'y:',
block?.size?.y,
'width:', 'width:',
block?.size?.width block?.size?.width
); );
@@ -267,7 +281,7 @@ export function layout(db: BlockDB) {
return; return;
} }
setBlockSizes(root, db, 0); setBlockSizes(root, db, 0, 0);
layoutBlocks(root, db); layoutBlocks(root, db);
// Position blocks relative to parents // Position blocks relative to parents
// positionBlock(root, root, db); // positionBlock(root, root, db);

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

@@ -128,7 +128,7 @@ accDescr\s*"{"\s* { this.pushState("acc_descr_mul
"<[" { this.pushState('BLOCK_ARROW');yy.getLogger().debug('LEX ARR START');return 'BLOCK_ARROW_START'; } "<[" { this.pushState('BLOCK_ARROW');yy.getLogger().debug('LEX ARR START');return 'BLOCK_ARROW_START'; }
[^\(\[\n\-\)\{\}\s\<\>]+ { yy.getLogger().info('Lex: NODE_ID', yytext);return 'NODE_ID'; } [^\(\[\n\-\)\{\}\s\<\>:]+ { yy.getLogger().info('Lex: NODE_ID', yytext);return 'NODE_ID'; }
<<EOF>> { yy.getLogger().info('Lex: EOF', yytext);return 'EOF'; } <<EOF>> { yy.getLogger().info('Lex: EOF', yytext);return 'EOF'; }
// Handling of strings in node // Handling of strings in node
@@ -163,6 +163,7 @@ accDescr\s*"{"\s* { this.pushState("acc_descr_mul
<LLABEL>\s*[xo<]?\-\-+[-xo>]\s* { this.popState(); yy.getLogger().info('Lex: LINK', '#'+yytext+'#'); return 'LINK'; } <LLABEL>\s*[xo<]?\-\-+[-xo>]\s* { this.popState(); yy.getLogger().info('Lex: LINK', '#'+yytext+'#'); return 'LINK'; }
<LLABEL>\s*[xo<]?\=\=+[=xo>]\s* { this.popState(); yy.getLogger().info('Lex: LINK', yytext); return 'LINK'; } <LLABEL>\s*[xo<]?\=\=+[=xo>]\s* { this.popState(); yy.getLogger().info('Lex: LINK', yytext); return 'LINK'; }
<LLABEL>\s*[xo<]?\-?\.+\-[xo>]?\s* { this.popState(); yy.getLogger().info('Lex: LINK', yytext); return 'LINK'; } <LLABEL>\s*[xo<]?\-?\.+\-[xo>]?\s* { this.popState(); yy.getLogger().info('Lex: LINK', yytext); return 'LINK'; }
':'\d+ { yy.getLogger().info('Lex: COLON', yytext); yytext=yytext.slice(1);return 'SIZE'; }
/lex /lex
@@ -233,7 +234,8 @@ nodeStatement
{id: $3.id, label: $3.label, type: yy.typeStr2Type($3.typeStr), directions: $3.directions} {id: $3.id, label: $3.label, type: yy.typeStr2Type($3.typeStr), directions: $3.directions}
]; ];
} }
| node { yy.getLogger().info('Rule: nodeStatement (node) ', $1); $$ = {id: $1.id, label: $1.label, type: yy.typeStr2Type($1.typeStr), directions: $1.directions}; } | node SIZE { yy.getLogger().info('Rule: nodeStatement (abc88 node size) ', $1, $2); $$ = {id: $1.id, label: $1.label, type: yy.typeStr2Type($1.typeStr), directions: $1.directions, w: $2}; }
| node { yy.getLogger().info('Rule: nodeStatement (node) ', $1); $$ = {id: $1.id, label: $1.label, type: yy.typeStr2Type($1.typeStr), directions: $1.directions, w:1}; }
; ;