added loadXYinDataset() and seperated allowedToMove into X and Y parts

HISTORY.md

@@ -1,12 +1,14 @@
 vis.js history
 http://visjs.org
 
-## 2014-03-06, version 0.6.2
+## 2014-03-06, version 0.7.0
 
 ### Graph
 
 - changed navigation CSS. Icons are now always correctly positioned.
 - added stabilizationIterations option to graph.
+- added loadXYinDataset() method to save the XY positions of nodes in the dataset.
+- seperated allowedToMove into allowedToMoveX and allowedToMoveY. This is required for initializing nodes from hierarchical layouts after loadXYinDataset().
 
 ## 2014-03-06, version 0.6.1
 

dist/vis.js

@@ -4,8 +4,8 @@
  *
  * A dynamic, browser-based visualization library.
  *
- * @version @@version
- * @date    @@date
+ * @version 0.7.0-SNAPSHOT
+ * @date    2014-03-06
  *
  * @license
  * Copyright (C) 2011-2014 Almende B.V, http://almende.com
@@ -9588,8 +9588,8 @@ Node.prototype.setProperties = function(properties, constants) {
     }
   }
 
-  this.xFixed = this.xFixed || (properties.x !== undefined && !properties.allowedToMove);
-  this.yFixed = this.yFixed || (properties.y !== undefined && !properties.allowedToMove);
+  this.xFixed = this.xFixed || (properties.x !== undefined && !properties.allowedToMoveX);
+  this.yFixed = this.yFixed || (properties.y !== undefined && !properties.allowedToMoveY);
   this.radiusFixed = this.radiusFixed || (properties.radius !== undefined);
 
   if (this.shape == 'image') {
@@ -12995,7 +12995,7 @@ var manipulationMixin = {
   _addNode : function() {
     if (this._selectionIsEmpty() && this.editMode == true) {
       var positionObject = this._pointerToPositionObject(this.pointerPosition);
-      var defaultData = {id:util.randomUUID(),x:positionObject.left,y:positionObject.top,label:"new",allowedToMove:true};
+      var defaultData = {id:util.randomUUID(),x:positionObject.left,y:positionObject.top,label:"new",allowedToMoveX:true,allowedToMoveY:true};
       if (this.triggerFunctions.add) {
         if (this.triggerFunctions.add.length == 2) {
           var me = this;
@@ -17697,6 +17697,23 @@ Graph.prototype._initializeMixinLoaders = function () {
   }
 };
 
+/**
+ * Load the XY positions of the nodes into the dataset.
+ */
+Graph.prototype.loadXYinDataset = function() {
+  var dataArray = [];
+  for (var nodeId in this.nodes) {
+    if (this.nodes.hasOwnProperty(nodeId)) {
+      var node = this.nodes[nodeId];
+      var allowedToMoveX = !this.nodes.xFixed;
+      var allowedToMoveY = !this.nodes.yFixed;
+      if (this.nodesData.data[nodeId].x != Math.round(node.x) || this.nodesData.data[nodeId].y != Math.round(node.y)) {
+        dataArray.push({id:nodeId,x:Math.round(node.x),y:Math.round(node.y),allowedToMoveX:allowedToMoveX,allowedToMoveY:allowedToMoveY});
+      }
+    }
+  }
+  this.nodesData.update(dataArray);
+};
 
 
 

docs/graph.html

@@ -863,13 +863,20 @@ var options = {
     <td>Default border color of the node when selected.</td>
   </tr>
     <tr>
-        <td>allowedToMove</td>
+        <td>allowedToMoveX</td>
         <td>Boolean</td>
         <td>false</td>
-        <td>If allowedToMove is false, then the node will not move from its supplied position.
-            If only an x position has been supplied, it is only fixed in the x-direction.
-            The same holds for y. If both x and y have been defined, the node will not move.
-            If no x or y have been supplied, this argument will not do anything.</td>
+        <td>If allowedToMoveX is false, then the node will not move from its supplied position.
+            If an X position has been supplied, it is fixed in the X-direction.
+            If no X value has been supplied, this argument will not do anything.</td>
+    </tr>
+    <tr>
+        <td>allowedToMoveY</td>
+        <td>Boolean</td>
+        <td>false</td>
+        <td>If allowedToMoveY is false, then the node will not move from its supplied position.
+            If an Y position has been supplied, it is fixed in the Y-direction.
+            If no Y value has been supplied, this argument will not do anything.</td>
     </tr>
 
   <tr>
@@ -1768,6 +1775,13 @@ var options: {
       The selections are not ordered.
     </td>
   </tr>
+    <tr>
+        <td>loadXYinDataset()</td>
+        <td>none</td>
+        <td>This will put the X and Y positions of all nodes in the dataset. It will also include allowedToMoveX and allowedToMoveY with the correct values.
+            You can use this to stablize your graph once, then save the positions in a database so the next time you load the nodes, stabilization will be near instantaneous.
+        </td>
+    </tr>
 
   <tr>
     <td>on(event, callback)</td>
@@ -1826,7 +1840,7 @@ var options: {
   </tr>
 
     <tr>
-        <td>zoomExtent</td>
+        <td>zoomExtent()</td>
         <td>none</td>
         <td>Scales the graph so all the nodes are in center view.</td>
     </tr>

src/graph/Graph.js

@@ -1926,6 +1926,23 @@ Graph.prototype._initializeMixinLoaders = function () {
   }
 };
 
+/**
+ * Load the XY positions of the nodes into the dataset.
+ */
+Graph.prototype.loadXYinDataset = function() {
+  var dataArray = [];
+  for (var nodeId in this.nodes) {
+    if (this.nodes.hasOwnProperty(nodeId)) {
+      var node = this.nodes[nodeId];
+      var allowedToMoveX = !this.nodes.xFixed;
+      var allowedToMoveY = !this.nodes.yFixed;
+      if (this.nodesData.data[nodeId].x != Math.round(node.x) || this.nodesData.data[nodeId].y != Math.round(node.y)) {
+        dataArray.push({id:nodeId,x:Math.round(node.x),y:Math.round(node.y),allowedToMoveX:allowedToMoveX,allowedToMoveY:allowedToMoveY});
+      }
+    }
+  }
+  this.nodesData.update(dataArray);
+};
 
 
 

src/graph/Node.js

@@ -191,8 +191,8 @@ Node.prototype.setProperties = function(properties, constants) {
     }
   }
 
-  this.xFixed = this.xFixed || (properties.x !== undefined && !properties.allowedToMove);
-  this.yFixed = this.yFixed || (properties.y !== undefined && !properties.allowedToMove);
+  this.xFixed = this.xFixed || (properties.x !== undefined && !properties.allowedToMoveX);
+  this.yFixed = this.yFixed || (properties.y !== undefined && !properties.allowedToMoveY);
   this.radiusFixed = this.radiusFixed || (properties.radius !== undefined);
 
   if (this.shape == 'image') {

src/graph/graphMixins/ManipulationMixin.js

@@ -288,7 +288,7 @@ var manipulationMixin = {
   _addNode : function() {
     if (this._selectionIsEmpty() && this.editMode == true) {
       var positionObject = this._pointerToPositionObject(this.pointerPosition);
-      var defaultData = {id:util.randomUUID(),x:positionObject.left,y:positionObject.top,label:"new",allowedToMove:true};
+      var defaultData = {id:util.randomUUID(),x:positionObject.left,y:positionObject.top,label:"new",allowedToMoveX:true,allowedToMoveY:true};
       if (this.triggerFunctions.add) {
         if (this.triggerFunctions.add.length == 2) {
           var me = this;