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

Conflicts:
	dist/vis.js

HISTORY.md

@@ -15,6 +15,7 @@ http://visjs.org
   on screen.
 - Implemented an option `focus` for `setSelection(ids, options)`, to immediately
   focus selected nodes.
+- Implemented function `moveTo(time, options)`.
 - Implemented animated range change for functions `fit`, `focus`, `setSelection`,
   and `setWindow`.
 - Implemented functions `setCurrentTime(date)` and `getCurrentTime()`.
@@ -26,19 +27,20 @@ http://visjs.org
 
 - A fix in reading group properties for a node.
 - Fixed physics solving stopping when a support node was not moving.
-- Added localization support.
+- Implemented localization support.
 - Implemented option `clickToUse`.
 - Fixed page scroll event not being blocked when moving around in Network
   using arrow keys.
 
 ### Graph2D
 
-- Added 'handleOverlap' to support overlap, sideBySide and stack.
-- Added two examples showing the 'handleOverlap' functionality.
-- Added 'customRange' for the Y axis and an example showing how it works.
-- Added localization support.
+- Implemented option `handleOverlap` to support overlap, sideBySide and stack.
+- Implemented two examples showing the `handleOverlap` functionality.
+- Implemented `customRange` for the Y axis and an example showing how it works.
+- Implemented localization support.
 - Implemented option `clickToUse`.
 - Implemented functions `setCurrentTime(date)` and `getCurrentTime()`.
+- Implemented function `moveTo(time, options)`.
 - Fixed bugs.
 - Added groups.visibility functionality and an example showing how it works.
 

docs/graph2d.html

@@ -709,21 +709,6 @@ Graph2d.clear({options: true}); // clear options only
     </td>
   </tr>
 
-  <tr>
-    <td>setCurrentTime(time)</td>
-    <td>none</td>
-    <td>Set a current time. This can be used for example to ensure that a client's time is synchronized with a shared server time.
-      <code>time</code> can be a Date object, numeric timestamp, or ISO date string.
-      Only applicable when option <code>showCurrentTime</code> is true.</td>
-  </tr>
-
-  <tr>
-    <td>setCustomTime(time)</td>
-    <td>none</td>
-    <td>Adjust the custom time bar. Only applicable when the option <code>showCustomTime</code> is true. <code>time</code> can be a Date object, numeric timestamp, or ISO date string.
-    </td>
-  </tr>
-
   <tr>
     <td>getLegend(groupId, iconWidth, iconHeight)</td>
     <td>SVGelement, String, String</td>
@@ -750,6 +735,23 @@ Graph2d.clear({options: true}); // clear options only
     </td>
   </tr>
 
+  <tr>
+    <td>isGroupVisible(groupId)</td>
+    <td>Boolean</td>
+    <td>This checks if the visible option of the supplied group (by ID) is true or false.
+    </td>
+  </tr>
+
+  <tr>
+    <td>moveTo(time [, options])</td>
+    <td>none</td>
+    <td>Move the window such that given time is centered on screen. Parameter <code>time</code> can be a <code>Date</code>, <code>Number</code>, or <code>String</code>. Available options:
+      <ul>
+        <li><code>animate: boolean | number</code><br>If true (default), the range is animated smoothly to the new window. If a number, the number is taken as duration for the animation. Default duration is 500 ms.</li>
+      </ul>
+    </td>
+  </tr>
+
   <tr>
     <td>on(event, callback)</td>
     <td>none</td>
@@ -770,9 +772,17 @@ Graph2d.clear({options: true}); // clear options only
   </tr>
 
   <tr>
-    <td>isGroupVisible(groupId)</td>
-    <td>Boolean</td>
-    <td>This checks if the visible option of the supplied group (by ID) is true or false.
+    <td>setCurrentTime(time)</td>
+    <td>none</td>
+    <td>Set a current time. This can be used for example to ensure that a client's time is synchronized with a shared server time.
+      <code>time</code> can be a Date object, numeric timestamp, or ISO date string.
+      Only applicable when option <code>showCurrentTime</code> is true.</td>
+  </tr>
+
+  <tr>
+    <td>setCustomTime(time)</td>
+    <td>none</td>
+    <td>Adjust the custom time bar. Only applicable when the option <code>showCustomTime</code> is true. <code>time</code> can be a Date object, numeric timestamp, or ISO date string.
     </td>
   </tr>
 

docs/timeline.html

@@ -771,21 +771,6 @@ timeline.clear({options: true}); // clear options only
     </td>
   </tr>
 
-  <tr>
-    <td>setCurrentTime(time)</td>
-    <td>none</td>
-    <td>Set a current time. This can be used for example to ensure that a client's time is synchronized with a shared server time.
-      <code>time</code> can be a Date object, numeric timestamp, or ISO date string.
-      Only applicable when option <code>showCurrentTime</code> is true.</td>
-  </tr>
-
-  <tr>
-    <td>setCustomTime(time)</td>
-    <td>none</td>
-    <td>Adjust the custom time bar. Only applicable when the option <code>showCustomTime</code> is true. <code>time</code> can be a Date object, numeric timestamp, or ISO date string.
-    </td>
-  </tr>
-
   <tr>
     <td>getSelection()</td>
     <td>Number[]</td>
@@ -804,6 +789,16 @@ timeline.clear({options: true}); // clear options only
     <td>Get the current visible window. Returns an object with properties <code>start: Date</code> and <code>end: Date</code>.</td>
   </tr>
 
+  <tr>
+    <td>moveTo(time [, options])</td>
+    <td>none</td>
+    <td>Move the window such that given time is centered on screen. Parameter <code>time</code> can be a <code>Date</code>, <code>Number</code>, or <code>String</code>. Available options:
+      <ul>
+        <li><code>animate: boolean | number</code><br>If true (default), the range is animated smoothly to the new window. If a number, the number is taken as duration for the animation. Default duration is 500 ms.</li>
+      </ul>
+    </td>
+  </tr>
+
   <tr>
     <td>on(event, callback)</td>
     <td>none</td>
@@ -823,6 +818,21 @@ timeline.clear({options: true}); // clear options only
     </td>
   </tr>
 
+  <tr>
+    <td>setCurrentTime(time)</td>
+    <td>none</td>
+    <td>Set a current time. This can be used for example to ensure that a client's time is synchronized with a shared server time.
+      <code>time</code> can be a Date object, numeric timestamp, or ISO date string.
+      Only applicable when option <code>showCurrentTime</code> is true.</td>
+  </tr>
+
+  <tr>
+    <td>setCustomTime(time)</td>
+    <td>none</td>
+    <td>Adjust the custom time bar. Only applicable when the option <code>showCustomTime</code> is true. <code>time</code> can be a Date object, numeric timestamp, or ISO date string.
+    </td>
+  </tr>
+
   <tr>
     <td>setGroups(groups)</td>
     <td>none</td>

examples/timeline/22_window_adjustment.html

@@ -0,0 +1,94 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Adjusting window</title>
+
+  <style>
+    body, html {
+      font-family: arial, sans-serif;
+      font-size: 11pt;
+    }
+  </style>
+
+  <script src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+
+<p>This example demonstrates functions to adjust the visible window of the Timeline.</p>
+
+<input type="button" id="window1" value="Set window from 2014-01-01 to 2014-04-01"><br>
+<input type="button" id="window2" value="Set window from 2014-01-01 to 2014-04-01 without animation"><br>
+<input type="button" id="fit" value="Fit all items"><br>
+<input type="button" id="select" value="Select & focus items 5 and 6"><br>
+<input type="button" id="focus1" value="Focus item 2"><br>
+<input type="button" id="focus2" value="Focus items 5 and 6 (slow animation)"><br>
+<input type="button" id="focus3" value="Focus current selection"><br>
+<input type="button" id="moveTo" value="Move to 2014-02-01"><br>
+
+<div id="visualization"></div>
+
+<script>
+  // create a dataset with items
+  // we specify the type of the fields `start` and `end` here to be strings
+  // containing an ISO date. The fields will be outputted as ISO dates
+  // automatically getting data from the DataSet via items.get().
+  var items = new vis.DataSet({
+    type: { start: 'ISODate', end: 'ISODate' }
+  });
+
+  // add items to the DataSet
+  items.add([
+    {id: 1, content: 'item 1<br>start', start: '2014-01-23'},
+    {id: 2, content: 'item 2', start: '2014-01-18'},
+    {id: 3, content: 'item 3', start: '2014-01-21'},
+    {id: 4, content: 'item 4', start: '2014-01-19', end: '2014-01-24'},
+    {id: 5, content: 'item 5', start: '2014-01-28', type:'point'},
+    {id: 6, content: 'item 6', start: '2014-01-26'}
+  ]);
+
+  var container = document.getElementById('visualization');
+  var options = {
+    start: '2014-01-10',
+    end: '2014-02-10',
+    editable: true,
+    showCurrentTime: true
+  };
+
+  var timeline = new vis.Timeline(container, items, options);
+
+  document.getElementById('window1').onclick = function() {
+    timeline.setWindow('2014-01-01', '2014-04-01');
+  };
+  document.getElementById('window2').onclick = function() {
+    timeline.setWindow('2014-01-01', '2014-04-01', {
+      animate: false
+    });
+  };
+  document.getElementById('fit').onclick = function() {
+    timeline.fit();
+  };
+  document.getElementById('select').onclick = function() {
+    timeline.setSelection([5, 6], {
+      focus: true
+    });
+  };
+  document.getElementById('focus1').onclick = function() {
+    timeline.focus(2);
+  };
+  document.getElementById('focus2').onclick = function() {
+    timeline.focus([5, 6], {
+      animate: 3000 // ms
+    });
+  };
+  document.getElementById('focus3').onclick = function() {
+    var selection = timeline.getSelection();
+    timeline.focus(selection);
+  };
+  document.getElementById('moveTo').onclick = function() {
+    timeline.moveTo('2014-02-01');
+  };
+
+</script>
+</body>
+</html>

examples/timeline/index.html

@@ -33,6 +33,7 @@
   <p><a href="19_localization.html">19_localization.html</a></p>
   <p><a href="20_click_to_use.html">20_click_to_use.html</a></p>
   <p><a href="21_set_selection.html">21_set_selection.html</a></p>
+  <p><a href="22_window_adjustment.html">22_window_adjustment.html</a></p>
 
   <p><a href="requirejs/requirejs_example.html">requirejs_example.html</a></p>
 

lib/timeline/Core.js

@@ -358,7 +358,6 @@ Core.prototype.fit = function(options) {
   this.range.setRange(start, end, animate);
 };
 
-
 /**
  * Set the visible window. Both parameters are optional, you can change only
  * start or only end. Syntax:
@@ -389,6 +388,27 @@ Core.prototype.setWindow = function(start, end, options) {
   }
 };
 
+/**
+ * Move the window such that given time is centered on screen.
+ * @param {Date | Number | String} time
+ * @param {Object} [options]  Available options:
+ *                            `animate: boolean | number`
+ *                                 If true (default), the range is animated
+ *                                 smoothly to the new window.
+ *                                 If a number, the number is taken as duration
+ *                                 for the animation. Default duration is 500 ms.
+ */
+Core.prototype.moveTo = function(time, options) {
+  var interval = this.range.end - this.range.start;
+  var t = util.convert(time, 'Date').valueOf();
+
+  var start = t - interval / 2;
+  var end = t + interval / 2;
+  var animate = (options && options.animate !== undefined) ? options.animate : true;
+
+  this.range.setRange(start, end, animate);
+};
+
 /**
  * Get the visible window
  * @return {{start: Date, end: Date}}   Visible range

lib/timeline/Range.js

@@ -100,8 +100,8 @@ function validateDirection (direction) {
 
 /**
  * Set a new start and end range
- * @param {Number} [start]
- * @param {Number} [end]
+ * @param {Date | Number | String} [start]
+ * @param {Date | Number | String} [end]
  * @param {boolean | number} [animate=false]     If true, the range is animated
  *                                               smoothly to the new window.
  *                                               If animate is a number, the
@@ -110,6 +110,9 @@ function validateDirection (direction) {
  *
  */
 Range.prototype.setRange = function(start, end, animate) {
+  var _start = start != undefined ? util.convert(start, 'Date').valueOf() : null;
+  var _end   = end != undefined   ? util.convert(end, 'Date').valueOf()   : null;
+
   this._cancelAnimation();
 
   if (animate) {
@@ -123,8 +126,8 @@ Range.prototype.setRange = function(start, end, animate) {
       if (!me.props.touch.dragging) {
         var now = new Date().valueOf();
         var time = now - initTime;
-        var s = util.easeInOutQuad(time, initStart, start, duration);
-        var e = util.easeInOutQuad(time, initEnd, end, duration);
+        var s = util.easeInOutQuad(time, initStart, _start, duration);
+        var e = util.easeInOutQuad(time, initEnd, _end, duration);
         changed = me._applyRange(s, e);
         anyChanged = anyChanged || changed;
         if (changed) {
@@ -148,7 +151,7 @@ Range.prototype.setRange = function(start, end, animate) {
     return next();
   }
   else {
-    var changed = this._applyRange(start, end);
+    var changed = this._applyRange(_start, _end);
     if (changed) {
       var params = {start: new Date(this.start), end: new Date(this.end)};
       this.body.emitter.emit('rangechange', params);

lib/timeline/Timeline.js

@@ -238,12 +238,14 @@ Timeline.prototype.focus = function(id, options) {
     }
   });
 
-  // calculate the new middle and interval for the window
-  var middle = (start + end) / 2;
-  var interval = Math.max((this.range.end - this.range.start), (end - start) * 1.1);
+  if (start !== null && end !== null) {
+    // calculate the new middle and interval for the window
+    var middle = (start + end) / 2;
+    var interval = Math.max((this.range.end - this.range.start), (end - start) * 1.1);
 
-  var animate = (options && options.animate !== undefined) ? options.animate : true;
-  this.range.setRange(middle - interval / 2, middle + interval / 2, animate);
+    var animate = (options && options.animate !== undefined) ? options.animate : true;
+    this.range.setRange(middle - interval / 2, middle + interval / 2, animate);
+  }
 };
 
 /**