Merge pull request #285 from CoderAllan/RoutingRelations

Routing relations

Author: CoderAllan

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change Log
 
+## Version 1.9.0
+
+- Routing relations between components are now visualized. Notice that routes defined with module destinations are not yet visualized.
+
 ## Version 1.8.5
 
 - Security issue fixed: Now using npm package @xmldom/xmldom instead of xmldom

images/ShowComponentHierarchy.gif

@@ -4,15 +4,15 @@
   "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.8.5",
+  "version": "1.9.0",
   "license": "MIT",
   "repository": "https://github.com/CoderAllan/vscode-angulartools",
   "author": {
     "name": "Allan Simonsen",
     "url": "https://github.com/CoderAllan"
   },
   "engines": {
-    "vscode": "^1.62.0"
+    "vscode": "^1.63.0"
   },
   "categories": [
     "Other",
@@ -372,6 +372,11 @@
           "default": "#0288d1",
           "description": "The default color of the edges representing components using other components."
         },
+        "angularTools.edges.routeEdgeColor": {
+          "type": "string",
+          "default": "#FF8C00",
+          "description": "The default color of the edges representing routes."
+        },
         "angularTools.packageJsonMarkdownFilename": {
           "type": "string",
           "default": "ReadMe-PackagesJson.md",
@@ -419,6 +424,7 @@
     "@typescript-eslint/parser": "^5.6.0",
     "eslint": "^8.4.1",
     "glob": "^7.2.0",
+    "supports-color": "^9.2.1",
     "ts-loader": "^9.2.6",
     "typescript": "^4.5.2",
     "webpack": "^5.65.0",
@@ -434,4 +440,4 @@
     "prettify-xml": "^1.2.0",
     "xmlserializer": "^0.6.1"
   }
-}
+}

package-lock.json

@@ -1,5 +1,6 @@
 import { CommandBase } from '@commands';
-import { Config, Component, ComponentManager, FileSystemUtils } from '@src';
+import { Component } from '@model';
+import { Config, ComponentManager, FileSystemUtils } from '@src';
 import * as path from 'path';
 
 export class ComponentHierarchyMarkdown extends CommandBase {
@@ -10,7 +11,7 @@ export class ComponentHierarchyMarkdown extends CommandBase {
     this.checkForOpenWorkspace();
     const fsUtils = new FileSystemUtils();
     var workspaceDirectory: string = fsUtils.getWorkspaceFolder();
-    const components = ComponentManager.findComponents(workspaceDirectory);
+    const components = ComponentManager.scanWorkspaceForComponents(workspaceDirectory);
 
     let relations: string = '';
     const addRelation = (from: string, to: string) => {

package.json

@@ -96,20 +96,20 @@ export class GenerateDependencyInjectionGraph extends ShowHierarchyBase {
       const outputs = component.outputs.map(i => i.name).join(", ");
       nodeContent += `\\n<b>Outputs: </b> ${outputs}`;
     }
-    if (component.viewchilds.length > 0) {
-      const viewchilds = component.viewchilds.map(i => i.name).join(", ");
+    if (component.viewChilds.length > 0) {
+      const viewchilds = component.viewChilds.map(i => i.name).join(", ");
       nodeContent += `\\n<b>Viewchilds: </b> ${viewchilds}`;
     }
-    if (component.viewchildren.length > 0) {
-      const viewchildren = component.viewchildren.map(i => i.name).join(", ");
+    if (component.viewChildren.length > 0) {
+      const viewchildren = component.viewChildren.map(i => i.name).join(", ");
       nodeContent += `\\n<b>Viewchildren: </b> ${viewchildren}`;
     }
-    if (component.contentchilds.length > 0) {
-      const contentchilds = component.contentchilds.map(i => i.name).join(", ");
+    if (component.contentChilds.length > 0) {
+      const contentchilds = component.contentChilds.map(i => i.name).join(", ");
       nodeContent += `\\n<b>Contentchilds: </b> ${contentchilds}`;
     }
-    if (component.contentchildren.length > 0) {
-      const contentchildren = component.contentchildren.map(i => i.name).join(", ");
+    if (component.contentChildren.length > 0) {
+      const contentchildren = component.contentChildren.map(i => i.name).join(", ");
       nodeContent += `\\n<b>Contentchildren: </b> ${contentchildren}`;
     }
     return nodeContent;

src/commands/componentHierarchyMarkdown.ts

@@ -1,8 +1,8 @@
 import * as vscode from 'vscode';
 import * as path from 'path';
-import { ArrayUtils, Config, FileSystemUtils, ModuleManager, NgModule } from '@src';
+import { ArrayUtils, Config, FileSystemUtils, ModuleManager } from '@src';
 import { CommandBase } from '@commands';
-import { Project } from '@model';
+import { NgModule, Project } from '@model';
 
 export class ModulesToMarkdown extends CommandBase {
   private config = new Config();

src/commands/generateDependencyInjectionGraph.ts

@@ -1,6 +1,6 @@
 import { ShowHierarchyBase } from './showHierarchyBase';
-import { Component, ComponentManager } from '@src';
-import { ArrowType, Edge, GraphState, Node, NodeType } from '@model';
+import { ComponentManager } from '@src';
+import { ArrowType, Component, Edge, GraphState, Node, NodeType } from '@model';
 import * as fs from 'fs';
 import * as path from 'path';
 import * as vscode from 'vscode';
@@ -54,7 +54,7 @@ export class ShowComponentHierarchy extends ShowHierarchyBase {
       this.extensionContext.subscriptions
     );
 
-    const components = ComponentManager.findComponents(this.directoryPath);
+    const components = ComponentManager.scanWorkspaceForComponents(this.directoryPath);
 
     this.nodes = [];
     this.edges = [];
@@ -88,21 +88,21 @@ export class ShowComponentHierarchy extends ShowHierarchyBase {
     }
   }
 
-  private addNodesAndEdges(componentHash: { [selector: string]: Component; }, appendNodes: (nodeList: Node[]) => void, appendLinks: (edgeList: Edge[]) => void) {
-    for (let selector in componentHash) {
-      const component = componentHash[selector];
+  private addNodesAndEdges(componentDict: { [selector: string]: Component; }, appendNodes: (nodeList: Node[]) => void, appendEdges: (edgeList: Edge[]) => void) {
+    for (let selector in componentDict) {
+      const component = componentDict[selector];
       if (component.isRoot) {
         this.generateDirectedGraphNodes(component.subComponents, component, true, '', appendNodes);
-        this.generateDirectedGraphEdges(component.subComponents, selector, "", appendLinks);
+        this.generateDirectedGraphEdges(componentDict, component.subComponents, component, "", appendEdges);
       }
     }
   }
 
   private generateDirectedGraphNodes(components: Component[], component: Component, isRoot: boolean, parentSelector: string, appendNodes: (nodeList: Node[]) => void) {
-    let componentFilename = component.tsFilename.replace(this.directoryPath, '.');
+    let componentFilename = component.filename.replace(this.directoryPath, '.');
     componentFilename = componentFilename.split('\\').join('/');
     const componentPosition = this.graphState.nodePositions[component.selector];
-    appendNodes([new Node(component.selector, component.selector, componentFilename, component.tsFilename, isRoot, isRoot ? NodeType.rootNode : NodeType.component, componentPosition)]);
+    appendNodes([new Node(component.selector, component.selector, componentFilename, component.filename, isRoot, isRoot ? NodeType.rootNode : NodeType.component, componentPosition)]);
     if (components.length > 0) {
       components.forEach((subComponent) => {
         if (parentSelector !== subComponent.selector) {
@@ -112,14 +112,20 @@ export class ShowComponentHierarchy extends ShowHierarchyBase {
     }
   }
 
-  private generateDirectedGraphEdges(subComponents: Component[], selector: string, parentSelector: string, appendLinks: (edgeList: Edge[]) => void) {
+  private generateDirectedGraphEdges(componentDict: { [selector: string]: Component; }, subComponents: Component[], currentComponent: Component, parentSelector: string, appendEdges: (edgeList: Edge[]) => void) {
     if (parentSelector.length > 0) {
       const id = this.edges.length;
-      appendLinks([new Edge(id.toString(), parentSelector, selector, ArrowType.uses)]);
+      appendEdges([new Edge(id.toString(), parentSelector, currentComponent.selector, ArrowType.uses)]);
     }
-    if (subComponents.length > 0 && selector !== parentSelector) {
+    if (currentComponent.componentsRoutingToThis !== undefined && currentComponent.componentsRoutingToThis.length > 0) {
+      currentComponent.componentsRoutingToThis.forEach(componentRoutingToThis => {
+        const id = this.edges.length;
+        appendEdges([new Edge(id.toString(), componentRoutingToThis.selector, currentComponent.selector, ArrowType.route)]);
+      });
+    }
+    if (subComponents.length > 0 && currentComponent.selector !== parentSelector) {
       subComponents.forEach((subComponent) => {
-        this.generateDirectedGraphEdges(subComponent.subComponents, subComponent.selector, selector, appendLinks);
+        this.generateDirectedGraphEdges(componentDict, subComponent.subComponents, subComponent, currentComponent.selector, appendEdges);
       });
     }
   }