You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: CHANGELOG.md
+5Lines changed: 5 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,5 +1,10 @@
1
1
# Change Log
2
2
3
+
## Version 1.7.0
4
+
5
+
- All three graph types: Dependency injection graph, module hierarchy graph and component hierarchy graph can now be saved as a dgml file.
6
+
- Component hierarchy dgml command has been removed because its now obsolete.
7
+
3
8
## Version 1.6.0
4
9
5
10
- Added Dependency injection graph command that visualizes what services are injected into the components. Graph also include all the inputs, outputs, viewchild, viewchildren, contentchild and contentchildren of each component.
Copy file name to clipboardExpand all lines: README.md
+34-14Lines changed: 34 additions & 14 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -46,7 +46,7 @@ In the visualization the components will by default be colored dark blue and the
46
46
47
47
The 'Show the component hierarchy' command is used for visualizing the component hierarchy and Angular application. It analyses all the *.component.ts files and all the corresponding template files to determine how the component use each other and then generates a directed graph showing the component hierarchy.
48
48
49
-
The command uses a vscode webview extension component to render the hierarchy using html, javascript and the [Vis.js](https://visjs.org/index.html) javascript library. This has the downside that copying the generated graph to the clipboard is not yet possible due to limitations in the vscode extension api. So to overcome this limitation the generated graph can be saved as a Png file to the root of the project you are analyzing.
49
+
The command uses a vscode webview extension component to render the hierarchy using html, javascript and the [Vis.js](https://visjs.org/index.html) javascript library. This has the downside that copying the generated graph to the clipboard is not yet possible due to limitations in the vscode extension api. So to overcome this limitation the generated graph can be saved as a Png file to the root of the project you are analyzing. You can also save the graph in the Dgml format.
@@ -107,22 +107,42 @@ See the full list of settings below the screenshot.
107
107
| Setting | Description |
108
108
| --- | --- |
109
109
| angularTools.excludeDirectories | Semicolon separated list of directories that should be excluded when scanning for for Angular components. |
110
-
| angularTools.componentHierarchyDgml.defaultGraphFilename | The default filename used when saving a component hierarchy to a Directed Graph Markup Language (Dgml) file. |
111
-
| angularTools.componentHierarchyDgml.graphLayout | 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. |
112
-
| angularTools.componentHierarchyDgml.graphDirection | This will make the layout algorithm position the graph nodes in the specified direction. |
113
-
| angularTools.componentHierarchyDgml.rootNodeBackgroundColor | The color of the root nodes of the directed graph. The string should be in rgba format. |
110
+
| angularTools.dgmlGraph.graphLayout | 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. |
111
+
| angularTools.dgmlGraph.graphDirection | This will make the layout algorithm position the graph nodes in the specified direction. |
112
+
| angularTools.dependencyInjectionGraph.pngGraphFilename | The default name used when saving the dependency injection hierarchy graph to a Png file. |
113
+
| angularTools.dependencyInjectionGraph.dgmlGraphFilename| The default filename used when saving a dependency injection hierarchy graph to a Directed Graph Markup Language (Dgml) file. |
114
+
| angularTools.dependencyInjectionGraph.edgeArrowToType | The default ending of the edges. |
115
+
| angularTools.showComponentHierarchy.componentHierarchyPngFilename | The default name used when saving the component hierarchy to a Png file. |
116
+
| angularTools.showComponentHierarchy.componentHierarchyDgmlGraphFilename | The default name used when saving the component hierarchy to a Dgml file. |
117
+
| angularTools.showComponentHierarchy.edgeArrowToType | The default ending of the edges. |
118
+
| angularTools.showModuleHierarchy.moduleHierarchyPngFilename | The default name used when saving the module hierarchy to a Png file. |
119
+
| angularTools.showModuleHierarchy.moduleHierarchyDgmlGraphFilename | The default name used when saving the module hierarchy to a Dgml file. |
120
+
| angularTools.showModuleHierarchy.edgeArrowToType | The default ending of the edges. |
121
+
| angularTools.graphSelection.graphSelectionGuidelineColor | The color of the guidelines used when selecting part of a component hierarchy graph. The string should be in rgb format or standard css color names. |
122
+
| angularTools.graphSelection.graphSelectionGuidelineWidth | The width of the guide lines shown when selecting part of a component hierarchy graph |
123
+
| angularTools.graphSelection.graphSelectionColor | The color of the selection rectangle used when selecting part of a component hierarchy graph. The string should be in rgb format or standard css color names. |
124
+
| angularTools.graphSelection.graphSelectionWidth | The width of the selection rectangle shown when selecting part of a component hierarchy graph |
125
+
| angularTools.graphNodes.rootNodeBackgroundColor | The color of the root nodes of the component hierarchy graph. The string should be in rgba format or standard css color names. |
126
+
| angularTools.graphNodes.rootNodeNodeShape | 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. |
127
+
| angularTools.graphNodes.componentNodeShape | 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. |
128
+
| angularTools.graphNodes.moduleNodeBackgroundColor | The default color of the nodes representing modules. |
129
+
| angularTools.graphNodes.moduleNodeShape | 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. |
130
+
| angularTools.graphNodes.pipeNodeBackgroundColor | The default color of the nodes representing pipes. |
131
+
| angularTools.graphNodes.pipeNodeShape | 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. |
132
+
| angularTools.graphNodes.directiveNodeBackgroundColor | The default color of the nodes representing directives. |
133
+
| angularTools.graphNodes.directiveNodeShape | 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. |
134
+
| angularTools.graphNodes.injectableNodeBackgroundColor | The default color of the nodes representing injected components. |
135
+
| angularTools.graphNodes.injectableNodeShape | 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. |
136
+
| angularTools.graphNodes.maximumNodeLabelLength | 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. |
137
+
| angularTools.edges.importEdgeColor | The default color of the edges representing imports. |
138
+
| angularTools.edges.exportEdgeColor | The default color of the edges representing exports. |
139
+
| angularTools.edges.injectableEdgeColor | The default color of the edges representing injectables. |
140
+
| angularTools.edges.usesEdgeColor | The default color of the edges representing components using other components. |
114
141
| angularTools.packageJsonMarkdownFilename | The default filename used when saving the packages.json as a markdown file. |
115
142
| angularTools.projectDirectoryStructureMarkdownFilename | The default filename used when saving the project directory structure as a markdown file. |
116
-
| angularTools.showComponentHierarchy.rootNodeBackgroundColor | The color of the root nodes of the component hierarchy graph. The string should be in rgba format or standard css color names. |
117
-
| angularTools.showComponentHierarchy.edgeArrowToType | The default ending of the edges. |
118
-
| angularTools.showComponentHierarchy.nodeShape | 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. |
119
-
| angularTools.showComponentHierarchy.graphSelectionGuidelineColor | 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. |
120
-
| angularTools.showComponentHierarchy.graphSelectionGuidelineWidth | The width of the guide lines shown when selecting part of a component hierarchy graph |
121
-
| angularTools.showComponentHierarchy.graphSelectionColor | 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. |
122
-
| angularTools.showComponentHierarchy.graphSelectionWidth | The width of the selection rectangle shown when selecting part of a component hierarchy graph |
123
-
| angularTools.showComponentHierarchy.componentHierarchyFilename | The default name used when saving the component hierarchy to a Png file. |
124
143
| angularTools.componentHierarchyMarkdownFilename | The default name used when saving the component hierarchy to a markdown file. |
125
-
| angularTools.modulesToMarkdownFilename | The default name used when saving the modules to a markdown file. |
144
+
| angularTools.modulesToMarkdownFilename | The default name used when saving the project module to a markdown file. |
Copy file name to clipboardExpand all lines: package.json
+21-21Lines changed: 21 additions & 21 deletions
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,7 @@
4
4
"displayName": "AngularTools",
5
5
"description": "AngularTools is a collection of tools for exploring an Angular project, help you with documenting, reverse engineering a project or help when refactoring.",
"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."
189
+
"description": "The color of the guidelines used when selecting part of a component hierarchy graph. The string should be in rgb format or standard css color names."
"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."
199
+
"description": "The color of the selection rectangle used when selecting part of a component hierarchy graph. The string should be in rgb format or standard css color names."
0 commit comments