Skip to content

Commit ce962e3

Browse files
CoderAllanCoderAllan
committed
Categories are now added to the dgml file with the colors of the nodes.
1 parent 4898143 commit ce962e3

File tree

6 files changed

+68
-24
lines changed

6 files changed

+68
-24
lines changed

‎src/commands/showHierarchyBase.ts‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -70,10 +70,6 @@ export class ShowHierarchyBase extends CommandBase {
7070
const dgmlManager = new DgmlManager();
7171
const xmlDocument = dgmlManager.createNewDirectedGraph(domImpl, direction, "", "-1");
7272
dgmlManager.addNodesAndLinks(xmlDocument, this.nodes, message.nodes, this.edges);
73-
const categories: Category[] = [];
74-
dgmlManager.addCategories(xmlDocument, categories);
75-
dgmlManager.addProperties(xmlDocument);
76-
dgmlManager.addStyles(xmlDocument);
7773
// Serialize the xml into a string
7874
const xmlAsString = xmlSerializer.serializeToString(xmlDocument.documentElement);
7975
let fileContent = prettifyXml(xmlAsString);

‎src/config.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,8 @@ export class Config {
5454
public get pipeNodeShape(): string { return this.getSetting<string>('showModuleHierarchy.pipeNodeShape', 'box'); }
5555
public get directiveNodeBackgroundColor(): string { return this.getSetting<string>('showModuleHierarchy.directiveNodeBackgroundColor', '#ffc107');}
5656
public get directiveNodeShape(): string { return this.getSetting<string>('showModuleHierarchy.directiveNodeShape', 'box'); }
57+
public get injectableNodeShape(): string { return this.getSetting<string>('graph.injectableNodeShape', 'box'); }
58+
public get injectableNodeBackgroundColor(): string { return this.getSetting<string>('graph.injectableNodeBackgroundColor', '#97c2fc'); }
5759
public get importEdgeColor(): string { return this.getSetting<string>('showModuleHierarchy.importEdgeColor', '#43a047'); }
5860
public get exportEdgeColor(): string { return this.getSetting<string>('showModuleHierarchy.exportEdgeColor', '#0288d1'); }
5961
public get maximumNodeLabelLength(): number { return this.getSetting<number>('showModuleHierarchy.maximumNodeLabelLength', -1); }

‎src/dgmlManager.ts‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { BoundingBox, Category, Edge, NetworkNode, Node, Position } from "@model";
1+
import { BoundingBox, Category, Edge, NetworkNode, Node, NodeType, Position } from "@model";
22

33
export class DgmlManager {
44

@@ -74,15 +74,22 @@ export class DgmlManager {
7474
const nodeInfoDictionary = Object.assign({}, ...nodeInfos.map((nodeInfo) => ({ [nodeInfo.id]: nodeInfo })));
7575
const nodesElement = this.addNodeToRoot(xmlDoc, "Nodes");
7676
const linksElement = this.addNodeToRoot(xmlDoc, "Links");
77+
const categoryDictionary: { [nodeType: string]: Category } = {};
7778
nodes.forEach(node => {
7879
if (node.id in nodeInfoDictionary) {
7980
this.enrichNode(node, nodeInfoDictionary[node.id]);
8081
}
8182
this.generateDirectedGraphNodesXml(xmlDoc, node, nodesElement);
83+
const categoryId = NodeType[node.nodeType];
84+
if (!(categoryId in categoryDictionary)) {
85+
categoryDictionary[categoryId] = new Category(categoryId, categoryId, node.getNodeTypeColor(node.nodeType));
86+
}
8287
});
8388
edges.forEach(edge => {
8489
this.generateDirectedGraphLinksXml(xmlDoc, edge, linksElement);
8590
});
91+
this.addCategoriesAndStyles(xmlDoc, categoryDictionary);
92+
this.addProperties(xmlDoc);
8693
}
8794

8895
private enrichNode(node: Node, networkNode: NetworkNode) {
@@ -105,6 +112,7 @@ export class DgmlManager {
105112
nodeElement.setAttribute("Bounds", this.calculateBounds(node.position, node.boundingBox));
106113
nodeElement.setAttribute("UseManualLocation", "True");
107114
}
115+
nodeElement.setAttribute("Category", NodeType[node.nodeType]);
108116
if (node.attributes && node.attributes.length > 0) {
109117
node.attributes.forEach(attribute => {
110118
nodeElement.setAttribute(attribute.name, attribute.value);
@@ -134,20 +142,14 @@ export class DgmlManager {
134142
}
135143
}
136144

137-
public addCategories(xmlDoc: Document, categories: Category[]) {
145+
private addCategoriesAndStyles(xmlDoc: Document, categories: { [nodeType: string]: Category }) {
138146
const categoriesElement = this.addNodeToRoot(xmlDoc, "Categories");
139-
// const categoryElement = xmlDoc.createElement("Category");
140-
// categoryElement.setAttribute("Id", "RootComponent");
141-
// categoryElement.setAttribute("Label", "Root component");
142-
// // categoryElement.setAttribute("Background", this.config.rootNodeBackgroundColor);
143-
// categoryElement.setAttribute("IsTag", "True");
144-
// this.addNode(categoriesElement, categoryElement);
145-
categories.forEach(category => {
146-
this.addCategory(xmlDoc, categoriesElement, category);
147+
Object.keys(categories).forEach(nodeType => {
148+
this.addCategory(xmlDoc, categoriesElement, categories[nodeType]);
147149
});
148150
}
149151

150-
public addProperties(xmlDoc: Document) {
152+
private addProperties(xmlDoc: Document) {
151153
const propertiesElement = this.addNodeToRoot(xmlDoc, "Properties");
152154
this.addProperty(xmlDoc, propertiesElement, "ComponentFilename", "System.String");
153155
this.addProperty(xmlDoc, propertiesElement, "Background", "System.Windows.Media.Brush");
@@ -169,7 +171,7 @@ export class DgmlManager {
169171
this.addNode(propertiesElement, propertyElement);
170172
}
171173

172-
public addStyles(xmlDoc: Document) {
174+
private addStyles(xmlDoc: Document) {
173175
const stylesElement = this.addNodeToRoot(xmlDoc, "Styles");
174176
const styleElement = xmlDoc.createElement("Style");
175177
styleElement.setAttribute("TargetType", "Node");

‎src/model/Attribute.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
2+
export class Attribute {
3+
4+
constructor(name: string, value: string) {
5+
this.name = name;
6+
this. value = value;
7+
}
8+
9+
public name: string;
10+
public value: string;
11+
12+
}

‎src/model/Node.ts‎

Lines changed: 39 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { BoundingBox, NodeType, Position, Project } from "@model";
1+
import { Attribute, BoundingBox, NodeType, Position, Project } from "@model";
22
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: { name: string, value: string}[] = []) {
6+
constructor(id: string, name: string, isRoot: boolean, nodeType: NodeType = NodeType.none, position: Position | undefined = undefined, boundingBox: BoundingBox | undefined = undefined, attributes: Attribute[] = []) {
77
this.id = id;
88
this.name = name;
99
this.isRoot = isRoot;
@@ -18,25 +18,28 @@ export class Node {
1818
public position: Position | undefined;
1919
public boundingBox: BoundingBox | undefined;
2020
public nodeType: NodeType;
21-
public attributes: { name: string, value: string}[];
21+
public attributes: Attribute[];
2222

2323
public toJsonString(): string {
2424
let nodeColorAttr = '';
2525
switch (this.nodeType) {
2626
case NodeType.rootNode:
27-
nodeColorAttr = `, color: "${this.config.rootNodeBackgroundColor}", shape: "${this.config.visNodeShape}"`;
27+
nodeColorAttr = `, color: "${this.getNodeTypeColor(NodeType.rootNode)}", shape: "${this.config.visNodeShape}"`;
2828
break;
2929
case NodeType.component:
30-
nodeColorAttr = `, color: "${this.config.componentNodeBackgroundColor}", shape: "${this.config.componentNodeShape}"`;
30+
nodeColorAttr = `, color: "${this.getNodeTypeColor(NodeType.component)}", shape: "${this.config.componentNodeShape}"`;
3131
break;
3232
case NodeType.module:
33-
nodeColorAttr = `, color: "${this.config.moduleNodeBackgroundColor}", shape: "${this.config.moduleNodeShape}"`;
33+
nodeColorAttr = `, color: "${this.getNodeTypeColor(NodeType.module)}", shape: "${this.config.moduleNodeShape}"`;
3434
break;
3535
case NodeType.pipe:
36-
nodeColorAttr = `, color: "${this.config.pipeNodeBackgroundColor}", shape: "${this.config.pipeNodeShape}"`;
36+
nodeColorAttr = `, color: "${this.getNodeTypeColor(NodeType.pipe)}", shape: "${this.config.pipeNodeShape}"`;
3737
break;
3838
case NodeType.directive:
39-
nodeColorAttr = `, color: "${this.config.directiveNodeBackgroundColor}", shape: "${this.config.directiveNodeShape}"`;
39+
nodeColorAttr = `, color: "${this.getNodeTypeColor(NodeType.directive)}", shape: "${this.config.directiveNodeShape}"`;
40+
break;
41+
case NodeType.injectable:
42+
nodeColorAttr = `, color: "${this.getNodeTypeColor(NodeType.injectable)}", shape: "${this.config.injectableNodeShape}"`;
4043
break;
4144
default:
4245
nodeColorAttr = '';
@@ -46,6 +49,34 @@ export class Node {
4649
return `{id: "${this.id}", label: "${label}" ${nodeColorAttr}}`;
4750
}
4851

52+
public getNodeTypeColor(nodeType: NodeType): string {
53+
let nodeTypeColor = '';
54+
switch (nodeType) {
55+
case NodeType.rootNode:
56+
nodeTypeColor = this.config.rootNodeBackgroundColor;
57+
break;
58+
case NodeType.component:
59+
nodeTypeColor = this.config.componentNodeBackgroundColor;
60+
break;
61+
case NodeType.module:
62+
nodeTypeColor = this.config.moduleNodeBackgroundColor;
63+
break;
64+
case NodeType.pipe:
65+
nodeTypeColor = this.config.pipeNodeBackgroundColor;
66+
break;
67+
case NodeType.directive:
68+
nodeTypeColor = this.config.directiveNodeBackgroundColor;
69+
break;
70+
case NodeType.injectable:
71+
nodeTypeColor = this.config.injectableNodeBackgroundColor;
72+
break;
73+
default:
74+
nodeTypeColor = '';
75+
break;
76+
}
77+
return nodeTypeColor;
78+
}
79+
4980
public static getNodeType(project: Project, className: string) {
5081
let nodeType = NodeType.none;
5182
if (project.moduleNames.has(className) || className.endsWith('Module') || className.includes("Module.")) {

‎src/model/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export * from './ArrowType';
2+
export * from './Attribute';
23
export * from './BoundingBox';
34
export * from './Category';
45
export * from './Component';

0 commit comments

Comments
 (0)