Skip to content

Commit 0744437

Browse files
CoderAllanCoderAllan
committed
It is now possible to change shape, line colors, default filenames and a lot more for the commands in the extension.
1 parent 3b01760 commit 0744437

11 files changed

+170
-50
lines changed

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Change Log
22

3+
## Version 1.2.0
4+
5+
- New feature: It is now possible to change shape, line colors, default filenames and a lot more for the commands in the extension. Go to the Preferences in the File menu and find the AngularTools section under the Extensions section.
6+
37
## Version 1.1.1
48

59
- Bugfix: The edges in the component hierarchy graph are now straight and the dynamics of the graph is turned off.

‎package.json‎

Lines changed: 91 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"displayName": "AngularTools",
55
"description": "AngularTools is a collection of tools for exploring an Angular project, help you with documenting, reverse engineering a project or help when refactoring.",
66
"icon": "images/logo.png",
7-
"version": "1.1.1",
7+
"version": "1.2.0",
88
"repository": "https://github.com/CoderAllan/vscode-angulartools",
99
"author": {
1010
"name": "Allan Simonsen",
@@ -58,7 +58,96 @@
5858
"command": "angulartools.componentHierarchyMarkdown",
5959
"title": "AngularTools: Generate a directed graph in Mermaid Markdown format."
6060
}
61-
]
61+
],
62+
"configuration":{
63+
"title": "AngularTools",
64+
"properties": {
65+
"angularTools.excludeDirectories": {
66+
"type": "string",
67+
"default": "bin;obj;node_modules;dist;packages;.git;.vs;.github",
68+
"description": "Semicolon separated list of directories that should be excluded when scanning for for Angular components."
69+
},
70+
"angularTools.componentHierarchyDgml.defaultGraphFilename": {
71+
"type": "string",
72+
"default": "ReadMe-ProjectStructure.dgml",
73+
"description": "The default filename used when saving a component hierarchy to a Directed Graph Markup Language (Dgml) file."
74+
},
75+
"angularTools.componentHierarchyDgml.graphLayout": {
76+
"type": "string",
77+
"default": "Sugiyama",
78+
"enum": ["Sugiyama", "ForceDirected"],
79+
"description": "This is the algorithm used to layout the nodes of the graph. Sugiyama wil try to avoid crossing edges as far as possible. ForceDirected will try to cluster the nodes."
80+
},
81+
"angularTools.componentHierarchyDgml.graphDirection": {
82+
"type": "string",
83+
"default": "LeftToRight",
84+
"enum": ["TopToBottom", "BottomToTop", "LeftToRight", "RightToLeft"],
85+
"description": "This will make the layout algorithm position the graph nodes in the specified direction."
86+
},
87+
"angularTools.componentHierarchyDgml.rootNodeBackgroundColor": {
88+
"type": "string",
89+
"default": "#FF00AA00",
90+
"description": "The color of the root nodes of the directed graph. The string should be in rgba format."
91+
},
92+
"angularTools.packageJsonMarkdownFilename": {
93+
"type": "string",
94+
"default": "ReadMe-PackagesJson.md",
95+
"description": "The default filename used when saving the packages.json as a markdown file."
96+
},
97+
"angularTools.projectDirectoryStructureMarkdownFilename": {
98+
"type": "string",
99+
"default": "ReadMe-ProjectDirectoryStructure.md",
100+
"description": "The default filename used when saving the project directory structure as a markdown file."
101+
},
102+
"angularTools.showComponentHierarchy.rootNodeBackgroundColor": {
103+
"type": "string",
104+
"default": "#00FF00",
105+
"description": "The color of the root nodes of the component hierarchy graph. The string should be in rgba format or standard css color names."
106+
},
107+
"angularTools.showComponentHierarchy.edgeArrowToType": {
108+
"type": "string",
109+
"default": "triangle",
110+
"enum": ["arrow","bar","box","circle","crow","curve","diamond","inv_curve","inv_triangle","triangle","vee"],
111+
"description": "The default ending of the edges."
112+
},
113+
"angularTools.showComponentHierarchy.nodeShape": {
114+
"type": "string",
115+
"default": "box",
116+
"enum": ["ellipse","circle","database","box","text","diamond","dot","star","triangle","triangleDown","hexagon", "square "],
117+
"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."
118+
},
119+
"angularTools.showComponentHierarchy.graphSelectionGuidelineColor": {
120+
"type": "string",
121+
"default": "blue",
122+
"description": "The color of the guidelines used when selecting part of a component hierarchy graph. The string should be in rgba format or standard css color names."
123+
},
124+
"angularTools.showComponentHierarchy.graphSelectionGuidelineWidth": {
125+
"type": "number",
126+
"default": "1",
127+
"description": "The width of the guide lines shown when selecting part of a component hierarchy graph"
128+
},
129+
"angularTools.showComponentHierarchy.graphSelectionColor": {
130+
"type": "string",
131+
"default": "red",
132+
"description": "The color of the selection rectangle used when selecting part of a component hierarchy graph. The string should be in rgba format or standard css color names."
133+
},
134+
"angularTools.showComponentHierarchy.graphSelectionWidth": {
135+
"type": "number",
136+
"default": "2",
137+
"description": "The width of the selection rectangle shown when selecting part of a component hierarchy graph"
138+
},
139+
"angularTools.showComponentHierarchy.componentHierarchyFilename": {
140+
"type": "string",
141+
"default": "ComponentHierarchy.png",
142+
"description": "The default name used when saving the component hierarchy to a Png file."
143+
},
144+
"angularTools.componentHierarchyMarkdownFilename": {
145+
"type": "string",
146+
"default": "ComponentHierarchy.md",
147+
"description": "The default name used when saving the component hierarchy to a markdown file."
148+
}
149+
}
150+
}
62151
},
63152
"scripts": {
64153
"vscode:prepublish": "npm run compile",

‎src/commands/componentHierarchyDgml.ts‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const prettifyXml = require('prettify-xml');
99
const xmlSerializer = require('xmlserializer');
1010

1111
export class ComponentHierarchyDgml {
12-
12+
private config = new Config();
1313
public static get commandName(): string { return 'componentHierarchyDgml'; }
1414

1515
public execute() {
@@ -23,9 +23,10 @@ export class ComponentHierarchyDgml {
2323

2424
try {
2525
// if the graph file already exists, then read it and parse it into a xml document object
26-
if (fs.existsSync(Config.dgmlGraphFilename)) {
26+
console.log('this.config.dgmlGraphFilename', this.config.dgmlGraphFilename);
27+
if (fs.existsSync(this.config.dgmlGraphFilename)) {
2728
try {
28-
const content = fs.readFileSync(Config.dgmlGraphFilename).toString();
29+
const content = fs.readFileSync(this.config.dgmlGraphFilename).toString();
2930
xmlDocument = documentParser.parseFromString(content, 'text/xml');
3031
} catch {
3132
xmlDocument = this.createNewDirectedGraph(domImpl);
@@ -44,7 +45,7 @@ export class ComponentHierarchyDgml {
4445
fileContent = fileContent.replace('HasCategory('RootComponent')', "HasCategory('RootComponent')");
4546

4647
// Write the prettified xml string to the ReadMe-ProjectStructure.dgml file.
47-
fsUtils.writeFile(path.join(directoryPath, Config.dgmlGraphFilename), fileContent, () => {
48+
fsUtils.writeFile(path.join(directoryPath, this.config.dgmlGraphFilename), fileContent, () => {
4849
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');
4950
});
5051
} catch (ex) {
@@ -55,9 +56,9 @@ export class ComponentHierarchyDgml {
5556
private createNewDirectedGraph(domImpl: DOMImplementation) {
5657
let xmlDoc: Document = domImpl.createDocument('', null, null);
5758
const root = xmlDoc.createElement("DirectedGraph");
58-
root.setAttribute("GraphDirection", Config.dgmlGraphDirection);
59-
root.setAttribute("Layout", Config.dgmlGraphLayout);
60-
root.setAttribute("ZoomLevel", Config.dgmlZooLevel);
59+
root.setAttribute("GraphDirection", this.config.dgmlGraphDirection);
60+
root.setAttribute("Layout", this.config.dgmlGraphLayout);
61+
root.setAttribute("ZoomLevel", this.config.dgmlZoomLevel);
6162
root.setAttribute("xmlns", "http://schemas.microsoft.com/vs/2009/dgml");
6263
xmlDoc.appendChild(root);
6364
return xmlDoc;
@@ -164,7 +165,7 @@ export class ComponentHierarchyDgml {
164165
const categoryElement = xmlDoc.createElement("Category");
165166
categoryElement.setAttribute("Id", "RootComponent");
166167
categoryElement.setAttribute("Label", "Root component");
167-
categoryElement.setAttribute("Background", Config.rootNodeBackgroundColor);
168+
categoryElement.setAttribute("Background", this.config.rootNodeBackgroundColor);
168169
categoryElement.setAttribute("IsTag", "True");
169170
this.addNode(categoriesElement, categoryElement);
170171
}

‎src/commands/componentHierarchyMarkdown.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Config, Component, ComponentManager, FileSystemUtils } from '@src';
22
import * as path from 'path';
33

44
export class ComponentHierarchyMarkdown {
5-
5+
private config = new Config();
66
public static get commandName(): string { return 'componentHierarchyMarkdown'; }
77

88
public execute() {
@@ -21,7 +21,7 @@ export class ComponentHierarchyMarkdown {
2121
'graph TD;\n'+
2222
relations+
2323
'```\n';
24-
fsUtils.writeFileAndOpen(path.join(workspaceDirectory, Config.componentHierarchyMarkdownFilename), markdownContent);
24+
fsUtils.writeFileAndOpen(path.join(workspaceDirectory, this.config.componentHierarchyMarkdownFilename), markdownContent);
2525
} catch (ex) {
2626
console.log('exception:' + ex);
2727
}

‎src/commands/listAllImports.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,13 @@ import * as vscode from 'vscode';
44
import { Config, FileSystemUtils } from '@src';
55

66
export class ListAllImports {
7+
private config = new Config();
78
public static get commandName(): string { return 'listAllImports'; }
89

910
public execute() {
1011
const fsUtils = new FileSystemUtils();
1112
var directoryPath: string = fsUtils.getWorkspaceFolder();
12-
const files = fsUtils.listFiles(directoryPath, Config.excludeDirectories, this.isTypescriptFile);
13+
const files = fsUtils.listFiles(directoryPath, this.config.excludeDirectories, this.isTypescriptFile);
1314
this.writeResult(directoryPath, files);
1415
}
1516

@@ -46,7 +47,7 @@ export class ListAllImports {
4647
});
4748
}
4849

49-
const angularToolsOutput = vscode.window.createOutputChannel(Config.angularToolsOutputChannel);
50+
const angularToolsOutput = vscode.window.createOutputChannel(this.config.angularToolsOutputChannel);
5051
angularToolsOutput.clear();
5152
angularToolsOutput.appendLine(`Imports for files in workspace: ${workspaceDirectory}`);
5253
angularToolsOutput.appendLine('The number following each import in the list is the number of occurrences of the package import.\n');

‎src/commands/packageJsonToMarkdown.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,14 @@ import { Config, FileSystemUtils } from '@src';
66
const fetch = require('node-fetch');
77

88
export class PackageJsonToMarkdown {
9+
private config = new Config();
910
public static get commandName(): string { return 'packageJsonToMarkdown'; }
1011

1112
public execute() {
1213
const fsUtils = new FileSystemUtils();
1314
const directoryPath: string = fsUtils.getWorkspaceFolder();
1415
const isPackageJson = (filename: string): boolean => filename.toLowerCase().endsWith('package.json');
15-
const files = fsUtils.listFiles(directoryPath, Config.excludeDirectories, isPackageJson);
16+
const files = fsUtils.listFiles(directoryPath, this.config.excludeDirectories, isPackageJson);
1617
this.writeMarkdownFile(directoryPath, files);
1718
}
1819

@@ -85,7 +86,7 @@ export class PackageJsonToMarkdown {
8586
'| ---- |:-----------|\n' +
8687
peerDependenciesMarkdown;
8788
const fsUtils = new FileSystemUtils();
88-
fsUtils.writeFileAndOpen(path.join(workspaceDirectory, Config.packageJsonMarkdownFilename), markdownContent);
89+
fsUtils.writeFileAndOpen(path.join(workspaceDirectory, this.config.packageJsonMarkdownFilename), markdownContent);
8990
});
9091
});
9192
});

‎src/commands/projectDirectoryStructure.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,18 @@ import { Config, FileSystemUtils } from '@src';
22
import * as vscode from 'vscode';
33

44
export class ProjectDirectoryStructure {
5+
private config = new Config();
56
public static get commandName(): string { return 'projectDirectoryStructure'; }
67

78
public execute() {
89
const fsUtils = new FileSystemUtils();
910
var workspaceDirectory: string = fsUtils.getWorkspaceFolder();
10-
const directories: string[] = fsUtils.listDirectories(workspaceDirectory, Config.excludeDirectories);
11-
this.writeDirectoryStructure(workspaceDirectory, Config.projectDirectoryStructureMarkdownFilename, directories);
11+
const directories: string[] = fsUtils.listDirectories(workspaceDirectory, this.config.excludeDirectories);
12+
this.writeDirectoryStructure(workspaceDirectory, this.config.projectDirectoryStructureMarkdownFilename, directories);
1213
}
1314

1415
private writeDirectoryStructure(workSpaceDirectory: string, filename: string, directories: string[]) {
15-
const angularToolsOutput = vscode.window.createOutputChannel(Config.angularToolsOutputChannel);
16+
const angularToolsOutput = vscode.window.createOutputChannel(this.config.angularToolsOutputChannel);
1617
angularToolsOutput.clear();
1718
angularToolsOutput.appendLine('Project Directory Structure');
1819
angularToolsOutput.appendLine(`Workspace directory: ${workSpaceDirectory}\n`);

‎src/commands/showComponentHierarchy.ts‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ class Edge {
3535
}
3636

3737
export class ShowComponentHierarchy {
38-
38+
private config = new Config();
3939
private extensionContext: vscode.ExtensionContext;
4040
private fsUtils = new FileSystemUtils();
4141
private static readonly Name = 'showComponentHierarchy';
@@ -154,12 +154,13 @@ export class ShowComponentHierarchy {
154154
let jsContent = template.replace('var nodes = new vis.DataSet([]);', `var nodes = new vis.DataSet([${nodesJson}]);`);
155155
jsContent = jsContent.replace('var rootNodes = [];', `var rootNodes = [${rootNodesJson}];`);
156156
jsContent = jsContent.replace('var edges = new vis.DataSet([]);', `var edges = new vis.DataSet([${edgesJson}]);`);
157-
jsContent = jsContent.replace('background: "#00FF00" // rootNode background color', `background: "${Config.visRootNodeBackgroundColor}" // rootNode background color`);
158-
jsContent = jsContent.replace('type: "triangle" // edge arrow to type', `type: "${Config.visEdgeArrowToType}" // edge arrow to type`);
159-
jsContent = jsContent.replace('ctx.strokeStyle = \'blue\'; // graph selection guideline color', `ctx.strokeStyle = '${Config.graphSelectionGuidelineColor}'; // graph selection guideline color`);
160-
jsContent = jsContent.replace('ctx.lineWidth = 1; // graph selection guideline width', `ctx.lineWidth = ${Config.graphSelectionGuidelineWidth}; // graph selection guideline width`);
161-
jsContent = jsContent.replace('selectionCanvasContext.strokeStyle = \'red\';', `selectionCanvasContext.strokeStyle = '${Config.graphSelectionColor}';`);
162-
jsContent = jsContent.replace('selectionCanvasContext.lineWidth = 2;', `selectionCanvasContext.lineWidth = ${Config.graphSelectionWidth};`);
157+
jsContent = jsContent.replace('background: "#00FF00" // rootNode background color', `background: "${this.config.visRootNodeBackgroundColor}" // rootNode background color`);
158+
jsContent = jsContent.replace('shape: \'box\' // The shape of the nodes.', `shape: '${this.config.visNodeShape}'// The shape of the nodes.`);
159+
jsContent = jsContent.replace('type: "triangle" // edge arrow to type', `type: "${this.config.visEdgeArrowToType}" // edge arrow to type}`);
160+
jsContent = jsContent.replace('ctx.strokeStyle = \'blue\'; // graph selection guideline color', `ctx.strokeStyle = '${this.config.graphSelectionGuidelineColor}'; // graph selection guideline color`);
161+
jsContent = jsContent.replace('ctx.lineWidth = 1; // graph selection guideline width', `ctx.lineWidth = ${this.config.graphSelectionGuidelineWidth}; // graph selection guideline width`);
162+
jsContent = jsContent.replace('selectionCanvasContext.strokeStyle = \'red\';', `selectionCanvasContext.strokeStyle = '${this.config.graphSelectionColor}';`);
163+
jsContent = jsContent.replace('selectionCanvasContext.lineWidth = 2;', `selectionCanvasContext.lineWidth = ${this.config.graphSelectionWidth};`);
163164
return jsContent;
164165
}
165166

@@ -192,10 +193,10 @@ export class ShowComponentHierarchy {
192193
const u8arr = Base64.toUint8Array(dataUrl[1]);
193194

194195
const workspaceDirectory = this.fsUtils.getWorkspaceFolder();
195-
const newFilePath = path.join(workspaceDirectory, Config.componentHierarchyFilename);
196+
const newFilePath = path.join(workspaceDirectory, this.config.componentHierarchyFilename);
196197
this.fsUtils.writeFile(newFilePath, u8arr, () => {});
197198

198-
vscode.window.showInformationMessage(`The file ${Config.componentHierarchyFilename} has been created in the root of the workspace.`);
199+
vscode.window.showInformationMessage(`The file ${this.config.componentHierarchyFilename} has been created in the root of the workspace.`);
199200
}
200201
}
201202
}

‎src/componentManager.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,11 @@ export class Component {
2121
}
2222

2323
export class ComponentManager {
24-
24+
2525
public static findComponents(directoryPath: string): { [selector: string]: Component; } {
2626
const fsUtils = new FileSystemUtils();
27-
const componentFilenames = fsUtils.listFiles(directoryPath, Config.excludeDirectories, ComponentManager.isComponentFile);
27+
const config = new Config();
28+
const componentFilenames = fsUtils.listFiles(directoryPath, config.excludeDirectories, ComponentManager.isComponentFile);
2829
const components = ComponentManager.scanWorkspaceForComponents(componentFilenames);
2930
ComponentManager.enrichComponentsFromComponentTemplates(components);
3031
return components;

0 commit comments

Comments
 (0)