Merge remote-tracking branch 'origin/v4' into v4

README.md

@@ -179,7 +179,7 @@ exports.Timeline = require('./lib/timeline/Timeline');
 
 Install browserify globally via `[sudo] npm install -g browserify`, then create a custom bundle like:
 
-    browserify custom.js -t 6to5ify -o vis-custom.js -s vis
+    browserify custom.js -t babelify -o vis-custom.js -s vis
 
 This will generate a custom bundle *vis-custom.js*, which exposes the namespace `vis` containing only `DataSet` and `Timeline`. The generated bundle can be minified with uglifyjs (installed globally with `[sudo] npm install -g uglify-js`):
 
@@ -204,7 +204,7 @@ The custom bundle can now be loaded like:
 
 The default bundle `vis.js` is standalone and includes external dependencies such as hammer.js and moment.js. When these libraries are already loaded by the application, vis.js does not need to include these dependencies itself too. To build a custom bundle of vis.js excluding moment.js and hammer.js, run browserify in the root of the project:
 
-    browserify index.js -t 6to5ify -o vis-custom.js -s vis -x moment -x hammerjs
+    browserify index.js -t babelify -o vis-custom.js -s vis -x moment -x hammerjs
     
 This will generate a custom bundle *vis-custom.js*, which exposes the namespace `vis`, and has moment and hammerjs excluded. The generated bundle can be minified with uglifyjs:
 

docs/timeline.html

@@ -1373,7 +1373,7 @@ To load a locale into the Timeline not supported by default, one can add a new l
 <p>For example, to change the border and background color of all items, include the
   following code inside the head of your html code or in a separate stylesheet.</p>
 <pre class="prettyprint lang-html">&lt;style&gt;
-  .vis.timeline .item {
+  .vis-item {
     border-color: orange;
     background-color: yellow;
   }
@@ -1424,17 +1424,17 @@ To load a locale into the Timeline not supported by default, one can add a new l
 
   <pre class="prettyprint lang-html">&lt;style&gt;
   /* alternating column backgrounds */
-  .vis.timeline .timeaxis .grid.odd {
+  .vis-time-axis .grid.odd {
     background: #f5f5f5;
   }
 
   /* gray background in weekends, white text color */
-  .vis.timeline .timeaxis .grid.saturday,
-  .vis.timeline .timeaxis .grid.sunday {
+  .vis-time-axis .vis-grid.saturday,
+  .vis-time-axis .vis-grid.sunday {
     background: gray;
   }
-  .vis.timeline .timeaxis .text.saturday,
-  .vis.timeline .timeaxis .text.sunday {
+  .vis-time-axis .vis-text.saturday,
+  .vis-time-axis .vis-text.sunday {
     color: white;
   }
 &lt;/style&gt;

examples/graph2d/04_rightAxis.html

@@ -8,14 +8,14 @@
             font-family: sans-serif;
         }
 
-        .customStyle1 {
+        .custom-style1 {
             fill: #0df200;
             fill-opacity:0;
             stroke-width:2px;
             stroke: #0df200;
         }
 
-        .customStyle2 {
+        .custom-style2 {
             fill: #f23303;
             fill-opacity:0;
             stroke-width:2px;
@@ -47,7 +47,7 @@
     groups.add({
         id: 0,
         content: names[0],
-        className: 'customStyle1',
+        className: 'custom-style1',
         options: {
             drawPoints: {
                 style: 'square' // square, circle
@@ -60,7 +60,7 @@
     groups.add({
         id: 1,
         content: names[1],
-        className: 'customStyle2',
+        className: 'custom-style2',
         options: {
             style:'bar',
             drawPoints: {style: 'circle',

examples/graph2d/05_bothAxis.html

@@ -8,27 +8,26 @@
             font-family: sans-serif;
         }
 
-        .customStyle1 {
+        .custom-style1 {
             fill: #f2ea00;
             fill-opacity:0;
             stroke-width:2px;
             stroke: #b3ab00;
         }
 
-        .customStyle2 {
+        .custom-style2 {
             fill: #00a0f2;
-            fill-opacity:0;
             stroke-width:2px;
             stroke: #050092;
         }
 
-        .customStyle3 {
+        .custom-style3 {
             fill: #00f201;
             fill-opacity:0;
             stroke-width:2px;
             stroke: #029200;
         }
-        path.customStyle3.fill {
+        path.custom-style3.vis-fill {
             fill-opacity:0.5 !important;
             stroke: none;
         }
@@ -57,7 +56,7 @@
     groups.add({
         id: 0,
         content: names[0],
-        className: 'customStyle1',
+        className: 'custom-style1',
         options: {
             drawPoints: {
                 style: 'square' // square, circle
@@ -70,7 +69,7 @@
     groups.add({
         id: 1,
         content: names[1],
-        className: 'customStyle2',
+        className: 'custom-style2',
         options: {
             style:'bar',
             drawPoints: {style: 'circle',
@@ -90,7 +89,7 @@
     groups.add({
         id: 3,
         content: names[3],
-        className: 'customStyle3',
+        className: 'custom-style3',
         options: {
             yAxisOrientation: 'right', // right, left
             drawPoints: {

examples/graph2d/09_external_legend.html

@@ -1,366 +1,366 @@
 <!DOCTYPE HTML>
 <html>
 <head>
-    <title>Graph2d | External legend Example</title>
-    <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-    <style type="text/css">
-        body, html {
-            font-family: sans-serif;
-        }
-
-        .customStyle1 {
-            fill: #f2ea00;
-            fill-opacity:0;
-            stroke-width:2px;
-            stroke: #b3ab00;
-        }
-
-        .customStyle2 {
-            fill: #00a0f2;
-            fill-opacity:0;
-            stroke-width:2px;
-            stroke: #050092;
-        }
-
-        .customStyle3 {
-            fill: #00f201;
-            fill-opacity:0;
-            stroke-width:2px;
-            stroke: #029200;
-        }
-
-        path.customStyle3.fill {
-            fill-opacity:0.5 !important;
-            stroke: none;
-        }
-
-         .graphGroup0 {
-            fill:#4f81bd;
-            fill-opacity:0;
-            stroke-width:2px;
-            stroke: #4f81bd;
-        }
-
-         .graphGroup1 {
-            fill:#f79646;
-            fill-opacity:0;
-            stroke-width:2px;
-            stroke: #f79646;
-        }
-
-         .graphGroup2 {
-            fill: #8c51cf;
-            fill-opacity:0;
-            stroke-width:2px;
-            stroke: #8c51cf;
-        }
-
-         .graphGroup3 {
-            fill: #75c841;
-            fill-opacity:0;
-            stroke-width:2px;
-            stroke: #75c841;
-        }
-
-         .graphGroup4 {
-            fill: #ff0100;
-            fill-opacity:0;
-            stroke-width:2px;
-            stroke: #ff0100;
-        }
-
-         .graphGroup5 {
-            fill: #37d8e6;
-            fill-opacity:0;
-            stroke-width:2px;
-            stroke: #37d8e6;
-        }
-
-         .graphGroup6 {
-            fill: #042662;
-            fill-opacity:0;
-            stroke-width:2px;
-            stroke: #042662;
-        }
-
-         .graphGroup7 {
-            fill:#00ff26;
-            fill-opacity:0;
-            stroke-width:2px;
-            stroke: #00ff26;
-        }
-
-         .graphGroup8 {
-            fill:#ff00ff;
-            fill-opacity:0;
-            stroke-width:2px;
-            stroke: #ff00ff;
-        }
-
-         .graphGroup9 {
-            fill: #8f3938;
-            fill-opacity:0;
-            stroke-width:2px;
-            stroke: #8f3938;
-        }
-
-         .fill {
-            fill-opacity:0.1;
-            stroke: none;
-        }
-
-
-         .bar {
-            fill-opacity:0.5;
-            stroke-width:1px;
-        }
-
-         .point {
-            stroke-width:2px;
-            fill-opacity:1.0;
-        }
-
-
-         .legendBackground {
-            stroke-width:1px;
-            fill-opacity:0.9;
-            fill: #ffffff;
-            stroke: #c2c2c2;
-        }
-
-
-         .outline {
-            stroke-width:1px;
-            fill-opacity:1;
-            fill: #ffffff;
-            stroke: #e5e5e5;
-        }
-
-         .iconFill {
-            fill-opacity:0.3;
-            stroke: none;
-        }
-
-        div.descriptionContainer {
-            float:left;
-            height:30px;
-            width:160px;
-            padding-left:5px;
-            padding-right:5px;
-            line-height: 30px;
-        }
-
-        div.iconContainer {
-            float:left;
-        }
-
-        div.legendElementContainer {
-            display:inline-block;
-            width:200px;
-            height:30px;
-            border-style:solid;
-            border-width:1px;
-            border-color: #e0e0e0;
-            background-color: #ffffff;
-            margin:4px;
-            padding:4px;
-            -webkit-touch-callout: none;
-            -webkit-user-select: none;
-            -khtml-user-select: none;
-            -moz-user-select: none;
-            -ms-user-select: none;
-            user-select: none;
-            cursor:pointer;
-        }
-        div.legendElementContainer.hidden {
-            background-color: #d3e6ff;
-        }
-
-        svg.legendIcon {
-            width:30px;
-            height:30px;
-        }
-
-        div.externalLegend {
-            position:relative;
-            margin-left: -5px;
-            width: 900px;
-        }
-
-
-
-
-    </style>
-
-    <script src="../../dist/vis.js"></script>
-
-<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+  <title>Graph2d | External legend Example</title>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+  <style type="text/css">
+    body, html {
+      font-family: sans-serif;
+    }
+
+    .custom-style1 {
+      fill: #f2ea00;
+      fill-opacity:0;
+      stroke-width:2px;
+      stroke: #b3ab00;
+    }
+
+    .custom-style2 {
+      fill: #00a0f2;
+      fill-opacity:0;
+      stroke-width:2px;
+      stroke: #050092;
+    }
+
+    .custom-style3 {
+      fill: #00f201;
+      fill-opacity:0;
+      stroke-width:2px;
+      stroke: #029200;
+    }
+
+    path.custom-style3.fill {
+      fill-opacity:0.5 !important;
+      stroke: none;
+    }
+
+    .vis-graph-group0 {
+      fill:#4f81bd;
+      fill-opacity:0;
+      stroke-width:2px;
+      stroke: #4f81bd;
+    }
+
+    .vis-graph-group1 {
+      fill:#f79646;
+      fill-opacity:0;
+      stroke-width:2px;
+      stroke: #f79646;
+    }
+
+    .vis-graph-group2 {
+      fill: #8c51cf;
+      fill-opacity:0;
+      stroke-width:2px;
+      stroke: #8c51cf;
+    }
+
+    .vis-graph-group3 {
+      fill: #75c841;
+      fill-opacity:0;
+      stroke-width:2px;
+      stroke: #75c841;
+    }
+
+    .vis-graph-group4 {
+      fill: #ff0100;
+      fill-opacity:0;
+      stroke-width:2px;
+      stroke: #ff0100;
+    }
+
+    .vis-graph-group5 {
+      fill: #37d8e6;
+      fill-opacity:0;
+      stroke-width:2px;
+      stroke: #37d8e6;
+    }
+
+    .vis-graph-group6 {
+      fill: #042662;
+      fill-opacity:0;
+      stroke-width:2px;
+      stroke: #042662;
+    }
+
+    .vis-graph-group7 {
+      fill:#00ff26;
+      fill-opacity:0;
+      stroke-width:2px;
+      stroke: #00ff26;
+    }
+
+    .vis-graph-group8 {
+      fill:#ff00ff;
+      fill-opacity:0;
+      stroke-width:2px;
+      stroke: #ff00ff;
+    }
+
+    .vis-graph-group9 {
+      fill: #8f3938;
+      fill-opacity:0;
+      stroke-width:2px;
+      stroke: #8f3938;
+    }
+
+    .vis-fill {
+      fill-opacity:0.1;
+      stroke: none;
+    }
+
+
+    .vis-bar {
+      fill-opacity:0.5;
+      stroke-width:1px;
+    }
+
+    .vis-point {
+      stroke-width:2px;
+      fill-opacity:1.0;
+    }
+
+
+    .vis-legend-background {
+      stroke-width:1px;
+      fill-opacity:0.9;
+      fill: #ffffff;
+      stroke: #c2c2c2;
+    }
+
+
+    .vis-outline {
+      stroke-width:1px;
+      fill-opacity:1;
+      fill: #ffffff;
+      stroke: #e5e5e5;
+    }
+
+    .vis-icon-fill {
+      fill-opacity:0.3;
+      stroke: none;
+    }
+
+    div.description-container {
+      float:left;
+      height:30px;
+      width:160px;
+      padding-left:5px;
+      padding-right:5px;
+      line-height: 30px;
+    }
+
+    div.icon-container {
+      float:left;
+    }
+
+    div.legend-element-container {
+      display:inline-block;
+      width:200px;
+      height:30px;
+      border-style:solid;
+      border-width:1px;
+      border-color: #e0e0e0;
+      background-color: #ffffff;
+      margin:4px;
+      padding:4px;
+      -webkit-touch-callout: none;
+      -webkit-user-select: none;
+      -khtml-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+      cursor:pointer;
+    }
+    div.legend-element-container.hidden {
+      background-color: #d3e6ff;
+    }
+
+    svg.legend-icon {
+      width:30px;
+      height:30px;
+    }
+
+    div.external-legend {
+      position:relative;
+      margin-left: -5px;
+      width: 900px;
+    }
+
+
+
+
+  </style>
+
+  <script src="../../dist/vis.js"></script>
+
+  <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
 <body>
 <h2>Graph2d | External custom legend</h2>
 <div style="width:800px; font-size:14px; text-align: justify;">
-    This example shows how to create an external custom legend using the getLegend function. We use normal JavaScript to show and hide the
-    groups by updating the dataset.
+  This example shows how to create an external custom legend using the getLegend function. We use normal JavaScript to show and hide the
+  groups by updating the dataset.
 
 </div>
 <br />
-<div id="Legend" class="externalLegend"></div>
+<div id="Legend" class="external-legend"></div>
 <div id="visualization"></div>
 
 
 <script type="text/javascript">
-    // create a dataSet with groups
-    var names = ['SquareShaded', 'Bargraph', 'Blank', 'CircleShaded'];
-    var groups = new vis.DataSet();
-    groups.add({
-        id: 0,
-        content: names[0],
-        className: 'customStyle1',
-        options: {
-            drawPoints: {
-                style: 'square' // square, circle
-            },
-            shaded: {
-                orientation: 'bottom' // top, bottom
-            }
-        }});
-
-    groups.add({
-        id: 1,
-        content: names[1],
-        className: 'customStyle2',
-        options: {
-            style:'bar',
-            drawPoints: {style: 'circle',
-                size: 10
-            }
-        }});
-
-    groups.add({
-        id: 2,
-        content: names[2],
-        options: {
-            yAxisOrientation: 'right', // right, left
-            drawPoints: false
-        }
-    });
-
-    groups.add({
-        id: 3,
-        content: names[3],
-        className: 'customStyle3',
-        options: {
-            yAxisOrientation: 'right', // right, left
-            drawPoints: {
-                style: 'circle' // square, circle
-            },
-            shaded: {
-                orientation: 'top' // top, bottom
-            }
-        }});
-
-    var container = document.getElementById('visualization');
-    var items = [
-        {x: '2014-06-12', y: 0 , group: 0},
-        {x: '2014-06-13', y: 30, group: 0},
-        {x: '2014-06-14', y: 10, group: 0},
-        {x: '2014-06-15', y: 15, group: 1},
-        {x: '2014-06-16', y: 30, group: 1},
-        {x: '2014-06-17', y: 10, group: 1},
-        {x: '2014-06-18', y: 15, group: 1},
-        {x: '2014-06-19', y: 52, group: 1},
-        {x: '2014-06-20', y: 10, group: 1},
-        {x: '2014-06-21', y: 20, group: 2},
-        {x: '2014-06-22', y: 600, group: 2},
-        {x: '2014-06-23', y: 100, group: 2},
-        {x: '2014-06-24', y: 250, group: 2},
-        {x: '2014-06-25', y: 300, group: 2},
-        {x: '2014-06-26', y: 200, group: 3},
-        {x: '2014-06-27', y: 600, group: 3},
-        {x: '2014-06-28', y: 1000, group: 3},
-        {x: '2014-06-29', y: 250, group: 3},
-        {x: '2014-06-30', y: 300, group: 3}
-    ];
-
-    var dataset = new vis.DataSet(items);
-    var options = {
-        dataAxis: {showMinorLabels: false},
-        start: '2014-06-09',
-        end: '2014-07-03'
-    };
-    var graph2d = new vis.Graph2d(container, items, groups, options);
-
-
-    /**
-     * this function fills the external legend with content using the getLegend() function.
-     */
-    function populateExternalLegend() {
-        var groupsData = groups.get();
-        var legendDiv = document.getElementById("Legend");
-        legendDiv.innerHTML = "";
-
-        // get for all groups:
-        for (var i = 0; i < groupsData.length; i++) {
-            // create divs
-            var containerDiv = document.createElement("div");
-            var iconDiv = document.createElement("div");
-            var descriptionDiv = document.createElement("div");
-
-            // give divs classes and Ids where necessary
-            containerDiv.className = 'legendElementContainer';
-            containerDiv.id = groupsData[i].id + "_legendContainer"
-            iconDiv.className = "iconContainer";
-            descriptionDiv.className = "descriptionContainer";
-
-            // get the legend for this group.
-            var legend = graph2d.getLegend(groupsData[i].id,30,30);
-
-            // append class to icon. All styling classes from the vis.css have been copied over into the head here to be able to style the
-            // icons with the same classes if they are using the default ones.
-            legend.icon.setAttributeNS(null, "class", "legendIcon");
-
-            // append the legend to the corresponding divs
-            iconDiv.appendChild(legend.icon);
-            descriptionDiv.innerHTML = legend.label;
-
-            // determine the order for left and right orientation
-            if (legend.orientation == 'left') {
-                descriptionDiv.style.textAlign = "left";
-                containerDiv.appendChild(iconDiv);
-                containerDiv.appendChild(descriptionDiv);
-            }
-            else {
-                descriptionDiv.style.textAlign = "right";
-                containerDiv.appendChild(descriptionDiv);
-                containerDiv.appendChild(iconDiv);
-            }
-
-            // append to the legend container div
-            legendDiv.appendChild(containerDiv);
-
-            // bind click event to this legend element.
-            containerDiv.onclick = toggleGraph.bind(this,groupsData[i].id);
-        }
+  // create a dataSet with groups
+  var names = ['SquareShaded', 'Bargraph', 'Blank', 'CircleShaded'];
+  var groups = new vis.DataSet();
+  groups.add({
+    id: 0,
+    content: names[0],
+    className: 'custom-style1',
+    options: {
+      drawPoints: {
+        style: 'square' // square, circle
+      },
+      shaded: {
+        orientation: 'bottom' // top, bottom
+      }
+    }});
+
+  groups.add({
+    id: 1,
+    content: names[1],
+    className: 'custom-style2',
+    options: {
+      style:'bar',
+      drawPoints: {style: 'circle',
+        size: 10
+      }
+    }});
+
+  groups.add({
+    id: 2,
+    content: names[2],
+    options: {
+      yAxisOrientation: 'right', // right, left
+      drawPoints: false
     }
-
-    /**
-     * This function switchs the visible option of the selected group on an off.
-     * @param groupId
-     */
-    function toggleGraph(groupId) {
-        // get the container that was clicked on.
-        var container = document.getElementById(groupId + "_legendContainer")
-        // if visible, hide
-        if (graph2d.isGroupVisible(groupId) == true) {
-            groups.update({id:groupId, visible:false});
-            container.className = container.className + " hidden";
-        }
-        else { // if invisible, show
-            groups.update({id:groupId, visible:true});
-            container.className = container.className.replace("hidden","");
-        }
+  });
+
+  groups.add({
+    id: 3,
+    content: names[3],
+    className: 'custom-style3',
+    options: {
+      yAxisOrientation: 'right', // right, left
+      drawPoints: {
+        style: 'circle' // square, circle
+      },
+      shaded: {
+        orientation: 'top' // top, bottom
+      }
+    }});
+
+  var container = document.getElementById('visualization');
+  var items = [
+    {x: '2014-06-12', y: 0 , group: 0},
+    {x: '2014-06-13', y: 30, group: 0},
+    {x: '2014-06-14', y: 10, group: 0},
+    {x: '2014-06-15', y: 15, group: 1},
+    {x: '2014-06-16', y: 30, group: 1},
+    {x: '2014-06-17', y: 10, group: 1},
+    {x: '2014-06-18', y: 15, group: 1},
+    {x: '2014-06-19', y: 52, group: 1},
+    {x: '2014-06-20', y: 10, group: 1},
+    {x: '2014-06-21', y: 20, group: 2},
+    {x: '2014-06-22', y: 600, group: 2},
+    {x: '2014-06-23', y: 100, group: 2},
+    {x: '2014-06-24', y: 250, group: 2},
+    {x: '2014-06-25', y: 300, group: 2},
+    {x: '2014-06-26', y: 200, group: 3},
+    {x: '2014-06-27', y: 600, group: 3},
+    {x: '2014-06-28', y: 1000, group: 3},
+    {x: '2014-06-29', y: 250, group: 3},
+    {x: '2014-06-30', y: 300, group: 3}
+  ];
+
+  var dataset = new vis.DataSet(items);
+  var options = {
+    dataAxis: {showMinorLabels: false},
+    start: '2014-06-09',
+    end: '2014-07-03'
+  };
+  var graph2d = new vis.Graph2d(container, items, groups, options);
+
+
+  /**
+   * this function fills the external legend with content using the getLegend() function.
+   */
+  function populateExternalLegend() {
+    var groupsData = groups.get();
+    var legendDiv = document.getElementById("Legend");
+    legendDiv.innerHTML = "";
+
+    // get for all groups:
+    for (var i = 0; i < groupsData.length; i++) {
+      // create divs
+      var containerDiv = document.createElement("div");
+      var iconDiv = document.createElement("div");
+      var descriptionDiv = document.createElement("div");
+
+      // give divs classes and Ids where necessary
+      containerDiv.className = 'legend-element-container';
+      containerDiv.id = groupsData[i].id + "_legendContainer"
+      iconDiv.className = "icon-container";
+      descriptionDiv.className = "description-container";
+
+      // get the legend for this group.
+      var legend = graph2d.getLegend(groupsData[i].id,30,30);
+
+      // append class to icon. All styling classes from the vis.css have been copied over into the head here to be able to style the
+      // icons with the same classes if they are using the default ones.
+      legend.icon.setAttributeNS(null, "class", "legend-icon");
+
+      // append the legend to the corresponding divs
+      iconDiv.appendChild(legend.icon);
+      descriptionDiv.innerHTML = legend.label;
+
+      // determine the order for left and right orientation
+      if (legend.orientation == 'left') {
+        descriptionDiv.style.textAlign = "left";
+        containerDiv.appendChild(iconDiv);
+        containerDiv.appendChild(descriptionDiv);
+      }
+      else {
+        descriptionDiv.style.textAlign = "right";
+        containerDiv.appendChild(descriptionDiv);
+        containerDiv.appendChild(iconDiv);
+      }
+
+      // append to the legend container div
+      legendDiv.appendChild(containerDiv);
+
+      // bind click event to this legend element.
+      containerDiv.onclick = toggleGraph.bind(this,groupsData[i].id);
+    }
+  }
+
+  /**
+   * This function switchs the visible option of the selected group on an off.
+   * @param groupId
+   */
+  function toggleGraph(groupId) {
+    // get the container that was clicked on.
+    var container = document.getElementById(groupId + "_legendContainer")
+    // if visible, hide
+    if (graph2d.isGroupVisible(groupId) == true) {
+      groups.update({id:groupId, visible:false});
+      container.className = container.className + " hidden";
+    }
+    else { // if invisible, show
+      groups.update({id:groupId, visible:true});
+      container.className = container.className.replace("hidden","");
     }
+  }
 
-    populateExternalLegend()
+  populateExternalLegend()
 
 </script>
 </body>

examples/graph2d/16_bothAxis_titles.html

@@ -8,27 +8,27 @@
             font-family: sans-serif;
         }
 
-        .customStyle1 {
+        .custom-style1 {
             fill: #f2ea00;
             fill-opacity:0;
             stroke-width:2px;
             stroke: #b3ab00;
         }
 
-        .customStyle2 {
+        .custom-style2 {
             fill: #00a0f2;
             fill-opacity:0;
             stroke-width:2px;
             stroke: #050092;
         }
 
-        .customStyle3 {
+        .custom-style3 {
             fill: #00f201;
             fill-opacity:0;
             stroke-width:2px;
             stroke: #029200;
         }
-        path.customStyle3.fill {
+        path.custom-style3.vis-fill {
             fill-opacity:0.5 !important;
             stroke: none;
         }
@@ -88,7 +88,7 @@
     groups.add({
         id: 0,
         content: names[0],
-        className: 'customStyle1',
+        className: 'custom-style1',
         options: {
             drawPoints: {
                 style: 'square' // square, circle
@@ -101,7 +101,7 @@
     groups.add({
         id: 1,
         content: names[1],
-        className: 'customStyle2',
+        className: 'custom-style2',
         options: {
             style:'bar',
             drawPoints: {style: 'circle',
@@ -121,7 +121,7 @@
     groups.add({
         id: 3,
         content: names[3],
-        className: 'customStyle3',
+        className: 'custom-style3',
         options: {
             yAxisOrientation: 'right', // right, left
             drawPoints: {

examples/network/01_basic_usage.html

@@ -9,24 +9,23 @@
   <style type="text/css">
     #mynetwork {
       width: 600px;
+      margin:90px;
       height: 400px;
       border: 1px solid lightgray;
-      display:none;
     }
   </style>
 <body>
 
 <div id="mynetwork"></div>
 
-<input type="button" onclick="document.getElementById('mynetwork').style.display='block'; network.view.zoomExtent({duration:0});" value="showdiv">
 <script type="text/javascript">
   // create an array with nodes
   var nodes = [
-    {id: 1, label: 'Node 1'},
-    {id: 2, label: 'Node 2'},
-    {id: 3, label: 'Node 3'},
-    {id: 4, label: 'Node 4'},
-    {id: 5, label: 'Node 5'}
+    {id: 1, label: 'Node 1', value:3, title:'hello world'},
+    {id: 2, label: 'Node 2', value:1},
+    {id: 3, label: 'Node 3', value:5},
+    {id: 4, label: 'Node 4', value:3},
+    {id: 5, label: 'Node 5', value:2}
   ];
 
   // create an array with edges
@@ -46,9 +45,12 @@
     edges: edges
   };
   var options = {
-//      configure: 'nodes',
+    interaction:{navigationButtons:true}
+//    edges:{
+//      shadow:true,
+//      shape:'dot'
+//    },
 //      physics:{stabilization:true}
-      nodes:{color:'red'}
   }
   var network = new vis.Network(container, data, options);
 //    network.setOptions({nodes:{color:'red'}})

examples/network/09_sizing.html

@@ -63,9 +63,6 @@
       var options = {
         nodes: {
           shape: 'dot'
-        },
-        edges: {
-          color: '#97C2FC'
         }
       };
       network = new vis.Network(container, data, options);

examples/network/20_navigation.html

@@ -10,6 +10,7 @@
     #mynetwork {
       width: 600px;
       height: 600px;
+      margin:100px;
       border: 1px solid lightgray;
     }
     table.legend_table {
@@ -104,9 +105,7 @@
         edges: edges
       };
       var options = {
-        stabilize: false,
-        navigation: true,
-        keyboard: true
+        interaction:{navigationButtons: true},
       };
       network = new vis.Network(container, data, options);
 

examples/timeline/12_custom_styling.html

@@ -7,14 +7,14 @@
   <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <style type="text/css">
-    .vis.timeline.root {
+    .vis-timeline {
       border: 2px solid purple;
       font-family:  purisa, 'comic sans', cursive;
       font-size: 12pt;
       background: #ffecea;
     }
 
-    .vis.timeline .item {
+    .vis-item {
       border-color: #F991A3;
       background-color: pink;
       font-size: 15pt;
@@ -22,37 +22,37 @@
       box-shadow: 5px 5px 20px rgba(128,128,128, 0.5);
     }
 
-    .vis.timeline .item,
-    .vis.timeline .item.line {
+    .vis-item,
+    .vis-item.vis-line {
       border-width: 3px;
     }
 
-    .vis.timeline .item.dot {
+    .vis-item.vis-dot {
       border-width: 10px;
       border-radius: 10px;
     }
 
-    .vis.timeline .item.selected {
+    .vis-item.vis-selected {
       border-color: green;
       background-color: lightgreen;
     }
 
-    .vis.timeline .timeaxis .text {
+    .vis-time-axis .vis-text {
       color: purple;
       padding-top: 10px;
       padding-left: 10px;
     }
 
-    .vis.timeline .timeaxis .text.major {
+    .vis-time-axis .vis-text.vis-major {
       font-weight: bold;
     }
 
-    .vis.timeline .timeaxis .grid.minor {
+    .vis-time-axis .vis-grid.vis-minor {
       border-width: 2px;
       border-color: pink;
     }
 
-    .vis.timeline .timeaxis .grid.major {
+    .vis-time-axis .vis-grid.vis-major {
       border-width: 2px;
       border-color: #F991A3;
     }

examples/timeline/15_item_class_names.html

@@ -12,44 +12,44 @@
 
     /* custom styles for individual items, load this after vis.css */
 
-    .vis.timeline .item.green {
+    .vis-item.green {
       background-color: greenyellow;
       border-color: green;
     }
 
     /* create a custom sized dot at the bottom of the red item */
-    .vis.timeline .item.red {
+    .vis-item.red {
       background-color: red;
       border-color: darkred;
       color: white;
       font-family: monospace;
       box-shadow: 0 0 10px gray;
     }
-    .vis.timeline .item.dot.red {
+    .vis-item.vis-dot.red {
       border-radius: 10px;
       border-width: 10px;
     }
-    .vis.timeline .item.line.red {
+    .vis-item.vis-line.red {
       border-width: 5px;
     }
-    .vis.timeline .item.box.red {
+    .vis-item.vis-box.red {
       border-radius: 0;
       border-width: 2px;
       font-size: 24pt;
       font-weight: bold;
     }
 
-    .vis.timeline .item.orange {
+    .vis-item.orange {
       background-color: gold;
       border-color: orange;
     }
-    .vis.timeline .item.orange.selected {
+    .vis-item.vis-selected.orange {
       /* custom colors for selected orange items */
       background-color: orange;
       border-color: orangered;
     }
 
-    .vis.timeline .item.magenta {
+    .vis-item.magenta {
       background-color: magenta;
       border-color: purple;
       color: white;
@@ -57,7 +57,7 @@
 
     /* our custom classes overrule the styles for selected events,
        so lets define a new style for the selected events */
-    .vis.timeline .item.selected {
+    .vis-item.vis-selected {
       background-color: white;
       border-color: black;
       color: black;

examples/timeline/18_range_overflow.html

@@ -11,7 +11,7 @@
       font-family: sans-serif;
     }
 
-    .vis.timeline .item.range {
+    .vis-item.vis-range {
       overflow: visible;
     }
   </style>

examples/timeline/25_background_areas.html

@@ -9,10 +9,10 @@
       font-size: 11pt;
     }
 
-    .vis.timeline .item.background.negative {
+    .vis-item.vis-background.negative {
       background-color: rgba(255, 0, 0, 0.2);
     }
-    .vis.timeline .item.background.marker {
+    .vis-item.vis-background.marker {
       border-left: 2px solid green;
     }
   </style>

examples/timeline/30_subgroups.html

@@ -9,13 +9,13 @@
             font-size: 11pt;
         }
 
-        .vis.timeline .item.background.negative {
+        .vis-item.vis-background.negative {
             background-color: rgba(255, 0, 0, 0.2);
         }
-        .vis.timeline .item.background.positive {
+        .vis-item.vis-background.positive {
             background-color: rgba(105, 255, 98, 0.20);
         }
-        .vis.timeline .item.background.marker {
+        .vis-item.vis-background.marker {
             border-left: 2px solid green;
         }
     </style>

examples/timeline/32_grid_styling.html

@@ -12,17 +12,17 @@
     }
 
     /* alternating column backgrounds */
-    .vis.timeline .timeaxis .grid.odd {
+    .vis-time-axis .vis-grid.odd {
       background: #f5f5f5;
     }
 
     /* gray background in weekends, white text color */
-    .vis.timeline .timeaxis .grid.saturday,
-    .vis.timeline .timeaxis .grid.sunday {
+    .vis-time-axis .vis-grid.saturday,
+    .vis-time-axis .vis-grid.sunday {
       background: gray;
     }
-    .vis.timeline .timeaxis .text.saturday,
-    .vis.timeline .timeaxis .text.sunday {
+    .vis-time-axis .vis-text.saturday,
+    .vis-time-axis .vis-text.sunday {
       color: white;
     }
   </style>

gulpfile.js

@@ -45,7 +45,7 @@ var webpackConfig = {
   },
   module: {
     loaders: [
-      { test: /\.js$/, exclude: /node_modules/, loader: '6to5-loader'}
+      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'}
     ],
 
     // exclude requires of moment.js language files
@@ -53,6 +53,8 @@ var webpackConfig = {
   },
   plugins: [ bannerPlugin ],
   cache: true
+  //debug: true,
+  //bail: true
 };
 
 var uglifyConfig = {
@@ -75,7 +77,19 @@ gulp.task('bundle-js', ['clean'], function (cb) {
   bannerPlugin.banner = createBanner();
 
   compiler.run(function (err, stats) {
-    if (err) gutil.log(err);
+    if (err) {
+      gutil.log(err.toString());
+    }
+
+    // output soft errors
+    stats.compilation.errors.forEach(function (err) {
+      gutil.log(err);
+    });
+
+    if (err || stats.compilation.errors.length > 0) {
+      gutil.beep(); // TODO: this does not work on my system
+    }
+
     cb();
   });
 });

lib/DOMutil.js

@@ -150,9 +150,9 @@ exports.drawPoint = function(x, y, group, JSONcontainer, svgContainer, labelObj)
   }
 
   if(group.options.drawPoints.styles !== undefined) {
-    point.setAttributeNS(null, "style", group.group.options.drawPoints.styles);
+    point.setAttributeNS(null, "style", 'vis-' + group.group.options.drawPoints.styles);
   }
-  point.setAttributeNS(null, "class", group.className + " point");
+  point.setAttributeNS(null, "class", group.className + " vis-point");
   //handle label 
   var label = exports.getSVGElement('text',JSONcontainer,svgContainer);
   if (labelObj){
@@ -168,7 +168,7 @@ exports.drawPoint = function(x, y, group, JSONcontainer, svgContainer, labelObj)
       }
 
       if (labelObj.className) {
-        label.setAttributeNS(null, "class", labelObj.className  + " label");
+        label.setAttributeNS(null, "class", labelObj.className  + " vis-label");
       }
 
 

lib/module/hammer.js

@@ -3,7 +3,9 @@
 if (typeof window !== 'undefined') {
   var propagating = require('propagating-hammerjs');
   var Hammer = window['Hammer'] || require('hammerjs');
-  module.exports = propagating(Hammer);
+  module.exports = propagating(Hammer, {
+    preventDefault: true
+  });
 }
 else {
   module.exports = function () {

lib/network/Network.js

@@ -111,7 +111,7 @@ function Network (container, data, options) {
   this.configurationSystem = new ConfigurationSystem(this);
 
   // create the DOM elements
-  this.canvas.create();
+  this.canvas._create();
 
   // apply options
   this.setOptions(options);
@@ -125,7 +125,6 @@ function Network (container, data, options) {
 Emitter(Network.prototype);
 
 
-
 /**
  * Set options
  * @param {Object} options
@@ -338,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.
@@ -418,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
@@ -451,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-colorpicker.css

@@ -1,174 +1,175 @@
 
-div.vis-network-colorPicker-frame {
-    position:absolute;
-    margin-top:-140px;
-    margin-left:30px;
-    width:293px;
-    height:425px;
-    padding: 10px;
-    border-radius:15px;
-    background-color:#ffffff;
-    display:none;
-    box-shadow: rgba(0,0,0,0.5) 0px 0px 10px 0px;
-}
-
-
-
-div.vis-network-colorPicker-arrowDiv {
-    position: absolute;
-    top:147px;
-    left:5px;
-}
-div.vis-network-colorPicker-arrowDiv:after, .vis-network-colorPicker-arrowDiv:before {
-    right: 100%;
-    top: 50%;
-    border: solid transparent;
-    content: " ";
-    height: 0;
-    width: 0;
-    position: absolute;
-    pointer-events: none;
-}
-
-div.vis-network-colorPicker-arrowDiv:after {
-    border-color: rgba(255, 255, 255, 0);
-    border-right-color: #ffffff;
-    border-width: 30px;
-    margin-top: -30px;
+div.vis-color-picker {
+  position:absolute;
+  margin-top:-140px;
+  margin-left:30px;
+  width:293px;
+  height:425px;
+  padding: 10px;
+  border-radius:15px;
+  background-color:#ffffff;
+  display:none;
+  box-shadow: rgba(0,0,0,0.5) 0px 0px 10px 0px;
+}
+
+div.vis-color-picker div.vis-arrow {
+  position: absolute;
+  top:147px;
+  left:5px;
+}
+
+div.vis-color-picker div.vis-arrow:after,
+div.vis-color-picker div.vis-arrow:before {
+  right: 100%;
+  top: 50%;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+
+div.vis-color-picker div.vis-arrow:after {
+  border-color: rgba(255, 255, 255, 0);
+  border-right-color: #ffffff;
+  border-width: 30px;
+  margin-top: -30px;
+}
+
+div.vis-color-picker div.vis-color {
+  position:absolute;
+  width: 289px;
+  height: 289px;
+  cursor: pointer;
+}
+
+
+
+div.vis-color-picker div.vis-brightness {
+  position: absolute;
+  top:313px;
+}
+
+div.vis-color-picker div.vis-opacity {
+  position:absolute;
+  top:350px;
+}
+
+div.vis-color-picker div.vis-selector {
+  position:absolute;
+  top:137px;
+  left:137px;
+  width:15px;
+  height:15px;
+  border-radius:15px;
+  border:1px solid #ffffff;
+  background: #4c4c4c; /* Old browsers */
+  background: -moz-linear-gradient(top,  #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(12%,#595959), color-stop(25%,#666666), color-stop(39%,#474747), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(60%,#111111), color-stop(76%,#2b2b2b), color-stop(91%,#1c1c1c), color-stop(100%,#131313)); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(top,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(top,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Opera 11.10+ */
+  background: -ms-linear-gradient(top,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* IE10+ */
+  background: linear-gradient(to bottom,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
 }
 
-div.vis-network-colorPicker-color {
-    position:absolute;
-    width: 289px;
-    height: 289px;
-    cursor: pointer;
-}
-
-
-
-div.vis-network-colorPicker-brightness {
-    position: absolute;
-    top:313px;
-}
-
-div.vis-network-colorPicker-opacity {
-    position:absolute;
-    top:350px;
-}
-
-div.vis-network-colorPicker-selector{
-    position:absolute;
-    top:137px;
-    left:137px;
-    width:15px;
-    height:15px;
-    border-radius:15px;
-    border:1px solid #ffffff;
-    background: #4c4c4c; /* Old browsers */
-    background: -moz-linear-gradient(top,  #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6+ */
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(12%,#595959), color-stop(25%,#666666), color-stop(39%,#474747), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(60%,#111111), color-stop(76%,#2b2b2b), color-stop(91%,#1c1c1c), color-stop(100%,#131313)); /* Chrome,Safari4+ */
-    background: -webkit-linear-gradient(top,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10+,Safari5.1+ */
-    background: -o-linear-gradient(top,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Opera 11.10+ */
-    background: -ms-linear-gradient(top,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* IE10+ */
-    background: linear-gradient(to bottom,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C */
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
-}
 
 
-
-div.vis-network-colorPicker-newColor {
-    position:absolute;
-    width:140px;
-    height:20px;
-    border:1px solid rgba(0,0,0,0.1);
-    border-radius:5px;
-    top:380px;
-    left:159px;
-    text-align:right;
-    padding-right:2px;
-    font-size:10px;
-    color:rgba(0,0,0,0.4);
-    vertical-align:middle;
-    line-height:20px;
+div.vis-color-picker div.vis-new-color {
+  position:absolute;
+  width:140px;
+  height:20px;
+  border:1px solid rgba(0,0,0,0.1);
+  border-radius:5px;
+  top:380px;
+  left:159px;
+  text-align:right;
+  padding-right:2px;
+  font-size:10px;
+  color:rgba(0,0,0,0.4);
+  vertical-align:middle;
+  line-height:20px;
 
 }
 
-div.vis-network-colorPicker-initialColor {
-    position:absolute;
-    width:140px;
-    height:20px;
-    border:1px solid rgba(0,0,0,0.1);
-    border-radius:5px;
-    top:380px;
-    left:10px;
-    text-align:left;
-    padding-left:2px;
-    font-size:10px;
-    color:rgba(0,0,0,0.4);
-    vertical-align:middle;
-    line-height:20px;
+div.vis-color-picker div.vis-initial-color {
+  position:absolute;
+  width:140px;
+  height:20px;
+  border:1px solid rgba(0,0,0,0.1);
+  border-radius:5px;
+  top:380px;
+  left:10px;
+  text-align:left;
+  padding-left:2px;
+  font-size:10px;
+  color:rgba(0,0,0,0.4);
+  vertical-align:middle;
+  line-height:20px;
 }
 
-div.vis-network-colorPicker-label {
-    position:absolute;
-    width:300px;
-    left:10px;
+div.vis-color-picker div.vis-label {
+  position:absolute;
+  width:300px;
+  left:10px;
 }
 
-div.vis-network-colorPicker-label.brightness {
-    top:300px;
+div.vis-color-picker div.vis-label.vis-brightness {
+  top:300px;
 }
 
-div.vis-network-colorPicker-label.opacity {
-    top:338px;
+div.vis-color-picker div.vis-label.vis-opacity {
+  top:338px;
 }
 
-div.vis-network-colorPicker-button {
-    position:absolute;
-    width:68px;
-    height:25px;
-    border-radius:10px;
-    vertical-align: middle;
-    text-align:center;
-    line-height: 25px;
-    top:410px;
-    border:2px solid #d9d9d9;
-    background-color: #f7f7f7;
-    cursor:pointer;
+div.vis-color-picker div.vis-button {
+  position:absolute;
+  width:68px;
+  height:25px;
+  border-radius:10px;
+  vertical-align: middle;
+  text-align:center;
+  line-height: 25px;
+  top:410px;
+  border:2px solid #d9d9d9;
+  background-color: #f7f7f7;
+  cursor:pointer;
 }
 
-div.vis-network-colorPicker-button.cancel {
-    /*border:2px solid #ff4e33;*/
-    /*background-color: #ff7761;*/
-    left:5px;
+div.vis-color-picker div.vis-button.vis-cancel {
+  /*border:2px solid #ff4e33;*/
+  /*background-color: #ff7761;*/
+  left:5px;
 }
-div.vis-network-colorPicker-button.load {
-    /*border:2px solid #a153e6;*/
-    /*background-color: #cb8dff;*/
-    left:82px;
+div.vis-color-picker div.vis-button.vis-load {
+  /*border:2px solid #a153e6;*/
+  /*background-color: #cb8dff;*/
+  left:82px;
 }
-div.vis-network-colorPicker-button.apply {
-    /*border:2px solid #4588e6;*/
-    /*background-color: #82b6ff;*/
-    left:159px;
+div.vis-color-picker div.vis-button.vis-apply {
+  /*border:2px solid #4588e6;*/
+  /*background-color: #82b6ff;*/
+  left:159px;
 }
-div.vis-network-colorPicker-button.save {
-    /*border:2px solid #45e655;*/
-    /*background-color: #6dff7c;*/
-    left:236px;
-}
-
+div.vis-color-picker div.vis-button.vis-save {
+  /*border:2px solid #45e655;*/
+  /*background-color: #6dff7c;*/
+  left:236px;
+}
+
 
-input.vis-network-configuration.range.colorPicker{
-    width: 290px;
-    height:20px;
+div.vis-color-picker input.vis-range {
+  width: 290px;
+  height:20px;
 }
 
-input.vis-network-brightnessRange {
-    width: 289px !important;
+/* TODO: is this redundant?
+div.vis-color-picker input.vis-range-brightness {
+  width: 289px !important;
 }
 
 
-input.vis-network-saturationRange {
-    width: 289px !important;
-}
+div.vis-color-picker input.vis-saturation-range {
+  width: 289px !important;
+}*/

lib/network/css/network-configuration.css

@@ -5,7 +5,7 @@ div.vis-network-configuration {
     font-size:12px;
 }
 
-div.vis-network-configuration.optionContainer{
+div.vis-network-configuration.vis-option-container{
     display:block;
     width:495px;
     background-color: #ffffff;

lib/network/css/network-manipulation.css

@@ -1,4 +1,4 @@
-div.network-manipulationDiv {
+div.vis-network div.vis-manipulation {
   border-width: 0;
   border-bottom: 1px;
   border-style:solid;
@@ -19,14 +19,16 @@ div.network-manipulationDiv {
   height: 30px;
 }
 
-div.network-manipulation-editMode {
+div.vis-network div.vis-edit-mode {
   position:absolute;
   left: 0;
   top: 15px;
   height: 30px;
 }
 
-div.network-manipulation-closeDiv {
+/* FIXME: shouldn't the vis-close button be a child of the vis-manipulation div? */
+
+div.vis-network div.vis-close {
   position:absolute;
   right: 0;
   top: 0;
@@ -45,13 +47,14 @@ div.network-manipulation-closeDiv {
   user-select: none;
 }
 
-div.network-manipulation-closeDiv:hover {
+div.vis-network div.vis-close:hover {
   opacity: 0.6;
 }
 
-div.network-manipulationUI {
-    position:relative;
-    top:-7px;
+div.vis-network div.vis-manipulation div.vis-button,
+div.vis-network div.vis-edit-mode div.vis-button {
+  position:relative;
+  top:-7px;
   font-family: verdana;
   font-size: 12px;
   -moz-border-radius: 15px;
@@ -72,72 +75,74 @@ div.network-manipulationUI {
   user-select: none;
 }
 
-div.network-manipulationUI:hover {
+div.vis-network div.vis-manipulation div.vis-button:hover {
   box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.20);
 }
 
-div.network-manipulationUI:active {
+div.vis-network div.vis-manipulation div.vis-button:active {
   box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.50);
 }
 
-div.network-manipulationUI.back {
+div.vis-network div.vis-manipulation div.vis-button.vis-back {
   background-image: url("img/network/backIcon.png");
 }
 
-div.network-manipulationUI.none:hover {
+div.vis-network div.vis-manipulation div.vis-button.vis-none:hover {
   box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
   cursor: default;
 }
-div.network-manipulationUI.none:active {
+div.vis-network div.vis-manipulation div.vis-button.vis-none:active {
   box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
 }
-div.network-manipulationUI.none {
+div.vis-network div.vis-manipulation div.vis-button.vis-none {
   padding: 0;
 }
-div.network-manipulationUI.notification{
+div.vis-network div.vis-manipulation div.notification {
   margin: 2px;
   font-weight: bold;
 }
 
-div.network-manipulationUI.add {
+div.vis-network div.vis-manipulation div.vis-button.vis-add {
   background-image: url("img/network/addNodeIcon.png");
 }
 
-div.network-manipulationUI.edit {
+div.vis-network div.vis-manipulation div.vis-button.vis-edit,
+div.vis-network div.vis-edit-mode div.vis-button.vis-edit {
   background-image: url("img/network/editIcon.png");
 }
 
-div.network-manipulationUI.edit.editmode {
+div.vis-network div.vis-edit-mode div.vis-button.vis-edit.vis-edit-mode {
   background-color: #fcfcfc;
-  border-style:solid;
-  border-width:1px;
-  border-color: #cccccc;
+  border: 1px solid #cccccc;
 }
 
-div.network-manipulationUI.connect {
+div.vis-network div.vis-manipulation div.vis-button.vis-connect {
   background-image: url("img/network/connectIcon.png");
 }
 
-div.network-manipulationUI.delete {
+div.vis-network div.vis-manipulation div.vis-button.vis-delete {
   background-image: url("img/network/deleteIcon.png");
 }
 /* top right bottom left */
-div.network-manipulationLabel {
-  margin: 0px 0px 0px 23px;
+div.vis-network div.vis-manipulation div.vis-label,
+div.vis-network div.vis-edit-mode div.vis-label {
+  margin: 0 0 0 23px;
   line-height: 25px;
 }
-div.network-seperatorLine {
+div.vis-network div.vis-manipulation div.vis-separator-line {
   display:inline-block;
   width:1px;
   height:20px;
   background-color: #bdbdbd;
-  margin: 5px 7px 0px 15px;
+  margin: 5px 7px 0 15px;
 }
 
+/* TODO: is this redundant?
 div.network-navigation_wrapper {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
-}
+}
+*/

lib/network/css/network-navigation.css

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

lib/network/css/network-tooltip.css

@@ -1,13 +1,18 @@
-div.network-tooltip {
+div.vis-network-tooltip {
   position: absolute;
   visibility: hidden;
   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/Canvas.js

@@ -13,6 +13,7 @@ let util = require('../../util');
 class Canvas {
   constructor(body) {
     this.body = body;
+    this.pixelRatio = 1;
 
     this.options = {};
     this.defaultOptions = {
@@ -21,6 +22,7 @@ class Canvas {
     }
     util.extend(this.options, this.defaultOptions);
 
+    // bind the events
     this.body.emitter.once("resize", (obj) => {
       if (obj.width !== 0) {
         this.body.view.translation.x = obj.width * 0.5;
@@ -31,28 +33,47 @@ class Canvas {
     });
     this.body.emitter.on("destroy", () => this.hammer.destroy());
 
+    // automatically adapt to a changing size of the browser.
     window.onresize = () => {this.setSize(); this.body.emitter.emit("_redraw");};
-
-    this.pixelRatio = 1;
   }
 
   setOptions(options) {
     if (options !== undefined) {
-      util.deepExtend(this.options, options);
+      if (options.width !== undefined) {this.options.width = this._prepareValue(options.width );}
+      if (options.height!== undefined) {this.options.height= this._prepareValue(options.height);}
     }
   }
 
-  create() {
+  _prepareValue(value) {
+    if (typeof value === 'number') {
+      return value + 'px';
+    }
+    else if (typeof value === 'string') {
+      if (value.indexOf('%') !== -1 || value.indexOf('px') !== -1) {
+        return value;
+      }
+      else if (value.indexOf('%') === -1) {
+        return value + 'px';
+      }
+    }
+    throw new Error('Could not use the value supplie for width or height:' + value);
+  }
+
+
+  /**
+   * Create the HTML
+   */
+  _create() {
     // remove all elements from the container element.
     while (this.body.container.hasChildNodes()) {
       this.body.container.removeChild(this.body.container.firstChild);
     }
 
     this.frame = document.createElement('div');
-    this.frame.className = 'vis network-frame';
+    this.frame.className = 'vis-network';
     this.frame.style.position = 'relative';
     this.frame.style.overflow = 'hidden';
-    this.frame.tabIndex = 900;
+    this.frame.tabIndex = 900; // tab index is required for keycharm to bind keystrokes to the div instead of the window
 
     //////////////////////////////////////////////////////////////////
 
@@ -132,6 +153,9 @@ class Canvas {
    *                         or '30%')
    */
   setSize(width = this.options.width, height = this.options.height) {
+    width = this._prepareValue(width);
+    height= this._prepareValue(height);
+
     let emitEvent = false;
     let oldWidth = this.frame.canvas.width;
     let oldHeight = this.frame.canvas.height;

lib/network/modules/CanvasRenderer.js

@@ -1,7 +1,3 @@
-/**
- * Created by Alex on 26-Feb-15.
- */
-
 if (typeof window !== 'undefined') {
   window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
   window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
@@ -40,7 +36,7 @@ class CanvasRenderer {
     this.body.emitter.on("_startRendering", () => {
       this.renderRequests += 1;
       this.renderingActive = true;
-      this.startRendering();
+      this._startRendering();
     });
     this.body.emitter.on("_stopRendering", () => {
       this.renderRequests -= 1;
@@ -63,14 +59,14 @@ class CanvasRenderer {
     }
   }
 
-  startRendering() {
+  _startRendering() {
     if (this.renderingActive === true) {
       if (!this.renderTimer) {
         if (this.requiresTimeout === true) {
-          this.renderTimer = window.setTimeout(this.renderStep.bind(this), this.simulationInterval); // wait this.renderTimeStep milliseconds and perform the animation step function
+          this.renderTimer = window.setTimeout(this._renderStep.bind(this), this.simulationInterval); // wait this.renderTimeStep milliseconds and perform the animation step function
         }
         else {
-          this.renderTimer = window.requestAnimationFrame(this.renderStep.bind(this)); // wait this.renderTimeStep milliseconds and perform the animation step function
+          this.renderTimer = window.requestAnimationFrame(this._renderStep.bind(this)); // wait this.renderTimeStep milliseconds and perform the animation step function
         }
       }
     }
@@ -79,20 +75,20 @@ class CanvasRenderer {
     }
   }
 
-  renderStep() {
+  _renderStep() {
     // reset the renderTimer so a new scheduled animation step can be set
     this.renderTimer = undefined;
 
     if (this.requiresTimeout === true) {
       // this schedules a new simulation step
-      this.startRendering();
+      this._startRendering();
     }
 
     this._redraw();
 
     if (this.requiresTimeout === false) {
       // this schedules a new simulation step
-      this.startRendering();
+      this._startRendering();
     }
   }
 

lib/network/modules/Clustering.js

@@ -1,9 +1,5 @@
-/**
- * Created by Alex on 24-Feb-15.
- */
-
 var util = require("../../util");
-import Cluster from './components/nodes/cluster'
+import Cluster from './components/nodes/Cluster'
 
 class ClusterEngine {
   constructor(body) {

lib/network/modules/ConfigurationSystem.js

@@ -1,13 +1,17 @@
-/**
- * Created by Alex on 3/26/2015.
- */
-
-
 var util = require('../../util');
 
 import  ColorPicker from './components/ColorPicker'
 
-
+/**
+ * The way this works is for all properties of this.possible options, you can supply the property name in any form to list the options.
+ * Boolean options are recognised as Boolean
+ * Number options should be written as array: [default value, min value, max value, stepsize]
+ * Colors should be written as array: ['color', '#ffffff']
+ * Strings with should be written as array: [option1, option2, option3, ..]
+ *
+ * The options are matched with their counterparts in each of the modules and the values used in the configuration are
+ *
+ */
 class ConfigurationSystem {
   constructor(network) {
     this.network = network;
@@ -62,6 +66,12 @@ class ConfigurationSystem {
             drawThreshold: [3, 0, 20, 1]
           }
         },
+        shadow:{
+          enabled: false,
+          size:[10, 0, 20, 1],
+          x:[5, -30, 30, 1],
+          y:[5, -30, 30, 1]
+        },
         shape: ['ellipse', 'box', 'circle', 'database', 'diamond', 'dot', 'square', 'star', 'text', 'triangle', 'triangleDown'],
         size: [25, 0, 200, 1]
       },
@@ -112,6 +122,12 @@ class ConfigurationSystem {
           }
         },
         selfReferenceSize: [20, 0, 200, 1],
+        shadow:{
+          enabled: false,
+          size:[10, 0, 20, 1],
+          x:[5, -30, 30, 1],
+          y:[5, -30, 30, 1]
+        },
         smooth: {
           enabled: true,
           dynamic: true,
@@ -135,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]},
@@ -244,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);
     }
   }
 
@@ -287,7 +295,7 @@ class ConfigurationSystem {
 
           // linebreak between categories
           if (counter > 0) {
-            this._makeEntree([]);
+            this._makeItem([]);
           }
           // a header for the category
           this._makeHeader(option);
@@ -307,7 +315,7 @@ class ConfigurationSystem {
     generateButton.onmouseout =  () => {generateButton.className = 'vis-network-configuration button';};
 
     this.optionsContainer = document.createElement('div');
-    this.optionsContainer.className = 'vis-network-configuration optionContainer';
+    this.optionsContainer.className = 'vis-network-configuration vis-option-container';
 
     this.domElements.push(this.optionsContainer);
     this.domElements.push(generateButton);
@@ -376,18 +384,18 @@ class ConfigurationSystem {
   }
 
   /**
-   * all option elements are wrapped in an entree
+   * all option elements are wrapped in an item
    * @param path
    * @param domElements
    * @private
    */
-  _makeEntree(path,...domElements) {
-    let entree = document.createElement('div');
-    entree.className = 'vis-network-configuration entree s' + path.length;
+  _makeItem(path,...domElements) {
+    let item = document.createElement('div');
+    item.className = 'vis-network-configuration item s' + path.length;
     domElements.forEach((element) => {
-      entree.appendChild(element);
+      item.appendChild(element);
     });
-    this.domElements.push(entree);
+    this.domElements.push(item);
   }
 
   /**
@@ -399,7 +407,7 @@ class ConfigurationSystem {
     let div = document.createElement('div');
     div.className = 'vis-network-configuration header';
     div.innerHTML = name;
-    this._makeEntree([],div);
+    this._makeItem([],div);
   }
 
   /**
@@ -454,7 +462,7 @@ class ConfigurationSystem {
     select.onchange = function () {me._update(this.value, path);};
 
     let label = this._makeLabel(path[path.length-1], path);
-    this._makeEntree(path, label, select);
+    this._makeItem(path, label, select);
   }
 
 
@@ -499,7 +507,7 @@ class ConfigurationSystem {
     range.oninput  = function () {input.value = this.value; };
 
     let label = this._makeLabel(path[path.length-1], path);
-    this._makeEntree(path, label, range, input);
+    this._makeItem(path, label, range, input);
   }
 
 
@@ -533,7 +541,7 @@ class ConfigurationSystem {
     checkbox.onchange = function() {me._update(this.checked, path)};
 
     let label = this._makeLabel(path[path.length-1], path);
-    this._makeEntree(path, label, checkbox);
+    this._makeItem(path, label, checkbox);
   }
 
 
@@ -563,7 +571,7 @@ class ConfigurationSystem {
     }
 
     let label = this._makeLabel(path[path.length-1], path);
-    this._makeEntree(path,label, div);
+    this._makeItem(path,label, div);
   }
 
 
@@ -591,7 +599,7 @@ class ConfigurationSystem {
 
 
   /**
-   * parse an object and draw the correct entrees
+   * parse an object and draw the correct items
    * @param obj
    * @param path
    * @private
@@ -628,7 +636,7 @@ class ConfigurationSystem {
               let enabledValue = this._getValue(enabledPath);
               if (enabledValue === true) {
                 let label = this._makeLabel(subObj, newPath, true);
-                this._makeEntree(newPath, label);
+                this._makeItem(newPath, label);
                 this._handleObject(item, newPath);
               }
               else {
@@ -637,7 +645,7 @@ class ConfigurationSystem {
             }
             else {
               let label = this._makeLabel(subObj, newPath, true);
-              this._makeEntree(newPath, label);
+              this._makeItem(newPath, label);
               this._handleObject(item, newPath);
             }
           }

lib/network/modules/EdgesHandler.js

@@ -1,13 +1,9 @@
-/**
- * Created by Alex on 3/4/2015.
- */
-
-
 var util = require("../../util");
 var DataSet = require('../../DataSet');
 var DataView = require('../../DataView');
 
-import Edge from "./components/Edge"
+import Edge  from "./components/Edge"
+import Label from "./components/shared/Label"
 
 class EdgesHandler {
   constructor(body, images, groups) {
@@ -84,6 +80,12 @@ class EdgesHandler {
         }
       },
       selfReferenceSize:20,
+      shadow:{
+        enabled: false,
+        size:10,
+        x:5,
+        y:5
+      },
       smooth: {
         enabled: true,
         dynamic: true,
@@ -93,7 +95,7 @@ class EdgesHandler {
       title:undefined,
       width: 1,
       widthSelectionMultiplier: 2,
-      value:1
+      value: undefined
     };
 
     util.extend(this.options, this.defaultOptions);
@@ -131,76 +133,11 @@ class EdgesHandler {
 
   setOptions(options) {
     if (options !== undefined) {
-      var fields = [
-        'font',
-        'from',
-        'hidden',
-        'hoverWidth',
-        'label',
-        'length',
-        'line',
-        'opacity',
-        'physics',
-        'selfReferenceSize',
-        'to',
-        'title',
-        'value',
-        'width',
-        'widthMin',
-        'widthMax',
-        'widthSelectionMultiplier'
-      ];
-      util.selectiveExtend(fields, this.options, options);
-      util.mergeOptions(this.options, options, 'smooth');
-      util.mergeOptions(this.options, options, 'dashes');
-
-      // set the scaling options
-      if (options.scaling !== undefined) {
-        if (options.scaling.min !== undefined) {this.options.scaling.min = options.scaling.min;}
-        if (options.scaling.max !== undefined) {this.options.scaling.max = options.scaling.max;}
-        util.mergeOptions(this.options.scaling, options.scaling, 'label');
-      }
-
-
-      // hanlde multiple input cases for arrows
-      if (options.arrows !== undefined) {
-        if (typeof options.arrows === 'string') {
-          let arrows = options.arrows.toLowerCase();
-          if (arrows.indexOf("to")     != -1) {this.options.arrows.to.enabled     = true;}
-          if (arrows.indexOf("middle") != -1) {this.options.arrows.middle.enabled = true;}
-          if (arrows.indexOf("from")   != -1) {this.options.arrows.from.enabled   = true;}
-        }
-        else if (typeof options.arrows === 'object') {
-          util.mergeOptions(this.options.arrows, options.arrows, 'to');
-          util.mergeOptions(this.options.arrows, options.arrows, 'middle');
-          util.mergeOptions(this.options.arrows, options.arrows, 'from');
-        }
-        else {
-          throw new Error("The arrow options can only be an object or a string. Refer to the documentation. You used:" + JSON.stringify(options.arrows));
-        }
-      }
-
+      // use the parser from the Edge class to fill in all shorthand notations
+      Edge.parseOptions(this.options, options);
 
       // hanlde multiple input cases for color
       if (options.color !== undefined) {
-        if (util.isString(options.color)) {
-          util.assignAllKeys(this.options.color, options.color);
-          this.options.color.inherit.enabled = false;
-        }
-        else {
-          if (typeof options.color === 'object') {
-            let colorsDefined = false;
-            if (options.color.color     !== undefined) {this.options.color.color     = options.color.color;     colorsDefined = true;}
-            if (options.color.highlight !== undefined) {this.options.color.highlight = options.color.highlight; colorsDefined = true;}
-            if (options.color.hover     !== undefined) {this.options.color.hover     = options.color.hover;     colorsDefined = true;}
-            if (options.color.opacity   !== undefined) {this.options.color.opacity   = options.color.opacity;}
-
-            if (options.color.inherit === undefined && colorsDefined === true) {
-              this.options.color.inherit.enabled = false;
-            }
-          }
-        }
-        util.mergeOptions(this.options.color, options.color, 'inherit');
         this.markAllEdgesAsDirty();
       }
 
@@ -215,18 +152,9 @@ class EdgesHandler {
       }
 
       // update fonts in all edges
-      if (options.font) {
-        if (typeof options.font === 'string') {
-          let optionsArray = options.font.split(" ");
-          this.options.font.size = optionsArray[0].replace("px",'');
-          this.options.font.face = optionsArray[1];
-          this.options.font.color = optionsArray[2];
-        }
-        else if (typeof options.font === 'object') {
-          this.options.font = util.bridgeObject(options.font);
-        }
-        this.options.font.size = Number(this.options.font.size);
-
+      if (options.font !== undefined) {
+        // use the parser from the Label class to fill in all shorthand notations
+        Label.parseOptions(this.options,options);
         for (let edgeId in this.body.edges) {
           if (this.body.edges.hasOwnProperty(edgeId)) {
             this.body.edges[edgeId].updateLabelModule();

lib/network/modules/InteractionHandler.js

@@ -1,12 +1,7 @@
-/**
- * Created by Alex on 2/27/2015.
- *
- */
-
 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) {
@@ -44,17 +39,8 @@ class InteractionHandler {
       dragView: true,
       zoomView: true,
       hoverEnabled: false,
-      showNavigationIcons: false,
-      tooltip: {
-        delay: 300,
-        fontColor: '#000000',
-        fontSize: 14, // px
-        fontFace: 'verdana',
-        color: {
-          border: '#666666',
-          background: '#FFFFC6'
-        }
-      },
+      navigationButtons: false,
+      tooltipDelay: 300,
       keyboard: {
         enabled: false,
         speed: {x: 10, y: 10, zoom: 0.02},
@@ -67,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.
@@ -105,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;
@@ -121,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);
+    this.checkSelectionChanges(pointer);
 
-    if (selected === true || (previouslySelected === true && selected === false)) { // select or unselect
-      this.body.emitter.emit('select', this.selectionHandler.getSelection());
-    }
-
-    this.selectionHandler._generateClickEvent("click",pointer);
+    this.selectionHandler._generateClickEvent('click',pointer);
   }
 
 
@@ -138,7 +119,7 @@ class InteractionHandler {
    */
   onDoubleTap(event) {
     let pointer = this.getPointer(event.center);
-    this.selectionHandler._generateClickEvent("doubleClick",pointer);
+    this.selectionHandler._generateClickEvent('doubleClick',pointer);
   }
 
 
@@ -150,13 +131,10 @@ class InteractionHandler {
   onHold(event) {
     let pointer = this.getPointer(event.center);
 
-    let selectionChanged = this.selectionHandler.selectAdditionalOnPoint(pointer);
+    this.checkSelectionChanges(pointer, true);
 
-    if (selectionChanged === true) { // select or longpress
-      this.body.emitter.emit('select', this.selectionHandler.getSelection());
-    }
-
-    this.selectionHandler._generateClickEvent("click",pointer);
+    this.selectionHandler._generateClickEvent('click',pointer);
+    this.selectionHandler._generateClickEvent('hold',pointer);
   }
 
 
@@ -166,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);
+    }
   }
 
 
@@ -190,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;
@@ -236,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;
@@ -259,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
@@ -273,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');
       }
     }
   }
@@ -292,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);
   }
 
 
@@ -361,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: '-'});
       }
     }
   }
@@ -451,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);
       }
     }
 
@@ -485,7 +511,7 @@ class InteractionHandler {
           }
         }
       }
-      this.body.emitter.emit("_requestRedraw");
+      this.body.emitter.emit('_requestRedraw');
     }
   }
 
@@ -511,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) {
@@ -554,7 +580,7 @@ class InteractionHandler {
 
       if (overlappingEdges.length > 0) {
         this.popupObj = edges[overlappingEdges[overlappingEdges.length - 1]];
-        popupType = "edge";
+        popupType = 'edge';
       }
     }
 
@@ -562,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;
@@ -591,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/LayoutEngine.js

@@ -1,7 +1,3 @@
-/**
- * Created by Alex on 3/3/2015.
- */
-
 var util = require('../../util');
 
 class LayoutEngine {

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();
@@ -403,7 +400,7 @@ class ManipulationSystem {
     // load the manipulator HTML elements. All styling done in css.
     if (this.manipulationDiv === undefined) {
       this.manipulationDiv = document.createElement('div');
-      this.manipulationDiv.className = 'network-manipulationDiv';
+      this.manipulationDiv.className = 'vis-manipulation';
       if (this.editMode === true) {
         this.manipulationDiv.style.display = "block";
       }
@@ -416,7 +413,7 @@ class ManipulationSystem {
     // container for the edit button.
     if (this.editModeDiv === undefined) {
       this.editModeDiv = document.createElement('div');
-      this.editModeDiv.className = 'network-manipulation-editMode';
+      this.editModeDiv.className = 'vis-edit-mode';
       if (this.editMode === true) {
         this.editModeDiv.style.display = "none";
       }
@@ -430,7 +427,7 @@ class ManipulationSystem {
     // container for the close div button
     if (this.closeDiv === undefined) {
       this.closeDiv = document.createElement('div');
-      this.closeDiv.className = 'network-manipulation-closeDiv';
+      this.closeDiv.className = 'vis-close';
       this.closeDiv.style.display = this.manipulationDiv.style.display;
       this.canvas.frame.appendChild(this.closeDiv);
     }
@@ -472,7 +469,7 @@ class ManipulationSystem {
 
     // create the contents for the editMode button
     let locale = this.options.locales[this.options.locale];
-    let button = this._createButton('editMode', 'network-manipulationUI edit editmode', locale['edit']);
+    let button = this._createButton('editMode', 'vis-button vis-edit vis-edit-mode', locale['edit']);
     this.editModeDiv.appendChild(button);
 
     // bind a hammer listener to the button, calling the function toggleEditMode.
@@ -545,9 +542,6 @@ class ManipulationSystem {
     this.manipulationDiv = undefined;
     this.editModeDiv = undefined;
     this.closeDiv = undefined;
-
-    // remove override
-    this.selectionHandler.forceSelectEdges = false;
   }
 
 
@@ -558,49 +552,49 @@ class ManipulationSystem {
    */
   _createSeperator(index = 1) {
     this.manipulationDOM['seperatorLineDiv' + index] = document.createElement('div');
-    this.manipulationDOM['seperatorLineDiv' + index].className = 'network-seperatorLine';
+    this.manipulationDOM['seperatorLineDiv' + index].className = 'vis-separator-line';
     this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv' + index]);
   }
 
   // ----------------------    DOM functions for buttons    --------------------------//
 
   _createAddNodeButton(locale) {
-    let button = this._createButton('addNode', 'network-manipulationUI add', locale['addNode']);
+    let button = this._createButton('addNode', 'vis-button vis-add', locale['addNode']);
     this.manipulationDiv.appendChild(button);
     this._bindHammerToDiv(button, this.addNodeMode.bind(this));
   }
 
   _createAddEdgeButton(locale) {
-    let button = this._createButton('addEdge', 'network-manipulationUI connect',  locale['addEdge']);
+    let button = this._createButton('addEdge', 'vis-button vis-connect',  locale['addEdge']);
     this.manipulationDiv.appendChild(button);
     this._bindHammerToDiv(button, this.addEdgeMode.bind(this));
   }
 
   _createEditNodeButton(locale) {
-    let button = this._createButton('editNode', 'network-manipulationUI edit', locale['editNode']);
+    let button = this._createButton('editNode', 'vis-button vis-edit', locale['editNode']);
     this.manipulationDiv.appendChild(button);
     this._bindHammerToDiv(button, this.editNode.bind(this));
   }
 
   _createEditEdgeButton(locale) {
-    let button = this._createButton('editEdge', 'network-manipulationUI edit',  locale['editEdge']);
+    let button = this._createButton('editEdge', 'vis-button vis-edit',  locale['editEdge']);
     this.manipulationDiv.appendChild(button);
     this._bindHammerToDiv(button, this.editEdgeMode.bind(this));
   }
 
   _createDeleteButton(locale) {
-    let button = this._createButton('delete', 'network-manipulationUI delete', locale['del']);
+    let button = this._createButton('delete', 'vis-button vis-delete', locale['del']);
     this.manipulationDiv.appendChild(button);
     this._bindHammerToDiv(button, this.deleteSelected.bind(this));
   }
 
   _createBackButton(locale) {
-    let button = this._createButton('back', 'network-manipulationUI back', locale['back']);
+    let button = this._createButton('back', 'vis-button vis-back', locale['back']);
     this.manipulationDiv.appendChild(button);
     this._bindHammerToDiv(button, this.showManipulatorToolbar.bind(this));
   }
 
-  _createButton(id, className, label, labelClassName = 'network-manipulationLabel') {
+  _createButton(id, className, label, labelClassName = 'vis-label') {
     this.manipulationDOM[id+"Div"] = document.createElement('div');
     this.manipulationDOM[id+"Div"].className = className;
     this.manipulationDOM[id+"Label"] = document.createElement('div');
@@ -612,7 +606,7 @@ class ManipulationSystem {
 
   _createDescription(label) {
     this.manipulationDiv.appendChild(
-      this._createButton('description', 'network-manipulationUI none', label)
+      this._createButton('description', 'vis-button vis-none', label)
     );
   }
 

lib/network/modules/NodesHandler.js

@@ -1,12 +1,9 @@
-/**
- * Created by Alex on 3/4/2015.
- */
-
 var util = require("../../util");
 var DataSet = require('../../DataSet');
 var DataView = require('../../DataView');
 
-import Node from "./components/Node";
+import Node  from "./components/Node";
+import Label from "./components/shared/Label";
 
 class NodesHandler {
   constructor(body, images, groups, layoutEngine) {
@@ -29,6 +26,7 @@ class NodesHandler {
     this.defaultOptions = {
       borderWidth: 1,
       borderWidthSelected: undefined,
+      brokenImage:undefined,
       color: {
         border: '#2B7CE9',
         background: '#97C2FC',
@@ -71,7 +69,7 @@ class NodesHandler {
         min: 10,
         max: 30,
         label: {
-          enabled: true,
+          enabled: false,
           min: 14,
           max: 30,
           maxVisible: 30,
@@ -87,9 +85,16 @@ class NodesHandler {
           }
         }
       },
+      shadow:{
+        enabled: false,
+        size:10,
+        x:5,
+        y:5
+      },
       shape: 'ellipse',
       size: 25,
-      value: 1,
+      title: undefined,
+      value: undefined,
       x: undefined,
       y: undefined
     };
@@ -98,17 +103,8 @@ class NodesHandler {
   }
 
   setOptions(options) {
-    if (options) {
-      util.selectiveNotDeepExtend(['color'], this.options, options);
-      if (options.color) {
-        let parsedColor = util.parseColor(options.color);
-        if (parsedColor.border !== undefined) {this.options.color.border = parsedColor.border;}
-        if (parsedColor.background !== undefined) {this.options.color.background = parsedColor.background;}
-        if (parsedColor.highlight.border !== undefined) {this.options.color.highlight.border = parsedColor.highlight.border;}
-        if (parsedColor.highlight.background !== undefined) {this.options.color.highlight.background = parsedColor.highlight.background;}
-        if (parsedColor.hover.border !== undefined) {this.options.color.hover.border = parsedColor.hover.border;}
-        if (parsedColor.hover.background !== undefined) {this.options.color.hover.background = parsedColor.hover.background;}
-      }
+    if (options !== undefined) {
+      Node.parseOptions(this.options, options);
 
       // update the shape in all nodes
       if (options.shape !== undefined) {
@@ -121,6 +117,7 @@ class NodesHandler {
 
       // update the shape size in all nodes
       if (options.font !== undefined) {
+        Label.parseOptions(this.options.font,options);
         for (let nodeId in this.body.nodes) {
           if (this.body.nodes.hasOwnProperty(nodeId)) {
             this.body.nodes[nodeId].updateLabelModule();

lib/network/modules/PhysicsEngine.js

@@ -1,7 +1,3 @@
-/**
- * Created by Alex on 2/23/2015.
- */
-
 import BarnesHutSolver from './components/physics/BarnesHutSolver';
 import Repulsion from './components/physics/RepulsionSolver';
 import HierarchicalRepulsion from './components/physics/HierarchicalRepulsionSolver';

lib/network/modules/SelectionHandler.js

@@ -1,16 +1,11 @@
-/**
- * Created by Alex on 2/27/2015.
- */
-
-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 = {
@@ -39,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);
       }
@@ -52,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;
@@ -71,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);
         }
       }
@@ -110,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)) {
@@ -130,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,
@@ -149,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
@@ -170,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)) {
@@ -187,7 +186,7 @@ class SelectionHandler {
    * @private
    */
   _getAllEdgesOverlappingWith(object) {
-    var overlappingEdges = [];
+    let overlappingEdges = [];
     this._getEdgesOverlappingWith(object,overlappingEdges);
     return overlappingEdges;
   }
@@ -202,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]];
@@ -266,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();
       }
@@ -288,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;
       }
@@ -304,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];
       }
@@ -319,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];
       }
@@ -335,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;
       }
@@ -352,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;
       }
@@ -373,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;
       }
@@ -394,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;
@@ -411,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);
     }
@@ -425,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);
     }
@@ -440,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);
     }
@@ -495,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};
   }
 
@@ -507,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);
         }
@@ -525,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);
         }
@@ -543,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');
   }
 
 
@@ -571,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');
   }
 
   /**
@@ -596,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

@@ -1,7 +1,3 @@
-/**
- * Created by Alex on 26-Feb-15.
- */
-
 var util = require('../../util');
 
 class View {
@@ -33,7 +29,6 @@ class View {
   }
 
 
-  // zoomExtent
   /**
    * Find the center position of the network
    * @private
@@ -97,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;
@@ -327,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/colorPicker.js → lib/network/modules/components/ColorPicker.js

@@ -1,7 +1,3 @@
-/**
- * Created by Alex on 3/27/2015.
- */
-
 let Hammer = require('../../../module/hammer');
 let hammerUtil = require('../../../hammerUtil');
 let util = require('../../../util');
@@ -301,14 +297,12 @@ class ColorPicker {
    * @private
    */
   _create() {
-    let visPrefix = 'vis-network-'
-
     this.frame = document.createElement('div');
-    this.frame.className = visPrefix + 'colorPicker-frame';
+    this.frame.className = 'vis-color-picker';
 
     this.colorPickerDiv = document.createElement('div');
     this.colorPickerSelector = document.createElement('div');
-    this.colorPickerSelector.className = visPrefix + 'colorPicker-selector';
+    this.colorPickerSelector.className = 'vis-selector';
     this.colorPickerDiv.appendChild(this.colorPickerSelector);
 
     this.colorPickerCanvas = document.createElement('canvas');
@@ -333,73 +327,73 @@ class ColorPicker {
       this.colorPickerCanvas.getContext("2d").setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0);
     }
 
-    this.colorPickerDiv.className = visPrefix + 'colorPicker-color';
+    this.colorPickerDiv.className = 'vis-color';
 
     this.opacityDiv = document.createElement('div');
-    this.opacityDiv.className = visPrefix + 'colorPicker-opacity';
+    this.opacityDiv.className = 'vis-opacity';
 
     this.brightnessDiv = document.createElement('div');
-    this.brightnessDiv.className = visPrefix + 'colorPicker-brightness';
+    this.brightnessDiv.className = 'vis-brightness';
 
     this.arrowDiv = document.createElement('div');
-    this.arrowDiv.className = visPrefix + 'colorPicker-arrowDiv';
+    this.arrowDiv.className = 'vis-arrow';
 
     this.opacityRange = document.createElement('input');
     this.opacityRange.type = 'range';
     this.opacityRange.min = '0';
     this.opacityRange.max = '100';
     this.opacityRange.value = '100';
-    this.opacityRange.className = visPrefix + 'configuration range colorPicker';
+    this.opacityRange.className = 'vis-range';
 
     this.brightnessRange = document.createElement('input');
     this.brightnessRange.type = 'range';
     this.brightnessRange.min = '0';
     this.brightnessRange.max = '100';
     this.brightnessRange.value = '100';
-    this.brightnessRange.className = visPrefix + 'configuration range colorPicker';
+    this.brightnessRange.className = 'vis-range';
 
     this.opacityDiv.appendChild(this.opacityRange);
     this.brightnessDiv.appendChild(this.brightnessRange);
 
     var me = this;
-    this.opacityRange.onchange = function () {me._setOpacity(this.value);}
-    this.opacityRange.oninput  = function () {me._setOpacity(this.value);}
-    this.brightnessRange.onchange = function () {me._setBrightness(this.value);}
-    this.brightnessRange.oninput  = function () {me._setBrightness(this.value);}
+    this.opacityRange.onchange = function () {me._setOpacity(this.value);};
+    this.opacityRange.oninput  = function () {me._setOpacity(this.value);};
+    this.brightnessRange.onchange = function () {me._setBrightness(this.value);};
+    this.brightnessRange.oninput  = function () {me._setBrightness(this.value);};
 
     this.brightnessLabel = document.createElement("div");
-    this.brightnessLabel.className = visPrefix + "colorPicker-label brightness";
+    this.brightnessLabel.className = "vis-label vis-brightness";
     this.brightnessLabel.innerHTML = 'brightness:';
 
     this.opacityLabel = document.createElement("div");
-    this.opacityLabel.className = visPrefix + "colorPicker-label opacity";
+    this.opacityLabel.className = "vis-label vis-opacity";
     this.opacityLabel.innerHTML = 'opacity:';
 
     this.newColorDiv = document.createElement("div");
-    this.newColorDiv.className = visPrefix + "colorPicker-newColor";
+    this.newColorDiv.className = "vis-new-color";
     this.newColorDiv.innerHTML = 'new';
 
     this.initialColorDiv = document.createElement("div");
-    this.initialColorDiv.className = visPrefix + "colorPicker-initialColor";
+    this.initialColorDiv.className = "vis-initial-color";
     this.initialColorDiv.innerHTML = 'initial';
 
     this.cancelButton = document.createElement("div");
-    this.cancelButton.className = visPrefix + "colorPicker-button cancel";
+    this.cancelButton.className = "vis-button vis-cancel";
     this.cancelButton.innerHTML = 'cancel';
     this.cancelButton.onclick = this._hide.bind(this, false);
 
     this.applyButton = document.createElement("div");
-    this.applyButton.className = visPrefix + "colorPicker-button apply";
+    this.applyButton.className = "vis-button vis-apply";
     this.applyButton.innerHTML = 'apply';
     this.applyButton.onclick = this._apply.bind(this);
 
     this.saveButton = document.createElement("div");
-    this.saveButton.className = visPrefix + "colorPicker-button save";
+    this.saveButton.className = "vis-button vis-save";
     this.saveButton.innerHTML = 'save';
     this.saveButton.onclick = this._save.bind(this);
 
     this.loadButton = document.createElement("div");
-    this.loadButton.className = visPrefix + "colorPicker-button load";
+    this.loadButton.className = "vis-button vis-load";
     this.loadButton.innerHTML = 'load last';
     this.loadButton.onclick = this._loadLast.bind(this);
 

lib/network/modules/components/Edge.js

@@ -1,10 +1,10 @@
 var util = require('../../../util');
 
-
-import Label              from './unified/Label.js'
+import Label              from './shared/Label'
 import BezierEdgeDynamic  from './edges/BezierEdgeDynamic'
 import BezierEdgeStatic   from './edges/BezierEdgeStatic'
 import StraightEdge       from './edges/StraightEdge'
+
 /**
  * @class Edge
  *
@@ -32,12 +32,14 @@ class Edge {
     this.id = undefined;
     this.fromId = undefined;
     this.toId = undefined;
-    this.value = undefined;
     this.selected = false;
     this.hover = false;
     this.labelDirty = true;
     this.colorDirty = true;
 
+    this.baseWidth = this.options.width;
+    this.baseFontSize = this.options.font.size;
+
     this.from = undefined; // a node
     this.to   = undefined; // a node
 
@@ -62,6 +64,24 @@ class Edge {
     }
     this.colorDirty = true;
 
+    Edge.parseOptions(this.options, options);
+
+    if (options.id !== undefined)   {this.id = options.id;}
+    if (options.from !== undefined) {this.fromId = options.from;}
+    if (options.to !== undefined)   {this.toId = options.to;}
+    if (options.title !== undefined) {this.title = options.title;}
+
+    // A node is connected when it has a from and to node that both exist in the network.body.nodes.
+    this.connect();
+
+    // update label Module
+    this.updateLabelModule();
+
+    let dataChanged = this.updateEdgeType();
+    return dataChanged;
+  }
+
+  static parseOptions(parentOptions, newOptions) {
     var fields = [
       'id',
       'font',
@@ -82,75 +102,67 @@ class Edge {
       'widthMax',
       'widthSelectionMultiplier'
     ];
-    util.selectiveDeepExtend(fields, this.options, options);
-    
-    util.mergeOptions(this.options, options, 'smooth');
-    util.mergeOptions(this.options, options, 'dashes');
 
-    if (options.id !== undefined)   {this.id = options.id;}
-    if (options.from !== undefined) {this.fromId = options.from;}
-    if (options.to !== undefined)   {this.toId = options.to;}
-    if (options.title !== undefined) {this.title = options.title;}
-    if (options.value !== undefined) {this.value = options.value;}
+    // only deep extend the items in the field array. These do not have shorthand.
+    util.selectiveDeepExtend(fields, parentOptions, newOptions);
 
+    util.mergeOptions(parentOptions, newOptions, 'smooth');
+    util.mergeOptions(parentOptions, newOptions, 'dashes');
+    util.mergeOptions(parentOptions, newOptions, 'shadow');
 
-    // set the scaling options
-    if (options.scaling !== undefined) {
-      if (options.scaling.min !== undefined) {this.options.scaling.min = options.scaling.min;}
-      if (options.scaling.max !== undefined) {this.options.scaling.max = options.scaling.max;}
-      util.mergeOptions(this.options.scaling, options.scaling, 'label');
+    // set the scaling newOptions
+    if (newOptions.scaling !== undefined) {
+      if (newOptions.scaling.min !== undefined) {parentOptions.scaling.min = newOptions.scaling.min;}
+      if (newOptions.scaling.max !== undefined) {parentOptions.scaling.max = newOptions.scaling.max;}
+      util.mergeOptions(parentOptions.scaling, newOptions.scaling, 'label');
     }
 
     // hanlde multiple input cases for arrows
-    if (options.arrows !== undefined) {
-      if (typeof options.arrows === 'string') {
-        let arrows = options.arrows.toLowerCase();
-        if (arrows.indexOf("to")     != -1) {this.options.arrows.to.enabled     = true;}
-        if (arrows.indexOf("middle") != -1) {this.options.arrows.middle.enabled = true;}
-        if (arrows.indexOf("from")   != -1) {this.options.arrows.from.enabled   = true;}
+    if (newOptions.arrows !== undefined) {
+      if (typeof newOptions.arrows === 'string') {
+        let arrows = newOptions.arrows.toLowerCase();
+        if (arrows.indexOf("to")     != -1) {parentOptions.arrows.to.enabled     = true;}
+        if (arrows.indexOf("middle") != -1) {parentOptions.arrows.middle.enabled = true;}
+        if (arrows.indexOf("from")   != -1) {parentOptions.arrows.from.enabled   = true;}
       }
-      else if (typeof options.arrows === 'object') {
-        util.mergeOptions(this.options.arrows, options.arrows, 'to');
-        util.mergeOptions(this.options.arrows, options.arrows, 'middle');
-        util.mergeOptions(this.options.arrows, options.arrows, 'from');
+      else if (typeof newOptions.arrows === 'object') {
+        util.mergeOptions(parentOptions.arrows, newOptions.arrows, 'to');
+        util.mergeOptions(parentOptions.arrows, newOptions.arrows, 'middle');
+        util.mergeOptions(parentOptions.arrows, newOptions.arrows, 'from');
       }
       else {
-        throw new Error("The arrow options can only be an object or a string. Refer to the documentation. You used:" + JSON.stringify(options.arrows));
+        throw new Error("The arrow newOptions can only be an object or a string. Refer to the documentation. You used:" + JSON.stringify(newOptions.arrows));
       }
     }
 
     // hanlde multiple input cases for color
-    if (options.color !== undefined) {
-      if (util.isString(options.color)) {
-        util.assignAllKeys(this.options.color, options.color);
-        this.options.color.inherit.enabled = false;
+    if (newOptions.color !== undefined) {
+      if (util.isString(newOptions.color)) {
+        parentOptions.color.color     = newOptions.color;
+        parentOptions.color.highlight = newOptions.color;
+        parentOptions.color.hover     = newOptions.color;
+        parentOptions.color.inherit.enabled = false;
       }
       else {
         let colorsDefined = false;
-        if (options.color.color     !== undefined) {this.options.color.color     = options.color.color;     colorsDefined = true;}
-        if (options.color.highlight !== undefined) {this.options.color.highlight = options.color.highlight; colorsDefined = true;}
-        if (options.color.hover     !== undefined) {this.options.color.hover     = options.color.hover;     colorsDefined = true;}
-        if (options.color.opacity   !== undefined) {this.options.color.opacity   = options.color.opacity;}
+        if (newOptions.color.color     !== undefined) {parentOptions.color.color     = newOptions.color.color;     colorsDefined = true;}
+        if (newOptions.color.highlight !== undefined) {parentOptions.color.highlight = newOptions.color.highlight; colorsDefined = true;}
+        if (newOptions.color.hover     !== undefined) {parentOptions.color.hover     = newOptions.color.hover;     colorsDefined = true;}
+        if (newOptions.color.opacity   !== undefined) {parentOptions.color.opacity   = newOptions.color.opacity;}
 
-        if (options.color.inherit === undefined && colorsDefined === true) {
-          this.options.color.inherit.enabled = false;
+        if (newOptions.color.inherit === undefined && colorsDefined === true) {
+          parentOptions.color.inherit.enabled = false;
         }
       }
-      util.mergeOptions(this.options.color, options.color, 'inherit');
+      util.mergeOptions(parentOptions.color, newOptions.color, 'inherit');
     }
-
-    // A node is connected when it has a from and to node that both exist in the network.body.nodes.
-    this.connect();
-
-    // update label Module
-    this.updateLabelModule();
-
-    let dataChanged = this.updateEdgeType();
-    return dataChanged;
   }
 
   updateLabelModule() {
     this.labelModule.setOptions(this.options);
+    if (this.labelModule.baseSize !== undefined) {
+      this.baseFontSize = this.labelModule.baseSize;
+    }
   }
 
   updateEdgeType() {
@@ -250,7 +262,7 @@ class Edge {
    *                           has been set.
    */
   getTitle() {
-    return typeof this.title === "function" ? this.title() : this.title;
+    return this.title;
   }
 
 
@@ -269,7 +281,7 @@ class Edge {
    * @return {Number} value
    */
   getValue() {
-    return this.value;
+    return this.options.value;
   }
 
 
@@ -281,8 +293,8 @@ class Edge {
    * @param total
    */
   setValueRange(min, max, total) {
-    if (this.value !== undefined) {
-      var scale = this.options.scaling.customScalingFunction(min, max, total, this.value);
+    if (this.options.value !== undefined) {
+      var scale = this.options.scaling.customScalingFunction(min, max, total, this.options.value);
       var widthDiff = this.options.scaling.max - this.options.scaling.min;
       if (this.options.scaling.label.enabled === true) {
         var fontDiff = this.options.scaling.label.max - this.options.scaling.label.min;
@@ -290,6 +302,10 @@ class Edge {
       }
       this.options.width = this.options.scaling.min + scale * widthDiff;
     }
+    else {
+      this.options.width = this.baseWidth;
+      this.options.font.size = this.baseFontSize;
+    }
   }
 
 

lib/network/modules/components/NavigationHandler.js

@@ -31,7 +31,7 @@ class NavigationHandler {
   }
 
   create() {
-    if (this.options.showNavigationIcons === true) {
+    if (this.options.navigationButtons === true) {
       if (this.iconsCreated === false) {
         this.loadNavigationElements();
       }
@@ -78,11 +78,12 @@ class NavigationHandler {
     var navigationDivActions = ['_moveUp','_moveDown','_moveLeft','_moveRight','_zoomIn','_zoomOut','_zoomExtent'];
 
     this.navigationDOM['wrapper'] = document.createElement('div');
+    this.navigationDOM['wrapper'].className = 'vis-navigation';
     this.canvas.frame.appendChild(this.navigationDOM['wrapper']);
 
     for (var i = 0; i < navigationDivs.length; i++) {
       this.navigationDOM[navigationDivs[i]] = document.createElement('div');
-      this.navigationDOM[navigationDivs[i]].className = 'network-navigation ' + navigationDivs[i];
+      this.navigationDOM[navigationDivs[i]].className = 'vis-button vis-' + navigationDivs[i];
       this.navigationDOM['wrapper'].appendChild(this.navigationDOM[navigationDivs[i]]);
 
       var hammer = new Hammer(this.navigationDOM[navigationDivs[i]]);
@@ -146,8 +147,8 @@ class NavigationHandler {
   _moveDown() {this.body.view.translation.y -= this.options.keyboard.speed.y;}
   _moveLeft() {this.body.view.translation.x += this.options.keyboard.speed.x;}
   _moveRight(){this.body.view.translation.x -= this.options.keyboard.speed.x;}
-  _zoomIn()   {this.body.view.scale         += this.options.keyboard.speed.zoom;}
-  _zoomOut()  {this.body.view.scale         -= this.options.keyboard.speed.zoom;}
+  _zoomIn()   {this.body.view.scale         *= 1+this.options.keyboard.speed.zoom;}
+  _zoomOut()  {this.body.view.scale         /= 1+this.options.keyboard.speed.zoom;}
 
 
   /**

lib/network/modules/components/Node.js

@@ -1,6 +1,6 @@
 var util = require('../../../util');
 
-import Label from './unified/Label'
+import Label from './shared/Label'
 
 import Box           from './nodes/shapes/Box'
 import Circle        from './nodes/shapes/Circle'
@@ -57,6 +57,8 @@ class Node {
     // state options
     this.x = undefined;
     this.y = undefined;
+    this.baseSize = this.options.size;
+    this.baseFontSize = this.options.font.size;
     this.predefinedPosition = false; // used to check if initial zoomExtent should just take the range or approximate
     this.selected = false;
     this.hover = false;
@@ -107,28 +109,6 @@ class Node {
       return;
     }
 
-    var fields = [
-      'borderWidth',
-      'borderWidthSelected',
-      'brokenImage',
-      'customScalingFunction',
-      'font',
-      'hidden',
-      'icon',
-      'id',
-      'image',
-      'label',
-      'level',
-      'physics',
-      'shape',
-      'size',
-      'title',
-      'value',
-      'x',
-      'y'
-    ];
-    util.selectiveDeepExtend(fields, this.options, options);
-
     // basic options
     if (options.id !== undefined)    {this.id = options.id;}
 
@@ -138,7 +118,10 @@ class Node {
 
     if (options.x !== undefined)     {this.x = options.x; this.predefinedPosition = true;}
     if (options.y !== undefined)     {this.y = options.y; this.predefinedPosition = true;}
-    if (options.value !== undefined) {this.value = options.value;}
+    if (options.size !== undefined)  {this.baseSize = options.size;}
+
+    // this transforms all shorthands into fully defined options
+    Node.parseOptions(this.options,options);
 
     // copy group options
     if (typeof options.group === 'number' || (typeof options.group === 'string' && options.group != '')) {
@@ -147,11 +130,8 @@ class Node {
       // the color object needs to be completely defined. Since groups can partially overwrite the colors, we parse it again, just in case.
       this.options.color = util.parseColor(this.options.color);
     }
-    // individual shape options
-    if (options.color !== undefined) {
-      this.options.color = util.parseColor(options.color);
-    }
 
+    // load the images
     if (this.options.image !== undefined && this.options.image != "") {
       if (this.imagelist) {
         this.imageObj = this.imagelist.load(this.options.image, this.options.brokenImage);
@@ -161,31 +141,73 @@ class Node {
       }
     }
 
-    if (options.fixed !== undefined) {
-      if (typeof options.fixed === 'boolean') {
-        this.options.fixed.x = true;
-        this.options.fixed.y = true;
-      }
-      else {
-        if (options.fixed.x !== undefined && typeof options.fixed.x === 'boolean') {
-          this.options.fixed.x = options.fixed.x;
-        }
-        if (options.fixed.y !== undefined && typeof options.fixed.y === 'boolean') {
-          this.options.fixed.y = options.fixed.y;
-        }
-      }
-    }
-
     this.updateShape();
     this.updateLabelModule();
 
     // reset the size of the node, this can be changed
     this._reset();
+  }
+
+
+  /**
+   * This process all possible shorthands in the new options and makes sure that the parentOptions are fully defined.
+   * Static so it can also be used by the handler.
+   * @param parentOptions
+   * @param newOptions
+   */
+  static parseOptions(parentOptions, newOptions) {
+    var fields = [
+      'borderWidth',
+      'borderWidthSelected',
+      'brokenImage',
+      'customScalingFunction',
+      'font',
+      'hidden',
+      'icon',
+      'id',
+      'image',
+      'label',
+      'level',
+      'physics',
+      'shape',
+      'size',
+      'title',
+      'value',
+      'x',
+      'y'
+    ];
+    util.selectiveDeepExtend(fields, parentOptions, newOptions);
+
+    // merge the shadow options into the parent.
+    util.mergeOptions(parentOptions, newOptions, 'shadow');
+
+    // individual shape newOptions
+    if (newOptions.color !== undefined) {
+      let parsedColor = util.parseColor(newOptions.color);
+      util.fillIfDefined(parentOptions.color, parsedColor);
+    }
 
+    if (newOptions.fixed !== undefined) {
+      if (typeof newOptions.fixed === 'boolean') {
+        parentOptions.fixed.x = true;
+        parentOptions.fixed.y = true;
+      }
+      else {
+        if (newOptions.fixed.x !== undefined && typeof newOptions.fixed.x === 'boolean') {
+          parentOptions.fixed.x = newOptions.fixed.x;
+        }
+        if (newOptions.fixed.y !== undefined && typeof newOptions.fixed.y === 'boolean') {
+          parentOptions.fixed.y = newOptions.fixed.y;
+        }
+      }
+    }
   }
 
   updateLabelModule() {
     this.labelModule.setOptions(this.options);
+    if (this.labelModule.baseSize !== undefined) {
+      this.baseFontSize = this.labelModule.baseSize;
+    }
   }
 
   updateShape() {
@@ -276,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;
   }
 
 
@@ -314,7 +336,7 @@ class Node {
    * @return {Number} value
    */
   getValue() {
-    return this.value;
+    return this.options.value;
   }
 
 
@@ -325,8 +347,8 @@ class Node {
    * @param {Number} max
    */
   setValueRange(min, max, total) {
-    if (this.value !== undefined) {
-      var scale = this.options.scaling.customScalingFunction(min, max, total, this.value);
+    if (this.options.value !== undefined) {
+      var scale = this.options.scaling.customScalingFunction(min, max, total, this.options.value);
       var sizeDiff = this.options.scaling.max - this.options.scaling.min;
       if (this.options.scaling.label.enabled === true) {
         var fontDiff = this.options.scaling.label.max - this.options.scaling.label.min;
@@ -334,6 +356,10 @@ class Node {
       }
       this.options.size = this.options.scaling.min + scale * sizeDiff;
     }
+    else {
+      this.options.size = this.baseSize;
+      this.options.font.size = this.baseFontSize;
+    }
   }
 
 

lib/network/modules/components/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 = '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.frame.className = 'vis-network-tooltip';
     this.container.appendChild(this.frame);
   }
 
@@ -86,14 +47,14 @@ class Popup {
 
   /**
    * Show the popup window
-   * @param {boolean} show    Optional. Show or hide the window
+   * @param {boolean} [doShow]    Show or hide the window
    */
-  show(show) {
-    if (show === undefined) {
-      show = true;
+  show(doShow) {
+    if (doShow === undefined) {
+      doShow = true;
     }
 
-    if (show === true) {
+    if (doShow === true) {
       var height = this.frame.clientHeight;
       var width = this.frame.clientWidth;
       var maxHeight = this.frame.parentNode.clientHeight;

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

@@ -1,12 +1,8 @@
-/**
- * Created by Alex on 3/20/2015.
- */
-
 import BezierEdgeBase from './util/BezierEdgeBase'
 
 class BezierEdgeDynamic extends BezierEdgeBase {
   constructor(options, body, labelModule) {
-    this.via = undefined;
+    //this.via = undefined; // Here for completeness but not allowed to defined before super() is invoked.
     super(options, body, labelModule); // --> this calls the setOptions below
   }
 
@@ -73,7 +69,10 @@ class BezierEdgeDynamic extends BezierEdgeBase {
     ctx.beginPath();
     ctx.moveTo(this.from.x, this.from.y);
     ctx.quadraticCurveTo(this.via.x, this.via.y, this.to.x, this.to.y);
+    // draw shadow if enabled
+    this.enableShadow(ctx);
     ctx.stroke();
+    this.disableShadow(ctx);
     return this.via;
   }
 

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

@@ -1,7 +1,3 @@
-/**
- * Created by Alex on 3/20/2015.
- */
-
 import BezierEdgeBase from './util/BezierEdgeBase'
 
 class BezierEdgeStatic extends BezierEdgeBase {
@@ -21,19 +17,22 @@ class BezierEdgeStatic extends BezierEdgeBase {
     // draw a straight line
     ctx.beginPath();
     ctx.moveTo(this.from.x, this.from.y);
-    var via = this._getViaCoordinates();
+    let via = this._getViaCoordinates();
+    let returnValue = via;
 
     // fallback to normal straight edges
     if (via.x === undefined) {
       ctx.lineTo(this.to.x, this.to.y);
-      ctx.stroke();
-      return undefined;
+      returnValue = undefined;
     }
     else {
       ctx.quadraticCurveTo(via.x, via.y, this.to.x, this.to.y);
-      ctx.stroke();
-      return via;
     }
+    // draw shadow if enabled
+    this.enableShadow(ctx);
+    ctx.stroke();
+    this.disableShadow(ctx);
+    return returnValue;
   }
 
   _getViaCoordinates() {

lib/network/modules/components/edges/straightEdge.js → lib/network/modules/components/edges/StraightEdge.js

@@ -1,7 +1,3 @@
-/**
- * Created by Alex on 3/20/2015.
- */
-
 import EdgeBase from './util/EdgeBase'
 
 class StraightEdge extends EdgeBase {
@@ -22,7 +18,10 @@ class StraightEdge extends EdgeBase {
     ctx.beginPath();
     ctx.moveTo(this.from.x, this.from.y);
     ctx.lineTo(this.to.x, this.to.y);
+    // draw shadow if enabled
+    this.enableShadow(ctx);
     ctx.stroke();
+    this.disableShadow(ctx);
     return undefined;
   }
 

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

@@ -1,7 +1,3 @@
-/**
- * Created by Alex on 3/20/2015.
- */
-
 import EdgeBase from './EdgeBase'
 
 class BezierEdgeBase extends EdgeBase {

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

@@ -1,6 +1,3 @@
-/**
- * Created by Alex on 3/20/2015.
- */
 let util = require("../../../../../util")
 
 class EdgeBase {
@@ -94,7 +91,13 @@ class EdgeBase {
         ctx.moveTo(this.from.x, this.from.y);
         ctx.lineTo(this.to.x, this.to.y);
       }
+      // draw shadow if enabled
+      this.enableShadow(ctx);
+
       ctx.stroke();
+
+      // disable shadows for other elements.
+      this.disableShadow(ctx);
     }
     return via;
   }
@@ -313,10 +316,16 @@ class EdgeBase {
    * @private
    */
   _circle(ctx, x, y, radius) {
+    // draw shadow if enabled
+    this.enableShadow(ctx);
+
     // draw a circle
     ctx.beginPath();
     ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
     ctx.stroke();
+
+    // disable shadows for other elements.
+    this.disableShadow(ctx);
   }
 
 
@@ -442,7 +451,13 @@ class EdgeBase {
       // draw arrow at the end of the line
       length = (10 + 5 * this.options.width) * scaleFactor;
       ctx.arrow(arrowPos.x, arrowPos.y, angle, length);
+
+      // draw shadow if enabled
+      this.enableShadow(ctx);
       ctx.fill();
+
+      // disable shadows for other elements.
+      this.disableShadow(ctx);
       ctx.stroke();
     }
     else {
@@ -466,11 +481,35 @@ class EdgeBase {
       // draw the arrowhead
       let length = (10 + 5 * this.options.width) * scaleFactor;
       ctx.arrow(point.x, point.y, angle, length);
+
+      // draw shadow if enabled
+      this.enableShadow(ctx);
       ctx.fill();
+
+      // disable shadows for other elements.
+      this.disableShadow(ctx);
       ctx.stroke();
     }
   }
 
+
+  enableShadow(ctx) {
+    if (this.options.shadow.enabled === true) {
+      ctx.shadowColor = 'rgba(0,0,0,0.5)';
+      ctx.shadowBlur = this.options.shadow.size;
+      ctx.shadowOffsetX = this.options.shadow.x;
+      ctx.shadowOffsetY = this.options.shadow.y;
+    }
+  }
+
+  disableShadow(ctx) {
+    if (this.options.shadow.enabled === true) {
+      ctx.shadowColor = 'rgba(0,0,0,0)';
+      ctx.shadowBlur = 0;
+      ctx.shadowOffsetX = 0;
+      ctx.shadowOffsetY = 0;
+    }
+  }
 }
 
 export default EdgeBase;

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

@@ -1,6 +1,3 @@
-/**
- * Created by Alex on 3/18/2015.
- */
 'use strict';
 
 import NodeBase from '../util/NodeBase'
@@ -10,17 +7,17 @@ class Box extends NodeBase {
     super(options,body,labelModule);
   }
 
-  resize(ctx) {
+  resize(ctx, selected) {
     if (this.width === undefined) {
       var margin = 5;
-      var textSize = this.labelModule.getTextSize(ctx,this.selected);
+      var textSize = this.labelModule.getTextSize(ctx,selected);
       this.width = textSize.width + 2 * margin;
       this.height = textSize.height + 2 * margin;
     }
   }
 
   draw(ctx, x, y, selected, hover) {
-    this.resize(ctx);
+    this.resize(ctx, selected);
     this.left = x - this.width / 2;
     this.top = y - this.height / 2;
 
@@ -35,7 +32,14 @@ class Box extends NodeBase {
     ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
 
     ctx.roundRect(this.left, this.top, this.width, this.height, this.options.size);
+
+    // draw shadow if enabled
+    this.enableShadow(ctx);
     ctx.fill();
+
+    // disable shadows for other elements.
+    this.disableShadow(ctx);
+
     ctx.stroke();
 
     this.boundingBox.top = this.top;

lib/network/modules/components/nodes/shapes/circle.js → lib/network/modules/components/nodes/shapes/Circle.js

@@ -1,6 +1,3 @@
-/**
- * Created by Alex on 3/18/2015.
- */
 'use strict';
 
 import CircleImageBase from '../util/CircleImageBase'

lib/network/modules/components/nodes/shapes/circularImage.js → lib/network/modules/components/nodes/shapes/CircularImage.js

@@ -1,6 +1,3 @@
-/**
- * Created by Alex on 3/18/2015.
- */
 'use strict';
 
 

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

@@ -1,6 +1,3 @@
-/**
- * Created by Alex on 3/18/2015.
- */
 'use strict';
 
 import NodeBase from '../util/NodeBase'
@@ -35,7 +32,14 @@ class Database extends NodeBase {
 
     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);
+
+    // draw shadow if enabled
+    this.enableShadow(ctx);
     ctx.fill();
+
+    // disable shadows for other elements.
+    this.disableShadow(ctx);
+
     ctx.stroke();
 
     this.boundingBox.top = this.top;

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

@@ -1,6 +1,3 @@
-/**
- * Created by Alex on 3/18/2015.
- */
 'use strict';
 
 import ShapeBase from '../util/ShapeBase'

lib/network/modules/components/nodes/shapes/dot.js → lib/network/modules/components/nodes/shapes/Dot.js

@@ -1,6 +1,3 @@
-/**
- * Created by Alex on 3/18/2015.
- */
 'use strict';
 
 import ShapeBase from '../util/ShapeBase'

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

@@ -1,6 +1,3 @@
-/**
- * Created by Alex on 3/18/2015.
- */
 'use strict';
 
 import NodeBase from '../util/NodeBase'
@@ -38,7 +35,14 @@ class Ellipse extends NodeBase {
 
     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);
+
+    // draw shadow if enabled
+    this.enableShadow(ctx);
     ctx.fill();
+
+    // disable shadows for other elements.
+    this.disableShadow(ctx);
+
     ctx.stroke();
 
     this.boundingBox.left = this.left;
@@ -47,7 +51,9 @@ class Ellipse extends NodeBase {
     this.boundingBox.right = this.left + this.width;
 
 
+
     this.labelModule.draw(ctx, x, y, selected);
+
   }
 
   distanceToBorder(ctx, angle) {

lib/network/modules/components/nodes/shapes/empty.js → lib/network/modules/components/nodes/shapes/Empty.js

@@ -1,6 +1,3 @@
-/**
- * Created by Alex on 3/18/2015.
- */
 'use strict';
 
 import NodeBase from '../util/NodeBase'

lib/network/modules/components/nodes/shapes/icon.js → lib/network/modules/components/nodes/shapes/Icon.js

@@ -1,6 +1,3 @@
-/**
- * Created by Alex on 3/18/2015.
- */
 'use strict';
 
 import NodeBase from '../util/NodeBase'
@@ -56,7 +53,14 @@ class Icon extends NodeBase {
       ctx.fillStyle = this.options.icon.color || "black";
       ctx.textAlign = "center";
       ctx.textBaseline = "middle";
+
+
+      // draw shadow if enabled
+      this.enableShadow(ctx);
       ctx.fillText(this.options.icon.code, x, y);
+
+      // disable shadows for other elements.
+      this.disableShadow(ctx);
     }
   }
 

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

@@ -1,6 +1,3 @@
-/**
- * Created by Alex on 3/18/2015.
- */
 'use strict';
 
 import CircleImageBase from '../util/CircleImageBase'

lib/network/modules/components/nodes/shapes/square.js → lib/network/modules/components/nodes/shapes/Square.js

@@ -1,6 +1,3 @@
-/**
- * Created by Alex on 3/18/2015.
- */
 'use strict';
 
 import ShapeBase from '../util/ShapeBase'

lib/network/modules/components/nodes/shapes/star.js → lib/network/modules/components/nodes/shapes/Star.js

@@ -1,6 +1,3 @@
-/**
- * Created by Alex on 3/18/2015.
- */
 'use strict';
 
 import ShapeBase from '../util/ShapeBase'

lib/network/modules/components/nodes/shapes/text.js → lib/network/modules/components/nodes/shapes/Text.js

@@ -1,6 +1,3 @@
-/**
- * Created by Alex on 3/18/2015.
- */
 'use strict';
 
 import NodeBase from '../util/NodeBase'
@@ -24,8 +21,13 @@ class Text extends NodeBase {
     this.left = x - this.width / 2;
     this.top = y - this.height / 2;
 
+    // draw shadow if enabled
+    this.enableShadow(ctx);
     this.labelModule.draw(ctx, x, y, selected || hover);
 
+    // disable shadows for other elements.
+    this.disableShadow(ctx);
+
     this.boundingBox.top = this.top;
     this.boundingBox.left = this.left;
     this.boundingBox.right = this.left + this.width;

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

@@ -1,6 +1,3 @@
-/**
- * Created by Alex on 3/18/2015.
- */
 'use strict';
 
 import ShapeBase from '../util/ShapeBase'

lib/network/modules/components/nodes/shapes/triangleDown.js → lib/network/modules/components/nodes/shapes/TriangleDown.js

@@ -1,6 +1,3 @@
-/**
- * Created by Alex on 3/18/2015.
- */
 'use strict';
 
 import ShapeBase from '../util/ShapeBase'

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

@@ -1,6 +1,3 @@
-/**
- * Created by Alex on 3/19/2015.
- */
 import NodeBase from '../util/NodeBase'
 
 class CircleImageBase extends NodeBase {
@@ -42,7 +39,14 @@ class CircleImageBase extends NodeBase {
 
     ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
     ctx.circle(x, y, size);
+
+    // draw shadow if enabled
+    this.enableShadow(ctx);
     ctx.fill();
+
+    // disable shadows for other elements.
+    this.disableShadow(ctx);
+
     ctx.stroke();
   }
 
@@ -50,7 +54,13 @@ class CircleImageBase extends NodeBase {
     if (this.imageObj.width != 0) {
       // draw the image
       ctx.globalAlpha = 1.0;
+
+      // draw shadow if enabled
+      this.enableShadow(ctx);
       ctx.drawImage(this.imageObj, this.left, this.top, this.width, this.height);
+
+      // disable shadows for other elements.
+      this.disableShadow(ctx);
     }
   }
 

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

@@ -1,7 +1,3 @@
-/**
- * Created by Alex on 3/19/2015.
- */
-
 class NodeBase {
   constructor(options, body, labelModule) {
     this.body = body;
@@ -23,6 +19,24 @@ class NodeBase {
         Math.abs(this.width / 2 / Math.cos(angle)),
         Math.abs(this.height / 2 / Math.sin(angle))) + borderWidth;
   }
+
+  enableShadow(ctx) {
+    if (this.options.shadow.enabled === true) {
+      ctx.shadowColor = 'rgba(0,0,0,0.5)';
+      ctx.shadowBlur = this.options.shadow.size;
+      ctx.shadowOffsetX = this.options.shadow.x;
+      ctx.shadowOffsetY = this.options.shadow.y;
+    }
+  }
+
+  disableShadow(ctx) {
+    if (this.options.shadow.enabled === true) {
+      ctx.shadowColor = 'rgba(0,0,0,0)';
+      ctx.shadowBlur = 0;
+      ctx.shadowOffsetX = 0;
+      ctx.shadowOffsetY = 0;
+    }
+  }
 }
 
 export default NodeBase;

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

@@ -1,6 +1,3 @@
-/**
- * Created by Alex on 3/19/2015.
- */
 import NodeBase from '../util/NodeBase'
 
 class ShapeBase extends NodeBase {
@@ -31,7 +28,14 @@ class ShapeBase extends NodeBase {
     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);
+
+    // draw shadow if enabled
+    this.enableShadow(ctx);
     ctx.fill();
+
+    // disable shadows for other elements.
+    this.disableShadow(ctx);
+
     ctx.stroke();
 
     this.boundingBox.top = y - this.options.size;

lib/network/modules/components/physics/BarnesHutSolver.js

@@ -1,7 +1,3 @@
-/**
- * Created by Alex on 2/23/2015.
- */
-
 class BarnesHutSolver {
   constructor(body, physicsBody, options) {
     this.body = body;

lib/network/modules/components/physics/CentralGravitySolver.js

@@ -1,7 +1,3 @@
-/**
- * Created by Alex on 2/23/2015.
- */
-
 class CentralGravitySolver {
   constructor(body, physicsBody, options) {
     this.body = body;

lib/network/modules/components/physics/HierarchicalRepulsionSolver.js

@@ -1,7 +1,3 @@
-/**
- * Created by Alex on 2/23/2015.
- */
-
 class HierarchicalRepulsionSolver {
   constructor(body, physicsBody, options) {
     this.body = body;

lib/network/modules/components/physics/HierarchicalSpringSolver.js

@@ -1,7 +1,3 @@
-/**
- * Created by Alex on 2/25/2015.
- */
-
 class HierarchicalSpringSolver {
   constructor(body, physicsBody, options) {
     this.body = body;

lib/network/modules/components/physics/RepulsionSolver.js

@@ -1,7 +1,3 @@
-/**
- * Created by Alex on 2/23/2015.
- */
-
 class RepulsionSolver {
   constructor(body, physicsBody, options) {
     this.body = body;

lib/network/modules/components/physics/SpringSolver.js

@@ -1,7 +1,3 @@
-/**
- * Created by Alex on 2/23/2015.
- */
-
 class SpringSolver {
   constructor(body, physicsBody, options) {
     this.body = body;

lib/network/modules/components/unified/label.js → lib/network/modules/components/shared/Label.js

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

lib/timeline/Core.js

@@ -51,24 +51,24 @@ Core.prototype._create = function (container) {
   this.dom.shadowTopRight       = document.createElement('div');
   this.dom.shadowBottomRight    = document.createElement('div');
 
-  this.dom.root.className                 = 'vis timeline root';
-  this.dom.background.className           = 'vispanel background';
-  this.dom.backgroundVertical.className   = 'vispanel background vertical';
-  this.dom.backgroundHorizontal.className = 'vispanel background horizontal';
-  this.dom.centerContainer.className      = 'vispanel center';
-  this.dom.leftContainer.className        = 'vispanel left';
-  this.dom.rightContainer.className       = 'vispanel right';
-  this.dom.top.className                  = 'vispanel top';
-  this.dom.bottom.className               = 'vispanel bottom';
-  this.dom.left.className                 = 'content';
-  this.dom.center.className               = 'content';
-  this.dom.right.className                = 'content';
-  this.dom.shadowTop.className            = 'shadow top';
-  this.dom.shadowBottom.className         = 'shadow bottom';
-  this.dom.shadowTopLeft.className        = 'shadow top';
-  this.dom.shadowBottomLeft.className     = 'shadow bottom';
-  this.dom.shadowTopRight.className       = 'shadow top';
-  this.dom.shadowBottomRight.className    = 'shadow bottom';
+  this.dom.root.className                 = 'vis-timeline';
+  this.dom.background.className           = 'vis-panel vis-background';
+  this.dom.backgroundVertical.className   = 'vis-panel vis-background vis-vertical';
+  this.dom.backgroundHorizontal.className = 'vis-panel vis-background vis-horizontal';
+  this.dom.centerContainer.className      = 'vis-panel vis-center';
+  this.dom.leftContainer.className        = 'vis-panel vis-left';
+  this.dom.rightContainer.className       = 'vis-panel vis-right';
+  this.dom.top.className                  = 'vis-panel vis-top';
+  this.dom.bottom.className               = 'vis-panel vis-bottom';
+  this.dom.left.className                 = 'vis-content';
+  this.dom.center.className               = 'vis-content';
+  this.dom.right.className                = 'vis-content';
+  this.dom.shadowTop.className            = 'vis-shadow vis-top';
+  this.dom.shadowBottom.className         = 'vis-shadow vis-bottom';
+  this.dom.shadowTopLeft.className        = 'vis-shadow vis-top';
+  this.dom.shadowBottomLeft.className     = 'vis-shadow vis-bottom';
+  this.dom.shadowTopRight.className       = 'vis-shadow vis-top';
+  this.dom.shadowBottomRight.className    = 'vis-shadow vis-bottom';
 
   this.dom.root.appendChild(this.dom.background);
   this.dom.root.appendChild(this.dom.backgroundVertical);
@@ -587,12 +587,12 @@ Core.prototype._redraw = function() {
 
   // update class names
   if (options.orientation == 'top') {
-    util.addClassName(dom.root, 'top');
-    util.removeClassName(dom.root, 'bottom');
+    util.addClassName(dom.root, 'vis-top');
+    util.removeClassName(dom.root, 'vis-bottom');
   }
   else {
-    util.removeClassName(dom.root, 'top');
-    util.addClassName(dom.root, 'bottom');
+    util.removeClassName(dom.root, 'vis-top');
+    util.addClassName(dom.root, 'vis-bottom');
   }
 
   // update root width and height options

lib/timeline/DateUtil.js

@@ -1,6 +1,3 @@
-/**
- * Created by Alex on 10/3/2014.
- */
 var moment = require('../module/moment');
 
 

lib/timeline/Range.js

@@ -368,8 +368,6 @@ Range.prototype._onDragStart = function(event) {
   if (this.body.dom.root) {
     this.body.dom.root.style.cursor = 'move';
   }
-
-  event.preventDefault();
 };
 
 /**
@@ -421,8 +419,6 @@ Range.prototype._onDrag = function (event) {
     end:   new Date(this.end),
     byUser: true
   });
-
-  event.preventDefault();
 };
 
 /**
@@ -565,8 +561,6 @@ Range.prototype._onPinch = function (event) {
 
   this.startToFront = false; // revert to default
   this.endToFront = true; // revert to default
-
-  event.preventDefault();
 };
 
 /**

lib/timeline/component/CurrentTime.js

@@ -37,7 +37,7 @@ CurrentTime.prototype = new Component();
  */
 CurrentTime.prototype._create = function() {
   var bar = document.createElement('div');
-  bar.className = 'currenttime';
+  bar.className = 'vis-current-time';
   bar.style.position = 'absolute';
   bar.style.top = '0px';
   bar.style.height = '100%';

lib/timeline/component/CustomTime.js

@@ -64,7 +64,7 @@ CustomTime.prototype.setOptions = function(options) {
  */
 CustomTime.prototype._create = function() {
   var bar = document.createElement('div');
-  bar.className = 'customtime';
+  bar.className = 'vis-custom-time';
   bar.style.position = 'absolute';
   bar.style.top = '0px';
   bar.style.height = '100%';
@@ -83,9 +83,10 @@ CustomTime.prototype._create = function() {
   this.hammer.on('panstart', this._onDragStart.bind(this));
   this.hammer.on('panmove',  this._onDrag.bind(this));
   this.hammer.on('panend',   this._onDragEnd.bind(this));
-  this.hammer.on('pan',   function (event) {
-    event.preventDefault();
-  });
+  // TODO: cleanup
+  //this.hammer.on('pan',   function (event) {
+  //  event.preventDefault();
+  //});
 };
 
 /**
@@ -162,7 +163,6 @@ CustomTime.prototype._onDragStart = function(event) {
   this.eventParams.customTime = this.customTime;
 
   event.stopPropagation();
-  event.preventDefault();
 };
 
 /**
@@ -185,7 +185,6 @@ CustomTime.prototype._onDrag = function (event) {
   });
 
   event.stopPropagation();
-  event.preventDefault();
 };
 
 /**
@@ -203,7 +202,6 @@ CustomTime.prototype._onDragEnd = function (event) {
   });
 
   event.stopPropagation();
-  event.preventDefault();
 };
 
 module.exports = CustomTime;

lib/timeline/component/DataAxis.js

@@ -285,7 +285,7 @@ DataAxis.prototype.redraw = function () {
     var frame = this.dom.frame;
 
     // update classname
-    frame.className = 'dataaxis';
+    frame.className = 'vis-data-axis';
 
     // calculate character width and height
     this._calculateCharSize();
@@ -416,18 +416,18 @@ DataAxis.prototype._redrawLabels = function () {
     var isMajor = step.isMajor();
 
     if (this.options['showMinorLabels'] && isMajor == false || this.master == false && this.options['showMinorLabels'] == true) {
-      this._redrawLabel(y - 2, step.getCurrent(decimals), orientation, 'yAxis minor', this.props.minorCharHeight);
+      this._redrawLabel(y - 2, step.getCurrent(decimals), orientation, 'vis-y-axis vis-minor', this.props.minorCharHeight);
     }
 
     if (isMajor && this.options['showMajorLabels'] && this.master == true ||
         this.options['showMinorLabels'] == false && this.master == false && isMajor == true) {
       if (y >= 0) {
-        this._redrawLabel(y - 2, step.getCurrent(decimals), orientation, 'yAxis major', this.props.majorCharHeight);
+        this._redrawLabel(y - 2, step.getCurrent(decimals), orientation, 'vis-y-axis vis-major', this.props.majorCharHeight);
       }
-      this._redrawLine(y, orientation, 'grid horizontal major', this.options.majorLinesOffset, this.props.majorLineWidth);
+      this._redrawLine(y, orientation, 'vis-grid vis-horizontal vis-major', this.options.majorLinesOffset, this.props.majorLineWidth);
     }
     else {
-      this._redrawLine(y, orientation, 'grid horizontal minor', this.options.minorLinesOffset, this.props.minorLineWidth);
+      this._redrawLine(y, orientation, 'vis-grid vis-horizontal vis-minor', this.options.minorLinesOffset, this.props.minorLineWidth);
     }
 
     if (this.master == true && step.current == 0) {
@@ -554,7 +554,7 @@ DataAxis.prototype._redrawTitle = function (orientation) {
   // Check if the title is defined for this axes
   if (this.options.title[orientation] !== undefined && this.options.title[orientation].text !== undefined) {
     var title = DOMutil.getDOMElement('div', this.DOMelements.title, this.dom.frame);
-    title.className = 'yAxis title ' + orientation;
+    title.className = 'vis-y-axis vis-title vis-' + orientation;
     title.innerHTML = this.options.title[orientation].text;
 
     // Add style - if provided
@@ -589,7 +589,7 @@ DataAxis.prototype._calculateCharSize = function () {
   if (!('minorCharHeight' in this.props)) {
     var textMinor = document.createTextNode('0');
     var measureCharMinor = document.createElement('div');
-    measureCharMinor.className = 'yAxis minor measure';
+    measureCharMinor.className = 'vis-y-axis vis-minor vis-measure';
     measureCharMinor.appendChild(textMinor);
     this.dom.frame.appendChild(measureCharMinor);
 
@@ -602,7 +602,7 @@ DataAxis.prototype._calculateCharSize = function () {
   if (!('majorCharHeight' in this.props)) {
     var textMajor = document.createTextNode('0');
     var measureCharMajor = document.createElement('div');
-    measureCharMajor.className = 'yAxis major measure';
+    measureCharMajor.className = 'vis-y-axis vis-major vis-measure';
     measureCharMajor.appendChild(textMajor);
     this.dom.frame.appendChild(measureCharMajor);
 
@@ -615,7 +615,7 @@ DataAxis.prototype._calculateCharSize = function () {
   if (!('titleCharHeight' in this.props)) {
     var textTitle = document.createTextNode('0');
     var measureCharTitle = document.createElement('div');
-    measureCharTitle.className = 'yAxis title measure';
+    measureCharTitle.className = 'vis-y-axis vis-title vis-measure';
     measureCharTitle.appendChild(textTitle);
     this.dom.frame.appendChild(measureCharTitle);
 

lib/timeline/component/GraphGroup.js

@@ -106,7 +106,7 @@ GraphGroup.prototype.setOptions = function(options) {
 GraphGroup.prototype.update = function(group) {
   this.group = group;
   this.content = group.content || 'graph';
-  this.className = group.className || this.className || "graphGroup" + this.groupsUsingDefaultStyles[0] % 10;
+  this.className = group.className || this.className || 'vis-graph-group' + this.groupsUsingDefaultStyles[0] % 10;
   this.visible = group.visible === undefined ? true : group.visible;
   this.style = group.style;
   this.setOptions(group.options);
@@ -132,13 +132,13 @@ GraphGroup.prototype.drawIcon = function(x, y, JSONcontainer, SVGcontainer, icon
   outline.setAttributeNS(null, "y", y - fillHeight);
   outline.setAttributeNS(null, "width", iconWidth);
   outline.setAttributeNS(null, "height", 2*fillHeight);
-  outline.setAttributeNS(null, "class", "outline");
+  outline.setAttributeNS(null, "class", "vis-outline");
 
   if (this.options.style == 'line') {
     path = DOMutil.getSVGElement("path", JSONcontainer, SVGcontainer);
     path.setAttributeNS(null, "class", this.className);
     if(this.style !== undefined) {
-      path.setAttributeNS(null, "style", this.style);
+      path.setAttributeNS(null, "style", 'vis-' + this.style);
     }
 
     path.setAttributeNS(null, "d", "M" + x + ","+y+" L" + (x + iconWidth) + ","+y+"");
@@ -154,7 +154,7 @@ GraphGroup.prototype.drawIcon = function(x, y, JSONcontainer, SVGcontainer, icon
           "L"+ (x + iconWidth) + "," + (y + fillHeight) +
           "L"+ (x + iconWidth) + ","+y);
       }
-      fillPath.setAttributeNS(null, "class", this.className + " iconFill");
+      fillPath.setAttributeNS(null, "class", this.className + " vis-icon-fill");
     }
 
     if (this.options.drawPoints.enabled == true) {
@@ -168,8 +168,8 @@ GraphGroup.prototype.drawIcon = function(x, y, JSONcontainer, SVGcontainer, icon
 
     var offset = Math.round((iconWidth - (2 * barWidth))/3);
 
-    DOMutil.drawBar(x + 0.5*barWidth + offset    , y + fillHeight - bar1Height - 1, barWidth, bar1Height, this.className + ' bar', JSONcontainer, SVGcontainer);
-    DOMutil.drawBar(x + 1.5*barWidth + offset + 2, y + fillHeight - bar2Height - 1, barWidth, bar2Height, this.className + ' bar', JSONcontainer, SVGcontainer);
+    DOMutil.drawBar(x + 0.5*barWidth + offset    , y + fillHeight - bar1Height - 1, barWidth, bar1Height, this.className + ' vis-bar', JSONcontainer, SVGcontainer);
+    DOMutil.drawBar(x + 1.5*barWidth + offset + 2, y + fillHeight - bar2Height - 1, barWidth, bar2Height, this.className + ' vis-bar', JSONcontainer, SVGcontainer);
   }
 };
 

lib/timeline/component/Group.js

@@ -47,30 +47,30 @@ function Group (groupId, data, itemSet) {
  */
 Group.prototype._create = function() {
   var label = document.createElement('div');
-  label.className = 'vlabel';
+  label.className = 'vis-label';
   this.dom.label = label;
 
   var inner = document.createElement('div');
-  inner.className = 'inner';
+  inner.className = 'vis-inner';
   label.appendChild(inner);
   this.dom.inner = inner;
 
   var foreground = document.createElement('div');
-  foreground.className = 'group';
+  foreground.className = 'vis-group';
   foreground['timeline-group'] = this;
   this.dom.foreground = foreground;
 
   this.dom.background = document.createElement('div');
-  this.dom.background.className = 'group';
+  this.dom.background.className = 'vis-group';
 
   this.dom.axis = document.createElement('div');
-  this.dom.axis.className = 'group';
+  this.dom.axis.className = 'vis-group';
 
   // create a hidden marker to detect when the Timelines container is attached
   // to the DOM, or the style of a parent of the Timeline is changed from
   // display:none is changed to visible.
   this.dom.marker = document.createElement('div');
-  this.dom.marker.style.visibility = 'hidden'; // TODO: ask jos why this is not none?
+  this.dom.marker.style.visibility = 'hidden';
   this.dom.marker.innerHTML = '?';
   this.dom.background.appendChild(this.dom.marker);
 };
@@ -96,10 +96,10 @@ Group.prototype.setData = function(data) {
   this.dom.label.title = data && data.title || '';
 
   if (!this.dom.inner.firstChild) {
-    util.addClassName(this.dom.inner, 'hidden');
+    util.addClassName(this.dom.inner, 'vis-hidden');
   }
   else {
-    util.removeClassName(this.dom.inner, 'hidden');
+    util.removeClassName(this.dom.inner, 'vis-hidden');
   }
 
   // update className
@@ -120,11 +120,11 @@ Group.prototype.setData = function(data) {
 
   // update style
   if (this.style) {
-    util.removeCssText(this.dom.label, this.style);
+    util.removeCssText(this.dom.label, 'vis-' + this.style);
     this.style = null;
   }
   if (data && data.style) {
-    util.addCssText(this.dom.label, data.style);
+    util.addCssText(this.dom.label, 'vis-' + data.style);
     this.style = data.style;
   }
 };

lib/timeline/component/ItemSet.js

@@ -146,30 +146,30 @@ ItemSet.types = {
  */
 ItemSet.prototype._create = function(){
   var frame = document.createElement('div');
-  frame.className = 'itemset';
+  frame.className = 'vis-itemset';
   frame['timeline-itemset'] = this;
   this.dom.frame = frame;
 
   // create background panel
   var background = document.createElement('div');
-  background.className = 'background';
+  background.className = 'vis-background';
   frame.appendChild(background);
   this.dom.background = background;
 
   // create foreground panel
   var foreground = document.createElement('div');
-  foreground.className = 'foreground';
+  foreground.className = 'vis-foreground';
   frame.appendChild(foreground);
   this.dom.foreground = foreground;
 
   // create axis panel
   var axis = document.createElement('div');
-  axis.className = 'axis';
+  axis.className = 'vis-axis';
   this.dom.axis = axis;
 
   // create labelset
   var labelSet = document.createElement('div');
-  labelSet.className = 'labelset';
+  labelSet.className = 'vis-labelset';
   this.dom.labelSet = labelSet;
 
   // create ungrouped Group
@@ -504,7 +504,7 @@ ItemSet.prototype.redraw = function() {
   this.props.left = this.body.domProps.left.width + this.body.domProps.border.left;
 
   // update class name
-  frame.className = 'itemset' + (editable ? ' editable' : '');
+  frame.className = 'vis-itemset' + (editable ? ' vis-editable' : '');
 
   // reorder the groups (if needed)
   resized = this._orderGroups() || resized;
@@ -829,7 +829,7 @@ ItemSet.prototype._onUpdate = function(ids) {
       else if (type == 'rangeoverflow') {
         // TODO: deprecated since version 2.1.0 (or 3.0.0?). cleanup some day
         throw new TypeError('Item type "rangeoverflow" is deprecated. Use css styling instead: ' +
-            '.vis.timeline .item.range .content {overflow: visible;}');
+            '.vis-item.vis-range .vis-item-content {overflow: visible;}');
       }
       else {
         throw new TypeError('Unknown item type "' + type + '"');
@@ -1167,7 +1167,6 @@ ItemSet.prototype._onDragStart = function (event) {
     }
 
     event.stopPropagation();
-    event.preventDefault();
   }
 };
 
@@ -1177,8 +1176,6 @@ ItemSet.prototype._onDragStart = function (event) {
  * @private
  */
 ItemSet.prototype._onDrag = function (event) {
-  event.preventDefault();
-
   if (this.touchParams.itemProps) {
     var me = this;
     var snap = this.options.snap || null;

lib/timeline/component/Legend.js

@@ -62,13 +62,13 @@ Legend.prototype.removeGroup = function(label) {
 
 Legend.prototype._create = function() {
   this.dom.frame = document.createElement('div');
-  this.dom.frame.className = 'legend';
+  this.dom.frame.className = 'vis-legend';
   this.dom.frame.style.position = "absolute";
   this.dom.frame.style.top = "10px";
   this.dom.frame.style.display = "block";
 
   this.dom.textArea = document.createElement('div');
-  this.dom.textArea.className = 'legendText';
+  this.dom.textArea.className = 'vis-legend-text';
   this.dom.textArea.style.position = "relative";
   this.dom.textArea.style.top = "0px";
 

lib/timeline/component/LineGraph.js

@@ -160,7 +160,7 @@ LineGraph.prototype = new Component();
  */
 LineGraph.prototype._create = function(){
   var frame = document.createElement('div');
-  frame.className = 'LineGraph';
+  frame.className = 'vis-line-graph';
   this.dom.frame = frame;
 
   // create svg element for graph drawing.

lib/timeline/component/TimeAxis.js

@@ -94,8 +94,8 @@ TimeAxis.prototype._create = function() {
   this.dom.foreground = document.createElement('div');
   this.dom.background = document.createElement('div');
 
-  this.dom.foreground.className = 'timeaxis foreground';
-  this.dom.background.className = 'timeaxis background';
+  this.dom.foreground.className = 'vis-time-axis vis-foreground';
+  this.dom.background.className = 'vis-time-axis vis-background';
 };
 
 /**
@@ -300,7 +300,7 @@ TimeAxis.prototype._repaintMinorText = function (x, text, orientation, className
 
   label.style.top = (orientation == 'top') ? (this.props.majorLabelHeight + 'px') : '0';
   label.style.left = x + 'px';
-  label.className = 'text minor ' + className;
+  label.className = 'vis-text vis-minor ' + className;
   //label.title = title;  // TODO: this is a heavy operation
 };
 
@@ -326,7 +326,7 @@ TimeAxis.prototype._repaintMajorText = function (x, text, orientation, className
   this.dom.majorTexts.push(label);
 
   label.childNodes[0].nodeValue = text;
-  label.className = 'text major ' + className;
+  label.className = 'vis-text vis-major ' + className;
   //label.title = title; // TODO: this is a heavy operation
 
   label.style.top = (orientation == 'top') ? '0' : (this.props.minorLabelHeight  + 'px');
@@ -361,7 +361,7 @@ TimeAxis.prototype._repaintMinorLine = function (x, orientation, className) {
   line.style.height = props.minorLineHeight + 'px';
   line.style.left = (x - props.minorLineWidth / 2) + 'px';
 
-  line.className = 'grid vertical minor ' + className;
+  line.className = 'vis-grid vis-vertical vis-minor ' + className;
 
   return line;
 };
@@ -394,7 +394,7 @@ TimeAxis.prototype._repaintMajorLine = function (x, orientation, className) {
   line.style.left = (x - props.majorLineWidth / 2) + 'px';
   line.style.height = props.majorLineHeight + 'px';
 
-  line.className = 'grid vertical major ' + className;
+  line.className = 'vis-grid vis-vertical vis-major ' + className;
 
   return line;
 };
@@ -411,7 +411,7 @@ TimeAxis.prototype._calculateCharSize = function () {
   // determine the char width and height on the minor axis
   if (!this.dom.measureCharMinor) {
     this.dom.measureCharMinor = document.createElement('DIV');
-    this.dom.measureCharMinor.className = 'text minor measure';
+    this.dom.measureCharMinor.className = 'vis-text vis-minor vis-measure';
     this.dom.measureCharMinor.style.position = 'absolute';
 
     this.dom.measureCharMinor.appendChild(document.createTextNode('0'));
@@ -423,7 +423,7 @@ TimeAxis.prototype._calculateCharSize = function () {
   // determine the char width and height on the major axis
   if (!this.dom.measureCharMajor) {
     this.dom.measureCharMajor = document.createElement('DIV');
-    this.dom.measureCharMajor.className = 'text major measure';
+    this.dom.measureCharMajor.className = 'vis-text vis-major vis-measure';
     this.dom.measureCharMajor.style.position = 'absolute';
 
     this.dom.measureCharMajor.appendChild(document.createTextNode('0'));

lib/timeline/component/css/animation.css

@@ -1,18 +1,18 @@
-.vis.timeline.root {
+.vis-timeline {
   /*
   -webkit-transition: height .4s ease-in-out;
   transition:         height .4s ease-in-out;
   */
 }
 
-.vis.timeline .vispanel {
+.vis-panel {
   /*
   -webkit-transition: height .4s ease-in-out, top .4s ease-in-out;
   transition:         height .4s ease-in-out, top .4s ease-in-out;
   */
 }
 
-.vis.timeline .axis {
+.vis-axis {
   /*
   -webkit-transition: top .4s ease-in-out;
   transition:         top .4s ease-in-out;
@@ -21,12 +21,12 @@
 
 /* TODO: get animation working nicely
 
-.vis.timeline .item {
+.vis-item {
   -webkit-transition: top .4s ease-in-out;
   transition:         top .4s ease-in-out;
 }
 
-.vis.timeline .item.line {
+.vis-item.line {
   -webkit-transition: height .4s ease-in-out, top .4s ease-in-out;
   transition:         height .4s ease-in-out, top .4s ease-in-out;
 }

lib/timeline/component/css/currenttime.css

@@ -1,4 +1,4 @@
-.vis.timeline .currenttime {
+.vis-current-time {
   background-color: #FF7F6E;
   width: 2px;
   z-index: 1;

lib/timeline/component/css/customtime.css

@@ -1,4 +1,4 @@
-.vis.timeline .customtime {
+.vis-custom-time {
   background-color: #6E94FF;
   width: 2px;
   cursor: move;

lib/timeline/component/css/dataaxis.css

@@ -1,105 +1,103 @@
 
-.vis.timeline .vispanel.background.horizontal .grid.horizontal {
-    position: absolute;
-    width: 100%;
-    height: 0;
-    border-bottom: 1px solid;
+.vis-panel.vis-background.vis-horizontal .vis-grid.vis-horizontal {
+  position: absolute;
+  width: 100%;
+  height: 0;
+  border-bottom: 1px solid;
 }
 
-.vis.timeline .vispanel.background.horizontal .grid.minor {
-    border-color: #e5e5e5;
+.vis-panel.vis-background.vis-horizontal .vis-grid.vis-minor {
+  border-color: #e5e5e5;
 }
 
-.vis.timeline .vispanel.background.horizontal .grid.major {
-    border-color: #bfbfbf;
+.vis-panel.vis-background.vis-horizontal .vis-grid.vis-major {
+  border-color: #bfbfbf;
 }
 
 
-.vis.timeline .dataaxis .yAxis.major {
-    width: 100%;
-    position: absolute;
-    color: #4d4d4d;
-    white-space: nowrap;
+.vis-data-axis .vis-y-axis.vis-major {
+  width: 100%;
+  position: absolute;
+  color: #4d4d4d;
+  white-space: nowrap;
 }
 
-.vis.timeline .dataaxis .yAxis.major.measure{
-    padding: 0px 0px 0px 0px;
-    margin: 0px 0px 0px 0px;
-    border: 0px;
-    visibility: hidden;
-    width: auto;
+.vis-data-axis .vis-y-axis.vis-major.vis-measure {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  visibility: hidden;
+  width: auto;
 }
 
 
-.vis.timeline .dataaxis .yAxis.minor{
-    position: absolute;
-    width: 100%;
-    color: #bebebe;
-    white-space: nowrap;
+.vis-data-axis .vis-y-axis.vis-minor {
+  position: absolute;
+  width: 100%;
+  color: #bebebe;
+  white-space: nowrap;
 }
 
-.vis.timeline .dataaxis .yAxis.minor.measure{
-    padding: 0px 0px 0px 0px;
-    margin: 0px 0px 0px 0px;
-    border: 0px;
-    visibility: hidden;
-    width: auto;
+.vis-data-axis .vis-y-axis.vis-minor.vis-measure {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  visibility: hidden;
+  width: auto;
 }
 
-.vis.timeline .dataaxis .yAxis.title{
-    position: absolute;
-    color: #4d4d4d;
-    white-space: nowrap;
-    bottom: 20px;
-    text-align: center;
+.vis-data-axis .vis-y-axis.vis-title {
+  position: absolute;
+  color: #4d4d4d;
+  white-space: nowrap;
+  bottom: 20px;
+  text-align: center;
 }
 
-.vis.timeline .dataaxis .yAxis.title.measure{
-    padding: 0px 0px 0px 0px;
-    margin: 0px 0px 0px 0px;
-    visibility: hidden;
-    width: auto;
+.vis-data-axis .vis-y-axis.vis-title.vis-measure {
+  padding: 0;
+  margin: 0;
+  visibility: hidden;
+  width: auto;
 }
 
-.vis.timeline .dataaxis .yAxis.title.left {
-    bottom: 0px;
-    -webkit-transform-origin: left top;
-    -moz-transform-origin: left top;
-    -ms-transform-origin: left top;
-    -o-transform-origin: left top;
-    transform-origin: left bottom;
-    -webkit-transform: rotate(-90deg);
-    -moz-transform: rotate(-90deg);
-    -ms-transform: rotate(-90deg);
-    -o-transform: rotate(-90deg);
-    transform: rotate(-90deg);
+.vis-data-axis .vis-y-axis.vis-title.vis-left {
+  bottom: 0;
+  -webkit-transform-origin: left top;
+  -moz-transform-origin: left top;
+  -ms-transform-origin: left top;
+  -o-transform-origin: left top;
+  transform-origin: left bottom;
+  -webkit-transform: rotate(-90deg);
+  -moz-transform: rotate(-90deg);
+  -ms-transform: rotate(-90deg);
+  -o-transform: rotate(-90deg);
+  transform: rotate(-90deg);
 }
 
-.vis.timeline .dataaxis .yAxis.title.right {
-    bottom: 0px;
-    -webkit-transform-origin: right bottom;
-    -moz-transform-origin: right bottom;
-    -ms-transform-origin: right bottom;
-    -o-transform-origin: right bottom;
-    transform-origin: right bottom;
-    -webkit-transform: rotate(90deg);
-    -moz-transform: rotate(90deg);
-    -ms-transform: rotate(90deg);
-    -o-transform: rotate(90deg);
-    transform: rotate(90deg);
+.vis-data-axis .vis-y-axis.vis-title.vis-right {
+  bottom: 0;
+  -webkit-transform-origin: right bottom;
+  -moz-transform-origin: right bottom;
+  -ms-transform-origin: right bottom;
+  -o-transform-origin: right bottom;
+  transform-origin: right bottom;
+  -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+  transform: rotate(90deg);
 }
 
-.vis.timeline .legend {
-    background-color: rgba(247, 252, 255, 0.65);
-    padding: 5px;
-    border-color: #b3b3b3;
-    border-style:solid;
-    border-width: 1px;
-    box-shadow: 2px 2px 10px rgba(154, 154, 154, 0.55);
+.vis-legend {
+  background-color: rgba(247, 252, 255, 0.65);
+  padding: 5px;
+  border: 1px solid #b3b3b3;
+  box-shadow: 2px 2px 10px rgba(154, 154, 154, 0.55);
 }
 
-.vis.timeline .legendText {
-    /*font-size: 10px;*/
-    white-space: nowrap;
-    display: inline-block
+.vis-legend-text {
+  /*font-size: 10px;*/
+  white-space: nowrap;
+  display: inline-block
 }

lib/timeline/component/css/item.css

@@ -1,5 +1,5 @@
 
-.vis.timeline .item {
+.vis-item {
   position: absolute;
   color: #1A1A1A;
   border-color: #97B0F8;
@@ -9,7 +9,7 @@
   overflow: hidden;
 }
 
-.vis.timeline .item.selected {
+.vis-item.vis-selected {
   border-color: #FFC200;
   background-color: #FFF785;
 
@@ -17,25 +17,25 @@
   z-index: 2;
 }
 
-.vis.timeline .editable .item.selected {
+.vis-editable .vis-item.vis-selected {
   cursor: move;
 }
 
-.vis.timeline .item.point.selected {
+.vis-item.vis-point.vis-selected {
   background-color: #FFF785;
 }
 
-.vis.timeline .item.box {
+.vis-item.vis-box {
   text-align: center;
   border-style: solid;
   border-radius: 2px;
 }
 
-.vis.timeline .item.point {
+.vis-item.vis-point {
   background: none;
 }
 
-.vis.timeline .item.dot {
+.vis-item.vis-dot {
   position: absolute;
   padding: 0;
   border-width: 4px;
@@ -43,13 +43,13 @@
   border-radius: 4px;
 }
 
-.vis.timeline .item.range {
+.vis-item.vis-range {
   border-style: solid;
   border-radius: 2px;
   box-sizing: border-box;
 }
 
-.vis.timeline .item.background {
+.vis-item.background {
   border: none;
   background-color: rgba(213, 221, 246, 0.4);
   box-sizing: border-box;
@@ -57,20 +57,20 @@
   margin: 0;
 }
 
-.vis.timeline .item.range .content {
+.vis-item.vis-range .vis-item-content {
   position: relative;
   display: inline-block;
   max-width: 100%;
 }
 
-.vis.timeline .item.background .content {
+.vis-item.background .vis-item-content {
   position: absolute;
   display: inline-block;
   max-width: 100%;
   margin: 5px;
 }
 
-.vis.timeline .item.line {
+.vis-item.vis-line {
   padding: 0;
   position: absolute;
   width: 0;
@@ -78,13 +78,13 @@
   border-left-style: solid;
 }
 
-.vis.timeline .item .content {
+.vis-item .vis-item-content {
   white-space: nowrap;
   box-sizing: border-box;
   padding: 5px;
 }
 
-.vis.timeline .item .delete {
+.vis-item .vis-delete {
   background: url('img/timeline/delete.png') no-repeat top center;
   position: absolute;
   width: 24px;
@@ -94,7 +94,7 @@
   cursor: pointer;
 }
 
-.vis.timeline .item.range .drag-left {
+.vis-item.vis-range .vis-drag-left {
   position: absolute;
   width: 24px;
   height: 100%;
@@ -104,7 +104,7 @@
   cursor: w-resize;
 }
 
-.vis.timeline .item.range .drag-right {
+.vis-item.vis-range .vis-drag-right {
   position: absolute;
   width: 24px;
   height: 100%;

lib/timeline/component/css/itemset.css

@@ -1,5 +1,5 @@
 
-.vis.timeline .itemset {
+.vis-itemset {
   position: relative;
   padding: 0;
   margin: 0;
@@ -7,15 +7,15 @@
   box-sizing: border-box;
 }
 
-.vis.timeline .itemset .background,
-.vis.timeline .itemset .foreground {
+.vis-itemset .vis-background,
+.vis-itemset .vis-foreground {
   position: absolute;
   width: 100%;
   height: 100%;
   overflow: visible;
 }
 
-.vis.timeline .axis {
+.vis-axis {
   position: absolute;
   width: 100%;
   height: 0;
@@ -23,12 +23,12 @@
   z-index: 1;
 }
 
-.vis.timeline  .foreground .group {
+.vis-foreground .vis-group {
   position: relative;
   box-sizing: border-box;
   border-bottom: 1px solid #bfbfbf;
 }
 
-.vis.timeline  .foreground .group:last-child {
+.vis-foreground .vis-group:last-child {
   border-bottom: none;
 }

lib/timeline/component/css/labelset.css

@@ -1,5 +1,5 @@
 
-.vis.timeline .labelset {
+.vis-labelset {
   position: relative;
 
   overflow: hidden;
@@ -7,7 +7,7 @@
   box-sizing: border-box;
 }
 
-.vis.timeline .labelset .vlabel {
+.vis-labelset .vis-label {
   position: relative;
   left: 0;
   top: 0;
@@ -17,19 +17,19 @@
   box-sizing: border-box;
 }
 
-.vis.timeline .labelset .vlabel {
+.vis-labelset .vis-label {
   border-bottom: 1px solid #bfbfbf;
 }
 
-.vis.timeline .labelset .vlabel:last-child {
+.vis-labelset .vis-label:last-child {
   border-bottom: none;
 }
 
-.vis.timeline .labelset .vlabel .inner {
+.vis-labelset .vis-label .vis-inner {
   display: inline-block;
   padding: 5px;
 }
 
-.vis.timeline .labelset .vlabel .inner.hidden {
+.vis-labelset .vis-label .vis-inner.vis-hidden {
   padding: 0;
 }

lib/timeline/component/css/panel.css

@@ -1,16 +1,5 @@
 
-.vis.timeline.root {
-  position: relative;
-  border: 1px solid #bfbfbf;
-
-  overflow: hidden;
-  padding: 0;
-  margin: 0;
-
-  box-sizing: border-box;
-}
-
-.vis.timeline .vispanel {
+.vis-panel {
   position: absolute;
 
   padding: 0;
@@ -19,53 +8,53 @@
   box-sizing: border-box;
 }
 
-.vis.timeline .vispanel.center,
-.vis.timeline .vispanel.left,
-.vis.timeline .vispanel.right,
-.vis.timeline .vispanel.top,
-.vis.timeline .vispanel.bottom {
+.vis-panel.vis-center,
+.vis-panel.vis-left,
+.vis-panel.vis-right,
+.vis-panel.vis-top,
+.vis-panel.vis-bottom {
   border: 1px #bfbfbf;
 }
 
-.vis.timeline .vispanel.center,
-.vis.timeline .vispanel.left,
-.vis.timeline .vispanel.right {
+.vis-panel.vis-center,
+.vis-panel.vis-left,
+.vis-panel.vis-right {
   border-top-style: solid;
   border-bottom-style: solid;
   overflow: hidden;
 }
 
-.vis.timeline .vispanel.center,
-.vis.timeline .vispanel.top,
-.vis.timeline .vispanel.bottom {
+.vis-panel.vis-center,
+.vis-panel.vis-top,
+.vis-panel.vis-bottom {
   border-left-style: solid;
   border-right-style: solid;
 }
 
-.vis.timeline .background {
+.vis-background {
   overflow: hidden;
 }
 
-.vis.timeline .vispanel > .content {
+.vis-panel > .vis-content {
   position: relative;
 }
 
-.vis.timeline .vispanel .shadow {
+.vis-panel .vis-shadow {
   position: absolute;
   width: 100%;
   height: 1px;
   box-shadow: 0 0 10px rgba(0,0,0,0.8);
-  /* TODO: find a nice way to ensure shadows are drawn on top of items
+  /* TODO: find a nice way to ensure vis-shadows are drawn on top of items
   z-index: 1;
   */
 }
 
-.vis.timeline .vispanel .shadow.top {
+.vis-panel .vis-shadow.vis-top {
   top: -1px;
   left: 0;
 }
 
-.vis.timeline .vispanel .shadow.bottom {
+.vis-panel .vis-shadow.vis-bottom {
   bottom: -1px;
   left: 0;
 }

lib/timeline/component/css/pathStyles.css

@@ -1,91 +1,91 @@
-.vis.timeline .graphGroup0 {
+.vis-graph-group0 {
     fill:#4f81bd;
     fill-opacity:0;
     stroke-width:2px;
     stroke: #4f81bd;
 }
 
-.vis.timeline .graphGroup1 {
+.vis-graph-group1 {
     fill:#f79646;
     fill-opacity:0;
     stroke-width:2px;
     stroke: #f79646;
 }
 
-.vis.timeline .graphGroup2 {
+.vis-graph-group2 {
     fill: #8c51cf;
     fill-opacity:0;
     stroke-width:2px;
     stroke: #8c51cf;
 }
 
-.vis.timeline .graphGroup3 {
+.vis-graph-group3 {
     fill: #75c841;
     fill-opacity:0;
     stroke-width:2px;
     stroke: #75c841;
 }
 
-.vis.timeline .graphGroup4 {
+.vis-graph-group4 {
     fill: #ff0100;
     fill-opacity:0;
     stroke-width:2px;
     stroke: #ff0100;
 }
 
-.vis.timeline .graphGroup5 {
+.vis-graph-group5 {
     fill: #37d8e6;
     fill-opacity:0;
     stroke-width:2px;
     stroke: #37d8e6;
 }
 
-.vis.timeline .graphGroup6 {
+.vis-graph-group6 {
     fill: #042662;
     fill-opacity:0;
     stroke-width:2px;
     stroke: #042662;
 }
 
-.vis.timeline .graphGroup7 {
+.vis-graph-group7 {
     fill:#00ff26;
     fill-opacity:0;
     stroke-width:2px;
     stroke: #00ff26;
 }
 
-.vis.timeline .graphGroup8 {
+.vis-graph-group8 {
     fill:#ff00ff;
     fill-opacity:0;
     stroke-width:2px;
     stroke: #ff00ff;
 }
 
-.vis.timeline .graphGroup9 {
+.vis-graph-group9 {
     fill: #8f3938;
     fill-opacity:0;
     stroke-width:2px;
     stroke: #8f3938;
 }
 
-.vis.timeline .fill {
+.vis-fill {
     fill-opacity:0.1;
     stroke: none;
 }
 
 
-.vis.timeline .bar {
+.vis-bar {
     fill-opacity:0.5;
     stroke-width:1px;
 }
 
-.vis.timeline .point {
+.vis-point {
     stroke-width:2px;
     fill-opacity:1.0;
 }
 
 
-.vis.timeline .legendBackground {
+.vis-legend-background {
     stroke-width:1px;
     fill-opacity:0.9;
     fill: #ffffff;
@@ -93,14 +93,14 @@
 }
 
 
-.vis.timeline .outline {
+.vis-outline {
     stroke-width:1px;
     fill-opacity:1;
     fill: #ffffff;
     stroke: #e5e5e5;
 }
 
-.vis.timeline .iconFill {
+.vis-icon-fill {
     fill-opacity:0.3;
     stroke: none;
 }

lib/timeline/component/css/timeaxis.css

@@ -1,15 +1,15 @@
-.vis.timeline .timeaxis {
+.vis-time-axis {
   position: relative;
   overflow: hidden;
 }
 
-.vis.timeline .timeaxis.foreground {
+.vis-time-axis.vis-foreground {
   top: 0;
   left: 0;
   width: 100%;
 }
 
-.vis.timeline .timeaxis.background {
+.vis-time-axis.vis-background {
   position: absolute;
   top: 0;
   left: 0;
@@ -17,14 +17,14 @@
   height: 100%;
 }
 
-.vis.timeline .timeaxis .text {
+.vis-time-axis .vis-text {
   position: absolute;
   color: #4d4d4d;
   padding: 3px;
   white-space: nowrap;
 }
 
-.vis.timeline .timeaxis .text.measure {
+.vis-time-axis .vis-text.vis-measure {
   position: absolute;
   padding-left: 0;
   padding-right: 0;
@@ -33,15 +33,15 @@
   visibility: hidden;
 }
 
-.vis.timeline .timeaxis .grid.vertical {
+.vis-time-axis .vis-grid.vis-vertical {
   position: absolute;
   border-left: 1px solid;
 }
 
-.vis.timeline .timeaxis .grid.minor {
+.vis-time-axis .vis-grid.vis-minor {
   border-color: #e5e5e5;
 }
 
-.vis.timeline .timeaxis .grid.major {
+.vis-time-axis .vis-grid.vis-major {
   border-color: #bfbfbf;
 }

lib/timeline/component/css/timeline.css

@@ -1,2 +1,11 @@
-.vis.timeline {
+
+.vis-timeline {
+  position: relative;
+  border: 1px solid #bfbfbf;
+
+  overflow: hidden;
+  padding: 0;
+  margin: 0;
+
+  box-sizing: border-box;
 }

lib/timeline/component/graph2d_types/bar.js

@@ -1,6 +1,3 @@
-/**
- * Created by Alex on 11/11/2014.
- */
 var DOMutil = require('../../../DOMutil');
 var Points = require('./points');
 
@@ -112,7 +109,7 @@ Bargraph.draw = function (groupIds, processedGroupData, framework) {
         else if (group.options.barChart.align == 'right') {drawData.offset += 0.5*drawData.width;}
       }
     }
-    DOMutil.drawBar(combinedData[i].x + drawData.offset, combinedData[i].y - heightOffset, drawData.width, group.zeroPosition - combinedData[i].y, group.className + ' bar', framework.svgElements, framework.svg);
+    DOMutil.drawBar(combinedData[i].x + drawData.offset, combinedData[i].y - heightOffset, drawData.width, group.zeroPosition - combinedData[i].y, group.className + ' vis-bar', framework.svgElements, framework.svg);
     // draw points
     if (group.options.drawPoints.enabled == true) {
       Points.draw([combinedData[i]], group, framework, drawData.offset);

lib/timeline/component/graph2d_types/line.js

@@ -1,6 +1,3 @@
-/**
- * Created by Alex on 11/11/2014.
- */
 var DOMutil = require('../../../DOMutil');
 var Points = require('./points');
 
@@ -34,7 +31,7 @@ Line.prototype.draw = function (dataset, group, framework) {
       path = DOMutil.getSVGElement('path', framework.svgElements, framework.svg);
       path.setAttributeNS(null, "class", group.className);
       if(group.style !== undefined) {
-        path.setAttributeNS(null, "style", group.style);
+        path.setAttributeNS(null, "style", 'vis-' + group.style);
       }
 
       // construct path from dataset
@@ -55,11 +52,11 @@ Line.prototype.draw = function (dataset, group, framework) {
         else {
           dFill = 'M' + dataset[0].x + ',' + svgHeight + ' ' + d + 'L' + dataset[dataset.length - 1].x + ',' + svgHeight;
         }
-        fillPath.setAttributeNS(null, "class", group.className + " fill");
+        fillPath.setAttributeNS(null, 'class', group.className + ' vis-fill');
         if(group.options.shaded.style !== undefined) {
-          fillPath.setAttributeNS(null, "style", group.options.shaded.style);
+          fillPath.setAttributeNS(null, 'style', group.options.shaded.style);
         }
-        fillPath.setAttributeNS(null, "d", dFill);
+        fillPath.setAttributeNS(null, 'd', dFill);
       }
       // copy properties to path for drawing.
       path.setAttributeNS(null, 'd', 'M' + d);