Setting default graph direction. Fixing bug in save selection. Adding Random as an graph direction option.

Author: CoderAllan

src/commands/dgmlViewer.ts

@@ -78,6 +78,7 @@ export class DgmlViewer {
     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("var defaultGraphDirection = ''; // The graph direction from the dgml file itself", `var defaultGraphDirection = '${this.convertGraphDirectionToVisLayoutValues(directedGraph)}'; // The graph direction from the dgml file itself`);
     jsContent = jsContent.replace('layout: {} // The layout of the directed graph', `layout: {${this.getDirectedGraphLayoutJs(directedGraph)}} // The layout of the directed graph`);
     return jsContent;
   }
@@ -114,17 +115,22 @@ export class DgmlViewer {
     return text;
   }
 
+  private convertGraphDirectionToVisLayoutValues(directedGraph: IDirectedGraph): string {
+    let direction: string = 'LR';
+    switch(directedGraph.graphDirection.toLowerCase()) {
+      case 'lefttoright': direction = 'LR'; break;
+      case 'righttoleft': direction = 'RL'; break;
+      case 'toptobottom': direction = 'UD'; break;
+      case 'bottomtotop': direction = 'DU'; break;
+      default: direction = 'LR'; break;
+    }
+    return direction;
+}
+
   private getDirectedGraphLayoutJs(directedGraph: IDirectedGraph): string {
     if(directedGraph.graphDirection !== undefined) {
-      let direction: string = 'LR';
-      switch(directedGraph.graphDirection.toLowerCase()) {
-        case 'lefttoright': direction = 'LR'; break;
-        case 'righttoleft': direction = 'RL'; break;
-        case 'toptobottom': direction = 'UD'; break;
-        case 'bottomtotop': direction = 'DU'; break;
-        default: direction = 'LR'; break;
-      }
-      return "hierarchical: {enabled: true, direction: '', sortMethod: 'hubsize' }";
+      let direction: string = this.convertGraphDirectionToVisLayoutValues(directedGraph);
+      return `hierarchical: {enabled: true, direction: '${direction}', sortMethod: 'hubsize' }`;
     }
     return '';
   }

templates/dgmlViewer_Template.html

@@ -23,6 +23,7 @@
         <option value="DU">Down-Up</option>
         <option value="LR">Left-Right</option>
         <option value="RL">Right-Left</option>
+        <option value="Random">Random</option>
       </select>
     </div>
     <div id="hierarchicalOptions_sortmethod">

templates/dgmlViewer_Template.js

@@ -31,6 +31,8 @@
     },
     layout: {} // The layout of the directed graph
   };
+  var defaultGraphDirection = ''; // The graph direction from the dgml file itself
+  setDefaultGraphDirection();
   var container = document.getElementById('network');
   var network = new vis.Network(container, data, options);
   var seed = network.getSeed();
@@ -57,7 +59,7 @@
   copyToClipboardButton.addEventListener('click', copyToClipboard);
   copyToClipboardButton.style['display'] = 'none'; // TODO: Remove when copyToClipboard is implemented
   const showHierarchicalOptionsButton = document.getElementById('showHierarchicalOptions');
-  showHierarchicalOptionsButton.addEventListener('click', setNetworkLayout);
+  showHierarchicalOptionsButton.addEventListener('click', showHierarchicalOptions);
   const hierarchicalDirectionSelect = document.getElementById('direction');
   hierarchicalDirectionSelect.addEventListener('change', setNetworkLayout);
   const hierarchicalSortMethodSelect = document.getElementById('sortMethod');
@@ -101,7 +103,7 @@
   function drawGuideLine(ctx, mouseX, mouseY) {
     ctx.beginPath();
     ctx.setLineDash([3, 7]);
-    if(mouseX > -1) {
+    if (mouseX > -1) {
       ctx.moveTo(mouseX, 0);
       ctx.lineTo(mouseX, selectionCanvas.height);
     } else if (mouseY > -1) {
@@ -143,6 +145,10 @@
   }
 
   function saveSelectionAsPng() {
+    graphDiv = document.getElementById('network');
+    visDiv = graphDiv.firstElementChild;
+    graphCanvas = visDiv.firstElementChild;
+
     // show the help text
     helpTextDiv.style['display'] = 'block';
 
@@ -157,14 +163,15 @@
     selection = {};
 
     selectionLayer.addEventListener("mouseup", mouseUpEventListener, true);
-    selectionLayer.addEventListener("mousedown", mouseDownEventListener , true);
+    selectionLayer.addEventListener("mousedown", mouseDownEventListener, true);
     selectionLayer.addEventListener("mousemove", mouseMoveEventListener, true);
   }
 
   function saveAsPng() {
     graphDiv = document.getElementById('network');
     visDiv = graphDiv.firstElementChild;
-    graphCanvas = visDiv.firstElementChild;    
+    graphCanvas = visDiv.firstElementChild;
+
     // Calculate the bounding box of all the elements on the canvas
     const boundingBox = getBoundingBox();
 
@@ -173,7 +180,7 @@
     finalSelectionCanvas.width = boundingBox.width;
     finalSelectionCanvas.height = boundingBox.height;
     const finalSelectionCanvasContext = finalSelectionCanvas.getContext('2d');
-    finalSelectionCanvasContext.drawImage(graphCanvas, boundingBox.top , boundingBox.left , boundingBox.width, boundingBox.height , 0, 0, boundingBox.width, boundingBox.height);
+    finalSelectionCanvasContext.drawImage(graphCanvas, boundingBox.top, boundingBox.left, boundingBox.width, boundingBox.height, 0, 0, boundingBox.width, boundingBox.height);
 
     // Call back to the extension context to save the image of the graph to the workspace folder.
     vscode.postMessage({
@@ -192,7 +199,7 @@
     var cWidth = graphCanvas.width * bytesPerPixels;
     var cHeight = graphCanvas.height;
     var minY = minX = maxY = maxX = -1;
-    for (var y = cHeight; y > 0  && maxY === -1; y--) {
+    for (var y = cHeight; y > 0 && maxY === -1; y--) {
       for (var x = 0; x < cWidth; x += bytesPerPixels) {
         var arrayPos = x + y * cWidth;
         if (imgData.data[arrayPos + 3] > 0 && maxY === -1) {
@@ -231,15 +238,30 @@
     return {
       'top': minX,
       'left': minY,
-      'width': maxX-minX,
-      'height': maxY-minY
+      'width': maxX - minX,
+      'height': maxY - minY
     };
   }
 
   function copyToClipboard() {
     console.log('Not implemented yet...');
   }
-  
+
+  function showHierarchicalOptions() {
+    setDefaultGraphDirection();
+    setNetworkLayout();
+  }
+
+  function setDefaultGraphDirection() {
+    const hierarchicalOptionsDirection = document.getElementById('direction');
+    for (var i, j = 0; i = hierarchicalOptionsDirection.options[j]; j++) {
+      if (i.value === defaultGraphDirection) {
+        hierarchicalOptionsDirection.selectedIndex = j;
+        break;
+      }
+    }
+  }
+
   function setNetworkLayout() {
     const hierarchicalOptionsDirection = document.getElementById('hierarchicalOptions_direction');
     const hierarchicalOptionsSortMethod = document.getElementById('hierarchicalOptions_sortmethod');
@@ -248,19 +270,34 @@
     hierarchicalOptionsSortMethod.style['display'] = showHierarchicalOptionsCheckbox.checked ? 'block' : 'none';
     const hierarchicalOptionsDirectionSelect = document.getElementById('direction');
     const hierarchicalOptionsSortMethodSelect = document.getElementById('sortMethod');
-    if(showHierarchicalOptionsCheckbox.checked)  {
-      options.layout = {
-        hierarchical: {
-          enabled: true,
-          direction: hierarchicalOptionsDirectionSelect.value ? hierarchicalOptionsDirectionSelect.value : 'LR',
-          sortMethod: hierarchicalOptionsSortMethodSelect.value ? hierarchicalOptionsSortMethodSelect.value : 'hubsize'
-        }
-      };
+    if (showHierarchicalOptionsCheckbox.checked) {
+      if (hierarchicalOptionsDirectionSelect.value && hierarchicalOptionsDirectionSelect.value === 'Random') {
+        options.layout = {};
+        seed = Math.random();
+      } else {
+        options.layout = {
+          hierarchical: {
+            enabled: true,
+            direction: hierarchicalOptionsDirectionSelect.value ? hierarchicalOptionsDirectionSelect.value : defaultGraphDirection,
+            sortMethod: hierarchicalOptionsSortMethodSelect.value ? hierarchicalOptionsSortMethodSelect.value : 'hubsize'
+          }
+        };
+      }
     } else {
-      options.layout = {};
+      if (defaultGraphDirection === '') {
+        options.layout = {};
+      } else {
+        options.layout = {
+          hierarchical: {
+            enabled: true,
+            direction: defaultGraphDirection,
+            sortMethod: 'hubsize'
+          }
+        };
+      }
     }
     options.layout.randomSeed = seed;
     network = new vis.Network(container, data, options);
   }
-  
+
 }());