Fixed #1707: Network not supporting data with a custom id field

HISTORY.md

@@ -4,8 +4,9 @@ http://visjs.org
 
 ## not yet released, version 4.15.2-SNAPSHOT
 
+### Network
 
-
+- Fixed #1707: Network not supporting data with a custom id field.
 
 
 ## 2016-03-08, version 4.15.1

lib/network/modules/EdgesHandler.js

@@ -340,7 +340,9 @@ class EdgesHandler {
   }
 
   create(properties) {
-    return new Edge(properties, this.body, this.options)
+    var idField = this.body.data.edges._fieldId;
+    var id = properties[idField];
+    return new Edge(id, properties, this.body, this.options)
   }
 
 

lib/network/modules/ManipulationSystem.js

@@ -541,8 +541,9 @@ class ManipulationSystem {
    */
   _getNewTargetNode(x,y) {
     let controlNodeStyle = util.deepExtend({}, this.options.controlNodeStyle);
+    let idField = this.body.data.nodes._fieldId;
 
-    controlNodeStyle.id = 'targetNode' + util.randomUUID();
+    controlNodeStyle[idField] = 'targetNode' + util.randomUUID();
     controlNodeStyle.hidden = false;
     controlNodeStyle.physics = false;
     controlNodeStyle.x = x;
@@ -1048,11 +1049,12 @@ class ManipulationSystem {
    */
   _performAddNode(clickData) {
     let defaultData = {
-      id: util.randomUUID(),
       x: clickData.pointer.canvas.x,
       y: clickData.pointer.canvas.y,
       label: 'new'
     };
+    var idField = this.body.data.nodes._fieldId;
+    defaultData[idField] = util.randomUUID();
 
     if (typeof this.options.addNode === 'function') {
       if (this.options.addNode.length === 2) {

lib/network/modules/NodesHandler.js

@@ -295,7 +295,9 @@ class NodesHandler {
    * @param constructorClass
    */
   create(properties, constructorClass = Node) {
-    return new constructorClass(properties, this.body, this.images, this.groups, this.options)
+    var idField = this.body.data.nodes._fieldId;
+    var id = properties[idField];
+    return new constructorClass(id, properties, this.body, this.images, this.groups, this.options)
   }
 
 

lib/network/modules/components/Edge.js

@@ -10,6 +10,7 @@ import StraightEdge       from './edges/StraightEdge'
  * @class Edge
  *
  * A edge connects two nodes
+ * @param {string} [id]           Id for the edge. optional
  * @param {Object} properties     Object with options. Must contain
  *                                At least options from and to.
  *                                Available options: from (number),
@@ -22,7 +23,7 @@ import StraightEdge       from './edges/StraightEdge'
  *                                example for the color
  */
 class Edge {
-  constructor(options, body, globalOptions) {
+  constructor(id, options, body, globalOptions) {
     if (body === undefined) {
       throw "No body provided";
     }
@@ -31,7 +32,7 @@ class Edge {
     this.body = body;
 
     // initialize variables
-    this.id = undefined;
+    this.id = id;
     this.fromId = undefined;
     this.toId = undefined;
     this.selected = false;
@@ -68,7 +69,6 @@ class Edge {
 
     Edge.parseOptions(this.options, options, true, this.globalOptions);
 
-    if (options.id !== undefined)   {this.id = options.id;}
     if (options.from !== undefined) {this.fromId = options.from;}
     if (options.to !== undefined)   {this.toId = options.to;}
     if (options.title !== undefined) {this.title = options.title;}
@@ -229,17 +229,17 @@ class Edge {
       if (this.options.smooth.enabled === true) {
         if (this.options.smooth.type === 'dynamic') {
           dataChanged = true;
-          this.edgeType = new BezierEdgeDynamic(this.options, this.body, this.labelModule);
+          this.edgeType = new BezierEdgeDynamic(this.id, this.options, this.body, this.labelModule);
         }
         else if (this.options.smooth.type === 'cubicBezier') {
-          this.edgeType = new CubicBezierEdge(this.options, this.body, this.labelModule);
+          this.edgeType = new CubicBezierEdge(this.id, this.options, this.body, this.labelModule);
         }
         else {
-          this.edgeType = new BezierEdgeStatic(this.options, this.body, this.labelModule);
+          this.edgeType = new BezierEdgeStatic(this.id, this.options, this.body, this.labelModule);
         }
       }
       else {
-        this.edgeType = new StraightEdge(this.options, this.body, this.labelModule);
+        this.edgeType = new StraightEdge(this.id, this.options, this.body, this.labelModule);
       }
     }
     else {

lib/network/modules/components/Node.js

@@ -23,9 +23,9 @@ import  {printStyle} from "../../../shared/Validator";
 /**
  * @class Node
  * A node. A node can be connected to other nodes via one or multiple edges.
+ * @param {string} id      Id for the node
  * @param {object} options An object containing options for the node. All
- *                            options are optional, except for the id.
- *                              {number} id     Id of the node. Required
+ *                            options are optional
  *                              {string} label  Text label for the node
  *                              {number} x      Horizontal position of the node
  *                              {number} y      Vertical position of the node
@@ -46,15 +46,18 @@ import  {printStyle} from "../../../shared/Validator";
  *
  */
 class Node {
-  constructor(options, body, imagelist, grouplist, globalOptions) {
+  constructor(id, options, body, imagelist, grouplist, globalOptions) {
     this.options = util.bridgeObject(globalOptions);
     this.globalOptions = globalOptions;
     this.body = body;
 
     this.edges = []; // all edges connected to this node
 
-    // set defaults for the options
-    this.id = undefined;
+    if (id === undefined) {
+      throw "Node must have an id";
+    }
+
+    this.id = id;
     this.imagelist = imagelist;
     this.grouplist = grouplist;
 
@@ -105,13 +108,6 @@ class Node {
     if (!options) {
       return;
     }
-    // basic options
-    if (options.id !== undefined)    {this.id = options.id;}
-
-    if (this.id === undefined) {
-      throw "Node must have an id";
-    }
-
 
     // set these options locally
     // clear x and y positions

lib/network/modules/components/edges/BezierEdgeDynamic.js

@@ -1,9 +1,9 @@
 import BezierEdgeBase from './util/BezierEdgeBase'
 
 class BezierEdgeDynamic extends BezierEdgeBase {
-  constructor(options, body, labelModule) {
+  constructor(id, options, body, labelModule) {
     //this.via = undefined; // Here for completeness but not allowed to defined before super() is invoked.
-    super(options, body, labelModule); // --> this calls the setOptions below
+    super(id, options, body, labelModule); // --> this calls the setOptions below
     this._boundFunction = () => {this.positionBezierNode();};
     this.body.emitter.on("_repositionBezierNodes", this._boundFunction);
   }
@@ -17,7 +17,6 @@ class BezierEdgeDynamic extends BezierEdgeBase {
 
     // set the options and the to and from nodes
     this.options = options;
-    this.id = this.options.id;
     this.from = this.body.nodes[this.options.from];
     this.to = this.body.nodes[this.options.to];
 
@@ -73,12 +72,14 @@ class BezierEdgeDynamic extends BezierEdgeBase {
   setupSupportNode() {
     if (this.via === undefined) {
       var nodeId = "edgeId:" + this.id;
-      var node = this.body.functions.createNode({
-        id: nodeId,
+      var properties = {
         shape: 'circle',
-        physics:true,
-        hidden:true
-      });
+        physics: true,
+        hidden: true
+      };
+      var idField = this.body.data.nodes._fieldId;
+      properties[idField] = nodeId;
+      var node = this.body.functions.createNode(properties);
       this.body.nodes[nodeId] = node;
       this.via = node;
       this.via.parentEdgeId = this.id;

lib/network/modules/components/edges/BezierEdgeStatic.js

@@ -1,8 +1,8 @@
 import BezierEdgeBase from './util/BezierEdgeBase'
 
 class BezierEdgeStatic extends BezierEdgeBase {
-  constructor(options, body, labelModule) {
-    super(options, body, labelModule);
+  constructor(id, options, body, labelModule) {
+    super(id, options, body, labelModule);
   }
 
   /**

lib/network/modules/components/edges/CubicBezierEdge.js

@@ -1,8 +1,8 @@
 import CubicBezierEdgeBase from './util/CubicBezierEdgeBase'
 
 class CubicBezierEdge extends CubicBezierEdgeBase {
-  constructor(options, body, labelModule) {
-    super(options, body, labelModule);
+  constructor(id, options, body, labelModule) {
+    super(id, options, body, labelModule);
   }
 
   /**

lib/network/modules/components/edges/util/BezierEdgeBase.js

@@ -1,8 +1,8 @@
 import EdgeBase from './EdgeBase'
 
 class BezierEdgeBase extends EdgeBase {
-  constructor(options, body, labelModule) {
-    super(options, body, labelModule);
+  constructor(id, options, body, labelModule) {
+    super(id, options, body, labelModule);
   }
 
   /**

lib/network/modules/components/edges/util/CubicBezierEdgeBase.js

@@ -1,8 +1,8 @@
 import BezierEdgeBase from './BezierEdgeBase'
 
 class CubicBezierEdgeBase extends BezierEdgeBase {
-  constructor(options, body, labelModule) {
-    super(options, body, labelModule);
+  constructor(id, options, body, labelModule) {
+    super(id, options, body, labelModule);
   }
 
   /**

lib/network/modules/components/edges/util/EdgeBase.js

@@ -1,7 +1,8 @@
 let util = require("../../../../../util");
 
 class EdgeBase {
-  constructor(options, body, labelModule) {
+  constructor(id, options, body, labelModule) {
+    this.id = id;
     this.body = body;
     this.labelModule = labelModule;
     this.options = {};
@@ -24,7 +25,6 @@ class EdgeBase {
     this.options = options;
     this.from = this.body.nodes[this.options.from];
     this.to = this.body.nodes[this.options.to];
-    this.id = this.options.id;
   }
 
   /**