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

Merge branch 'pebr/neo-style' into alanaV11

Browse Source
This commit is contained in:
Per Brolin
2024-06-13 13:34:05 +02:00
parent 9d590bc587 2c2b86dc9d
commit 10e9a30769
10 changed files with 1743 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
cypress/platform/per.html
View File

@@ -90,6 +90,14 @@ stateDiagram-v2
>
<pre id="diagram" class="mermaid">
stateDiagram
StateID
</pre>
<pre id="diagram" class="mermaid2">
stateDiagram
direction LR
[*] --> A
@@ -100,11 +108,7 @@ stateDiagram-v2
a --> b
}
B --> D
</pre
>
</pre>
<script type="module">
import mermaid from './mermaid.esm.mjs';
@@ -117,20 +121,22 @@ stateDiagram-v2
theme: 'neo',
handdrawnSeed: 12,
look: 'neo',
//layout: 'elk',
'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
// layout: 'dagre',
// layout: 'elk',
flowchart: { titleTopMargin: 10 },
// fontFamily: 'Caveat',
// fontFamily: 'Kalam',
//fontFamily: 'Kalam',
fontFamily: 'Arial',
sequence: {
actorFontFamily: 'arial',
noteFontFamily: 'arial',
messageFontFamily: 'arial',
},
fontSize: 12,
fontSize: 10,
logLevel: 0,
htmlLabels: true,
});
function callback() {
alert('It worked');

1499
cypress/platform/state-refactor-neo.html Normal file
View File

File diff suppressed because it is too large Load Diff

208
cypress/platform/state-refactor.html
View File

@@ -93,6 +93,7 @@
<th></th> <!-- Placeholder for the top left corner -->
<th>Dagre</th>
<th>Dagre with rough</th>
<th>Dagre with neo</th>
<th>ELK</th>
<th>ELK with rough</th>
</tr>
@@ -115,6 +116,14 @@ stateDiagram-v2
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "handdrawn"} }%%
stateDiagram-v2
stateId
</pre>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo"} }%%
stateDiagram-v2
stateId
@@ -162,6 +171,13 @@ stateDiagram-v2
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "handdrawn"} }%%
stateDiagram-v2
state "This is a state description" as s3
</pre>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo"} }%%
stateDiagram-v2
state "This is a state description" as s3
</pre>
@@ -206,6 +222,14 @@ stateDiagram-v2
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "handdrawn"} }%%
stateDiagram-v2
s22 : This is a state description
</pre>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo"} }%%
stateDiagram-v2
s22 : This is a state description
@@ -266,10 +290,20 @@ stateDiagram-v2
</pre>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo"} }%%
stateDiagram-v2
s51 --> s52
</pre>
</td>
<td>
<pre id="diagram3" class="mermaid">
%%{init: {"handdrawn": false, "layout": "elk"} }%%
stateDiagram-v2
s51 --> s52
s61 --> s62
</pre>
@@ -278,7 +312,7 @@ stateDiagram-v2
<pre id="diagram4" class="mermaid">
%%{init: {"look": "handdrawn", "layout": "elk"} }%%
stateDiagram-v2
s61 --> s62
s71 --> s72
</pre>
@@ -321,13 +355,23 @@ stateDiagram-v2
a3 --> a4: A transition
</pre>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo"} }%%
stateDiagram-v2
a5 --> a6: A transition
</pre>
</td>
<td>
<pre id="diagram3" class="mermaid">
%%{init: {"handdrawn": false, "layout": "elk"} }%%
stateDiagram-v2
a5 --> a6: A transition
a7 --> a8: A transition
</pre>
@@ -336,7 +380,7 @@ stateDiagram-v2
<pre id="diagram4" class="mermaid">
%%{init: {"look": "handdrawn", "layout": "elk"} }%%
stateDiagram-v2
a7 --> a8: A transition
a9 --> a10: A transition
</pre>
@@ -382,6 +426,17 @@ stateDiagram-v2
test --> [*]
</pre>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo"} }%%
stateDiagram-v2
[*] --> test
test --> [*]
</pre>
</td>
<td>
@@ -454,6 +509,20 @@ stateDiagram-v2
}
</pre>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo"} }%%
stateDiagram-v2
[*] --> First
state First {
[*] --> second
second --> [*]
}
</pre>
</td>
<td>
@@ -567,6 +636,31 @@ stateDiagram-v2
</pre>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo"} }%%
stateDiagram-v2
[*] --> Level1
state Level1 {
[*] --> Level2
state Level2 {
[*] --> level2
level2 --> Level3
state Level3 {
[*] --> level3
level3 --> [*]
}
}
}
</pre>
</td>
<td>
@@ -697,6 +791,30 @@ stateDiagram-v2
</pre>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo"} }%%
stateDiagram-v2
[*] --> B1
B1 --> B2
B1 --> B3
state B1 {
[*] --> B11
B11 --> [*]
}
state B2 {
[*] --> B22
B22 --> [*]
}
state B3 {
[*] --> B33
B33 --> [*]
}
</pre>
</td>
<td>
<pre id="diagram3" class="mermaid">
%%{init: {"handdrawn": false, "layout": "elk"} }%%
stateDiagram-v2
@@ -793,7 +911,19 @@ stateDiagram-v2
if_state --> True : if n >= 0
</pre>
</td>
<td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo"} }%%
stateDiagram-v2
state if_state <<choice>>
[*] --> IsPositive
IsPositive --> if_state
if_state --> False: if n < 0
if_state --> True : if n >= 0
</pre>
</td>
<td>
<pre id="diagram3" class="mermaid">
%%{init: {"handdrawn": false, "layout": "elk"} }%%
stateDiagram-v2
@@ -865,6 +995,23 @@ stateDiagram-v2
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "handdrawn"} }%%
stateDiagram-v2
state fork_state <<fork>>
[*] --> fork_state
fork_state --> State2
fork_state --> State3
state join_state <<join>>
State2 --> join_state
State3 --> join_state
join_state --> State4
State4 --> [*]
</pre>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo"} }%%
stateDiagram-v2
state fork_state <<fork>>
[*] --> fork_state
@@ -955,6 +1102,19 @@ stateDiagram-v2
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "handdrawn"} }%%
stateDiagram-v2
TN3: The state with a note
note right of TN3
Important information! You can write
notes.
end note
TN3 --> TN4
note left of TN4 : This is the note to the left.
</pre>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo"} }%%
stateDiagram-v2
TN3: The state with a note
note right of TN3
@@ -1055,6 +1215,27 @@ state Active {
stateDiagram-v2
[*] --> Active
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
NumLockOn --> NumLockOff : EvNumLockPressed
--
[*] --> CapsLockOff
CapsLockOff --> CapsLockOn : EvCapsLockPressed
CapsLockOn --> CapsLockOff : EvCapsLockPressed
--
[*] --> ScrollLockOff
ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
}
</pre>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo"} }%%
stateDiagram-v2
[*] --> Active
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
@@ -1160,6 +1341,21 @@ direction LR
<pre id="diagram2" class="mermaid">
%%{init: {"look": "handdrawn"} }%%
stateDiagram-v2
direction LR
[*] --> D1
D1 --> D2
D2 --> D3
state D3 {
direction TB
D11 --> D22
}
D2 --> D4
</pre>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo"} }%%
stateDiagram-v2
direction LR
[*] --> D1
D1 --> D2
@@ -1267,4 +1463,4 @@ direction LR
</script>
</body>
</html>
</html>

5
docs/neo-style-to-do Normal file
View File

@@ -0,0 +1,5 @@
1. Paddings of node labels for neo and classic does not differ, which it should. Status: Fixed
2. When layout is set to "elk" and look is "neo", the drop shadow is not present
3. Drop-shadows are not present for flow-charts, even if look is "neo"
4. When look is "neo" and theme is "forest", the border of nodes is visible, which should not be the case
5. When look is "neo" and "theme" is "neo", the background color shall be white

14
packages/mermaid/src/diagrams/state/styles.js
View File

@@ -101,13 +101,13 @@ g.stateGroup line {
}
.node circle.state-end {
fill: ${options.innerEndBackground};
fill: ${options.stateBkg || options.mainBkg};
stroke: ${options.background};
stroke-width: 1.5
}
.end-state-inner {
fill: ${options.compositeBackground || options.background};
// stroke: ${options.background};
stroke: ${options.background};
stroke-width: 1.5
}
@@ -116,6 +116,13 @@ g.stateGroup line {
stroke: ${options.stateBorder || options.nodeBorder};
stroke-width: 1px;
}
.node-rect-neo {
fill: ${options.stateBkg || options.mainBkg};
stroke: none;
stroke-width: 1px;
}
.node polygon {
fill: ${options.mainBkg};
stroke: ${options.stateBorder || options.nodeBorder};;
@@ -152,8 +159,7 @@ g.stateGroup line {
fill: ${options.compositeBackground || options.background};
}
.statediagram-cluster.statediagram-cluster-alt .inner {
fill: ${options.altBackground ? options.altBackground : '#efefef'};
fill: ${options.altBackground ? options.altBackground : '#f0f0f0'};
}
.statediagram-cluster .inner {

2
packages/mermaid/src/rendering-util/rendering-elements/clusters.js
View File

@@ -226,7 +226,7 @@ const roundedWithTitle = (parent, node) => {
const y = node.y - node.height / 2 - halfPadding;
const innerY = node.y - node.height / 2 - halfPadding + bbox.height + 2;
const height = node.height + padding;
const innerHeight = node.height + padding - bbox.height - 2;
const innerHeight = node.height + padding - bbox.height - 6;
const look = siteConfig.look;
// add the rect

22
packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts
View File

@@ -45,26 +45,16 @@ export const drawRect = async (parent: SVGAElement, node: Node, options: RectOpt
rect = shapeSvg.insert(() => roughNode, ':first-child');
rect.attr('class', 'basic label-container').attr('style', cssStyles);
} else if (node.look === 'neo') {
// TODO: Take theme and look into account
rect = shapeSvg.insert('rect', ':first-child');
rect
.attr('class', 'basic label-container state-shadow-neo')
.attr('style', cssStyles)
.attr('rx', rx)
.attr('data-id', 'abc')
.attr('data-et', 'node')
.attr('ry', ry)
.attr('x', x)
.attr('y', y)
.attr('width', totalWidth)
.attr('height', totalHeight);
} else {
rect = shapeSvg.insert('rect', ':first-child');
let rectClass = 'basic label-container';
if (node.look === 'neo') {
rectClass += ' state-shadow-neo';
}
rect
.attr('class', 'basic label-container')
.attr('class', rectClass)
.attr('style', cssStyles)
.attr('rx', rx)
.attr('data-id', 'abc')

8
packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts
View File

@@ -6,11 +6,11 @@ export const roundedRect = async (parent: SVGAElement, node: Node) => {
const { look } = getConfig();
node.look = look;
const options = {
rx: node.look === 'neo' ? 1 : 5,
ry: node.look === 'neo' ? 1 : 5,
rx: node.look === 'neo' ? 3 : 5,
ry: node.look === 'neo' ? 3 : 5,
labelPaddingX: node.padding * 2,
labelPaddingY: node.padding * 1,
labelPaddingX: node.look === 'neo' ? node.padding * 2 : node.padding,
labelPaddingY: node.look === 'neo' ? node.padding : node.padding,
classes: '',
} as RectOptions;

4
packages/mermaid/src/rendering-util/rendering-elements/shapes/state.ts
View File

@@ -7,8 +7,8 @@ export const state = async (parent: SVGAElement, node: Node) => {
node.look = look;
const options = {
rx: node.look === 'neo' ? 2 : 5,
ry: node.look === 'neo' ? 2 : 5,
rx: node.look === 'neo' ? 3 : 5,
ry: node.look === 'neo' ? 3 : 5,
classes: 'flowchart-node',
};
return drawRect(parent, node, options);

2
packages/mermaid/src/themes/theme-neo.js
View File

@@ -125,7 +125,7 @@ class Theme {
this.stateBkg = this.stateBkg || this.mainBkg;
this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;
this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;
this.altBackground = this.altBackground || this.tertiaryColor;
this.altBackground = this.altBackground || '#f0f0f0';
this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
this.compositeBorder = this.compositeBorder || this.nodeBorder;
this.innerEndBackground = this.nodeBorder;