mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

#3358 Some cleanup

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
Show Stats 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(
`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
`,
{}
);

9
cypress/platform/knsv2.html
View File

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

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

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

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

@ -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() };
}
;

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 { 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<["&nbsp;&nbsp;&nbsp;"]>(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<br/>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');
});
});
});

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

@ -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,

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 };
}