Save as Png button changed to a dropdown. Node positions now messagesd back to the command when clicking Save as Dgml.

CoderAllan · CoderAllan · commit e9ab932245f4 · 2021-03-31T09:48:18.000+02:00
diff --git a/src/commands/generateDependencyInjectionGraph.ts b/src/commands/generateDependencyInjectionGraph.ts
@@ -20,6 +20,17 @@ export class GenerateDependencyInjectionGraph extends ShowHierarchyBase {
       undefined,
       this.extensionContext.subscriptions
     );
+    webview.onDidReceiveMessage(
+      message => {
+        switch (message.command) {
+          case 'saveAsDgml':
+            console.log(message.text);
+            return;
+        }
+      },
+      undefined,
+      this.extensionContext.subscriptions
+    );
     var workspaceFolder = this.fsUtils.getWorkspaceFolder();
     const errors: string[] = [];
     const project: Project = ModuleManager.scanProject(workspaceFolder, errors, this.isTypescriptFile);
diff --git a/src/commands/showComponentHierarchy.ts b/src/commands/showComponentHierarchy.ts
@@ -20,6 +20,17 @@ export class ShowComponentHierarchy extends ShowHierarchyBase {
       undefined,
       this.extensionContext.subscriptions
     );
+    webview.onDidReceiveMessage(
+      message => {
+        switch (message.command) {
+          case 'saveAsDgml':
+            console.log(message.text);
+            return;
+        }
+      },
+      undefined,
+      this.extensionContext.subscriptions
+    );
 
     var directoryPath: string = this.fsUtils.getWorkspaceFolder();
     const components = ComponentManager.findComponents(directoryPath);
diff --git a/src/commands/showModuleHierarchy.ts b/src/commands/showModuleHierarchy.ts
@@ -20,6 +20,17 @@ export class ShowModuleHierarchy extends ShowHierarchyBase {
       undefined,
       this.extensionContext.subscriptions
     );
+    webview.onDidReceiveMessage(
+      message => {
+        switch (message.command) {
+          case 'saveAsDgml':
+            console.log(message.text);
+            return;
+        }
+      },
+      undefined,
+      this.extensionContext.subscriptions
+    );
     var workspaceFolder = this.fsUtils.getWorkspaceFolder();
     const errors: string[] = [];
     const project: Project = ModuleManager.scanProject(workspaceFolder, errors, this.isTypescriptFile);
diff --git a/stylesheet/showHierarchy.css b/stylesheet/showHierarchy.css
@@ -40,4 +40,30 @@ input[type=button] {
 #hierarchicalOptions_direction, #hierarchicalOptions_sortmethod {
   display: none;
   margin-left: 3px;
-}
+}
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: #f1f1f1;
+  min-width: 130px;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  z-index: 1;
+}
+
+.dropdown-content a {
+  color: black;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+}
+
+.dropdown-content a:hover {background-color: #ddd;}
+
+.dropdown:hover .dropdown-content {display: block;}
+
diff --git a/templates/showHierarchy_Template.html b/templates/showHierarchy_Template.html
@@ -13,7 +13,13 @@
 
 <body>
   <div id="buttons">
-    <input type="button" id="saveAsPngButton" value="Save as png">
+    <div class="dropdown">
+      <input type="button" id="saveAsButton" value="Save as ...">
+      <div class="dropdown-content">
+        <a href="#" id="saveAsPngButton">Save as Png</a>
+        <a href="#" Id="saveAsDgmlButton">Save as Dgml</a>
+      </div>
+    </div>
     <input type="button" id="saveSelectionAsPngButton" value="Save selection as png">
     <input type="button" id="copyToClipboardButton" value="Copy to clipboard">
     <div id="hierarchical">Change layout:<input type="checkbox" id="showHierarchicalOptions"></div>
diff --git a/templates/showHierarchy_Template.js b/templates/showHierarchy_Template.js
@@ -53,6 +53,8 @@
   // add button event listeners
   const saveAsPngButton = document.getElementById('saveAsPngButton');
   saveAsPngButton.addEventListener('click', saveAsPng);
+  const saveAsDgmlButton = document.getElementById('saveAsDgmlButton');
+  saveAsDgmlButton.addEventListener('click', saveAsDgml);
   const saveSelectionAsPngButton = document.getElementById('saveSelectionAsPngButton');
   saveSelectionAsPngButton.addEventListener('click', saveSelectionAsPng);
   const copyToClipboardButton = document.getElementById('copyToClipboardButton');
@@ -242,6 +244,22 @@
     };
   }
 
+  function saveAsDgml() {
+    const nodeExport = [];
+    nodes.forEach(node => {
+      nodeExport.push({
+        id: node.id,
+        label: node.label,
+        color: node.color,
+        position: network.getPosition(node.id)
+      });
+    });
+    vscode.postMessage({
+      command: 'saveAsDgml',
+      text: nodeExport
+    });
+  }
+
   function copyToClipboard() {
     console.log('Not implemented yet...');
   }
