Merge pull request #4 from arichika/develop

release 0.1.0
arichika · Jun 6, 2017 · 78ce659 · 78ce659
2 parents 3fffd7f + 4ab9cc1
commit 78ce659
Show file tree

Hide file tree

Showing 17 changed files with 194 additions and 98 deletions.
diff --git 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
+* Initial release
diff --git 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
diff --git a/assets/mermaid-dark-default-gantt.png b/assets/mermaid-dark-default-gantt.png
diff --git a/assets/mermaid-dark-f6f6ff.png b/assets/mermaid-dark-f6f6ff.png
diff --git a/assets/mermaid-forest-default-graph.png b/assets/mermaid-forest-default-graph.png
diff --git a/assets/mermaid-forest-f0f0f0.png b/assets/mermaid-forest-f0f0f0.png
diff --git a/assets/mermaid-forest-white.png b/assets/mermaid-forest-white.png
diff --git a/assets/mermaid-gantt.png b/assets/mermaid-gantt.png
diff --git a/assets/mermaid-graph.png b/assets/mermaid-graph.png
diff --git a/assets/mscgen-cygne.png b/assets/mscgen-cygne.png
diff --git a/assets/mscgen-fountainpen-fixed.png b/assets/mscgen-fountainpen-fixed.png
diff --git a/assets/mscgen-fountainpen.png b/assets/mscgen-fountainpen.png
diff --git 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
diff --git 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<string>
     {
-        var styleSwitchScript = null;
-        switch(this._configMermaid.fixedStyle)
-        {
-            case "dark":
-            case "forest":
-                styleSwitchScript = `
-                    <script type="text/javascript">
-                            document.getElementById('baseCss').href = "${Misc.getExtensionRootPath()}/node_modules/mermaid/dist/mermaid.${this._configMermaid.fixedStyle}.css";
-                    </script>`;
-                break;
-
-            case null:
-                styleSwitchScript = `
-                    <script type="text/javascript">
-                        if(document.body.className === 'vscode-dark') {
-                            document.getElementById('baseCss').href = "${Misc.getExtensionRootPath()}/node_modules/mermaid/dist/mermaid.dark.css";
-                        } else if(document.body.className === 'vscode-light') {
-                            document.getElementById('baseCss').href = "${Misc.getExtensionRootPath()}/node_modules/mermaid/dist/mermaid.forest.css";
-                        }
-                    </script>`;
-                break;
-
-            default:
-                styleSwitchScript = ``;
-        }
-
-        return Misc.getFormattedHtml(`
-            <link href="${Misc.getExtensionRootPath()}/node_modules/mermaid/dist/mermaid.css" rel="stylesheet" id="baseCss">
+        return Misc.getFormattedHtml(
+            `
+            <link href="${Misc.getExtensionRootPath()}/node_modules/mermaid/dist/mermaid.${this._configMermaid.fixedStyle}.min.css" rel="stylesheet" type="text/css">
             <script src="${Misc.getExtensionRootPath()}/node_modules/mermaid/dist/mermaid.min.js">
             <script type="text/javascript">
                 mermaid.initialize({startOnLoad:true});
             </script>
             `,
-            styleSwitchScript + `
-            <div class="mermaid"
-                style='color:transparent; background-color:${this._configMermaid.fixedBackgroundColor}'>
-                ${payLoad}
+            `
+            <div style='color:transparent; background-color:${this._configMermaid.fixedBackgroundColor}'>
+                <div class="mermaid">${payLoad}</div>
             </div>
-            <hr color="#999" />
             <a href="https://knsv.github.io/mermaid/live_editor/" style="color:#999999;">If you want to download by SVG, It is good to use this official website.</a>
             `);
     }