reworked some of the options

examples/network/01_basic_usage.html

@@ -20,11 +20,11 @@
 <script type="text/javascript">
   // create an array with nodes
   var nodes = [
-    {id: 1, label: 'Node 1'},
-    {id: 2, label: 'Node 2'},
-    {id: 3, label: 'Node 3'},
-    {id: 4, label: 'Node 4'},
-    {id: 5, label: 'Node 5'}
+    {id: 1, label: 'Node 1', value:3},
+    {id: 2, label: 'Node 2', value:1},
+    {id: 3, label: 'Node 3', value:5},
+    {id: 4, label: 'Node 4', value:3},
+    {id: 5, label: 'Node 5', value:2}
   ];
 
   // create an array with edges
@@ -44,7 +44,8 @@
     edges: edges
   };
   var options = {
-      configure: 'nodes',
+//    nodes:{shape:'dot'}
+//      configure: 'nodes',
 //      physics:{stabilization:true}
   }
   var network = new vis.Network(container, data, options);

lib/network/modules/EdgesHandler.js

@@ -89,7 +89,7 @@ class EdgesHandler {
       title:undefined,
       width: 1,
       widthSelectionMultiplier: 2,
-      value:1
+      value: undefined
     };
 
     util.extend(this.options, this.defaultOptions);

lib/network/modules/NodesHandler.js

@@ -69,7 +69,7 @@ class NodesHandler {
         min: 10,
         max: 30,
         label: {
-          enabled: true,
+          enabled: false,
           min: 14,
           max: 30,
           maxVisible: 30,
@@ -88,7 +88,7 @@ class NodesHandler {
       shape: 'ellipse',
       size: 25,
       title: undefined,
-      value: 1,
+      value: undefined,
       x: undefined,
       y: undefined
     };

lib/network/modules/components/Edge.js

@@ -32,12 +32,14 @@ class Edge {
     this.id = undefined;
     this.fromId = undefined;
     this.toId = undefined;
-    this.value = undefined;
     this.selected = false;
     this.hover = false;
     this.labelDirty = true;
     this.colorDirty = true;
 
+    this.baseWidth = this.options.width;
+    this.baseFontSize = this.options.font.size;
+
     this.from = undefined; // a node
     this.to   = undefined; // a node
 
@@ -68,7 +70,6 @@ class Edge {
     if (options.from !== undefined) {this.fromId = options.from;}
     if (options.to !== undefined)   {this.toId = options.to;}
     if (options.title !== undefined) {this.title = options.title;}
-    if (options.value !== undefined) {this.value = options.value;}
 
     // A node is connected when it has a from and to node that both exist in the network.body.nodes.
     this.connect();
@@ -158,6 +159,9 @@ class Edge {
 
   updateLabelModule() {
     this.labelModule.setOptions(this.options);
+    if (this.labelModule.baseSize !== undefined) {
+      this.baseFontSize = this.labelModule.baseSize;
+    }
   }
 
   updateEdgeType() {
@@ -276,7 +280,7 @@ class Edge {
    * @return {Number} value
    */
   getValue() {
-    return this.value;
+    return this.options.value;
   }
 
 
@@ -288,8 +292,8 @@ class Edge {
    * @param total
    */
   setValueRange(min, max, total) {
-    if (this.value !== undefined) {
-      var scale = this.options.scaling.customScalingFunction(min, max, total, this.value);
+    if (this.options.value !== undefined) {
+      var scale = this.options.scaling.customScalingFunction(min, max, total, this.options.value);
       var widthDiff = this.options.scaling.max - this.options.scaling.min;
       if (this.options.scaling.label.enabled === true) {
         var fontDiff = this.options.scaling.label.max - this.options.scaling.label.min;
@@ -297,6 +301,10 @@ class Edge {
       }
       this.options.width = this.options.scaling.min + scale * widthDiff;
     }
+    else {
+      this.options.width = this.baseWidth;
+      this.options.font.size = this.baseFontSize;
+    }
   }
 
 

lib/network/modules/components/Node.js

@@ -57,6 +57,8 @@ class Node {
     // state options
     this.x = undefined;
     this.y = undefined;
+    this.baseSize = this.options.size;
+    this.baseFontSize = this.options.font.size;
     this.predefinedPosition = false; // used to check if initial zoomExtent should just take the range or approximate
     this.selected = false;
     this.hover = false;
@@ -116,7 +118,7 @@ class Node {
 
     if (options.x !== undefined)     {this.x = options.x; this.predefinedPosition = true;}
     if (options.y !== undefined)     {this.y = options.y; this.predefinedPosition = true;}
-    if (options.value !== undefined) {this.value = options.value;}
+    if (options.size !== undefined)  {this.baseSize = options.size;}
 
     // this transforms all shorthands into fully defined options
     Node.parseOptions(this.options,options);
@@ -200,6 +202,9 @@ class Node {
 
   updateLabelModule() {
     this.labelModule.setOptions(this.options);
+    if (this.labelModule.baseSize !== undefined) {
+      this.baseFontSize = this.labelModule.baseSize;
+    }
   }
 
   updateShape() {
@@ -328,7 +333,7 @@ class Node {
    * @return {Number} value
    */
   getValue() {
-    return this.value;
+    return this.options.value;
   }
 
 
@@ -339,8 +344,8 @@ class Node {
    * @param {Number} max
    */
   setValueRange(min, max, total) {
-    if (this.value !== undefined) {
-      var scale = this.options.scaling.customScalingFunction(min, max, total, this.value);
+    if (this.options.value !== undefined) {
+      var scale = this.options.scaling.customScalingFunction(min, max, total, this.options.value);
       var sizeDiff = this.options.scaling.max - this.options.scaling.min;
       if (this.options.scaling.label.enabled === true) {
         var fontDiff = this.options.scaling.label.max - this.options.scaling.label.min;
@@ -348,6 +353,10 @@ class Node {
       }
       this.options.size = this.options.scaling.min + scale * sizeDiff;
     }
+    else {
+      this.options.size = this.baseSize;
+      this.options.font.size = this.baseFontSize;
+    }
   }
 
 

lib/network/modules/components/unified/Label.js

@@ -4,18 +4,7 @@ class Label {
   constructor(body,options) {
     this.body = body;
 
-    this.fontOptions = {};
-    this.defaultOptions = {
-      color: '#343434',
-      size: 14, // px
-      face: 'arial',
-      background: 'none',
-      stroke: 0, // px
-      strokeColor: 'white',
-      align:'horizontal'
-    }
-    util.extend(this.fontOptions, this.defaultOptions);
-
+    this.baseSize = undefined;
     this.setOptions(options);
     this.size = {top: 0, left: 0, width: 0, height: 0, yLine: 0}; // could be cached
   }
@@ -27,22 +16,30 @@ class Label {
       this.labelDirty = true;
     }
 
-    Label.parseOptions(this.fontOptions,options);
+    if (options.font !== undefined) {
+      Label.parseOptions(this.options.font,options);
+      if (typeof options.font === 'string') {
+        this.baseSize = this.options.font.size;
+      }
+      else if (typeof options.font === 'object') {
+        if (options.font.size !== undefined) {
+          this.baseSize = options.font.size;
+        }
+      }
+    }
   }
 
   static parseOptions(parentOptions, newOptions) {
-    if (newOptions.font !== undefined) {
-      if (typeof newOptions.font === 'string') {
-        let newOptionsArray = newOptions.font.split(" ");
-        parentOptions.size = newOptionsArray[0].replace("px",'');
-        parentOptions.face = newOptionsArray[1];
-        parentOptions.color = newOptionsArray[2];
-      }
-      else if (typeof newOptions.font === 'object') {
-        util.fillIfDefined(parentOptions, newOptions.font);
-      }
-      parentOptions.size = Number(parentOptions.size);
+    if (typeof newOptions.font === 'string') {
+      let newOptionsArray = newOptions.font.split(" ");
+      parentOptions.size = newOptionsArray[0].replace("px",'');
+      parentOptions.face = newOptionsArray[1];
+      parentOptions.color = newOptionsArray[2];
+    }
+    else if (typeof newOptions.font === 'object') {
+      util.fillIfDefined(parentOptions, newOptions.font);
     }
+    parentOptions.size = Number(parentOptions.size);
   }
 
 
@@ -60,7 +57,7 @@ class Label {
       return;
 
     // check if we have to render the label
-    let viewFontSize = this.fontOptions.size * this.body.view.scale;
+    let viewFontSize = this.options.font.size * this.body.view.scale;
     if (this.options.label && viewFontSize < this.options.scaling.label.drawThreshold - 1)
       return;
 
@@ -79,12 +76,12 @@ class Label {
    * @private
    */
   _drawBackground(ctx) {
-    if (this.fontOptions.background !== undefined && this.fontOptions.background !== "none") {
-      ctx.fillStyle = this.fontOptions.background;
+    if (this.options.font.background !== undefined && this.options.font.background !== "none") {
+      ctx.fillStyle = this.options.font.background;
 
       let lineMargin = 2;
 
-      switch (this.fontOptions.align) {
+      switch (this.options.font.align) {
         case 'middle':
           ctx.fillRect(-this.size.width * 0.5, -this.size.height * 0.5, this.size.width, this.size.height);
           break;
@@ -110,7 +107,7 @@ class Label {
    * @private
    */
   _drawText(ctx, selected, x, y, baseline = 'middle') {
-    let fontSize = this.fontOptions.size;
+    let fontSize = this.options.font.size;
     let viewFontSize = fontSize * this.body.view.scale;
     // this ensures that there will not be HUGE letters on screen by setting an upper limit on the visible text size (regardless of zoomLevel)
     if (viewFontSize >= this.options.scaling.label.maxVisible) {
@@ -122,20 +119,20 @@ class Label {
     [x, yLine] = this._setAlignment(ctx, x, yLine, baseline);
 
     // configure context for drawing the text
-    ctx.font = (selected ? 'bold ' : '') + fontSize + "px " + this.fontOptions.face;
+    ctx.font = (selected ? 'bold ' : '') + fontSize + "px " + this.options.font.face;
     ctx.fillStyle = fontColor;
     ctx.textAlign = 'center';
 
     // set the strokeWidth
-    if (this.fontOptions.stroke > 0) {
-      ctx.lineWidth = this.fontOptions.stroke;
+    if (this.options.font.stroke > 0) {
+      ctx.lineWidth = this.options.font.stroke;
       ctx.strokeStyle = strokeColor;
       ctx.lineJoin = 'round';
     }
 
     // draw the text
     for (let i = 0; i < this.lineCount; i++) {
-      if (this.fontOptions.stroke > 0) {
+      if (this.options.font.stroke > 0) {
         ctx.strokeText(this.lines[i], x, yLine);
       }
       ctx.fillText(this.lines[i], x, yLine);
@@ -146,16 +143,16 @@ class Label {
   _setAlignment(ctx, x, yLine, baseline) {
     // check for label alignment (for edges)
     // TODO: make alignment for nodes
-    if (this.fontOptions.align !== 'horizontal') {
+    if (this.options.font.align !== 'horizontal') {
       x = 0;
       yLine = 0;
 
       let lineMargin = 2;
-      if (this.fontOptions.align === 'top') {
+      if (this.options.font.align === 'top') {
         ctx.textBaseline = 'alphabetic';
         yLine -= 2 * lineMargin; // distance from edge, required because we use alphabetic. Alphabetic has less difference between browsers
       }
-      else if (this.fontOptions.align === 'bottom') {
+      else if (this.options.font.align === 'bottom') {
         ctx.textBaseline = 'hanging';
         yLine += 2 * lineMargin;// distance from edge, required because we use hanging. Hanging has less difference between browsers
       }
@@ -179,8 +176,8 @@ class Label {
    * @private
    */
   _getColor(viewFontSize) {
-    let fontColor = this.fontOptions.color || '#000000';
-    let strokeColor = this.fontOptions.strokeColor || '#ffffff';
+    let fontColor = this.options.font.color || '#000000';
+    let strokeColor = this.options.font.strokeColor || '#ffffff';
     if (viewFontSize <= this.options.scaling.label.drawThreshold) {
       let opacity = Math.max(0, Math.min(1, 1 - (this.options.scaling.label.drawThreshold - viewFontSize)));
       fontColor = util.overrideOpacity(fontColor, opacity);
@@ -199,7 +196,7 @@ class Label {
   getTextSize(ctx, selected = false) {
     let size = {
       width: this._processLabel(ctx,selected),
-      height: this.fontOptions.size * this.lineCount,
+      height: this.options.font.size * this.lineCount,
       lineCount: this.lineCount
     };
     return size;
@@ -218,12 +215,12 @@ class Label {
     if (this.labelDirty === true) {
       this.size.width = this._processLabel(ctx,selected);
     }
-    this.size.height = this.fontOptions.size * this.lineCount;
+    this.size.height = this.options.font.size * this.lineCount;
     this.size.left = x - this.size.width * 0.5;
     this.size.top = y - this.size.height * 0.5;
-    this.size.yLine = y + (1 - this.lineCount) * 0.5 * this.fontOptions.size;
+    this.size.yLine = y + (1 - this.lineCount) * 0.5 * this.options.font.size;
     if (baseline === "hanging") {
-      this.size.top += 0.5 * this.fontOptions.size;
+      this.size.top += 0.5 * this.options.font.size;
       this.size.top += 4;   // distance from node, required because we use hanging. Hanging has less difference between browsers
       this.size.yLine += 4; // distance from node
     }
@@ -246,7 +243,7 @@ class Label {
     if (this.options.label !== undefined) {
       lines = String(this.options.label).split('\n');
       lineCount = lines.length;
-      ctx.font = (selected ? 'bold ' : '') + this.fontOptions.size + "px " + this.fontOptions.face;
+      ctx.font = (selected ? 'bold ' : '') + this.options.font.size + "px " + this.options.font.face;
       width = ctx.measureText(lines[0]).width;
       for (let i = 1; i < lineCount; i++) {
         let lineWidth = ctx.measureText(lines[i]).width;