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

#3358 Some cleanup

Browse Source
This commit is contained in:
Knut Sveidqvist
2024-01-18 15:31:14 +01:00
parent a0d328d734
commit 1230da7fc7
8 changed files with 149 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
cypress/integration/rendering/block.spec.ts
View File

@@ -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( imgSnapshotTest(
`block-beta `block-beta
block:2 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( imgSnapshotTest(
`block-beta `block-beta
block:2 columns 3
A space
end middle["In the middle"]
B 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
`, `,
{} {}
); );

9
cypress/platform/knsv2.html
View File

@@ -65,10 +65,9 @@
<body> <body>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
block-beta block-beta
columns 3 columns 1
block1["Block 1"] B["A wide one in the middle"]
blockArrow<["&nbsp;&nbsp;&nbsp;"]>(right) style B fill:#f9F,stroke:#333,stroke-width:4px
block2["Block 2"]
</pre> </pre>
<pre id="diagram" class="mermaid2"> <pre id="diagram" class="mermaid2">
block-beta block-beta
@@ -96,7 +95,7 @@ block-beta
end end
g g
</pre> </pre>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid2">
block-beta block-beta
columns 3 columns 3
a:3 a:3

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

@@ -136,8 +136,11 @@ const populateBlockDatabase = (_blockList: Block[], parent: Block): void => {
continue; continue;
} }
if (block.type === 'applyStyles') { if (block.type === 'applyStyles') {
addStyle2Node(block.id, block?.styles); console.log('applyStyles', block.stylesStr);
continue; if (block?.stylesStr) {
addStyle2Node(block.id, block?.stylesStr);
continue;
}
} }
if (block.type === 'column-setting') { if (block.type === 'column-setting') {
parent.columns = block.columns || -1; parent.columns = block.columns || -1;
@@ -289,7 +292,7 @@ export const generateId = () => {
type ISetHierarchy = (block: Block[]) => void; type ISetHierarchy = (block: Block[]) => void;
const setHierarchy = (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; rootBlock.children = block;
populateBlockDatabase(block, rootBlock); populateBlockDatabase(block, rootBlock);
// log.debug('abc95 The document after popuplation', JSON.stringify(rootBlock, null, 2)); // log.debug('abc95 The document after popuplation', JSON.stringify(rootBlock, null, 2));

1
packages/mermaid/src/diagrams/block/blockTypes.ts
View File

@@ -59,6 +59,7 @@ export interface Block {
css?: string; css?: string;
styleClass?: string; styleClass?: string;
styles?: string[]; styles?: string[];
stylesStr?: string;
w?: number; w?: number;
} }

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

@@ -288,7 +288,7 @@ cssClassStatement
styleStatement styleStatement
: style STYLE_ENTITY_IDS STYLE_DEFINITION_DATA { : style STYLE_ENTITY_IDS STYLE_DEFINITION_DATA {
$$={ type: 'applyStyles', id: $2.trim(), styles: $3.trim() }; $$={ type: 'applyStyles', id: $2.trim(), stylesStr: $3.trim() };
} }
; ;

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

@@ -4,6 +4,7 @@ import db from '../blockDB.js';
import { cleanupComments } from '../../../diagram-api/comments.js'; import { cleanupComments } from '../../../diagram-api/comments.js';
import { prepareTextForParsing } from '../blockUtils.js'; import { prepareTextForParsing } from '../blockUtils.js';
import { setConfig } from '../../../config.js'; import { setConfig } from '../../../config.js';
import getStyles from '../../../../dist/diagrams/pie/styles';
describe('Block diagram', function () { describe('Block diagram', function () {
describe('when parsing an block diagram graph it should handle > ', 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].label).toBe('id2');
expect(blocks[1].type).toBe('na'); 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 const str = `block-beta
id1["first"] --> id2["second"] id1["first"] --> id2["second"]
`; `;
block.parse(str); 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 () => { it('a diagram with column statements', async () => {
const str = `block-beta const str = `block-beta
@@ -103,7 +126,8 @@ describe('Block diagram', function () {
block.parse(str); block.parse(str);
expect(db.getColumns('root')).toBe(2); 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 () => { it('a diagram withput column statements', async () => {
const str = `block-beta const str = `block-beta
@@ -112,7 +136,8 @@ describe('Block diagram', function () {
block.parse(str); block.parse(str);
expect(db.getColumns('root')).toBe(-1); 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 () => { it('a diagram with auto column statements', async () => {
const str = `block-beta const str = `block-beta
@@ -122,7 +147,8 @@ describe('Block diagram', function () {
block.parse(str); block.parse(str);
expect(db.getColumns('root')).toBe(-1); 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 () => { it('blocks next to each other', async () => {
@@ -134,7 +160,9 @@ describe('Block diagram', function () {
block.parse(str); 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 () => { it('blocks on top of each other', async () => {
@@ -146,7 +174,9 @@ describe('Block diagram', function () {
block.parse(str); 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 () => { it('compound blocks 2', async () => {
@@ -287,12 +317,13 @@ describe('Block diagram', function () {
expect(block2.type).toBe('square'); expect(block2.type).toBe('square');
expect(blockArrow.type).toBe('block_arrow'); expect(blockArrow.type).toBe('block_arrow');
console.log('blockArrow', blockArrow); 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 const str = `block-beta
columns 1 columns 1
A A
blockArrow(1,3) blockArrow<["&nbsp;&nbsp;&nbsp;"]>(up, down)
block block
columns 3 columns 3
B B
@@ -301,6 +332,16 @@ describe('Block diagram', function () {
end`; end`;
block.parse(str); 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 () => { it('blocks with different widths', async () => {
const str = `block-beta const str = `block-beta
@@ -315,7 +356,7 @@ describe('Block diagram', function () {
expect(blocks.length).toBe(2); expect(blocks.length).toBe(2);
const one = blocks[0]; const one = blocks[0];
const two = blocks[1]; const two = blocks[1];
console.log('Obe and Two', one, two); console.log('One and Two', one, two);
expect(two.w).toBe(2); expect(two.w).toBe(2);
}); });
it('empty blocks', async () => { it('empty blocks', async () => {
@@ -323,46 +364,52 @@ describe('Block diagram', function () {
columns 3 columns 3
space space
middle["In the middle"] middle["In the middle"]
space
`; `;
block.parse(str); 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 const str = `block-beta
classDef black color:#ffffff, fill:#000000; classDef black color:#ffffff, fill:#000000;
mc["Memcache"]:::black mc["Memcache"]
class mc black
`; `;
block.parse(str); 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 const str = `block-beta
classDef black color:#ffffff, fill:#000000; columns 1
columns 2 B["A wide one in the middle"]
mc["Memcache"]:2::black 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<br/>Server"]
end
block Tabular
columns 3
gds["Google Data Store"]:1
mc["Memcache"]:2:::black
end
end`;
block.parse(str); 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');
}); });
}); });
}); });

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

@@ -98,7 +98,7 @@ function getNodeFromBlock(block: Block, db: BlockDB, positioned = false) {
_shape = 'rect'; _shape = 'rect';
} }
const styles = getStylesFromArray(vertex?.styles || ''); const styles = getStylesFromArray(vertex?.styles || []);
// const styles = getStylesFromArray([]); // const styles = getStylesFromArray([]);
// Use vertex id as text in the box if no text is provided by the graph definition // 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;', style: styles.style, // + 'fill:#9f9;stroke:#333;stroke-width:4px;',
id: vertex.id, id: vertex.id,
directions: vertex.directions, 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, width: bounds.width,
height: bounds.height, height: bounds.height,
x: bounds.x, x: bounds.x,

1
packages/mermaid/src/utils.ts
View File

@@ -492,6 +492,7 @@ export function getStylesFromArray(arr: string[]): { style: string; labelStyle:
} }
} }
} }
console.log(arr, style, labelStyle);
return { style: style, labelStyle: labelStyle }; return { style: style, labelStyle: labelStyle };
} }