Added new command specification to package.json and defined new configuration settings.

Author: CoderAllan

package.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": "images/logo.png",
-  "version": "1.4.4",
+  "version": "1.5.0",
   "license": "MIT",
   "repository": "https://github.com/CoderAllan/vscode-angulartools",
   "author": {
@@ -31,12 +31,12 @@
     "onCommand:angulartools.modulesToMarkdown",
     "onCommand:angulartools.packageJsonToMarkdown",
     "onCommand:angulartools.showComponentHierarchy",
+    "onCommand:angulartools.showModuleHierarchy",
     "onCommand:angulartools.componentHierarchyMarkdown"
   ],
   "main": "./out/extension.js",
   "contributes": {
-    "commands": [
-      {
+    "commands": [{
         "command": "angulartools.listAllImports",
         "title": "AngularTools: List all imports"
       },
@@ -60,6 +60,10 @@
         "command": "angulartools.showComponentHierarchy",
         "title": "AngularTools: Show a graph representing the component hierarchy."
       },
+      {
+        "command": "angulartools.showModuleHierarchy",
+        "title": "AngularTools: Show a graph representing the module hierarchy."
+      },
       {
         "command": "angulartools.componentHierarchyMarkdown",
         "title": "AngularTools: Generate a directed graph in Mermaid Markdown format."
@@ -139,20 +143,7 @@
         "angularTools.showComponentHierarchy.nodeShape": {
           "type": "string",
           "default": "box",
-          "enum": [
-            "ellipse",
-            "circle",
-            "database",
-            "box",
-            "text",
-            "diamond",
-            "dot",
-            "star",
-            "triangle",
-            "triangleDown",
-            "hexagon",
-            "square "
-          ],
+          "enum": ["ellipse", "circle", "database", "box", "text", "diamond", "dot", "star", "triangle", "triangleDown", "hexagon", "square"],
           "description": "The shape of the nodes in the component hierarchy graph. Notice that 'ellipse','circle','database','box' and 'text' have the label inside the shape, the rest have the label outside the shape."
         },
         "angularTools.showComponentHierarchy.graphSelectionGuidelineColor": {
@@ -180,6 +171,65 @@
           "default": "ComponentHierarchy.png",
           "description": "The default name used when saving the component hierarchy to a Png file."
         },
+        "angularTools.showModuleHierarchy.moduleHierarchyFilename": {
+          "type": "string",
+          "default": "ModuleHierarchy.png",
+          "description": "The default name used when saving the module hierarchy to a Png file."
+        },
+        "angularTools.showModuleHierarchy.componentNodeBackgroundColor": {
+          "type": "string",
+          "default": "#0288d1",
+          "description": "The default color of the nodes representing components."
+        },
+        "angularTools.showModuleHierarchy.componentNodeShape": {
+          "type": "string",
+          "default": "ellipse",
+          "enum": ["ellipse", "circle", "database", "box", "text", "diamond", "dot", "star", "triangle", "triangleDown", "hexagon", "square"],
+          "description": "The default shape of the nodes representing components. Notice that 'ellipse','circle','database','box' and 'text' have the label inside the shape, the rest have the label outside the shape."
+        },
+        "angularTools.showModuleHierarchy.moduleNodeBackgroundColor": {
+          "type": "string",
+          "default": "#e53935",
+          "description": "The default color of the nodes representing modules."
+        },
+        "angularTools.showModuleHierarchy.moduleNodeShape": {
+          "type": "string",
+          "default": "box",
+          "enum": ["ellipse", "circle", "database", "box", "text", "diamond", "dot", "star", "triangle", "triangleDown", "hexagon", "square"],
+          "description": "The default shape of the nodes representing modules. Notice that 'ellipse','circle','database','box' and 'text' have the label inside the shape, the rest have the label outside the shape."
+        },
+        "angularTools.showModuleHierarchy.pipeNodeBackgroundColor": {
+          "type": "string",
+          "default": "#00897b",
+          "description": "The default color of the pipes representing modules."
+        },
+        "angularTools.showModuleHierarchy.pipeNodeShape": {
+          "type": "string",
+          "default": "box",
+          "enum": ["ellipse", "circle", "database", "box", "text", "diamond", "dot", "star", "triangle", "triangleDown", "hexagon", "square"],
+          "description": "The default shape of the nodes representing pipes. Notice that 'ellipse','circle','database','box' and 'text' have the label inside the shape, the rest have the label outside the shape."
+        },
+        "angularTools.showModuleHierarchy.directiveNodeBackgroundColor": {
+          "type": "string",
+          "default": "#ffc107",
+          "description": "The default color of the directives representing modules."
+        },
+        "angularTools.showModuleHierarchy.directiveNodeShape": {
+          "type": "string",
+          "default": "box",
+          "enum": ["ellipse", "circle", "database", "box", "text", "diamond", "dot", "star", "triangle", "triangleDown", "hexagon", "square"],
+          "description": "The default shape of the nodes representing directives. Notice that 'ellipse','circle','database','box' and 'text' have the label inside the shape, the rest have the label outside the shape."
+        },
+        "angularTools.showModuleHierarchy.importEdgeColor": {
+          "type": "string",
+          "default": "#43a047",
+          "description": "The default color of the edges representing imports."
+        },
+        "angularTools.showModuleHierarchy.exportEdgeColor": {
+          "type": "string",
+          "default": "#0288d1",
+          "description": "The default color of the edges representing exports."
+        },
         "angularTools.componentHierarchyMarkdownFilename": {
           "type": "string",
           "default": "ComponentHierarchy.md",
@@ -230,4 +280,4 @@
     "xmldom": "^0.4.0",
     "xmlserializer": "^0.6.1"
   }
-}
+}

src/config.ts

@@ -35,15 +35,28 @@ export class Config {
   public get projectDirectoryStructureMarkdownFilename(): string { return this.getSetting<string>('projectDirectoryStructureMarkdownFilename', 'ReadMe-ProjectDirectoryStructure.md'); }
 
   // ShowComponentHierarchy
-  public get visRootNodeBackgroundColor(): string { return this.getSetting<string>('showComponentHierarchy.rootNodeBackgroundColor', '#00FF00'); }
+  public get visRootNodeBackgroundColor(): string { return this.getSetting<string>('showComponentHierarchy.rootNodeBackgroundColor', '#3abc3f'); }
   public get visNodeShape(): string { return this.getSetting<string>('showComponentHierarchy.nodeShape', 'box'); }
   public get visEdgeArrowToType(): string { return this.getSetting<string>('showComponentHierarchy.edgeArrowToType', 'triangle'); }
-  public get graphSelectionGuidelineColor(): string { return this.getSetting<string>('showComponentHierarchy.graphSelectionGuidelineColor', 'blue'); }
+  public get graphSelectionGuidelineColor(): string { return this.getSetting<string>('showComponentHierarchy.graphSelectionGuidelineColor', '#0288d1'); }
   public get graphSelectionGuidelineWidth(): number { return this.getSetting<number>('showComponentHierarchy.graphSelectionGuidelineWidth', 1); }
-  public get graphSelectionColor(): string { return this.getSetting<string>('showComponentHierarchy.graphSelectionColor', 'red'); }
+  public get graphSelectionColor(): string { return this.getSetting<string>('showComponentHierarchy.graphSelectionColor', '#e53935'); }
   public get graphSelectionWidth(): number { return this.getSetting<number>('showComponentHierarchy.graphSelectionWidth', 2); }
   public get componentHierarchyFilename(): string { return this.getSetting<string>('showComponentHierarchy.componentHierarchyFilename', 'ComponentHierarchy.png'); }
 
+  // ShowModuleHierarchy
+  public get moduleHierarchyFilename(): string { return this.getSetting<string>('showModuleHierarchy.moduleHierarchyFilename', 'ModuleHierarchy.png'); }
+  public get componentNodeBackgroundColor(): string { return this.getSetting<string>('showModuleHierarchy.componentNodeBackgroundColor', '#0288d1');}
+  public get componentNodeShape(): string { return this.getSetting<string>('showModuleHierarchy.componentNodeShape', 'box'); }
+  public get moduleNodeBackgroundColor(): string { return this.getSetting<string>('showModuleHierarchy.moduleNodeBackgroundColor', '#e53935');}
+  public get moduleNodeShape(): string { return this.getSetting<string>('showModuleHierarchy.moduleNodeShape', 'box'); }
+  public get pipeNodeBackgroundColor(): string { return this.getSetting<string>('showModuleHierarchy.pipeNodeBackgroundColor', '#00897b');}
+  public get pipeNodeShape(): string { return this.getSetting<string>('showModuleHierarchy.pipeNodeShape', 'box'); }
+  public get directiveNodeBackgroundColor(): string { return this.getSetting<string>('showModuleHierarchy.directiveNodeBackgroundColor', '#ffc107');}
+  public get directiveNodeShape(): string { return this.getSetting<string>('showModuleHierarchy.directiveNodeShape', 'box'); }
+  public get importEdgeColor(): string { return this.getSetting<string>('showModuleHierarchy.importEdgeColor', '#43a047'); }
+  public get exportEdgeColor(): string { return this.getSetting<string>('showModuleHierarchy.exportEdgeColor', '#0288d1'); }
+
   // ComponentHierarchyMarkdown
   public get componentHierarchyMarkdownFilename(): string { return this.getSetting<string>('componentHierarchyMarkdownFilename', 'ComponentHierarchy.md'); }