Bugfix: GraphDirection is now saved correctly when saving as Dgml.

Author: CoderAllan

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change Log
 
+## Version 1.7.3
+
+- Bugfix: GraphDirection is now saved correctly when saving as Dgml.
+
 ## Version 1.7.2
 
 - Added missing xml prolog to generated dgml file.

package-lock.json

@@ -4,7 +4,7 @@
   "displayName": "AngularTools",
   "description": "AngularTools is a collection of tools for exploring an Angular project, help you with documenting, reverse engineering a project or help when refactoring.",
   "icon": "logo.png",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "license": "MIT",
   "repository": "https://github.com/CoderAllan/vscode-angulartools",
   "author": {
@@ -410,8 +410,8 @@
     "@types/mocha": "^8.2.2",
     "@types/node": "^14.14.37",
     "@types/vscode": "^1.55.0",
-    "@typescript-eslint/parser": "^4.21.0",
     "@typescript-eslint/eslint-plugin": "^4.21.0",
+    "@typescript-eslint/parser": "^4.21.0",
     "eslint": "^7.23.0",
     "glob": "^7.1.6",
     "mocha": "^8.3.2",

package.json

@@ -74,7 +74,7 @@ export class ShowHierarchyBase extends CommandBase {
     const direction = message.direction;
     const domImpl = new xmldom.DOMImplementation();
     const dgmlManager = new DgmlManager();
-    const xmlDocument = dgmlManager.createNewDirectedGraph(domImpl, direction, "", "-1");
+    const xmlDocument = dgmlManager.createNewDirectedGraph(domImpl, this.fixGraphDirection(direction), "Sugiyama", "-1");
     dgmlManager.addNodesAndLinks(xmlDocument, this.nodes, message.nodes, this.edges);
     // Serialize the xml into a string
     const xmlAsString = xmlSerializer.serializeToString(xmlDocument.documentElement);
@@ -89,6 +89,28 @@ export class ShowHierarchyBase extends CommandBase {
     });
   }
 
+  private fixGraphDirection(direction: string): string {
+    let fixedDirection: string;
+    switch (direction) {
+      case 'UD':
+        fixedDirection = 'TopToBottom';
+        break;
+      case 'DU':
+        fixedDirection = 'BottomToTop';
+        break;
+      case 'LR':
+        fixedDirection = 'LeftToRight';
+        break;
+      case 'RL':
+        fixedDirection = 'RightToLeft';
+        break;
+      default:
+        fixedDirection = '';
+        break;
+    }
+    return fixedDirection;
+  }
+
   protected generateHtmlContent(webview: vscode.Webview, outputJsFilename: string): string {
     let htmlContent = fs.readFileSync(this.extensionContext?.asAbsolutePath(path.join('templates', this.templateHtmlFilename)), 'utf8');
 

src/commands/showHierarchyBase.ts

@@ -5,7 +5,9 @@ export class DgmlManager {
   public createNewDirectedGraph(domImpl: DOMImplementation, direction: string, layout: string, zoomLevel: string) {
     let xmlDoc: Document = domImpl.createDocument('', null, null);
     const root = xmlDoc.createElement("DirectedGraph");
-    root.setAttribute("GraphDirection", direction);
+    if (direction.length > 0) {
+      root.setAttribute("GraphDirection", direction);
+    }
     root.setAttribute("Layout", layout);
     root.setAttribute("ZoomLevel", zoomLevel);
     root.setAttribute("xmlns", "http://schemas.microsoft.com/vs/2009/dgml");