The state of the checkbox and the dropdown boxes are now persisted.

Author: CoderAllan

src/commands/generateDependencyInjectionGraph.ts

@@ -124,6 +124,9 @@ 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 = jsContent.replace('let showHierarchicalOptionsCheckboxChecked = false;', `let showHierarchicalOptionsCheckboxChecked = ${this.graphState.showHierarchicalOptions};`);
+    jsContent = jsContent.replace('let hierarchicalOptionsDirectionSelectValue = undefined;', `let hierarchicalOptionsDirectionSelectValue = '${this.graphState.graphDirection}';`);
+    jsContent = jsContent.replace('let hierarchicalOptionsSortMethodSelectValue = undefined;', `let hierarchicalOptionsSortMethodSelectValue = '${this.graphState.graphLayout}';`);
     jsContent = this.setGraphState(jsContent);
     return jsContent;
   }

src/commands/showComponentHierarchy.ts

@@ -122,6 +122,9 @@ 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 = jsContent.replace('let showHierarchicalOptionsCheckboxChecked = false;', `let showHierarchicalOptionsCheckboxChecked = ${this.graphState.showHierarchicalOptions};`);
+    jsContent = jsContent.replace('let hierarchicalOptionsDirectionSelectValue = undefined;', `let hierarchicalOptionsDirectionSelectValue = '${this.graphState.graphDirection}';`);
+    jsContent = jsContent.replace('let hierarchicalOptionsSortMethodSelectValue = undefined;', `let hierarchicalOptionsSortMethodSelectValue = '${this.graphState.graphLayout}';`);
     jsContent = this.setGraphState(jsContent);
     return jsContent;
   }

src/commands/showModuleHierarchy.ts

@@ -118,6 +118,9 @@ 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 = jsContent.replace('let showHierarchicalOptionsCheckboxChecked = false;', `let showHierarchicalOptionsCheckboxChecked = ${this.graphState.showHierarchicalOptions};`);
+    jsContent = jsContent.replace('let hierarchicalOptionsDirectionSelectValue = undefined;', `let hierarchicalOptionsDirectionSelectValue = '${this.graphState.graphDirection}';`);
+    jsContent = jsContent.replace('let hierarchicalOptionsSortMethodSelectValue = undefined;', `let hierarchicalOptionsSortMethodSelectValue = '${this.graphState.graphLayout}';`);
     jsContent = this.setGraphState(jsContent);
     return jsContent;
   }

src/model/GraphState.ts

@@ -4,8 +4,8 @@ export class GraphState {
   constructor() {
     this.nodePositions = {};
   }
-  public graphLayout: string | undefined;
-  public graphDirection: string | undefined;
+  public graphLayout: string = "hubsize";
+  public graphDirection: string = "Random";
   public networkSeed: string | undefined;
   public nodePositions: { [id: string]: Position };
   public showHierarchicalOptions: boolean = false;

templates/showHierarchy_Template.js

@@ -48,6 +48,7 @@
   let lastMouseX = lastMouseY = 0;
   let mouseX = mouseY = 0;
   let selection;
+  
   // get the vis.js canvas
   const graphDiv = document.getElementById('network');
   const visDiv = graphDiv.firstElementChild;
@@ -79,6 +80,12 @@
   const hierarchicalOptionsDirection = document.getElementById('hierarchicalOptions_direction');
   const hierarchicalOptionsSortMethod = document.getElementById('hierarchicalOptions_sortmethod');
 
+  let hierarchicalOptionsDirectionSelectValue = undefined;
+  let hierarchicalOptionsSortMethodSelectValue = undefined;
+  let showHierarchicalOptionsCheckboxChecked = false;
+  showHierarchicalOptionsCheckbox.checked = showHierarchicalOptionsCheckboxChecked;
+  showHierarchicalOptions();
+
   function mouseUpEventListener(event) {
     // Convert the canvas to image data that can be saved
     const aspectRatioX = graphCanvas.width / selectionCanvas.width;
@@ -305,6 +312,10 @@
 
   function regenerateGraph() {
     seed = Math.random();
+    hierarchicalOptionsDirectionSelect.value = 'Random';
+    hierarchicalOptionsDirectionSelectValue = hierarchicalOptionsDirectionSelect.value;
+    hierarchicalOptionsSortMethodSelect.value = 'hubsize';
+    hierarchicalOptionsSortMethodSelectValue = hierarchicalOptionsSortMethodSelect.value;
     removeNodePositions();
     setNetworkLayout();
   }
@@ -344,9 +355,12 @@
   }
 
   function showHierarchicalOptions(){
+    showHierarchicalOptionsCheckboxChecked = showHierarchicalOptionsCheckbox.checked;
     if (showHierarchicalOptionsCheckbox.checked) {
       hierarchicalOptionsDirection.style['display'] = 'block';
+      hierarchicalOptionsDirectionSelect.value = hierarchicalOptionsDirectionSelectValue ? hierarchicalOptionsDirectionSelectValue : 'Random';
       hierarchicalOptionsSortMethod.style['display'] = 'block';
+      hierarchicalOptionsSortMethodSelect.value = hierarchicalOptionsSortMethodSelectValue ? hierarchicalOptionsSortMethodSelectValue : 'hubsize';
       if (hierarchicalOptionsDirectionSelect.value && hierarchicalOptionsDirectionSelect.value === 'Random') {
         regenerateGraphButton.style['display'] = 'block';
       } else {
@@ -357,6 +371,7 @@
       hierarchicalOptionsSortMethod.style['display'] = 'none';
       regenerateGraphButton.style['display'] = 'block';
     }
+    postGraphState();
   }
 
   function setNetworkLayout() {
@@ -392,8 +407,8 @@
   function postGraphState() {
     const message = JSON.stringify({
       networkSeed: seed,
-      graphDirection: showHierarchicalOptionsCheckbox.checked ? hierarchicalOptionsDirectionSelect.value : undefined,
-      graphLayout: showHierarchicalOptionsCheckbox.checked ? hierarchicalOptionsSortMethodSelect.value : undefined,
+      graphDirection: showHierarchicalOptionsCheckbox.checked ? hierarchicalOptionsDirectionSelect.value : 'Random',
+      graphLayout: showHierarchicalOptionsCheckbox.checked ? hierarchicalOptionsSortMethodSelect.value : 'hubsize',
       showHierarchicalOptions: showHierarchicalOptionsCheckbox.checked,
       nodePositions: getNodePositions()
     });