SaveAsDgml now uses dgmlManager to generate graph with node positions from the vis.js network.

Author: CoderAllan

src/commands/generateDependencyInjectionGraph.ts

@@ -16,7 +16,7 @@ export class GenerateDependencyInjectionGraph extends ShowHierarchyBase {
             this.saveAsPng('DependencyInjectionGraph.png', message.text);
             return;
           case 'saveAsDgml':
-            this.saveAsDgml(this.config.dgmlGraphFilename, message.text);
+            this.saveAsDgml(this.config.dgmlGraphFilename, message.text, "'The components hierarchy has been analyzed and a Directed Graph Markup Language (dgml) file has been created\nThe DependencyInjectionGraph.dgml file can now be viewed in Visual Studio'");
             return;
         }
       },

src/commands/showComponentHierarchy.ts

@@ -17,7 +17,7 @@ export class ShowComponentHierarchy extends ShowHierarchyBase {
             this.saveAsPng(this.config.moduleHierarchyFilename, message.text);
             return;
           case 'saveAsDgml':
-            this.saveAsDgml(this.config.dgmlGraphFilename, message.text);
+            this.saveAsDgml(this.config.dgmlGraphFilename, message.text, "'The component hierarchy has been analyzed and a Directed Graph Markup Language (dgml) file has been created\nThe ComponentHierarchy.dgml file can now be viewed in Visual Studio'");
             return;
         }
       },

src/commands/showHierarchyBase.ts

@@ -1,11 +1,14 @@
 import { CommandBase } from '@commands';
-import { Config, FileSystemUtils } from '@src';
-import { Edge, Node } from '@model';
+import { Config, DgmlManager, FileSystemUtils } from '@src';
+import { Category, Edge, Node } from '@model';
 import { Base64 } from 'js-base64';
 import * as fs from 'fs';
 import * as path from 'path';
 import * as vscode from 'vscode';
+import * as xmldom from 'xmldom';
 
+const prettifyXml = require('prettify-xml');
+const xmlSerializer = require('xmlserializer');
 
 export class ShowHierarchyBase extends CommandBase {
   protected fsUtils: FileSystemUtils = new FileSystemUtils();
@@ -60,8 +63,27 @@ export class ShowHierarchyBase extends CommandBase {
     }
   }
 
-  protected saveAsDgml(dgmlGraphFilename: string, messageText: string) {
+  protected saveAsDgml(dgmlGraphFilename: string, messageText: string, popMessageText: string) {
+    const message = JSON.parse(messageText);
+    const direction = message.direction;
+    const domImpl = new xmldom.DOMImplementation();
+    const dgmlManager = new DgmlManager();
+    const xmlDocument = dgmlManager.createNewDirectedGraph(domImpl, direction, "", "-1");
+    dgmlManager.addNodesAndLinks(xmlDocument, this.nodes, message.nodes, this.edges);
+    const categories: Category[] = [];
+    dgmlManager.addCategories(xmlDocument, categories);
+    dgmlManager.addProperties(xmlDocument);
+    dgmlManager.addStyles(xmlDocument);
+    // Serialize the xml into a string
+    const xmlAsString = xmlSerializer.serializeToString(xmlDocument.documentElement);
+    let fileContent = prettifyXml(xmlAsString);
+    fileContent = fileContent.replace('HasCategory('RootComponent')', "HasCategory('RootComponent')");
 
+    // Write the prettified xml string to the ReadMe-ProjectStructure.dgml file.
+    var directoryPath: string = this.fsUtils.getWorkspaceFolder();
+    this.fsUtils.writeFile(path.join(directoryPath, dgmlGraphFilename), fileContent, () => {
+      vscode.window.showInformationMessage(popMessageText);
+    });
   }
 
   protected generateHtmlContent(webview: vscode.Webview, outputJsFilename: string): string {

src/commands/showModuleHierarchy.ts

@@ -16,7 +16,7 @@ export class ShowModuleHierarchy extends ShowHierarchyBase {
             this.saveAsPng(this.config.moduleHierarchyFilename, message.text);
             return;
           case 'saveAsDgml':
-            this.saveAsDgml(this.config.dgmlGraphFilename, message.text);
+            this.saveAsDgml(this.config.dgmlGraphFilename, message.text, "'The modules hierarchy has been analyzed and a Directed Graph Markup Language (dgml) file has been created\nThe ModuleHierarchy.dgml file can now be viewed in Visual Studio'");
             return;
         }
       },

src/dgmlManager.ts

@@ -1,7 +1,7 @@
-import { Component } from "@src";
+import { BoundingBox, Category, Edge, NetworkNode, Node, Position } from "@model";
+
+export class DgmlManager {
 
-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");
@@ -70,53 +70,81 @@ export class DGMLManager {
     }
   }
 
-  public addNodesAndLinks(xmlDoc: Document, componentHash: { [selector: string]: Component; }) {
+  public addNodesAndLinks(xmlDoc: Document, nodes: Node[], nodeInfos: NetworkNode[], edges: Edge[]) {
+    const nodeInfoDictionary = Object.assign({}, ...nodeInfos.map((nodeInfo) => ({ [nodeInfo.id]: nodeInfo })));
     const nodesElement = this.addNodeToRoot(xmlDoc, "Nodes");
     const linksElement = this.addNodeToRoot(xmlDoc, "Links");
-    for (let selector in componentHash) {
-      const component = componentHash[selector];
-      if (component.isRoot) {
-        this.generateDirectedGraphNodesXml(xmlDoc, component.subComponents, component, true, nodesElement);
-        this.generateDirectedGraphLinksXml(xmlDoc, component.subComponents, selector, "", linksElement);
+    nodes.forEach(node => {
+      if (node.id in nodeInfoDictionary) {
+        this.enrichNode(node, nodeInfoDictionary[node.id]);
       }
+      this.generateDirectedGraphNodesXml(xmlDoc, node, nodesElement);
+    });
+    edges.forEach(edge => {
+      this.generateDirectedGraphLinksXml(xmlDoc, edge, linksElement);
+    });
+  }
+
+  private enrichNode(node: Node, networkNode: NetworkNode) {
+    if (networkNode.label) {
+      node.name = networkNode.label;
+    }
+    if (networkNode.position) {
+      node.position = networkNode.position;
+    }
+    if (networkNode.boundingBox) {
+      node.boundingBox = networkNode.boundingBox;
     }
   }
 
-  private generateDirectedGraphNodesXml(xmlDoc: Document, components: Component[], component: Component, isRoot: boolean, nodesElement: Element | null) {
+  private generateDirectedGraphNodesXml(xmlDoc: Document, node: Node, nodesElement: Element | null) {
     const nodeElement = xmlDoc.createElement("Node");
-    nodeElement.setAttribute("ComponentFilename", component.tsFilename);
-    nodeElement.setAttribute("Label", component.selector);
-    nodeElement.setAttribute("Id", component.selector);
-    if (isRoot) {
-      nodeElement.setAttribute("Category", "RootComponent");
+    nodeElement.setAttribute("Label", node.name);
+    nodeElement.setAttribute("Id", node.id);
+    if (node.boundingBox !== undefined && node.position !== undefined) {
+      nodeElement.setAttribute("Bounds", this.calculateBounds(node.position, node.boundingBox));
+      nodeElement.setAttribute("UseManualLocation", "True");
     }
-    this.addNode(nodesElement, nodeElement);
-    if (components.length > 0) {
-      components.forEach((subComponent) => {
-        this.generateDirectedGraphNodesXml(xmlDoc, subComponent.subComponents, subComponent, subComponent.isRoot, nodesElement);
+    if (node.attributes && node.attributes.length > 0) {
+      node.attributes.forEach(attribute => {
+        nodeElement.setAttribute(attribute.name, attribute.value);
       });
     }
+    this.addNode(nodesElement, nodeElement);
+  }
+  
+  private calculateBounds(position: Position, boundingBox: BoundingBox): string {
+    const width = boundingBox.right - boundingBox.left;
+    const height = boundingBox.bottom - boundingBox.top;
+    return `${position.x},${position.y},${width},${height}`;
   }
 
-  private generateDirectedGraphLinksXml(xmlDoc: Document, subComponents: Component[], displayName: string, parentDisplayName: string, linksElement: Element | null) {
-    if (parentDisplayName.length > 0) {
-      this.addLinkNode(xmlDoc, linksElement, parentDisplayName, displayName);
-    }
-    if (subComponents.length > 0) {
-      subComponents.forEach((subComponent) => {
-        this.generateDirectedGraphLinksXml(xmlDoc, subComponent.subComponents, subComponent.selector, displayName, linksElement);
-      });
+  private generateDirectedGraphLinksXml(xmlDoc: Document, edge: Edge, linksElement: Element | null) {
+    this.addLinkNode(xmlDoc, linksElement, edge.source, edge.target);
+  }
+
+  private addCategory(xmlDoc: Document, categoriesElement: Element | null, category: Category) {
+    if (categoriesElement !== null) {
+      const categoryElement = xmlDoc.createElement("Category");
+      categoryElement.setAttribute("Id", category.id);
+      categoryElement.setAttribute("Label", category.label);
+      categoryElement.setAttribute("Background", category.backgroundColor);
+      categoryElement.setAttribute("IsTag", "True");
+      this.addNode(categoriesElement, categoryElement);
     }
   }
 
-  public addCategory(xmlDoc: Document, id: string, label: string, backgroundColor: string) {
+  public addCategories(xmlDoc: Document, categories: Category[]) {
     const categoriesElement = this.addNodeToRoot(xmlDoc, "Categories");
-    const categoryElement = xmlDoc.createElement("Category");
-    categoryElement.setAttribute("Id", id);
-    categoryElement.setAttribute("Label", label);
-    categoryElement.setAttribute("Background", backgroundColor);
-    categoryElement.setAttribute("IsTag", "True");
-    this.addNode(categoriesElement, categoryElement);
+    // const categoryElement = xmlDoc.createElement("Category");
+    // categoryElement.setAttribute("Id", "RootComponent");
+    // categoryElement.setAttribute("Label", "Root component");
+    // // categoryElement.setAttribute("Background", this.config.rootNodeBackgroundColor);
+    // categoryElement.setAttribute("IsTag", "True");
+    // this.addNode(categoriesElement, categoryElement);
+    categories.forEach(category => {
+      this.addCategory(xmlDoc, categoriesElement, category);
+    });
   }
 
   public addProperties(xmlDoc: Document) {