marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-08 14:54:08 +01:00
Code Issues Packages Projects Releases Wiki Activity

MC-1765: Added specific end-state class

Browse Source
This commit is contained in:
Per Brolin
2024-06-19 11:52:28 +02:00
parent 31936cf6cb
commit 96c8e544ec
4 changed files with 16 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
docs/neo-style-to-do
View File

@@ -11,5 +11,6 @@
11. Gradient: Fix proper color from blue to red. Do last (render.ts) 11. Gradient: Fix proper color from blue to red. Do last (render.ts)
12. Rx,Ry of rects in neo is not applied correct on rects except composite states 12. Rx,Ry of rects in neo is not applied correct on rects except composite states
13. Stop state shall be filled and just outer circle shall have 13. Stop state shall be filled and no drop-shadow on inner circle: Status: Fixed
14. No curve on line under title in composite states: Status fixed 14. No curve on line under title in composite states: Status fixed
15. When this.useGradient = false the color of the composite states are not correct

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

@@ -103,12 +103,19 @@ g.stateGroup line {
.node circle.state-end { .node circle.state-end {
fill: ${options.stateBkg || options.mainBkg}; fill: ${options.stateBkg || options.mainBkg};
stroke: ${options.background}; stroke: ${options.background};
stroke-width: 1.5 stroke-width: 1.5;
} }
[data-look="neo"].node circle.state-end {
filter: none;
stroke:${options.background};
fill: ${options.lineColor};
}
.end-state-inner { .end-state-inner {
fill: ${options.compositeBackground || options.background}; fill: ${options.compositeBackground || options.background};
stroke: ${options.background}; stroke: ${options.background};
stroke-width: 1.5 stroke-width: 1.5;
} }
.node rect { .node rect {

6
packages/mermaid/src/styles.ts
View File

@@ -81,27 +81,23 @@ const getStyles = (
} }
[data-look="neo"].node rect, [data-look="neo"].node circle, [data-look="neo"].node polygon , [data-look="neo"].node path { [data-look="neo"].node rect, [data-look="neo"].node polygon , [data-look="neo"].node path {
stroke: ${options.useGradient ? 'url(' + svgId + '-gradient)' : options.nodeBorder}; stroke: ${options.useGradient ? 'url(' + svgId + '-gradient)' : options.nodeBorder};
filter: ${options.dropShadow}; filter: ${options.dropShadow};
} }
[data-look="neo"].node circle{ [data-look="neo"].node circle{
stroke: $(options.nodeBorder);
stroke: ${options.useGradient ? 'url(' + svgId + '-gradient)' : options.nodeBorder}; stroke: ${options.useGradient ? 'url(' + svgId + '-gradient)' : options.nodeBorder};
filter: ${options.dropShadow}; filter: ${options.dropShadow};
} }
[data-look="neo"].node circle .state-start{ [data-look="neo"].node circle .state-start{
fill: #000000; fill: #000000;
} }
[data-look="neo"].statediagram-cluster rect { [data-look="neo"].statediagram-cluster rect {
fill: ${options.compositeTitleBackground}; fill: ${options.compositeTitleBackground};
stroke: ${options.useGradient ? 'url(' + svgId + '-gradient)' : options.nodeBorder}; stroke: ${options.useGradient ? 'url(' + svgId + '-gradient)' : options.nodeBorder};
//stroke: none;
stroke-width: 1px; stroke-width: 1px;
} }

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

@@ -28,11 +28,11 @@ class Theme {
this.fontSize = '10px'; this.fontSize = '10px';
// Neo-specific // Neo-specific
this.nodeBorder = 'none'; this.nodeBorder = '#000000';
this.stateBorder = 'none'; this.stateBorder = '#000000';
this.useGradient = true; this.useGradient = true;
this.gradientStart = '#eb0042'; this.gradientStart = '#0042eb';
this.gradientStop = '#0042eb'; this.gradientStop = '#eb0042';
this.dropShadow = 'drop-shadow( 1px 2px 2px rgba(185,185,185,1))'; this.dropShadow = 'drop-shadow( 1px 2px 2px rgba(185,185,185,1))';
this.tertiaryColor = '#ffffff'; this.tertiaryColor = '#ffffff';
} }