Static values and constants moved to Config.ts

Author: CoderAllan

src/commands/componentHierarchyDgml.ts

@@ -1,8 +1,11 @@
-import * as vscode from 'vscode';
 import * as fs from 'fs';
 import * as path from 'path';
-import { FileSystemUtils } from "../filesystemUtils";
+import * as vscode from 'vscode';
 import * as xmldom from 'xmldom';
+
+import { Config } from '../config';
+import { FileSystemUtils } from '../filesystemUtils';
+
 const prettifyXml = require('prettify-xml');
 const xmlSerializer = require('xmlserializer');
 
@@ -29,22 +32,20 @@ export class ComponentHierarchyDgml {
   public execute() {
     const fsUtils = new FileSystemUtils();
     var directoryPath: string = fsUtils.getWorkspaceFolder();
-    const excludeDirectories = ['bin', 'obj', 'node_modules', 'dist', 'packages', '.git', '.vs', '.github'];
-    const componentFilenames = fsUtils.listFiles(directoryPath, excludeDirectories, this.isComponentFile);
+    const componentFilenames = fsUtils.listFiles(directoryPath, Config.excludeDirectories, this.isComponentFile);
     const components = this.findComponents(componentFilenames);
     this.scanComponentTemplates(components);
 
-    const graphFilename = 'ReadMe-ProjectStructure.dgml';
     const domImpl = new xmldom.DOMImplementation();
     const documentParser = new xmldom.DOMParser();
     let xmlDocument: Document;
     let root: Element;
 
     try {
       // if the graph file already exists, then read it and parse it into a xml document object
-      if (fs.existsSync(graphFilename)) {
+      if (fs.existsSync(Config.dgmlGraphFilename)) {
         try {
-          const content = fs.readFileSync(graphFilename).toString();
+          const content = fs.readFileSync(Config.dgmlGraphFilename).toString();
           xmlDocument = documentParser.parseFromString(content, 'text/xml');
         } catch {
           xmlDocument = this.createNewDirectedGraph(domImpl);
@@ -64,7 +65,7 @@ export class ComponentHierarchyDgml {
 
       // Write the prettified xml string to the ReadMe-ProjectStructure.dgml file.
       const fsUtils = new FileSystemUtils();
-      fsUtils.writeFile(path.join(directoryPath, graphFilename), fileContent, () => {
+      fsUtils.writeFile(path.join(directoryPath, Config.dgmlGraphFilename), fileContent, () => {
         vscode.window.showInformationMessage('The project structure has been analyzed and a Directed Graph Markup Language (dgml) file has been created\nThe ReadMe-ProjectStructure.dgml file can now be viewed in Visual Studio');
       });
     } catch (ex) {
@@ -145,9 +146,9 @@ export class ComponentHierarchyDgml {
   private createNewDirectedGraph(domImpl: DOMImplementation) {
     let xmlDoc: Document = domImpl.createDocument('', null, null);
     const root = xmlDoc.createElement("DirectedGraph");
-    root.setAttribute("GraphDirection", "LeftToRight");
-    root.setAttribute("Layout", "Sugiyama");
-    root.setAttribute("ZoomLevel", "-1");
+    root.setAttribute("GraphDirection", Config.dgmlGraphDirection);
+    root.setAttribute("Layout", Config.dgmlGraphLayout);
+    root.setAttribute("ZoomLevel", Config.dgmlZooLevel);
     root.setAttribute("xmlns", "http://schemas.microsoft.com/vs/2009/dgml");
     xmlDoc.appendChild(root);
     return xmlDoc;
@@ -254,7 +255,7 @@ export class ComponentHierarchyDgml {
     const categoryElement = xmlDoc.createElement("Category");
     categoryElement.setAttribute("Id", "RootComponent");
     categoryElement.setAttribute("Label", "Root component");
-    categoryElement.setAttribute("Background", "#FF00AA00");
+    categoryElement.setAttribute("Background", Config.rootNodeBackgroundColor);
     categoryElement.setAttribute("IsTag", "True");
     this.addNode(categoriesElement, categoryElement);
   }

src/commands/listAllImports.ts

@@ -1,15 +1,16 @@
-import * as vscode from 'vscode';
 import * as fs from 'fs';
-import { FileSystemUtils } from "../filesystemUtils";
+import * as vscode from 'vscode';
+
+import { Config } from '../config';
+import { FileSystemUtils } from '../filesystemUtils';
 
 export class ListAllImports {
   public static get commandName(): string { return 'listAllImports'; }
 
   public execute() {
     const fsUtils = new FileSystemUtils();
     var directoryPath: string = fsUtils.getWorkspaceFolder();
-    const excludeDirectories = ['bin', 'obj', 'node_modules', 'dist', 'packages', '.git', '.vs', '.github'];
-    const files = fsUtils.listFiles(directoryPath, excludeDirectories, this.isTypescriptFile);
+    const files = fsUtils.listFiles(directoryPath, Config.excludeDirectories, this.isTypescriptFile);
     this.writeResult(directoryPath, files);
   }
 
@@ -38,7 +39,7 @@ export class ListAllImports {
       });
     }
 
-    const angularToolsOutput = vscode.window.createOutputChannel("Angular Tools");
+    const angularToolsOutput = vscode.window.createOutputChannel(Config.angularToolsOutputChannel);
     angularToolsOutput.clear();
     angularToolsOutput.appendLine(`Imports for files in workspace: ${workspaceDirectory}`);
     angularToolsOutput.appendLine('The number following each import in the list is the number of occurrences of the package import.\n');

src/commands/packageJsonToMarkdown.ts

@@ -1,6 +1,9 @@
-import { FileSystemUtils } from '../filesystemUtils';
-import * as path from 'path';
 import * as fs from 'fs';
+import * as path from 'path';
+
+import { Config } from '../config';
+import { FileSystemUtils } from '../filesystemUtils';
+
 const fetch = require('node-fetch');
 
 export class PackageJsonToMarkdown {
@@ -9,9 +12,8 @@ export class PackageJsonToMarkdown {
   public execute() {
     const fsUtils = new FileSystemUtils();
     const directoryPath: string = fsUtils.getWorkspaceFolder();
-    const excludeDirectories = ['bin', 'obj', 'node_modules', 'dist', 'packages', '.git', '.vs', '.github'];
     const isPackageJson = (filename: string): boolean => filename.toLowerCase().endsWith('package.json');
-    const files = fsUtils.listFiles(directoryPath, excludeDirectories, isPackageJson);
+    const files = fsUtils.listFiles(directoryPath, Config.excludeDirectories, isPackageJson);
     this.writeMarkdownFile(directoryPath, files);
   }
 
@@ -84,7 +86,7 @@ export class PackageJsonToMarkdown {
             '| ---- |:-----------|\n' +
             peerDependenciesMarkdown;
           const fsUtils = new FileSystemUtils();
-          fsUtils.writeFileAndOpen(path.join(workspaceDirectory, 'ReadMe-PackagesJson.md'), markdownContent);
+          fsUtils.writeFileAndOpen(path.join(workspaceDirectory, Config.packageJsonMarkdownFilename), markdownContent);
         });
       });
     });

src/commands/projectDirectoryStructure.ts

@@ -1,4 +1,6 @@
 import * as vscode from 'vscode';
+
+import { Config } from '../config';
 import { FileSystemUtils } from '../filesystemUtils';
 
 export class ProjectDirectoryStructure {
@@ -7,13 +9,12 @@ export class ProjectDirectoryStructure {
   public execute() {
     const fsUtils = new FileSystemUtils();
     var workspaceDirectory: string = fsUtils.getWorkspaceFolder();
-    const excludeDirectories = ['bin', 'obj', 'node_modules', 'dist', 'packages', '.git', '.vs', '.github'];
-    const directories: string[] = fsUtils.listDirectories(workspaceDirectory, excludeDirectories);
-    this.writeDirectoryStructure(workspaceDirectory, 'ReadMe-ProjectDirectoryStructure.md', directories);
+    const directories: string[] = fsUtils.listDirectories(workspaceDirectory, Config.excludeDirectories);
+    this.writeDirectoryStructure(workspaceDirectory, Config.projectDirectoryStructureMarkdownFilename, directories);
   }
 
   private writeDirectoryStructure(workSpaceDirectory: string, filename: string, directories: string[]) {
-    const angularToolsOutput = vscode.window.createOutputChannel("Angular Tools");
+    const angularToolsOutput = vscode.window.createOutputChannel(Config.angularToolsOutputChannel);
     angularToolsOutput.clear();
     angularToolsOutput.appendLine('Project Directory Structure');
     angularToolsOutput.appendLine(`Workspace directory: ${workSpaceDirectory}\n`);

src/commands/showComponentHierarchy.ts

@@ -1,8 +1,10 @@
-import * as vscode from 'vscode';
 import * as fs from 'fs';
-import * as path from 'path';
-import { FileSystemUtils } from "../filesystemUtils";
 import { Base64 } from 'js-base64';
+import * as path from 'path';
+import * as vscode from 'vscode';
+
+import { Config } from '../config';
+import { FileSystemUtils } from '../filesystemUtils';
 
 class Component {
 
@@ -53,10 +55,11 @@ export class ShowComponentHierarchy {
 
   private extensionContext: vscode.ExtensionContext;
   private fsUtils = new FileSystemUtils();
+  private static readonly Name = 'showComponentHierarchy';
   constructor(context: vscode.ExtensionContext) {
     this.extensionContext = context;
   }
-  public static get commandName(): string { return 'showComponentHierarchy'; }
+  public static get commandName(): string { return ShowComponentHierarchy.Name; }
 
   public execute(webview: vscode.Webview) {
 
@@ -73,8 +76,7 @@ export class ShowComponentHierarchy {
     );
 
     var directoryPath: string = this.fsUtils.getWorkspaceFolder();
-    const excludeDirectories = ['bin', 'obj', 'node_modules', 'dist', 'packages', '.git', '.vs', '.github'];
-    const componentFilenames = this.fsUtils.listFiles(directoryPath, excludeDirectories, this.isComponentFile);
+    const componentFilenames = this.fsUtils.listFiles(directoryPath, Config.excludeDirectories, this.isComponentFile);
     const components = this.findComponents(componentFilenames);
     this.enrichComponentsFromComponentTemplates(components);
 
@@ -109,10 +111,10 @@ export class ShowComponentHierarchy {
 
     try {
       const jsContent = this.generateJavascriptContent(nodesJson, rootNodesJson, edgesJson);
-      const outputJsFilename = 'showComponentHierarchy.js';
+      const outputJsFilename = ShowComponentHierarchy.Name + '.js';
       let htmlContent = this.generateHtmlContent(webview, outputJsFilename);
 
-      this.fsUtils.writeFile(this.extensionContext?.asAbsolutePath(path.join('out', 'showComponentHierarchy.html')), htmlContent, () => { }); // For debugging
+      this.fsUtils.writeFile(this.extensionContext?.asAbsolutePath(path.join('out', ShowComponentHierarchy.Name + '.html')), htmlContent, () => { }); // For debugging
       this.fsUtils.writeFile(
         this.extensionContext?.asAbsolutePath(path.join('out', outputJsFilename)),
         jsContent,
@@ -199,29 +201,29 @@ export class ShowComponentHierarchy {
     for (let selector in componentHash) {
       const component = componentHash[selector];
       if (component.isRoot) {
-        this.generateDirectedGraphNodesXml(component.subComponents, component, true, appendNodes);
-        this.generateDirectedGraphLinksXml(component.subComponents, selector, "", appendLinks);
+        this.generateDirectedGraphNodes(component.subComponents, component, true, appendNodes);
+        this.generateDirectedGraphEdges(component.subComponents, selector, "", appendLinks);
       }
     }
   }
 
-  private generateDirectedGraphNodesXml(components: Component[], component: Component, isRoot: boolean, appendNodes: (nodeList: Node[]) => void) {
+  private generateDirectedGraphNodes(components: Component[], component: Component, isRoot: boolean, appendNodes: (nodeList: Node[]) => void) {
     appendNodes([new Node(component.selector, component.templateFilename, isRoot)]);
     if (components.length > 0) {
       components.forEach((subComponent) => {
-        this.generateDirectedGraphNodesXml(subComponent.subComponents, subComponent, subComponent.isRoot, appendNodes);
+        this.generateDirectedGraphNodes(subComponent.subComponents, subComponent, subComponent.isRoot, appendNodes);
       });
     }
   }
 
-  private generateDirectedGraphLinksXml(subComponents: Component[], selector: string, parentSelector: string, appendLinks: (edgeList: Edge[]) => void) {
+  private generateDirectedGraphEdges(subComponents: Component[], selector: string, parentSelector: string, appendLinks: (edgeList: Edge[]) => void) {
     if (parentSelector.length > 0) {
       const id = Math.random() * 100000;
       appendLinks([new Edge(id.toString(), parentSelector, selector)]);
     }
     if (subComponents.length > 0) {
       subComponents.forEach((subComponent) => {
-        this.generateDirectedGraphLinksXml(subComponent.subComponents, subComponent.selector, selector, appendLinks);
+        this.generateDirectedGraphEdges(subComponent.subComponents, subComponent.selector, selector, appendLinks);
       });
     }
   }
@@ -236,25 +238,31 @@ export class ShowComponentHierarchy {
   }
 
   private generateJavascriptContent(nodesJson: string, rootNodesJson: string, edgesJson: string): string {
-    const templateJsFilename = 'showComponentHierarchy_Template.js';
+    const templateJsFilename = ShowComponentHierarchy.Name + '_Template.js';
     let template = fs.readFileSync(this.extensionContext?.asAbsolutePath(path.join('templates', templateJsFilename)), 'utf8');
     let jsContent = template.replace('var nodes = new vis.DataSet([]);', `var nodes = new vis.DataSet([${nodesJson}]);`);
     jsContent = jsContent.replace('var rootNodes = [];', `var rootNodes = [${rootNodesJson}];`);
     jsContent = jsContent.replace('var edges = new vis.DataSet([]);', `var edges = new vis.DataSet([${edgesJson}]);`);
+    jsContent = jsContent.replace('background: "#00FF00" // rootNode background color', `background: "${Config.visRootNodeBackgroundColor}" // rootNode background color`);
+    jsContent = jsContent.replace('type: "triangle" // edge arrow to type', `type: "${Config.visEdgeArrowToType}" // edge arrow to type`);
+    jsContent = jsContent.replace('ctx.strokeStyle = \'blue\'; // graph selection guideline color', `ctx.strokeStyle = '${Config.graphSelectionGuidelineColor}'; // graph selection guideline color`);
+    jsContent = jsContent.replace('ctx.lineWidth = 1; // graph selection guideline width', `ctx.lineWidth = ${Config.graphSelectionGuidelineWidth}; // graph selection guideline width`);
+    jsContent = jsContent.replace('selectionCanvasContext.strokeStyle = \'red\';', `selectionCanvasContext.strokeStyle = '${Config.graphSelectionColor}';`);
+    jsContent = jsContent.replace('selectionCanvasContext.lineWidth = 2;', `selectionCanvasContext.lineWidth = ${Config.graphSelectionWidth};`);
     return jsContent;
   }
 
   private generateHtmlContent(webview: vscode.Webview, outputJsFilename: string): string {
-    const templateHtmlFilename = 'showComponentHierarchy_Template.html';
+    const templateHtmlFilename = ShowComponentHierarchy.Name + '_Template.html';
     let htmlContent = fs.readFileSync(this.extensionContext?.asAbsolutePath(path.join('templates', templateHtmlFilename)), 'utf8');
 
     const visPath = vscode.Uri.joinPath(this.extensionContext.extensionUri, 'javascript', 'vis-network.min.js');
     const visUri = webview.asWebviewUri(visPath);
     htmlContent = htmlContent.replace('vis-network.min.js', visUri.toString());
 
-    const cssPath = vscode.Uri.joinPath(this.extensionContext.extensionUri, 'stylesheet', 'showComponentHierarchy.css');
+    const cssPath = vscode.Uri.joinPath(this.extensionContext.extensionUri, 'stylesheet', ShowComponentHierarchy.Name + '.css');
     const cssUri = webview.asWebviewUri(cssPath);
-    htmlContent = htmlContent.replace('showComponentHierarchy.css', cssUri.toString());
+    htmlContent = htmlContent.replace(ShowComponentHierarchy.Name + '.css', cssUri.toString());
 
     const nonce = this.getNonce();
     htmlContent = htmlContent.replace('nonce-nonce', `nonce-${nonce}`);
@@ -263,7 +271,7 @@ export class ShowComponentHierarchy {
 
     const jsPath = vscode.Uri.joinPath(this.extensionContext.extensionUri, 'out', outputJsFilename);
     const jsUri = webview.asWebviewUri(jsPath);
-    htmlContent = htmlContent.replace('showComponentHierarchy.js', jsUri.toString());
+    htmlContent = htmlContent.replace(ShowComponentHierarchy.Name + '.js', jsUri.toString());
     return htmlContent;
   }
 
@@ -273,7 +281,7 @@ export class ShowComponentHierarchy {
       const u8arr = Base64.toUint8Array(dataUrl[1]);
 
       const workspaceDirectory = this.fsUtils.getWorkspaceFolder();
-      const newFilePath = path.join(workspaceDirectory, 'ComponentHierarchy.png');
+      const newFilePath = path.join(workspaceDirectory, Config.componentHierarchyFilename);
       this.fsUtils.writeFile(newFilePath, u8arr, () => {});
 
       vscode.window.showInformationMessage('The file ComponentHierarchy.png has been created in the root of the workspace.');

src/config.ts

@@ -0,0 +1,28 @@
+
+export class Config {
+  public static readonly excludeDirectories: string[] = ['bin', 'obj', 'node_modules', 'dist', 'packages', '.git', '.vs', '.github'];
+  
+  public static readonly angularToolsOutputChannel = 'Angular Tools';
+
+  // ComponentHierarchyDgml
+  public static readonly dgmlGraphFilename = 'ReadMe-ProjectStructure.dgml';
+  public static readonly dgmlGraphLayout = 'Sugiyama';
+  public static readonly dgmlGraphDirection = 'LeftToRight';
+  public static readonly dgmlZooLevel = '-1';
+  public static readonly rootNodeBackgroundColor = '#FF00AA00';
+  
+  // PackageJsonToMarkdown
+  public static readonly packageJsonMarkdownFilename ='ReadMe-PackagesJson.md';
+  
+  // ProjectDirectoryStructure
+  public static readonly projectDirectoryStructureMarkdownFilename ='ReadMe-ProjectDirectoryStructure.md';
+
+  // ShowComponentHierarchy
+  public static readonly visRootNodeBackgroundColor = '#00FF00';
+  public static readonly visEdgeArrowToType = 'triangle';
+  public static readonly graphSelectionGuidelineColor = 'blue';
+  public static readonly graphSelectionGuidelineWidth = 1;
+  public static readonly graphSelectionColor = 'red';
+  public static readonly graphSelectionWidth = 2;
+  public static readonly componentHierarchyFilename = 'ComponentHierarchy.png';
+}

templates/showComponentHierarchy_Template.js

@@ -4,14 +4,14 @@
   var rootNodes = [];
   rootNodes.forEach(nodeId => {
     nodes.get(nodeId).color = {
-      background: "#00FF00"
+      background: "#00FF00" // rootNode background color
     };
   });
 
   var arrowAttr = {
     to: {
       enabled: true,
-      type: "triangle"
+      type: "triangle" // edge arrow to type
     }
   };
   var edges = new vis.DataSet([]);
@@ -91,8 +91,8 @@
       ctx.moveTo(0, mouseY);
       ctx.lineTo(selectionCanvas.width, mouseY);
     }
-    ctx.strokeStyle = 'blue';
-    ctx.lineWidth = 1;
+    ctx.strokeStyle = 'blue'; // graph selection guideline color
+    ctx.lineWidth = 1; // graph selection guideline width
     ctx.stroke();
   }