ShowComponentHierarchy can now save the generated graph to a png file.

Author: CoderAllan

package-lock.json

@@ -13,8 +13,8 @@
 		"onCommand:angulartools.componentHierarchyDgml",
 		"onCommand:angulartools.listAllImports",
 		"onCommand:angulartools.projectDirectoryStructure",
-    "onCommand:angulartools.packageJsonToMarkdown",
-    "onCommand:angulartools.showComponentHierarchy"
+		"onCommand:angulartools.packageJsonToMarkdown",
+		"onCommand:angulartools.showComponentHierarchy"
 	],
 	"main": "./out/extension.js",
 	"contributes": {
@@ -34,11 +34,11 @@
 			{
 				"command": "angulartools.componentHierarchyDgml",
 				"title": "AngularTools: Generate a Directed Graph file (dgml) showing the components in the current project."
-      },
-      {
-        "command": "angulartools.showComponentHierarchy",
-        "title": "AngularTools: Show a graph representing the component hierarchy."
-      }
+			},
+			{
+				"command": "angulartools.showComponentHierarchy",
+				"title": "AngularTools: Show a graph representing the component hierarchy."
+			}
 		]
 	},
 	"scripts": {
@@ -64,6 +64,7 @@
 	},
 	"dependencies": {
 		"@types/xmldom": "^0.1.30",
+		"js-base64": "^3.6.0",
 		"node-fetch": "^2.6.1",
 		"prettify-xml": "^1.2.0",
 		"xmldom": "^0.3.0",

package.json

@@ -1,9 +1,36 @@
-#network {
+.fullScreen {
   position: absolute;
   top: 0px;
   right: 0px;
   bottom: 0px;
   left: 0px;
   display: block;
-  border: 1px solid lightgray;
+}
+
+#buttons {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  border : 1px solid #000;
+  border-radius: 5px;
+  background-color: #aaa;
+  z-index: 100;
+  padding: 5px 5px 5px 10px;
+  margin: 5px;
+}
+
+#helpText {
+  display: none;
+  color: #000;
+  z-index: 300;
+}
+
+input[type=button] {
+  margin-right: 10px;
+}
+
+#selectionLayer {
+  display: none;
+  background-color: rgba(240, 240, 240, 0.4);
+  z-index: 200;
 }

src/commands/showComponentHierarchy/showComponentHierarchy.css

@@ -2,6 +2,7 @@ import * as vscode from 'vscode';
 import * as fs from 'fs';
 import * as path from 'path';
 import { FileSystemUtils } from "../../filesystemUtils";
+import { Base64 } from 'js-base64';
 
 class Component {
 
@@ -51,16 +52,29 @@ class Edge {
 export class ShowComponentHierarchy {
 
   private extensionContext: vscode.ExtensionContext;
+  private fsUtils = new FileSystemUtils();
   constructor(context: vscode.ExtensionContext) {
     this.extensionContext = context;
   }
   public static get commandName(): string { return 'showComponentHierarchy'; }
 
   public execute(webview: vscode.Webview) {
-    const fsUtils = new FileSystemUtils();
-    var directoryPath: string = fsUtils.getWorkspaceFolder();
+
+    webview.onDidReceiveMessage(
+      message => {
+        switch (message.command) {
+          case 'saveAsPng':
+            this.saveAsPng(message.text);
+            return;
+        }
+      },
+      undefined,
+      this.extensionContext.subscriptions
+    );
+
+    var directoryPath: string = this.fsUtils.getWorkspaceFolder();
     const excludeDirectories = ['bin', 'obj', 'node_modules', 'dist', 'packages', '.git', '.vs', '.github'];
-    const componentFilenames = fsUtils.listFiles(directoryPath, excludeDirectories, this.isComponentFile);
+    const componentFilenames = this.fsUtils.listFiles(directoryPath, excludeDirectories, this.isComponentFile);
     const components = this.findComponents(componentFilenames);
     this.enrichComponentsFromComponentTemplates(components);
 
@@ -98,8 +112,8 @@ export class ShowComponentHierarchy {
       const outputJsFilename = 'showComponentHierarchy/showComponentHierarchy.js';
       let htmlContent = this.generateHtmlContent(webview, outputJsFilename);
 
-      fsUtils.writeFile(this.extensionContext?.asAbsolutePath(path.join('src', 'commands', 'showComponentHierarchy/showComponentHierarchy.html')), htmlContent, () => { } ); // For debugging
-      fsUtils.writeFile(
+      this.fsUtils.writeFile(this.extensionContext?.asAbsolutePath(path.join('src', 'commands', 'showComponentHierarchy/showComponentHierarchy.html')), htmlContent, () => { }); // For debugging
+      this.fsUtils.writeFile(
         this.extensionContext?.asAbsolutePath(path.join('src', 'commands', outputJsFilename)),
         jsContent,
         () => {
@@ -252,4 +266,20 @@ export class ShowComponentHierarchy {
     htmlContent = htmlContent.replace('showComponentHierarchy.js', jsUri.toString());
     return htmlContent;
   }
+
+  private saveAsPng(messageText: string) {
+    const dataUrl = messageText.split(',');
+    if (dataUrl.length > 0) {
+      const u8arr = Base64.toUint8Array(dataUrl[1]);
+
+      const workspaceDirectory = this.fsUtils.getWorkspaceFolder();
+      const newFilePath = path.join(workspaceDirectory, 'ComponentHierarchy.png');
+      this.fsUtils.writeFile(newFilePath, u8arr, () => {});
+
+      const angularToolsOutput = vscode.window.createOutputChannel("Angular Tools");
+      angularToolsOutput.clear();
+      angularToolsOutput.appendLine(`The file ComponentHierarchy.png has been created in the root of the workspace.\n`);
+      angularToolsOutput.show();      
+    }
+  }
 }

src/commands/showComponentHierarchy/showComponentHierarchy.ts

@@ -6,13 +6,19 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <link href="showComponentHierarchy.css" rel="stylesheet">
-  
+
   <script type="text/javascript" src="vis-network.min.js"></script>
 
 </head>
 
 <body>
-  <div id="network">Testing...</div>
+  <div id="buttons">
+    <input type="button" id="saveAsPngButton" value="Save as png">
+    <input type="button" id="copyToClipboardButton" value="Copy to clipboard">
+    <div id="helpText">Click and drag to select the area to be saved.</div>
+  </div>
+  <div id="selectionLayer" class="fullScreen"><canvas id="captureCanvas"></canvas></div>
+  <div id="network" class="fullScreen"></div>
   <script type="text/javascript" src="showComponentHierarchy.js"></script>
 </body>
 

src/commands/showComponentHierarchy/showComponentHierarchy_Template.html

@@ -24,4 +24,101 @@
   var container = document.getElementById('network');
   var network = new vis.Network(container, data, options);
 
+  const vscode = acquireVsCodeApi();
+  const helpTextDiv = document.getElementById('helpText');
+  let lastMouseX = lastMouseY = 0;
+  let mouseX = mouseY = 0;
+  let selection;
+  // get the vis.js canvas
+  const graphDiv = document.getElementById('network');
+  const visDiv = graphDiv.firstElementChild;
+  const graphCanvas = visDiv.firstElementChild;
+  const selectionLayer = document.getElementById('selectionLayer');
+  const selectionCanvas = selectionLayer.firstElementChild;
+  let selectionCanvasContext;
+
+  // add button event listeners
+  const saveAsPngButton = document.getElementById('saveAsPngButton');
+  saveAsPngButton.addEventListener('click', saveAsPng);
+  const copyToClipboardButton = document.getElementById('copyToClipboardButton');
+  copyToClipboardButton.addEventListener('click', copyToClipboard);
+  copyToClipboardButton.style['display'] = 'none'; // TODO: Remove when copyToClipboard is implemented
+
+  function mouseUpEventListener(event) {
+    // Convert the canvas to image data that can be saved
+    const aspectRatioX = graphCanvas.width / selectionCanvas.width;
+    const aspectRatioY = graphCanvas.height / selectionCanvas.height;
+    const finalSelectionCanvas = document.createElement('canvas');
+    finalSelectionCanvas.width = selection.width;
+    finalSelectionCanvas.height = selection.height;
+    const finalSelectionCanvasContext = finalSelectionCanvas.getContext('2d');
+    finalSelectionCanvasContext.drawImage(graphCanvas, selection.top * aspectRatioX, selection.left * aspectRatioY, selection.width * aspectRatioX, selection.height * aspectRatioY, 0, 0, selection.width, selection.height);
+
+    // Call back to the extension context to save the selected image to the workspace folder.
+    vscode.postMessage({
+      command: 'saveAsPng',
+      text: finalSelectionCanvas.toDataURL()
+    });
+    finalSelectionCanvas.remove();
+    selectionCanvasContext = undefined;
+    selection = {};
+    // hide the help text
+    helpTextDiv.style['display'] = 'none';
+    // hide selection layer and remove event listeners
+    selectionLayer.removeEventListener('mouseup', mouseUpEventListener);
+    selectionLayer.removeEventListener('mousedown', mouseDownEventListener);
+    selectionLayer.removeEventListener('mousemove', mouseMoveEventListener);
+    selectionLayer.style['display'] = 'none';
+  }
+
+  function mouseDownEventListener(event) {
+    lastMouseX = parseInt(event.clientX - selectionCanvas.offsetLeft);
+    lastMouseY = parseInt(event.clientY - selectionCanvas.offsetTop);
+    selectionCanvasContext = selectionCanvas.getContext("2d");
+  }
+
+  function mouseMoveEventListener(event) {
+    mouseX = parseInt(event.clientX - selectionCanvas.offsetLeft);
+    mouseY = parseInt(event.clientY - selectionCanvas.offsetTop);
+    if (selectionCanvasContext != undefined) {
+      selectionCanvasContext.clearRect(0, 0, window.innerWidth, window.innerHeight);
+      selectionCanvasContext.beginPath();
+      const width = mouseX - lastMouseX;
+      const height = mouseY - lastMouseY;
+      selectionCanvasContext.rect(lastMouseX, lastMouseY, width, height);
+      selection = { // Save the current position and size to be used when the mouseup event is fired
+        'top': lastMouseX,
+        'left': lastMouseY,
+        'height': height,
+        'width': width
+      };
+      selectionCanvasContext.strokeStyle = 'red';
+      selectionCanvasContext.lineWidth = 2;
+      selectionCanvasContext.stroke();
+    }
+  }
+
+  function saveAsPng() {
+    // show the help text
+    helpTextDiv.style['display'] = 'block';
+
+    // show the selection layer
+    selectionLayer.style['display'] = 'block';
+
+    // make sure the selection canvas covers the whole screen
+    selectionCanvas.width = window.innerWidth;
+    selectionCanvas.height = window.innerHeight;
+    // reset the current context and selection
+    selectionCanvasContext = undefined;
+    selection = {};
+
+    selectionLayer.addEventListener("mouseup", mouseUpEventListener, true);
+    selectionLayer.addEventListener("mousedown", mouseDownEventListener , true);
+    selectionLayer.addEventListener("mousemove", mouseMoveEventListener, true);
+  }
+
+  function copyToClipboard() {
+    console.log('Not implemented yet...');
+  }
+
 }());

src/commands/showComponentHierarchy/showComponentHierarchy_Template.js

@@ -61,7 +61,7 @@ export class FileSystemUtils {
     return directoryPath;
   }
 
-  public writeFile(filename: string, content: string, callback: () => void) {
+  public writeFile(filename: string, content: string | Uint8Array, callback: () => void) {
     fs.writeFile(filename, content, function (err) {
       if (err) {
         return console.error(err);