Merge branch 'develop' of github.com:almende/vis into develop

HISTORY.md

@@ -14,6 +14,9 @@ http://visjs.org
 - Fixed #1334 (again): Network now ignores scroll when interaction:zoomView is false.
 - Fixed #1588: destroy now unsubscribed from the dataset.
 - Fixed #1584: Navigation buttons broken.
+- Fixed #1596: correct clean up of manipulation dom elements.
+- Fixed #1594: bug in hierarchical layout.
+- Fixed #1597: Allow zero borders and addressed scaling artifacts.
 
 ### Timeline
 

docs/data/dataset.html

@@ -104,7 +104,7 @@
     Vis.js comes with a flexible DataSet, which can be used to hold and
     manipulate unstructured data and listen for changes in the data.
     The DataSet is key/value based. Data items can be added, updated and
-    removed from the DatSet, and one can subscribe to changes in the DataSet.
+    removed from the DataSet, and one can subscribe to changes in the DataSet.
     The data in the DataSet can be filtered and ordered, and fields (like
     dates) can be converted to a specific type. Data can be normalized when
     appending it to the DataSet as well.
@@ -1020,4 +1020,4 @@ var positiveBalance = dataset.get({
 <script src="../js/tipuesearch.config.js"></script>
 <script src="../js/tipuesearch.js"></script>
 <!-- controller -->
-<script src="../js/main.js"></script>
+<script src="../js/main.js"></script>

lib/network/modules/LayoutEngine.js

@@ -148,7 +148,7 @@ class LayoutEngine {
       // force all edges into static smooth curves. Only applies to edges that do not use the global options for smooth.
       this.body.emitter.emit('_forceDisableDynamicCurves', type);
     }
-    console.log(JSON.stringify(allOptions), JSON.stringify(this.optionsBackup));
+
     return allOptions;
   }
 
@@ -339,6 +339,15 @@ class LayoutEngine {
           }
         }
 
+
+        // fallback for cases where there are nodes but no edges
+        for (let nodeId in this.body.nodes) {
+          if (this.body.nodes.hasOwnProperty(nodeId)) {
+            if (this.hierarchicalLevels[nodeId] === undefined) {
+              this.hierarchicalLevels[nodeId] = 0;
+            }
+          }
+        }
         // check the distribution of the nodes per level.
         let distribution = this._getDistribution();
 
@@ -400,7 +409,7 @@ class LayoutEngine {
           }
         }
       }
-      return [min, max];
+      return {min:min, max:max};
     };
 
     // get the width of all trees
@@ -751,27 +760,32 @@ class LayoutEngine {
       useMap = false;
     }
     let level = this.hierarchicalLevels[node.id];
-    let index = this.distributionIndex[node.id];
-    let position = this._getPositionForHierarchy(node);
-    let minSpace = 1e9;
-    let maxSpace = 1e9;
-    if (index !== 0) {
-      let prevNode = this.distributionOrdering[level][index - 1];
-      if ((useMap === true && map[prevNode.id] === undefined) || useMap === false) {
-        let prevPos = this._getPositionForHierarchy(prevNode);
-        minSpace = position - prevPos;
+    if (level !== undefined) {
+      let index = this.distributionIndex[node.id];
+      let position = this._getPositionForHierarchy(node);
+      let minSpace = 1e9;
+      let maxSpace = 1e9;
+      if (index !== 0) {
+        let prevNode = this.distributionOrdering[level][index - 1];
+        if ((useMap === true && map[prevNode.id] === undefined) || useMap === false) {
+          let prevPos = this._getPositionForHierarchy(prevNode);
+          minSpace = position - prevPos;
+        }
       }
-    }
 
-    if (index != this.distributionOrdering[level].length - 1) {
-      let nextNode = this.distributionOrdering[level][index + 1];
-      if ((useMap === true && map[nextNode.id] === undefined) || useMap === false) {
-        let nextPos = this._getPositionForHierarchy(nextNode);
-        maxSpace = Math.min(maxSpace, nextPos - position);
+      if (index != this.distributionOrdering[level].length - 1) {
+        let nextNode = this.distributionOrdering[level][index + 1];
+        if ((useMap === true && map[nextNode.id] === undefined) || useMap === false) {
+          let nextPos = this._getPositionForHierarchy(nextNode);
+          maxSpace = Math.min(maxSpace, nextPos - position);
+        }
       }
-    }
 
-    return [minSpace, maxSpace];
+      return [minSpace, maxSpace];
+    }
+    else {
+      return [0, 0];
+    }
   }
 
   /**
@@ -1007,14 +1021,18 @@ class LayoutEngine {
     // get the minimum level
     for (let nodeId in this.body.nodes) {
       if (this.body.nodes.hasOwnProperty(nodeId)) {
-        minLevel = Math.min(this.hierarchicalLevels[nodeId], minLevel);
+        if (this.hierarchicalLevels[nodeId] !== undefined) {
+          minLevel = Math.min(this.hierarchicalLevels[nodeId], minLevel);
+        }
       }
     }
 
     // subtract the minimum from the set so we have a range starting from 0
     for (let nodeId in this.body.nodes) {
       if (this.body.nodes.hasOwnProperty(nodeId)) {
-        this.hierarchicalLevels[nodeId] -= minLevel;
+        if (this.hierarchicalLevels[nodeId] !== undefined) {
+          this.hierarchicalLevels[nodeId] -= minLevel;
+        }
       }
     }
   }
@@ -1057,12 +1075,18 @@ class LayoutEngine {
         progress[node.id] = true;
         let childNode;
         for (let i = 0; i < node.edges.length; i++) {
-          if (node.edges[i].toId === node.id) {childNode = node.edges[i].from;}
-          else                                {childNode = node.edges[i].to;}
+          if (node.edges[i].connected === true) {
+            if (node.edges[i].toId === node.id) {
+              childNode = node.edges[i].from;
+            }
+            else {
+              childNode = node.edges[i].to;
+            }
 
-          if (node.id !== childNode.id) {
-            callback(node, childNode, node.edges[i]);
-            crawler(childNode);
+            if (node.id !== childNode.id) {
+              callback(node, childNode, node.edges[i]);
+              crawler(childNode);
+            }
           }
         }
       }
@@ -1259,6 +1283,7 @@ class LayoutEngine {
         }
       }
     }
+
     if (this.options.hierarchical.direction === 'UD' || this.options.hierarchical.direction === 'DU') {
       node.x = position;
     }

lib/network/modules/ManipulationSystem.js

@@ -642,7 +642,7 @@ class ManipulationSystem {
     // remove the manipulation divs
     if (this.manipulationDiv) {this.canvas.frame.removeChild(this.manipulationDiv);}
     if (this.editModeDiv)     {this.canvas.frame.removeChild(this.editModeDiv);}
-    if (this.closeDiv)        {this.canvas.frame.removeChild(this.manipulationDiv);}
+    if (this.closeDiv)        {this.canvas.frame.removeChild(this.closeDiv);}
 
     // set the references to undefined
     this.manipulationDiv = undefined;

lib/network/modules/components/nodes/shapes/Box.js

@@ -44,11 +44,14 @@ class Box extends NodeBase {
 
     //draw dashed border if enabled, save and restore is required for firefox not to crash on unix.
     ctx.save();
-    this.enableBorderDashes(ctx);
-    //draw the border
-    ctx.stroke();
-    //disable dashed border for other elements
-    this.disableBorderDashes(ctx);
+    // if borders are zero width, they will be drawn with width 1 by default. This prevents that
+    if (borderWidth > 0) {
+      this.enableBorderDashes(ctx);
+      //draw the border
+      ctx.stroke();
+      //disable dashed border for other elements
+      this.disableBorderDashes(ctx);
+    }
     ctx.restore();
 
     this.updateBoundingBox(x,y,ctx,selected);

lib/network/modules/components/nodes/shapes/Database.js

@@ -23,13 +23,12 @@ class Database extends NodeBase {
     this.left = x - this.width / 2;
     this.top  = y - this.height / 2;
 
-    var borderWidth = this.options.borderWidth;
+    var neutralborderWidth = this.options.borderWidth;
     var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;
+    var borderWidth = (selected ? selectionLineWidth : neutralborderWidth) / this.body.view.scale;
+    ctx.lineWidth = Math.min(this.width, borderWidth);
 
     ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border;
-    ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth);
-    ctx.lineWidth *= this.networkScaleInv;
-    ctx.lineWidth = Math.min(this.width, ctx.lineWidth);
 
     ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
     ctx.database(x - this.width / 2, y - this.height * 0.5, this.width, this.height);
@@ -43,11 +42,14 @@ class Database extends NodeBase {
 
     //draw dashed border if enabled, save and restore is required for firefox not to crash on unix.
     ctx.save();
-    this.enableBorderDashes(ctx);
-    //draw the border
-    ctx.stroke();
-    //disable dashed border for other elements
-    this.disableBorderDashes(ctx);
+    // if borders are zero width, they will be drawn with width 1 by default. This prevents that
+    if (borderWidth > 0) {
+      this.enableBorderDashes(ctx);
+      //draw the border
+      ctx.stroke();
+      //disable dashed border for other elements
+      this.disableBorderDashes(ctx);
+    }
     ctx.restore();
 
     this.updateBoundingBox(x,y,ctx,selected);

lib/network/modules/components/nodes/shapes/Ellipse.js

@@ -25,15 +25,13 @@ class Ellipse extends NodeBase {
     this.left = x - this.width * 0.5;
     this.top = y - this.height * 0.5;
 
-    var borderWidth = this.options.borderWidth;
+    var neutralborderWidth = this.options.borderWidth;
     var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;
+    var borderWidth = (selected ? selectionLineWidth : neutralborderWidth) / this.body.view.scale;
+    ctx.lineWidth = Math.min(this.width, borderWidth);
 
     ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border;
 
-    ctx.lineWidth = (selected ? selectionLineWidth : borderWidth);
-    ctx.lineWidth /= this.body.view.scale;
-    ctx.lineWidth = Math.min(this.width, ctx.lineWidth);
-
     ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
     ctx.ellipse(this.left, this.top, this.width, this.height);
 
@@ -46,11 +44,16 @@ class Ellipse extends NodeBase {
 
     //draw dashed border if enabled, save and restore is required for firefox not to crash on unix.
     ctx.save();
-    this.enableBorderDashes(ctx);
-    //draw the border
-    ctx.stroke();
-    //disable dashed border for other elements
-    this.disableBorderDashes(ctx);
+
+    // if borders are zero width, they will be drawn with width 1 by default. This prevents that
+    if (borderWidth > 0) {
+      this.enableBorderDashes(ctx);
+      //draw the border
+      ctx.stroke();
+      //disable dashed border for other elements
+      this.disableBorderDashes(ctx);
+    }
+
     ctx.restore();
 
     this.updateBoundingBox(x, y, ctx, selected);

lib/network/modules/components/nodes/shapes/Image.js

@@ -18,17 +18,15 @@ class Image extends CircleImageBase {
     this.top = y - this.height / 2;
 
     if (this.options.shapeProperties.useBorderWithImage === true) {
-      let borderWidth = this.options.borderWidth;
-
-      let selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;
+      var neutralborderWidth = this.options.borderWidth;
+      var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;
+      var borderWidth = (selected ? selectionLineWidth : neutralborderWidth) / this.body.view.scale;
+      ctx.lineWidth = Math.min(this.width, borderWidth);
 
       ctx.beginPath();
 
       // setup the line properties.
       ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border;
-      ctx.lineWidth = (selected ? selectionLineWidth : borderWidth);
-      ctx.lineWidth /= this.body.view.scale;
-      ctx.lineWidth = Math.min(this.width, ctx.lineWidth);
 
       // set a fillstyle
       ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
@@ -42,11 +40,14 @@ class Image extends CircleImageBase {
 
       //draw dashed border if enabled, save and restore is required for firefox not to crash on unix.
       ctx.save();
-      this.enableBorderDashes(ctx);
-      //draw the border
-      ctx.stroke();
-      //disable dashed border for other elements
-      this.disableBorderDashes(ctx);
+      // if borders are zero width, they will be drawn with width 1 by default. This prevents that
+      if (borderWidth > 0) {
+        this.enableBorderDashes(ctx);
+        //draw the border
+        ctx.stroke();
+        //disable dashed border for other elements
+        this.disableBorderDashes(ctx);
+      }
       ctx.restore();
 
       ctx.closePath();

lib/network/modules/components/nodes/util/CircleImageBase.js

@@ -66,14 +66,12 @@ class CircleImageBase extends NodeBase {
   }
 
   _drawRawCircle(ctx, x, y, selected, hover, size) {
-    var borderWidth = this.options.borderWidth;
+    var neutralborderWidth = this.options.borderWidth;
     var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;
+    var borderWidth = (selected ? selectionLineWidth : neutralborderWidth) / this.body.view.scale;
+    ctx.lineWidth = Math.min(this.width, borderWidth);
 
     ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border;
-
-    ctx.lineWidth = (selected ? selectionLineWidth : borderWidth);
-    ctx.lineWidth *= this.networkScaleInv;
-    ctx.lineWidth = Math.min(this.width, ctx.lineWidth);
     ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
     ctx.circle(x, y, size);
 
@@ -86,11 +84,14 @@ class CircleImageBase extends NodeBase {
 
     //draw dashed border if enabled, save and restore is required for firefox not to crash on unix.
     ctx.save();
-    this.enableBorderDashes(ctx);
-    //draw the border
-    ctx.stroke();
-    //disable dashed border for other elements
-    this.disableBorderDashes(ctx);
+    // if borders are zero width, they will be drawn with width 1 by default. This prevents that
+    if (borderWidth > 0) {
+      this.enableBorderDashes(ctx);
+      //draw the border
+      ctx.stroke();
+      //disable dashed border for other elements
+      this.disableBorderDashes(ctx);
+    }
     ctx.restore();
   }
 

lib/network/modules/components/nodes/util/ShapeBase.js

@@ -20,13 +20,12 @@ class ShapeBase extends NodeBase {
     this.left = x - this.width / 2;
     this.top = y - this.height / 2;
 
-    var borderWidth = this.options.borderWidth;
+    var neutralborderWidth = this.options.borderWidth;
     var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;
+    var borderWidth = (selected ? selectionLineWidth : neutralborderWidth) / this.body.view.scale;
+    ctx.lineWidth = Math.min(this.width, borderWidth);
 
     ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border;
-    ctx.lineWidth = (selected ? selectionLineWidth : borderWidth);
-    ctx.lineWidth /= this.body.view.scale;
-    ctx.lineWidth = Math.min(this.width, ctx.lineWidth);
     ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
     ctx[shape](x, y, this.options.size);
 
@@ -39,11 +38,14 @@ class ShapeBase extends NodeBase {
 
     //draw dashed border if enabled, save and restore is required for firefox not to crash on unix.
     ctx.save();
-    this.enableBorderDashes(ctx);
-    //draw the border
-    ctx.stroke();
-    //disable dashed border for other elements
-    this.disableBorderDashes(ctx);
+    // if borders are zero width, they will be drawn with width 1 by default. This prevents that
+    if (borderWidth > 0) {
+      this.enableBorderDashes(ctx);
+      //draw the border
+      ctx.stroke();
+      //disable dashed border for other elements
+      this.disableBorderDashes(ctx);
+    }
     ctx.restore();
 
     if (this.options.label !== undefined) {