diff --git a/CHANGELOG.md b/CHANGELOG.md index a757afe..5bbdc07 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,11 @@ # Change Log +## 0.1.0 + +* Support metmaid preview on Mac. + * In order to implement this function, I disabled the function of automatically selecting styles according to theme. +* Refactoring. +* Change configuration format. + ## 0.0.1 -- Initial release \ No newline at end of file +* Initial release diff --git a/README.md b/README.md index 8e81e65..7b057c9 100644 --- a/README.md +++ b/README.md @@ -10,55 +10,72 @@ Preview Sequence Diagrams (previewseqdiag-vscode) is an extension for vscode spe * Support to preview of Mermaid format. * Support to preview of MscGen, MsGenny format. -* Support to automatically change the style according to the theme of VSCode. (Only Mermaid) ## Release Notes [CHANGELOG.md](CHANGELOG.md) +### 0.1.0 + +* Support mermaid previewing on Mac. + * In order to implement this function, I disabled the function of automatically selecting styles according to theme. +* Fixed configuration intellisense problem +* Change configuration format. (Backward compatible) see -> [Settings](#settings) +* Refactoring. + ### 0.0.1 -Initial release. +* Initial release. ## Known Issues -* In the current release, I only consider the Windows platform and develop it.　So, There should be something wrong. * SVG or PNG downloading is not supported. If you want to download by SVG or PNG, It is good to use lang's official websites. see, [Appendix](#appendix) +* In the preview of Mermaid's Dark and Neutral style, some displays become black. ## Requirements -### Dependencies - -* npm rx -* npm mermaid -* npm mscgenjs / mscgenjs-inpage -* vscode extention mscgenjs.vscode-mscgen - -## Extension Settings +## Settings -This extension contributes the following settings: +This extension contributes the following User Settings: * `previewSeqDiag.mermaid.fixedStyle`: Setting to force usage for Mermaid's preview's rendering style. - * Set `dark`, `forest`, `""` or `null` (= Switch according to the theme of VSCode) + * Set `dark`, `forest` or `neutral` (default is `forest`, is force recommended. The dark or neutral theme of Mermaid 7.0.3 does incomplete rendering.) * `previewSeqDiag.mermaid.fixedBackgroundColor`: Setting to force usage for Mermaid's preview's background colo. - * Set `#rrggbb` e.g. #ffffff, `transparent` or `null` (= Depends on VSCode's Theme) + * Set `#rrggbb` e.g. #ffffff, `transparent` (default is `#fafaf6`) + * `previewSeqDiag.mscgen.fixedNamedStyle`: Setting to force usage for Mscgen, MsGenny, xu's preview's rendering style. - * Set `lazy`, `classic`, `cygne`, `pegasse`, `fountainpen` or `null` (= cygne). (see [Name Style](https://mscgen.js.org/embed.html#named-styles)) + * Set `lazy`, `classic`, `cygne`, `pegasse`or `fountainpen` (default is `cygne`). (see [Name Style](https://mscgen.js.org/embed.html#named-styles)) +* `previewSeqDiag.mscgen.horizontalAlignment`: Setting to force usage for Mscgen's rendering style. Indicates where an element should be displayed on the horizontal axis relative to the allocated layout slot of the peview window. + * Set `fixed`or `stretch`(default is `stretch`) + +e.g. add to User Settings, -e.g. ``` - "previewSeqDiag.mermaid.fixedStyle":"forest", - "previewSeqDiag.mermaid.fixedBackgroundColor":"#ffffff", - "previewSeqDiag.mscgen.fixedNamedStyle": "fountainpen", + "previewSeqDiag": { + "mermaid": { + "fixedBackgroundColor": "#f6f6ff", + "fixedStyle": "dark" + }, + "mscgen": { + "fixedNamedStyle": "fountainpen", + "horizontalAlignment": "fixed" + } + } ``` -this is. +result is. -![mermaid-forest-white](assets/mermaid-forest-white.png) -![mscgen-fountainpen.png](assets/mscgen-fountainpen.png) +![mermaid-forest-white](assets/mermaid-dark-f6f6ff.png) +![mscgen-fountainpen.png](assets/mscgen-fountainpen-fixed.png) +### Dependencies + +* npm rx ^4.1.0 +* npm mermaid ^7.0.3 +* npm mscgenjs ^1.12.1 / mscgenjs-inpage ^1.12.1 +* vscode extention mscgenjs.vscode-mscgen ---- @@ -79,11 +96,11 @@ this is. ### samples -Mermaid, graph, forest, with light theme. -![graph](assets/mermaid-forest-default-graph.png) - -Mermaid, gantt, dark, with dark theme. -![graph](assets/mermaid-dark-default-gantt.png) - MscGen, msc, cygne, with dark theme. ![graph](assets/mscgen-cygne.png) + +Mermaid, graph. +![mermaid-graph](assets/mermaid-graph.png) + +Mermaid, gantt. +![mermaid-gantt](assets/mermaid-gantt.png) diff --git a/assets/eye-catch.png b/assets/eye-catch.png index bfd41f2..5397200 100644 Binary files a/assets/eye-catch.png and b/assets/eye-catch.png differ diff --git a/assets/mermaid-dark-default-gantt.png b/assets/mermaid-dark-default-gantt.png deleted file mode 100644 index 6fb3e20..0000000 Binary files a/assets/mermaid-dark-default-gantt.png and /dev/null differ diff --git a/assets/mermaid-dark-f6f6ff.png b/assets/mermaid-dark-f6f6ff.png new file mode 100644 index 0000000..95b6b9d Binary files /dev/null and b/assets/mermaid-dark-f6f6ff.png differ diff --git a/assets/mermaid-forest-default-graph.png b/assets/mermaid-forest-default-graph.png deleted file mode 100644 index c2a0a26..0000000 Binary files a/assets/mermaid-forest-default-graph.png and /dev/null differ diff --git a/assets/mermaid-forest-f0f0f0.png b/assets/mermaid-forest-f0f0f0.png deleted file mode 100644 index 3a2f19f..0000000 Binary files a/assets/mermaid-forest-f0f0f0.png and /dev/null differ diff --git a/assets/mermaid-forest-white.png b/assets/mermaid-forest-white.png deleted file mode 100644 index bc5c72e..0000000 Binary files a/assets/mermaid-forest-white.png and /dev/null differ diff --git a/assets/mermaid-gantt.png b/assets/mermaid-gantt.png new file mode 100644 index 0000000..9f2915a Binary files /dev/null and b/assets/mermaid-gantt.png differ diff --git a/assets/mermaid-graph.png b/assets/mermaid-graph.png new file mode 100644 index 0000000..5f2c9d7 Binary files /dev/null and b/assets/mermaid-graph.png differ diff --git a/assets/mscgen-cygne.png b/assets/mscgen-cygne.png index 82f1fbe..b46f0b6 100644 Binary files a/assets/mscgen-cygne.png and b/assets/mscgen-cygne.png differ diff --git a/assets/mscgen-fountainpen-fixed.png b/assets/mscgen-fountainpen-fixed.png new file mode 100644 index 0000000..f9c1b2a Binary files /dev/null and b/assets/mscgen-fountainpen-fixed.png differ diff --git a/assets/mscgen-fountainpen.png b/assets/mscgen-fountainpen.png deleted file mode 100644 index 8fcf125..0000000 Binary files a/assets/mscgen-fountainpen.png and /dev/null differ diff --git a/package.json b/package.json index 381fe2f..abebfe1 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "previewseqdiag-vscode", "displayName": "Preview Sequence Diagrams", "description": "An extension for vscode specialized for the preview function of mermaid, mscgen and other.", - "version": "0.0.1", + "version": "0.1.0", "publisher": "arichika", "author": "arichika.taniguchi @arichika", "license": "GPL-3.0", @@ -45,27 +45,6 @@ "onLanguage:xu" ], "main": "./out/src/extension", - "configuration": { - "type": "object", - "title": "TypeScript configuration", - "properties": { - "previewSeqDiag.mermaid.fixedStyle": { - "type": ["string", "null"], - "default": null, - "description": "Setting to force usage for Mermaid's rendering style. dark, forest, \"\" or null(=Switch according to the theme of VSCode) " - }, - "previewSeqDiag.mermaid.fixedBackgroundColor": { - "type": ["string", "null"], - "default": null, - "description": "Setting to force usage for Mermaid's rendering background color. #rrggbb, transparent or null(=Depends on VSCode's Theme) " - }, - "previewSeqDiag.mscgen.fixedNamedStyle": { - "type": ["string", "null"], - "default": null, - "description": "Setting to force usage for Mscgen's rendering style, MsGenny, xu's preview. lazy, classic, cygne, pegasse, fountainpen or null(=cygne)" - } - } - }, "contributes": { "languages": [{ "id": "mermaid", @@ -127,6 +106,49 @@ "when": "resourceLangId == xu" } ] + }, + "configuration": { + "title": "Preview Sequence Diagrams configuration", + "properties": { + "previewSeqDiag": { + "type": "object", + "description": "Preview Sequence Diagrams configuration", + "properties": { + "mermaid": { + "type": "object", + "description": "Preview styles for Mermaid", + "properties": { + "fixedStyle": { + "type": "string", + "default": "forest", + "description": "Setting to force usage for Mermaid's rendering style. 'dark', 'forest', 'neutral'." + }, + "fixedBackgroundColor": { + "type": "string", + "default": "#fafaf0", + "description": "Setting to force usage for Mermaid's rendering background color. '#rrggbb', 'transparent'." + } + } + }, + "mscgen": { + "type": "object", + "description": "Preview styles for MscGen", + "properties": { + "fixedNamedStyle": { + "type": "string", + "default": "cygne", + "description": "Setting to force usage for Mscgen's rendering style, MsGenny, xu's preview. 'lazy', 'classic', 'cygne', 'pegasse', 'fountainpen'." + }, + "horizontalAlignment": { + "type": "string", + "default": "stretch", + "description": "Setting to force usage for Mscgen's rendering style. Indicates where an element should be displayed on the horizontal axis relative to the allocated layout slot of the peview window. 'stretch' or 'fixed'." + } + } + } + } + } + } } }, "scripts": { @@ -137,7 +159,7 @@ }, "dependencies": { "rx":"^4.1.0", - "mermaid": "^7.0.0", + "mermaid": "^7.0.3", "mscgenjs": "^1.12.1", "mscgenjs-inpage": "^1.12.1" }, diff --git a/previewseqdiag-vscode-0.1.0.vsix b/previewseqdiag-vscode-0.1.0.vsix new file mode 100644 index 0000000..016387b Binary files /dev/null and b/previewseqdiag-vscode-0.1.0.vsix differ diff --git a/src/mermaidCodeSnippet.ts b/src/mermaidCodeSnippet.ts index 5a76068..60c4a31 100644 --- a/src/mermaidCodeSnippet.ts +++ b/src/mermaidCodeSnippet.ts @@ -6,10 +6,19 @@ import { CodeSnippetInterface } from './codeSnippetInterface'; import { Misc } from './misc'; +type StyleName = "dark" | "forest" | "neutral"; +namespace StyleName{ + export const Dark = "dark" + export const Forest = "forest" + export const Neutral = "neutral" +} + +const BackgroundColorDefault = "#fafaf6"; + class ConfigMermaid { - public fixedStyle: string = null; - public fixedBackgroundColor: string = null; + public fixedStyle: StyleName; + public fixedBackgroundColor: string; } @@ -23,11 +32,30 @@ export class MermaidCodeSnippet implements CodeSnippetInterface { this._configMermaid = new ConfigMermaid(); + // defaults + this._configMermaid.fixedStyle = StyleName.Forest; + this._configMermaid.fixedBackgroundColor = BackgroundColorDefault; + var config = vscode.workspace.getConfiguration('previewSeqDiag'); if(!!config && !!config.mermaid) - this._configMermaid.fixedStyle = !(config.mermaid.fixedStyle == null) ? config.mermaid.fixedStyle : null; - if(!!config && !!config.mermaid) - this._configMermaid.fixedBackgroundColor = !(config.mermaid.fixedBackgroundColor == null) ? config.mermaid.fixedBackgroundColor : null; + { + // fixedStyle + switch(config.mermaid.fixedStyle) + { + case StyleName.Dark: + case StyleName.Forest: + case StyleName.Neutral: + this._configMermaid.fixedStyle = config.mscgen.fixedNamedStyle; + break; + + default: + break; + } + + // fixedBackgroundColor + if(config.mermaid.fixedBackgroundColor != null) + this._configMermaid.fixedBackgroundColor = config.mermaid.fixedBackgroundColor; + } } public static get instance():MermaidCodeSnippet @@ -57,45 +85,18 @@ export class MermaidCodeSnippet implements CodeSnippetInterface private async previewSnippet(payLoad: string): Promise { - var styleSwitchScript = null; - switch(this._configMermaid.fixedStyle) - { - case "dark": - case "forest": - styleSwitchScript = ` - `; - break; - - case null: - styleSwitchScript = ` - `; - break; - - default: - styleSwitchScript = ``; - } - - return Misc.getFormattedHtml(` - + return Misc.getFormattedHtml( + ` + `, - styleSwitchScript + ` -
- ${payLoad} + ` +
+
${payLoad}
-
If you want to download by SVG, It is good to use this official website. `); } diff --git a/src/mscgenCodeSnippet.ts b/src/mscgenCodeSnippet.ts index 88663b2..b2492bc 100644 --- a/src/mscgenCodeSnippet.ts +++ b/src/mscgenCodeSnippet.ts @@ -6,11 +6,28 @@ import { CodeSnippetInterface } from './codeSnippetInterface'; import { Misc } from './misc'; +type StyleName = "classic" | "cygne" | "fountainpen" | "lazy" | "pegasse"; +namespace StyleName{ + export const Classic = "classic" + export const Cygne = "cygne" + export const Fountainpen = "fountainpen" + export const Lazy = "lazy" + export const Pegasse = "pegasse" +} + +type Alignment = "fixed" | "stretch"; +namespace Alignment{ + export const Fixed = "fixed" + export const Stretch = "stretch" +} + class ConfigMscgen { - public fixedNamedStyle: string = "cygne"; + public fixedNamedStyle: StyleName; + public horizontalAlignment: Alignment; } + export class MscgenCodeSnippet implements CodeSnippetInterface { private static _instance:MscgenCodeSnippet; @@ -21,10 +38,39 @@ export class MscgenCodeSnippet implements CodeSnippetInterface { this._configMscgen = new ConfigMscgen(); - var config = vscode.workspace.getConfiguration('previewSeqDiag'); + // defaults + this._configMscgen.fixedNamedStyle = StyleName.Cygne; + this._configMscgen.horizontalAlignment = Alignment.Stretch; + var config = vscode.workspace.getConfiguration('previewSeqDiag'); if(!!config && !!config.mscgen) - this._configMscgen.fixedNamedStyle = !(config.mscgen.fixedNamedStyle == null) ? config.mscgen.fixedNamedStyle: "cygne"; + { + // fixedNamedStyle + switch(config.mscgen.fixedNamedStyle) + { + case StyleName.Classic: + case StyleName.Cygne: + case StyleName.Fountainpen: + case StyleName.Lazy: + case StyleName.Pegasse: + this._configMscgen.fixedNamedStyle = config.mscgen.fixedNamedStyle; + break; + + default: + break; + } + + // horizontalAlignment + switch(config.mscgen.horizontalAlignment) + { + case Alignment.Fixed: + this._configMscgen.horizontalAlignment = Alignment.Fixed; + break; + + default: + break; + } + } } public static get instance():MscgenCodeSnippet @@ -54,12 +100,16 @@ export class MscgenCodeSnippet implements CodeSnippetInterface private async previewSnippet(languageId: string,payLoad: string): Promise { - return Misc.getFormattedHtml(` - - `,` + ` + + ((this._configMscgen.horizontalAlignment===Alignment.Stretch) ? `` : ``) + , + ` -
If you want to download by SVG or PNG, It is good to use this official website. `); }