Save as dot is now working for all three graph types.

Author: CoderAllan

src/commands/generateDependencyInjectionGraph.ts

@@ -18,6 +18,9 @@ export class GenerateDependencyInjectionGraph extends ShowHierarchyBase {
           case 'saveAsDgml':
             this.saveAsDgml(this.config.dependencyInjectionDgmlGraphFilename, message.text, `'The components hierarchy has been analyzed and a Directed Graph Markup Language (dgml) file '${this.config.dependencyInjectionDgmlGraphFilename}' has been created'`);
             return;
+          case 'saveAsDot':
+            this.saveAsDot(this.config.dependencyInjectionDotGraphFilename, message.text, 'dependencyInjectionGraph', `'The components hierarchy has been analyzed and a GraphViz (dot) file '${this.config.dependencyInjectionDotGraphFilename}' has been created'`);
+            return;
         }
       },
       undefined,
@@ -36,8 +39,8 @@ export class GenerateDependencyInjectionGraph extends ShowHierarchyBase {
     const edgesJson = this.edges
       .map((edge, index, arr) => { return edge.toJsonString(); })
       .join(',\n');
-    
-      try {
+
+    try {
       const jsContent = this.generateJavascriptContent(nodesJson, edgesJson);
       const outputJsFilename = this.showModuleHierarchyJsFilename;
       let htmlContent = this.generateHtmlContent(webview, this.showModuleHierarchyJsFilename);
@@ -61,29 +64,29 @@ export class GenerateDependencyInjectionGraph extends ShowHierarchyBase {
   generatedComponentNode(component: Component): string {
     let nodeContent: string = '';
     nodeContent = `<b>${component.name}</b>`;
-    if(component.inputs.length > 0) {
+    if (component.inputs.length > 0) {
       const inputs = component.inputs.map(i => i.name).join(", ");
-      nodeContent += `\\n<b>Inputs:</b> ${inputs}`;
+      nodeContent += `\\n<b>Inputs: </b> ${inputs}`;
     }
-    if(component.outputs.length > 0) {
+    if (component.outputs.length > 0) {
       const outputs = component.outputs.map(i => i.name).join(", ");
-      nodeContent += `\\n<b>Outputs:</b> ${outputs}`;
+      nodeContent += `\\n<b>Outputs: </b> ${outputs}`;
     }
-    if(component.viewchilds.length > 0) {
+    if (component.viewchilds.length > 0) {
       const viewchilds = component.viewchilds.map(i => i.name).join(", ");
-      nodeContent += `\\n<b>Viewchilds:</b> ${viewchilds}`;
+      nodeContent += `\\n<b>Viewchilds: </b> ${viewchilds}`;
     }
-    if(component.viewchildren.length > 0) {
+    if (component.viewchildren.length > 0) {
       const viewchildren = component.viewchildren.map(i => i.name).join(", ");
-      nodeContent += `\\n<b>Viewchildren:</b> ${viewchildren}`;
+      nodeContent += `\\n<b>Viewchildren: </b> ${viewchildren}`;
     }
-    if(component.contentchilds.length > 0) {
+    if (component.contentchilds.length > 0) {
       const contentchilds = component.contentchilds.map(i => i.name).join(", ");
-      nodeContent += `\\n<b>Contentchilds:</b> ${contentchilds}`;
+      nodeContent += `\\n<b>Contentchilds: </b> ${contentchilds}`;
     }
-    if(component.contentchildren.length > 0) {
+    if (component.contentchildren.length > 0) {
       const contentchildren = component.contentchildren.map(i => i.name).join(", ");
-      nodeContent += `\\n<b>Contentchildren:</b> ${contentchildren}`;
+      nodeContent += `\\n<b>Contentchildren: </b> ${contentchildren}`;
     }
     return nodeContent;
   }

src/commands/showComponentHierarchy.ts

@@ -21,6 +21,9 @@ export class ShowComponentHierarchy extends ShowHierarchyBase {
           case 'saveAsDgml':
             this.saveAsDgml(this.config.componentHierarchyDgmlGraphFilename, message.text, `'The component hierarchy has been analyzed and a Directed Graph Markup Language (dgml) file '${this.config.componentHierarchyDgmlGraphFilename}' has been created'`);
             return;
+          case 'saveAsDot':
+            this.saveAsDot(this.config.componentHierarchyDotGraphFilename, message.text, 'componentHierarchy', `'The component hierarchy has been analyzed and a GraphViz (dot) file '${this.config.componentHierarchyDotGraphFilename}' has been created'`);
+            return;
         }
       },
       undefined,
@@ -78,7 +81,7 @@ export class ShowComponentHierarchy extends ShowHierarchyBase {
     appendNodes([new Node(component.selector, component.selector, componentFilename, isRoot, isRoot ? NodeType.rootNode : NodeType.component)]);
     if (components.length > 0) {
       components.forEach((subComponent) => {
-        if(parentSelector !== subComponent.selector) {
+        if (parentSelector !== subComponent.selector) {
           this.generateDirectedGraphNodes(subComponent.subComponents, subComponent, subComponent.isRoot, component.selector, appendNodes);
         }
       });

src/commands/showHierarchyBase.ts

@@ -111,7 +111,7 @@ export class ShowHierarchyBase extends CommandBase {
     return fixedDirection;
   }
 
-  protected saveAsGraphViz(graphVizFilename: string, messageText: string, graphType: string, popMessageText: string) {
+  protected saveAsDot(graphVizFilename: string, messageText: string, graphType: string, popMessageText: string) {
     const message = JSON.parse(messageText);
     const graphVizManager = new GraphVizManager();
     const fileContent = graphVizManager.createGraphVizDiagram(graphType, this.nodes, message.nodes, this.edges);

src/commands/showModuleHierarchy.ts

@@ -19,7 +19,7 @@ export class ShowModuleHierarchy extends ShowHierarchyBase {
             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'`);
+            this.saveAsDot(this.config.moduleHierarchyDotGraphFilename, message.text, 'moduleHierarchy', `'The modules hierarchy has been analyzed and a GraphViz (dot) file '${this.config.moduleHierarchyDotGraphFilename}' has been created'`);
             return;
         }
       },

src/config.ts

@@ -29,16 +29,19 @@ export class Config {
   // DependencyInjectionGraph
   public get dependencyInjectionPngFilename(): string { return this.getSetting<string>('dependencyInjectionGraph.pngGraphFilename', 'DependencyInjectionGraph.png'); }
   public get dependencyInjectionDgmlGraphFilename(): string { return this.getSetting<string>('dependencyInjectionGraph.dgmlGraphFilename', 'DependencyInjectionGraph.dgml'); }
+  public get dependencyInjectionDotGraphFilename(): string { return this.getSetting<string>('dependencyInjectionGraph.dotGraphFilename', 'DependencyInjectionGraph.dot'); }
   public get dependencyInjectionEdgeArrowToType(): string { return this.getSetting<string>('dependencyInjectionGraph.edgeArrowToType', 'triangle'); }
 
   // ShowComponentHierarchy
   public get componentHierarchyPngFilename(): string { return this.getSetting<string>('showComponentHierarchy.componentHierarchyPngFilename', 'ComponentHierarchy.png'); }
   public get componentHierarchyDgmlGraphFilename(): string { return this.getSetting<string>('showComponentHierarchy.componentHierarchyDgmlGraphFilename', 'ComponentHierarchy.dgml'); }
+  public get componentHierarchyDotGraphFilename(): string { return this.getSetting<string>('showComponentHierarchy.componentHierarchyDotGraphFilename', 'ComponentHierarchy.dot'); }
   public get componentHierarchyEdgeArrowToType(): string { return this.getSetting<string>('showComponentHierarchy.edgeArrowToType', 'triangle'); }
 
   // ShowModuleHierarchy
   public get moduleHierarchyPngFilename(): string { return this.getSetting<string>('showModuleHierarchy.moduleHierarchyPngFilename', 'ModuleHierarchy.png'); }
   public get moduleHierarchyDgmlGraphFilename(): string { return this.getSetting<string>('showModuleHierarchy.moduleHierarchyDgmlGraphFilename', 'ModuleHierarchy.dgml'); }
+  public get moduleHierarchyDotGraphFilename(): string { return this.getSetting<string>('showModuleHierarchy.moduleHierarchyDotGraphFilename', 'ModuleHierarchy.dot'); }
   public get moduleHierarchyEdgeArrowToType(): string { return this.getSetting<string>('showModuleHierarchy.edgeArrowToType', 'triangle'); }
 
   // GraphSelection

src/extension.ts

@@ -63,6 +63,7 @@ export function activate(context: vscode.ExtensionContext) {
       componentHierarchyPanel.onDidDispose(() => {
       }, null, context.subscriptions);
     }
+    componentHierarchyPanel.onDidDispose(() => componentHierarchyPanel = undefined, undefined, context.subscriptions);
     const command = new ShowComponentHierarchy(context);
     command.execute(componentHierarchyPanel.webview);
   });
@@ -84,6 +85,7 @@ export function activate(context: vscode.ExtensionContext) {
       moduleHierarchyPanel.onDidDispose(() => {
       }, null, context.subscriptions);
     }
+    moduleHierarchyPanel.onDidDispose(() => moduleHierarchyPanel = undefined, undefined, context.subscriptions);
     const command = new ShowModuleHierarchy(context);
     command.execute(moduleHierarchyPanel.webview);
   });
@@ -105,6 +107,7 @@ export function activate(context: vscode.ExtensionContext) {
       dependencyInjectionGraphPanel.onDidDispose(() => {
       }, null, context.subscriptions);
     }
+    dependencyInjectionGraphPanel.onDidDispose(() => dependencyInjectionGraphPanel = undefined, undefined, context.subscriptions);
     const command = new GenerateDependencyInjectionGraph(context);
     command.execute(dependencyInjectionGraphPanel.webview);
   });