Skip to content

Commit a641fd5

Browse files
knsvknsv
committed
#3358 Adding support for column statements
1 parent da79b37 commit a641fd5

File tree

7 files changed

+223
-208
lines changed

7 files changed

+223
-208
lines changed

‎cypress/platform/knsv2.html

+47-12
Original file line numberDiff line numberDiff line change
@@ -65,27 +65,62 @@
6565
<body>
6666
<pre id="diagram" class="mermaid">
6767
block-beta
68-
id1("Wide 1")
69-
%%id2("2")
7068
block
71-
id3["I am a wide one"]
72-
block
73-
id44("A final one")
74-
id45("B final one")
75-
end
69+
columns 1
70+
id1
71+
id2
72+
id3("Wider then")
7673
end
77-
id4("Another final one")
78-
74+
id4
7975
</pre>
8076

81-
<pre id="diagram" class="mermaid">
77+
<pre id="diagram" class="mermaid2">
78+
block-beta
79+
block
80+
columns 1
81+
block
82+
columns 3
83+
id1
84+
id2
85+
id2.1
86+
%%id2.2
87+
end
88+
id48
89+
end
90+
id3
91+
%% id3
92+
%% id4
93+
%% block
94+
%% columns 2
95+
%% id2
96+
%% id3
97+
%% end
98+
</pre>
99+
<pre id="diagram" class="mermaid2">
100+
block-beta
101+
block
102+
columns 1
103+
id1
104+
id2
105+
%%id2.1
106+
end
107+
id3
108+
%% id3
109+
%% id4
110+
%% block
111+
%% columns 2
112+
%% id2
113+
%% id3
114+
%% end
115+
</pre>
116+
<pre id="diagram" class="mermaid2">
82117
block-beta
83118
id1
84119
block
85120
id2
86121
end
87122
</pre>
88-
<pre id="diagram" class="mermaid">
123+
<pre id="diagram" class="mermaid2">
89124
block-beta
90125
id1["Hello"]
91126
block
@@ -96,7 +131,7 @@
96131
id5["World"]
97132
end
98133
</pre>
99-
<pre id="diagram" class="mermaid">
134+
<pre id="diagram" class="mermaid2">
100135
block-beta
101136
columns 2
102137
block

‎packages/mermaid/src/diagrams/block/blockDB.ts

+6-7
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
// import type { BlockDB } from './blockTypes.js';
22
import type { DiagramDB } from '../../diagram-api/types.js';
3-
import { BlockConfig, BlockType, Block, Link } from './blockTypes.js';
3+
import type { BlockConfig, BlockType, Block, Link } from './blockTypes.js';
44

55
import * as configApi from '../../config.js';
6-
// import common from '../common/common.js';
76
import {
87
// setAccTitle,
98
// getAccTitle,
@@ -37,9 +36,8 @@ const populateBlockDatabase = (blockList: Block[], parent: Block): void => {
3736
if (block.children) {
3837
populateBlockDatabase(block.children, block);
3938
}
40-
if (block.type !== 'column-setting') {
41-
children.push(block);
42-
}
39+
40+
children.push(block);
4341
}
4442
}
4543
parent.children = children;
@@ -79,9 +77,10 @@ export const generateId = () => {
7977

8078
type ISetHierarchy = (block: Block[]) => void;
8179
const setHierarchy = (block: Block[]): void => {
80+
rootBlock.children = block;
8281
populateBlockDatabase(block, rootBlock);
83-
log.debug('The hierarchy', JSON.stringify(block, null, 2));
84-
blocks = block;
82+
log.debug('The hierarchy', JSON.stringify(rootBlock, null, 2));
83+
blocks = rootBlock.children;
8584
};
8685

8786
type IAddLink = (link: Link) => Link;

‎packages/mermaid/src/diagrams/block/blockRenderer.ts

+16-103
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,14 @@ import {
77
select as d3select,
88
scaleOrdinal as d3scaleOrdinal,
99
schemeTableau10 as d3schemeTableau10,
10-
ContainerElement,
1110
} from 'd3';
11+
import { log } from '../../logger.js';
1212

1313
import { BlockDB } from './blockDB.js';
1414
import type { Block } from './blockTypes.js';
1515

1616
// import { diagram as BlockDiagram } from './blockDiagram.js';
1717
import { configureSvgSize } from '../../setupGraphViewbox.js';
18-
import { Uid } from '../../rendering-util/uid.js';
19-
import { pad } from 'lodash';
2018

2119
export const draw = async function (
2220
text: string,
@@ -43,27 +41,28 @@ export const draw = async function (
4341
const nodes = svg.insert('g').attr('class', 'block');
4442
await calculateBlockSizes(nodes, bl, db);
4543
const bounds = layout(db);
46-
console.log('Here blocks', bl);
44+
log.debug('Here blocks', bl);
4745
await insertBlocks(nodes, bl, db);
4846

49-
// console.log('Here', bl);
47+
// log.debug('Here', bl);
5048

5149
// Establish svg dimensions and get width and height
5250
//
5351
// const bounds2 = nodes.node().getBoundingClientRect();
54-
const bounds2 = bounds;
55-
const padding = 10;
5652
// Why, oh why ????
57-
const magicFactor = Math.max(1, Math.round(0.125 * (bounds2.width / bounds2.height)));
58-
const height = bounds2.height + magicFactor + 10;
59-
const width = bounds2.width + 10;
60-
const useMaxWidth = false;
61-
configureSvgSize(svg, height, width, useMaxWidth);
62-
console.log('Here Bounds', bounds, bounds2);
63-
svg.attr(
64-
'viewBox',
65-
`${bounds2.x - 5} ${bounds2.y - 5} ${bounds2.width + 10} ${bounds2.height + 10}`
66-
);
53+
if (bounds) {
54+
const bounds2 = bounds;
55+
const magicFactor = Math.max(1, Math.round(0.125 * (bounds2.width / bounds2.height)));
56+
const height = bounds2.height + magicFactor + 10;
57+
const width = bounds2.width + 10;
58+
const useMaxWidth = false;
59+
configureSvgSize(svg, height, width, useMaxWidth);
60+
log.debug('Here Bounds', bounds, bounds2);
61+
svg.attr(
62+
'viewBox',
63+
`${bounds2.x - 5} ${bounds2.y - 5} ${bounds2.width + 10} ${bounds2.height + 10}`
64+
);
65+
}
6766
// svg.attr('viewBox', `${-200} ${-200} ${400} ${400}`);
6867

6968
// Prepare data for construction based on diagObj.db
@@ -83,92 +82,6 @@ export const draw = async function (
8382
y?: number;
8483
}
8584

86-
const blocks: LayedBlock[] = [
87-
{
88-
ID: 'ApplicationLayer',
89-
label: 'Application Layer',
90-
x: 0,
91-
y: 0,
92-
children: [
93-
{
94-
ID: 'UserInterface',
95-
label: 'User Interface (WPF, HTML5/CSS3, Swing)',
96-
x: 0,
97-
y: 50,
98-
},
99-
],
100-
},
101-
{
102-
ID: 'PresentationLayer',
103-
label: 'Presentation Layer',
104-
x: 0,
105-
y: 50,
106-
children: [
107-
{
108-
ID: 'Smack',
109-
label: 'J2SE Mobil App (Smack)',
110-
},
111-
{
112-
ID: 'JsJAC',
113-
label: 'Java Script Browser App (JsJAC)',
114-
},
115-
{
116-
ID: 'babelim',
117-
label: '.NET Windows App (Babel-im)',
118-
},
119-
],
120-
},
121-
{
122-
ID: 'SessionLayer',
123-
label: 'Session Layer',
124-
x: 0,
125-
y: 100,
126-
children: [
127-
{
128-
ID: 'XMPP',
129-
label: 'XMPP Component',
130-
},
131-
{
132-
children: [
133-
{
134-
ID: 'Authentication',
135-
label: 'Authentication',
136-
},
137-
{
138-
ID: 'Authorization',
139-
label: 'Authorization',
140-
},
141-
],
142-
},
143-
{
144-
ID: 'LDAP',
145-
label: 'LDAP, DB, POP',
146-
},
147-
],
148-
},
149-
{
150-
ID: 'NetworkLayer',
151-
label: 'Network Layer',
152-
x: 0,
153-
y: 150,
154-
children: [
155-
{ ID: 'HTTP', label: 'HTTP' },
156-
{ ID: 'SOCK', label: 'SOCK' },
157-
],
158-
},
159-
{
160-
ID: 'DataLayer',
161-
label: 'Data Layer',
162-
x: 0,
163-
y: 200,
164-
children: [
165-
{ ID: 'XMPP', label: 'XMPP' },
166-
{ ID: 'BDB', label: 'Business DB' },
167-
{ ID: 'AD', label: 'Active Directory' },
168-
],
169-
},
170-
];
171-
17285
// Get color scheme for the graph
17386
const colorScheme = d3scaleOrdinal(d3schemeTableau10);
17487
};

‎packages/mermaid/src/diagrams/block/blockTypes.ts

+1
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ export interface Block {
3939
};
4040
node?: any;
4141
columns?: number; // | TBlockColumnsDefaultValue;
42+
classes?: string[];
4243
}
4344

4445
export interface Link {

‎packages/mermaid/src/diagrams/block/layout.spec.ts

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// @ts-ignore: jison doesn't export types
2+
import { calculateBlockPosition } from './layout.js';
3+
4+
describe('Layout', function () {
5+
it('It shoud calulatepositions correctly', () => {
6+
expect(calculateBlockPosition(2, 0)).toEqual({ px: 0, py: 0 });
7+
expect(calculateBlockPosition(2, 1)).toEqual({ px: 1, py: 0 });
8+
expect(calculateBlockPosition(2, 2)).toEqual({ px: 0, py: 1 });
9+
expect(calculateBlockPosition(2, 3)).toEqual({ px: 1, py: 1 });
10+
expect(calculateBlockPosition(2, 4)).toEqual({ px: 0, py: 2 });
11+
expect(calculateBlockPosition(1, 3)).toEqual({ px: 0, py: 2 });
12+
});
13+
});

0 commit comments

Comments
 (0)