mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-14 06:43:25 +08:00
Merge pull request #845 from Qix-/style-subgraph
Support styling of subgraphs
This commit is contained in:
commit
23693bd57e
29
dist/index.html
vendored
29
dist/index.html
vendored
@ -206,6 +206,35 @@ graph TB
|
||||
a1-->a2
|
||||
end
|
||||
</div>
|
||||
<div class="mermaid">
|
||||
graph TB
|
||||
A
|
||||
B
|
||||
subgraph foo[Foo SubGraph]
|
||||
C
|
||||
D
|
||||
end
|
||||
subgraph bar[Bar SubGraph]
|
||||
E
|
||||
F
|
||||
end
|
||||
G
|
||||
|
||||
A-->B
|
||||
B-->C
|
||||
C-->D
|
||||
B-->D
|
||||
D-->E
|
||||
E-->A
|
||||
E-->F
|
||||
F-->D
|
||||
F-->G
|
||||
B-->G
|
||||
G-->D
|
||||
|
||||
style foo fill:#F99,stroke-width:2px,stroke:#F0F
|
||||
style bar fill:#999,stroke-width:10px,stroke:#0F0
|
||||
</div>
|
||||
<div class="mermaid">
|
||||
graph LR
|
||||
456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]
|
||||
|
@ -7,6 +7,7 @@ let vertices = {}
|
||||
let edges = []
|
||||
let classes = []
|
||||
let subGraphs = []
|
||||
let subGraphLookup = {}
|
||||
let tooltips = {}
|
||||
let subCount = 0
|
||||
let direction
|
||||
@ -18,8 +19,9 @@ let funs = []
|
||||
* @param text
|
||||
* @param type
|
||||
* @param style
|
||||
* @param classes
|
||||
*/
|
||||
export const addVertex = function (id, text, type, style) {
|
||||
export const addVertex = function (id, text, type, style, classes) {
|
||||
let txt
|
||||
|
||||
if (typeof id === 'undefined') {
|
||||
@ -52,6 +54,13 @@ export const addVertex = function (id, text, type, style) {
|
||||
})
|
||||
}
|
||||
}
|
||||
if (typeof classes !== 'undefined') {
|
||||
if (classes !== null) {
|
||||
classes.forEach(function (s) {
|
||||
vertices[id].classes.push(s)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@ -143,6 +152,10 @@ export const setClass = function (ids, className) {
|
||||
if (typeof vertices[id] !== 'undefined') {
|
||||
vertices[id].classes.push(className)
|
||||
}
|
||||
|
||||
if (typeof subGraphLookup[id] !== 'undefined') {
|
||||
subGraphLookup[id].classes.push(className)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@ -283,6 +296,7 @@ export const clear = function () {
|
||||
funs = []
|
||||
funs.push(setupToolTips)
|
||||
subGraphs = []
|
||||
subGraphLookup = {}
|
||||
subCount = 0
|
||||
tooltips = []
|
||||
}
|
||||
@ -297,7 +311,7 @@ export const defaultStyle = function () {
|
||||
/**
|
||||
* Clears the internal graph db so that a new graph can be parsed.
|
||||
*/
|
||||
export const addSubGraph = function (list, title) {
|
||||
export const addSubGraph = function (id, list, title) {
|
||||
function uniq (a) {
|
||||
const prims = { 'boolean': {}, 'number': {}, 'string': {} }
|
||||
const objs = []
|
||||
@ -315,10 +329,13 @@ export const addSubGraph = function (list, title) {
|
||||
|
||||
nodeList = uniq(nodeList.concat.apply(nodeList, list))
|
||||
|
||||
const subGraph = { id: 'subGraph' + subCount, nodes: nodeList, title: title.trim() }
|
||||
subGraphs.push(subGraph)
|
||||
id = id || ('subGraph' + subCount)
|
||||
title = title || ''
|
||||
subCount = subCount + 1
|
||||
return subGraph.id
|
||||
const subGraph = { id: id, nodes: nodeList, title: title.trim(), classes: [] }
|
||||
subGraphs.push(subGraph)
|
||||
subGraphLookup[id] = subGraph
|
||||
return id
|
||||
}
|
||||
|
||||
const getPosForId = function (id) {
|
||||
|
@ -272,7 +272,7 @@ export const draw = function (text, id) {
|
||||
const subGraphs = flowDb.getSubGraphs()
|
||||
for (let i = subGraphs.length - 1; i >= 0; i--) {
|
||||
subG = subGraphs[i]
|
||||
flowDb.addVertex(subG.id, subG.title, 'group', undefined)
|
||||
flowDb.addVertex(subG.id, subG.title, 'group', undefined, subG.classes)
|
||||
}
|
||||
|
||||
// Fetch the verices/nodes and edges/links from the parsed graph definition
|
||||
|
@ -225,10 +225,14 @@ statement
|
||||
{$$=[];}
|
||||
| clickStatement separator
|
||||
{$$=[];}
|
||||
| subgraph text separator document end
|
||||
{$$=yy.addSubGraph($4,$2);}
|
||||
| subgraph SPACE alphaNum SQS text SQE separator document end
|
||||
{$$=yy.addSubGraph($3,$8,$5);}
|
||||
| subgraph SPACE STR separator document end
|
||||
{$$=yy.addSubGraph(undefined,$5,$3);}
|
||||
| subgraph SPACE alphaNum separator document end
|
||||
{$$=yy.addSubGraph($3,$5,$3);}
|
||||
| subgraph separator document end
|
||||
{$$=yy.addSubGraph($3,undefined);}
|
||||
{$$=yy.addSubGraph(undefined,$3,undefined);}
|
||||
;
|
||||
|
||||
separator: NEWLINE | SEMI | EOF ;
|
||||
|
File diff suppressed because one or more lines are too long
@ -31,8 +31,33 @@ describe('when parsing ', function () {
|
||||
expect(subgraph.nodes[0]).toBe('a1')
|
||||
expect(subgraph.nodes[1]).toBe('a2')
|
||||
expect(subgraph.title).toBe('One')
|
||||
expect(subgraph.id).toBe('One')
|
||||
})
|
||||
|
||||
it('should handle subgraph with multiple words in title', function () {
|
||||
const res = flow.parser.parse('graph TB\nsubgraph "Some Title"\n\ta1-->a2\nend')
|
||||
const subgraphs = flow.parser.yy.getSubGraphs()
|
||||
expect(subgraphs.length).toBe(1)
|
||||
const subgraph = subgraphs[0]
|
||||
expect(subgraph.nodes.length).toBe(2)
|
||||
expect(subgraph.nodes[0]).toBe('a1')
|
||||
expect(subgraph.nodes[1]).toBe('a2')
|
||||
expect(subgraph.title).toBe('Some Title')
|
||||
expect(subgraph.id).toBe('subGraph0')
|
||||
});
|
||||
|
||||
it('should handle subgraph with id and title notation', function () {
|
||||
const res = flow.parser.parse('graph TB\nsubgraph some-id[Some Title]\n\ta1-->a2\nend')
|
||||
const subgraphs = flow.parser.yy.getSubGraphs()
|
||||
expect(subgraphs.length).toBe(1)
|
||||
const subgraph = subgraphs[0]
|
||||
expect(subgraph.nodes.length).toBe(2)
|
||||
expect(subgraph.nodes[0]).toBe('a1')
|
||||
expect(subgraph.nodes[1]).toBe('a2')
|
||||
expect(subgraph.title).toBe('Some Title')
|
||||
expect(subgraph.id).toBe('some-id')
|
||||
});
|
||||
|
||||
it("should handle angle bracket ' > ' as direction LR", function () {
|
||||
const res = flow.parser.parse('graph >;A-->B;')
|
||||
|
||||
|
@ -30,9 +30,9 @@
|
||||
}
|
||||
|
||||
.cluster rect {
|
||||
fill: $secondBkg !important;
|
||||
stroke: $clusterBorder !important;
|
||||
stroke-width: 1px !important;
|
||||
fill: $secondBkg;
|
||||
stroke: $clusterBorder;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
.cluster text {
|
||||
|
Loading…
x
Reference in New Issue
Block a user