Add setting for sequence diagram theme (#1628) (#1708)

* Add setting for sequence diagram theme (#1628)

* Review fixes

docs/PREFERENCES.md

@@ -52,6 +52,7 @@ Preferences can be controlled and modified in the settings window or via the `pr
 | frontmatterType     | String  | `-`     | The frontmatter type: `-` (YAML), `+` (TOML), `;` (JSON) or `{` (JSON)                                                               |
 | superSubScript      | Boolean | `false` | Enable pandoc's markdown extension superscript and subscript.                                                                        |
 | footnote            | Boolean | `false` | Enable pandoc's footnote markdown extension                                                                                          |
+| sequenceTheme       | String  | `hand`  | Change the theme of [js-sequence-diagrams](https://bramp.github.io/js-sequence-diagrams/)                                                                                         |
 
 #### Theme
 

src/main/preferences/schema.json

@@ -257,6 +257,13 @@
     "type": "boolean",
     "default": false
   },
+  "sequenceTheme": {
+    "description": "Markdown--Sequence diagram theme",
+    "enum": [
+      "hand",
+      "simple"
+    ]
+  },
 
   "theme": {
     "description": "Theme--Select the theme used in Mark Text",

src/muya/lib/utils/exportHtml.js

@@ -71,7 +71,7 @@ class ExportHtml {
       preParent.replaceWith(diagramContainer)
       const options = {}
       if (functionType === 'sequence') {
-        Object.assign(options, { theme: 'hand' })
+        Object.assign(options, { theme: this.muya.options.sequenceTheme })
       } else if (functionType === 'vega-lite') {
         Object.assign(options, {
           actions: false,

src/renderer/components/editorWithTabs/editor.vue

@@ -151,6 +151,7 @@ export default {
       imageInsertAction: state => state.preferences.imageInsertAction,
       imageFolderPath: state => state.preferences.imageFolderPath,
       theme: state => state.preferences.theme,
+      sequenceTheme: state => state.preferences.sequenceTheme,
       hideScrollbar: state => state.preferences.hideScrollbar,
       spellcheckerEnabled: state => state.preferences.spellcheckerEnabled,
       spellcheckerIsHunspell: state => state.preferences.spellcheckerIsHunspell,
@@ -235,6 +236,12 @@ export default {
         }
       }
     },
+    sequenceTheme: function (value, oldValue) {
+      const { editor } = this
+      if (value !== oldValue && editor) {
+        editor.setOptions({ sequenceTheme: value }, true)
+      }
+    },
     listIndentation: function (value, oldValue) {
       const { editor } = this
       if (value !== oldValue && editor) {
@@ -468,6 +475,7 @@ export default {
         hideQuickInsertHint,
         editorLineWidth,
         theme,
+        sequenceTheme,
         spellcheckerEnabled,
         hideLinkPopup
       } = this
@@ -512,6 +520,7 @@ export default {
         footnote,
         hideQuickInsertHint,
         hideLinkPopup,
+        sequenceTheme,
         spellcheckEnabled: spellcheckerEnabled,
         imageAction: this.imageAction.bind(this),
         imagePathPicker: this.imagePathPicker.bind(this),

src/renderer/prefComponents/markdown/config.js

@@ -72,3 +72,11 @@ export const frontmatterTypeOptions = [{
   label: 'JSON ({})',
   value: '{'
 }]
+
+export const sequenceThemeOptions = [{
+  label: 'Hand drawn',
+  value: 'hand'
+}, {
+  label: 'Simple',
+  value: 'simple'
+}]

src/renderer/prefComponents/markdown/index.vue

@@ -60,6 +60,15 @@
       :onChange="value => onSelectChange('footnote', value)"
       more="https://pandoc.org/MANUAL.html#footnotes"
     ></bool>
+    <separator></separator>
+    <h5>Diagram theme</h5>
+    <cus-select
+      description="Sequence diagram theme"
+      :value="sequenceTheme"
+      :options="sequenceThemeOptions"
+      :onChange="value => onSelectChange('sequenceTheme', value)"
+      more="https://bramp.github.io/js-sequence-diagrams/"
+    ></cus-select>
   </div>
 </template>
 
@@ -74,7 +83,8 @@ import {
   preferHeadingStyleOptions,
   tabSizeOptions,
   listIndentationOptions,
-  frontmatterTypeOptions
+  frontmatterTypeOptions,
+  sequenceThemeOptions
 } from './config'
 
 export default {
@@ -90,6 +100,7 @@ export default {
     this.tabSizeOptions = tabSizeOptions
     this.listIndentationOptions = listIndentationOptions
     this.frontmatterTypeOptions = frontmatterTypeOptions
+    this.sequenceThemeOptions = sequenceThemeOptions
     return {}
   },
   computed: {
@@ -102,7 +113,8 @@ export default {
       listIndentation: state => state.preferences.listIndentation,
       frontmatterType: state => state.preferences.frontmatterType,
       superSubScript: state => state.preferences.superSubScript,
-      footnote: state => state.preferences.footnote
+      footnote: state => state.preferences.footnote,
+      sequenceTheme: state => state.preferences.sequenceTheme
     })
   },
   methods: {

src/renderer/store/preferences.js

@@ -45,6 +45,7 @@ const state = {
   frontmatterType: '-',
   superSubScript: false,
   footnote: false,
+  sequenceTheme: 'hand',
 
   theme: 'light',
   autoSwitchTheme: 2,

static/preference.json

@@ -41,6 +41,7 @@
   "frontmatterType": "-",
   "superSubScript": false,
   "footnote": false,
+  "sequenceTheme": "hand",
 
   "theme": "light",
   "autoSwitchTheme": 2,