bug fixes, methods added and options changed to clean up code and to adhere to docs

dist/vis.css

@@ -798,12 +798,17 @@ div.vis-network-tooltip {
   padding: 5px;
   white-space: nowrap;
 
+  font-family: verdana;
+  font-size:14px;
+  font-color:#000000;
+  background-color: #f5f4ed;
+
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
-  border: 1px solid;
+  border: 1px solid #808074;
 
-  box-shadow: 3px 3px 10px rgba(128, 128, 128, 0.5);
+  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
 }
 div.vis-network-configuration {
     position:relative;

examples/network/01_basic_usage.html

@@ -9,6 +9,7 @@
   <style type="text/css">
     #mynetwork {
       width: 600px;
+      margin:90px;
       height: 400px;
       border: 1px solid lightgray;
     }
@@ -20,7 +21,7 @@
 <script type="text/javascript">
   // create an array with nodes
   var nodes = [
-    {id: 1, label: 'Node 1', value:3},
+    {id: 1, label: 'Node 1', value:3, title:'hello world'},
     {id: 2, label: 'Node 2', value:1},
     {id: 3, label: 'Node 3', value:5},
     {id: 4, label: 'Node 4', value:3},
@@ -44,6 +45,7 @@
     edges: edges
   };
   var options = {
+    interaction:{navigationButtons:true}
 //    edges:{
 //      shadow:true,
 //      shape:'dot'

examples/network/20_navigation.html

@@ -10,6 +10,7 @@
     #mynetwork {
       width: 600px;
       height: 600px;
+      margin:100px;
       border: 1px solid lightgray;
     }
     table.legend_table {

lib/network/Network.js

@@ -337,24 +337,6 @@ Network.prototype._updateValueRange = function(obj) {
 };
 
 
-/**
- * Scale the network
- * @param {Number} scale   Scaling factor 1.0 is unscaled
- * @private
- */
-Network.prototype._setScale = function(scale) {
-  this.body.view.scale = scale;
-};
-
-/**
- * Get the current scale of  the network
- * @return {Number} scale   Scaling factor 1.0 is unscaled
- * @private
- */
-Network.prototype._getScale = function() {
-  return this.body.view.scale;
-};
-
 
 /**
  * Load the XY positions of the nodes into the dataset.
@@ -417,24 +399,6 @@ Network.prototype.isActive = function () {
 };
 
 
-/**
- * Sets the scale
- * @returns {Number}
- */
-Network.prototype.setScale = function () {
-  return this._setScale();
-};
-
-
-/**
- * Returns the scale
- * @returns {Number}
- */
-Network.prototype.getScale = function () {
-  return this._getScale();
-};
-
-
 /**
  * Check if a node is a cluster.
  * @param nodeId
@@ -450,14 +414,6 @@ Network.prototype.isCluster = function(nodeId) {
   }
 };
 
-/**
- * Returns the scale
- * @returns {Number}
- */
-Network.prototype.getCenterCoordinates = function () {
-  return this.DOMtoCanvas({x: 0.5 * this.frame.canvas.clientWidth, y: 0.5 * this.frame.canvas.clientHeight});
-};
-
 
 Network.prototype.getBoundingBox = function(nodeId) {
   if (this.body.nodes[nodeId] !== undefined) {

lib/network/css/network-tooltip.css

@@ -4,10 +4,15 @@ div.vis-network-tooltip {
   padding: 5px;
   white-space: nowrap;
 
+  font-family: verdana;
+  font-size:14px;
+  font-color:#000000;
+  background-color: #f5f4ed;
+
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
-  border: 1px solid;
+  border: 1px solid #808074;
 
-  box-shadow: 3px 3px 10px rgba(128, 128, 128, 0.5);
+  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
 }

lib/network/modules/ConfigurationSystem.js

@@ -151,17 +151,8 @@ class ConfigurationSystem {
         dragView: true,
         zoomView: true,
         hoverEnabled: false,
-        showNavigationIcons: false,
-        tooltip: {
-          delay: [300, 0, 1000, 25],
-          fontColor: ['color','#000000'],
-          fontSize: [14, 0, 40, 1], // px
-          fontFace: ['arial', 'verdana', 'tahoma'],
-          color: {
-            border: ['color','#666666'],
-            background: ['color','#FFFFC6']
-          }
-        },
+        navigationButtons: false,
+        tooltipDelay: [300, 0, 1000, 25],
         keyboard: {
           enabled: false,
           speed: {x: [10, 0, 40, 1], y: [10, 0, 40, 1], zoom: [0.02, 0, 0.1, 0.005]},
@@ -260,29 +251,30 @@ class ConfigurationSystem {
       util.deepExtend(this.actualOptions.selection, this.network.selectionHandler.selection, true);
       util.deepExtend(this.actualOptions.renderer, this.network.renderer.selection, true);
 
-      if (this.actualOptions.configurationContainer !== undefined) {
-        this.container = this.actualOptions.configurationContainer;
-      }
-      else {
-        this.container = this.network.body.container;
-      }
 
-      let config;
-      if (this.actualOptions.configure instanceof Array) {
+      this.container = this.network.body.container;
+      let config = true;
+      if (typeof this.actualOptions.configure === 'string') {
+        config = this.actualOptions.configure;
+      }
+      else if (this.actualOptions.configure instanceof Array) {
         config = this.actualOptions.configure.join();
       }
-      else if (typeof this.actualOptions.configure === 'string') {
-        config = this.actualOptions.configure;
+      else if (typeof this.actualOptions.configure === 'object') {
+        if (this.actualOptions.configure.container !== undefined) {
+          this.container = this.actualOptions.configure.container;
+        }
+        if (this.actualOptions.configure.filter !== undefined) {
+          config = this.actualOptions.configure.filter;
+        }
       }
       else if (typeof this.actualOptions.configure === 'boolean') {
         config = this.actualOptions.configure;
       }
-      else {
-        this._clean();
-        throw new Error('the option for configure has to be either a string, boolean or an array. Supplied:' + this.options.configure);
-        return;
+
+      if (config === false) {
+        this._create(config);
       }
-      this._create(config);
     }
   }
 

lib/network/modules/InteractionHandler.js

@@ -1,7 +1,7 @@
 let util = require('../../util');
 
-import NavigationHandler from "./components/NavigationHandler"
-import Popup             from "./components/Popup"
+import NavigationHandler from './components/NavigationHandler'
+import Popup             from './components/Popup'
 
 class InteractionHandler {
   constructor(body, canvas, selectionHandler) {
@@ -40,16 +40,7 @@ class InteractionHandler {
       zoomView: true,
       hoverEnabled: false,
       navigationButtons: false,
-      tooltip: {
-        delay: 300,
-        fontColor: '#000000',
-        fontSize: 14, // px
-        fontFace: 'verdana',
-        color: {
-          border: '#666666',
-          background: '#FFFFC6'
-        }
-      },
+      tooltipDelay: 300,
       keyboard: {
         enabled: false,
         speed: {x: 10, y: 10, zoom: 0.02},
@@ -62,7 +53,7 @@ class InteractionHandler {
   setOptions(options) {
     if (options !== undefined) {
       // extend all but the values in fields
-      let fields = ['keyboard','tooltip'];
+      let fields = ['keyboard'];
       util.selectiveNotDeepExtend(fields,this.options, options);
 
       // merge the keyboard options in.
@@ -100,7 +91,7 @@ class InteractionHandler {
    * @private
    */
   onTouch(event) {
-    if (new Date().valueOf() - this.touchTime > 100) {
+    if (new Date().valueOf() - this.touchTime > 50) {
       this.drag.pointer = this.getPointer(event.center);
       this.drag.pinched = false;
       this.pinch.scale = this.body.view.scale;
@@ -116,14 +107,9 @@ class InteractionHandler {
   onTap(event) {
     let pointer = this.getPointer(event.center);
 
-    let previouslySelected = this.selectionHandler._getSelectedObjectCount() > 0;
-    let selected = this.selectionHandler.selectOnPoint(pointer);
-
-    if (selected === true || (previouslySelected === true && selected === false)) { // select or unselect
-      this.body.emitter.emit('select', this.selectionHandler.getSelection());
-    }
+    this.checkSelectionChanges(pointer);
 
-    this.selectionHandler._generateClickEvent("click",pointer);
+    this.selectionHandler._generateClickEvent('click',pointer);
   }
 
 
@@ -133,7 +119,7 @@ class InteractionHandler {
    */
   onDoubleTap(event) {
     let pointer = this.getPointer(event.center);
-    this.selectionHandler._generateClickEvent("doubleClick",pointer);
+    this.selectionHandler._generateClickEvent('doubleClick',pointer);
   }
 
 
@@ -145,13 +131,10 @@ class InteractionHandler {
   onHold(event) {
     let pointer = this.getPointer(event.center);
 
-    let selectionChanged = this.selectionHandler.selectAdditionalOnPoint(pointer);
-
-    if (selectionChanged === true) { // select or longpress
-      this.body.emitter.emit('select', this.selectionHandler.getSelection());
-    }
+    this.checkSelectionChanges(pointer, true);
 
-    this.selectionHandler._generateClickEvent("click",pointer);
+    this.selectionHandler._generateClickEvent('click',pointer);
+    this.selectionHandler._generateClickEvent('hold',pointer);
   }
 
 
@@ -161,7 +144,56 @@ class InteractionHandler {
    * @private
    */
   onRelease(event) {
-    this.body.emitter.emit("release",event)
+    if (new Date().valueOf() - this.touchTime > 10) {
+      let pointer = this.getPointer(event.center);
+      this.selectionHandler._generateClickEvent('release',pointer);
+      // to avoid double fireing of this event because we have two hammer instances. (on canvas and on frame)
+      this.touchTime = new Date().valueOf();
+    }
+  }
+
+
+  /**
+   *
+   * @param pointer
+   * @param add
+   */
+  checkSelectionChanges(pointer, add = false) {
+    let previouslySelectedEdgeCount = this.selectionHandler._getSelectedEdgeCount();
+    let previouslySelectedNodeCount = this.selectionHandler._getSelectedNodeCount();
+    let previousSelection = this.selectionHandler.getSelection();
+    let selected;
+    if (add === true) {
+      selected = this.selectionHandler.selectAdditionalOnPoint(pointer);
+    }
+    else {
+      selected = this.selectionHandler.selectOnPoint(pointer);
+    }
+    let selectedEdges = this.selectionHandler._getSelectedEdgeCount();
+    let selectedNodes = this.selectionHandler._getSelectedNodeCount();
+
+    if (selectedNodes - previouslySelectedNodeCount > 0) { // node was selected
+      this.selectionHandler._generateClickEvent('selectNode',pointer);
+      selected = true;
+    }
+    else if (selectedNodes - previouslySelectedNodeCount < 0) { // node was deselected
+      this.selectionHandler._generateClickEvent('deselectNode',pointer, previousSelection);
+      selected = true;
+    }
+
+    if (selectedEdges - previouslySelectedEdgeCount > 0) { // node was selected
+      this.selectionHandler._generateClickEvent('selectEdge',pointer);
+      selected = true;
+    }
+    else if (selectedEdges - previouslySelectedEdgeCount < 0) { // node was deselected
+      this.selectionHandler._generateClickEvent('deselectEdge',pointer, previousSelection);
+      selected = true;
+    }
+
+
+    if (selected === true) { // select or unselect
+      this.selectionHandler._generateClickEvent('select',pointer);
+    }
   }
 
 
@@ -185,7 +217,7 @@ class InteractionHandler {
     this.drag.translation = util.extend({},this.body.view.translation); // copy the object
     this.drag.nodeId = undefined;
 
-    this.body.emitter.emit("dragStart", {nodeIds: this.selectionHandler.getSelection().nodes});
+    this.selectionHandler._generateClickEvent('dragStart',pointer);
 
     if (node !== undefined && this.options.dragNodes === true) {
       this.drag.nodeId = node.id;
@@ -231,7 +263,7 @@ class InteractionHandler {
     }
 
     // remove the focus on node if it is focussed on by the focusOnNode
-    this.body.emitter.emit("unlockNode");
+    this.body.emitter.emit('unlockNode');
 
     let pointer = this.getPointer(event.center);
     let selection = this.drag.selection;
@@ -254,7 +286,7 @@ class InteractionHandler {
       });
 
       // start the simulation of the physics
-      this.body.emitter.emit("startSimulation");
+      this.body.emitter.emit('startSimulation');
     }
     else {
       // move the network
@@ -268,7 +300,7 @@ class InteractionHandler {
         let diffY = pointer.y - this.drag.pointer.y;
 
         this.body.view.translation = {x:this.drag.translation.x + diffX, y:this.drag.translation.y + diffY};
-        this.body.emitter.emit("_redraw");
+        this.body.emitter.emit('_redraw');
       }
     }
   }
@@ -287,13 +319,12 @@ class InteractionHandler {
         s.node.options.fixed.x = s.xFixed;
         s.node.options.fixed.y = s.yFixed;
       });
-      this.body.emitter.emit("startSimulation");
+      this.body.emitter.emit('startSimulation');
     }
     else {
-      this.body.emitter.emit("_requestRedraw");
+      this.body.emitter.emit('_requestRedraw');
     }
-
-    this.body.emitter.emit("dragEnd", {nodeIds: this.selectionHandler.getSelection().nodes});
+    this.selectionHandler._generateClickEvent('dragEnd',pointer);
   }
 
 
@@ -356,13 +387,13 @@ class InteractionHandler {
         this.drag.pointer.y = postScaleDragPointer.y;
       }
 
-      this.body.emitter.emit("_requestRedraw");
+      this.body.emitter.emit('_requestRedraw');
 
       if (scaleOld < scale) {
-        this.body.emitter.emit("zoom", {direction: "+"});
+        this.body.emitter.emit('zoom', {direction: '+'});
       }
       else {
-        this.body.emitter.emit("zoom", {direction: "-"});
+        this.body.emitter.emit('zoom', {direction: '-'});
       }
     }
   }
@@ -446,7 +477,7 @@ class InteractionHandler {
         this.popupTimer = undefined;
       }
       if (!this.drag.dragging) {
-        this.popupTimer = setTimeout(() => this._checkShowPopup(pointer), this.options.tooltip.delay);
+        this.popupTimer = setTimeout(() => this._checkShowPopup(pointer), this.options.tooltipDelay);
       }
     }
 
@@ -480,7 +511,7 @@ class InteractionHandler {
           }
         }
       }
-      this.body.emitter.emit("_requestRedraw");
+      this.body.emitter.emit('_requestRedraw');
     }
   }
 
@@ -506,7 +537,7 @@ class InteractionHandler {
 
     let previousPopupObjId = this.popupObj === undefined ? undefined : this.popupObj.id;
     let nodeUnderCursor = false;
-    let popupType = "node";
+    let popupType = 'node';
 
     // check if a node is under the cursor.
     if (this.popupObj === undefined) {
@@ -549,7 +580,7 @@ class InteractionHandler {
 
       if (overlappingEdges.length > 0) {
         this.popupObj = edges[overlappingEdges[overlappingEdges.length - 1]];
-        popupType = "edge";
+        popupType = 'edge';
       }
     }
 
@@ -557,7 +588,7 @@ class InteractionHandler {
       // show popup message window
       if (this.popupObj.id !== previousPopupObjId) {
         if (this.popup === undefined) {
-          this.popup = new Popup(this.frame, this.options.tooltip);
+          this.popup = new Popup(this.canvas.frame);
         }
 
         this.popup.popupTargetType = popupType;
@@ -586,14 +617,7 @@ class InteractionHandler {
    * @private
    */
  _checkHidePopup(pointer) {
-    let x = this.canvas._XconvertDOMtoCanvas(pointer.x);
-    let y = this.canvas._YconvertDOMtoCanvas(pointer.y);
-    let pointerObj = {
-      left:   x,
-      top:    y,
-      right:  x,
-      bottom: y
-    };
+    let pointerObj = this.selectionHandler._pointerToPositionObject(pointer);
 
     let stillOnObj = false;
     if (this.popup.popupTargetType === 'node') {

lib/network/modules/ManipulationSystem.js

@@ -375,9 +375,6 @@ class ManipulationSystem {
       // Enable the GUI
       this.guiEnabled = true;
 
-      // remove override
-      this.selectionHandler.forceSelectEdges = true;
-
       this._createWrappers();
       if (this.editMode === false) {
         this._createEditButton();
@@ -545,9 +542,6 @@ class ManipulationSystem {
     this.manipulationDiv = undefined;
     this.editModeDiv = undefined;
     this.closeDiv = undefined;
-
-    // remove override
-    this.selectionHandler.forceSelectEdges = false;
   }
 
 

lib/network/modules/SelectionHandler.js

@@ -1,12 +1,11 @@
-var Node = require("./components/Node");
-var util = require('../../util');
+let Node = require("./components/Node");
+let util = require('../../util');
 
 class SelectionHandler {
   constructor(body, canvas) {
     this.body = body;
     this.canvas = canvas;
     this.selectionObj = {nodes: [], edges: []};
-    this.forceSelectEdges = false;
 
     this.options = {};
     this.defaultOptions = {
@@ -35,10 +34,10 @@ class SelectionHandler {
    * @private
    */
   selectOnPoint(pointer) {
-    var selected = false;
+    let selected = false;
     if (this.options.select === true) {
       this.unselectAll();
-      var obj = this.getNodeAt(pointer) || this.getEdgeAt(pointer);;
+      let obj = this.getNodeAt(pointer) || this.getEdgeAt(pointer);;
       if (obj !== undefined) {
         selected = this.selectObject(obj);
       }
@@ -48,9 +47,9 @@ class SelectionHandler {
   }
 
   selectAdditionalOnPoint(pointer) {
-    var selectionChanged = false;
+    let selectionChanged = false;
     if (this.options.select === true) {
-      var obj = this.getNodeAt(pointer) || this.getEdgeAt(pointer);;
+      let obj = this.getNodeAt(pointer) || this.getEdgeAt(pointer);;
 
       if (obj !== undefined) {
         selectionChanged = true;
@@ -67,19 +66,23 @@ class SelectionHandler {
     return selectionChanged;
   }
 
-  _generateClickEvent(eventType,pointer) {
-    var properties = this.getSelection();
+  _generateClickEvent(eventType, pointer, oldSelection) {
+    let properties = this.getSelection();
     properties['pointer'] = {
       DOM: {x: pointer.x, y: pointer.y},
       canvas: this.canvas.DOMtoCanvas(pointer)
     }
+
+    if (oldSelection !== undefined) {
+      properties['previousSelection'] = oldSelection;
+    }
     this.body.emitter.emit(eventType, properties);
   }
 
-  selectObject(obj) {
+  selectObject(obj, highlightEdges = this.options.selectConnectedEdges) {
     if (obj !== undefined) {
       if (obj instanceof Node) {
-        if (this.options.selectConnectedEdges === true || this.forceSelectEdges === true) {
+        if (highlightEdges === true) {
           this._selectConnectedEdges(obj);
         }
       }
@@ -106,8 +109,8 @@ class SelectionHandler {
    * @private
    */
   _getAllNodesOverlappingWith(object) {
-    var overlappingNodes = [];
-    var nodes = this.body.nodes;
+    let overlappingNodes = [];
+    let nodes = this.body.nodes;
     for (let i = 0; i < this.body.nodeIndices.length; i++) {
       let nodeId = this.body.nodeIndices[i];
       if (nodes[nodeId].isOverlappingWith(object)) {
@@ -126,7 +129,7 @@ class SelectionHandler {
    * @private
    */
   _pointerToPositionObject(pointer) {
-    var canvasPos = this.canvas.DOMtoCanvas(pointer);
+    let canvasPos = this.canvas.DOMtoCanvas(pointer);
     return {
       left:   canvasPos.x - 1,
       top:    canvasPos.y + 1,
@@ -145,8 +148,8 @@ class SelectionHandler {
    */
   getNodeAt(pointer) {
     // we first check if this is an navigation controls element
-    var positionObject = this._pointerToPositionObject(pointer);
-    var overlappingNodes = this._getAllNodesOverlappingWith(positionObject);
+    let positionObject = this._pointerToPositionObject(pointer);
+    let overlappingNodes = this._getAllNodesOverlappingWith(positionObject);
 
     // if there are overlapping nodes, select the last one, this is the
     // one which is drawn on top of the others
@@ -166,7 +169,7 @@ class SelectionHandler {
    * @private
    */
   _getEdgesOverlappingWith(object, overlappingEdges) {
-    var edges = this.body.edges;
+    let edges = this.body.edges;
     for (let i = 0; i < this.body.edgeIndices.length; i++) {
       let edgeId = this.body.edgeIndices[i];
       if (edges[edgeId].isOverlappingWith(object)) {
@@ -183,7 +186,7 @@ class SelectionHandler {
    * @private
    */
   _getAllEdgesOverlappingWith(object) {
-    var overlappingEdges = [];
+    let overlappingEdges = [];
     this._getEdgesOverlappingWith(object,overlappingEdges);
     return overlappingEdges;
   }
@@ -198,8 +201,8 @@ class SelectionHandler {
    * @private
    */
   getEdgeAt(pointer) {
-    var positionObject = this._pointerToPositionObject(pointer);
-    var overlappingEdges = this._getAllEdgesOverlappingWith(positionObject);
+    let positionObject = this._pointerToPositionObject(pointer);
+    let overlappingEdges = this._getAllEdgesOverlappingWith(positionObject);
 
     if (overlappingEdges.length > 0) {
       return this.body.edges[overlappingEdges[overlappingEdges.length - 1]];
@@ -262,12 +265,12 @@ class SelectionHandler {
    * @private
    */
   unselectAll() {
-    for(var nodeId in this.selectionObj.nodes) {
+    for(let nodeId in this.selectionObj.nodes) {
       if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
         this.selectionObj.nodes[nodeId].unselect();
       }
     }
-    for(var edgeId in this.selectionObj.edges) {
+    for(let edgeId in this.selectionObj.edges) {
       if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
         this.selectionObj.edges[edgeId].unselect();
       }
@@ -284,8 +287,8 @@ class SelectionHandler {
    * @private
    */
   _getSelectedNodeCount() {
-    var count = 0;
-    for (var nodeId in this.selectionObj.nodes) {
+    let count = 0;
+    for (let nodeId in this.selectionObj.nodes) {
       if (this.selectionObj.nodes.hasOwnProperty(nodeId)) {
         count += 1;
       }
@@ -300,7 +303,7 @@ class SelectionHandler {
    * @private
    */
   _getSelectedNode() {
-    for (var nodeId in this.selectionObj.nodes) {
+    for (let nodeId in this.selectionObj.nodes) {
       if (this.selectionObj.nodes.hasOwnProperty(nodeId)) {
         return this.selectionObj.nodes[nodeId];
       }
@@ -315,7 +318,7 @@ class SelectionHandler {
    * @private
    */
   _getSelectedEdge() {
-    for (var edgeId in this.selectionObj.edges) {
+    for (let edgeId in this.selectionObj.edges) {
       if (this.selectionObj.edges.hasOwnProperty(edgeId)) {
         return this.selectionObj.edges[edgeId];
       }
@@ -331,8 +334,8 @@ class SelectionHandler {
    * @private
    */
   _getSelectedEdgeCount() {
-    var count = 0;
-    for (var edgeId in this.selectionObj.edges) {
+    let count = 0;
+    for (let edgeId in this.selectionObj.edges) {
       if (this.selectionObj.edges.hasOwnProperty(edgeId)) {
         count += 1;
       }
@@ -348,13 +351,13 @@ class SelectionHandler {
    * @private
    */
   _getSelectedObjectCount() {
-    var count = 0;
-    for(var nodeId in this.selectionObj.nodes) {
+    let count = 0;
+    for(let nodeId in this.selectionObj.nodes) {
       if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
         count += 1;
       }
     }
-    for(var edgeId in this.selectionObj.edges) {
+    for(let edgeId in this.selectionObj.edges) {
       if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
         count += 1;
       }
@@ -369,12 +372,12 @@ class SelectionHandler {
    * @private
    */
   _selectionIsEmpty() {
-    for(var nodeId in this.selectionObj.nodes) {
+    for(let nodeId in this.selectionObj.nodes) {
       if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
         return false;
       }
     }
-    for(var edgeId in this.selectionObj.edges) {
+    for(let edgeId in this.selectionObj.edges) {
       if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
         return false;
       }
@@ -390,7 +393,7 @@ class SelectionHandler {
    * @private
    */
   _clusterInSelection() {
-    for(var nodeId in this.selectionObj.nodes) {
+    for(let nodeId in this.selectionObj.nodes) {
       if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
         if (this.selectionObj.nodes[nodeId].clusterSize > 1) {
           return true;
@@ -407,8 +410,8 @@ class SelectionHandler {
    * @private
    */
   _selectConnectedEdges(node) {
-    for (var i = 0; i < node.edges.length; i++) {
-      var edge = node.edges[i];
+    for (let i = 0; i < node.edges.length; i++) {
+      let edge = node.edges[i];
       edge.select();
       this._addToSelection(edge);
     }
@@ -421,8 +424,8 @@ class SelectionHandler {
    * @private
    */
   _hoverConnectedEdges(node) {
-    for (var i = 0; i < node.edges.length; i++) {
-      var edge = node.edges[i];
+    for (let i = 0; i < node.edges.length; i++) {
+      let edge = node.edges[i];
       edge.hover = true;
       this._addToHover(edge);
     }
@@ -436,8 +439,8 @@ class SelectionHandler {
    * @private
    */
   _unselectConnectedEdges(node) {
-    for (var i = 0; i < node.edges.length; i++) {
-      var edge = node.edges[i];
+    for (let i = 0; i < node.edges.length; i++) {
+      let edge = node.edges[i];
       edge.unselect();
       this._removeFromSelection(edge);
     }
@@ -491,8 +494,8 @@ class SelectionHandler {
    * @return {{nodes: Array.<String>, edges: Array.<String>}} selection
    */
   getSelection() {
-    var nodeIds = this.getSelectedNodes();
-    var edgeIds = this.getSelectedEdges();
+    let nodeIds = this.getSelectedNodes();
+    let edgeIds = this.getSelectedEdges();
     return {nodes:nodeIds, edges:edgeIds};
   }
 
@@ -503,9 +506,9 @@ class SelectionHandler {
    *                                            selected nodes.
    */
   getSelectedNodes() {
-    var idArray = [];
+    let idArray = [];
     if (this.options.select === true) {
-      for (var nodeId in this.selectionObj.nodes) {
+      for (let nodeId in this.selectionObj.nodes) {
         if (this.selectionObj.nodes.hasOwnProperty(nodeId)) {
           idArray.push(nodeId);
         }
@@ -521,9 +524,9 @@ class SelectionHandler {
    *                                            selected nodes.
    */
   getSelectedEdges() {
-    var idArray = [];
+    let idArray = [];
     if (this.options.select === true) {
-      for (var edgeId in this.selectionObj.edges) {
+      for (let edgeId in this.selectionObj.edges) {
         if (this.selectionObj.edges.hasOwnProperty(edgeId)) {
           idArray.push(edgeId);
         }
@@ -539,25 +542,25 @@ class SelectionHandler {
    *                                            selected nodes.
    * @param {boolean} [highlightEdges]
    */
-  selectNodes(selection, highlightEdges) {
-    var i, iMax, id;
+  selectNodes(selection, highlightEdges = true) {
+    let i, id;
   
     if (!selection || (selection.length === undefined))
       throw 'Selection must be an array with ids';
   
     // first unselect any selected node
-    this.unselectAll(true);
+    this.unselectAll();
   
-    for (i = 0, iMax = selection.length; i < iMax; i++) {
+    for (i = 0; i < selection.length; i++) {
       id = selection[i];
   
-      var node = this.body.nodes[id];
+      let node = this.body.nodes[id];
       if (!node) {
         throw new RangeError('Node with id "' + id + '" not found');
       }
-      this._selectObject(node,true,true,highlightEdges,true);
+      this.selectObject(node,highlightEdges);
     }
-    this.redraw();
+    this.body.emitter.emit('_requestRedraw');
   }
 
 
@@ -567,24 +570,24 @@ class SelectionHandler {
    *                                            selected nodes.
    */
   selectEdges(selection) {
-    var i, iMax, id;
+    let i, id;
   
     if (!selection || (selection.length === undefined))
       throw 'Selection must be an array with ids';
   
-    // first unselect any selected node
-    this.unselectAll(true);
+    // first unselect any selected objects
+    this.unselectAll();
   
-    for (i = 0, iMax = selection.length; i < iMax; i++) {
+    for (i = 0; i < selection.length; i++) {
       id = selection[i];
   
-      var edge = this.body.edges[id];
+      let edge = this.body.edges[id];
       if (!edge) {
         throw new RangeError('Edge with id "' + id + '" not found');
       }
-      this._selectObject(edge,true,true,false,true);
+      this.selectObject(edge);
     }
-    this.redraw();
+    this.body.emitter.emit('_requestRedraw');
   }
 
   /**
@@ -592,14 +595,14 @@ class SelectionHandler {
    * @private
    */
   updateSelection() {
-    for (var nodeId in this.selectionObj.nodes) {
+    for (let nodeId in this.selectionObj.nodes) {
       if (this.selectionObj.nodes.hasOwnProperty(nodeId)) {
         if (!this.body.nodes.hasOwnProperty(nodeId)) {
           delete this.selectionObj.nodes[nodeId];
         }
       }
     }
-    for (var edgeId in this.selectionObj.edges) {
+    for (let edgeId in this.selectionObj.edges) {
       if (this.selectionObj.edges.hasOwnProperty(edgeId)) {
         if (!this.body.edges.hasOwnProperty(edgeId)) {
           delete this.selectionObj.edges[edgeId];

lib/network/modules/View.js

@@ -29,7 +29,6 @@ class View {
   }
 
 
-  // zoomExtent
   /**
    * Find the center position of the network
    * @private
@@ -93,9 +92,8 @@ class View {
 
   /**
    * This function zooms out to fit all data on screen based on amount of nodes
-   * @param {Object}
+   * @param {Object} Options
    * @param {Boolean} [initialZoom]  | zoom based on fitted formula or range, true = fitted, default = false;
-   * @param {Boolean} [disableStart] | If true, start is not called.
    */
   zoomExtent(options = {nodes:[]}, initialZoom = false) {
     var range;
@@ -323,6 +321,15 @@ class View {
   };
 
 
+  getScale() {
+    return this.body.view.scale;
+  }
+
+  getPosition() {
+    return {x:this.body.view.translation.x, y:this.body.view.translation.y};
+  }
+
+
 }
 
 export default View;

lib/network/modules/components/Edge.js

@@ -262,7 +262,7 @@ class Edge {
    *                           has been set.
    */
   getTitle() {
-    return typeof this.title === "function" ? this.title() : this.title;
+    return this.title;
   }
 
 

lib/network/modules/components/Node.js

@@ -298,7 +298,7 @@ class Node {
    *                           has been set.
    */
   getTitle() {
-    return typeof this.options.title === "function" ? this.options.title() : this.options.title;
+    return this.options.title;
   }
 
 

lib/network/modules/components/Popup.js

@@ -8,56 +8,17 @@
  *                             backgroundColor, etc.
  */
 class Popup {
-  constructor(container, x, y, text, style) {
-    if (container) {
-      this.container = container;
-    }
-    else {
-      this.container = document.body;
-    }
-
-    // x, y and text are optional, see if a style object was passed in their place
-    if (style === undefined) {
-      if (typeof x === "object") {
-        style = x;
-        x = undefined;
-      } else if (typeof text === "object") {
-        style = text;
-        text = undefined;
-      } else {
-        // for backwards compatibility, in case clients other than Network are creating Popup directly
-        style = {
-          fontColor: 'black',
-          fontSize: 14, // px
-          fontFace: 'verdana',
-          color: {
-            border: '#666',
-            background: '#FFFFC6'
-          }
-        }
-      }
-    }
+  constructor(container) {
+    this.container = container;
 
     this.x = 0;
     this.y = 0;
     this.padding = 5;
     this.hidden = false;
 
-    if (x !== undefined && y !== undefined) {
-      this.setPosition(x, y);
-    }
-    if (text !== undefined) {
-      this.setText(text);
-    }
-
     // create the frame
     this.frame = document.createElement('div');
     this.frame.className = 'vis-network-tooltip';
-    this.frame.style.color = style.fontColor;
-    this.frame.style.backgroundColor = style.color.background;
-    this.frame.style.borderColor = style.color.border;
-    this.frame.style.fontSize = style.fontSize + 'px';
-    this.frame.style.fontFamily = style.fontFace;
     this.container.appendChild(this.frame);
   }