The nodes positions are now persisted so the graph wont randomize each time to tab is changed.

Author: CoderAllan

src/commands/generateDependencyInjectionGraph.ts

@@ -1,6 +1,6 @@
 import { ShowHierarchyBase } from './showHierarchyBase';
 import { ModuleManager } from '@src';
-import { ArrowType, Component, Edge, GraphState, Node, NodeType, Project } from '@model';
+import { ArrowType, Component, Edge, GraphState, Node, NodeType, Position, Project } from '@model';
 import * as fs from 'fs';
 import * as path from 'path';
 import * as vscode from 'vscode';
@@ -22,9 +22,8 @@ export class GenerateDependencyInjectionGraph extends ShowHierarchyBase {
             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;
+            const newGraphState: GraphState = JSON.parse(message.text);
+            this.graphState = newGraphState;
             this.setNewState(this.graphState);
             return;
         }
@@ -35,7 +34,6 @@ export class GenerateDependencyInjectionGraph extends ShowHierarchyBase {
     var workspaceFolder = this.fsUtils.getWorkspaceFolder();
     const errors: string[] = [];
     const project: Project = ModuleManager.scanProject(workspaceFolder, errors, this.isTypescriptFile);
-
     this.nodes = [];
     this.edges = [];
     this.addNodesAndEdges(project, this.appendNodes, this.appendEdges);
@@ -101,7 +99,8 @@ export class GenerateDependencyInjectionGraph extends ShowHierarchyBase {
     project.components.forEach(component => {
       let componentFilename = component.filename.replace(this.workspaceDirectory, '.');
       componentFilename = componentFilename.split('\\').join('/');
-      appendNodes([new Node(component.name, this.generatedComponentNode(component), componentFilename, false, NodeType.component)]);
+      const position = this.graphState.nodePositions[component.name];
+      appendNodes([new Node(component.name, this.generatedComponentNode(component), componentFilename, false, NodeType.component, position)]);
       component.dependencyInjections.forEach(injectable => {
         appendNodes([new Node(injectable.name, injectable.name, injectable.filename.replace(this.workspaceDirectory, ''), false, NodeType.injectable)]);
         appendEdges([new Edge((this.edges.length + 1).toString(), injectable.name, component.name, ArrowType.injectable)]);

src/commands/showHierarchyBase.ts

@@ -129,7 +129,10 @@ 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};`);
+      // console.log(this.graphState.networkSeed);
+      // const seedParts = this.graphState.networkSeed.indexOf(':') > 0 ? this.graphState.networkSeed.split(':') : [this.graphState.networkSeed, ''];
+      // console.log(seedParts);
+      // jsContent = jsContent.replace('var seed = network.getSeed();', `var seed = ${seedParts[0]};`);
     }
     return jsContent;
   }

src/model/GraphState.ts

@@ -6,6 +6,7 @@ export class GraphState {
   }
   public graphLayout: string | undefined;
   public graphDirection: string | undefined;
-  public networkSeed: number | undefined;
+  public networkSeed: string | undefined;
   public nodePositions: { [id: string]: Position };
+  public showHierarchicalOptions: boolean = false;
 }

src/model/Position.ts

@@ -1,5 +1,5 @@
 
-export interface Position {
-  x: number;
-  y: number;
+export class Position {
+  public x: number | undefined;
+  public y: number | undefined;
 }

templates/showHierarchy_Template.js

@@ -34,7 +34,16 @@
   var network = new vis.Network(container, data, options);
   var seed = network.getSeed();
   network.on("stabilizationIterationsDone", function () {
-    network.setOptions( { physics: false } );
+    network.setOptions({
+      physics: false
+    });
+    nodes.forEach(function (node) {
+      nodes.update({
+        id: node.id,
+        fixed: false
+      });
+    });
+    postGraphState();
   });
   network.on('dragEnd', postGraphState);
 
@@ -52,6 +61,7 @@
   let selectionCanvasContext;
 
   const hierarchicalOptionsDirectionSelect = document.getElementById('direction');
+  const showHierarchicalOptionsCheckbox = document.getElementById('showHierarchicalOptions');
 
   // add button event listeners
   const saveAsPngButton = document.getElementById('saveAsPngButton');
@@ -262,7 +272,7 @@
     nodes.forEach(node => {
       nodeExport[node.id] = {
         id: node.id,
-        label: command==='saveAsDgml' ? cleanLabelDgml(node.label) : cleanLabelDot(node.label),
+        label: command === 'saveAsDgml' ? cleanLabelDgml(node.label) : cleanLabelDot(node.label),
         position: network.getPosition(node.id),
         boundingBox: network.getBoundingBox(node.id)
       };
@@ -292,10 +302,12 @@
     let cleanedLabel = label.replace(/(<([^>]+)>)/ig, '');
     return cleanedLabel;
   }
+
   function removeNewlines(label) {
     let cleanedLabel = label.replace(/\s+/g, '');
     return cleanedLabel;
   }
+
   function convertNewlinesToDotNewlines(label) {
     let cleanedLabel = label.replace(/\n/g, '<br align="left"/>');
     return cleanedLabel;
@@ -306,7 +318,7 @@
   }
 
   function setRandomLayout() {
-    options.layout ={
+    options.layout = {
       hierarchical: {
         enabled: false
       }
@@ -322,7 +334,7 @@
 
   function setHierarchicalLayout(direction, sortMethod) {
     options.layout = {
-        hierarchical: {
+      hierarchical: {
         enabled: true,
         levelSeparation: 200,
         nodeSpacing: 200,
@@ -342,7 +354,6 @@
   function setNetworkLayout() {
     const hierarchicalOptionsDirection = document.getElementById('hierarchicalOptions_direction');
     const hierarchicalOptionsSortMethod = document.getElementById('hierarchicalOptions_sortmethod');
-    const showHierarchicalOptionsCheckbox = document.getElementById('showHierarchicalOptions');
     hierarchicalOptionsDirection.style['display'] = showHierarchicalOptionsCheckbox.checked ? 'block' : 'none';
     hierarchicalOptionsSortMethod.style['display'] = showHierarchicalOptionsCheckbox.checked ? 'block' : 'none';
     const hierarchicalOptionsSortMethodSelect = document.getElementById('sortMethod');
@@ -361,28 +372,29 @@
     options.layout.randomSeed = seed;
     network = new vis.Network(container, data, options);
     network.on("stabilizationIterationsDone", function () {
-      network.setOptions( { physics: false } );
+      network.setOptions({
+        physics: false
+      });
+      nodes.forEach(function (node) {
+        nodes.update({
+          id: node.id,
+          fixed: false
+        });
+      });
+      postGraphState();
     });
     network.on('dragEnd', postGraphState);
-    vscode.postMessage({
-      command: 'setGraphState',
-      text: JSON.stringify({
-        networkSeed: seed,
-        graphDirection: hierarchicalOptionsDirectionSelect.value,
-        graphLayout: hierarchicalOptionsSortMethodSelect.value,
-        nodePositions: getNodePositions()
-      })
-    });  
+    postGraphState();
   }
 
   function postGraphState() {
     const message = JSON.stringify({
       networkSeed: seed,
-      // graphDirection: hierarchicalOptionsDirectionSelect.value,
-      // graphLayout: hierarchicalOptionsSortMethodSelect.value,
+      graphDirection: showHierarchicalOptionsCheckbox.checked ? hierarchicalOptionsDirectionSelect.value : undefined,
+      graphLayout: showHierarchicalOptionsCheckbox.checked ? hierarchicalOptionsSortMethodSelect.value : undefined,
+      showHierarchicalOptions: showHierarchicalOptionsCheckbox.checked,
       nodePositions: getNodePositions()
     });
-    console.log('postGraphState', message);
     vscode.postMessage({
       command: 'setGraphState',
       text: message
@@ -392,12 +404,13 @@
   function getNodePositions() {
     const nodePositions = {};
     nodes.forEach(node => {
+      const position = network.getPosition(node.id);
       nodePositions[node.id] = {
-        id: node.id,
-        position: network.getPosition(node.id)
+        x: position.x,
+        y: position.y
       };
     });
     return nodePositions;
   }
-  
+
 }());