Implemented function `moveTo(time, options)`

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>

lib/timeline/Core.js

@@ -389,6 +389,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