diff --git a/cypress/integration/rendering/block.spec.ts b/cypress/integration/rendering/block.spec.ts
index 7856f534d..51d78444f 100644
--- a/cypress/integration/rendering/block.spec.ts
+++ b/cypress/integration/rendering/block.spec.ts
@@ -313,7 +313,7 @@ describe('Block diagram', () => {
);
});
- it('BL23: sizing - it should be possieble to make a composite block wider', () => {
+ it('BL23: sizing - it should be possible to make a composite block wider', () => {
imgSnapshotTest(
`block-beta
block:2
@@ -325,13 +325,61 @@ describe('Block diagram', () => {
);
});
- it('BL23: sizing - it should be possieble to make a composite block wider', () => {
+ it('BL24: block in the middle with space on each side', () => {
imgSnapshotTest(
`block-beta
- block:2
- A
- end
- B
+ columns 3
+ space
+ middle["In the middle"]
+ space
+ `,
+ {}
+ );
+ });
+ it('BL25: space and an edge', () => {
+ imgSnapshotTest(
+ `block-beta
+ columns 5
+ A space B
+ A --x B
+ `,
+ {}
+ );
+ });
+ it('BL26: block sizes for regular blocks', () => {
+ imgSnapshotTest(
+ `block-beta
+ columns 3
+ a["A wide one"] b:2 c:2 d
+ `,
+ {}
+ );
+ });
+ it('BL27: composite block with a set width - f should use the available space', () => {
+ imgSnapshotTest(
+ `block-beta
+ columns 3
+ a:3
+ block:e:3
+ f
+ end
+ g
+ `,
+ {}
+ );
+ });
+ it('BL23: composite block with a set width - f and g should split the available space', () => {
+ imgSnapshotTest(
+ `block-beta
+ columns 3
+ a:3
+ block:e:3
+ f
+ g
+ end
+ h
+ i
+ j
`,
{}
);
diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index b2af1f5f9..67776fe1b 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -65,10 +65,9 @@
block-beta
- columns 3
- block1["Block 1"]
- blockArrow<[" "]>(right)
- block2["Block 2"]
+columns 1
+ B["A wide one in the middle"]
+ style B fill:#f9F,stroke:#333,stroke-width:4px
block-beta
@@ -96,7 +95,7 @@ block-beta
end
g
-
+
block-beta
columns 3
a:3
diff --git a/packages/mermaid/src/diagrams/block/blockDB.ts b/packages/mermaid/src/diagrams/block/blockDB.ts
index 7e7bd7528..34d2b5d10 100644
--- a/packages/mermaid/src/diagrams/block/blockDB.ts
+++ b/packages/mermaid/src/diagrams/block/blockDB.ts
@@ -136,8 +136,11 @@ const populateBlockDatabase = (_blockList: Block[], parent: Block): void => {
continue;
}
if (block.type === 'applyStyles') {
- addStyle2Node(block.id, block?.styles);
- continue;
+ console.log('applyStyles', block.stylesStr);
+ if (block?.stylesStr) {
+ addStyle2Node(block.id, block?.stylesStr);
+ continue;
+ }
}
if (block.type === 'column-setting') {
parent.columns = block.columns || -1;
@@ -289,7 +292,7 @@ export const generateId = () => {
type ISetHierarchy = (block: Block[]) => void;
const setHierarchy = (block: Block[]): void => {
- log.debug('The document from parsing', JSON.stringify(block, null, 2));
+ console.log('The document from parsing', JSON.stringify(block, null, 2));
rootBlock.children = block;
populateBlockDatabase(block, rootBlock);
// log.debug('abc95 The document after popuplation', JSON.stringify(rootBlock, null, 2));
diff --git a/packages/mermaid/src/diagrams/block/blockTypes.ts b/packages/mermaid/src/diagrams/block/blockTypes.ts
index d2fd8d122..7bbba93b8 100644
--- a/packages/mermaid/src/diagrams/block/blockTypes.ts
+++ b/packages/mermaid/src/diagrams/block/blockTypes.ts
@@ -59,6 +59,7 @@ export interface Block {
css?: string;
styleClass?: string;
styles?: string[];
+ stylesStr?: string;
w?: number;
}
diff --git a/packages/mermaid/src/diagrams/block/parser/block.jison b/packages/mermaid/src/diagrams/block/parser/block.jison
index 066b7be0f..751f8381b 100644
--- a/packages/mermaid/src/diagrams/block/parser/block.jison
+++ b/packages/mermaid/src/diagrams/block/parser/block.jison
@@ -288,7 +288,7 @@ cssClassStatement
styleStatement
: style STYLE_ENTITY_IDS STYLE_DEFINITION_DATA {
- $$={ type: 'applyStyles', id: $2.trim(), styles: $3.trim() };
+ $$={ type: 'applyStyles', id: $2.trim(), stylesStr: $3.trim() };
}
;
diff --git a/packages/mermaid/src/diagrams/block/parser/block.spec.ts b/packages/mermaid/src/diagrams/block/parser/block.spec.ts
index 367edb842..3028a6c3c 100644
--- a/packages/mermaid/src/diagrams/block/parser/block.spec.ts
+++ b/packages/mermaid/src/diagrams/block/parser/block.spec.ts
@@ -4,6 +4,7 @@ import db from '../blockDB.js';
import { cleanupComments } from '../../../diagram-api/comments.js';
import { prepareTextForParsing } from '../blockUtils.js';
import { setConfig } from '../../../config.js';
+import getStyles from '../../../../dist/diagrams/pie/styles';
describe('Block diagram', function () {
describe('when parsing an block diagram graph it should handle > ', function () {
@@ -88,12 +89,34 @@ describe('Block diagram', function () {
expect(blocks[1].label).toBe('id2');
expect(blocks[1].type).toBe('na');
});
- it('a diagram with multiple nodes with edges', async () => {
+ it('a diagram with multiple nodes with edges abc123', async () => {
const str = `block-beta
id1["first"] --> id2["second"]
`;
block.parse(str);
+ const blocks = db.getBlocks();
+ const edges = db.getEdges();
+ expect(blocks.length).toBe(2);
+ expect(edges.length).toBe(1);
+ expect(edges[0].start).toBe('id1');
+ expect(edges[0].end).toBe('id2');
+ expect(edges[0].arrowTypeEnd).toBe('arrow_point');
+ });
+ it('a diagram with multiple nodes with edges abc123', async () => {
+ const str = `block-beta
+ id1["first"] -- "a label" --> id2["second"]
+ `;
+
+ block.parse(str);
+ const blocks = db.getBlocks();
+ const edges = db.getEdges();
+ expect(blocks.length).toBe(2);
+ expect(edges.length).toBe(1);
+ expect(edges[0].start).toBe('id1');
+ expect(edges[0].end).toBe('id2');
+ expect(edges[0].arrowTypeEnd).toBe('arrow_point');
+ expect(edges[0].label).toBe('a label');
});
it('a diagram with column statements', async () => {
const str = `block-beta
@@ -103,7 +126,8 @@ describe('Block diagram', function () {
block.parse(str);
expect(db.getColumns('root')).toBe(2);
- // Todo: DB check that the we have one block and that the root block has one column
+ const blocks = db.getBlocks();
+ expect(blocks.length).toBe(1);
});
it('a diagram withput column statements', async () => {
const str = `block-beta
@@ -112,7 +136,8 @@ describe('Block diagram', function () {
block.parse(str);
expect(db.getColumns('root')).toBe(-1);
- // Todo: DB check that the we have one block and that the root block has one column
+ const blocks = db.getBlocks();
+ expect(blocks.length).toBe(1);
});
it('a diagram with auto column statements', async () => {
const str = `block-beta
@@ -122,7 +147,8 @@ describe('Block diagram', function () {
block.parse(str);
expect(db.getColumns('root')).toBe(-1);
- // Todo: DB check that the we have one block and that the root block has one column
+ const blocks = db.getBlocks();
+ expect(blocks.length).toBe(1);
});
it('blocks next to each other', async () => {
@@ -134,7 +160,9 @@ describe('Block diagram', function () {
block.parse(str);
- // Todo: DB check that the we have two blocks and that the root block has two columns
+ const blocks = db.getBlocks();
+ expect(db.getColumns('root')).toBe(2);
+ expect(blocks.length).toBe(2);
});
it('blocks on top of each other', async () => {
@@ -146,7 +174,9 @@ describe('Block diagram', function () {
block.parse(str);
- // Todo: DB check that the we have two blocks and that the root block has one column
+ const blocks = db.getBlocks();
+ expect(db.getColumns('root')).toBe(1);
+ expect(blocks.length).toBe(2);
});
it('compound blocks 2', async () => {
@@ -287,12 +317,13 @@ describe('Block diagram', function () {
expect(block2.type).toBe('square');
expect(blockArrow.type).toBe('block_arrow');
console.log('blockArrow', blockArrow);
+ expect(blockArrow.directions).toContain('right');
});
- it.skip('Arrow blocks with multiple points', async () => {
+ it('Arrow blocks with multiple points', async () => {
const str = `block-beta
columns 1
A
- blockArrow(1,3)
+ blockArrow<[" "]>(up, down)
block
columns 3
B
@@ -301,6 +332,16 @@ describe('Block diagram', function () {
end`;
block.parse(str);
+
+ const blocks = db.getBlocks();
+ expect(blocks.length).toBe(3);
+
+ const blockArrow = blocks[1];
+ expect(blockArrow.type).toBe('block_arrow');
+ console.log('blockArrow', blockArrow);
+ expect(blockArrow.directions).toContain('up');
+ expect(blockArrow.directions).toContain('down');
+ expect(blockArrow.directions).not.toContain('right');
});
it('blocks with different widths', async () => {
const str = `block-beta
@@ -315,7 +356,7 @@ describe('Block diagram', function () {
expect(blocks.length).toBe(2);
const one = blocks[0];
const two = blocks[1];
- console.log('Obe and Two', one, two);
+ console.log('One and Two', one, two);
expect(two.w).toBe(2);
});
it('empty blocks', async () => {
@@ -323,46 +364,52 @@ describe('Block diagram', function () {
columns 3
space
middle["In the middle"]
+ space
`;
block.parse(str);
+
+ const blocks = db.getBlocks();
+ expect(blocks.length).toBe(3);
+ const sp1 = blocks[0];
+ const middle = blocks[1];
+ const sp2 = blocks[2];
+ expect(sp1.type).toBe('space');
+ expect(sp2.type).toBe('space');
+ expect(middle.label).toBe('In the middle');
});
- it.skip('classDef statements applied to a block', async () => {
+ it('classDef statements applied to a block', async () => {
const str = `block-beta
classDef black color:#ffffff, fill:#000000;
- mc["Memcache"]:::black
+ mc["Memcache"]
+ class mc black
`;
block.parse(str);
+ const blocks = db.getBlocks();
+ expect(blocks.length).toBe(1);
+ const mc = blocks[0];
+ expect(mc.classes).toContain('black');
+ const classes = db.getClasses();
+ console.log(classes);
+ const black = classes.black;
+ expect(black.id).toBe('black');
+ expect(black.styles[0]).toEqual('color:#ffffff');
});
- it.skip('classDef statements applied to a block with a width', async () => {
+ it('style statements applied to a block', async () => {
const str = `block-beta
- classDef black color:#ffffff, fill:#000000;
- columns 2
- mc["Memcache"]:2::black
+columns 1
+ B["A wide one in the middle"]
+ style B fill:#f9F,stroke:#333,stroke-width:4px
`;
- const apa = 'apan hopar i träden';
- block.parse(str);
- });
-
- it.skip('classDef statements', async () => {
- const str = `block-beta
- classDef black color:#ffffff, fill:#000000;
-
- block DataServices["Data Services"]
- columns H
- block Relational
- mssql["Microsoft SQL
Server"]
- end
- block Tabular
- columns 3
- gds["Google Data Store"]:1
- mc["Memcache"]:2:::black
- end
- end`;
block.parse(str);
+ const blocks = db.getBlocks();
+ expect(blocks.length).toBe(1);
+ const B = blocks[0];
+ console.log(B);
+ expect(B.styles).toContain('fill:#f9F');
});
});
});
diff --git a/packages/mermaid/src/diagrams/block/renderHelpers.ts b/packages/mermaid/src/diagrams/block/renderHelpers.ts
index 757bbadb9..34f249315 100644
--- a/packages/mermaid/src/diagrams/block/renderHelpers.ts
+++ b/packages/mermaid/src/diagrams/block/renderHelpers.ts
@@ -98,7 +98,7 @@ function getNodeFromBlock(block: Block, db: BlockDB, positioned = false) {
_shape = 'rect';
}
- const styles = getStylesFromArray(vertex?.styles || '');
+ const styles = getStylesFromArray(vertex?.styles || []);
// const styles = getStylesFromArray([]);
// Use vertex id as text in the box if no text is provided by the graph definition
@@ -117,13 +117,6 @@ function getNodeFromBlock(block: Block, db: BlockDB, positioned = false) {
style: styles.style, // + 'fill:#9f9;stroke:#333;stroke-width:4px;',
id: vertex.id,
directions: vertex.directions,
- // link: vertex.link,
- // linkTarget: vertex.linkTarget,
- // tooltip: diagObj.db.getTooltip(vertex.id) || '',
- // domId: diagObj.db.lookUpDomId(vertex.id),
- // haveCallback: vertex.haveCallback,
- // width: vertex.type === 'group' ? 500 : undefined,
- // dir: vertex.dir,
width: bounds.width,
height: bounds.height,
x: bounds.x,
diff --git a/packages/mermaid/src/utils.ts b/packages/mermaid/src/utils.ts
index e48b49fcd..6ea93aaa2 100644
--- a/packages/mermaid/src/utils.ts
+++ b/packages/mermaid/src/utils.ts
@@ -492,6 +492,7 @@ export function getStylesFromArray(arr: string[]): { style: string; labelStyle:
}
}
}
+ console.log(arr, style, labelStyle);
return { style: style, labelStyle: labelStyle };
}