Skip to content

Commit 2fc90ae

Browse files
CoderAllanCoderAllan
committed
Now including typescript filename in the generated dgml file.
1 parent 16e0580 commit 2fc90ae

10 files changed

+85
-52
lines changed

‎src/commands/generateDependencyInjectionGraph.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -90,10 +90,11 @@ export class GenerateDependencyInjectionGraph extends ShowHierarchyBase {
9090

9191
addNodesAndEdges(project: Project, appendNodes: (nodeList: Node[]) => void, appendEdges: (edgeList: Edge[]) => void) {
9292
project.components.forEach(component => {
93-
appendNodes([new Node(component.name, this.generatedComponentNode(component), false, NodeType.component)]);
93+
const componentFilename = component.filename.replace(this.workspaceDirectory, '');
94+
appendNodes([new Node(component.name, this.generatedComponentNode(component), componentFilename, false, NodeType.component)]);
9495
component.dependencyInjections.forEach(injectable => {
95-
appendNodes([new Node(injectable, injectable, false, NodeType.injectable)]);
96-
appendEdges([new Edge((this.edges.length + 1).toString(), injectable, component.name, ArrowType.injectable)]);
96+
appendNodes([new Node(injectable.name, injectable.name, injectable.filename.replace(this.workspaceDirectory, ''), false, NodeType.injectable)]);
97+
appendEdges([new Edge((this.edges.length + 1).toString(), injectable.name, component.name, ArrowType.injectable)]);
9798
});
9899
});
99100
}

‎src/commands/showComponentHierarchy.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import * as vscode from 'vscode';
88
export class ShowComponentHierarchy extends ShowHierarchyBase {
99
public static get commandName(): string { return 'showComponentHierarchy'; }
1010

11+
private directoryPath: string = this.fsUtils.getWorkspaceFolder();
12+
1113
public execute(webview: vscode.Webview) {
1214
this.checkForOpenWorkspace();
1315
webview.onDidReceiveMessage(
@@ -25,8 +27,7 @@ export class ShowComponentHierarchy extends ShowHierarchyBase {
2527
this.extensionContext.subscriptions
2628
);
2729

28-
var directoryPath: string = this.fsUtils.getWorkspaceFolder();
29-
const components = ComponentManager.findComponents(directoryPath);
30+
const components = ComponentManager.findComponents(this.directoryPath);
3031

3132
this.nodes = [];
3233
this.edges = [];
@@ -72,7 +73,8 @@ export class ShowComponentHierarchy extends ShowHierarchyBase {
7273
}
7374

7475
private generateDirectedGraphNodes(components: Component[], component: Component, isRoot: boolean, parentSelector: string, appendNodes: (nodeList: Node[]) => void) {
75-
appendNodes([new Node(component.selector, component.selector, isRoot, isRoot ? NodeType.rootNode : NodeType.component)]);
76+
const componentFilename = component.tsFilename.replace(this.directoryPath, '');
77+
appendNodes([new Node(component.selector, component.selector, componentFilename, isRoot, isRoot ? NodeType.rootNode : NodeType.component)]);
7678
if (components.length > 0) {
7779
components.forEach((subComponent) => {
7880
if(parentSelector !== subComponent.selector) {

‎src/commands/showHierarchyBase.ts‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export class ShowHierarchyBase extends CommandBase {
2121
protected showComponentHierarchyJsFilename: string = 'showComponentHierarchy.js';
2222
protected showModuleHierarchyJsFilename: string = 'showModuleHierarchy.js';
2323
protected showHierarchyCssFilename: string = 'showHierarchy.css';
24+
protected workspaceDirectory = this.fsUtils.getWorkspaceFolder();
2425

2526
constructor(context: vscode.ExtensionContext) {
2627
super();
@@ -29,14 +30,20 @@ export class ShowHierarchyBase extends CommandBase {
2930
protected appendNodes = (nodeList: Node[]) => {
3031
nodeList.forEach(newNode => {
3132
if (!this.nodes.some(node => node.id === newNode.id)) {
32-
this.nodes = this.nodes.concat(newNode);
33+
this.nodes.push(newNode);
34+
}
35+
else {
36+
const existingNode = this.nodes.find(node => node.id === newNode.id);
37+
if (existingNode && (!existingNode.tsFilename || existingNode.tsFilename?.length === 0) && newNode.tsFilename && newNode.tsFilename.length > 0) {
38+
existingNode.tsFilename = newNode.tsFilename;
39+
}
3340
}
3441
});
3542
};
3643
protected appendEdges = (edgeList: Edge[]) => {
3744
edgeList.forEach(newEdge => {
3845
if (!this.edges.some(edge => edge.source === newEdge.source && edge.target === newEdge.target)) {
39-
this.edges = this.edges.concat(newEdge);
46+
this.edges.push(newEdge);
4047
}
4148
});
4249
};
@@ -55,8 +62,7 @@ export class ShowHierarchyBase extends CommandBase {
5562
if (dataUrl.length > 0) {
5663
const u8arr = Base64.toUint8Array(dataUrl[1]);
5764

58-
const workspaceDirectory = this.fsUtils.getWorkspaceFolder();
59-
const newFilePath = path.join(workspaceDirectory, pngFilename);
65+
const newFilePath = path.join(this.workspaceDirectory, pngFilename);
6066
this.fsUtils.writeFile(newFilePath, u8arr, () => { });
6167

6268
vscode.window.showInformationMessage(`The file ${pngFilename} has been created in the root of the workspace.`);
@@ -81,7 +87,7 @@ export class ShowHierarchyBase extends CommandBase {
8187
vscode.window.showInformationMessage(popMessageText);
8288
});
8389
}
84-
90+
8591
protected generateHtmlContent(webview: vscode.Webview, outputJsFilename: string): string {
8692
let htmlContent = fs.readFileSync(this.extensionContext?.asAbsolutePath(path.join('templates', this.templateHtmlFilename)), 'utf8');
8793

‎src/commands/showModuleHierarchy.ts‎

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -57,22 +57,41 @@ export class ShowModuleHierarchy extends ShowHierarchyBase {
5757
this.showErrors(errors, `Parsing of ${errors.length > 1 ? 'some' : 'one'} of the modules failed.\n`);
5858
}
5959
}
60-
addNodesAndEdges(project: Project, appendNodes: (nodeList: Node[]) => void, appendEdges: (edgeList: Edge[]) => void) {
60+
61+
private addNodesAndEdges(project: Project, appendNodes: (nodeList: Node[]) => void, appendEdges: (edgeList: Edge[]) => void) {
6162
project.modules.forEach(module => {
62-
appendNodes([new Node(module.moduleName, module.moduleName, false, NodeType.module)]);
63+
const moduleFilename = module.filename.replace(this.workspaceDirectory, '');
64+
appendNodes([new Node(module.moduleName, module.moduleName, moduleFilename, false, NodeType.module)]);
6365
module.imports.forEach(_import => {
6466
const nodeType = Node.getNodeType(project, _import);
65-
appendNodes([new Node(_import, _import, false, nodeType)]);
67+
appendNodes([new Node(_import, _import, this.getNodeFilename(_import, nodeType, project), false, nodeType)]);
6668
appendEdges([new Edge((this.edges.length + 1).toString(), _import, module.moduleName, ArrowType.import)]);
6769
});
6870
module.exports.forEach(_export => {
6971
const nodeType = Node.getNodeType(project, _export);
70-
appendNodes([new Node(_export, _export, false, nodeType)]);
72+
appendNodes([new Node(_export, _export, this.getNodeFilename(_export, nodeType, project), false, nodeType)]);
7173
appendEdges([new Edge((this.edges.length + 1).toString(), module.moduleName, _export, ArrowType.export)]);
7274
});
7375
});
7476
}
75-
generateJavascriptContent(nodesJson: string, edgesJson: string) {
77+
78+
private getNodeFilename(nodeName: string, nodeType: NodeType, project: Project): string | undefined {
79+
let nodeFilename: string | undefined;
80+
switch (nodeType) {
81+
case (NodeType.directive):
82+
nodeFilename = project.directives.get(nodeName)?.filename;
83+
break;
84+
case (NodeType.pipe):
85+
nodeFilename = project.pipes.get(nodeName)?.filename;
86+
break;
87+
case (NodeType.component):
88+
nodeFilename = project.components.get(nodeName)?.filename;
89+
break;
90+
}
91+
return nodeFilename?.replace(this.workspaceDirectory, '');
92+
}
93+
94+
private generateJavascriptContent(nodesJson: string, edgesJson: string) {
7695
let template = fs.readFileSync(this.extensionContext?.asAbsolutePath(path.join('templates', this.templateJsFilename)), 'utf8');
7796
let jsContent = template.replace('var nodes = new vis.DataSet([]);', `var nodes = new vis.DataSet([${nodesJson}]);`);
7897
jsContent = jsContent.replace('var edges = new vis.DataSet([]);', `var edges = new vis.DataSet([${edgesJson}]);`);

‎src/dgmlManager.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,9 @@ export class DgmlManager {
122122
nodeElement.setAttribute(attribute.name, attribute.value);
123123
});
124124
}
125+
if (node.tsFilename) {
126+
nodeElement.setAttribute("TsFilename", node.tsFilename);
127+
}
125128
this.addNode(nodesElement, nodeElement);
126129
}
127130

@@ -161,15 +164,12 @@ export class DgmlManager {
161164

162165
private addProperties(xmlDoc: Document) {
163166
const propertiesElement = this.addNodeToRoot(xmlDoc, "Properties");
164-
this.addProperty(xmlDoc, propertiesElement, "ComponentFilename", "System.String");
167+
this.addProperty(xmlDoc, propertiesElement, "TsFilename", "System.String");
165168
this.addProperty(xmlDoc, propertiesElement, "Background", "System.Windows.Media.Brush");
166169
this.addProperty(xmlDoc, propertiesElement, "GraphDirection", "Microsoft.VisualStudio.Diagrams.Layout.LayoutOrientation");
167-
this.addProperty(xmlDoc, propertiesElement, "GroupLabel", "System.String");
168170
this.addProperty(xmlDoc, propertiesElement, "IsTag", "System.Boolean");
169171
this.addProperty(xmlDoc, propertiesElement, "Label", "System.String");
170172
this.addProperty(xmlDoc, propertiesElement, "Layout", "System.String");
171-
this.addProperty(xmlDoc, propertiesElement, "TargetType", "System.String");
172-
this.addProperty(xmlDoc, propertiesElement, "ValueLabel", "System.String");
173173
this.addProperty(xmlDoc, propertiesElement, "ZoomLevel", "System.String");
174174
this.addProperty(xmlDoc, propertiesElement, "Expression", "System.String");
175175
}

‎src/model/Component.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { NamedEntity } from "./NamedEntity";
22

33
export class Component extends NamedEntity {
4-
public dependencyInjections: string[] = [];
5-
public inputs: string[] = [];
6-
public outputs: string[] = [];
7-
public viewchilds: string[] = [];
8-
public viewchildren: string[] = [];
9-
public contentchilds: string[] = [];
10-
public contentchildren: string[] = [];
4+
public dependencyInjections: NamedEntity[] = [];
5+
public inputs: NamedEntity[] = [];
6+
public outputs: NamedEntity[] = [];
7+
public viewchilds: NamedEntity[] = [];
8+
public viewchildren: NamedEntity[] = [];
9+
public contentchilds: NamedEntity[] = [];
10+
public contentchildren: NamedEntity[] = [];
1111
}

‎src/model/NamedEntity.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11

22
export class NamedEntity {
33
public name: string = '';
4-
public constructor(name: string) {
4+
public filename: string = '';
5+
public constructor(name: string, filename: string) {
56
this.name = name;
7+
this.filename = filename;
68
}
79
}
810

‎src/model/Node.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@ import { Config } from "@src";
33

44
export class Node {
55
private config: Config = new Config();
6-
constructor(id: string, name: string, isRoot: boolean, nodeType: NodeType = NodeType.none, position: Position | undefined = undefined, boundingBox: BoundingBox | undefined = undefined, attributes: Attribute[] = []) {
6+
constructor(id: string, name: string, filename: string | undefined, isRoot: boolean, nodeType: NodeType = NodeType.none, position: Position | undefined = undefined, boundingBox: BoundingBox | undefined = undefined, attributes: Attribute[] = []) {
77
this.id = id;
88
this.name = name;
9+
this.tsFilename = filename;
910
this.isRoot = isRoot;
1011
this.nodeType = nodeType;
1112
this.position = position;
@@ -14,6 +15,7 @@ export class Node {
1415
}
1516
public id: string;
1617
public name: string;
18+
public tsFilename: string | undefined;
1719
public isRoot: boolean;
1820
public position: Position | undefined;
1921
public boundingBox: BoundingBox | undefined;

‎src/model/Project.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import { NgModule } from "@src";
22
import { Component } from './Component';
3+
import { NamedEntity } from "./NamedEntity";
34

45
export class Project {
56
public modules: NgModule[] = [];
67
public moduleNames: Map<string, string> = new Map<string, string>();
78
public components: Map<string, Component> = new Map<string, Component>();
8-
public pipes: Map<string, string> = new Map<string, string>();
9-
public directives: Map<string, string> = new Map<string, string>();
10-
public injectables: Map<string, string> = new Map<string, string>();
9+
public pipes: Map<string, NamedEntity> = new Map<string, NamedEntity>();
10+
public directives: Map<string, NamedEntity> = new Map<string, NamedEntity>();
11+
public injectables: Map<string, NamedEntity> = new Map<string, NamedEntity>();
1112
}

‎src/moduleManager.ts‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as fs from 'fs';
22
import { ArrayUtils, Config, FileSystemUtils } from "@src";
3-
import { Component, Directive, Injectable, Pipe, Project } from '@model';
3+
import { Component, Directive, Injectable, NamedEntity, Pipe, Project } from '@model';
44

55
export class NgModule {
66
public imports: string[] = [];
@@ -40,13 +40,13 @@ export class ModuleManager {
4040
project.components.set(file.name, file);
4141
}
4242
else if (file instanceof Pipe) {
43-
project.pipes.set(file.name, file.name);
43+
project.pipes.set(file.name, new NamedEntity(file.name, filename));
4444
}
4545
else if (file instanceof Directive) {
46-
project.directives.set(file.name, file.name);
46+
project.directives.set(file.name, new NamedEntity(file.name, filename));
4747
}
4848
else if (file instanceof Injectable) {
49-
project.directives.set(file.name, file.name);
49+
project.directives.set(file.name, new NamedEntity(file.name, filename));
5050
}
5151
});
5252
return project;
@@ -73,25 +73,25 @@ export class ModuleManager {
7373
var match = regex.exec(fileContents.toString());
7474
if (match !== null) {
7575
const className = match[2];
76-
const component = new Component(className);
76+
const component = new Component(className, filename);
7777
const classBody = match[3];
7878
this.enrichComponent(component, classBody);
7979
return component;
8080
}
8181
regex = /@Directive\s*\(\s*(\{.+?\})\s*\)\s*export\s+class\s+(\w+)\s+/ims;
8282
var match = regex.exec(fileContents.toString());
8383
if (match !== null) {
84-
return new Directive(match[2]);
84+
return new Directive(match[2], filename);
8585
}
8686
regex = /@Pipe\s*\(\s*(\{.+?\})\s*\)\s*export\s+class\s+(\w+)\s+/ims;
8787
var match = regex.exec(fileContents.toString());
8888
if (match !== null) {
89-
return new Pipe(match[2]);
89+
return new Pipe(match[2], filename);
9090
}
9191
regex = /@Injectable\s*\(\s*(\{.+?\})\s*\)\s*export\s+class\s+(\w+)\s+/ims;
9292
var match = regex.exec(fileContents.toString());
9393
if (match !== null) {
94-
return new Injectable(match[2]);
94+
return new Injectable(match[2], filename);
9595
}
9696
}
9797

@@ -102,35 +102,35 @@ export class ModuleManager {
102102
const constructorParameters = match[1];
103103
regex = /\s*\w+\s+\w+\s*:\s*(\w+)[,]*/gims;
104104
while (match = regex.exec(constructorParameters)) {
105-
component.dependencyInjections.push(match[1]);
105+
component.dependencyInjections.push(new NamedEntity(match[1], component.filename));
106106
}
107107
}
108-
this.matchMultipleSpecificDecorator(classBody, '@Input', component.inputs);
109-
this.matchMultipleSpecificDecorator(classBody, '@output', component.outputs);
110-
this.matchSpecificDecorator(classBody, '@ViewChild', component.viewchilds);
111-
this.matchSpecificDecorator(classBody, '@ViewChildren', component.viewchildren);
112-
this.matchSpecificDecorator(classBody, '@ContentChild', component.contentchilds);
113-
this.matchSpecificDecorator(classBody, '@ContentChildren', component.contentchildren);
108+
this.matchMultipleSpecificDecorator(classBody, '@Input', component.filename, component.inputs);
109+
this.matchMultipleSpecificDecorator(classBody, '@output', component.filename, component.outputs);
110+
this.matchSpecificDecorator(classBody, '@ViewChild', component.filename, component.viewchilds);
111+
this.matchSpecificDecorator(classBody, '@ViewChildren', component.filename, component.viewchildren);
112+
this.matchSpecificDecorator(classBody, '@ContentChild', component.filename, component.contentchilds);
113+
this.matchSpecificDecorator(classBody, '@ContentChildren', component.filename, component.contentchildren);
114114
}
115115

116-
private static matchMultipleSpecificDecorator(classBody: string, decorator: string, decoratorArray: string[]) {
116+
private static matchMultipleSpecificDecorator(classBody: string, decorator: string, filename: string, decoratorArray: NamedEntity[]) {
117117
const regex = new RegExp(decorator + '\\(\\)\\s+(?:public)?(?:protected)?(?:private)?\\s*(?:[gs]et)?\\s*(\\w+)\\s*[:=(]|' + decorator + '\\(["\'](.*?)["\']\\)', 'gms');
118118
let match: RegExpExecArray | null = null;
119119
while (match = regex.exec(classBody)) {
120120
if (match[1]) {
121-
decoratorArray.push(match[1]);
121+
decoratorArray.push(new NamedEntity(match[1], filename));
122122
} else if (match[2]) {
123-
decoratorArray.push(match[2]);
123+
decoratorArray.push(new NamedEntity(match[2], filename));
124124
}
125125
}
126126
}
127127

128-
private static matchSpecificDecorator(classBody: string, decorator: string, decoratorArray: string[]) {
128+
private static matchSpecificDecorator(classBody: string, decorator: string, filename: string, decoratorArray: NamedEntity[]) {
129129
const regex = new RegExp(decorator + '\\s*\\(\\s*[\'"]?(\\w+)[\'"]?.*?\\)', 'gms');
130130
let match: RegExpExecArray | null = null;
131131
while (match = regex.exec(classBody)) {
132132
if (match[1]) {
133-
decoratorArray.push(match[1]);
133+
decoratorArray.push(new NamedEntity(match[1], filename));
134134
}
135135
}
136136
}

0 commit comments

Comments
 (0)