Skip to content

Commit 117e587

Browse files
CoderAllanCoderAllan
committed
Edges now has the color in the dgml file from the network graph
1 parent ce962e3 commit 117e587

File tree

7 files changed

+54
-26
lines changed

7 files changed

+54
-26
lines changed

‎src/commands/showComponentHierarchy.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { ShowHierarchyBase } from './showHierarchyBase';
22
import { Component, ComponentManager } from '@src';
3-
import { Edge, Node } from '@model';
3+
import { ArrowType, Edge, Node, NodeType } from '@model';
44
import * as fs from 'fs';
55
import * as path from 'path';
66
import * as vscode from 'vscode';
@@ -72,7 +72,7 @@ export class ShowComponentHierarchy extends ShowHierarchyBase {
7272
}
7373

7474
private generateDirectedGraphNodes(components: Component[], component: Component, isRoot: boolean, parentSelector: string, appendNodes: (nodeList: Node[]) => void) {
75-
appendNodes([new Node(component.selector, component.selector, isRoot)]);
75+
appendNodes([new Node(component.selector, component.selector, isRoot, isRoot ? NodeType.rootNode : NodeType.component)]);
7676
if (components.length > 0) {
7777
components.forEach((subComponent) => {
7878
if(parentSelector !== subComponent.selector) {
@@ -85,7 +85,7 @@ export class ShowComponentHierarchy extends ShowHierarchyBase {
8585
private generateDirectedGraphEdges(subComponents: Component[], selector: string, parentSelector: string, appendLinks: (edgeList: Edge[]) => void) {
8686
if (parentSelector.length > 0) {
8787
const id = this.edges.length;
88-
appendLinks([new Edge(id.toString(), parentSelector, selector)]);
88+
appendLinks([new Edge(id.toString(), parentSelector, selector, ArrowType.uses)]);
8989
}
9090
if (subComponents.length > 0 && selector !== parentSelector) {
9191
subComponents.forEach((subComponent) => {

‎src/config.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,8 @@ export class Config {
5858
public get injectableNodeBackgroundColor(): string { return this.getSetting<string>('graph.injectableNodeBackgroundColor', '#97c2fc'); }
5959
public get importEdgeColor(): string { return this.getSetting<string>('showModuleHierarchy.importEdgeColor', '#43a047'); }
6060
public get exportEdgeColor(): string { return this.getSetting<string>('showModuleHierarchy.exportEdgeColor', '#0288d1'); }
61+
public get injectableEdgeColor(): string { return this.getSetting<string>('showModuleHierarchy.exportEdgeColor', '#0288d1'); }
62+
public get usesEdgeColor(): string { return this.getSetting<string>('showModuleHierarchy.exportEdgeColor', '#0288d1'); }
6163
public get maximumNodeLabelLength(): number { return this.getSetting<number>('showModuleHierarchy.maximumNodeLabelLength', -1); }
6264

6365
// ComponentHierarchyMarkdown

‎src/dgmlManager.ts‎

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

33
export class DgmlManager {
44

@@ -46,7 +46,7 @@ export class DgmlManager {
4646
}
4747
}
4848

49-
private addLinkNode(xmlDoc: Document, element: Element | null, source: string, target: string) {
49+
private addLinkNode(xmlDoc: Document, element: Element | null, source: string, target: string, categoryId: string) {
5050
if (element !== null) {
5151
let nodeAlreadyAdded = false;
5252
if (element.childNodes.length > 0) {
@@ -65,6 +65,7 @@ export class DgmlManager {
6565
const linkElement = xmlDoc.createElement("Link");
6666
linkElement.setAttribute("Source", source);
6767
linkElement.setAttribute("Target", target);
68+
linkElement.setAttribute("Category", categoryId);
6869
element.appendChild(linkElement);
6970
}
7071
}
@@ -82,10 +83,14 @@ export class DgmlManager {
8283
this.generateDirectedGraphNodesXml(xmlDoc, node, nodesElement);
8384
const categoryId = NodeType[node.nodeType];
8485
if (!(categoryId in categoryDictionary)) {
85-
categoryDictionary[categoryId] = new Category(categoryId, categoryId, node.getNodeTypeColor(node.nodeType));
86+
categoryDictionary[categoryId] = new Category(categoryId, categoryId, node.getNodeTypeColor(node.nodeType), '');
8687
}
8788
});
8889
edges.forEach(edge => {
90+
const categoryId = ArrowType[edge.arrowType];
91+
if (!(categoryId in categoryDictionary)) {
92+
categoryDictionary[categoryId] = new Category(categoryId, categoryId, '', edge.getEdgeTypeColor(edge.arrowType));
93+
}
8994
this.generateDirectedGraphLinksXml(xmlDoc, edge, linksElement);
9095
});
9196
this.addCategoriesAndStyles(xmlDoc, categoryDictionary);
@@ -128,15 +133,21 @@ export class DgmlManager {
128133
}
129134

130135
private generateDirectedGraphLinksXml(xmlDoc: Document, edge: Edge, linksElement: Element | null) {
131-
this.addLinkNode(xmlDoc, linksElement, edge.source, edge.target);
136+
const categoryId = ArrowType[edge.arrowType];
137+
this.addLinkNode(xmlDoc, linksElement, edge.source, edge.target, categoryId);
132138
}
133139

134140
private addCategory(xmlDoc: Document, categoriesElement: Element | null, category: Category) {
135-
if (categoriesElement !== null) {
141+
if (categoriesElement !== null && ( category.backgroundColor || category.stroke )) {
136142
const categoryElement = xmlDoc.createElement("Category");
137143
categoryElement.setAttribute("Id", category.id);
138144
categoryElement.setAttribute("Label", category.label);
139-
categoryElement.setAttribute("Background", category.backgroundColor);
145+
if (category.backgroundColor) {
146+
categoryElement.setAttribute("Background", category.backgroundColor);
147+
}
148+
if (category.stroke) {
149+
categoryElement.setAttribute("Stroke", category.stroke);
150+
}
140151
categoryElement.setAttribute("IsTag", "True");
141152
this.addNode(categoriesElement, categoryElement);
142153
}

‎src/model/ArrowType.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,6 @@ export enum ArrowType {
22
none = 0,
33
import = 1,
44
export = 2,
5-
injectable = 3
5+
injectable = 3,
6+
uses = 4
67
}

‎src/model/Category.ts‎

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

22
export class Category {
33

4-
constructor(id: string, label: string, backGroundColor: string) {
4+
constructor(id: string, label: string, backGroundColor: string, stroke: string) {
55
this.id = id;
66
this.label = label;
77
this.backgroundColor = backGroundColor;
8+
this.stroke = stroke;
89
}
910

1011
public id: string;
1112
public label: string;
1213
public backgroundColor: string;
14+
public stroke: string;
1315
}

‎src/model/Edge.ts‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,18 +15,29 @@ export class Edge {
1515
public arrowType: ArrowType;
1616

1717
public toJsonString(): string {
18-
let arrowColorAttr = '';
19-
switch (this.arrowType) {
18+
let arrowColorAttr = `, color: "${this.getEdgeTypeColor(this.arrowType)}"`;;
19+
return `{from: "${this.source}", to: "${this.target}", arrows: arrowAttr${arrowColorAttr} }`;
20+
}
21+
22+
public getEdgeTypeColor(arrowType: ArrowType): string {
23+
let edgeTypeColor = '';
24+
switch (arrowType) {
2025
case ArrowType.import:
21-
arrowColorAttr = `, color: "${this.config.importEdgeColor}"`;
26+
edgeTypeColor = this.config.importEdgeColor;
2227
break;
2328
case ArrowType.export:
24-
arrowColorAttr = `, color: "${this.config.exportEdgeColor}"`;
29+
edgeTypeColor = this.config.exportEdgeColor;
30+
break;
31+
case ArrowType.injectable:
32+
edgeTypeColor = this.config.injectableEdgeColor;
33+
break;
34+
case ArrowType.uses:
35+
edgeTypeColor = this.config.usesEdgeColor;
2536
break;
2637
default:
27-
arrowColorAttr = '';
38+
edgeTypeColor = '';
2839
break;
2940
}
30-
return `{from: "${this.source}", to: "${this.target}", arrows: arrowAttr ${arrowColorAttr} }`;
41+
return edgeTypeColor;
3142
}
3243
}

‎src/model/Node.ts‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -21,32 +21,33 @@ export class Node {
2121
public attributes: Attribute[];
2222

2323
public toJsonString(): string {
24-
let nodeColorAttr = '';
24+
let nodeShapeAttr = '';
2525
switch (this.nodeType) {
2626
case NodeType.rootNode:
27-
nodeColorAttr = `, color: "${this.getNodeTypeColor(NodeType.rootNode)}", shape: "${this.config.visNodeShape}"`;
27+
nodeShapeAttr = `, shape: "${this.config.visNodeShape}"`;
2828
break;
2929
case NodeType.component:
30-
nodeColorAttr = `, color: "${this.getNodeTypeColor(NodeType.component)}", shape: "${this.config.componentNodeShape}"`;
30+
nodeShapeAttr = `, shape: "${this.config.componentNodeShape}"`;
3131
break;
3232
case NodeType.module:
33-
nodeColorAttr = `, color: "${this.getNodeTypeColor(NodeType.module)}", shape: "${this.config.moduleNodeShape}"`;
33+
nodeShapeAttr = `, shape: "${this.config.moduleNodeShape}"`;
3434
break;
3535
case NodeType.pipe:
36-
nodeColorAttr = `, color: "${this.getNodeTypeColor(NodeType.pipe)}", shape: "${this.config.pipeNodeShape}"`;
36+
nodeShapeAttr = `, shape: "${this.config.pipeNodeShape}"`;
3737
break;
3838
case NodeType.directive:
39-
nodeColorAttr = `, color: "${this.getNodeTypeColor(NodeType.directive)}", shape: "${this.config.directiveNodeShape}"`;
39+
nodeShapeAttr = `, shape: "${this.config.directiveNodeShape}"`;
4040
break;
4141
case NodeType.injectable:
42-
nodeColorAttr = `, color: "${this.getNodeTypeColor(NodeType.injectable)}", shape: "${this.config.injectableNodeShape}"`;
42+
nodeShapeAttr = `, shape: "${this.config.injectableNodeShape}"`;
4343
break;
4444
default:
45-
nodeColorAttr = '';
45+
nodeShapeAttr = '';
4646
break;
4747
}
48+
const nodeColorAttr = `, color: "${this.getNodeTypeColor(this.nodeType)}"`;
4849
const label = this.config.maximumNodeLabelLength !== -1 && this.name.length > this.config.maximumNodeLabelLength ? this.name.substr(0, this.config.maximumNodeLabelLength) + '...' : this.name;
49-
return `{id: "${this.id}", label: "${label}" ${nodeColorAttr}}`;
50+
return `{id: "${this.id}", label: "${label}"${nodeColorAttr}${nodeShapeAttr}}`;
5051
}
5152

5253
public getNodeTypeColor(nodeType: NodeType): string {

0 commit comments

Comments
 (0)