Refactored more code from `graph` to `network`

dist/vis.css

@@ -510,7 +510,7 @@
 
 
 
-div.graph-manipulationDiv {
+div.network-manipulationDiv {
     border-width:0px;
     border-bottom: 1px;
     border-style:solid;
@@ -530,14 +530,14 @@ div.graph-manipulationDiv {
     position:absolute;
 }
 
-div.graph-manipulation-editMode {
+div.network-manipulation-editMode {
     height:30px;
     z-index:10;
     position:absolute;
     margin-top:20px;
 }
 
-div.graph-manipulation-closeDiv {
+div.network-manipulation-closeDiv {
     height:30px;
     width:30px;
     z-index:11;
@@ -556,7 +556,7 @@ div.graph-manipulation-closeDiv {
     user-select: none;
 }
 
-span.graph-manipulationUI {
+span.network-manipulationUI {
     font-family: verdana;
     font-size: 12px;
     -moz-border-radius: 15px;
@@ -577,68 +577,68 @@ span.graph-manipulationUI {
     user-select: none;
 }
 
-span.graph-manipulationUI:hover {
+span.network-manipulationUI:hover {
     box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.20);
 }
 
-span.graph-manipulationUI:active {
+span.network-manipulationUI:active {
     box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.50);
 }
 
-span.graph-manipulationUI.back {
+span.network-manipulationUI.back {
     background-image: url("img/network/backIcon.png");
 }
 
-span.graph-manipulationUI.none:hover {
+span.network-manipulationUI.none:hover {
     box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
     cursor: default;
 }
-span.graph-manipulationUI.none:active {
+span.network-manipulationUI.none:active {
     box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
 }
-span.graph-manipulationUI.none {
+span.network-manipulationUI.none {
     padding: 0px 0px 0px 0px;
 }
-span.graph-manipulationUI.notification{
+span.network-manipulationUI.notification{
     margin: 2px;
     font-weight: bold;
 }
 
-span.graph-manipulationUI.add {
+span.network-manipulationUI.add {
     background-image: url("img/network/addNodeIcon.png");
 }
 
-span.graph-manipulationUI.edit {
+span.network-manipulationUI.edit {
     background-image: url("img/network/editIcon.png");
 }
 
-span.graph-manipulationUI.edit.editmode {
+span.network-manipulationUI.edit.editmode {
     background-color: #fcfcfc;
     border-style:solid;
     border-width:1px;
     border-color: #cccccc;
 }
 
-span.graph-manipulationUI.connect {
+span.network-manipulationUI.connect {
     background-image: url("img/network/connectIcon.png");
 }
 
-span.graph-manipulationUI.delete {
+span.network-manipulationUI.delete {
     background-image: url("img/network/deleteIcon.png");
 }
 /* top right bottom left */
-span.graph-manipulationLabel {
+span.network-manipulationLabel {
     margin: 0px 0px 0px 23px;
     line-height: 25px;
 }
-div.graph-seperatorLine {
+div.network-seperatorLine {
     display:inline-block;
     width:1px;
     height:20px;
     background-color: #bdbdbd;
     margin: 5px 7px 0px 15px;
 }
-div.graph-navigation {
+div.network-navigation {
     width:34px;
     height:34px;
     z-index:10;
@@ -657,49 +657,49 @@ div.graph-navigation {
     user-select: none;
 }
 
-div.graph-navigation:hover {
+div.network-navigation:hover {
     box-shadow: 0px 0px 3px 3px rgba(56, 207, 21, 0.30);
 }
 
-div.graph-navigation:active {
+div.network-navigation:active {
     box-shadow: 0px 0px 1px 3px rgba(56, 207, 21, 0.95);
 }
 
-div.graph-navigation.active {
+div.network-navigation.active {
     box-shadow: 0px 0px 1px 3px rgba(56, 207, 21, 0.95);
 }
 
-div.graph-navigation.up {
+div.network-navigation.up {
     background-image: url("img/network/upArrow.png");
     bottom:50px;
     left:55px;
 }
-div.graph-navigation.down {
+div.network-navigation.down {
     background-image: url("img/network/downArrow.png");
     bottom:10px;
     left:55px;
 }
-div.graph-navigation.left {
+div.network-navigation.left {
     background-image: url("img/network/leftArrow.png");
     bottom:10px;
     left:15px;
 }
-div.graph-navigation.right {
+div.network-navigation.right {
     background-image: url("img/network/rightArrow.png");
     bottom:10px;
     left:95px;
 }
-div.graph-navigation.zoomIn {
+div.network-navigation.zoomIn {
     background-image: url("img/network/plus.png");
     bottom:10px;
     right:15px;
 }
-div.graph-navigation.zoomOut {
+div.network-navigation.zoomOut {
     background-image: url("img/network/minus.png");
     bottom:10px;
     right:55px;
 }
-div.graph-navigation.zoomExtends {
+div.network-navigation.zoomExtends {
     background-image: url("img/network/zoomExtends.png");
     bottom:50px;
     right:15px;

dist/vis.js

@@ -10812,25 +10812,6 @@ Graph2d.prototype.getItemRange = function() {
   };
 };
 
-/**
- * Set selected items by their id. Replaces the current selection
- * Unknown id's are silently ignored.
- * @param {Array} [ids] An array with zero or more id's of the items to be
- *                      selected. If ids is an empty array, all items will be
- *                      unselected.
- */
-Graph2d.prototype.setSelection = function(ids) {
-  this.linegraph && this.linegraph.setSelection(ids);
-};
-
-/**
- * Get the selected items by their id
- * @return {Array} ids  The ids of the selected items
- */
-Graph2d.prototype.getSelection = function() {
-  return this.linegraph && this.linegraph.getSelection() || [];
-};
-
 /**
  * Set the visible window. Both parameters are optional, you can change only
  * start or only end. Syntax:
@@ -11005,11 +10986,6 @@ Graph2d.prototype.redraw = function() {
   }
 };
 
-// TODO: deprecated since version 1.1.0, remove some day
-Graph2d.prototype.repaint = function () {
-  throw new Error('Function repaint is deprecated. Use redraw instead.');
-};
-
 /**
  * Convert a position on screen (pixels) to a datetime
  * @param {int}     x    Position on the screen in pixels
@@ -16117,9 +16093,9 @@ var manipulationMixin = {
    */
   _toggleEditMode : function() {
     this.editMode = !this.editMode;
-    var toolbar = document.getElementById("graph-manipulationDiv");
-    var closeDiv = document.getElementById("graph-manipulation-closeDiv");
-    var editModeDiv = document.getElementById("graph-manipulation-editMode");
+    var toolbar = document.getElementById("network-manipulationDiv");
+    var closeDiv = document.getElementById("network-manipulation-closeDiv");
+    var editModeDiv = document.getElementById("network-manipulation-editMode");
     if (this.editMode == true) {
       toolbar.style.display="block";
       closeDiv.style.display="block";
@@ -16167,49 +16143,49 @@ var manipulationMixin = {
       }
       // add the icons to the manipulator div
       this.manipulationDiv.innerHTML = "" +
-        "<span class='graph-manipulationUI add' id='graph-manipulate-addNode'>" +
-          "<span class='graph-manipulationLabel'>"+this.constants.labels['add'] +"</span></span>" +
-        "<div class='graph-seperatorLine'></div>" +
-        "<span class='graph-manipulationUI connect' id='graph-manipulate-connectNode'>" +
-          "<span class='graph-manipulationLabel'>"+this.constants.labels['link'] +"</span></span>";
+        "<span class='network-manipulationUI add' id='network-manipulate-addNode'>" +
+          "<span class='network-manipulationLabel'>"+this.constants.labels['add'] +"</span></span>" +
+        "<div class='network-seperatorLine'></div>" +
+        "<span class='network-manipulationUI connect' id='network-manipulate-connectNode'>" +
+          "<span class='network-manipulationLabel'>"+this.constants.labels['link'] +"</span></span>";
       if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) {
         this.manipulationDiv.innerHTML += "" +
-          "<div class='graph-seperatorLine'></div>" +
-          "<span class='graph-manipulationUI edit' id='graph-manipulate-editNode'>" +
-            "<span class='graph-manipulationLabel'>"+this.constants.labels['editNode'] +"</span></span>";
+          "<div class='network-seperatorLine'></div>" +
+          "<span class='network-manipulationUI edit' id='network-manipulate-editNode'>" +
+            "<span class='network-manipulationLabel'>"+this.constants.labels['editNode'] +"</span></span>";
       }
       else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
         this.manipulationDiv.innerHTML += "" +
-          "<div class='graph-seperatorLine'></div>" +
-          "<span class='graph-manipulationUI edit' id='graph-manipulate-editEdge'>" +
-          "<span class='graph-manipulationLabel'>"+this.constants.labels['editEdge'] +"</span></span>";
+          "<div class='network-seperatorLine'></div>" +
+          "<span class='network-manipulationUI edit' id='network-manipulate-editEdge'>" +
+          "<span class='network-manipulationLabel'>"+this.constants.labels['editEdge'] +"</span></span>";
       }
       if (this._selectionIsEmpty() == false) {
         this.manipulationDiv.innerHTML += "" +
-          "<div class='graph-seperatorLine'></div>" +
-          "<span class='graph-manipulationUI delete' id='graph-manipulate-delete'>" +
-            "<span class='graph-manipulationLabel'>"+this.constants.labels['del'] +"</span></span>";
+          "<div class='network-seperatorLine'></div>" +
+          "<span class='network-manipulationUI delete' id='network-manipulate-delete'>" +
+            "<span class='network-manipulationLabel'>"+this.constants.labels['del'] +"</span></span>";
       }
 
 
       // bind the icons
-      var addNodeButton = document.getElementById("graph-manipulate-addNode");
+      var addNodeButton = document.getElementById("network-manipulate-addNode");
       addNodeButton.onclick = this._createAddNodeToolbar.bind(this);
-      var addEdgeButton = document.getElementById("graph-manipulate-connectNode");
+      var addEdgeButton = document.getElementById("network-manipulate-connectNode");
       addEdgeButton.onclick = this._createAddEdgeToolbar.bind(this);
       if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) {
-        var editButton = document.getElementById("graph-manipulate-editNode");
+        var editButton = document.getElementById("network-manipulate-editNode");
         editButton.onclick = this._editNode.bind(this);
       }
       else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
-        var editButton = document.getElementById("graph-manipulate-editEdge");
+        var editButton = document.getElementById("network-manipulate-editEdge");
         editButton.onclick = this._createEditEdgeToolbar.bind(this);
       }
       if (this._selectionIsEmpty() == false) {
-        var deleteButton = document.getElementById("graph-manipulate-delete");
+        var deleteButton = document.getElementById("network-manipulate-delete");
         deleteButton.onclick = this._deleteSelected.bind(this);
       }
-      var closeDiv = document.getElementById("graph-manipulation-closeDiv");
+      var closeDiv = document.getElementById("network-manipulation-closeDiv");
       closeDiv.onclick = this._toggleEditMode.bind(this);
 
       this.boundFunction = this._createManipulatorBar.bind(this);
@@ -16217,9 +16193,9 @@ var manipulationMixin = {
     }
     else {
       this.editModeDiv.innerHTML = "" +
-        "<span class='graph-manipulationUI edit editmode' id='graph-manipulate-editModeButton'>" +
-        "<span class='graph-manipulationLabel'>" + this.constants.labels['edit'] + "</span></span>";
-      var editModeButton = document.getElementById("graph-manipulate-editModeButton");
+        "<span class='network-manipulationUI edit editmode' id='network-manipulate-editModeButton'>" +
+        "<span class='network-manipulationLabel'>" + this.constants.labels['edit'] + "</span></span>";
+      var editModeButton = document.getElementById("network-manipulate-editModeButton");
       editModeButton.onclick = this._toggleEditMode.bind(this);
     }
   },
@@ -16240,14 +16216,14 @@ var manipulationMixin = {
 
     // create the toolbar contents
     this.manipulationDiv.innerHTML = "" +
-      "<span class='graph-manipulationUI back' id='graph-manipulate-back'>" +
-      "<span class='graph-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
-      "<div class='graph-seperatorLine'></div>" +
-      "<span class='graph-manipulationUI none' id='graph-manipulate-back'>" +
-      "<span id='graph-manipulatorLabel' class='graph-manipulationLabel'>" + this.constants.labels['addDescription'] + "</span></span>";
+      "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
+      "<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
+      "<div class='network-seperatorLine'></div>" +
+      "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
+      "<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['addDescription'] + "</span></span>";
 
     // bind the icon
-    var backButton = document.getElementById("graph-manipulate-back");
+    var backButton = document.getElementById("network-manipulate-back");
     backButton.onclick = this._createManipulatorBar.bind(this);
 
     // we use the boundFunction so we can reference it when we unbind it from the "select" event.
@@ -16276,14 +16252,14 @@ var manipulationMixin = {
     this.blockConnectingEdgeSelection = true;
 
     this.manipulationDiv.innerHTML = "" +
-      "<span class='graph-manipulationUI back' id='graph-manipulate-back'>" +
-        "<span class='graph-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
-      "<div class='graph-seperatorLine'></div>" +
-      "<span class='graph-manipulationUI none' id='graph-manipulate-back'>" +
-        "<span id='graph-manipulatorLabel' class='graph-manipulationLabel'>" + this.constants.labels['linkDescription'] + "</span></span>";
+      "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
+        "<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
+      "<div class='network-seperatorLine'></div>" +
+      "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
+        "<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['linkDescription'] + "</span></span>";
 
     // bind the icon
-    var backButton = document.getElementById("graph-manipulate-back");
+    var backButton = document.getElementById("network-manipulate-back");
     backButton.onclick = this._createManipulatorBar.bind(this);
 
     // we use the boundFunction so we can reference it when we unbind it from the "select" event.
@@ -16317,14 +16293,14 @@ var manipulationMixin = {
     this.edgeBeingEdited._enableControlNodes();
 
     this.manipulationDiv.innerHTML = "" +
-      "<span class='graph-manipulationUI back' id='graph-manipulate-back'>" +
-      "<span class='graph-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
-      "<div class='graph-seperatorLine'></div>" +
-      "<span class='graph-manipulationUI none' id='graph-manipulate-back'>" +
-      "<span id='graph-manipulatorLabel' class='graph-manipulationLabel'>" + this.constants.labels['editEdgeDescription'] + "</span></span>";
+      "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
+      "<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
+      "<div class='network-seperatorLine'></div>" +
+      "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
+      "<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['editEdgeDescription'] + "</span></span>";
 
     // bind the icon
-    var backButton = document.getElementById("graph-manipulate-back");
+    var backButton = document.getElementById("network-manipulate-back");
     backButton.onclick = this._createManipulatorBar.bind(this);
 
     // temporarily overload functions
@@ -17217,7 +17193,7 @@ var SectorMixin = {
 var ClusterMixin = {
 
  /**
-  * This is only called in the constructor of the graph object
+  * This is only called in the constructor of the network object
   *
   */
  startWithClustering : function() {
@@ -17702,7 +17678,7 @@ var ClusterMixin = {
   },
 
   /**
-   * This function forces the graph to cluster all nodes with only one connecting edge to their
+   * This function forces the network to cluster all nodes with only one connecting edge to their
    * connected node.
    *
    * @private
@@ -19067,7 +19043,7 @@ var NavigationMixin = {
 
   _cleanNavigation : function() {
     // clean up previosu navigation items
-    var wrapper = document.getElementById('graph-navigation_wrapper');
+    var wrapper = document.getElementById('network-navigation_wrapper');
     if (wrapper != null) {
       this.containerElement.removeChild(wrapper);
     }
@@ -19090,7 +19066,7 @@ var NavigationMixin = {
     var navigationDivActions = ['_moveUp','_moveDown','_moveLeft','_moveRight','_zoomIn','_zoomOut','zoomExtent'];
 
     this.navigationDivs['wrapper'] = document.createElement('div');
-    this.navigationDivs['wrapper'].id = "graph-navigation_wrapper";
+    this.navigationDivs['wrapper'].id = "network-navigation_wrapper";
     this.navigationDivs['wrapper'].style.position = "absolute";
     this.navigationDivs['wrapper'].style.width = this.frame.canvas.clientWidth + "px";
     this.navigationDivs['wrapper'].style.height = this.frame.canvas.clientHeight + "px";
@@ -19098,8 +19074,8 @@ var NavigationMixin = {
 
     for (var i = 0; i < navigationDivs.length; i++) {
       this.navigationDivs[navigationDivs[i]] = document.createElement('div');
-      this.navigationDivs[navigationDivs[i]].id = "graph-navigation_" + navigationDivs[i];
-      this.navigationDivs[navigationDivs[i]].className = "graph-navigation " + navigationDivs[i];
+      this.navigationDivs[navigationDivs[i]].id = "network-navigation_" + navigationDivs[i];
+      this.navigationDivs[navigationDivs[i]].className = "network-navigation " + navigationDivs[i];
       this.navigationDivs['wrapper'].appendChild(this.navigationDivs[navigationDivs[i]]);
       this.navigationDivs[navigationDivs[i]].onmousedown = this[navigationDivActions[i]].bind(this);
     }
@@ -19381,8 +19357,8 @@ var networkMixinLoaders = {
       // load the manipulator HTML elements. All styling done in css.
       if (this.manipulationDiv === undefined) {
         this.manipulationDiv = document.createElement('div');
-        this.manipulationDiv.className = 'graph-manipulationDiv';
-        this.manipulationDiv.id = 'graph-manipulationDiv';
+        this.manipulationDiv.className = 'network-manipulationDiv';
+        this.manipulationDiv.id = 'network-manipulationDiv';
         if (this.editMode == true) {
           this.manipulationDiv.style.display = "block";
         }
@@ -19394,8 +19370,8 @@ var networkMixinLoaders = {
 
       if (this.editModeDiv === undefined) {
         this.editModeDiv = document.createElement('div');
-        this.editModeDiv.className = 'graph-manipulation-editMode';
-        this.editModeDiv.id = 'graph-manipulation-editMode';
+        this.editModeDiv.className = 'network-manipulation-editMode';
+        this.editModeDiv.id = 'network-manipulation-editMode';
         if (this.editMode == true) {
           this.editModeDiv.style.display = "none";
         }
@@ -19407,8 +19383,8 @@ var networkMixinLoaders = {
 
       if (this.closeDiv === undefined) {
         this.closeDiv = document.createElement('div');
-        this.closeDiv.className = 'graph-manipulation-closeDiv';
-        this.closeDiv.id = 'graph-manipulation-closeDiv';
+        this.closeDiv.className = 'network-manipulation-closeDiv';
+        this.closeDiv.id = 'network-manipulation-closeDiv';
         this.closeDiv.style.display = this.manipulationDiv.style.display;
         this.containerElement.insertBefore(this.closeDiv, this.frame);
       }
@@ -20247,7 +20223,7 @@ Network.prototype._create = function () {
   }
 
   this.frame = document.createElement('div');
-  this.frame.className = 'graph-frame';
+  this.frame.className = 'network-frame';
   this.frame.style.position = 'relative';
   this.frame.style.overflow = 'hidden';
 
@@ -21762,11 +21738,11 @@ Network.prototype.focusOnNode = function (nodeId, zoomLevel) {
 
 /**
  * @constructor Graph3d
- * The Graph is a visualization Graphs on a time line
+ * Graph3d displays data in 3d.
  *
- * Graph is developed in javascript as a Google Visualization Chart.
+ * Graph3d is developed in javascript as a Google Visualization Chart.
  *
- * @param {Element} container   The DOM element in which the Graph will
+ * @param {Element} container   The DOM element in which the Graph3d will
  *                              be created. Normally a div element.
  * @param {DataSet | DataView | Array} [data]
  * @param {Object} [options]
@@ -21848,7 +21824,7 @@ function Graph3d(container, data, options) {
   }
 }
 
-// Extend Graph with an Emitter mixin
+// Extend Graph3d with an Emitter mixin
 Emitter(Graph3d.prototype);
 
 /**
@@ -24317,7 +24293,7 @@ Point2d = function (x, y) {
  *
  * @param {DataSet} data The google data table
  * @param {Number}  column             The index of the column to be filtered
- * @param {Network} graph           The graph
+ * @param {Graph} graph           The graph
  */
 function Filter (data, column, graph) {
   this.data = data;

docs/graph2d.html

@@ -722,13 +722,6 @@ Graph2D.clear({options: true}); // clear options only
         </td>
     </tr>
 
-    <tr>
-        <td>setSelection([ids])</td>
-        <td>none</td>
-        <td>Select or deselect items. Currently selected items will be unselected.
-        </td>
-    </tr>
-
     <tr>
         <td>setWindow(start, end)</td>
         <td>none</td>

examples/Network/15_dot_language_playground.html

@@ -133,7 +133,7 @@
 </script>
 
 <textarea id="example1" class="example">
-  dinetwork {
+  digraph {
   node [shape=circle fontSize=16]
   edge [length=100, color=gray, fontColor=black]
 
@@ -151,7 +151,7 @@
 </textarea>
 
 <textarea id="example2" class="example">
-  dinetwork topology
+  digraph topology
   {
   node[shape=circle fontSize=12]
   edge[length=170 fontSize=12]
@@ -173,7 +173,7 @@
 </textarea>
 
 <textarea id="example3" class="example">
-  dinetwork G  {
+  digraph G  {
   // note: not all attributes are recognized and supported by Network
   //       unrecognized attributes are ignored
 

src/graph3d/Graph3d.js

@@ -1,10 +1,10 @@
 /**
  * @constructor Graph3d
- * The Graph is a visualization Graphs on a time line
+ * Graph3d displays data in 3d.
  *
- * Graph is developed in javascript as a Google Visualization Chart.
+ * Graph3d is developed in javascript as a Google Visualization Chart.
  *
- * @param {Element} container   The DOM element in which the Graph will
+ * @param {Element} container   The DOM element in which the Graph3d will
  *                              be created. Normally a div element.
  * @param {DataSet | DataView | Array} [data]
  * @param {Object} [options]
@@ -86,7 +86,7 @@ function Graph3d(container, data, options) {
   }
 }
 
-// Extend Graph with an Emitter mixin
+// Extend Graph3d with an Emitter mixin
 Emitter(Graph3d.prototype);
 
 /**
@@ -2555,7 +2555,7 @@ Point2d = function (x, y) {
  *
  * @param {DataSet} data The google data table
  * @param {Number}  column             The index of the column to be filtered
- * @param {Network} graph           The graph
+ * @param {Graph} graph           The graph
  */
 function Filter (data, column, graph) {
   this.data = data;

src/network/Network.js

@@ -780,7 +780,7 @@ Network.prototype._create = function () {
   }
 
   this.frame = document.createElement('div');
-  this.frame.className = 'graph-frame';
+  this.frame.className = 'network-frame';
   this.frame.style.position = 'relative';
   this.frame.style.overflow = 'hidden';
 

src/network/css/network-manipulation.css

@@ -1,4 +1,4 @@
-div.graph-manipulationDiv {
+div.network-manipulationDiv {
     border-width:0px;
     border-bottom: 1px;
     border-style:solid;
@@ -18,14 +18,14 @@ div.graph-manipulationDiv {
     position:absolute;
 }
 
-div.graph-manipulation-editMode {
+div.network-manipulation-editMode {
     height:30px;
     z-index:10;
     position:absolute;
     margin-top:20px;
 }
 
-div.graph-manipulation-closeDiv {
+div.network-manipulation-closeDiv {
     height:30px;
     width:30px;
     z-index:11;
@@ -44,7 +44,7 @@ div.graph-manipulation-closeDiv {
     user-select: none;
 }
 
-span.graph-manipulationUI {
+span.network-manipulationUI {
     font-family: verdana;
     font-size: 12px;
     -moz-border-radius: 15px;
@@ -65,61 +65,61 @@ span.graph-manipulationUI {
     user-select: none;
 }
 
-span.graph-manipulationUI:hover {
+span.network-manipulationUI:hover {
     box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.20);
 }
 
-span.graph-manipulationUI:active {
+span.network-manipulationUI:active {
     box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.50);
 }
 
-span.graph-manipulationUI.back {
+span.network-manipulationUI.back {
     background-image: url("img/network/backIcon.png");
 }
 
-span.graph-manipulationUI.none:hover {
+span.network-manipulationUI.none:hover {
     box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
     cursor: default;
 }
-span.graph-manipulationUI.none:active {
+span.network-manipulationUI.none:active {
     box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
 }
-span.graph-manipulationUI.none {
+span.network-manipulationUI.none {
     padding: 0px 0px 0px 0px;
 }
-span.graph-manipulationUI.notification{
+span.network-manipulationUI.notification{
     margin: 2px;
     font-weight: bold;
 }
 
-span.graph-manipulationUI.add {
+span.network-manipulationUI.add {
     background-image: url("img/network/addNodeIcon.png");
 }
 
-span.graph-manipulationUI.edit {
+span.network-manipulationUI.edit {
     background-image: url("img/network/editIcon.png");
 }
 
-span.graph-manipulationUI.edit.editmode {
+span.network-manipulationUI.edit.editmode {
     background-color: #fcfcfc;
     border-style:solid;
     border-width:1px;
     border-color: #cccccc;
 }
 
-span.graph-manipulationUI.connect {
+span.network-manipulationUI.connect {
     background-image: url("img/network/connectIcon.png");
 }
 
-span.graph-manipulationUI.delete {
+span.network-manipulationUI.delete {
     background-image: url("img/network/deleteIcon.png");
 }
 /* top right bottom left */
-span.graph-manipulationLabel {
+span.network-manipulationLabel {
     margin: 0px 0px 0px 23px;
     line-height: 25px;
 }
-div.graph-seperatorLine {
+div.network-seperatorLine {
     display:inline-block;
     width:1px;
     height:20px;

src/network/css/network-navigation.css

@@ -1,4 +1,4 @@
-div.graph-navigation {
+div.network-navigation {
     width:34px;
     height:34px;
     z-index:10;
@@ -17,49 +17,49 @@ div.graph-navigation {
     user-select: none;
 }
 
-div.graph-navigation:hover {
+div.network-navigation:hover {
     box-shadow: 0px 0px 3px 3px rgba(56, 207, 21, 0.30);
 }
 
-div.graph-navigation:active {
+div.network-navigation:active {
     box-shadow: 0px 0px 1px 3px rgba(56, 207, 21, 0.95);
 }
 
-div.graph-navigation.active {
+div.network-navigation.active {
     box-shadow: 0px 0px 1px 3px rgba(56, 207, 21, 0.95);
 }
 
-div.graph-navigation.up {
+div.network-navigation.up {
     background-image: url("img/network/upArrow.png");
     bottom:50px;
     left:55px;
 }
-div.graph-navigation.down {
+div.network-navigation.down {
     background-image: url("img/network/downArrow.png");
     bottom:10px;
     left:55px;
 }
-div.graph-navigation.left {
+div.network-navigation.left {
     background-image: url("img/network/leftArrow.png");
     bottom:10px;
     left:15px;
 }
-div.graph-navigation.right {
+div.network-navigation.right {
     background-image: url("img/network/rightArrow.png");
     bottom:10px;
     left:95px;
 }
-div.graph-navigation.zoomIn {
+div.network-navigation.zoomIn {
     background-image: url("img/network/plus.png");
     bottom:10px;
     right:15px;
 }
-div.graph-navigation.zoomOut {
+div.network-navigation.zoomOut {
     background-image: url("img/network/minus.png");
     bottom:10px;
     right:55px;
 }
-div.graph-navigation.zoomExtends {
+div.network-navigation.zoomExtends {
     background-image: url("img/network/zoomExtends.png");
     bottom:50px;
     right:15px;

src/network/networkMixins/ClusterMixin.js

@@ -9,7 +9,7 @@
 var ClusterMixin = {
 
  /**
-  * This is only called in the constructor of the graph object
+  * This is only called in the constructor of the network object
   *
   */
  startWithClustering : function() {
@@ -494,7 +494,7 @@ var ClusterMixin = {
   },
 
   /**
-   * This function forces the graph to cluster all nodes with only one connecting edge to their
+   * This function forces the network to cluster all nodes with only one connecting edge to their
    * connected node.
    *
    * @private

src/network/networkMixins/ManipulationMixin.js

@@ -37,9 +37,9 @@ var manipulationMixin = {
    */
   _toggleEditMode : function() {
     this.editMode = !this.editMode;
-    var toolbar = document.getElementById("graph-manipulationDiv");
-    var closeDiv = document.getElementById("graph-manipulation-closeDiv");
-    var editModeDiv = document.getElementById("graph-manipulation-editMode");
+    var toolbar = document.getElementById("network-manipulationDiv");
+    var closeDiv = document.getElementById("network-manipulation-closeDiv");
+    var editModeDiv = document.getElementById("network-manipulation-editMode");
     if (this.editMode == true) {
       toolbar.style.display="block";
       closeDiv.style.display="block";
@@ -87,49 +87,49 @@ var manipulationMixin = {
       }
       // add the icons to the manipulator div
       this.manipulationDiv.innerHTML = "" +
-        "<span class='graph-manipulationUI add' id='graph-manipulate-addNode'>" +
-          "<span class='graph-manipulationLabel'>"+this.constants.labels['add'] +"</span></span>" +
-        "<div class='graph-seperatorLine'></div>" +
-        "<span class='graph-manipulationUI connect' id='graph-manipulate-connectNode'>" +
-          "<span class='graph-manipulationLabel'>"+this.constants.labels['link'] +"</span></span>";
+        "<span class='network-manipulationUI add' id='network-manipulate-addNode'>" +
+          "<span class='network-manipulationLabel'>"+this.constants.labels['add'] +"</span></span>" +
+        "<div class='network-seperatorLine'></div>" +
+        "<span class='network-manipulationUI connect' id='network-manipulate-connectNode'>" +
+          "<span class='network-manipulationLabel'>"+this.constants.labels['link'] +"</span></span>";
       if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) {
         this.manipulationDiv.innerHTML += "" +
-          "<div class='graph-seperatorLine'></div>" +
-          "<span class='graph-manipulationUI edit' id='graph-manipulate-editNode'>" +
-            "<span class='graph-manipulationLabel'>"+this.constants.labels['editNode'] +"</span></span>";
+          "<div class='network-seperatorLine'></div>" +
+          "<span class='network-manipulationUI edit' id='network-manipulate-editNode'>" +
+            "<span class='network-manipulationLabel'>"+this.constants.labels['editNode'] +"</span></span>";
       }
       else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
         this.manipulationDiv.innerHTML += "" +
-          "<div class='graph-seperatorLine'></div>" +
-          "<span class='graph-manipulationUI edit' id='graph-manipulate-editEdge'>" +
-          "<span class='graph-manipulationLabel'>"+this.constants.labels['editEdge'] +"</span></span>";
+          "<div class='network-seperatorLine'></div>" +
+          "<span class='network-manipulationUI edit' id='network-manipulate-editEdge'>" +
+          "<span class='network-manipulationLabel'>"+this.constants.labels['editEdge'] +"</span></span>";
       }
       if (this._selectionIsEmpty() == false) {
         this.manipulationDiv.innerHTML += "" +
-          "<div class='graph-seperatorLine'></div>" +
-          "<span class='graph-manipulationUI delete' id='graph-manipulate-delete'>" +
-            "<span class='graph-manipulationLabel'>"+this.constants.labels['del'] +"</span></span>";
+          "<div class='network-seperatorLine'></div>" +
+          "<span class='network-manipulationUI delete' id='network-manipulate-delete'>" +
+            "<span class='network-manipulationLabel'>"+this.constants.labels['del'] +"</span></span>";
       }
 
 
       // bind the icons
-      var addNodeButton = document.getElementById("graph-manipulate-addNode");
+      var addNodeButton = document.getElementById("network-manipulate-addNode");
       addNodeButton.onclick = this._createAddNodeToolbar.bind(this);
-      var addEdgeButton = document.getElementById("graph-manipulate-connectNode");
+      var addEdgeButton = document.getElementById("network-manipulate-connectNode");
       addEdgeButton.onclick = this._createAddEdgeToolbar.bind(this);
       if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) {
-        var editButton = document.getElementById("graph-manipulate-editNode");
+        var editButton = document.getElementById("network-manipulate-editNode");
         editButton.onclick = this._editNode.bind(this);
       }
       else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
-        var editButton = document.getElementById("graph-manipulate-editEdge");
+        var editButton = document.getElementById("network-manipulate-editEdge");
         editButton.onclick = this._createEditEdgeToolbar.bind(this);
       }
       if (this._selectionIsEmpty() == false) {
-        var deleteButton = document.getElementById("graph-manipulate-delete");
+        var deleteButton = document.getElementById("network-manipulate-delete");
         deleteButton.onclick = this._deleteSelected.bind(this);
       }
-      var closeDiv = document.getElementById("graph-manipulation-closeDiv");
+      var closeDiv = document.getElementById("network-manipulation-closeDiv");
       closeDiv.onclick = this._toggleEditMode.bind(this);
 
       this.boundFunction = this._createManipulatorBar.bind(this);
@@ -137,9 +137,9 @@ var manipulationMixin = {
     }
     else {
       this.editModeDiv.innerHTML = "" +
-        "<span class='graph-manipulationUI edit editmode' id='graph-manipulate-editModeButton'>" +
-        "<span class='graph-manipulationLabel'>" + this.constants.labels['edit'] + "</span></span>";
-      var editModeButton = document.getElementById("graph-manipulate-editModeButton");
+        "<span class='network-manipulationUI edit editmode' id='network-manipulate-editModeButton'>" +
+        "<span class='network-manipulationLabel'>" + this.constants.labels['edit'] + "</span></span>";
+      var editModeButton = document.getElementById("network-manipulate-editModeButton");
       editModeButton.onclick = this._toggleEditMode.bind(this);
     }
   },
@@ -160,14 +160,14 @@ var manipulationMixin = {
 
     // create the toolbar contents
     this.manipulationDiv.innerHTML = "" +
-      "<span class='graph-manipulationUI back' id='graph-manipulate-back'>" +
-      "<span class='graph-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
-      "<div class='graph-seperatorLine'></div>" +
-      "<span class='graph-manipulationUI none' id='graph-manipulate-back'>" +
-      "<span id='graph-manipulatorLabel' class='graph-manipulationLabel'>" + this.constants.labels['addDescription'] + "</span></span>";
+      "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
+      "<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
+      "<div class='network-seperatorLine'></div>" +
+      "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
+      "<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['addDescription'] + "</span></span>";
 
     // bind the icon
-    var backButton = document.getElementById("graph-manipulate-back");
+    var backButton = document.getElementById("network-manipulate-back");
     backButton.onclick = this._createManipulatorBar.bind(this);
 
     // we use the boundFunction so we can reference it when we unbind it from the "select" event.
@@ -196,14 +196,14 @@ var manipulationMixin = {
     this.blockConnectingEdgeSelection = true;
 
     this.manipulationDiv.innerHTML = "" +
-      "<span class='graph-manipulationUI back' id='graph-manipulate-back'>" +
-        "<span class='graph-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
-      "<div class='graph-seperatorLine'></div>" +
-      "<span class='graph-manipulationUI none' id='graph-manipulate-back'>" +
-        "<span id='graph-manipulatorLabel' class='graph-manipulationLabel'>" + this.constants.labels['linkDescription'] + "</span></span>";
+      "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
+        "<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
+      "<div class='network-seperatorLine'></div>" +
+      "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
+        "<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['linkDescription'] + "</span></span>";
 
     // bind the icon
-    var backButton = document.getElementById("graph-manipulate-back");
+    var backButton = document.getElementById("network-manipulate-back");
     backButton.onclick = this._createManipulatorBar.bind(this);
 
     // we use the boundFunction so we can reference it when we unbind it from the "select" event.
@@ -237,14 +237,14 @@ var manipulationMixin = {
     this.edgeBeingEdited._enableControlNodes();
 
     this.manipulationDiv.innerHTML = "" +
-      "<span class='graph-manipulationUI back' id='graph-manipulate-back'>" +
-      "<span class='graph-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
-      "<div class='graph-seperatorLine'></div>" +
-      "<span class='graph-manipulationUI none' id='graph-manipulate-back'>" +
-      "<span id='graph-manipulatorLabel' class='graph-manipulationLabel'>" + this.constants.labels['editEdgeDescription'] + "</span></span>";
+      "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
+      "<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
+      "<div class='network-seperatorLine'></div>" +
+      "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
+      "<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['editEdgeDescription'] + "</span></span>";
 
     // bind the icon
-    var backButton = document.getElementById("graph-manipulate-back");
+    var backButton = document.getElementById("network-manipulate-back");
     backButton.onclick = this._createManipulatorBar.bind(this);
 
     // temporarily overload functions

src/network/networkMixins/MixinLoader.js

@@ -114,8 +114,8 @@ var networkMixinLoaders = {
       // load the manipulator HTML elements. All styling done in css.
       if (this.manipulationDiv === undefined) {
         this.manipulationDiv = document.createElement('div');
-        this.manipulationDiv.className = 'graph-manipulationDiv';
-        this.manipulationDiv.id = 'graph-manipulationDiv';
+        this.manipulationDiv.className = 'network-manipulationDiv';
+        this.manipulationDiv.id = 'network-manipulationDiv';
         if (this.editMode == true) {
           this.manipulationDiv.style.display = "block";
         }
@@ -127,8 +127,8 @@ var networkMixinLoaders = {
 
       if (this.editModeDiv === undefined) {
         this.editModeDiv = document.createElement('div');
-        this.editModeDiv.className = 'graph-manipulation-editMode';
-        this.editModeDiv.id = 'graph-manipulation-editMode';
+        this.editModeDiv.className = 'network-manipulation-editMode';
+        this.editModeDiv.id = 'network-manipulation-editMode';
         if (this.editMode == true) {
           this.editModeDiv.style.display = "none";
         }
@@ -140,8 +140,8 @@ var networkMixinLoaders = {
 
       if (this.closeDiv === undefined) {
         this.closeDiv = document.createElement('div');
-        this.closeDiv.className = 'graph-manipulation-closeDiv';
-        this.closeDiv.id = 'graph-manipulation-closeDiv';
+        this.closeDiv.className = 'network-manipulation-closeDiv';
+        this.closeDiv.id = 'network-manipulation-closeDiv';
         this.closeDiv.style.display = this.manipulationDiv.style.display;
         this.containerElement.insertBefore(this.closeDiv, this.frame);
       }

src/network/networkMixins/NavigationMixin.js

@@ -6,7 +6,7 @@ var NavigationMixin = {
 
   _cleanNavigation : function() {
     // clean up previosu navigation items
-    var wrapper = document.getElementById('graph-navigation_wrapper');
+    var wrapper = document.getElementById('network-navigation_wrapper');
     if (wrapper != null) {
       this.containerElement.removeChild(wrapper);
     }
@@ -29,7 +29,7 @@ var NavigationMixin = {
     var navigationDivActions = ['_moveUp','_moveDown','_moveLeft','_moveRight','_zoomIn','_zoomOut','zoomExtent'];
 
     this.navigationDivs['wrapper'] = document.createElement('div');
-    this.navigationDivs['wrapper'].id = "graph-navigation_wrapper";
+    this.navigationDivs['wrapper'].id = "network-navigation_wrapper";
     this.navigationDivs['wrapper'].style.position = "absolute";
     this.navigationDivs['wrapper'].style.width = this.frame.canvas.clientWidth + "px";
     this.navigationDivs['wrapper'].style.height = this.frame.canvas.clientHeight + "px";
@@ -37,8 +37,8 @@ var NavigationMixin = {
 
     for (var i = 0; i < navigationDivs.length; i++) {
       this.navigationDivs[navigationDivs[i]] = document.createElement('div');
-      this.navigationDivs[navigationDivs[i]].id = "graph-navigation_" + navigationDivs[i];
-      this.navigationDivs[navigationDivs[i]].className = "graph-navigation " + navigationDivs[i];
+      this.navigationDivs[navigationDivs[i]].id = "network-navigation_" + navigationDivs[i];
+      this.navigationDivs[navigationDivs[i]].className = "network-navigation " + navigationDivs[i];
       this.navigationDivs['wrapper'].appendChild(this.navigationDivs[navigationDivs[i]]);
       this.navigationDivs[navigationDivs[i]].onmousedown = this[navigationDivActions[i]].bind(this);
     }

src/timeline/Graph2d.js

@@ -485,25 +485,6 @@ Graph2d.prototype.getItemRange = function() {
   };
 };
 
-/**
- * Set selected items by their id. Replaces the current selection
- * Unknown id's are silently ignored.
- * @param {Array} [ids] An array with zero or more id's of the items to be
- *                      selected. If ids is an empty array, all items will be
- *                      unselected.
- */
-Graph2d.prototype.setSelection = function(ids) {
-  this.linegraph && this.linegraph.setSelection(ids);
-};
-
-/**
- * Get the selected items by their id
- * @return {Array} ids  The ids of the selected items
- */
-Graph2d.prototype.getSelection = function() {
-  return this.linegraph && this.linegraph.getSelection() || [];
-};
-
 /**
  * Set the visible window. Both parameters are optional, you can change only
  * start or only end. Syntax:
@@ -678,11 +659,6 @@ Graph2d.prototype.redraw = function() {
   }
 };
 
-// TODO: deprecated since version 1.1.0, remove some day
-Graph2d.prototype.repaint = function () {
-  throw new Error('Function repaint is deprecated. Use redraw instead.');
-};
-
 /**
  * Convert a position on screen (pixels) to a datetime
  * @param {int}     x    Position on the screen in pixels