diff --git a/.changeset/lovely-queens-own.md b/.changeset/lovely-queens-own.md new file mode 100644 index 000000000..edc8dda2d --- /dev/null +++ b/.changeset/lovely-queens-own.md @@ -0,0 +1,8 @@ +--- +'mermaid': patch +--- + +fix(block): overflowing blocks no longer affect later lines + +This may change the layout of block diagrams that have overflowing lines +(i.e. block diagrams that use up more columns that the `columns` specifier). diff --git a/cypress/integration/rendering/block.spec.js b/cypress/integration/rendering/block.spec.js index 589a30fde..f01d59375 100644 --- a/cypress/integration/rendering/block.spec.js +++ b/cypress/integration/rendering/block.spec.js @@ -384,4 +384,17 @@ describe('Block diagram', () => { {} ); }); + + it('BL30: block should overflow if too wide for columns', () => { + imgSnapshotTest( + `block-beta + columns 2 + fit:2 + overflow:3 + short:1 + also_overflow:2 +`, + {} + ); + }); }); diff --git a/packages/mermaid/src/diagrams/block/layout.ts b/packages/mermaid/src/diagrams/block/layout.ts index a00e935ac..ea0de6312 100644 --- a/packages/mermaid/src/diagrams/block/layout.ts +++ b/packages/mermaid/src/diagrams/block/layout.ts @@ -270,7 +270,12 @@ function layoutBlocks(block: Block, db: BlockDB) { if (child.children) { layoutBlocks(child, db); } - columnPos += child?.widthInColumns ?? 1; + let columnsFilled = child?.widthInColumns ?? 1; + if (columns > 0) { + // Make sure overflowing lines do not affect later lines + columnsFilled = Math.min(columnsFilled, columns - (columnPos % columns)); + } + columnPos += columnsFilled; log.debug('abc88 columnsPos', child, columnPos); } }