Merge pull request #3923 from tomperr/feature/3036_group_style_definition
feat(flowchart): add classDef style group definition
This commit is contained in:
commit
2cc9a52e9e
|
@ -1505,6 +1505,34 @@
|
|||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
A([Start]) ==> B[Step 1]
|
||||
B ==> C{Flow 1}
|
||||
C -- Choice 1.1 --> D[Step 2.1]
|
||||
C -- Choice 1.3 --> I[Step 2.3]
|
||||
C == Choice 1.2 ==> E[Step 2.2]
|
||||
D --> F{Flow 2}
|
||||
E ==> F{Flow 2}
|
||||
F{Flow 2} == Choice 2.1 ==> H[Feedback node]
|
||||
H[Feedback node] ==> B[Step 1]
|
||||
F{Flow 2} == Choice 2.2 ==> G((Finish))
|
||||
|
||||
linkStyle 0,1,4,6,7,8,9 stroke:gold, stroke-width:4px
|
||||
|
||||
classDef active_node fill:#0CF,stroke:#09F,stroke-width:6px
|
||||
classDef unactive_node fill:#e0e0e0,stroke:#bdbdbd,stroke-width:3px
|
||||
classDef bugged_node fill:#F88,stroke:#F22,stroke-width:3px
|
||||
classDef start_node,finish_node fill:#3B1,stroke:#391,stroke-width:8px
|
||||
|
||||
class A start_node;
|
||||
class B,C,E,F,H active_node;
|
||||
class D unactive_node;
|
||||
class G finish_node;
|
||||
class I bugged_node
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h1 id="link-clicked">Anchor for "link-clicked" test</h1>
|
||||
|
||||
<script type="module">
|
||||
|
|
|
@ -919,6 +919,10 @@ In the example below the style defined in the linkStyle statement will belong to
|
|||
|
||||
linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
|
||||
|
||||
It is also possible to add style to multiple links in a single statement, by separating link numbers with commas:
|
||||
|
||||
linkStyle 1,2,7 color:blue;
|
||||
|
||||
### Styling line curves
|
||||
|
||||
It is possible to style the type of curve used for lines between items, if the default method does not meet your needs.
|
||||
|
@ -957,10 +961,14 @@ flowchart LR
|
|||
More convenient than defining the style every time is to define a class of styles and attach this class to the nodes that
|
||||
should have a different look.
|
||||
|
||||
a class definition looks like the example below:
|
||||
A class definition looks like the example below:
|
||||
|
||||
classDef className fill:#f9f,stroke:#333,stroke-width:4px;
|
||||
|
||||
Also, it is possible to define style to multiple classes in one statement:
|
||||
|
||||
classDef firstClassName,secondClassName font-size:12pt;
|
||||
|
||||
Attachment of a class to a node is done as per below:
|
||||
|
||||
class nodeId1 className;
|
||||
|
|
|
@ -208,21 +208,22 @@ export const updateLink = function (positions, style) {
|
|||
});
|
||||
};
|
||||
|
||||
export const addClass = function (id, style) {
|
||||
if (classes[id] === undefined) {
|
||||
classes[id] = { id: id, styles: [], textStyles: [] };
|
||||
}
|
||||
export const addClass = function (ids, style) {
|
||||
ids.split(',').forEach(function (id) {
|
||||
if (classes[id] === undefined) {
|
||||
classes[id] = { id, styles: [], textStyles: [] };
|
||||
}
|
||||
|
||||
if (style !== undefined && style !== null) {
|
||||
style.forEach(function (s) {
|
||||
if (s.match('color')) {
|
||||
const newStyle1 = s.replace('fill', 'bgFill');
|
||||
const newStyle2 = newStyle1.replace('color', 'fill');
|
||||
classes[id].textStyles.push(newStyle2);
|
||||
}
|
||||
classes[id].styles.push(s);
|
||||
});
|
||||
}
|
||||
if (style !== undefined && style !== null) {
|
||||
style.forEach(function (s) {
|
||||
if (s.match('color')) {
|
||||
const newStyle = s.replace('fill', 'bgFill').replace('color', 'fill');
|
||||
classes[id].textStyles.push(newStyle);
|
||||
}
|
||||
classes[id].styles.push(s);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
@ -41,3 +41,26 @@ describe('flow db subgraphs', () => {
|
|||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('flow db addClass', () => {
|
||||
beforeEach(() => {
|
||||
flowDb.clear();
|
||||
});
|
||||
it('should detect many classes', () => {
|
||||
flowDb.addClass('a,b', ['stroke-width: 8px']);
|
||||
const classes = flowDb.getClasses();
|
||||
|
||||
expect(classes.hasOwnProperty('a')).toBe(true);
|
||||
expect(classes.hasOwnProperty('b')).toBe(true);
|
||||
expect(classes['a']['styles']).toEqual(['stroke-width: 8px']);
|
||||
expect(classes['b']['styles']).toEqual(['stroke-width: 8px']);
|
||||
});
|
||||
|
||||
it('should detect single class', () => {
|
||||
flowDb.addClass('a', ['stroke-width: 8px']);
|
||||
const classes = flowDb.getClasses();
|
||||
|
||||
expect(classes.hasOwnProperty('a')).toBe(true);
|
||||
expect(classes['a']['styles']).toEqual(['stroke-width: 8px']);
|
||||
});
|
||||
});
|
||||
|
|
|
@ -113,6 +113,22 @@ describe('[Style] when parsing', () => {
|
|||
expect(classes['exClass'].styles[1]).toBe('border:1px solid red');
|
||||
});
|
||||
|
||||
it('should be possible to declare multiple classes', function () {
|
||||
const res = flow.parser.parse(
|
||||
'graph TD;classDef firstClass,secondClass background:#bbb,border:1px solid red;'
|
||||
);
|
||||
|
||||
const classes = flow.parser.yy.getClasses();
|
||||
|
||||
expect(classes['firstClass'].styles.length).toBe(2);
|
||||
expect(classes['firstClass'].styles[0]).toBe('background:#bbb');
|
||||
expect(classes['firstClass'].styles[1]).toBe('border:1px solid red');
|
||||
|
||||
expect(classes['secondClass'].styles.length).toBe(2);
|
||||
expect(classes['secondClass'].styles[0]).toBe('background:#bbb');
|
||||
expect(classes['secondClass'].styles[1]).toBe('border:1px solid red');
|
||||
});
|
||||
|
||||
it('should be possible to declare a class with a dot in the style', function () {
|
||||
const res = flow.parser.parse(
|
||||
'graph TD;classDef exClass background:#bbb,border:1.5px solid red;'
|
||||
|
|
|
@ -605,6 +605,12 @@ In the example below the style defined in the linkStyle statement will belong to
|
|||
linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
|
||||
```
|
||||
|
||||
It is also possible to add style to multiple links in a single statement, by separating link numbers with commas:
|
||||
|
||||
```
|
||||
linkStyle 1,2,7 color:blue;
|
||||
```
|
||||
|
||||
### Styling line curves
|
||||
|
||||
It is possible to style the type of curve used for lines between items, if the default method does not meet your needs.
|
||||
|
@ -638,12 +644,18 @@ flowchart LR
|
|||
More convenient than defining the style every time is to define a class of styles and attach this class to the nodes that
|
||||
should have a different look.
|
||||
|
||||
a class definition looks like the example below:
|
||||
A class definition looks like the example below:
|
||||
|
||||
```
|
||||
classDef className fill:#f9f,stroke:#333,stroke-width:4px;
|
||||
```
|
||||
|
||||
Also, it is possible to define style to multiple classes in one statement:
|
||||
|
||||
```
|
||||
classDef firstClassName,secondClassName font-size:12pt;
|
||||
```
|
||||
|
||||
Attachment of a class to a node is done as per below:
|
||||
|
||||
```
|
||||
|
|
Loading…
Reference in New Issue