Basic saveAsDot functionality now working for module hierarchy.

Author: CoderAllan

src/commands/showHierarchyBase.ts

@@ -1,5 +1,5 @@
 import { CommandBase } from '@commands';
-import { Config, DgmlManager, FileSystemUtils } from '@src';
+import { Config, DgmlManager, FileSystemUtils, GraphVizManager } from '@src';
 import { Edge, Node } from '@model';
 import { Base64 } from 'js-base64';
 import * as fs from 'fs';
@@ -111,6 +111,17 @@ export class ShowHierarchyBase extends CommandBase {
     return fixedDirection;
   }
 
+  protected saveAsGraphViz(graphVizFilename: string, messageText: string, graphType: string, popMessageText: string) {
+    const graphVizManager = new GraphVizManager();
+    const fileContent = graphVizManager.createGraphVizDiagram(graphType, this.nodes, this.edges);
+
+    // Write the prettified xml string to the ReadMe-ProjectStructure.dgml file.
+    var directoryPath: string = this.fsUtils.getWorkspaceFolder();
+    this.fsUtils.writeFile(path.join(directoryPath, graphVizFilename), fileContent, () => {
+      vscode.window.setStatusBarMessage(popMessageText, 10000);
+    });
+  }
+
   protected generateHtmlContent(webview: vscode.Webview, outputJsFilename: string): string {
     let htmlContent = fs.readFileSync(this.extensionContext?.asAbsolutePath(path.join('templates', this.templateHtmlFilename)), 'utf8');
 

src/commands/showModuleHierarchy.ts

@@ -18,6 +18,9 @@ export class ShowModuleHierarchy extends ShowHierarchyBase {
           case 'saveAsDgml':
             this.saveAsDgml(this.config.moduleHierarchyDgmlGraphFilename, message.text, `'The modules hierarchy has been analyzed and a Directed Graph Markup Language (dgml) file '${this.config.moduleHierarchyDgmlGraphFilename}' has been created'`);
             return;
+          case 'saveAsDot':
+            this.saveAsGraphViz('ModuleHierarchy.dot', message.text, 'moduleHierarchy', `'The modules hierarchy has been analyzed and a Directed Graph Markup Language (dgml) file 'ModuleHierarchy.dot' has been created'`);
+            return;
         }
       },
       undefined,

src/dgmlManager.ts

@@ -2,7 +2,7 @@ import { ArrowType, BoundingBox, Category, Edge, NetworkNode, Node, NodeType, Po
 
 export class DgmlManager {
 
-  public createNewDirectedGraph(domImpl: DOMImplementation, direction: string, layout: string, zoomLevel: string) {
+  public createNewDirectedGraph(domImpl: DOMImplementation, direction: string, layout: string, zoomLevel: string): Document {
     let xmlDoc: Document = domImpl.createDocument('', null, null);
     const root = xmlDoc.createElement("DirectedGraph");
     if (direction.length > 0) {

src/graphvizManager.ts

@@ -0,0 +1,22 @@
+import { Edge, Node } from "@model";
+
+export class GraphVizManager {
+
+  public createGraphVizDiagram(graphType: string, nodes: Node[], edges: Edge[]): string {
+    const digraphNodes = this.generateDigraphNodes(nodes);
+    const digraphEdges = this.generateDigraphEdges(edges);
+    const graphVizDigraph = this.addRootNode(graphType, digraphNodes, digraphEdges);
+
+    return graphVizDigraph;
+  }
+  private addRootNode(graphType: string, digraphNodes: string, digraphEdges: string): string  {
+    return `digraph ${graphType} {\n   ${digraphNodes}\n   ${digraphEdges}\n}`;
+  }
+  private generateDigraphNodes(nodes: Node[]): string {
+    return nodes.map(node => node.toGraphViz()).join('\n   ');
+  }
+  private generateDigraphEdges(edges: Edge[]): string {
+    return edges.map(edge => edge.toGraphViz()).join('\n   ');
+  }
+}
+

src/index.ts

@@ -3,4 +3,5 @@ export * from './componentManager';
 export * from './config';
 export * from './dgmlManager';
 export * from './filesystemUtils';
+export * from './graphvizManager';
 export * from './moduleManager';

src/model/Edge.ts

@@ -15,10 +15,26 @@ export class Edge {
   public arrowType: ArrowType;
 
   public toJsonString(): string {
-    let arrowColorAttr = `, color: "${this.getEdgeTypeColor(this.arrowType)}"`;;
+    let arrowColorAttr = `, color: "${this.getEdgeTypeColor(this.arrowType)}"`;
     return `{from: "${this.source}", to: "${this.target}", arrows: arrowAttr${arrowColorAttr} }`;
   }
 
+  public toGraphViz(): string {
+    const regex = /\W/g;
+    const source = this.source.replace(regex, '_');
+    const target = this.target.replace(regex, '_');
+    const attributes: string[] = [];
+    const color = this.getEdgeTypeColor(this.arrowType);
+    if (color) {
+      attributes.push(`color="${color}"`);
+    }
+    let attributesStr: string = '';
+    if (attributes.length > 0) {
+      attributesStr = ` [${attributes.join(', ')}]`;
+    }
+    return `${source} -> ${target}${attributesStr};`;
+  }
+
   public getEdgeTypeColor(arrowType: ArrowType): string {
     let edgeTypeColor = '';
     switch (arrowType) {

src/model/Node.ts

@@ -52,6 +52,23 @@ export class Node {
     return `{id: "${this.id}", label: "${label}"${nodeColorAttr}${nodeShapeAttr}}`;
   }
 
+  public toGraphViz(): string {
+    const regex = /\W/g;
+    const id = this.id.replace(regex, '_');
+    const attributes: string[] = [];
+    attributes.push(`label="${this.name}"`);
+    const color = this.getNodeTypeColor(this.nodeType);
+    if (color) {
+      attributes.push(`color="${color}"`);
+      attributes.push(`style="filled"`);
+    }
+    let attributesStr: string = '';
+    if (attributes.length > 0) {
+      attributesStr = ` [${attributes.join(', ')}]`;
+    }
+    return `${id}${attributesStr};`;
+  }
+
   public getNodeTypeColor(nodeType: NodeType): string {
     let nodeTypeColor = '';
     switch (nodeType) {

templates/showHierarchy_Template.html

@@ -18,6 +18,7 @@
       <div class="dropdown-content">
         <a href="#" id="saveAsPngButton">Save as Png</a>
         <a href="#" Id="saveAsDgmlButton">Save as Dgml</a>
+        <a href="#" Id="saveAsDotButton">Save as Dot</a>
       </div>
     </div>
     <input type="button" id="saveSelectionAsPngButton" value="Save selection as png">

templates/showHierarchy_Template.js

@@ -57,6 +57,8 @@
   saveAsPngButton.addEventListener('click', saveAsPng);
   const saveAsDgmlButton = document.getElementById('saveAsDgmlButton');
   saveAsDgmlButton.addEventListener('click', saveAsDgml);
+  const saveAsDotButton = document.getElementById('saveAsDotButton');
+  saveAsDotButton.addEventListener('click', saveAsDot);
   const saveSelectionAsPngButton = document.getElementById('saveSelectionAsPngButton');
   saveSelectionAsPngButton.addEventListener('click', saveSelectionAsPng);
   const copyToClipboardButton = document.getElementById('copyToClipboardButton');
@@ -266,6 +268,26 @@
     });
   }
 
+  function saveAsDot() {
+    const nodeExport = {};
+    nodes.forEach(node => {
+      nodeExport[node.id] = {
+        id: node.id,
+        label: cleanLabel(node.label),
+        position: network.getPosition(node.id),
+        boundingBox: network.getBoundingBox(node.id)
+      };
+    });
+    const direction = hierarchicalOptionsDirectionSelect.value ? hierarchicalOptionsDirectionSelect.value : 'UD';
+    vscode.postMessage({
+      command: 'saveAsDot',
+      text: JSON.stringify({
+        nodes: nodeExport,
+        direction: direction
+      })
+    });
+  }
+
   function cleanLabel(label) {
     let regex = /(<([^>]+)>)/ig;
     let cleanedLabel = label.replace(regex, '');