diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 4fed7a962..eaa5382ac 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -64,33 +64,21 @@
block-beta
-columns 3
- space Browser space
- space:3
-
+columns 2
+ db(("This is the text "))
+ block
A
- B
- C
+ end
- 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-beta
- block
- D
- E
- end
+ A1:3
+ A2:1
+ A3
block-beta
diff --git a/packages/mermaid/src/diagrams/block/blockDB.ts b/packages/mermaid/src/diagrams/block/blockDB.ts
index e575f0680..787084697 100644
--- a/packages/mermaid/src/diagrams/block/blockDB.ts
+++ b/packages/mermaid/src/diagrams/block/blockDB.ts
@@ -173,7 +173,6 @@ const populateBlockDatabase = (_blockList: Block[], parent: Block): void => {
if (block.children) {
populateBlockDatabase(block.children, block);
}
-
if (block.type === 'space') {
const w = block.width || 1;
for (let j = 0; j < w; j++) {
@@ -186,6 +185,14 @@ const populateBlockDatabase = (_blockList: Block[], parent: Block): void => {
if (newBlock) {
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);
+ // }
}
}
}
diff --git a/packages/mermaid/src/diagrams/block/layout.ts b/packages/mermaid/src/diagrams/block/layout.ts
index 1b110fc64..cf62bd164 100644
--- a/packages/mermaid/src/diagrams/block/layout.ts
+++ b/packages/mermaid/src/diagrams/block/layout.ts
@@ -16,7 +16,7 @@ export function calculateBlockPosition(columns: number, position: number): Block
// Ensure that position is a non-negative integer
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) {
@@ -40,7 +40,6 @@ const getMaxChildSize = (block: Block) => {
// find max width of children
for (const child of block.children) {
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) {
maxWidth = width;
}
@@ -51,7 +50,12 @@ const getMaxChildSize = (block: Block) => {
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);
const totalWidth = 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
for (const child of block.children) {
if (child.size) {
- child.size.width = maxWidth;
+ child.size.width = maxWidth * child.w + padding * (child.w - 1);
child.size.height = maxHeight;
child.size.x = 0;
child.size.y = 0;
}
}
for (const child of block.children) {
- setBlockSizes(child, db, maxWidth);
+ setBlockSizes(child, db, maxWidth, maxHeight);
}
const columns = block.columns || -1;
const numItems = block.children.length;
// The width and height in number blocks
- let xSize = block.children?.length;
+ let xSize = block.children.length;
if (columns > 0 && columns < numItems) {
xSize = columns;
}
const ySize = Math.ceil(numItems / xSize);
let width = xSize * (maxWidth + padding) + padding;
+ let height = ySize * (maxHeight + padding) + padding;
// If maxWidth
if (width < sieblingWidth) {
console.log(
@@ -98,19 +103,24 @@ function setBlockSizes(block: Block, db: BlockDB, sieblingWidth: number = 0) {
block.id,
'sieblingWidth',
sieblingWidth,
+ 'sieblingHeight',
+ sieblingHeight,
'width',
width
);
width = sieblingWidth;
+ height = sieblingHeight;
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, 'childHeight', childHeight, 'maxHeight', maxHeight);
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) {
if (child.size) {
child.size.width = childWidth;
- child.size.height = maxHeight;
+ child.size.height = childHeight;
child.size.x = 0;
child.size.y = 0;
}
@@ -131,26 +141,35 @@ function setBlockSizes(block: Block, db: BlockDB, sieblingWidth: number = 0) {
block.size = {
width,
- height: ySize * (maxHeight + padding) + padding,
+ height,
x: 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) {
log.debug(
- 'layout blocks (=>layoutBlocks)',
+ 'abc88 layout blocks (=>layoutBlocks)',
block.id,
'x:',
block?.size?.x,
+ 'y:',
+ block?.size?.y,
'width:',
block?.size?.width
);
const columns = block.columns || -1;
- log.debug('layoutBlocks columns', block.id, '=>', columns);
+ log.debug('layoutBlocks columns abc88', block.id, '=>', columns);
if (
block.children && // find max width of children
block.children.length > 0
@@ -158,26 +177,12 @@ function layoutBlocks(block: Block, db: BlockDB) {
const width = block?.children[0]?.size?.width || 0;
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 columnPos = -1;
+ let columnPos = 0;
for (const child of block.children) {
- 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
- // );
+ // columnPos++;
if (!child.size) {
continue;
@@ -185,7 +190,12 @@ function layoutBlocks(block: Block, db: BlockDB) {
const { width, height } = child.size;
const { px, py } = calculateBlockPosition(columns, columnPos);
log.debug(
- 'layout blocks (child) px, py (',
+ 'abc88 layout blocks (child) id:',
+ child.id,
+ ' (px, py)',
+ px,
+ py,
+ ' (',
block?.size?.x,
',',
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;
log.debug(
- 'layout blocks (calc) px, py',
+ 'abc88 layout blocks (calc) px, py',
'id:',
child.id,
'=>',
@@ -220,6 +230,8 @@ function layoutBlocks(block: Block, db: BlockDB) {
if (child.children) {
layoutBlocks(child, db);
}
+ columnPos += parseInt(child?.w || 1);
+ console.log('abc88', child, columnPos);
}
}
log.debug(
@@ -227,6 +239,8 @@ function layoutBlocks(block: Block, db: BlockDB) {
block.id,
'x:',
block?.size?.x,
+ 'y:',
+ block?.size?.y,
'width:',
block?.size?.width
);
@@ -267,7 +281,7 @@ export function layout(db: BlockDB) {
return;
}
- setBlockSizes(root, db, 0);
+ setBlockSizes(root, db, 0, 0);
layoutBlocks(root, db);
// Position blocks relative to parents
// positionBlock(root, root, db);
diff --git a/packages/mermaid/src/diagrams/block/parser/block.jison b/packages/mermaid/src/diagrams/block/parser/block.jison
index 3f91a7d96..46e72e0ea 100644
--- a/packages/mermaid/src/diagrams/block/parser/block.jison
+++ b/packages/mermaid/src/diagrams/block/parser/block.jison
@@ -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'; }
-[^\(\[\n\-\)\{\}\s\<\>]+ { yy.getLogger().info('Lex: NODE_ID', yytext);return 'NODE_ID'; }
+[^\(\[\n\-\)\{\}\s\<\>:]+ { yy.getLogger().info('Lex: NODE_ID', yytext);return 'NODE_ID'; }
<> { yy.getLogger().info('Lex: EOF', yytext);return 'EOF'; }
// Handling of strings in node
@@ -163,6 +163,7 @@ accDescr\s*"{"\s* { this.pushState("acc_descr_mul
\s*[xo<]?\-\-+[-xo>]\s* { this.popState(); yy.getLogger().info('Lex: LINK', '#'+yytext+'#'); return 'LINK'; }
\s*[xo<]?\=\=+[=xo>]\s* { this.popState(); yy.getLogger().info('Lex: LINK', yytext); return 'LINK'; }
\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
@@ -233,7 +234,8 @@ nodeStatement
{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}; }
;