Updated to v4.7.0

docs/network/edges.html

@@ -623,13 +623,21 @@ var options: {
             <td>String</td>
             <td><code>'dynamic'</code></td>
             <td>Possible options: <code>'dynamic', 'continuous', 'discrete', 'diagonalCross', 'straightCross', 'horizontal',
-                'vertical', 'curvedCW', 'curvedCCW'</code>. Take a look at our example 26 to see what these look like
+                'vertical', 'curvedCW', 'curvedCCW', 'cubicBezier'</code>. Take a look at our example 26 to see what these look like
                 and pick the one that you like best!
                 <br><br>
                 When using dynamic, the edges will have an invisible support node guiding the shape. This node is part of the
                 physics simulation.
             </td>
         </tr>
+        <tr parent="smooth" class="hidden">
+            <td class="indent">smooth.forceDirection</td>
+            <td>String or Boolean</td>
+            <td><code>false</code></td>
+            <td>Accepted options: <code>['horizontal', 'vertical', 'none']</code>. This options is only used with the cubicBezier curves. When true, horizontal is chosen, when false,
+                the direction that is larger (x distance between nodes vs y distance between nodes) is used. If the x distance is larger, horizontal. This is ment to be used with hierarchical layouts.
+            </td>
+        </tr>
         <tr parent="smooth" class="hidden">
             <td class="indent">smooth.roundness</td>
             <td>Number</td>

docs/network/index.html

@@ -780,8 +780,14 @@ function releaseFunction (clusterPosition, containedNodesPositions) {
                         positions when using clusters since they cannot be correctly initialized from just the
                         positions.</b>
                 </td>
-
-
+            </tr>
+            <tr class="collapsible toggle" onclick="toggleTable('methodTable','moveNode', this);">
+                <td colspan="2"><span parent="moveNode" class="right-caret" id="method_moveNode"></span> moveNode(<code><i>nodeId, Number x, Number y</i></code>)</td>
+            </tr>
+            <tr class="hidden" parent="moveNode">
+                <td class="midMethods">Returns: none</td>
+                <td>You can use this to programatically move a node. <i>The supplied x and y positions have to be in canvas space!</i>
+                </td>
             </tr>
             <tr class="collapsible toggle" onclick="toggleTable('methodTable','getBoundingBox', this);">
                 <td colspan="2"><span parent="getBoundingBox" class="right-caret" id="method_getBoundingBox"></span> getBoundingBox(<code><i>String

examples/network/edgeStyles/smooth.html

@@ -33,37 +33,15 @@
     <br /> <br />
 </div>
 
-<p>
-  Smooth curve type:
-  <select id="dropdownID" onchange="update();">
-    <option value="continuous" selected="selected">continuous</option>
-    <option value="discrete">discrete</option>
-    <option value="diagonalCross">diagonalCross</option>
-    <option value="straightCross">straightCross</option>
-    <option value="horizontal">horizontal</option>
-    <option value="vertical">vertical</option>
-    <option value="curvedCW">curvedCW</option>
-    <option value="curvedCCW">curvedCCW</option>
-    <option value="dynamic">dynamic</option>
-    <option value="none">none</option>
-  </select>
-</p>
-<p>
-  Roundness (0..1): <input type="range" min="0" max="1" value="0.5" step="0.05" style="width:200px" id="roundnessSlider" onchange="update();"> <input id="roundnessScreen" style="width:30px;" value="0.5"> <br>(0.5 is max roundness for continuous, 1.0 for the others)
-</p>
-
 <div id="mynetwork"></div>
 
 <script type="text/javascript">
 
-  var dropdown = document.getElementById("dropdownID");
-  var roundnessSlider = document.getElementById("roundnessSlider");
-  var roundnessScreen = document.getElementById("roundnessScreen");
   // create an array with nodes
   var nodes = [
     {id: 1, label: 'Fixed node', x:0, y:0, fixed:true},
     {id: 2, label: 'Drag me', x:150, y:130, physics:false},
-    {id: 3, label: 'Obstacle', x:80, y:-80, fixed:true, mass:5}
+    {id: 3, label: 'Obstacle', x:80, y:-80, fixed:true, mass:10}
   ];
 
   // create an array with edges
@@ -79,6 +57,12 @@
   };
   var options = {
     physics:true,
+    configure:function (option, path) {
+      if (path.indexOf('smooth') !== -1 || option === 'smooth') {
+        return true;
+      }
+      return false;
+    },
     edges: {
       smooth: {
         type: 'continuous'
@@ -87,33 +71,7 @@
   };
   var network = new vis.Network(container, data, options);
 
-  function update() {
-    var type = dropdown.value;
-    var options;
-    var roundness = parseFloat(roundnessSlider.value);
-    roundnessScreen.value = roundness;
-    if (type === 'none') {
-      options = {
-        edges: {
-          smooth: false
-        }
-      };
-    }
-    else {
-      options = {
-        edges: {
-          smooth: {
-            type: type,
-            roundness: roundness
-          }
-        }
-      };
-    }
-
-    network.setOptions(options);
-  }
 
-  update();
 </script>
 
 </body>

examples/network/layout/hierarchicalLayoutUserdefined.html

@@ -79,7 +79,11 @@
 
     var options = {
         edges: {
-            smooth: true
+            smooth: {
+                type:'cubicBezier',
+                forceDirection: (directionInput.value == "UD" || directionInput.value == "DU") ? 'vertical' : 'horizontal',
+                roundness: 0.4
+            }
         },
         layout: {
             hierarchical:{

examples/network/nodeStyles/circularImages.html

@@ -45,7 +45,8 @@
         {id: 12, shape: 'circularImage', image: DIR + '12.png'},
         {id: 13, shape: 'circularImage', image: DIR + '13.png'},
         {id: 14, shape: 'circularImage', image: DIR + '14.png'},
-        {id: 15, shape: 'circularImage', image: DIR + 'missing.png', brokenImage: DIR + 'missingBrokenImage.png', label:"when images\nfail\nto load"}
+        {id: 15, shape: 'circularImage', image: DIR + 'missing.png', brokenImage: DIR + 'missingBrokenImage.png', label:"when images\nfail\nto load"},
+        {id: 16, shape: 'circularImage', image: DIR + 'anotherMissing.png', brokenImage: DIR + '9.png', label:"fallback image in action"}
       ];
 
       // create connections between people
@@ -64,7 +65,8 @@
         {from: 10, to: 11},
         {from: 11, to: 12},
         {from: 12, to: 13},
-        {from: 13, to: 14}
+        {from: 13, to: 14},
+        {from: 9, to: 16}
       ];
 
       // create a network

examples/timeline/other/timezone.html

@@ -0,0 +1,80 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Time zone</title>
+
+  <style type="text/css">
+    body, html {
+      font-family: sans-serif;
+      max-width: 800px;
+    }
+  </style>
+
+  <script src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
+  <script src="../../googleAnalytics.js"></script>
+</head>
+<body>
+
+<h1>Time zone</h1>
+
+<p>
+  The following demo shows how to display items in local time (default), in UTC, or for a specific time zone offset. By configuring your own <code>moment</code> constructor, you can display items in the time zone that you want. All timelines have the same start and end date.
+</p>
+
+<h2>Local time</h2>
+<div id="local"></div>
+
+<h2>UTC</h2>
+<div id="utc"></div>
+
+<h2>UTC +08:00</h2>
+<div id="plus8"></div>
+
+
+<script type="text/javascript">
+  // Create a DataSet (allows two way data-binding)
+  var today = vis.moment(vis.moment.utc().format('YYYY-MM-DDT00:00:00.000Z'));
+  var start = today.clone();
+  var end = today.clone().add(2, 'day');
+  var customTime = today.clone().add(28, 'hour');
+
+  var items = new vis.DataSet([
+    {id: 1, content: 'item 1', start: today.clone().add(8, 'hour')},
+    {id: 2, content: 'item 2', start: today.clone().add(16, 'hour')},
+    {id: 3, content: 'item 3', start: today.clone().add(32, 'hour')}
+  ]);
+
+  // Create a timeline displaying in local time (default)
+  var timelineLocal = new vis.Timeline(document.getElementById('local'), items, {
+    editable: true,
+    start: start,
+    end: end
+  });
+  timelineLocal.addCustomTime(customTime);
+
+  // Create a timeline displaying in UTC
+  var timelineUTC = new vis.Timeline(document.getElementById('utc'), items, {
+    editable: true,
+    start: start,
+    end: end,
+    moment: function (date) {
+      return vis.moment(date).utc();
+    }
+  });
+  timelineUTC.addCustomTime(customTime);
+
+  // Create a timeline displaying in UTC +08:00
+  var timelinePlus8 = new vis.Timeline(document.getElementById('plus8'), items, {
+    editable: true,
+    start: start,
+    end: end,
+    moment: function (date) {
+      return vis.moment(date).utcOffset('+08:00');
+    }
+  });
+  timelinePlus8.addCustomTime(customTime);
+</script>
+
+</body>
+</html>

graph3d_examples.html

@@ -201,6 +201,12 @@
             <div class="exampleTitle">tooltips</div>
         </a>
     </div>
+    <div class="col-lg-2 col-md-3 col-sm-6">
+        <a href="examples/graph3d/12_custom_labels.html">
+            <img class="example img-responsive" src="./images/exampleScreenshots/graph3d/12.png">
+            <div class="exampleTitle">custom labels</div>
+        </a>
+    </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/graph3d/playground/index.html">
             <img class="example img-responsive" src="./images/exampleScreenshots/graph3d/playground.png">

index.html

@@ -28,7 +28,7 @@
 
     <script src="./js/smooth-scroll.min.js"></script>
 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.6.0/vis.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.7.0/vis.min.js"></script>
 
     <script language="JavaScript">
         smoothScroll.init();
@@ -36,7 +36,7 @@
         function evalLinks() {
             if (typeof vis === 'undefined') {
                 console.log(document.getElementById("linkStatus"));
-                document.getElementById("linkStatus").innerHTML = "Note: The latest version (4.6.0) is not yet available on cdnjs, <a href='https://cdnjs.com/libraries/vis'>click here</a> to to pick the latest available version.<br />";
+                document.getElementById("linkStatus").innerHTML = "Note: The latest version (4.7.0) is not yet available on cdnjs, <a href='https://cdnjs.com/libraries/vis'>click here</a> to to pick the latest available version.<br />";
                 document.getElementById("cdn_vis").style.color = "rgb(150,150,150)";
                 document.getElementById("cdn_vis_css").style.color = "rgb(150,150,150)";
             }
@@ -196,13 +196,13 @@
                     <pre class="prettyprint">bower install vis</pre>
                     <h3>link from cdnjs.com</h3>
                     <p>
-                        <a id="cdn_vis" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.6.0/vis.min.js" target="_blank">vis.min.js</a> <br>
-                        <a id="cdn_vis_css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.6.0/vis.min.css" target="_blank">vis.min.css</a> <br>
+                        <a id="cdn_vis" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.7.0/vis.min.js" target="_blank">vis.min.js</a> <br>
+                        <a id="cdn_vis_css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.7.0/vis.min.css" target="_blank">vis.min.css</a> <br>
                         <span id="linkStatus"></span>
                     </p>
                     <h3>download</h3>
                     <p>
-                        <a href="download/vis.zip">vis.zip (version <span class="version">4.6.0</span>)</a>
+                        <a href="download/vis.zip">vis.zip (version <span class="version">4.7.0</span>)</a>
                     </p>
                 </div>
             </div>

timeline_examples.html

@@ -116,6 +116,7 @@
         <a class='exampleLink' href="examples/timeline/other/performance.html">performance</a><br />
         <a class='exampleLink' href="examples/timeline/other/groupsPerformance.html">perforance of groups</a><br />
         <a class='exampleLink' href="examples/timeline/other/requirejs/requirejs_example.html">require.js example</a><br />
+        <a class='exampleLink' href="examples/timeline/other/timezone.html">timezone</a><br />
     </div>
 </div>
 <br />