palette: add mermaid css file config

src/resources/themes/v_moonlight/v_moonlight.palette

@@ -6,7 +6,8 @@ qss_file=v_moonlight.qss
 mdhl_file=v_moonlight.mdhl
 css_file=v_moonlight.css
 codeblock_css_file=v_moonlight_codeblock.css
-version=3
+mermaid_css_file=v_moonlight_mermaid.css
+version=4
 
 ; This mapping will be used to translate colors when the content of HTML is copied
 ; without background. You could just specify the foreground colors mapping here.

src/resources/themes/v_pure/v_pure.palette

@@ -6,7 +6,8 @@ qss_file=v_pure.qss
 mdhl_file=v_pure.mdhl
 css_file=v_pure.css
 codeblock_css_file=v_pure_codeblock.css
-version=3
+mermaid_css_file=v_pure_mermaid.css
+version=4
 
 [phony]
 ; Abstract color attributes.

src/resources/themes/v_white/v_white.palette

@@ -6,7 +6,8 @@ qss_file=v_white.qss
 mdhl_file=v_white.mdhl
 css_file=v_white.css
 codeblock_css_file=v_white_codeblock.css
-version=3
+mermaid_css_file=v_white_mermaid.css
+version=4
 
 [phony]
 ; Abstract color attributes.

src/resources/themes/v_white/v_white_mermaid.css

@@ -2,84 +2,84 @@
 /* Sequence Diagram variables */
 /* Gantt chart variables */
 .mermaid .label {
-  color: #323D47;
+  color: #333;
 }
 .node rect,
 .node circle,
 .node ellipse,
 .node polygon {
-  fill: #BDD5EA;
+  fill: #ECECFF;
-  stroke: #81B1DB;
+  stroke: #CCCCFF;
   stroke-width: 1px;
 }
 .edgePath .path {
-  stroke: lightgrey;
+  stroke: #333333;
 }
 .edgeLabel {
   background-color: #e8e8e8;
 }
 .cluster rect {
-  fill: #6D6D65 !important;
+  fill: #ffffde !important;
   rx: 4 !important;
-  stroke: rgba(255, 255, 255, 0.25) !important;
+  stroke: #aaaa33 !important;
   stroke-width: 1px !important;
 }
 .cluster text {
-  fill: #F9FFFE;
+  fill: #333;
 }
 .actor {
-  stroke: #81B1DB;
+  stroke: #CCCCFF;
-  fill: #BDD5EA;
+  fill: #ECECFF;
 }
 text.actor {
   fill: black;
   stroke: none;
 }
 .actor-line {
-  stroke: lightgrey;
+  stroke: grey;
 }
 .messageLine0 {
   stroke-width: 1.5;
   stroke-dasharray: "2 2";
   marker-end: "url(#arrowhead)";
-  stroke: lightgrey;
+  stroke: #333;
 }
 .messageLine1 {
   stroke-width: 1.5;
   stroke-dasharray: "2 2";
-  stroke: lightgrey;
+  stroke: #333;
 }
 #arrowhead {
-  fill: lightgrey !important;
+  fill: #333;
 }
 #crosshead path {
-  fill: lightgrey !important;
+  fill: #333 !important;
-  stroke: lightgrey !important;
+  stroke: #333 !important;
 }
 .messageText {
-  fill: lightgrey;
+  fill: #333;
   stroke: none;
 }
 .labelBox {
-  stroke: #81B1DB;
+  stroke: #CCCCFF;
-  fill: #BDD5EA;
+  fill: #ECECFF;
 }
 .labelText {
-  fill: #323D47;
+  fill: black;
   stroke: none;
 }
 .loopText {
-  fill: lightgrey;
+  fill: black;
   stroke: none;
 }
 .loopLine {
   stroke-width: 2;
   stroke-dasharray: "2 2";
   marker-end: "url(#arrowhead)";
-  stroke: #81B1DB;
+  stroke: #CCCCFF;
 }
 .note {
-  stroke: rgba(255, 255, 255, 0.25);
+  stroke: #aaaa33;
   fill: #fff5ad;
 }
 .noteText {
@@ -94,10 +94,10 @@ text.actor {
   opacity: 0.2;
 }
 .section0 {
-  fill: rgba(255, 255, 255, 0.3);
+  fill: rgba(102, 102, 255, 0.49);
 }
 .section2 {
-  fill: #EAE8B9;
+  fill: #fff400;
 }
 .section1,
 .section3 {
@@ -105,16 +105,16 @@ text.actor {
   opacity: 0.2;
 }
 .sectionTitle0 {
-  fill: #F9FFFE;
+  fill: #333;
 }
 .sectionTitle1 {
-  fill: #F9FFFE;
+  fill: #333;
 }
 .sectionTitle2 {
-  fill: #F9FFFE;
+  fill: #333;
 }
 .sectionTitle3 {
-  fill: #F9FFFE;
+  fill: #333;
 }
 .sectionTitle {
   text-anchor: start;
@@ -123,39 +123,35 @@ text.actor {
 }
 /* Grid and axis */
 .grid .tick {
-  stroke: rgba(255, 255, 255, 0.3);
+  stroke: lightgrey;
   opacity: 0.3;
   shape-rendering: crispEdges;
 }
-.grid .tick text {
-  fill: lightgrey;
-  opacity: 0.5;
-}
 .grid path {
   stroke-width: 0;
 }
 /* Today line */
 .today {
   fill: none;
-  stroke: #DB5757;
+  stroke: red;
   stroke-width: 2px;
 }
 /* Task styling */
 /* Default task */
 .task {
-  stroke-width: 1;
+  stroke-width: 2;
 }
 .taskText {
   text-anchor: middle;
   font-size: 11px;
 }
 .taskTextOutsideRight {
-  fill: #323D47;
+  fill: black;
   text-anchor: start;
   font-size: 11px;
 }
 .taskTextOutsideLeft {
-  fill: #323D47;
+  fill: black;
   text-anchor: end;
   font-size: 11px;
 }
@@ -164,74 +160,76 @@ text.actor {
 .taskText1,
 .taskText2,
 .taskText3 {
-  fill: #323D47;
+  fill: white;
 }
 .task0,
 .task1,
 .task2,
 .task3 {
-  fill: #BDD5EA;
+  fill: #8a90dd;
-  stroke: rgba(255, 255, 255, 0.5);
+  stroke: #534fbc;
 }
 .taskTextOutside0,
 .taskTextOutside2 {
-  fill: lightgrey;
+  fill: black;
 }
 .taskTextOutside1,
 .taskTextOutside3 {
-  fill: lightgrey;
+  fill: black;
 }
 /* Active task */
 .active0,
 .active1,
 .active2,
 .active3 {
-  fill: #81B1DB;
+  fill: #bfc7ff;
-  stroke: rgba(255, 255, 255, 0.5);
+  stroke: #534fbc;
 }
 .activeText0,
 .activeText1,
 .activeText2,
 .activeText3 {
-  fill: #323D47 !important;
+  fill: black !important;
 }
 /* Completed task */
 .done0,
 .done1,
 .done2,
 .done3 {
+  stroke: grey;
   fill: lightgrey;
+  stroke-width: 2;
 }
 .doneText0,
 .doneText1,
 .doneText2,
 .doneText3 {
-  fill: #323D47 !important;
+  fill: black !important;
 }
 /* Tasks on the critical line */
 .crit0,
 .crit1,
 .crit2,
 .crit3 {
-  stroke: #E83737;
+  stroke: #ff8888;
-  fill: #E83737;
+  fill: red;
   stroke-width: 2;
 }
 .activeCrit0,
 .activeCrit1,
 .activeCrit2,
 .activeCrit3 {
-  stroke: #E83737;
+  stroke: #ff8888;
-  fill: #81B1DB;
+  fill: #bfc7ff;
   stroke-width: 2;
 }
 .doneCrit0,
 .doneCrit1,
 .doneCrit2,
 .doneCrit3 {
-  stroke: #E83737;
+  stroke: #ff8888;
   fill: lightgrey;
-  stroke-width: 1;
+  stroke-width: 2;
   cursor: pointer;
   shape-rendering: crispEdges;
 }
@@ -239,18 +237,18 @@ text.actor {
 .doneCritText1,
 .doneCritText2,
 .doneCritText3 {
-  fill: lightgrey !important;
+  fill: black !important;
 }
 .activeCritText0,
 .activeCritText1,
 .activeCritText2,
 .activeCritText3 {
-  fill: #323D47 !important;
+  fill: black !important;
 }
 .titleText {
   text-anchor: middle;
   font-size: 18px;
-  fill: lightgrey;
+  fill: black;
 }
 /*
 
@@ -267,8 +265,8 @@ div.mermaidTooltip {
   padding: 2px;
   font-family: 'trebuchet ms', verdana, arial;
   font-size: 12px;
-  background: #6D6D65;
+  background: #ffffde;
-  border: 1px solid rgba(255, 255, 255, 0.25);
+  border: 1px solid #aaaa33;
   border-radius: 2px;
   pointer-events: none;
   z-index: 100;

src/utils/vutils.cpp

@@ -646,7 +646,7 @@ QString VUtils::generateHtmlTemplate(const QString &p_template,
     }
 
     if (g_config->getEnableMermaid()) {
-        extraFile += "<link rel=\"stylesheet\" type=\"text/css\" href=\"qrc" + VNote::c_mermaidCssFile + "\"/>\n" +
+        extraFile += "<link rel=\"stylesheet\" type=\"text/css\" href=\"" + g_config->getMermaidCssStyleUrl() + "\"/>\n" +
                      "<script src=\"qrc" + VNote::c_mermaidApiJsFile + "\"></script>\n" +
                      "<script>var VEnableMermaid = true;</script>\n";
     }

src/vconfigmanager.cpp

@@ -930,6 +930,29 @@ QString VConfigManager::getCodeBlockCssStyleUrl(const QString &p_style) const
     return cssPath;
 }
 
+QString VConfigManager::getMermaidCssStyleUrl() const
+{
+    Q_ASSERT(!m_themes.isEmpty());
+    Q_ASSERT(!m_theme.isEmpty());
+
+    static QString mermaidCssPath;
+
+    if (mermaidCssPath.isEmpty()) {
+        VPaletteMetaData data = VPalette::getPaletteMetaData(getThemeFile());
+        mermaidCssPath = data.m_mermaidCssFile;
+        if (mermaidCssPath.startsWith(":")) {
+            mermaidCssPath = "qrc" + mermaidCssPath;
+        } else {
+            QUrl cssUrl = QUrl::fromLocalFile(mermaidCssPath);
+            mermaidCssPath = cssUrl.toString();
+        }
+
+        qDebug() << "use mermaid css style file" << mermaidCssPath;
+    }
+
+    return mermaidCssPath;
+}
+
 QString VConfigManager::getEditorStyleFile() const
 {
     Q_ASSERT(!m_themes.isEmpty());

src/vconfigmanager.h

@@ -123,6 +123,8 @@ public:
 
     QString getCodeBlockCssStyleUrl(const QString &p_style) const;
 
+    QString getMermaidCssStyleUrl() const;
+
     const QString &getEditorStyle() const;
     void setEditorStyle(const QString &p_style);
 

src/vnote.cpp

@@ -45,8 +45,6 @@ const QString VNote::c_showdownExtraFile = ":/utils/showdown/showdown.min.js";
 const QString VNote::c_showdownAnchorExtraFile = ":/utils/showdown/showdown-headinganchor.js";
 
 const QString VNote::c_mermaidApiJsFile = ":/utils/mermaid/mermaidAPI.min.js";
-const QString VNote::c_mermaidCssFile = ":/utils/mermaid/mermaid.css";
-const QString VNote::c_mermaidDarkCssFile = ":/utils/mermaid/mermaid.dark.css";
 const QString VNote::c_mermaidForestCssFile = ":/utils/mermaid/mermaid.forest.css";
 
 const QString VNote::c_flowchartJsFile = ":/utils/flowchart.js/flowchart.min.js";

src/vnote.h

@@ -58,8 +58,6 @@ public:
 
     // Mermaid
     static const QString c_mermaidApiJsFile;
-    static const QString c_mermaidCssFile;
-    static const QString c_mermaidDarkCssFile;
     static const QString c_mermaidForestCssFile;
 
     // flowchart.js

src/vnote.qrc

@@ -59,9 +59,6 @@
         <file>utils/markdown-it/markdown-it.min.js</file>
         <file>utils/markdown-it/markdown-it-headinganchor.js</file>
         <file>utils/markdown-it/markdown-it-task-lists.min.js</file>
-        <file>utils/mermaid/mermaid.css</file>
-        <file>utils/mermaid/mermaid.dark.css</file>
-        <file>utils/mermaid/mermaid.forest.css</file>
         <file>utils/mermaid/mermaidAPI.min.js</file>
         <file>resources/icons/close_red.svg</file>
         <file>resources/docs/shortcuts_en.md</file>
@@ -240,5 +237,8 @@
         <file>resources/icons/fullscreen.svg</file>
         <file>resources/icons/menubar.svg</file>
         <file>resources/export_template.html</file>
+        <file>resources/themes/v_pure/v_pure_mermaid.css</file>
+        <file>resources/themes/v_white/v_white_mermaid.css</file>
+        <file>resources/themes/v_moonlight/v_moonlight_mermaid.css</file>
     </qresource>
 </RCC>

src/vpalette.cpp

@@ -224,6 +224,11 @@ VPaletteMetaData VPalette::getPaletteMetaData(const QString &p_paletteFile)
         data.m_codeBlockCssFile = dir.filePath(val);
     }
 
+    val = settings.value("mermaid_css_file").toString();
+    if (!val.isEmpty()) {
+        data.m_mermaidCssFile = dir.filePath(val);
+    }
+
     QStringList mapping = settings.value("css_color_mapping").toStringList();
     if (!mapping.isEmpty()) {
         for (auto const & m : mapping) {

src/vpalette.h

@@ -16,6 +16,7 @@ struct VPaletteMetaData
     QString m_mdhlFile;
     QString m_cssFile;
     QString m_codeBlockCssFile;
+    QString m_mermaidCssFile;
 
     // Color mapping when copied.
     // All lower-case.
@@ -23,12 +24,14 @@ struct VPaletteMetaData
 
     QString toString() const
     {
-        return QString("palette metadata version=%1 qss=%2 mdhl=%3 css=%4 codeBlockCss=%5 colorMappingSize=%6")
+        return QString("palette metadata version=%1 qss=%2 mdhl=%3 css=%4 "
+                       "codeBlockCss=%5 mermaidCss=%6 colorMappingSize=%7")
                       .arg(m_version)
                       .arg(m_qssFile)
                       .arg(m_mdhlFile)
                       .arg(m_cssFile)
                       .arg(m_codeBlockCssFile)
+                      .arg(m_mermaidCssFile)
                       .arg(m_colorMapping.size());
     }
 };