Bugfix: The GraphDirection attribute is now used correctly when rendering the graph.

 Bugfix: It is now possible to moved nodes when Fixed direction is used.

Author: CoderAllan

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Change Log
 
+## Version 1.2.1
+
+- Bugfix: The GraphDirection attribute is now used correctly when rendering the graph.
+- Bugfix: It is now possible to moved nodes when Fixed direction is used.
+
 ## Version 1.2.0
 
 - The width and height from the bounds-attribute on the nodes are now used if the attribute is present.

package.json

@@ -4,7 +4,7 @@
   "displayName": "DGMLViewer",
   "description": "DGMLViewer is viewer for dgml (Directed Graph Markup Language) files",
   "icon": "icon.png",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "repository": "https://github.com/CoderAllan/vscode-dgmlviewer",
   "engines": {
     "vscode": "^1.54.0"

src/commands/dgmlViewer.ts

@@ -78,7 +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("const defaultGraphDirection = ''; // The graph direction from the dgml file itself", `const 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;
   }

templates/dgmlViewer_Template.js

@@ -29,7 +29,7 @@
     },
     layout: {} // The layout of the directed graph
   };
-  let defaultGraphDirection = ''; // The graph direction from the dgml file itself
+  const defaultGraphDirection = ''; // The graph direction from the dgml file itself
   const container = document.getElementById('network');
   const hierarchicalOptionsDirection = document.getElementById('hierarchicalOptions_direction');
   const hierarchicalOptionsSortMethod = document.getElementById('hierarchicalOptions_sortmethod');
@@ -259,24 +259,48 @@
     }
   }
 
-  function storeCoordinates(node) {
-    if(node.x !== undefined && node.y !== undefined) {
-      nodeCoordinates[node.id] = { x: node.x, y: node.y };
-    }
-    delete node.x;
-    delete node.y;
-    delete node.fixed;
+  function storeCoordinates() {
+    nodes.forEach(node => {
+      if (node.x !== undefined && node.y !== undefined) {
+        nodeCoordinates[node.id] = { x: node.x, y: node.y };
+      }
+      delete node.x;
+      delete node.y;
+      delete node.fixed;
+    });
   }
 
-  function restoreCoordinates(node) {
-    if (node.id in nodeCoordinates) {
-      var nodeCoords = nodeCoordinates[node.id];
-      if (nodeCoords.x !== undefined && nodeCoords.y !== undefined) {
-        node.x = nodeCoords.x;
-        node.y = nodeCoords.y;
-        node.fixed = { x: true, y: true};
+  function restoreCoordinates() {
+    nodes.forEach(function(node) {
+      if (node.id in nodeCoordinates) {
+        var nodeCoords = nodeCoordinates[node.id];
+        nodes.update({
+          id: node.id,
+          fixed: true,
+          x: nodeCoords.x,
+          y: nodeCoords.y
+        });
       }
-    }
+    });
+  }
+
+  function setHierarchicalLayout(direction, sortMethod) {
+    options.layout = {
+        hierarchical: {
+        enabled: true,
+        levelSeparation: 200,
+        nodeSpacing: 200,
+        direction: direction,
+        sortMethod: sortMethod
+      }
+    };
+    options.physics = {
+      enabled: true,
+      hierarchicalRepulsion: {
+        springConstant: 0,
+        avoidOverlap: 0.2
+      }
+    };
   }
 
   function setNetworkLayout() {
@@ -295,59 +319,45 @@
         avoidOverlap: 0.8
       }
     };
+    var unfixNodes = false;
     if (showHierarchicalOptionsCheckbox.checked) {
       if (hierarchicalOptionsDirectionSelect.value && hierarchicalOptionsDirectionSelect.value === 'Random') {
-        nodes.getIds().forEach(id => storeCoordinates(nodes.get(id)));
+        storeCoordinates();
         seed = Math.random();
         options.layout.randomSeed = seed;
       } else if (hierarchicalOptionsDirectionSelect.value && hierarchicalOptionsDirectionSelect.value === 'Fixed') {
-        nodes.getIds().forEach(id => restoreCoordinates(nodes.get(id)));
+        restoreCoordinates();
+        options.physics.enabled = false;
+        unfixNodes = true;
       } else {
-        nodes.getIds().forEach(id => storeCoordinates(nodes.get(id)));
-        options.layout = {
-            hierarchical: {
-            enabled: true,
-            levelSeparation: 200,
-            nodeSpacing: 200,
-            direction: hierarchicalOptionsDirectionSelect.value ? hierarchicalOptionsDirectionSelect.value : defaultGraphDirection,
-            sortMethod: hierarchicalOptionsSortMethodSelect.value ? hierarchicalOptionsSortMethodSelect.value : 'hubsize'
-          }
-        };
-        options.physics = {
-          enabled: true,
-          hierarchicalRepulsion: {
-            springConstant: 0,
-            avoidOverlap: 0.2
-          }
-        };
+        storeCoordinates();
+        const direction = hierarchicalOptionsDirectionSelect.value ? hierarchicalOptionsDirectionSelect.value : defaultGraphDirection;
+        const sortMethod = hierarchicalOptionsSortMethodSelect.value ? hierarchicalOptionsSortMethodSelect.value : 'hubsize';
+        setHierarchicalLayout(direction, sortMethod);
       }
     } else {
       if(defaultGraphDirection !== '') {
-        options.layout = {
-            hierarchical: {
-            enabled: true,
-            levelSeparation: 200,
-            nodeSpacing: 200,
-            direction: defaultGraphDirection,
-          }
-        };
-        options.physics = {
-          enabled: true,
-          hierarchicalRepulsion: {
-            springConstant: 0,
-            avoidOverlap: 0.2
-          }
-        };
-        nodes.getIds().forEach(id => storeCoordinates(nodes.get(id)));
+        storeCoordinates();
+        setHierarchicalLayout(defaultGraphDirection, 'hubsize');
       } else {
-        nodes.getIds().forEach(id => restoreCoordinates(nodes.get(id)));
+        restoreCoordinates();
+        unfixNodes = false;
       }
     }
+    console.log(options);
     var network = new vis.Network(container, data, options);
+    if (unfixNodes) {
+      nodes.forEach(function(node) {
+        nodes.update({id: node.id, fixed: false});
+      });
+    }
     network.on("stabilizationIterationsDone", function () {
       network.setOptions({
         physics: { enabled: false }
       });
-    });
+      nodes.forEach(function(node) {
+        nodes.update({id: node.id, fixed: false});
+      });
+  });
   }
 }());