Network seed is now persisted and reused when activating a command multiple times.

Author: CoderAllan

src/commands/generateDependencyInjectionGraph.ts

@@ -1,6 +1,6 @@
 import { ShowHierarchyBase } from './showHierarchyBase';
 import { ModuleManager } from '@src';
-import { ArrowType, Component, Edge, Node, NodeType, Project } from '@model';
+import { ArrowType, Component, Edge, GraphState, Node, NodeType, Project } from '@model';
 import * as fs from 'fs';
 import * as path from 'path';
 import * as vscode from 'vscode';
@@ -21,6 +21,12 @@ export class GenerateDependencyInjectionGraph extends ShowHierarchyBase {
           case 'saveAsDot':
             this.saveAsDot(this.config.dependencyInjectionDotGraphFilename, message.text, 'dependencyInjectionGraph', `'The components hierarchy has been analyzed and a GraphViz (dot) file '${this.config.dependencyInjectionDotGraphFilename}' has been created'`);
             return;
+          case 'setGraphState':
+          const newGraphState: GraphState = JSON.parse(message.text);
+          this.graphState.networkSeed = newGraphState.networkSeed;
+          this.graphState.nodePositions = newGraphState.nodePositions;
+            this.setNewState(this.graphState);
+            return;
         }
       },
       undefined,
@@ -112,6 +118,7 @@ export class GenerateDependencyInjectionGraph extends ShowHierarchyBase {
     jsContent = jsContent.replace('ctx.lineWidth = 1; // graph selection guideline width', `ctx.lineWidth = ${this.config.graphSelectionGuidelineWidth}; // graph selection guideline width`);
     jsContent = jsContent.replace('selectionCanvasContext.strokeStyle = \'red\';', `selectionCanvasContext.strokeStyle = '${this.config.graphSelectionColor}';`);
     jsContent = jsContent.replace('selectionCanvasContext.lineWidth = 2;', `selectionCanvasContext.lineWidth = ${this.config.graphSelectionWidth};`);
+    jsContent = this.setGraphState(jsContent);
     return jsContent;
   }
 }

src/commands/showComponentHierarchy.ts

@@ -1,6 +1,6 @@
 import { ShowHierarchyBase } from './showHierarchyBase';
 import { Component, ComponentManager } from '@src';
-import { ArrowType, Edge, Node, NodeType } from '@model';
+import { ArrowType, Edge, GraphState, Node, NodeType } from '@model';
 import * as fs from 'fs';
 import * as path from 'path';
 import * as vscode from 'vscode';
@@ -24,6 +24,12 @@ export class ShowComponentHierarchy extends ShowHierarchyBase {
           case 'saveAsDot':
             this.saveAsDot(this.config.componentHierarchyDotGraphFilename, message.text, 'componentHierarchy', `'The component hierarchy has been analyzed and a GraphViz (dot) file '${this.config.componentHierarchyDotGraphFilename}' has been created'`);
             return;
+          case 'setGraphState':
+            const newGraphState: GraphState = JSON.parse(message.text);
+            this.graphState.networkSeed = newGraphState.networkSeed;
+            this.graphState.nodePositions = newGraphState.nodePositions;
+            this.setNewState(this.graphState);
+            return;
         }
       },
       undefined,
@@ -112,6 +118,7 @@ export class ShowComponentHierarchy extends ShowHierarchyBase {
     jsContent = jsContent.replace('ctx.lineWidth = 1; // graph selection guideline width', `ctx.lineWidth = ${this.config.graphSelectionGuidelineWidth}; // graph selection guideline width`);
     jsContent = jsContent.replace('selectionCanvasContext.strokeStyle = \'red\';', `selectionCanvasContext.strokeStyle = '${this.config.graphSelectionColor}';`);
     jsContent = jsContent.replace('selectionCanvasContext.lineWidth = 2;', `selectionCanvasContext.lineWidth = ${this.config.graphSelectionWidth};`);
+    jsContent = this.setGraphState(jsContent);
     return jsContent;
   }
 }

src/commands/showHierarchyBase.ts

@@ -15,6 +15,7 @@ export class ShowHierarchyBase extends CommandBase {
   protected config = new Config();
   protected extensionContext: vscode.ExtensionContext;
   protected graphState: GraphState;
+  protected setNewState: (newGraphState: GraphState) => any;
   protected nodes: Node[] = [];
   protected edges: Edge[] = [];
   protected templateJsFilename: string = 'showHierarchy_Template.js';
@@ -24,9 +25,10 @@ export class ShowHierarchyBase extends CommandBase {
   protected showHierarchyCssFilename: string = 'showHierarchy.css';
   protected workspaceDirectory = this.fsUtils.getWorkspaceFolder();
 
-  constructor(context: vscode.ExtensionContext, graphState: GraphState) {
+  constructor(context: vscode.ExtensionContext, graphState: GraphState, setNewState: (newGraphState: GraphState) => any) {
     super();
     this.extensionContext = context;
+    this.setNewState = setNewState;
     this.graphState = graphState;
   }
   protected appendNodes = (nodeList: Node[]) => {
@@ -125,6 +127,13 @@ export class ShowHierarchyBase extends CommandBase {
     });
   }
 
+  protected setGraphState(jsContent: string): string {
+    if (this.graphState.networkSeed !== undefined) {
+      jsContent = jsContent.replace('var seed = network.getSeed();', `var seed = ${this.graphState.networkSeed};`);
+    }
+    return jsContent;
+  }
+
   protected generateHtmlContent(webview: vscode.Webview, outputJsFilename: string): string {
     let htmlContent = fs.readFileSync(this.extensionContext?.asAbsolutePath(path.join('templates', this.templateHtmlFilename)), 'utf8');
 

src/commands/showModuleHierarchy.ts

@@ -1,6 +1,6 @@
 import { ShowHierarchyBase } from './showHierarchyBase';
 import { ModuleManager } from '@src';
-import { ArrowType, Edge, Node, NodeType, Project } from '@model';
+import { ArrowType, Edge, GraphState, Node, NodeType, Project } from '@model';
 import * as fs from 'fs';
 import * as path from 'path';
 import * as vscode from 'vscode';
@@ -21,6 +21,12 @@ export class ShowModuleHierarchy extends ShowHierarchyBase {
           case 'saveAsDot':
             this.saveAsDot(this.config.moduleHierarchyDotGraphFilename, message.text, 'moduleHierarchy', `'The modules hierarchy has been analyzed and a GraphViz (dot) file '${this.config.moduleHierarchyDotGraphFilename}' has been created'`);
             return;
+          case 'setGraphState':
+            const newGraphState: GraphState = JSON.parse(message.text);
+            this.graphState.networkSeed = newGraphState.networkSeed;
+            this.graphState.nodePositions = newGraphState.nodePositions;
+            this.setNewState(this.graphState);
+            return;
         }
       },
       undefined,
@@ -104,6 +110,7 @@ export class ShowModuleHierarchy extends ShowHierarchyBase {
     jsContent = jsContent.replace('ctx.lineWidth = 1; // graph selection guideline width', `ctx.lineWidth = ${this.config.graphSelectionGuidelineWidth}; // graph selection guideline width`);
     jsContent = jsContent.replace('selectionCanvasContext.strokeStyle = \'red\';', `selectionCanvasContext.strokeStyle = '${this.config.graphSelectionColor}';`);
     jsContent = jsContent.replace('selectionCanvasContext.lineWidth = 2;', `selectionCanvasContext.lineWidth = ${this.config.graphSelectionWidth};`);
+    jsContent = this.setGraphState(jsContent);
     return jsContent;
   }
 }

src/extension.ts

@@ -49,7 +49,7 @@ export function activate(context: vscode.ExtensionContext) {
   context.subscriptions.push(componentHierarchyMarkdownDisposable);
 
   let componentHierarchyPanel: vscode.WebviewPanel | undefined = undefined;
-  const componentHierarchyGraphState: GraphState = new GraphState();
+  let componentHierarchyGraphState: GraphState = new GraphState();
   const showComponentHierarchyDisposable = vscode.commands.registerCommand(`${cmdPrefix}.${ShowComponentHierarchy.commandName}`, () => {
     if (componentHierarchyPanel !== undefined) {
       componentHierarchyPanel.reveal(vscode.ViewColumn.One);
@@ -66,13 +66,14 @@ export function activate(context: vscode.ExtensionContext) {
       }, null, context.subscriptions);
     }
     componentHierarchyPanel.onDidDispose(() => componentHierarchyPanel = undefined, undefined, context.subscriptions);
-    const command = new ShowComponentHierarchy(context, componentHierarchyGraphState);
+    const setNewState = (newGraphState: GraphState) => { componentHierarchyGraphState = newGraphState; };
+    const command = new ShowComponentHierarchy(context, componentHierarchyGraphState, setNewState);
     command.execute(componentHierarchyPanel.webview);
   });
   context.subscriptions.push(showComponentHierarchyDisposable);
 
   let moduleHierarchyPanel: vscode.WebviewPanel | undefined = undefined;
-  const moduleHierarchyGraphState: GraphState = new GraphState();
+  let moduleHierarchyGraphState: GraphState = new GraphState();
   const showModuleHierarchyDisposable = vscode.commands.registerCommand(`${cmdPrefix}.${ShowModuleHierarchy.commandName}`, () => {
     if (moduleHierarchyPanel !== undefined) {
       moduleHierarchyPanel.reveal(vscode.ViewColumn.One);
@@ -89,13 +90,14 @@ export function activate(context: vscode.ExtensionContext) {
       }, null, context.subscriptions);
     }
     moduleHierarchyPanel.onDidDispose(() => moduleHierarchyPanel = undefined, undefined, context.subscriptions);
-    const command = new ShowModuleHierarchy(context, moduleHierarchyGraphState);
+    const setNewState = (newGraphState: GraphState) => { moduleHierarchyGraphState = newGraphState; };
+    const command = new ShowModuleHierarchy(context, moduleHierarchyGraphState, setNewState);
     command.execute(moduleHierarchyPanel.webview);
   });
   context.subscriptions.push(showModuleHierarchyDisposable);
 
   let dependencyInjectionGraphPanel: vscode.WebviewPanel | undefined = undefined;
-  const dependencyInjectionGraphState: GraphState = new GraphState();
+  let dependencyInjectionGraphState: GraphState = new GraphState();
   const generateDependencyInjectionGraphDisposable = vscode.commands.registerCommand(`${cmdPrefix}.${GenerateDependencyInjectionGraph.commandName}`, () => {
     if (dependencyInjectionGraphPanel !== undefined) {
       dependencyInjectionGraphPanel.reveal(vscode.ViewColumn.One);
@@ -112,7 +114,8 @@ export function activate(context: vscode.ExtensionContext) {
       }, null, context.subscriptions);
     }
     dependencyInjectionGraphPanel.onDidDispose(() => dependencyInjectionGraphPanel = undefined, undefined, context.subscriptions);
-    const command = new GenerateDependencyInjectionGraph(context, dependencyInjectionGraphState);
+    const setNewState = (newGraphState: GraphState) => { dependencyInjectionGraphState = newGraphState; };
+    const command = new GenerateDependencyInjectionGraph(context, dependencyInjectionGraphState, setNewState);
     command.execute(dependencyInjectionGraphPanel.webview);
   });
   context.subscriptions.push(generateDependencyInjectionGraphDisposable);

src/model/GraphState.ts

@@ -1,7 +1,11 @@
 import { Position } from "./Position";
 
 export class GraphState {
+  constructor() {
+    this.nodePositions = {};
+  }
   public graphLayout: string | undefined;
+  public graphDirection: string | undefined;
   public networkSeed: number | undefined;
-  public nodePositions: Position | undefined;
+  public nodePositions: { [id: string]: Position };
 }

templates/showHierarchy_Template.js

@@ -36,6 +36,7 @@
   network.on("stabilizationIterationsDone", function () {
     network.setOptions( { physics: false } );
   });
+  network.on('dragEnd', postGraphState);
 
   const vscode = acquireVsCodeApi();
   const helpTextDiv = document.getElementById('helpText');
@@ -362,6 +363,41 @@
     network.on("stabilizationIterationsDone", function () {
       network.setOptions( { physics: false } );
     });
+    network.on('dragEnd', postGraphState);
+    vscode.postMessage({
+      command: 'setGraphState',
+      text: JSON.stringify({
+        networkSeed: seed,
+        graphDirection: hierarchicalOptionsDirectionSelect.value,
+        graphLayout: hierarchicalOptionsSortMethodSelect.value,
+        nodePositions: getNodePositions()
+      })
+    });  
   }
 
+  function postGraphState() {
+    const message = JSON.stringify({
+      networkSeed: seed,
+      // graphDirection: hierarchicalOptionsDirectionSelect.value,
+      // graphLayout: hierarchicalOptionsSortMethodSelect.value,
+      nodePositions: getNodePositions()
+    });
+    console.log('postGraphState', message);
+    vscode.postMessage({
+      command: 'setGraphState',
+      text: message
+    });
+  }
+
+  function getNodePositions() {
+    const nodePositions = {};
+    nodes.forEach(node => {
+      nodePositions[node.id] = {
+        id: node.id,
+        position: network.getPosition(node.id)
+      };
+    });
+    return nodePositions;
+  }
+  
 }());