Skip to content

Commit 7dd5c0d

Browse files
NeVeSplNeVeSpl
committed
#9 - Does not support Dark Mode
1 parent 07fee94 commit 7dd5c0d

File tree

4 files changed

+65
-13
lines changed

4 files changed

+65
-13
lines changed

‎MermaidEditor/Configuration/Configuration.cs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,6 @@ internal class Configuration
44
{
55
public string SelectedExt { get; set; } = "png";
66
public double PreviewWidth { get; set; } = 666;
7+
public string Theme { get; set; } = "default";
78
}
89
}

‎MermaidEditor/LivePreview/LivePreviewMargin.xaml‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,34 +19,44 @@
1919
<ColumnDefinition Width="5"/>
2020
<ColumnDefinition x:Name="contentColumn" MinWidth="25" Width="{Binding PreviewWidth, Mode=TwoWay, Delay=1000, Converter={StaticResource GridLengthConverter}}"/>
2121
</Grid.ColumnDefinitions>
22+
2223
<GridSplitter Grid.Column="1" ResizeDirection="Columns" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Width="5" DragDelta="GridSplitter_DragDelta" DragCompleted="GridSplitter_DragCompleted" />
23-
<DockPanel x:Name="DockWrapper" Grid.Column="2" LastChildFill="True">
24-
<Grid DockPanel.Dock="Top">
24+
25+
<DockPanel x:Name="DockWrapper" Grid.Column="2" LastChildFill="True" Background="#E8E8EC">
26+
<Grid DockPanel.Dock="Top" Margin="0 1 0 2">
2527
<Grid.ColumnDefinitions>
2628
<ColumnDefinition/>
2729
<ColumnDefinition Width="0.3*" MinWidth="30"/>
30+
<ColumnDefinition Width="0.3*" MinWidth="30"/>
2831
</Grid.ColumnDefinitions>
2932
<Grid.RowDefinitions>
3033
<RowDefinition/>
3134
<RowDefinition/>
3235
</Grid.RowDefinitions>
36+
37+
<Button Content="Save rendered diagram" ToolTip="Save rendered diagram file next to *.mmd file" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="1" Click="SaveAsPNG_Button_Click" />
3338

34-
<Button Content="Save rendered diagram file next to *.mmd file" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="1" Click="SaveAsPNG_Button_Click" />
3539
<ComboBox Grid.Row="0" Grid.Column="1" Margin="7 0 0 0" SelectedValuePath="Content" SelectedValue="{Binding SelectedExt, Mode=TwoWay}">
3640
<ComboBoxItem Content="svg" />
3741
<ComboBoxItem Content="png" />
3842
</ComboBox>
43+
44+
<ComboBox Grid.Row="0" Grid.Column="2" Margin="7 0 0 0" SelectedValuePath="Content" SelectedValue="{Binding SelectedTheme, Mode=TwoWay}">
45+
<ComboBoxItem Content="default" />
46+
<ComboBoxItem Content="dark" />
47+
<ComboBoxItem Content="neutral" />
48+
<ComboBoxItem Content="forest" />
49+
</ComboBox>
3950
</Grid>
51+
4052
<TextBlock TextWrapping="Wrap" x:Name="cMsgWebView2NotInstalled" Visibility="Collapsed" DockPanel.Dock="Top">
4153
<Run>To see preview you need to have installed WebView2 Runtime from </Run>
4254
<Hyperlink NavigateUri="https://developer.microsoft.com/en-us/microsoft-edge/webview2/" RequestNavigate="Hyperlink_RequestNavigate">
4355
https://developer.microsoft.com/en-us/microsoft-edge/webview2/
4456
</Hyperlink>
45-
</TextBlock>
46-
47-
57+
</TextBlock>
4858

49-
<wv2:WebView2 Name="cWebView" Panel.ZIndex="2" Margin="0 7 0 0"/>
59+
<wv2:WebView2 Name="cWebView" Panel.ZIndex="2" Margin="0 0 0 0"/>
5060
</DockPanel>
5161
</Grid>
5262
</UserControl>

‎MermaidEditor/LivePreview/LivePreviewMargin.xaml.cs‎

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ public partial class LivePreviewMargin : UserControl, IWpfTextViewMargin, INotif
2525

2626
private string selectedExt = "png";
2727
public double previewWidth = 300;
28+
private string selectedTheme = "default";
2829

2930
public string SelectedExt
3031
{
@@ -59,6 +60,23 @@ public double PreviewWidth
5960
}
6061
}
6162
}
63+
public string SelectedTheme
64+
{
65+
get
66+
{
67+
return selectedTheme;
68+
}
69+
set
70+
{
71+
if (selectedTheme != value)
72+
{
73+
selectedTheme = value;
74+
OnPropertyChanged();
75+
TextBuffer_PostChanged(null, null);
76+
SaveConfiguration();
77+
}
78+
}
79+
}
6280

6381

6482
public LivePreviewMargin(IWpfTextView textView) : this(textView.TextSnapshot.GetText())
@@ -72,9 +90,9 @@ public LivePreviewMargin(string startupText) : this()
7290
}
7391
public LivePreviewMargin()
7492
{
75-
InitializeComponent();
76-
this.Loaded += LivePreviewMargin_Loaded;
7793
LoadConfiguration();
94+
InitializeComponent();
95+
this.Loaded += LivePreviewMargin_Loaded;
7896
this.DataContext = this;
7997
}
8098

@@ -95,11 +113,13 @@ private void LoadConfiguration()
95113
ConfigurationManager.Load();
96114
selectedExt = ConfigurationManager.Configuration.SelectedExt;
97115
previewWidth = ConfigurationManager.Configuration.PreviewWidth;
116+
selectedTheme = ConfigurationManager.Configuration.Theme;
98117
}
99118
private void SaveConfiguration()
100119
{
101120
ConfigurationManager.Configuration.SelectedExt = SelectedExt;
102121
ConfigurationManager.Configuration.PreviewWidth = PreviewWidth;
122+
ConfigurationManager.Configuration.Theme = selectedTheme;
103123
ConfigurationManager.Save();
104124
}
105125

@@ -156,7 +176,7 @@ private void UpdateWebView(string text)
156176
if (cWebView.IsWebViewAvailable())
157177
{
158178
var enc = JsonEncodedText.Encode(text);
159-
cWebView.ExecuteScriptAsync($"updateGraph(\"{enc}\", \"{SelectedExt}\");").Forget();
179+
cWebView.ExecuteScriptAsync($"updateGraph(\"{enc}\", \"{SelectedExt}\", \"{SelectedTheme}\");").Forget();
160180
}
161181
}
162182

‎MermaidEditor/LivePreview/index.html‎

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,20 @@
5959
max-width: 100% !important;
6060
max-height: 100% !important;
6161
}
62+
63+
.theme-default
64+
{
65+
background-color : #fff;
66+
}
67+
.theme-dark {
68+
background-color: #2A303C;
69+
}
70+
.theme-neutral {
71+
background-color: #FDFDFD;
72+
}
73+
.theme-forest {
74+
background-color: #FAF7F5;
75+
}
6276
</style>
6377
</head>
6478
<body>
@@ -69,7 +83,7 @@
6983
</div>
7084

7185
<div id="ui">
72-
<textarea rows="10" cols="100" id="myCode" style="display : none">
86+
<textarea rows="10" cols="100" id="myCode" style="display : none" >
7387
graph TD
7488
A[Client] --> B[Load Balancer]
7589
B --> C[Server01]
@@ -90,21 +104,26 @@
90104
<canvas></canvas>
91105
</div>
92106
</div>
107+
93108
<!--<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.js"></script>-->
94109
<!--<script src="mermaid.js"></script>-->
95110
<script type="module">
96111
/*import mermaid from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm'*/
97112
import mermaid from 'http://mermaideditor.example/mermaid.11.2.1/mermaid.esm.mjs'
98-
mermaid.initialize({ startOnLoad: false });
113+
mermaid.initialize({ startOnLoad: false, theme: 'default'});
99114

100115
const sendMessage = function (msg)
101116
{
102117
window.chrome.webview.postMessage(msg);
103118
}
104119

105-
export async function updateGraph(graphDefinition, imageExt) {
120+
export async function updateGraph(graphDefinition, imageExt, theme) {
106121
console.log("updateGraph invoked()")
107122

123+
124+
mermaid.initialize({ startOnLoad: false, theme: theme});
125+
document.documentElement.setAttribute("class", `theme-${theme}`);
126+
108127
const svgContainerElement = document.getElementById("svgContainer");
109128
const pngContainerElement = document.getElementById("pngContainer");
110129
svgContainerElement.style.display = imageExt == "png" ? "none" : "block";
@@ -118,6 +137,8 @@
118137
const myGraph = document.querySelector("#mermaidGraph");
119138
const myErrors = document.querySelector("#mermaidErrors");
120139

140+
//mermaid.mermaidAPI.th
141+
121142
try
122143
{
123144
console.log("mermaid.parse");

0 commit comments

Comments
 (0)