Skip to content

Commit d7e121e

Browse files
CoderAllanCoderAllan
committed
Restructured the configuration settings.
1 parent 07fc29b commit d7e121e

File tree

7 files changed

+165
-107
lines changed

7 files changed

+165
-107
lines changed

‎package.json‎

Lines changed: 107 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -79,12 +79,7 @@
7979
"default": "bin;obj;node_modules;dist;packages;.git;.vs;.github",
8080
"description": "Semicolon separated list of directories that should be excluded when scanning for for Angular components."
8181
},
82-
"angularTools.componentHierarchyDgml.defaultGraphFilename": {
83-
"type": "string",
84-
"default": "ReadMe-ProjectStructure.dgml",
85-
"description": "The default filename used when saving a component hierarchy to a Directed Graph Markup Language (Dgml) file."
86-
},
87-
"angularTools.componentHierarchyDgml.graphLayout": {
82+
"angularTools.dgmlGraph.graphLayout": {
8883
"type": "string",
8984
"default": "Sugiyama",
9085
"enum": [
@@ -93,7 +88,7 @@
9388
],
9489
"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."
9590
},
96-
"angularTools.componentHierarchyDgml.graphDirection": {
91+
"angularTools.dgmlGraph.graphDirection": {
9792
"type": "string",
9893
"default": "LeftToRight",
9994
"enum": [
@@ -104,25 +99,33 @@
10499
],
105100
"description": "This will make the layout algorithm position the graph nodes in the specified direction."
106101
},
107-
"angularTools.componentHierarchyDgml.rootNodeBackgroundColor": {
108-
"type": "string",
109-
"default": "#FF00AA00",
110-
"description": "The color of the root nodes of the directed graph. The string should be in rgba format."
111-
},
112-
"angularTools.packageJsonMarkdownFilename": {
102+
"angularTools.dependencyInjectionGraph.defaultGraphFilename": {
113103
"type": "string",
114-
"default": "ReadMe-PackagesJson.md",
115-
"description": "The default filename used when saving the packages.json as a markdown file."
104+
"default": "DependencyInjectionGraph.dgml",
105+
"description": "The default filename used when saving a dependency injection hierarchy graph to a Directed Graph Markup Language (Dgml) file."
116106
},
117-
"angularTools.projectDirectoryStructureMarkdownFilename": {
107+
"angularTools.dependencyInjectionGraph.componentHierarchyPngFilename": {
118108
"type": "string",
119-
"default": "ReadMe-ProjectDirectoryStructure.md",
120-
"description": "The default filename used when saving the project directory structure as a markdown file."
109+
"default": "DependencyInjectionGraph.png",
110+
"description": "The default name used when saving the dependency injection hierarchy graph to a Png file."
121111
},
122-
"angularTools.showComponentHierarchy.rootNodeBackgroundColor": {
112+
"angularTools.dependencyInjectionGraph.edgeArrowToType": {
123113
"type": "string",
124-
"default": "#00FF00",
125-
"description": "The color of the root nodes of the component hierarchy graph. The string should be in rgba format or standard css color names."
114+
"default": "triangle",
115+
"enum": [
116+
"arrow",
117+
"bar",
118+
"box",
119+
"circle",
120+
"crow",
121+
"curve",
122+
"diamond",
123+
"inv_curve",
124+
"inv_triangle",
125+
"triangle",
126+
"vee"
127+
],
128+
"description": "The default ending of the edges."
126129
},
127130
"angularTools.showComponentHierarchy.edgeArrowToType": {
128131
"type": "string",
@@ -142,61 +145,94 @@
142145
],
143146
"description": "The default ending of the edges."
144147
},
145-
"angularTools.showComponentHierarchy.nodeShape": {
148+
"angularTools.showComponentHierarchy.componentHierarchyPngFilename": {
146149
"type": "string",
147-
"default": "box",
150+
"default": "ComponentHierarchy.png",
151+
"description": "The default name used when saving the component hierarchy to a Png file."
152+
},
153+
"angularTools.showComponentHierarchy.componentHierarchyDgmlGraphFilename": {
154+
"type": "string",
155+
"default": "ComponentHierarchy.dgml",
156+
"description": "The default name used when saving the component hierarchy to a Dgml file."
157+
},
158+
"angularTools.showModuleHierarchy.moduleHierarchyPngFilename": {
159+
"type": "string",
160+
"default": "ModuleHierarchy.png",
161+
"description": "The default name used when saving the module hierarchy to a Png file."
162+
},
163+
"angularTools.showModuleHierarchy.moduleHierarchyDgmlGraphFilename": {
164+
"type": "string",
165+
"default": "ModuleHierarchy.dgml",
166+
"description": "The default name used when saving the module hierarchy to a Dgml file."
167+
},
168+
"angularTools.showModuleHierarchy.edgeArrowToType": {
169+
"type": "string",
170+
"default": "triangle",
148171
"enum": [
149-
"ellipse",
150-
"circle",
151-
"database",
172+
"arrow",
173+
"bar",
152174
"box",
153-
"text",
175+
"circle",
176+
"crow",
177+
"curve",
154178
"diamond",
155-
"dot",
156-
"star",
179+
"inv_curve",
180+
"inv_triangle",
157181
"triangle",
158-
"triangleDown",
159-
"hexagon",
160-
"square"
182+
"vee"
161183
],
162-
"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."
184+
"description": "The default ending of the edges."
163185
},
164-
"angularTools.showComponentHierarchy.graphSelectionGuidelineColor": {
186+
"angularTools.graphSelection.graphSelectionGuidelineColor": {
165187
"type": "string",
166188
"default": "blue",
167189
"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."
168190
},
169-
"angularTools.showComponentHierarchy.graphSelectionGuidelineWidth": {
191+
"angularTools.graphSelection.graphSelectionGuidelineWidth": {
170192
"type": "number",
171193
"default": "1",
172194
"description": "The width of the guide lines shown when selecting part of a component hierarchy graph"
173195
},
174-
"angularTools.showComponentHierarchy.graphSelectionColor": {
196+
"angularTools.graphSelection.graphSelectionColor": {
175197
"type": "string",
176198
"default": "red",
177199
"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."
178200
},
179-
"angularTools.showComponentHierarchy.graphSelectionWidth": {
201+
"angularTools.graphSelection.graphSelectionWidth": {
180202
"type": "number",
181203
"default": "2",
182204
"description": "The width of the selection rectangle shown when selecting part of a component hierarchy graph"
183205
},
184-
"angularTools.showComponentHierarchy.componentHierarchyFilename": {
206+
"angularTools.graphNodes.rootNodeBackgroundColor": {
185207
"type": "string",
186-
"default": "ComponentHierarchy.png",
187-
"description": "The default name used when saving the component hierarchy to a Png file."
208+
"default": "#00FF00",
209+
"description": "The color of the root nodes of the component hierarchy graph. The string should be in rgba format or standard css color names."
188210
},
189-
"angularTools.showModuleHierarchy.moduleHierarchyFilename": {
211+
"angularTools.graphNodes.rootNodeNodeShape": {
190212
"type": "string",
191-
"default": "ModuleHierarchy.png",
192-
"description": "The default name used when saving the module hierarchy to a Png file."
213+
"default": "box",
214+
"enum": [
215+
"ellipse",
216+
"circle",
217+
"database",
218+
"box",
219+
"text",
220+
"diamond",
221+
"dot",
222+
"star",
223+
"triangle",
224+
"triangleDown",
225+
"hexagon",
226+
"square"
227+
],
228+
"description": "The default shape of the nodes representing root nodes. Notice that 'ellipse','circle','database','box' and 'text' have the label inside the shape, the rest have the label outside the shape."
193229
},
194-
"angularTools.showModuleHierarchy.componentNodeBackgroundColor": {
230+
"angularTools.graphNodes.componentNodeBackgroundColor": {
195231
"type": "string",
196232
"default": "#0288d1",
197233
"description": "The default color of the nodes representing components."
198234
},
199-
"angularTools.showModuleHierarchy.componentNodeShape": {
235+
"angularTools.graphNodes.componentNodeShape": {
200236
"type": "string",
201237
"default": "box",
202238
"enum": [
@@ -215,12 +251,12 @@
215251
],
216252
"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."
217253
},
218-
"angularTools.showModuleHierarchy.moduleNodeBackgroundColor": {
254+
"angularTools.graphNodes.moduleNodeBackgroundColor": {
219255
"type": "string",
220256
"default": "#e53935",
221257
"description": "The default color of the nodes representing modules."
222258
},
223-
"angularTools.showModuleHierarchy.moduleNodeShape": {
259+
"angularTools.graphNodes.moduleNodeShape": {
224260
"type": "string",
225261
"default": "box",
226262
"enum": [
@@ -239,12 +275,12 @@
239275
],
240276
"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."
241277
},
242-
"angularTools.showModuleHierarchy.pipeNodeBackgroundColor": {
278+
"angularTools.graphNodes.pipeNodeBackgroundColor": {
243279
"type": "string",
244280
"default": "#00897b",
245281
"description": "The default color of the nodes representing pipes."
246282
},
247-
"angularTools.showModuleHierarchy.pipeNodeShape": {
283+
"angularTools.graphNodes.pipeNodeShape": {
248284
"type": "string",
249285
"default": "box",
250286
"enum": [
@@ -263,12 +299,12 @@
263299
],
264300
"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."
265301
},
266-
"angularTools.showModuleHierarchy.directiveNodeBackgroundColor": {
302+
"angularTools.graphNodes.directiveNodeBackgroundColor": {
267303
"type": "string",
268304
"default": "#ffc107",
269305
"description": "The default color of the nodes representing directives."
270306
},
271-
"angularTools.showModuleHierarchy.directiveNodeShape": {
307+
"angularTools.graphNodes.directiveNodeShape": {
272308
"type": "string",
273309
"default": "box",
274310
"enum": [
@@ -287,12 +323,12 @@
287323
],
288324
"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."
289325
},
290-
"angularTools.dependencyInjectionGraph.injectableNodeBackgroundColor": {
326+
"angularTools.graphNodes.injectableNodeBackgroundColor": {
291327
"type": "string",
292328
"default": "#97c2fc",
293329
"description": "The default color of the nodes representing injected components."
294330
},
295-
"angularTools.dependencyInjectionGraph.injectableNodeShape": {
331+
"angularTools.graphNodes.injectableNodeShape": {
296332
"type": "string",
297333
"default": "box",
298334
"enum": [
@@ -311,30 +347,40 @@
311347
],
312348
"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."
313349
},
314-
"angularTools.graph.importEdgeColor": {
350+
"angularTools.graphNodes.maximumNodeLabelLength": {
351+
"type": "number",
352+
"default": "40",
353+
"description": "The maximum length of the label for the nodes in the hierarchy. If the class name, module definition, module imports, exports, directives or pipes are longer than the specified number of characters, it will be truncated to this length."
354+
},
355+
"angularTools.edges.importEdgeColor": {
315356
"type": "string",
316357
"default": "#43a047",
317358
"description": "The default color of the edges representing imports."
318359
},
319-
"angularTools.graph.exportEdgeColor": {
360+
"angularTools.edges.exportEdgeColor": {
320361
"type": "string",
321362
"default": "#0288d1",
322363
"description": "The default color of the edges representing exports."
323364
},
324-
"angularTools.graph.injectableEdgeColor": {
365+
"angularTools.edges.injectableEdgeColor": {
325366
"type": "string",
326367
"default": "#0288d1",
327368
"description": "The default color of the edges representing injectables."
328369
},
329-
"angularTools.graph.usesEdgeColor": {
370+
"angularTools.edges.usesEdgeColor": {
330371
"type": "string",
331372
"default": "#0288d1",
332373
"description": "The default color of the edges representing components using other components."
333374
},
334-
"angularTools.showModuleHierarchy.maximumNodeLabelLength": {
335-
"type": "number",
336-
"default": "40",
337-
"description": "The maximum length of the label for the nodes in the hierarchy. If the class name, module definition, module imports, exports, directives or pipes are longer than the specified number of characters, it will be truncated to this length."
375+
"angularTools.packageJsonMarkdownFilename": {
376+
"type": "string",
377+
"default": "ReadMe-PackagesJson.md",
378+
"description": "The default filename used when saving the packages.json as a markdown file."
379+
},
380+
"angularTools.projectDirectoryStructureMarkdownFilename": {
381+
"type": "string",
382+
"default": "ReadMe-ProjectDirectoryStructure.md",
383+
"description": "The default filename used when saving the project directory structure as a markdown file."
338384
},
339385
"angularTools.componentHierarchyMarkdownFilename": {
340386
"type": "string",

‎src/commands/generateDependencyInjectionGraph.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@ export class GenerateDependencyInjectionGraph extends ShowHierarchyBase {
1313
message => {
1414
switch (message.command) {
1515
case 'saveAsPng':
16-
this.saveAsPng('DependencyInjectionGraph.png', message.text);
16+
this.saveAsPng(this.config.dependencyInjectionPngFilename, message.text);
1717
return;
1818
case 'saveAsDgml':
19-
this.saveAsDgml(this.config.dgmlGraphFilename, message.text, "'The components hierarchy has been analyzed and a Directed Graph Markup Language (dgml) file has been created\nThe DependencyInjectionGraph.dgml file can now be viewed in Visual Studio'");
19+
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'`);
2020
return;
2121
}
2222
},
@@ -102,7 +102,7 @@ export class GenerateDependencyInjectionGraph extends ShowHierarchyBase {
102102
let template = fs.readFileSync(this.extensionContext?.asAbsolutePath(path.join('templates', this.templateJsFilename)), 'utf8');
103103
let jsContent = template.replace('var nodes = new vis.DataSet([]);', `var nodes = new vis.DataSet([${nodesJson}]);`);
104104
jsContent = jsContent.replace('var edges = new vis.DataSet([]);', `var edges = new vis.DataSet([${edgesJson}]);`);
105-
jsContent = jsContent.replace('type: "triangle" // edge arrow to type', `type: "${this.config.visEdgeArrowToType}" // edge arrow to type}`);
105+
jsContent = jsContent.replace('type: "triangle" // edge arrow to type', `type: "${this.config.dependencyInjectionEdgeArrowToType}" // edge arrow to type}`);
106106
jsContent = jsContent.replace('ctx.strokeStyle = \'blue\'; // graph selection guideline color', `ctx.strokeStyle = '${this.config.graphSelectionGuidelineColor}'; // graph selection guideline color`);
107107
jsContent = jsContent.replace('ctx.lineWidth = 1; // graph selection guideline width', `ctx.lineWidth = ${this.config.graphSelectionGuidelineWidth}; // graph selection guideline width`);
108108
jsContent = jsContent.replace('selectionCanvasContext.strokeStyle = \'red\';', `selectionCanvasContext.strokeStyle = '${this.config.graphSelectionColor}';`);

‎src/commands/showComponentHierarchy.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,10 @@ export class ShowComponentHierarchy extends ShowHierarchyBase {
1414
message => {
1515
switch (message.command) {
1616
case 'saveAsPng':
17-
this.saveAsPng(this.config.moduleHierarchyFilename, message.text);
17+
this.saveAsPng(this.config.componentHierarchyPngFilename, message.text);
1818
return;
1919
case 'saveAsDgml':
20-
this.saveAsDgml(this.config.dgmlGraphFilename, message.text, "'The component hierarchy has been analyzed and a Directed Graph Markup Language (dgml) file has been created\nThe ComponentHierarchy.dgml file can now be viewed in Visual Studio'");
20+
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'`);
2121
return;
2222
}
2323
},
@@ -99,9 +99,9 @@ export class ShowComponentHierarchy extends ShowHierarchyBase {
9999
let jsContent = template.replace('var nodes = new vis.DataSet([]);', `var nodes = new vis.DataSet([${nodesJson}]);`);
100100
jsContent = jsContent.replace('var rootNodes = [];', `var rootNodes = [${rootNodesJson}];`);
101101
jsContent = jsContent.replace('var edges = new vis.DataSet([]);', `var edges = new vis.DataSet([${edgesJson}]);`);
102-
jsContent = jsContent.replace('background: "#00FF00" // rootNode background color', `background: "${this.config.visRootNodeBackgroundColor}" // rootNode background color`);
103-
jsContent = jsContent.replace('shape: \'box\' // The shape of the nodes.', `shape: '${this.config.visNodeShape}'// The shape of the nodes.`);
104-
jsContent = jsContent.replace('type: "triangle" // edge arrow to type', `type: "${this.config.visEdgeArrowToType}" // edge arrow to type}`);
102+
jsContent = jsContent.replace('background: "#00FF00" // rootNode background color', `background: "${this.config.rootNodeBackgroundColor}" // rootNode background color`);
103+
jsContent = jsContent.replace('shape: \'box\' // The shape of the nodes.', `shape: '${this.config.rootNodeShape}'// The shape of the nodes.`);
104+
jsContent = jsContent.replace('type: "triangle" // edge arrow to type', `type: "${this.config.componentHierarchyEdgeArrowToType}" // edge arrow to type}`);
105105
jsContent = jsContent.replace('ctx.strokeStyle = \'blue\'; // graph selection guideline color', `ctx.strokeStyle = '${this.config.graphSelectionGuidelineColor}'; // graph selection guideline color`);
106106
jsContent = jsContent.replace('ctx.lineWidth = 1; // graph selection guideline width', `ctx.lineWidth = ${this.config.graphSelectionGuidelineWidth}; // graph selection guideline width`);
107107
jsContent = jsContent.replace('selectionCanvasContext.strokeStyle = \'red\';', `selectionCanvasContext.strokeStyle = '${this.config.graphSelectionColor}';`);

‎src/commands/showHierarchyBase.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { CommandBase } from '@commands';
22
import { Config, DgmlManager, FileSystemUtils } from '@src';
3-
import { Category, Edge, Node } from '@model';
3+
import { Edge, Node } from '@model';
44
import { Base64 } from 'js-base64';
55
import * as fs from 'fs';
66
import * as path from 'path';

0 commit comments

Comments
 (0)